@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap");

:root{
  --navy:#2b1416; --navy-2:#3d1d20; --brand:#c8302a; --sakura:#e8a317;
  --bg:#faf6f3; --card:#fff; --ink:#1e1617; --ink-2:#463a3b; --muted:#7a6d6e; --line:#efe5e1;
  --ok:#1f9d6b; --warn:#e08600; --bad:#d6342c; --info:#2f6fd6;
  --t1:#e0362f; --t2:#21a05a; --t3:#2f6fd6; --t4:#8b46c9; --t5:#8d8a8e;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --zh:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --jp:var(--zh);
  --shadow:0 1px 0 #f1e6e2,0 12px 32px -22px rgba(90,30,25,.35);
  --side:248px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{overflow-x:clip}
body{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--navy);color:#ead3d0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:18px 14px}
.sb-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:19px;letter-spacing:-.02em;padding:4px 8px 18px}
.logo-mark{width:32px;height:32px;border-radius:8px;background:var(--sakura);color:#fff;display:grid;place-items:center;font-family:var(--jp);font-size:16px;transform:rotate(-6deg);flex:none}
.sb-logo small{display:block;font-size:11px;font-weight:600;color:#d4a9a5;letter-spacing:0}
.sb-group{margin-top:14px}
.sb-group > p{font-size:12px;font-weight:600;color:#c79894;padding:0 10px 6px}
.sb-link{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;font-weight:500;font-size:14px;color:#efd9d6}
.sb-link svg{width:18px;height:18px;flex:none;opacity:.85}
.sb-link:hover{background:var(--navy-2);color:#fff}
.sb-link[aria-current]{background:#fff;color:var(--navy);font-weight:700}
.sb-link[aria-current] svg{opacity:1;color:var(--sakura)}
.sb-link .count{margin-left:auto;background:var(--sakura);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.sb-foot{margin-top:auto;padding-top:16px}
.sb-site{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;background:var(--navy-2);font-size:13px;color:#fff;font-weight:600}
.sb-site:hover{background:#552a2e}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:64px;padding:0 28px;background:color-mix(in srgb,#fff 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:999px;height:40px;padding:0 16px;width:min(420px,100%);color:var(--muted)}
.tb-search svg,.sb-site svg{width:18px;height:18px;flex:none}
.tb-search input{border:0;outline:0;background:none;flex:1;min-width:0}
.tb-search kbd{font-family:var(--sans);font-size:11px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:999px;border:0;background:var(--bg);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:#f3e7e4}
.icon-btn svg{width:18px;height:18px}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--sakura);box-shadow:0 0 0 2px #fff}
.me{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--bg);cursor:pointer;border:0}
.me b{font-size:13px;display:block;line-height:1.2}
.me small{font-size:11px;color:var(--muted);display:block;text-align:left}
.menu-toggle{display:none}

.content{padding:28px;max-width:1360px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.page-head p{color:var(--muted);margin-top:4px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Primitives ---------- */
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e2e5ff,#ffe0ec);color:var(--brand);font-weight:700;font-size:12px;display:grid;place-items:center;flex:none;overflow:hidden}
.avatar.lg{width:56px;height:56px;font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:#2632c4;border-color:#2632c4}
.btn svg{width:16px;height:16px}
.btn.pink{background:var(--sakura);border-color:var(--sakura)}
.btn.pink:hover{background:#e83c78}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:#c9cce6;background:#fafbff}
.btn.danger{background:#fff;color:var(--bad);border-color:#f6c9d0}
.btn.danger:hover{background:#fff1f3}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{color:var(--brand);font-weight:600}
.link:hover{text-decoration:underline}

.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0}
.card-h h2{font-size:16px;font-weight:800}
.card-h p{font-size:13px;color:var(--muted)}
.card-b{padding:16px 20px 20px}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;background:#eef0f7;color:var(--ink-2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.published{background:#dcf5ef;color:#00785f}
.pill.draft{background:#eef0f7;color:#555a75}
.pill.scheduled{background:#e6e9ff;color:#2a35c2}
.pill.review{background:#fff1d6;color:#a35d00}
.pill.spam,.pill.suspended{background:#ffe3e7;color:#c71f3a}
.pill.pending{background:#fff1d6;color:#a35d00}
.pill.approved,.pill.active{background:#dcf5ef;color:#00785f}
.pill.invited{background:#e6e9ff;color:#2a35c2}
.pill.imported{background:#dcf5ef;color:#00785f}
.pill.skipped{background:#eef0f7;color:#555a75}
.pill.failed{background:#ffe3e7;color:#c71f3a}

.cat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:5px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);white-space:nowrap}
.cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.c-anime{--c:var(--c-anime)} .c-manga{--c:var(--c-manga)} .c-movie{--c:var(--c-movie)} .c-game{--c:var(--c-game)}
.c-event{--c:var(--c-event)} .c-industry{--c:var(--c-industry)} .c-review{--c:var(--c-review)}

.thumb{width:64px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#e7e9ff,#ffe3ee);flex:none}
.thumb img{width:100%;height:100%;object-fit:cover}

/* ---------- Forms ---------- */
.field{width:100%;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 14px;font-size:14px;outline:0}
.field:focus{border-color:var(--brand);box-shadow:0 0 0 3px #f8dcd9}
textarea.field{height:auto;min-height:96px;padding:10px 14px;resize:vertical}
select.field{padding-right:32px;cursor:pointer}
.lbl{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.lbl small{font-weight:400;color:var(--muted)}
.hint{font-size:12px;color:var(--muted);font-weight:400}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--brand)}
.switch{position:relative;display:inline-block;width:40px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:#d6d9ec;transition:background .15s;pointer-events:none}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked + span{background:var(--brand)}
.switch input:checked + span::after{transform:translateX(16px)}
.row-set{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.row-set:last-child{border:0}
.row-set b{display:block;font-size:14px}
.row-set p{font-size:13px;color:var(--muted)}

/* ---------- Tabs / filters ---------- */
.tabs{display:flex;gap:4px;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--shadow);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.stats.three{grid-template-columns:repeat(3,1fr)}
.tabs button{border:0;background:none;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink-2);white-space:nowrap}
.tabs button span{font-size:11px;color:var(--muted);margin-left:4px}
.tabs button:hover{background:var(--bg)}
.tabs button[aria-pressed="true"]{background:var(--navy);color:#fff}
.tabs button[aria-pressed="true"] span{color:#b9bdf0}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.toolbar .field{height:38px;width:auto}
.toolbar .grow{flex:1;min-width:180px}
.bulk{display:none;align-items:center;gap:10px;padding:10px 16px;background:#fbecea;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.bulk.show{display:flex}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fbfbfe}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#fafbff}
.tbl tbody tr.sel td{background:#f2f4ff}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .w-check{width:44px}
.tbl .title-cell{display:flex;align-items:center;gap:12px;min-width:280px}
.tbl .title-cell b{display:block;font-weight:600;line-height:1.35}
.tbl .title-cell b a:hover{color:var(--brand)}
.tbl .title-cell small{color:var(--muted);font-size:12px}
.row-actions{display:flex;gap:4px;justify-content:flex-end}
.row-actions button,.row-actions a{width:32px;height:32px;border-radius:8px;border:0;background:none;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.row-actions button:hover,.row-actions a:hover{background:var(--bg);color:var(--ink)}
.row-actions svg{width:16px;height:16px}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;flex-wrap:wrap}
.pager{display:flex;gap:4px}
.pager button{min-width:32px;height:32px;border-radius:8px;border:0;background:none;font-weight:600;cursor:pointer;color:var(--ink-2)}
.pager button:hover{background:var(--bg)}
.pager button[aria-current]{background:var(--brand);color:#fff}
.empty-row td{text-align:center;color:var(--muted);padding:40px 16px}

/* ---------- Dashboard ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.stat{padding:18px 20px;position:relative;overflow:hidden}
.stat .k{font-size:13px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:8px}
.stat .k i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--t);color:var(--tc)}
.stat .k i svg{width:16px;height:16px}
.stat .v{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:10px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .d{font-size:12px;font-weight:600;margin-top:6px;color:var(--muted)}
.stat .d b{color:var(--ok)}
.stat .d b.down{color:var(--bad)}
.dash{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:#eceef7}
.chart .axis text{font-size:11px;fill:var(--muted);font-family:var(--sans)}
.chart .line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:url(#fillGrad)}
.chart .cross{stroke:#c9cce6;stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart.on .cross{opacity:1}
.chart .dot{fill:var(--brand);stroke:#fff;stroke-width:2;opacity:0}
.chart.on .dot{opacity:1}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .bar{fill:var(--brand)}
.chart .bar:hover{fill:#2632c4}
.tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;font-size:12px;padding:8px 10px;border-radius:10px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .1s;z-index:5}
.tip b{display:block;font-size:14px}
.tip.show{opacity:1}
.range{display:flex;gap:2px;background:var(--bg);border-radius:999px;padding:3px}
.range button{border:0;background:none;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted)}
.range button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(27,31,94,.12)}
.hbars{display:grid;gap:12px}
.hbar{display:grid;grid-template-columns:84px 1fr 52px;gap:10px;align-items:center;font-size:13px}
.hbar i{height:10px;border-radius:4px;background:var(--bg);position:relative;overflow:hidden}
.hbar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--brand);border-radius:4px}
.hbar b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border:0}
.list .meta{font-size:12px;color:var(--muted)}
.list p{font-size:13px;line-height:1.45}
.list .grow{flex:1;min-width:0}
.list time{font-size:12px;font-weight:700;color:var(--brand);background:#fbecea;border-radius:6px;padding:2px 6px;white-space:nowrap}

/* ---------- Editor ---------- */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.ed-title{width:100%;border:0;outline:0;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;resize:none;background:none;padding:0}
.ed-dek{width:100%;border:0;outline:0;font-size:17px;color:var(--ink-2);resize:none;background:none;margin-top:10px}
.ed-bar{display:flex;gap:2px;flex-wrap:wrap;padding:8px;border-radius:12px;background:var(--bg);margin:18px 0 0;position:sticky;top:72px;z-index:2}
.ed-bar button{height:32px;min-width:32px;padding:0 8px;border:0;border-radius:8px;background:none;cursor:pointer;font-weight:700;color:var(--ink-2);display:grid;place-items:center}
.ed-bar button:hover{background:#fff}
.ed-bar svg{width:16px;height:16px}
.ed-bar .sep{width:1px;background:#d9dcef;margin:4px 6px}
.ed-body{min-height:420px;outline:0;padding:20px 2px;font-size:17px;line-height:1.75;font-family:Georgia,"Literata",serif}
.ed-body > * + *{margin-top:1em}
.ed-body h2{font-family:var(--sans);font-size:22px;font-weight:800}
.ed-body blockquote{background:#fff0f5;border-radius:12px;padding:14px 18px}
.ed-body ul{list-style:disc;padding-left:1.3em}
.ed-body:empty::before{content:attr(data-placeholder);color:var(--muted)}
.ed-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;border-top:1px solid var(--line);padding-top:10px}
.panel + .panel{margin-top:16px}
.panel .card-b{display:grid;gap:14px}
.status-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.status-row span{color:var(--muted)}
.cover{border:2px dashed #d3d6ef;border-radius:14px;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;cursor:pointer;overflow:hidden;background:#fafbff;position:relative}
.cover:hover{border-color:var(--brand);color:var(--brand)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line);border-radius:12px;padding:6px;min-height:42px;align-items:center}
.chips:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px #f8dcd9}
.chips span{background:#fbecea;color:var(--brand);font-size:12px;font-weight:600;border-radius:999px;padding:3px 6px 3px 10px;display:inline-flex;align-items:center;gap:4px}
.chips span button{border:0;background:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;width:16px}
.chips input{border:0;outline:0;flex:1;min-width:80px;font-size:13px;padding:4px}
.serp{border-radius:12px;background:var(--bg);padding:12px 14px;font-size:13px}
.serp .u{color:#00785f;font-size:12px}
.serp .t{color:#1a0dab;font-size:16px;line-height:1.3;margin:2px 0}
.serp .d{color:var(--ink-2)}
.meter{height:4px;border-radius:2px;background:var(--line);margin-top:4px;overflow:hidden}
.meter i{display:block;height:100%;width:var(--w);background:var(--ok)}
.meter i.over{background:var(--bad)}

/* ---------- Categories ---------- */
.split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches label{position:relative;cursor:pointer}
.swatches input{position:absolute;opacity:0}
.swatches span{display:block;width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px transparent}
.swatches input:checked + span{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.swatches input:focus-visible + span{outline:2px solid var(--brand);outline-offset:4px}
.cat-dot{width:12px;height:12px;border-radius:50%;background:var(--c);display:inline-block}

/* ---------- Media ---------- */
.drop{border:2px dashed #cfd3ee;border-radius:18px;padding:28px;text-align:center;color:var(--muted);background:#fff;margin-bottom:16px;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--sakura);background:#fff5f9}
.drop b{color:var(--ink);font-size:15px;display:block;margin-bottom:4px}
.media{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mitem{border:0;padding:0;background:none;cursor:pointer;text-align:left;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:#fff}
.mitem .im{aspect-ratio:4/3;background:linear-gradient(135deg,#e7e9ff,#ffe3ee);overflow:hidden}
.mitem .im img{width:100%;height:100%;object-fit:cover}
.mitem p{font-size:12px;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.mitem:hover{box-shadow:0 0 0 2px #c9cdf3}
.mitem[aria-pressed="true"]{box-shadow:0 0 0 3px var(--sakura)}
.mdetail .im{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#e7e9ff,#ffe3ee);margin-bottom:12px}
.mdetail .im img{width:100%;height:100%;object-fit:cover}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;margin-bottom:12px}
.kv dt{color:var(--muted)}
.kv dd{text-align:right;font-weight:600;word-break:break-all}

/* ---------- Comments ---------- */
.cm{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.cm:last-child{border:0}
.cm header{font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cm header span{color:var(--muted)}
.cm p{margin:4px 0 6px;font-size:14px}
.cm .on{font-size:12px;color:var(--muted)}
.cm .on a{color:var(--brand);font-weight:600}
.cm .acts{display:flex;gap:6px;align-items:flex-start}
.flag{font-size:11px;font-weight:700;color:var(--bad);background:#ffe3e7;border-radius:4px;padding:1px 6px}

/* ---------- Users ---------- */
.role{font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;background:#efe5ff;color:#6b2fd1}
.role.teacher{background:#e3f4ec;color:#167a52}
.role.writer{background:#dcf5ef;color:#00785f}
.role.admin{background:#ffe4ee;color:#c42563}

/* ---------- Settings ---------- */
.settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.snav{padding:8px}
.snav a{display:block;padding:9px 12px;border-radius:10px;font-weight:600;color:var(--ink-2)}
.snav a:hover{background:var(--bg)}
.snav a[aria-current]{background:#fbecea;color:var(--brand)}
.spanel{display:none}
.spanel.on{display:block}
.save-bar{position:sticky;bottom:16px;display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ---------- Drawer / modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(22,24,60,.4);z-index:80;display:none}
.overlay.open{display:block}
.drawer-r{visibility:hidden;position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#fff;z-index:90;transform:translateX(100%);transition:transform .25s cubic-bezier(.2,.7,.2,1),visibility .25s;display:flex;flex-direction:column}
.drawer-r.open{transform:none;visibility:visible}
.drawer-r:not(.open){display:none}
.drawer-r header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-r header h2{font-size:18px;font-weight:800}
.drawer-r .body{padding:20px 22px;overflow-y:auto;display:grid;gap:14px;flex:1;align-content:start}
.drawer-r footer{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.x{border:0;background:var(--bg);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1}

/* ---------- Yes/no dialog (ask() in admin.js) ---------- */
.ask{margin:auto;border:0;padding:0;border-radius:18px;width:min(420px,calc(100vw - 32px));background:#fff;color:var(--ink);box-shadow:0 24px 64px -24px rgba(22,24,60,.45)}
.ask::backdrop{background:rgba(22,24,60,.4)}
.ask[open]{animation:ask-in .16s cubic-bezier(.2,.7,.2,1)}
@keyframes ask-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.ask-box{padding:22px 22px 18px;display:grid;gap:6px}
.ask h2{font-size:17px;font-weight:800;letter-spacing:-.01em}
.ask p{color:var(--ink-2);overflow-wrap:anywhere}
.ask-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.btn.solid-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.solid-danger:hover{background:#d62a45;border-color:#d62a45}
@media (prefers-reduced-motion:reduce){.ask[open]{animation:none}}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;background:var(--navy);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:13px;pointer-events:none;transition:opacity .2s,transform .2s;z-index:120;display:flex;gap:8px;align-items:center}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sakura)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{background:var(--navy);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-art::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--sakura);opacity:.2;right:-160px;bottom:-160px}
.login-art::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:40px solid var(--brand);opacity:.5;left:-80px;top:38%}
.login-art > *{position:relative;z-index:1}
.login-art h1{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:14ch}
.login-art p{color:#c3c6f3;max-width:42ch;margin-top:14px;font-size:16px}
.login-art .jp{font-family:var(--jp);font-size:96px;line-height:1;color:var(--sakura);writing-mode:vertical-rl;position:absolute;right:56px;top:48px;inline-size:max-content;white-space:nowrap}
.login-form{display:grid;place-items:center;padding:40px 24px;background:#fff}
.login-form form{width:min(380px,100%);display:grid;gap:16px}
.login-form h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.login-form .sub{color:var(--muted);margin-top:-8px}
.login-form .btn{height:46px;width:100%}
.login-form .field{height:46px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}
.or::before,.or::after{content:"";height:1px;flex:1;background:var(--line)}
.err{color:var(--bad);font-size:13px;font-weight:600;min-height:1.2em}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .dash,.editor,.media{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:1320;transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:none}
  .menu-toggle{display:grid}
  .topbar{padding:0 16px}
  .tb-search{display:none}
  .me div{display:none}
  .me{padding:4px}
  .content{padding:20px 16px}
  .split,.settings{grid-template-columns:minmax(0,1fr)}
  .login{grid-template-columns:1fr}
  .login-art{padding:32px 24px;min-height:240px}
  .login-art h1{font-size:30px}
  .login-art .jp{font-size:56px;right:24px;top:24px}
}
@media (max-width:600px){
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stats.three{grid-template-columns:1fr}
  .tabs{border-radius:14px}
  .stat{padding:14px}
  .stat .v{font-size:22px}
  .form-grid{grid-template-columns:1fr}
  .page-head h1{font-size:22px}
  .cm{grid-template-columns:36px minmax(0,1fr)}
  .cm .acts{grid-column:2}
  .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Dreamland News additions ---------- */
.notice{background:#fff1d6;color:#7a4a00;border-radius:12px;padding:12px 16px;font-size:13px;font-weight:600;margin-bottom:16px}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:12px;word-break:break-all}
.linkbox code{flex:1}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.picker-grid .mitem p{font-size:11px;padding:6px 8px}
.rev-rows{display:grid;gap:8px}
.rev-row{display:grid;grid-template-columns:1fr 80px 32px;gap:8px;align-items:center}
.rev-row .field{height:36px}
.rev-row button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:18px}
.msg{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:0}
.msg.unread b{color:var(--brand)}
.msg p{white-space:pre-wrap;margin-top:4px}
.msg .meta{font-size:12px;color:var(--muted)}
.inline-err{color:var(--bad);font-size:13px;font-weight:600;min-height:1.2em}

/* ---------- TinyMCE post editor ---------- */
/* the media picker must sit above TinyMCE (including fullscreen) */
.drawer-r{z-index:1310}
.overlay.open{z-index:1300}

/* ---------- color picker (categories) ---------- */
.color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.color-pick{position:relative;width:42px;height:42px;flex:none;cursor:pointer}
.color-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.color-pick span{display:block;width:100%;height:100%;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.color-pick:focus-within span{box-shadow:0 0 0 3px #f8dcd9,0 0 0 1px var(--c)}
.color-row .field{width:120px;font-family:ui-monospace,monospace;text-transform:lowercase}
.color-row .field.bad{border-color:var(--bad)}
.color-row .cat{font-size:13px}

/* settings → logo and favicon */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.brand-pick{height:120px;border:2px dashed #d3d6ef;border-radius:14px;display:grid;place-items:center;padding:16px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:400;overflow:hidden}
.brand-pick:hover{border-color:var(--brand);color:var(--brand)}
.brand-pick img{max-width:100%;max-height:100%;object-fit:contain}
.brand-pick.on-light{background:#fff}
.brand-pick.on-dark{background:#0e1020;color:#8d91ad}
.brand-pick.fav{width:120px;background:repeating-conic-gradient(#f1f2f8 0 25%,#fff 0 50%) 0 0/16px 16px}
.brand-pick.fav img{width:64px;height:64px}
.brand-clear{border:0;background:none;cursor:pointer;justify-self:start;padding:0;font-size:13px}

/* Crawl: article preview inside the review drawer, test results on the sources page */
.sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.err-text{color:var(--bad);font-size:12px}
@media (max-width:640px){.sel-grid{grid-template-columns:1fr}}
.job-bar{height:8px;border-radius:999px;background:var(--bg);overflow:hidden}
.job-bar span{display:block;height:100%;width:0;background:var(--brand);border-radius:inherit;transition:width .4s}

/* =====================================================================
   Học tiếng Trung additions
   ===================================================================== */
.login-art p{color:#ead3d0}
.muted{color:var(--muted)}
.zh{font-family:var(--zh);font-weight:500}
.py{font-family:var(--sans);letter-spacing:.01em}
.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}.t4{color:var(--t4)}.t5{color:var(--t5)}
.nav-zh{width:18px;height:18px;flex:none;display:grid;place-items:center;font-family:var(--zh);font-size:15px;font-weight:700;opacity:.85}
.sb-link[aria-current] .nav-zh{color:var(--sakura);opacity:1}
.logo-mark{font-family:var(--zh)}

/* HSK tags */
.hsk{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;background:#f4ece9;color:var(--ink-2);white-space:nowrap}
.hsk.h1{background:#e3f4ec;color:#167a52}.hsk.h2{background:#e2efff;color:#2459b3}.hsk.h3{background:#fff2d9;color:#9a5b00}
.hsk.h4{background:#f3e6ff;color:#7130b0}.hsk.h5{background:#ffe5e3;color:#b0261f}.hsk.h6{background:#e0f5f7;color:#0f7380}
.hsk.h7,.hsk.h8,.hsk.h9{background:#2b1416;color:#fff}.hsk.none{background:none;color:var(--muted)}
.pill.archived,.pill.banned{background:#f1e9e7;color:#6f5f60}
.pill.invited{background:#fff2d9;color:#9a5b00}
.qt{display:inline-flex;height:20px;align-items:center;padding:0 7px;border-radius:6px;background:#fbecea;color:var(--brand);font-size:11px;font-weight:700}

/* small round buttons, sound */
.icon-btn.sm{width:30px;height:30px}
.icon-btn.sm svg{width:15px;height:15px}
.icon-btn.sound{color:var(--muted);background:#f6efec}
.icon-btn.sound.has{color:var(--brand);background:#fbecea}
.link{background:none;border:0;cursor:pointer;color:var(--brand);font-weight:600;font-size:13px}

/* table cells with Chinese */
.tbl .zh-cell{display:flex;align-items:center;gap:10px}
.tbl .zh-cell .zh{font-size:22px;line-height:1.1}
.tbl .zh-cell small{display:block;color:var(--muted);font-size:12px}
.tbl .thumb-sm{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#f4ece9;flex:none}
.tbl .meaning{max-width:280px;color:var(--ink-2)}
.tbl tr.clickable{cursor:pointer}
.flags{display:flex;gap:4px}
.flags i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#f4ece9;color:#c7b9b7}
.flags i.on{background:#e3f4ec;color:#167a52}
.flags svg{width:13px;height:13px}

/* media fields inside forms */
.media-field{display:flex;align-items:center;gap:8px;min-height:42px;border:1px dashed var(--line);border-radius:12px;padding:6px 10px}
.media-field .mf-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.media-field.image{align-items:stretch;padding:8px}
.media-field.over{border-color:var(--brand);background:#fff7f5}
.mf-img{width:120px;height:90px;border-radius:10px;overflow:hidden;background:#f4ece9;flex:none}
.mf-img img{width:100%;height:100%;object-fit:contain}
.mf-side{flex:1;display:grid;gap:8px;align-content:center}
.mf-drop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px}
.mf-drop svg{width:22px;height:22px}
.grid-bg,.tian{background-color:#fff;background-image:linear-gradient(#efc9c4,#efc9c4),linear-gradient(#efc9c4,#efc9c4);background-size:100% 1px,1px 100%;background-position:center;background-repeat:no-repeat}
.mitem .im.audio{display:grid;place-items:center;align-content:center;gap:6px;color:var(--brand);background:#fbecea}
.mitem .im.audio svg{width:30px;height:30px}
.mitem .im.audio small{font-size:12px;font-weight:600}
.mitem .im.svg img{object-fit:contain;padding:10px;background:#fff}

/* pickers */
dialog.ask.picker .ask-box{width:min(560px,92vw)}
.pick-list{max-height:min(52vh,420px);overflow-y:auto;margin-top:10px;display:grid;gap:4px}
.pick-list li.hint{padding:12px;color:var(--muted)}
.pick-list button{width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer}
.pick-list button:hover,.pick-list button.on{border-color:var(--brand);background:#fff7f5}
.pick-list button[disabled]{opacity:.5;cursor:default}
.pick-list button .zh{font-size:20px}
.pick-list small{flex-basis:100%;color:var(--muted);font-size:12px}
.pick-list em{margin-left:auto;font-size:11px;color:var(--muted)}

/* token editor */
.tok-editor{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;min-height:64px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fffdfc}
.tok{display:grid;justify-items:center;gap:1px;padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;min-width:38px}
.tok:hover{border-color:var(--brand)}
.tok .zh{font-size:22px;line-height:1.15;font-weight:500}
.tok .py{font-size:12px}
.tok small{font-size:11px;color:var(--muted);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok.unknown{border-style:dashed;background:#fff8ec}
.tok.punct{border:0;background:none;cursor:default;font-family:var(--zh);font-size:22px;padding:5px 0;min-width:0}

/* repeatable rows (senses, examples, options, pairs…) */
.rows{display:grid;gap:10px}
.row-item{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fffdfc;position:relative}
.row-item .rm{position:absolute;top:8px;right:8px}
.row-grid{display:grid;grid-template-columns:120px 1fr;gap:8px}
.row-grid.three{grid-template-columns:1fr 1fr 1fr}
.handle{cursor:grab;color:var(--muted);display:inline-grid;place-items:center}
.handle svg{width:16px;height:16px}
.dragging{opacity:.45}
.sub-h{font-size:13px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.sub-h small{font-weight:500;color:var(--muted)}

/* wide drawers for editors */
.drawer-r.wide{width:min(760px,100vw)}
.drawer-r.xwide{width:min(980px,100vw)}
.word-head{display:flex;gap:16px;align-items:center;padding:14px;border-radius:14px;background:#fbf3f1}
.word-head .zh{font-size:46px;line-height:1}
.word-head .py{font-size:18px}
.word-head .meta{display:grid;gap:4px}
.json-box{white-space:pre-wrap;font:12px/1.5 ui-monospace,monospace;background:#1e1617;color:#f5e9e6;padding:14px;border-radius:12px;max-height:60vh;overflow:auto}

/* radicals */
.rad-layout{display:grid;grid-template-columns:150px 1fr 220px;gap:18px;align-items:start}
.rad-big{display:grid;justify-items:center;gap:8px;padding-top:6px}
.rad-big .zh{font-size:96px;line-height:1}
.rad-big .py{font-size:20px}
.rad-badges{display:flex;gap:6px;flex-wrap:wrap}
.rad-badges span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#f4ece9}
.rad-badges span.no{background:#e3f4ec;color:#167a52}
.tian{width:200px;height:200px;border:2px solid var(--line);border-radius:22px;display:grid;place-items:center;overflow:hidden}
.tian img{width:85%;height:85%;object-fit:contain}
.tian .zh{font-size:120px;color:#d8cdcb}
.mnemonic{border:1px solid #f3d38b;background:#fffaf0;border-radius:16px;padding:12px 14px}
.mnemonic b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#b06b00}

/* markdown */
.md-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.md-split textarea{min-height:260px;font:13px/1.6 ui-monospace,monospace}
.md-preview{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#fffdfc;min-height:260px;overflow:auto;font-size:14px}
.md-preview > * + *{margin-top:.6em}
.md-preview h1,.md-preview h2,.md-preview h3{font-size:16px}
.md-preview ul,.md-preview ol{padding-left:20px;list-style:revert}
.md-preview table{border-collapse:collapse}.md-preview td,.md-preview th{border:1px solid var(--line);padding:4px 8px}

/* course outline */
.outline{display:grid;gap:12px}
.unit{border:1px solid var(--line);border-radius:14px;background:#fff}
.unit > header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.unit > header h3{font-size:15px;flex:1}
.unit .lessons{min-height:44px;padding:6px}
.lesson-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#fff}
.lesson-row:hover{background:#fbf3f1}
.lesson-row a.t{flex:1;font-weight:600}
.lesson-row small{color:var(--muted)}
.lesson-row .n{width:22px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

/* lesson / exam builders */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.blocks{display:grid;gap:12px}
.block{border:1px solid var(--line);border-radius:14px;background:#fff}
.block > header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:#fffaf8;border-radius:14px 14px 0 0}
.block > header b{flex:1;font-size:13px}
.block > .b{padding:12px;display:grid;gap:10px}
.add-blocks{display:flex;flex-wrap:wrap;gap:8px}
.chip-list{display:flex;flex-wrap:wrap;gap:6px}
.chip-list .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;cursor:grab}
.chip-list .chip .zh{font-size:16px}
.chip-list .chip button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;width:18px}
.q-preview{border:1px dashed var(--line);border-radius:14px;padding:16px;background:#fffdfc;display:grid;gap:10px}
.q-preview .opt{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff}
.q-preview .opt.ok{border-color:var(--ok);background:#effaf4}
.tone-pick{display:flex;gap:6px}
.tone-pick button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700}
.tone-pick button.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* import preview */
.imp-sum{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.imp-sum span{padding:4px 10px;border-radius:999px;background:#f4ece9;font-size:12px;font-weight:700}
.imp-sum .c{background:#e3f4ec;color:#167a52}.imp-sum .u{background:#e2efff;color:#2459b3}.imp-sum .e{background:#ffe5e3;color:#b0261f}
.act-create{color:#167a52;font-weight:700}.act-update{color:#2459b3;font-weight:700}.act-skip{color:var(--muted)}.act-error{color:var(--bad);font-weight:700}

@media (max-width:1100px){
  .builder{grid-template-columns:1fr}
  .rad-layout{grid-template-columns:1fr}
  .md-split{grid-template-columns:1fr}
}
@media (max-width:600px){
  .row-grid,.row-grid.three{grid-template-columns:1fr}
}