: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); }
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; }
.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%; }
.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:1080px; table-layout:fixed; }
.directory-table .directory-anchor-column { width:22%; }
.directory-table .directory-category-column { width:8%; }
.directory-table .directory-identity-column { width:15%; }
.directory-table .directory-subscriber-column { width:9%; }
.directory-table .directory-status-column { width:9%; }
.directory-table .directory-sync-column { width:11%; }
.directory-table .directory-time-column { width:17%; }
.directory-table .directory-action-column { width:9%; }
.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(4),.directory-table td:nth-child(4) { text-align:center; }
.subscriber-count { display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
.subscriber-count .cell-subtitle { margin-top:0; }
.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-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; }
.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; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.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; }
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 { grid-template-columns:1fr; } }