:root { color-scheme: dark; --bg:#090b10; --panel:#11151d; --panel-2:#171c26; --line:#293140; --text:#f5f7fb; --muted:#929cad; --accent:#6ee7b7; --accent-strong:#34d399; --danger:#fca5a5; --warning:#fbbf24; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 80% 0%,#14241f 0,transparent 32rem),var(--bg); color:var(--text); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
html:not(.tauri) .tauri-only { display:none !important; }
.splash { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; }
.splash h1 { margin:4px 0 0; font-size:32px; }
.splash p { color:var(--muted); margin:0 0 8px; }
.splash #splash-message { max-width:min(760px,100%); max-height:50vh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.spinner { width:36px; height:36px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.app-shell { min-height:100vh; display:grid; grid-template-columns:220px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:28px 18px 20px; border-right:1px solid var(--line); background:rgba(9,11,16,.86); backdrop-filter:blur(18px); display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:0 10px 28px; font-size:20px; font-weight:700; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--accent); color:#06241a; }
nav { display:grid; gap:7px; }
.nav-item { border:0; border-radius:10px; padding:11px 13px; text-align:left; color:var(--muted); background:transparent; }
.nav-item:hover,.nav-item.active { background:var(--panel-2); color:var(--text); }
.account-navigation { display:grid; gap:5px; min-height:0; }
.account-subnav { display:grid; gap:3px; max-height:min(38vh,280px); overflow-y:auto; scrollbar-width:none; }
.account-subnav::-webkit-scrollbar { display:none; }
.account-nav-item { width:100%; border:0; border-radius:9px; padding:8px 13px 8px 27px; text-align:left; color:var(--muted); background:transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-nav-item::before { content:""; display:inline-block; width:5px; height:5px; margin:0 9px 2px 0; border-radius:50%; background:#4b5563; }
.account-nav-item:hover,.account-nav-item.active { color:var(--text); background:rgba(23,28,38,.72); }
.account-nav-item.active::before { background:var(--accent-strong); }
.account-nav-empty { padding:5px 13px 7px 27px; color:#667085; font-size:12px; }
.account-list { display:grid; gap:8px; margin:0 0 20px; }
.account-list-note { margin:0; color:var(--muted); font-size:13px; }
.account-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--text); background:#0d1118; }
.account-row:hover,.account-row.active { border-color:var(--accent-strong); background:var(--panel-2); }
.account-row-main { display:grid; gap:3px; flex:1; min-width:0; }
.account-row-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-row-meta { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-row-action { flex:none; color:var(--accent); font-size:13px; }
.sidebar-status { margin-top:auto; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; padding:10px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-strong); box-shadow:0 0 14px var(--accent-strong); }
.content { width:100%; max-width:1120px; margin:0 auto; padding:56px 48px; }
.page-header { margin-bottom:30px; }
.page-header h1 { margin:5px 0 10px; font-size:34px; letter-spacing:-.03em; }
.page-header p:not(.eyebrow) { margin:0; color:var(--muted); }
.eyebrow { margin:0; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.14em; }
.home-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:20px; }
.single-card-grid { grid-template-columns:minmax(0,720px); }
.card { background:linear-gradient(145deg,rgba(23,28,38,.96),rgba(15,19,27,.96)); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 22px 55px rgba(0,0,0,.18); }
.card h2 { font-size:17px; margin:0 0 20px; }
.card-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.badge { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:#252d3b; color:#cbd5e1; font-size:12px; }
.badge.success { color:#a7f3d0; background:#064e3b; }
.badge.warning { color:#fde68a; background:#422006; }
.badge.danger { color:#fecaca; background:#4c1010; }
.field { display:grid; gap:8px; margin-top:17px; }
.field>span,.field-heading>span { color:#cbd2dd; font-size:13px; font-weight:600; }
.field small { color:var(--muted); }
input,select,textarea,.value-box { width:100%; min-height:43px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:#0d1118; padding:10px 12px; outline:none; }
textarea { resize:vertical; }
textarea:focus { border-color:var(--accent-strong); }
.login-methods { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:12px; }
.login-methods button { border:0; border-radius:3px; padding:6px 0; color:var(--muted); background:transparent; font-size:13px; text-underline-offset:4px; }
.login-methods button:hover { color:var(--accent); text-decoration:underline; }
.login-methods button:focus-visible { color:var(--accent); outline:2px solid var(--accent); outline-offset:4px; }
.phone-fields { display:grid; grid-template-columns:85px minmax(0,1fr); gap:12px; }
#phone-captcha { margin-top:12px; }
#phone-captcha-frame { display:block; width:100%; height:400px; border:1px solid var(--line); border-radius:10px; background:white; }
input:focus,select:focus { border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(52,211,153,.1); }
.mono { font-family:"SFMono-Regular",Consolas,monospace; }
.ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.copy-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.icon-button,.text-button { border:1px solid var(--line); border-radius:9px; color:#dce3ec; background:var(--panel-2); padding:0 13px; }
.text-button { min-height:32px; }
.qr-card { text-align:center; }
.qr-frame { width:min(100%,270px); aspect-ratio:1; margin:12px auto 18px; padding:12px; display:grid; place-items:center; border-radius:16px; background:white; overflow:hidden; color:#475569; }
.qr-frame img { width:100%; height:100%; object-fit:contain; }
.qr-frame img:not([src]) { display:none; }
.qr-card p,.muted { color:var(--muted); font-size:13px; line-height:1.55; }
.notice { padding:11px 13px; border-radius:10px; font-size:13px; line-height:1.5; }
.notice.warning { color:#fde68a; background:#422006; }
.login-card { max-width:620px; }
.login-step h2 { margin-bottom:20px; }
#login-title { min-width:0; overflow-wrap:anywhere; }
.button-stack { display:grid; gap:10px; }
.button-row { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.button-row.wrap { flex-wrap:wrap; }
.button { min-height:42px; border-radius:10px; border:1px solid transparent; padding:10px 16px; font-weight:650; }
.button.primary { color:#06241a; background:var(--accent); }
.button.primary:hover { background:#a7f3d0; }
.button.secondary { color:var(--text); border-color:var(--line); background:var(--panel-2); }
.button:disabled { opacity:.5; cursor:not-allowed; }
.segment { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; border-radius:12px; background:#0d1118; }
.segment button { border:0; border-radius:8px; padding:9px; color:var(--muted); background:transparent; }
.segment button.active { background:#f8fafc; color:#10131a; }
.segment.locked button:not(.active) { display:none; }
.segment.three { grid-template-columns:repeat(3,1fr); }
.upstream-list { display:grid; gap:8px; }
.upstream-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.upstream-row .upstream-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upstream-list .badge.muted { color:#94a3b8; background:#1b2230; }
.button.small { min-height:32px; padding:0 12px; font-size:13px; font-weight:600; }
.login-qr { width:230px; position:relative; }
.message { min-height:20px; color:var(--muted); font-size:13px; text-align:center; }
.message.success { color:var(--accent); }
.message.error { color:var(--danger); }
.switch-row { margin-top:19px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.switch-row,.switch-row * { cursor:pointer; }
.switch-row span { display:grid; gap:4px; }
.switch-row small { color:var(--muted); }
input[type="checkbox"] { appearance:none; width:44px; min-height:25px; height:25px; padding:2px; border:0; border-radius:999px; background:#384152; transition:.2s; }
input[type="checkbox"]::after { content:""; display:block; width:21px; height:21px; border-radius:50%; background:white; transition:.2s; }
input[type="checkbox"]:checked { background:var(--accent-strong); }
input[type="checkbox"]:checked::after { transform:translateX(19px); }
.field-heading { display:flex; align-items:center; justify-content:space-between; }
.source-list { display:grid; gap:8px; }
.source-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.source-row button { min-width:52px; }
.account-identity { display:grid; grid-template-columns:minmax(0,1fr) 140px; align-items:start; gap:22px; }
.account-identity-fields { min-width:0; }
.account-qr-panel { text-align:center; color:var(--muted); font-size:12px; }
.account-qr { width:132px; margin:17px auto 8px; padding:8px; border-radius:13px; }
.account-qr span { font-size:12px; }
.button.secondary.danger { color:var(--danger); border-color:rgba(252,165,165,.35); }
.button.secondary.danger:hover { background:rgba(252,165,165,.12); }
.button.secondary.active { color:#06241a; background:var(--accent); border-color:transparent; }
.toast { position:fixed; left:50%; bottom:26px; z-index:60; transform:translateX(-50%); max-width:min(560px,calc(100vw - 40px)); padding:11px 16px; border:1px solid var(--line); border-radius:11px; background:rgba(17,21,29,.97); color:var(--text); font-size:13px; line-height:1.5; box-shadow:0 18px 42px rgba(0,0,0,.42); overflow-wrap:anywhere; }
.toast.error { color:#fee2e2; border-color:rgba(252,165,165,.5); background:rgba(52,15,18,.97); }
.toast.success { color:#d1fae5; border-color:rgba(52,211,153,.5); background:rgba(6,40,30,.97); }
#logs-page .card { max-width:960px; }
.logs-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.logs-toolbar select { width:auto; min-width:130px; }
.logs-toolbar input { width:auto; flex:1 1 190px; min-width:150px; }
.logs-levels { display:flex; gap:4px; padding:4px; }
.logs-levels button { padding:7px 12px; border-radius:7px; font-size:13px; }
.logs-actions { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.logs-list { display:grid; gap:3px; margin-top:16px; max-height:min(62vh,640px); overflow:auto; scrollbar-width:thin; }
.log-row { display:grid; grid-template-columns:78px 58px 116px minmax(0,1fr); align-items:baseline; gap:10px; padding:7px 10px; border-radius:9px; border:1px solid transparent; background:rgba(13,17,24,.6); font-size:13px; }
.log-row:hover { border-color:var(--line); }
.log-row[data-level="warn"] { background:rgba(66,32,6,.42); }
.log-row[data-level="error"] { background:rgba(69,10,10,.45); }
.log-time { color:#64748b; font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.log-level { font-size:11px; font-weight:700; letter-spacing:.06em; color:#94a3b8; }
.log-row[data-level="info"] .log-level { color:var(--accent); }
.log-row[data-level="warn"] .log-level { color:var(--warning); }
.log-row[data-level="error"] .log-level { color:var(--danger); }
.log-tag { color:#93c5fd; font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.log-message { min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.log-detail { grid-column:1/-1; margin:4px 0 2px; padding:10px 12px; border-radius:8px; background:#0b0f16; border:1px solid var(--line); color:#cbd5e1; font-size:12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; max-height:280px; overflow:auto; }
.log-row-expandable { cursor:pointer; }
.maintenance-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.credential-form { display:grid; grid-template-columns:minmax(0,1fr) 160px 160px; gap:12px; }
.credential-list { display:grid; gap:8px; margin-top:16px; }
.credential-list .upstream-row .upstream-name { flex:1; }
#monitor-page .card { max-width:960px; margin-bottom:20px; }
#monitor-page .badge.muted { color:#94a3b8; background:#1b2230; }
.monitor-overview { display:grid; gap:14px; margin-top:16px; }
.monitor-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.monitor-stat { display:grid; gap:6px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.monitor-stat-label { color:var(--muted); font-size:12px; }
.monitor-stat strong { font-size:20px; }
.monitor-categories { display:flex; flex-wrap:wrap; gap:8px; }
.monitor-accounts { display:grid; gap:16px; }
.monitor-account { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:rgba(13,17,24,.55); }
.monitor-account.anonymous { border-color:rgba(252,165,165,.35); }
.monitor-account-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.monitor-account-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.monitor-account-stats { display:flex; flex-wrap:wrap; gap:8px; }
.monitor-endpoints { display:grid; gap:6px; }
.monitor-endpoint-row { display:grid; grid-template-columns:minmax(0,1.3fr) 76px minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; background:rgba(11,15,22,.7); font-size:13px; }
.monitor-endpoint-path { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.monitor-endpoint-category { color:#cbd2dd; font-size:12px; }
.monitor-endpoint-meta { color:var(--muted); font-size:12px; text-align:right; }
.monitor-daily { display:grid; gap:4px; overflow-x:auto; }
/* 类别数由服务端词表决定，用 flex 让列数变化时不会错位。 */
.monitor-daily-row { display:flex; align-items:center; gap:8px; min-width:520px; padding:7px 10px; border-radius:9px; background:rgba(13,17,24,.6); font-size:13px; }
.monitor-daily-row.head { background:transparent; color:var(--muted); font-size:12px; }
.monitor-daily-row.today { background:rgba(52,211,153,.12); }
.monitor-daily-row>* { flex:1 1 0; min-width:0; text-align:right; }
.monitor-daily-day { flex:1.5 1 0; text-align:left; color:#cbd2dd; font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.monitor-daily-count { font-weight:650; }
/* 手机端顶栏与侧栏抽屉：窄屏才出现，桌面布局不受影响。 */
.mobile-bar { display:none; align-items:center; gap:12px; }
.nav-toggle { display:grid; gap:4px; align-content:center; width:42px; height:42px; padding:11px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); }
.nav-toggle span { display:block; height:2px; border-radius:2px; background:var(--text); }
.nav-scrim { display:none; }
html.nav-open { overflow:hidden; }
/* 全局管理员登录门。 */
.admin-gate { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; overflow:auto; background:rgba(6,8,12,.86); backdrop-filter:blur(8px); }
.admin-gate-card { width:min(440px,100%); display:grid; gap:6px; padding:26px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(23,28,38,.98),rgba(15,19,27,.98)); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.admin-gate-card .brand { padding:0 0 6px; }
.admin-gate-card h2 { margin:0 0 4px; font-size:20px; }
.admin-gate-card .message { text-align:left; }
.admin-gate-card .button-row { margin-top:16px; }
.admin-gate-card .button-row .button,.admin-gate-card .github-button { width:100%; justify-content:center; }
.github-button { display:flex; align-items:center; text-decoration:none; margin-top:16px; }
#settings-page .card { max-width:720px; margin-bottom:20px; }
#admin-token-reveal { min-width:56px; }
.tauri body { overflow:hidden; }
.tauri .app-shell { height:100vh; min-height:0; }
.tauri .content { height:100vh; min-height:0; padding-block:clamp(20px,6vh,56px); overflow:auto; }
.tauri body[data-page="login"] .content { overflow:hidden; }
.tauri #login-page:not(.hidden) { height:100%; min-height:0; display:flex; flex-direction:column; }
.tauri #login-page .page-header { flex:0 0 auto; margin-bottom:clamp(12px,3vh,30px); }
.tauri #login-page .login-card { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; }
.tauri #login-page .login-card::-webkit-scrollbar { display:none; }
@media (max-height:680px) {
  .tauri #login-page .page-header .eyebrow,
  .tauri #login-page .page-header p:not(.eyebrow) { display:none; }
  .tauri #login-page .page-header h1 { margin:0; font-size:28px; }
  .tauri #login-page .login-card { padding:18px 20px; }
  .tauri #login-page .card h2 { margin-bottom:14px; }
  .tauri #login-page .field { margin-top:12px; }
  .tauri #login-page .switch-row { margin-top:12px; }
  .tauri #login-page .button-row { margin-top:14px; }
  .tauri #login-page .login-qr { width:clamp(160px,32vh,210px); margin-block:8px 12px; }
  .tauri #login-page .account-qr { width:clamp(112px,20vh,128px); }
}
@media (max-width:900px) { .account-identity { grid-template-columns:1fr; } .account-qr-panel { display:flex; align-items:center; gap:12px; text-align:left; } .account-qr { width:128px; margin:14px 0 0; flex:0 0 auto; } }
@media (max-width:760px) {
  .mobile-bar { display:flex; position:sticky; top:0; z-index:30; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(9,11,16,.92); backdrop-filter:blur(18px); }
  .app-shell { grid-template-columns:1fr; }
  /* 侧栏改为 off-canvas 抽屉：默认移出屏幕，点汉堡后滑入。 */
  .sidebar { position:fixed; top:0; left:0; z-index:50; width:min(84vw,300px); height:100vh; padding:24px 18px 20px; border-right:1px solid var(--line); border-bottom:0; flex-direction:column; align-items:stretch; gap:0; transform:translateX(-102%); transition:transform .22s ease; }
  .sidebar.open { transform:none; box-shadow:0 0 60px rgba(0,0,0,.55); }
  .nav-scrim { display:block; position:fixed; inset:0; z-index:40; background:rgba(3,5,9,.6); }
  .brand { padding:0 10px 24px; }
  nav { display:grid; }
  .sidebar-status { display:none; }
  .content { padding:24px 16px 40px; }
  .page-header h1 { font-size:28px; }
  .card { padding:18px; border-radius:15px; }
  .home-grid { grid-template-columns:1fr; }
  .credential-form { grid-template-columns:1fr; }
  /* 健康表/凭据池里的摘要很长（uin:…, musickey:…，几十个键值对），
     窄屏改为竖排并允许折行，否则会横向撑破卡片。 */
  .phone-fields { grid-template-columns:78px minmax(0,1fr); }
  .logs-toolbar { align-items:stretch; }
  .logs-toolbar select,.logs-toolbar input { width:100%; flex:1 1 100%; }
  .logs-actions { margin-left:0; width:100%; }
  .logs-actions .button { flex:1 1 auto; }
  .log-row { grid-template-columns:66px 50px minmax(0,1fr); }
  .log-row .log-tag { grid-column:3; }
  .log-message { grid-column:1/-1; }
  .account-identity { grid-template-columns:1fr; }
  .account-qr-panel { display:flex; align-items:center; gap:12px; text-align:left; }
  .account-qr { width:120px; margin:14px 0 0; flex:0 0 auto; }
  /* 监控页：状态卡两列、端点行竖排、每日表横向滚动时钉住日期列。 */
  #monitor-page .maintenance-toolbar { flex-direction:column; align-items:stretch; }
  #monitor-page .maintenance-toolbar .segment { width:100%; }
  .monitor-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .monitor-stat { padding:10px 12px; gap:4px; }
  .monitor-stat strong { font-size:17px; }
  .monitor-account { padding:12px; gap:8px; }
  .monitor-endpoint-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
  .monitor-endpoint-path { flex:1 1 100%; }
  .monitor-endpoint-meta { margin-left:auto; text-align:right; }
  /* 每日表有 9 列，窄屏必然要横向滚动；滚动时把日期列钉在左边，否则看着看着就不知道是哪天。 */
  .monitor-daily { -webkit-overflow-scrolling:touch; }
  .monitor-daily-row { min-width:460px; background:#0d1118; }
  .monitor-daily-row.head { background:#0f141c; }
  .monitor-daily-row.today { background:#121b1a; }
  .monitor-daily-day { position:sticky; left:0; z-index:1; flex:0 0 78px; background:inherit; padding-right:8px; }
  /* 桌面版窗口再窄也是原生窗口：保留常驻侧栏，不用抽屉。 */
  .tauri .mobile-bar,.tauri .nav-scrim { display:none; }
  .tauri .app-shell { grid-template-columns:220px minmax(0,1fr); }
  .tauri .sidebar { position:sticky; width:auto; height:100vh; padding:28px 18px 20px; flex-direction:column; align-items:stretch; gap:0; transform:none; }
  .tauri .sidebar.open { box-shadow:none; }
  .tauri .brand { padding:0 10px 28px; }
  .tauri nav { display:grid; }
  .tauri .sidebar-status { display:flex; }
}