:root { --ink:#14213d; --muted:#6d7890; --line:#e2e7f0; --surface:#fff; --soft:#f6f8fc; --primary:#1f65e8; --primary-soft:#eaf1ff; --success:#16875d; --danger:#c9434c; --warning:#b7791f; --shadow:0 12px 35px rgba(28,42,74,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f3f6fb; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
input,select,textarea { width:100%; padding:11px 12px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:9px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#8cb2f5; box-shadow:0 0 0 3px var(--primary-soft); }
textarea { resize:vertical; }
.primary,.secondary { padding:10px 16px; border-radius:9px; border:1px solid transparent; font-weight:700; }
.primary { color:#fff; background:var(--primary); }
.secondary { color:var(--ink); background:#fff; border-color:var(--line); }
.eyebrow { color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.18em; }
[hidden] { display:none !important; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px,.9fr) minmax(440px,1.1fr); background:#fff; }
.login-story { padding:clamp(48px,7vw,100px); display:flex; flex-direction:column; justify-content:center; gap:26px; color:#fff; background:linear-gradient(145deg,#14213d,#1f3d73 65%,#1f65e8); }
.login-story h1 { margin:9px 0; font-size:42px; }
.login-story p { max-width:480px; color:#cbd8ee; line-height:1.8; }
.brand-mark { width:60px; height:60px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#4f8fff,#1f65e8); border:1px solid rgba(255,255,255,.3); border-radius:18px; box-shadow:0 16px 30px rgba(0,0,0,.18); font-size:28px; font-weight:850; }
.brand-mark.small { width:40px; height:40px; flex:0 0 auto; border-radius:12px; font-size:17px; }
.story-card { max-width:480px; padding:18px; display:grid; gap:5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:13px; }
.story-card span { color:#cbd8ee; font-size:13px; }
.login-panel { display:grid; place-items:center; padding:36px; }
.login-form { width:min(390px,100%); display:grid; gap:17px; }
.login-form h2 { margin:3px 0 0; font-size:30px; }
.login-form p { margin:-9px 0 5px; color:var(--muted); }
.captcha-field { gap:7px; }
.captcha-row { display:grid; grid-template-columns:minmax(0,1fr) 142px; gap:9px; }
.captcha-image-button { height:44px; padding:0; overflow:hidden; background:#edf3ff; border:1px solid var(--line); border-radius:9px; }
.captcha-image-button:hover { border-color:#8cb2f5; }
.captcha-image-button img { display:block; width:100%; height:100%; }
.captcha-field small { color:var(--muted); font-size:11px; font-weight:500; line-height:1.5; }
label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; }
.error { min-height:18px; color:var(--danger); font-size:13px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; min-height:0; padding:24px 18px; display:flex; flex-direction:column; overflow:hidden; color:#dce5f5; background:#14213d; }
.brand { display:flex; align-items:center; gap:12px; padding:0 8px 28px; }
.brand strong,.brand small { display:block; }
.brand small { margin-top:3px; color:#8292af; font-size:10px; }
nav { min-height:0; display:grid; align-content:start; gap:8px; overflow-y:auto; }
nav .nav-group { display:grid; gap:6px; }
.nav-group-title { padding:10px 12px 3px; color:#7182a0; font-size:10px; font-weight:800; letter-spacing:1.5px; }
nav button { padding:12px; display:flex; align-items:center; gap:11px; color:#aebbd1; background:transparent; border:0; border-radius:10px; text-align:left; }
nav button span { width:28px; height:28px; display:grid; place-items:center; background:#223252; border-radius:8px; font-size:11px; font-weight:800; }
nav button.active { color:#fff; background:#223657; }
.account-card { margin-top:auto; padding:16px 8px 0; display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:center; border-top:1px solid #2b3b5a; }
.account-card strong,.account-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-card small { margin-top:3px; color:#8190aa; font-size:11px; }
.avatar { width:38px; height:38px; display:grid; place-items:center; color:#fff; background:var(--primary); border-radius:50%; font-weight:800; }
.text-button { grid-column:1/-1; padding:8px; color:#aebbd1; background:transparent; border:1px solid #344666; border-radius:8px; }
main { min-width:0; }
.topbar { min-height:86px; padding:18px 30px; display:flex; justify-content:space-between; align-items:center; gap:20px; background:#fff; border-bottom:1px solid var(--line); }
.topbar h1 { margin:0; font-size:22px; }
.topbar p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.top-actions,.toolbar-actions { display:flex; align-items:center; gap:10px; }
.status { color:var(--muted); font-size:12px; }
.status i { width:7px; height:7px; margin-right:7px; display:inline-block; background:var(--warning); border-radius:50%; }
.status.ready i { background:var(--success); }
.content { padding:26px 30px 50px; }
.notice { margin-bottom:16px; padding:12px 14px; color:#835c12; background:#fff8e6; border:1px solid #efd18d; border-radius:9px; }
.metrics { margin-bottom:17px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.metrics.metrics-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metrics article,.panel { min-width:0; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); }
.metrics article { min-height:130px; padding:17px; display:flex; flex-direction:column; }
.metrics small { color:var(--muted); }
.metrics strong { margin:auto 0 5px; font-size:28px; }
.metrics span { color:var(--primary); font-size:11px; }
.panel { padding:18px; }
.toolbar { margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.filters { flex:1; display:flex; gap:10px; }
.filters input { max-width:410px; }
.filters select { width:180px; }
.time-filter { min-width:190px; display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:700; }
.time-filter input { min-width:190px; }
.auto-refresh { display:flex; grid-template-columns:auto 1fr; align-items:center; white-space:nowrap; }
.auto-refresh input { width:auto; }
.table-note { padding:7px 2px; color:var(--muted); font-size:12px; }
.table-wrap { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:12px 9px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:11px; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
.cell-title,.cell-subtitle { display:block; }
.cell-title { font-weight:700; }
.cell-subtitle { margin-top:3px; color:var(--muted); font-size:11px; }
.content-summary { max-width:280px; display:block; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.feedback-history { display:grid; gap:10px; max-height:56vh; overflow:auto; }
.feedback-history-item { padding:13px 14px; background:var(--soft); border:1px solid var(--line); border-radius:10px; }
.feedback-history-item time { color:var(--muted); font-size:11px; }
.feedback-history-item p { margin:7px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.feedback-history-actions { display:flex; justify-content:flex-end; margin-top:10px; }
.feedback-reply { margin-top:11px; padding:10px 11px; color:#174e38; background:#edf9f3; border:1px solid #b9e4cc; border-radius:8px; }
.feedback-reply time { color:#4b8068; }
.feedback-reply p { margin-top:5px; }
.feedback-reply-read { display:block; margin-top:7px; color:#4b8068; font-size:11px; }
.feedback-reply-form { display:grid; gap:9px; margin:0 0 12px; padding:13px 14px; background:#fff9e8; border:1px solid #ecd79a; border-radius:10px; }
.feedback-reply-form textarea { width:100%; box-sizing:border-box; min-height:92px; padding:10px; resize:vertical; }
.feedback-reply-form .dialog-actions { margin-top:0; }
.feedback-reply-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.text-button { padding:0; color:var(--primary); background:transparent; border:0; font:inherit; font-size:12px; cursor:pointer; }
.feedback-conversation-history { display:grid; gap:10px; max-height:48vh; overflow:auto; }
.feedback-conversation-message { max-width:88%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; }
.feedback-conversation-message.user { justify-self:end; color:#fff; background:#9e2024; border-color:#9e2024; }
.feedback-conversation-message.admin { justify-self:start; color:#164d37; background:#edf9f3; border-color:#b9e4cc; }
.feedback-conversation-message time { display:block; margin-bottom:6px; color:inherit; opacity:.72; font-size:11px; }
.feedback-conversation-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.feedback-conversation-closed { padding:11px 13px; color:#7d675d; background:#f7eee8; border:1px solid #ead8cd; border-radius:10px; font-size:12px; line-height:1.5; }
.pill { display:inline-flex; padding:4px 8px; border-radius:999px; color:var(--primary); background:var(--primary-soft); font-size:11px; font-weight:750; white-space:nowrap; }
.pill.stop { color:#6d5a2b; background:#fff5d9; }
.pill.live { color:var(--success); background:#e8f7f0; }
.pill.danger { color:var(--danger); background:#fff0f1; }
.section-title { margin:0 0 3px; font-size:20px; }
.anchor-cell { min-width:230px; display:flex; align-items:center; gap:10px; }
.anchor-cell img,.mini-avatar { width:38px; height:38px; flex:0 0 auto; border-radius:50%; }
.achievement-cell { min-width:230px; display:flex; align-items:center; gap:10px; }
.achievement-cell b,.achievement-cell small { display:block; }
.achievement-cell small { max-width:270px; margin-top:3px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.achievement-icon { width:42px; height:42px; flex:0 0 auto; object-fit:cover; border:1px solid var(--line); border-radius:11px; background:#fff8f0; }
.achievement-icon-empty { display:grid; place-items:center; color:var(--primary); background:var(--primary-soft); font-size:16px; font-weight:800; }
.assistive-file-input { position:fixed; top:0; left:-10000px; width:1px; height:1px; opacity:0; pointer-events:none; }
.anchor-cell img { object-fit:cover; background:var(--soft); }
.mini-avatar { display:grid; place-items:center; color:#fff; background:var(--primary); font-weight:800; }
.anchor-cell b,.anchor-cell small { display:block; }
.anchor-cell small { margin-top:3px; color:var(--muted); font-size:11px; }
.directory-table { min-width:1320px; table-layout:fixed; }
.directory-table .directory-anchor-column { width:17%; }
.directory-table .directory-category-column { width:8%; }
.directory-table .directory-priority-column { width:7%; }
.directory-table .directory-cartoon-column { width:8%; }
.directory-table .directory-identity-column { width:13%; }
.directory-table .directory-subscriber-column { width:8%; }
.directory-table .directory-status-column { width:8%; }
.directory-table .directory-sync-column { width:10%; }
.directory-table .directory-time-column { width:11%; }
.directory-table .directory-action-column { width:10%; }
.directory-table .anchor-cell { min-width:0; }
.directory-table .anchor-cell > span:last-child { min-width:0; }
.directory-table .anchor-cell b,.directory-table .anchor-cell small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.directory-table th:nth-child(3),.directory-table td:nth-child(3),.directory-table th:nth-child(6),.directory-table td:nth-child(6) { text-align:center; }
.cartoon-thumb { width:54px; height:54px; object-fit:contain; background:#fff8f0; border:1px solid var(--line); border-radius:10px; }
.cartoon-missing { display:inline-flex; padding:7px 8px; color:var(--muted); background:var(--soft); border:1px dashed #ccd5e5; border-radius:8px; font-size:11px; }
.subscriber-count { display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.subscriber-count .cell-subtitle { margin-top:0; }
.category-pills { display:flex; flex-wrap:wrap; gap:5px; }
.pagination { min-height:45px; padding-top:14px; display:grid; grid-template-columns:minmax(100px,1fr) auto minmax(100px,1fr); align-items:center; gap:14px; border-top:1px solid var(--line); }
.pagination-summary { color:var(--muted); font-size:12px; }
.pagination-pages { display:flex; align-items:center; justify-content:center; gap:5px; }
.page-button { min-width:32px; height:32px; padding:0 9px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:8px; font-size:12px; }
.page-button:hover:not(:disabled),.page-button.active { color:var(--primary); background:var(--primary-soft); border-color:#cad7ff; }
.page-button:disabled { opacity:.45; cursor:not-allowed; }
.page-ellipsis { padding:0 3px; color:var(--muted); }
.page-size { justify-self:end; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
.page-size select { min-height:32px; padding:4px 8px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:7px; }
.row-actions { display:flex; gap:9px; white-space:nowrap; }
.row-actions.vertical { align-items:flex-start; flex-direction:column; gap:3px; }
.row-action { padding:3px; color:var(--primary); background:transparent; border:0; font-size:12px; font-weight:700; }
.row-action.danger { color:var(--danger); }
.category-group td { padding:10px 9px; color:#315a9b; background:#f4f7fd; border-bottom-color:#dce5f5; font-size:12px; font-weight:800; }
.selection-summary { padding:12px 14px; color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:9px; font-weight:750; }
.category-checkbox-grid { max-height:280px; padding:10px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:auto; background:var(--soft); border:1px solid var(--line); border-radius:10px; }
.category-checkbox { min-width:0; padding:10px 12px; display:flex; align-items:center; gap:9px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.category-checkbox input { width:16px; height:16px; flex:0 0 auto; }
.category-checkbox span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cartoon-preview { min-height:210px; display:grid; place-items:center; overflow:hidden; color:var(--muted); background:#fff8f0; border:1px dashed #d9c9bb; border-radius:12px; text-align:center; }
.cartoon-preview img { width:100%; max-height:320px; object-fit:contain; }
.dialog-spacer { flex:1; }
.danger-button { color:var(--danger); }
.settings-form { display:grid; gap:16px; }
.settings-feedback { padding:13px 15px; color:#8b2f36; background:#fff1f2; border:1px solid #f1bcc0; border-radius:10px; font-size:13px; font-weight:700; line-height:1.6; }
.settings-feedback.success { color:#116b4b; background:#edf9f3; border-color:#afe0ca; }
.settings-section { display:grid; gap:18px; }
.settings-help { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.settings-help code { padding:2px 5px; color:#315a9b; background:var(--primary-soft); border-radius:5px; }
.home-artwork-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.home-artwork-card { min-width:0; padding:15px; display:grid; gap:13px; background:var(--soft); border:1px solid var(--line); border-radius:11px; }
.home-artwork-card strong,.home-artwork-card small { display:block; }
.home-artwork-card strong { color:var(--ink); font-size:14px; }
.home-artwork-card small { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.5; }
.home-artwork-preview { height:260px; display:grid; place-items:center; overflow:hidden; padding:10px; color:var(--muted); background:#fff8f0; border:1px dashed #d9c9bb; border-radius:10px; font-size:12px; text-align:center; }
.home-artwork-preview img { width:100%; height:100%; object-fit:contain; }
.home-character-asset-preview-link { width:64px; height:64px; display:grid; place-items:center; overflow:hidden; background:#fff8f0; border:1px solid #ead6c6; border-radius:9px; }
.home-character-asset-preview { width:58px; height:58px; display:block; object-fit:contain; }
.home-character-audio-preview { width:220px; max-width:28vw; height:36px; display:block; }
.home-character-current-visual { display:flex; align-items:center; gap:16px; min-height:92px; padding:14px 16px; border:1px solid #e7d7c9; border-radius:14px; background:#fffaf5; }
.home-character-current-visual[hidden] { display:none; }
.home-character-current-visual img { width:76px; height:76px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid #ead6c6; }
.home-character-current-visual strong { display:block; color:#18233b; font-size:16px; }
.home-character-current-visual small { display:block; margin-top:5px; color:#6f7890; line-height:1.55; }
.home-artwork-actions { display:flex; justify-content:flex-end; gap:9px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.full-grid-field { grid-column:1/-1; }
.notice-content-cell { min-width:260px; max-width:420px; white-space:normal; line-height:1.55; }
.template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.switch-field { padding:13px; display:flex; grid-template-columns:auto 1fr; align-items:flex-start; gap:11px; background:var(--soft); border:1px solid var(--line); border-radius:10px; }
.switch-field input { width:auto; margin-top:2px; }
.switch-field strong,.switch-field small { display:block; }
.switch-field strong { color:var(--ink); font-size:13px; }
.switch-field small { margin-top:4px; color:var(--muted); font-weight:500; line-height:1.5; }
.secret-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.secret-status div { padding:12px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:3px 8px; background:var(--soft); border:1px solid var(--line); border-radius:9px; }
.secret-status strong { font-size:12px; }
.secret-status small { grid-column:2; color:var(--muted); font-size:11px; }
.secret-dot { width:8px; height:8px; grid-row:1/3; border-radius:50%; }
.secret-dot.ready { background:var(--success); }
.secret-dot.missing { background:var(--danger); }
.settings-actions { position:sticky; bottom:12px; z-index:2; padding:12px; display:flex; justify-content:flex-end; gap:10px; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); backdrop-filter:blur(8px); }
.empty { padding:44px 15px; color:var(--muted); text-align:center; }
dialog { width:min(560px,calc(100vw - 28px)); padding:22px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 28px 80px rgba(20,33,61,.25); }
dialog::backdrop { background:rgba(20,33,61,.56); }
.wide-dialog { width:min(920px,calc(100vw - 28px)); }
.dialog-head { margin-bottom:19px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.dialog-head h2 { margin:5px 0 0; }
.close { padding:0; color:var(--muted); background:transparent; border:0; font-size:29px; line-height:1; }
dialog form { display:grid; gap:15px; }
.dialog-toolbar,.dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.dialog-actions { justify-content:flex-end; margin-top:4px; }
.batch-import-progress { display:grid; gap:16px; }
.batch-progress-summary { padding:16px; display:grid; gap:10px; background:var(--soft); border:1px solid var(--line); border-radius:11px; }
.batch-progress-summary > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.batch-progress-summary strong { color:var(--primary); font-size:25px; }
.batch-progress-summary span,.batch-progress-summary p,.dialog-toolbar small { color:var(--muted); font-size:12px; }
.batch-progress-summary p { margin:0; }
.batch-progress-track { height:9px; overflow:hidden; background:#dce5f5; border-radius:999px; }
.batch-progress-track i { width:0; height:100%; display:block; background:linear-gradient(90deg,var(--primary),#4f7cff); border-radius:inherit; transition:width .25s ease; }
.batch-failed-users { padding:14px; display:grid; gap:10px; background:#fff4f4; border:1px solid #f2c2c5; border-radius:11px; }
.batch-failed-users[hidden] { display:none; }
.batch-failed-users .table-wrap { max-height:230px; overflow:auto; border:1px solid #f0d2d4; border-radius:9px; }
.batch-failed-users table { min-width:760px; background:#fff; }
.batch-failed-users th { position:sticky; top:0; z-index:1; color:#9b2932; background:#fff1f2; }
.batch-import-table { max-height:52vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.batch-import-table table { min-width:850px; }
.batch-import-table th { position:sticky; top:0; z-index:1; background:#f8faff; }
.batch-status { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-weight:750; }
.batch-status::before { width:7px; height:7px; content:""; border-radius:50%; background:var(--muted); }
.batch-status.imported::before { background:var(--success); }
.batch-status.skipped::before { background:#c08b2f; }
.batch-status.retrying::before,.batch-status.processing::before { background:#315a9b; }
.batch-status.failed::before { background:var(--danger); }
pre { max-height:60vh; margin:0; padding:16px; overflow:auto; color:#cde0f1; background:#101820; border-radius:10px; font:12px/1.6 "SFMono-Regular",Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:980px) { .metrics,.metrics.metrics-three { grid-template-columns:repeat(2,minmax(0,1fr)); } .app-shell { grid-template-columns:76px minmax(0,1fr); } .sidebar { padding:20px 9px; } .brand div,nav button:not(.active),nav button { font-size:0; } .brand { padding:0 9px 25px; } .nav-group-title { display:none; } nav .nav-group { gap:8px; } nav button { justify-content:center; } .account-card { grid-template-columns:1fr; justify-items:center; } .account-card div:not(.avatar),.text-button { display:none; } .pagination { grid-template-columns:1fr; justify-items:center; } .pagination-summary,.page-size { justify-self:center; } .pagination-pages { max-width:100%; flex-wrap:wrap; } }
@media (max-width:680px) { .login-shell { grid-template-columns:1fr; } .login-story { display:none; } .login-panel { min-height:100vh; padding:24px; } .topbar { padding:16px; align-items:flex-start; } .status { display:none; } .content { padding:17px 13px 35px; } .metrics { grid-template-columns:1fr 1fr; } .toolbar,.filters { align-items:stretch; flex-direction:column; } .filters input,.filters select,.time-filter { max-width:none; width:100%; } .toolbar-actions { justify-content:space-between; flex-wrap:wrap; } .settings-grid,.secret-status,.home-artwork-grid { grid-template-columns:1fr; } }