/* ==========================================================================
 * MySP Writer — tab "Novel saya"
 * Memakai variabel warna & komponen dari mysp-writer.css (.mysp-writer-*).
 * Semua yang khusus novel memakai awalan .mysp-writer-n-*
 * ========================================================================== */

/* ==========================================================================
 * BADGE AKSES & GEMBOK
 * ========================================================================== */

.mysp-writer-wrap .mysp-writer-n-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px 2px 8px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.mysp-writer-wrap .mysp-writer-n-badge .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.mysp-writer-wrap .mysp-writer-n-badge--free {
	background: var(--w-good-soft);
	color: var(--w-good-ink);
}

.mysp-writer-wrap .mysp-writer-n-badge--paid {
	background: var(--w-warn-soft);
	color: var(--w-warn-ink);
}

/* gembok kecil di depan judul bab */
.mysp-writer-wrap .mysp-writer-n-lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 6px;
	background: var(--w-warn-soft);
	border-radius: 6px;
	color: var(--w-warn-ink);
	vertical-align: middle;
}

.mysp-writer-wrap .mysp-writer-n-lock .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

/* ==========================================================================
 * TABEL (daftar novel & daftar bab)
 * ========================================================================== */

.mysp-writer-wrap .mysp-writer-n-table {
	width: 100% !important;
	margin: 0 !important;
	background: var(--w-surface);
	border: 1px solid var(--w-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--w-radius-lg);
	overflow: hidden;
}

/* cover novel berbentuk potret (2:3), bukan 16:9 */
.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-thumb-col {
	width: 48px;
}

.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-thumb-col img {
	width: 48px;
	height: 72px;
}

.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-thumb-empty {
	height: 72px;
}

.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-n-number-cell {
	width: 1%;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.mysp-writer-wrap .mysp-writer-n-table--chapters .mysp-writer-title-col {
	min-width: 200px;
}

/* ==========================================================================
 * HALAMAN FORM
 * ========================================================================== */

.mysp-writer-n-pagehead-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mysp-writer-wrap .mysp-writer-n-chapters {
	margin-top: 0;
}

.mysp-writer-wrap h3.mysp-writer-n-section-title {
	margin: 0;
	padding: 0;
	color: var(--w-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.mysp-writer-wrap .mysp-writer-field input[type="number"] {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 10px 12px;
	background: var(--w-surface);
	border: 1px solid #cdd3da;
	border-radius: var(--w-radius);
	box-shadow: none;
	color: var(--w-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
}

.mysp-writer-wrap .mysp-writer-field input[type="number"]:focus {
	border-color: var(--w-brand);
	outline: 2px solid var(--w-brand-soft);
}

.mysp-writer-wrap .mysp-writer-field.has-error input[type="number"] {
	border-color: var(--w-bad);
}

.mysp-writer-wrap .mysp-writer-n-counter {
	margin-top: 8px;
	color: var(--w-muted);
	font-size: 13px;
}

.mysp-writer-wrap .mysp-writer-n-counter b {
	color: var(--w-ink);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
 * SUB-TAB (Edit novel | Daftar bab)
 * Gaya "segmented" supaya berbeda dari tab menu utama di atasnya.
 * ========================================================================== */

.mysp-writer-wrap .mysp-writer-n-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	background: #eef1f4;
	border: 1px solid var(--w-line);
	border-radius: calc(var(--w-radius) + 4px);
	width: fit-content;
	max-width: 100%;
}

.mysp-writer-wrap .mysp-writer-n-subtab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--w-radius);
	color: var(--w-muted) !important;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s, color .15s, box-shadow .15s;
}

.mysp-writer-wrap .mysp-writer-n-subtab:hover {
	background: #e3e8ed;
	color: var(--w-ink) !important;
}

.mysp-writer-wrap .mysp-writer-n-subtab.is-active {
	background: var(--w-surface);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
	color: var(--w-brand) !important;
}

.mysp-writer-wrap .mysp-writer-n-subtab:focus-visible {
	outline: 2px solid var(--w-brand);
	outline-offset: 2px;
}

.mysp-writer-wrap .mysp-writer-n-subtab .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.mysp-writer-wrap .mysp-writer-n-subtab-count {
	min-width: 22px;
	padding: 0 7px;
	background: #d8dee5;
	border-radius: 999px;
	color: var(--w-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.mysp-writer-wrap .mysp-writer-n-subtab.is-active .mysp-writer-n-subtab-count {
	background: var(--w-brand-soft);
	color: var(--w-brand-dark);
}

.mysp-writer-wrap .mysp-writer-n-panel[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.mysp-writer-wrap .mysp-writer-n-subtabs {
		width: 100%;
	}

	.mysp-writer-wrap .mysp-writer-n-subtab {
		flex: 1 1 0;
		justify-content: center;
		padding: 8px 10px;
	}
}

/* ==========================================================================
 * PILIHAN AKSES (kartu radio Gratis / Berbayar)
 * ========================================================================== */

.mysp-writer-wrap .mysp-writer-n-access {
	display: grid;
	gap: 8px;
}

.mysp-writer-wrap .mysp-writer-n-access-opt {
	position: relative;
	display: block;
	cursor: pointer;
}

.mysp-writer-wrap .mysp-writer-n-access-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mysp-writer-wrap .mysp-writer-n-access-card {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 10px;
	padding: 12px 14px;
	background: var(--w-surface);
	border: 1.5px solid #cdd3da;
	border-radius: var(--w-radius);
	transition: border-color .15s, background .15s;
}

.mysp-writer-wrap .mysp-writer-n-access-card .dashicons {
	grid-row: 1 / span 2;
	align-self: center;
	width: 22px;
	height: 22px;
	font-size: 22px;
	color: var(--w-muted);
}

.mysp-writer-wrap .mysp-writer-n-access-card b {
	font-size: 15px;
}

/* istilah pendamping: Gratis (Free), Berbayar (Premium) */
.mysp-writer-wrap .mysp-writer-n-term {
	margin-left: 2px;
	color: var(--w-muted);
	font-size: 13px;
	font-weight: 600;
}

.mysp-writer-wrap .mysp-writer-n-access-card small {
	color: var(--w-muted);
	font-size: 13px;
	line-height: 1.4;
}

.mysp-writer-wrap .mysp-writer-n-access-opt:hover .mysp-writer-n-access-card {
	border-color: #aab3be;
}

.mysp-writer-wrap .mysp-writer-n-access-opt input:checked + .mysp-writer-n-access-card {
	background: var(--w-brand-soft);
	border-color: var(--w-brand);
}

.mysp-writer-wrap .mysp-writer-n-access-opt input:checked + .mysp-writer-n-access-card .dashicons {
	color: var(--w-brand-dark);
}

.mysp-writer-wrap .mysp-writer-n-access-opt input[value="paid"]:checked + .mysp-writer-n-access-card {
	background: var(--w-warn-soft);
	border-color: var(--w-warn);
}

.mysp-writer-wrap .mysp-writer-n-access-opt input[value="paid"]:checked + .mysp-writer-n-access-card .dashicons {
	color: var(--w-warn-ink);
}

.mysp-writer-wrap .mysp-writer-n-access-opt input:focus-visible + .mysp-writer-n-access-card {
	outline: 2px solid var(--w-brand);
	outline-offset: 2px;
}

.mysp-writer-wrap .mysp-writer-n-access-opt input:disabled + .mysp-writer-n-access-card {
	opacity: .55;
	cursor: not-allowed;
}

.mysp-writer-wrap .mysp-writer-n-access-opt input:disabled {
	cursor: not-allowed;
}

/* ==========================================================================
 * COVER NOVEL (potret 2:3)
 * ========================================================================== */

.mysp-writer-n-cover-box {
	position: relative;
	width: 100%;
	max-width: 220px;
	aspect-ratio: 2 / 3;
	margin: 0 auto;
	background: var(--w-bg);
	border: 1.5px dashed #9fb4c4;
	border-radius: var(--w-radius);
	overflow: hidden;
}

.mysp-writer-n-cover-box.has-image {
	border-style: solid;
	border-color: var(--w-line);
}

.mysp-writer-n-cover-preview {
	display: block;
	width: 100%;
	height: 100%;
}

.mysp-writer-n-cover-preview img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.mysp-writer-n-cover-box .mysp-writer-choose-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	color: var(--w-muted);
	font-size: 14px;
	text-align: center;
}

.mysp-writer-n-cover-box .mysp-writer-choose-image .dashicons {
	width: 32px;
	height: 32px;
	font-size: 32px;
}

.mysp-writer-n-cover-box .mysp-writer-choose-image small {
	font-size: 12px;
}

.mysp-writer-n-cover-change {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	padding: 8px;
	background: rgba(17, 24, 39, .72);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.mysp-writer-n-cover-box.has-image .mysp-writer-n-cover-change {
	display: block;
}

.mysp-writer-n-cover-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	background: rgba(17, 24, 39, .75);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.mysp-writer-n-cover-remove:hover {
	background: var(--w-bad);
}

.mysp-writer-n-cover-box.has-image .mysp-writer-n-cover-remove {
	display: flex;
}

/* ==========================================================================
 * RESPONSIVE
 * ========================================================================== */

@media (max-width: 768px) {

	.mysp-writer-n-pagehead-actions {
		width: 100%;
	}

	.mysp-writer-n-pagehead-actions .mysp-writer-btn {
		flex: 1;
	}

	/* tabel menjadi kartu */
	.mysp-writer-wrap .mysp-writer-n-table {
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.mysp-writer-wrap .mysp-writer-n-table thead {
		display: none;
	}

	.mysp-writer-wrap .mysp-writer-n-table,
	.mysp-writer-wrap .mysp-writer-n-table tbody {
		display: block;
	}

	.mysp-writer-wrap .mysp-writer-n-table tbody tr {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 4px 12px;
		margin-bottom: 12px;
		padding: 12px;
		background: var(--w-surface);
		border: 1px solid var(--w-line);
		border-radius: var(--w-radius-lg);
	}

	.mysp-writer-wrap .mysp-writer-n-table--chapters tbody tr {
		grid-template-columns: minmax(0, 1fr);
	}

	.mysp-writer-wrap .mysp-writer-n-table tbody td {
		display: block;
		padding: 0;
		border: 0;
	}

	.mysp-writer-wrap .mysp-writer-n-table tbody tr:hover td {
		background: transparent !important;
	}

	.mysp-writer-wrap .mysp-writer-n-table td.mysp-writer-thumb-cell {
		grid-row: 1 / span 5;
	}

	.mysp-writer-wrap .mysp-writer-n-table td.mysp-writer-title-col {
		grid-column: 2;
		min-width: 0;
		max-width: none;
	}

	.mysp-writer-wrap .mysp-writer-n-table--chapters td.mysp-writer-title-col {
		grid-column: 1;
	}

	.mysp-writer-wrap .mysp-writer-n-table td[data-label] {
		grid-column: 2;
		color: var(--w-muted);
		font-size: 13px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--chapters td[data-label] {
		grid-column: 1;
	}

	.mysp-writer-wrap .mysp-writer-n-table td[data-label="Bab"]::before,
	.mysp-writer-wrap .mysp-writer-n-table td[data-label="Like"]::before,
	.mysp-writer-wrap .mysp-writer-n-table td[data-label="Komentar"]::before,
	.mysp-writer-wrap .mysp-writer-n-table td[data-label="Kata"]::before,
	.mysp-writer-wrap .mysp-writer-n-table td[data-label="Diubah"]::before {
		content: attr(data-label) ": ";
	}

	.mysp-writer-wrap .mysp-writer-n-table td.mysp-writer-actions-cell {
		order: 10; /* di HP, tombol aksi tampil di bawah kartu */
		width: auto;
		grid-column: 1 / -1;
		margin-top: 6px;
		padding-top: 8px;
		border-top: 1px solid var(--w-line);
	}

	.mysp-writer-wrap .mysp-writer-n-table td.dataTables_empty {
		grid-column: 1 / -1;
	}

	.mysp-writer-wrap .mysp-writer-n-table tbody tr:has(td.dataTables_empty) {
		display: block;
	}

	.mysp-writer-n-cover-box {
		max-width: 180px;
	}
}

/* tab navigasi: sekarang bisa 3-4 tab, jadi boleh digeser di HP */
@media (max-width: 768px) {
	.mysp-writer-wrap .mysp-writer-tabs {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mysp-writer-wrap .mysp-writer-tabs a {
		flex: 1 0 auto;
		padding: 10px 12px;
		font-size: 14px;
		white-space: nowrap;
	}
}

/* Gambar bab: kotak lebih lebar (16:9) daripada cover novel (2:3). */
.mysp-writer-wrap .mysp-writer-n-cover-box--wide { aspect-ratio: 16 / 9; max-width: none; width: 100%; }
.mysp-writer-wrap .mysp-writer-n-cover-box--wide .mysp-writer-n-cover-preview img { object-fit: cover; }

/* ==========================================================================
 * HEADER TABEL: rata tengah, KAPITAL; lebar kolom proporsional di desktop
 * ========================================================================== */

@media (min-width: 769px) {
	.mysp-writer-wrap table.dataTable.mysp-writer-n-table {
		table-layout: fixed;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table thead th {
		text-align: center;
		text-transform: uppercase;
		letter-spacing: .04em;
		font-size: 12px;
		white-space: nowrap;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td {
		text-align: center;
		overflow-wrap: anywhere;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td.mysp-writer-title-col {
		text-align: left;
	}

	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-actions  { width: 12%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-cover    { width: 7%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-access   { width: 9%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-count    { width: 5%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-like     { width: 5%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-views    { width: 6%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-comment  { width: 8%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-status   { width: 8%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-progress { width: 10%; }
	.mysp-writer-wrap .mysp-writer-n-table th.mysp-writer-n-col-date     { width: 11%; }
	/* kolom Judul mengambil sisa lebar */

	.mysp-writer-wrap .mysp-writer-n-table td.mysp-writer-actions-cell,
	.mysp-writer-wrap .mysp-writer-n-table td.mysp-writer-n-number-cell {
		width: auto;
	}

	.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-row-actions {
		justify-content: center;
	}

	.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-thumb-col {
		margin: 0 auto;
	}
}


/* ==========================================================================
 * PANEL NOTIFIKASI: komentar baru per novel
 * ========================================================================== */


.mysp-writer-wrap .mysp-writer-wc-newbadge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--w-warn-soft);
	color: var(--w-warn-ink);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.mysp-writer-wrap .mysp-writer-wc-notice { margin: 0 0 16px; padding: 12px 14px; background: var(--w-surface); border: 1px solid #f3d78a; border-left: 4px solid var(--w-warn); border-radius: var(--w-radius); }
.mysp-writer-wrap .mysp-writer-wc-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mysp-writer-wrap ul.mysp-writer-wc-notice-list,
.mysp-writer-wrap ul.mysp-writer-wc-snips { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mysp-writer-wrap ul.mysp-writer-wc-notice-list > li { margin: 0 !important; padding: 10px 0 !important; border-top: 1px solid var(--w-line); list-style: none !important; }
.mysp-writer-wrap .mysp-writer-wc-notice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mysp-writer-wrap .mysp-writer-wc-notice-title { font-weight: 600; color: var(--w-ink); }
.mysp-writer-wrap ul.mysp-writer-wc-snips { margin-top: 4px !important; }
.mysp-writer-wrap ul.mysp-writer-wc-snips > li { margin: 2px 0 !important; padding: 0 !important; list-style: none !important; font-size: 13px; }
.mysp-writer-wrap ul.mysp-writer-wc-snips a { color: var(--w-muted); text-decoration: none; }
.mysp-writer-wrap ul.mysp-writer-wc-snips a:hover { color: var(--w-brand); text-decoration: underline; }
.mysp-writer-wrap ul.mysp-writer-wc-snips a strong { color: var(--w-ink); }
.mysp-writer-wrap button.mysp-writer-wc-seen-btn {
	margin-left: auto;
	padding: 4px 12px !important;
	border: 1px solid var(--w-line) !important;
	border-radius: 999px !important;
	background: var(--w-surface) !important;
	color: var(--w-ink) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.mysp-writer-wrap button.mysp-writer-wc-seen-btn:hover { border-color: var(--w-brand) !important; color: var(--w-brand) !important; }
.mysp-writer-wrap button.mysp-writer-wc-seen-btn:disabled { opacity: .6; cursor: default; }

/* ==========================================================================
 * DAFTAR NOVEL (dashboard): kartu ringkas di HP
 *  - Bab digabung ke baris judul sebagai badge
 *  - Like + Komentar satu baris, hanya ikon
 *  - Status + Diubah satu baris (ikon pensil + tanggal)
 * ========================================================================== */

/* badge Bab hanya untuk HP; di desktop ada kolom Bab sendiri */
.mysp-writer-wrap .mysp-writer-n-bab-badge { display: none; }

@media (max-width: 768px) {

	.mysp-writer-wrap .mysp-writer-n-table--novels tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 8px;
		position: relative;
		padding: 10px 10px 10px 70px; /* ruang untuk cover di kiri */
		margin-bottom: 10px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels tbody tr:has(td.dataTables_empty) {
		padding-left: 12px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-thumb-cell {
		position: absolute;
		left: 10px;
		top: 10px;
		width: 48px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-title-col {
		flex: 0 0 100%;
		order: 0;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels .mysp-writer-post-cats {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px 4px;
	}

	/* kolom Bab diganti badge di baris judul */
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-bab { display: none; }

	.mysp-writer-wrap .mysp-writer-n-table--novels .mysp-writer-n-bab-badge {
		display: inline-block;
		margin-left: 2px;
		padding: 0 8px;
		background: var(--w-brand-soft);
		border: 1px solid #b9dcf2;
		border-radius: 999px;
		color: var(--w-brand-dark);
		font-size: 11px;
		font-weight: 700;
		line-height: 18px;
		white-space: nowrap;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels .mysp-writer-n-bab-badge::after {
		content: attr(data-bab) " Bab";
	}

	/* baris info: Akses, Status, Progres, Diubah ... Like, Dibaca, Komentar */
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-access   { order: 1; }
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-status   { order: 2; }
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-progress { order: 3; }
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-date     { order: 4; }
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-like     { order: 5; margin-left: auto; }
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-views    { order: 6; }
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-comment  { order: 7; }

	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-like,
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-views,
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-comment,
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-n-td-date {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		white-space: nowrap;
		font-size: 12px;
		font-variant-numeric: tabular-nums;
	}

	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-like::before,
	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-views::before,
	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-comment::before,
	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-date::before {
		font-family: dashicons;
		font-size: 15px;
		width: 15px;
		height: 15px;
		line-height: 15px;
		font-weight: 400;
	}

	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-like::before    { content: "\f487"; color: #e11d48; } /* heart */
	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-views::before   { content: "\f177"; color: var(--w-muted); } /* visibility (mata) */
	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-comment::before { content: "\f101"; color: var(--w-muted); } /* admin-comments */
	.mysp-writer-wrap .mysp-writer-n-table.mysp-writer-n-table--novels td.mysp-writer-n-td-date::before    { content: "\f464"; color: var(--w-muted); } /* edit (pensil) */

	/* tombol aksi tetap selebar kartu (melewati ruang cover) */
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-actions-cell {
		flex: 0 0 calc(100% + 60px);
		margin-left: -60px;
		margin-top: 4px;
		order: 10;
	}
}

/* HP: DataTables memberi bayangan inset abu-abu (zebra/kolom terurut/hover) pada tiap sel.
   Pada kartu, bayangan itu berbentuk kotak per sel sehingga keluar dari sudut membulat kartu. */
@media (max-width: 768px) {
	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody tr,
	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody tr > *,
	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody tr:hover > * {
		box-shadow: none !important;
		background-color: transparent !important;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody tr {
		background-color: var(--w-surface) !important;
	}
}


/* ==========================================================================
 * TABEL DASHBOARD v1.7.19
 *  - Desktop: judul satu baris dengan "…", kolom angka/aksi compact (fit isi),
 *    sisa lebar untuk judul, scroll horizontal jika layar sempit.
 *  - HP: kartu lebih rapat (gap, padding, tombol aksi).
 * ========================================================================== */

@media (min-width: 769px) {

	.mysp-writer-wrap .mysp-writer-tablescroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table {
		table-layout: auto;
		width: 100% !important;
	}

	/* semua kolom selain judul: selebar isinya saja */
	.mysp-writer-wrap table.dataTable.mysp-writer-n-table thead th,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table thead th {
		width: 1%;
		padding: 10px 12px;
		white-space: nowrap;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table tbody td {
		padding: 8px 12px;
		white-space: nowrap;
		overflow-wrap: normal;
	}

	/* kolom judul: ambil sisa lebar, teks dipotong dengan "…" */
	.mysp-writer-wrap table.dataTable.mysp-writer-n-table thead th.mysp-writer-n-col-title,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table thead th:nth-child(3) {
		width: 100%;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td.mysp-writer-title-col,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table tbody td.mysp-writer-title-col {
		width: 100%;
		min-width: 180px;
		max-width: 0; /* trik: sel mengikuti sisa lebar tabel, bukan lebar teks */
		overflow: hidden;
		text-align: left;
	}

	.mysp-writer-wrap td.mysp-writer-title-col a.mysp-writer-post-title,
	.mysp-writer-wrap td.mysp-writer-title-col .mysp-writer-post-cats {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td.mysp-writer-title-col .mysp-writer-post-cats,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table tbody td.mysp-writer-title-col .mysp-writer-post-cats {
		margin-top: 0;
	}

	/* thumbnail lebih kecil supaya baris tidak tinggi */
	.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-thumb-col,
	.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-thumb-col img,
	.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-thumb-empty { width: 40px; height: 60px; }
	.mysp-writer-wrap .mysp-writer-n-table--chapters .mysp-writer-thumb-col,
	.mysp-writer-wrap .mysp-writer-n-table--chapters .mysp-writer-thumb-col img,
	.mysp-writer-wrap .mysp-writer-n-table--chapters .mysp-writer-thumb-empty { width: 80px; height: 45px; }
}

@media (max-width: 768px) {

	/* judul maksimal 2 baris, sisanya "…" */
	.mysp-writer-wrap td.mysp-writer-title-col a.mysp-writer-post-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 14px;
		line-height: 1.3;
	}

	.mysp-writer-wrap td.mysp-writer-title-col .mysp-writer-post-cats {
		margin-top: 0;
		font-size: 12px;
		line-height: 1.3;
	}

	/* padding & garis bawaan DataTables (12px 14px + border-top di tiap sel) lebih spesifik
	   daripada aturan kartu di atas, sehingga sel di HP jadi tinggi: matikan di sini. */
	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table tbody td {
		padding: 0;
		border: 0;
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td.mysp-writer-actions-cell,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table tbody td.mysp-writer-actions-cell {
		padding-top: 4px;
		border-top: 1px solid var(--w-line);
	}

	.mysp-writer-wrap table.dataTable.mysp-writer-n-table tbody td.dataTables_empty,
	.mysp-writer-wrap table.dataTable#mysp-writer-post-table tbody td.dataTables_empty {
		padding: 20px 12px;
	}

	.mysp-writer-wrap .mysp-writer-n-table .mysp-writer-status {
		padding: 0 8px;
		font-size: 12px;
		line-height: 1.6;
	}

	/* kartu lebih rapat */
	.mysp-writer-wrap .mysp-writer-n-table tbody tr,
	.mysp-writer-wrap #mysp-writer-post-table tbody tr {
		gap: 2px 10px;
		padding: 8px;
		margin-bottom: 8px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels tbody tr {
		gap: 3px 8px;
		padding: 8px 8px 8px 64px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-thumb-cell {
		left: 8px;
		top: 8px;
		width: 44px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-thumb-cell .mysp-writer-thumb-col,
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-thumb-cell img,
	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-thumb-cell .mysp-writer-thumb-empty {
		width: 44px;
		height: 66px;
	}

	.mysp-writer-wrap .mysp-writer-n-table td.mysp-writer-actions-cell,
	.mysp-writer-wrap #mysp-writer-post-table td.mysp-writer-actions-cell {
		margin-top: 2px;
		padding-top: 4px;
	}

	.mysp-writer-wrap .mysp-writer-n-table--novels td.mysp-writer-actions-cell {
		flex: 0 0 calc(100% + 56px);
		margin-left: -56px;
		margin-top: 2px;
	}

	.mysp-writer-wrap .mysp-writer-n-table a.mysp-writer-icon-btn,
	.mysp-writer-wrap #mysp-writer-post-table a.mysp-writer-icon-btn {
		width: 30px;
		height: 30px;
	}

	.mysp-writer-wrap .mysp-writer-n-table td[data-label],
	.mysp-writer-wrap #mysp-writer-post-table td[data-label] {
		font-size: 12px;
		line-height: 1.3;
	}
}


/* ==========================================================================
 * PROGRES CERITA (Bersambung / Tamat / Hiatus)
 * Dibuat berbeda dari badge Status (Terbit / Menunggu review / Draft):
 * bentuk garis tepi + latar tipis, bukan pil penuh.
 * ========================================================================== */
.mysp-writer-wrap .mysp-writer-n-progress {
	display: inline-block;
	padding: 2px 8px;
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}

.mysp-writer-wrap .mysp-writer-n-progress--ongoing   { color: #0b6b8a; background: #ecf8fc; }
.mysp-writer-wrap .mysp-writer-n-progress--completed { color: #166534; background: #effaf2; }
.mysp-writer-wrap .mysp-writer-n-progress--hiatus    { color: #92400e; background: #fff8e6; }