:root { --ink:#12202b; --muted:#71808d; --line:#e5ebef; --paper:#f6f8f9; --white:#fff; --teal:#146b70; --teal-dark:#0d4d52; --lime:#e9f3c4; --red:#c94d4d; --shadow:0 12px 35px rgba(28,55,65,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:0; }
.hidden { display:none !important; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#edf6f3 0%,#f8fbf8 50%,#eff3e8 100%); }
.login-panel { width:min(420px,100%); padding:42px; border:1px solid rgba(20,107,112,.12); background:rgba(255,255,255,.9); box-shadow:var(--shadow); }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; background:var(--teal); color:#fff; font-size:23px; font-weight:700; border-radius:12px; }
.brand-mark.small { width:36px; height:36px; border-radius:9px; font-size:18px; flex:none; }
.eyebrow { margin:0 0 8px; color:var(--teal); font-size:11px; font-weight:750; letter-spacing:1.6px; }
h1 { margin:0; font-size:31px; letter-spacing:-.3px; } h2 { margin:0; font-size:25px; } h3 { margin:0; font-size:16px; }
.muted,.login-hint { color:var(--muted); } .login-copy { margin:8px 0 30px; }
.login-hint { margin:20px 0 0; font-size:12px; }
.stack-form { display:grid; gap:16px; } label { color:#44525b; font-size:13px; font-weight:650; display:grid; gap:7px; }
input,textarea,select { width:100%; border:1px solid #d9e1e5; background:#fff; color:var(--ink); border-radius:6px; padding:11px 12px; outline:none; transition:border .2s,box-shadow .2s; }
input:focus,textarea:focus,select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,107,112,.1); }
textarea { min-height:92px; resize:vertical; } .primary { background:var(--teal); color:#fff; padding:11px 16px; border-radius:6px; font-weight:700; } .primary:hover { background:var(--teal-dark); }
.wide { width:100%; margin-top:3px; } .ghost { padding:8px 11px; background:transparent; color:var(--muted); border-radius:5px; } .ghost:hover { background:#eef2f3; color:var(--ink); }
.app-view { min-height:100vh; display:flex; } .sidebar { position:fixed; inset:0 auto 0 0; width:240px; padding:26px 16px 18px; background:#102b32; color:#dcebec; display:flex; flex-direction:column; }
.side-brand { display:flex; align-items:center; gap:10px; padding:0 10px 34px; } .side-brand strong,.side-brand span { display:block; } .side-brand strong { color:#fff; font-size:15px; } .side-brand span { margin-top:3px; color:#8da9ab; font-size:11px; }
nav { display:grid; gap:5px; } .nav-item { display:flex; align-items:center; gap:11px; width:100%; padding:12px 12px; color:#aac0c1; background:transparent; border-radius:6px; text-align:left; } .nav-item:hover,.nav-item.active { color:#fff; background:#1c484e; } .nav-icon { width:18px; color:#a7d2ce; font-size:17px; text-align:center; }
.side-foot { margin-top:auto; padding:15px 11px 0; border-top:1px solid rgba(255,255,255,.1); color:#8da9ab; font-size:12px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .side-foot .copyright { flex-basis:100%; color:#718987; font-size:10px; line-height:1.4; } .status-dot { width:8px; height:8px; background:#d6b253; border-radius:50%; display:inline-block; } .status-dot.good { background:#68c59d; } .status-dot.bad { background:#e57a7a; }
.main { margin-left:240px; width:calc(100% - 240px); } .topbar { height:100px; padding:25px 42px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .top-actions { display:flex; align-items:center; gap:12px; } .user-pill { color:#53636a; font-size:13px; }
.page { padding:32px 42px 52px; max-width:1280px; } .page-intro { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; } .page-intro p { margin:7px 0 0; color:var(--muted); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; } .stat { padding:20px; background:#fff; border:1px solid var(--line); border-radius:8px; } .stat-label { color:var(--muted); font-size:12px; } .stat-value { margin-top:10px; font-size:30px; font-weight:750; letter-spacing:-1px; } .stat-note { margin-top:8px; color:var(--teal); font-size:12px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:18px; overflow:hidden; } .panel-head { padding:17px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .panel-head .muted { font-size:12px; }
.connection { display:flex; align-items:center; gap:16px; padding:20px; } .connection-icon { width:44px; height:44px; display:grid; place-items:center; background:var(--lime); color:var(--teal-dark); border-radius:9px; font-size:22px; } .connection h3 { margin-bottom:5px; } .connection p { margin:0; color:var(--muted); font-size:12px; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:650px; } th,td { padding:13px 20px; border-bottom:1px solid #edf1f2; text-align:left; white-space:nowrap; } th { color:#7d8a90; font-weight:600; font-size:12px; background:#fbfcfc; } td { color:#34464e; font-size:13px; } tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; font-size:11px; border-radius:20px; background:#eef5f4; color:var(--teal); } .badge.red { background:#fff0f0; color:var(--red); } .badge.gray { background:#f1f3f4; color:#78858a; }
.empty { padding:38px 20px; text-align:center; color:var(--muted); } .two-col { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; padding:20px; } .form-grid .full { grid-column:1/-1; } .form-actions { padding:0 20px 20px; display:flex; justify-content:flex-end; gap:10px; } .section-note { padding:14px 20px; background:#f7faf9; color:#587070; font-size:12px; line-height:1.6; }
.check-row { display:flex; gap:10px; flex-wrap:wrap; } .check-row label { display:flex; align-items:center; gap:6px; font-weight:500; } .check-row input { width:auto; }
.toast { position:fixed; z-index:10; right:24px; top:20px; padding:11px 15px; background:#17373d; color:#fff; border-radius:6px; opacity:0; transform:translateY(-8px); pointer-events:none; transition:.25s; } .toast.show { opacity:1; transform:translateY(0); }
.danger { color:var(--red); } .button-link { color:var(--teal); background:transparent; padding:5px 0; } .button-link:hover { text-decoration:underline; }
@media (max-width:900px) { .sidebar { width:70px; padding:18px 10px; } .side-brand { padding:0 7px 25px; } .side-brand > div:last-child,.nav-item:not(.active)::after,.nav-item { font-size:0; } .nav-item { justify-content:center; padding:12px 8px; } .nav-icon { font-size:18px; } .side-foot span:last-child { display:none; } .main { margin-left:70px; width:calc(100% - 70px); } .topbar { padding:22px 24px; } .page { padding:25px 24px 40px; } }
@media (max-width:650px) { .stat-grid { grid-template-columns:1fr 1fr; } .two-col { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .form-grid .full { grid-column:auto; } .topbar { height:auto; gap:15px; align-items:flex-start; } .top-actions { flex-direction:column; align-items:flex-end; gap:3px; } .page-intro { display:block; } .page-intro .primary { margin-top:15px; } }
.screen-shell { margin:-8px -18px -30px; padding:30px; min-height:calc(100vh - 145px); color:#d8f1ef; background:#07181e; border:1px solid #193f48; overflow:hidden; position:relative; }
.screen-shell:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(69,203,198,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(69,203,198,.12) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.screen-header,.screen-metrics,.screen-grid { position:relative; z-index:1; } .screen-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:25px; } .screen-kicker { color:#4ce0d4; letter-spacing:2px; font-size:10px; margin:0 0 8px; } .screen-header h2 { color:#f2ffff; letter-spacing:1px; } .screen-header p:not(.screen-kicker) { margin:8px 0 0; color:#72999e; font-size:12px; } .screen-live { color:#65dfaf; border:1px solid rgba(101,223,175,.35); padding:8px 11px; font-size:11px; letter-spacing:1px; } .screen-live i,.live-list i { display:inline-block; width:7px; height:7px; background:#65dfaf; border-radius:50%; margin-right:7px; box-shadow:0 0 10px #65dfaf; }
.screen-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; } .screen-metrics > div { padding:17px 18px; background:rgba(11,44,51,.8); border:1px solid #1c535b; border-top:2px solid #37bbb5; } .screen-metrics span,.screen-metrics em { display:block; color:#80a8ab; font-size:11px; font-style:normal; } .screen-metrics strong { display:block; margin:6px 0 4px; color:#eafffc; font-size:29px; font-weight:500; letter-spacing:1px; text-shadow:0 0 15px rgba(67,226,213,.35); }
.screen-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:13px; } .screen-panel { min-height:210px; padding:17px; background:rgba(9,35,42,.92); border:1px solid #1a4a52; position:relative; } .screen-panel:after { content:""; position:absolute; width:7px; height:7px; right:-1px; top:-1px; border-top:2px solid #4ce0d4; border-right:2px solid #4ce0d4; } .screen-panel-head { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid rgba(64,173,174,.18); } .screen-panel-head span { color:#47bcb6; font-size:10px; letter-spacing:1.5px; } .screen-panel-head b { color:#e8fffd; font-size:13px; font-weight:600; }
.bar-chart { height:145px; display:flex; align-items:flex-end; gap:7px; padding:20px 3px 0; } .bar-item { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; } .bar-stack { height:100%; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:2px; } .bar-stack i { display:block; width:62%; min-height:5px; background:linear-gradient(to top,#218d96,#49ddd0); box-shadow:0 0 10px rgba(55,216,202,.2); } .bar-stack small { display:block; width:25%; min-height:2px; background:#d4f279; } .bar-item label { color:#6b969a; font-size:9px; } .chart-legend { display:flex; gap:18px; color:#7da8aa; font-size:10px; margin-top:9px; } .chart-legend i { display:inline-block; width:7px; height:7px; margin-right:5px; background:#36c9bf; } .chart-legend span:last-child i { background:#d4f279; }
.rank-list { padding-top:10px; } .rank-list > div { display:grid; grid-template-columns:24px 1fr auto; gap:6px; align-items:center; padding:7px 0; } .rank { color:#d4f279; font-size:10px; } .rank-list label { color:#b9d6d7; font-size:12px; font-weight:500; } .rank-list em { color:#67999c; font-size:10px; font-style:normal; } .rank-track { grid-column:2/-1; height:3px; background:#15363d; } .rank-track i { display:block; height:100%; background:#38c9bf; box-shadow:0 0 8px rgba(56,201,191,.5); } .screen-empty { color:#668f93; font-size:12px; }
.live-list { padding-top:8px; } .live-list div { display:flex; align-items:center; padding:9px 0; border-bottom:1px solid rgba(64,173,174,.13); } .live-list span { color:#b9d6d7; font-size:12px; flex:1; overflow:hidden; text-overflow:ellipsis; } .live-list small { color:#668f93; font-size:10px; } .resource-radar { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding-top:12px; } .resource-radar div { padding:10px; background:rgba(21,69,72,.35); border-left:2px solid #34c3b8; } .resource-radar span,.resource-radar small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .resource-radar span { color:#b9d6d7; font-size:11px; } .resource-radar b { display:block; color:#d4f279; font-size:20px; font-weight:500; margin:4px 0; } .resource-radar small { color:#668f93; font-size:10px; }
@media (max-width:900px) { .screen-shell { margin:-12px -8px -20px; padding:20px; } .screen-metrics { grid-template-columns:1fr 1fr; } .screen-grid { grid-template-columns:1fr; } }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .guide-panel { margin-bottom:0; } .guide-panel:first-child { grid-row:span 2; } .guide-steps { padding:6px 20px 14px; } .guide-steps > div { display:grid; grid-template-columns:38px 1fr; column-gap:11px; padding:15px 0; border-bottom:1px solid #edf1f2; } .guide-steps > div:last-child { border-bottom:0; } .guide-steps b { grid-row:span 2; color:var(--teal); font-size:13px; letter-spacing:1px; } .guide-steps strong { font-size:14px; } .guide-steps p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.65; }
.guide-list { padding:7px 20px 15px; } .guide-list > div { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid #edf1f2; } .guide-list > div:last-child { border-bottom:0; } .guide-list b { display:grid; place-items:center; width:22px; height:22px; background:var(--lime); color:var(--teal-dark); border-radius:50%; font-size:11px; flex:none; } .guide-list strong,.guide-list small { display:block; } .guide-list strong { font-size:13px; } .guide-list small { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.55; }
details { border-top:1px solid #edf1f2; padding:14px 20px; } details:first-of-type { border-top:0; } summary { color:var(--ink); font-weight:650; cursor:pointer; } details p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.command-list { display:grid; grid-template-columns:auto 1fr; gap:11px 14px; align-items:center; padding:18px 20px 21px; } .command-list code { color:var(--teal-dark); background:#edf6f3; padding:4px 7px; border-radius:4px; font-size:12px; } .command-list span { color:var(--muted); font-size:12px; } .guide-bullets { margin:0; padding:17px 20px 20px 37px; color:var(--muted); font-size:12px; line-height:1.7; } .guide-bullets li { margin:7px 0; }
@media (max-width:900px) { .guide-grid { grid-template-columns:1fr; } .guide-panel:first-child { grid-row:auto; } }
.knowledge-test { border-left:3px solid var(--teal); } .inline-test { display:grid; grid-template-columns:1fr auto; gap:10px; padding:17px 20px; } .inline-test input { min-width:0; } .test-result { margin:0 20px 20px; padding:14px; color:#31535a; background:#f1f7f5; border:1px solid #d9e9e5; border-radius:5px; font:12px/1.7 "Microsoft YaHei",sans-serif; white-space:pre-wrap; word-break:break-word; } .clipped { display:block; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:4px; font-size:11px; }
@media (max-width:650px) { .inline-test { grid-template-columns:1fr; } }

/* 2026 operations workspace refresh */
:root {
  --ink:#1b2428;
  --muted:#788287;
  --line:#e5dfd7;
  --paper:#f3f0eb;
  --white:#fffdf9;
  --teal:#b74d38;
  --teal-dark:#853326;
  --lime:#f6e5bc;
  --red:#b33f49;
  --shadow:0 16px 36px rgba(36,31,26,.07);
  --slate:#202a2e;
  --slate-2:#29363a;
  --amber:#d38e22;
}
body { background:var(--paper); color:var(--ink); font-size:14px; letter-spacing:0; }
button { transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
button:active { transform:translateY(1px); }
.login-view { background:#ede8e0; position:relative; overflow:hidden; }
.login-view:before { content:""; position:absolute; inset:0; opacity:.36; background-image:linear-gradient(90deg, rgba(34,43,46,.055) 1px, transparent 1px),linear-gradient(rgba(34,43,46,.055) 1px, transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom right, black, transparent 65%); }
.login-panel { position:relative; border:1px solid #ded5ca; border-radius:8px; background:rgba(255,253,249,.96); box-shadow:0 24px 70px rgba(42,33,24,.12); }
.brand-mark { background:var(--slate); border-radius:8px; box-shadow:6px 6px 0 var(--lime); }
.eyebrow,.panel-kicker { color:var(--teal); }
.primary { background:var(--teal); border-radius:5px; }
.primary:hover { background:var(--teal-dark); }
.ghost:hover { background:#e8e1d8; }
.app-view { background:var(--paper); }
.sidebar { width:252px; padding:26px 15px 18px; background:var(--slate); border-right:1px solid #344247; }
.side-brand { padding:0 11px 34px; }
.side-brand span { color:#a9b2b1; }
nav { gap:3px; }
.nav-item { border-radius:5px; color:#aeb9b9; padding:11px 12px; }
.nav-item:hover,.nav-item.active { color:#fff7ec; background:var(--slate-2); }
.nav-item.active { box-shadow:inset 3px 0 0 #e9b85b; }
.nav-icon { color:#e9b85b; }
.side-foot { border-top-color:rgba(255,255,255,.14); }
.main { margin-left:252px; width:calc(100% - 252px); }
.topbar { height:92px; padding:22px 46px; background:rgba(255,253,249,.84); border-bottom-color:var(--line); backdrop-filter:blur(12px); }
.topbar h2 { font-size:26px; letter-spacing:.1px; }
.page { padding:36px 46px 60px; max-width:1440px; }
.page-intro { margin-bottom:28px; }
.page-intro h2 { letter-spacing:-.2px; }
.page-intro p { line-height:1.55; }
.stat-grid { gap:12px; }
.stat { border-radius:7px; border-color:var(--line); background:var(--white); box-shadow:0 3px 0 rgba(183,77,56,.06); }
.stat-value { color:var(--slate); }
.stat-note { color:var(--teal); }
.panel { border-radius:7px; border-color:var(--line); background:var(--white); box-shadow:var(--shadow); }
.panel-head { padding:18px 21px; }
.panel-head h3 { letter-spacing:.1px; }
.connection-icon { background:var(--lime); color:var(--teal-dark); }
input,textarea,select { border-color:#d9d1c7; border-radius:5px; background:#fffefa; }
input:focus,textarea:focus,select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(183,77,56,.11); }
th { background:#f8f4ee; color:#837970; }
th,td { border-bottom-color:#eee8df; }
.badge { background:#f6e9d8; color:var(--teal-dark); border-radius:4px; }
.badge.red { background:#f9e4e4; color:var(--red); }
.badge.gray { background:#ecefed; color:#6f797b; }
.button-link { color:var(--teal); }
.section-note { background:#fbf4e8; color:#735d4d; }
.setup-alert { background:#fff6dc; border-color:#ead29d; border-left-color:var(--amber); }
.toast { background:var(--slate); border-radius:5px; box-shadow:0 10px 24px rgba(20,25,26,.18); }
.form-actions { padding-bottom:21px; }
.panel-kicker { display:block; font-size:10px; font-weight:750; letter-spacing:1.6px; margin-bottom:5px; }
.field-help { color:var(--muted); font-size:11px; font-weight:400; line-height:1.45; }

.ops-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:14px; margin:0 0 18px; }
.ops-panel { margin:0; }
.ops-highlight { display:grid; grid-template-columns:auto 1fr auto 1fr; align-items:end; gap:5px 10px; padding:18px 21px 11px; }
.ops-highlight strong { color:var(--slate); font-size:27px; font-weight:650; }
.ops-highlight span { color:var(--muted); font-size:12px; padding-bottom:4px; }
.compact-list { padding:0 21px 14px; }
.compact-list > div { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #eee8df; }
.compact-list > div > div { min-width:0; flex:1; }
.compact-list b,.compact-list small { display:block; }
.compact-list b { font-size:13px; }
.compact-list small { color:var(--muted); margin-top:3px; font-size:11px; }
.compact-list em { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9b7a66; font-size:11px; font-style:normal; }
.status-bar { width:6px; height:25px; background:#e2b44d; border-radius:3px; flex:none; }
.status-bar.danger { background:var(--red); }
.compact-empty { padding:24px 16px; }
.usage-meter { display:flex; gap:30px; padding:20px 21px 10px; }
.usage-meter strong,.usage-meter span { display:block; }
.usage-meter strong { font-size:29px; font-weight:650; color:var(--slate); }
.usage-meter span { color:var(--muted); font-size:11px; margin-top:3px; }
.meter { height:7px; margin:8px 21px 8px; background:#eee7df; overflow:hidden; border-radius:8px; }
.meter i { display:block; height:100%; background:var(--teal); border-radius:8px; }
.meter-note { display:block; padding:0 21px 18px; color:var(--muted); font-size:11px; }

.diagnostic-hero { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; margin-bottom:18px; padding:20px 24px; border:1px solid #e4d5ba; border-radius:7px; background:#fff8e6; }
.diagnostic-hero.ready { border-color:#c9ddd3; background:#f3faf4; }
.diagnostic-hero.has-issues { border-left:4px solid var(--amber); }
.diagnostic-hero h3 { margin:4px 0 3px; font-size:18px; }
.diagnostic-hero p { margin:0; color:var(--muted); font-size:12px; }
.diagnostic-hero time { color:#9c8d7c; font-size:11px; }
.diagnostic-orbit { position:relative; width:45px; height:45px; border:1px solid #d6b45a; border-radius:50%; display:grid; place-items:center; }
.diagnostic-orbit:before { content:""; width:23px; height:23px; border:2px solid var(--teal); border-radius:50%; }
.diagnostic-orbit span { position:absolute; width:5px; height:5px; top:3px; left:20px; border-radius:50%; background:var(--teal); }
.diagnostic-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.diagnostic-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:var(--white); }
.diagnostic-item.ok { border-left:3px solid #6aa17e; }
.diagnostic-item.warning { border-left:3px solid var(--amber); }
.diagnostic-item.error { border-left:3px solid var(--red); }
.diagnostic-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#6aa17e; font-weight:700; }
.diagnostic-item.warning .diagnostic-icon { background:var(--amber); }
.diagnostic-item.error .diagnostic-icon { background:var(--red); }
.diagnostic-item strong { font-size:13px; }
.diagnostic-item p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.diagnostic-copy { padding:14px 21px 20px; color:#5f696c; font-size:12px; line-height:1.55; }
.diagnostic-copy p { margin:9px 0; }
.diagnostic-copy code { padding:2px 5px; background:#f2e8db; color:var(--teal-dark); border-radius:3px; }
.inline-form { display:grid; grid-template-columns:1fr 1.2fr auto; align-items:end; gap:12px; padding:18px 21px 21px; }
.inline-form label { min-width:0; }
.check-inline { display:flex; align-items:center; gap:7px; padding-bottom:12px; font-weight:500; }
.check-inline input { width:auto; }

.plan-toolbar { margin-bottom:14px; }
.plan-toolbar .inline-form { grid-template-columns:1fr auto auto; padding:15px 20px; }
.plan-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:18px; }
.plan-overview > div { padding:16px 18px; border:1px solid var(--line); border-top:2px solid #d1a45b; background:#fffdf9; }
.plan-overview strong,.plan-overview span { display:block; }
.plan-overview strong { color:var(--slate); font-size:24px; }
.plan-overview span { color:var(--muted); font-size:11px; margin-top:4px; }
.plan-card { margin-bottom:16px; }
.plan-card .panel-head p { margin:4px 0 0; }
.task-board { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; padding:4px 21px 14px; }
.task-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:13px 0; border-bottom:1px solid #eee8df; cursor:pointer; }
.task-row input { width:16px; height:16px; margin-top:2px; accent-color:var(--teal); }
.task-row span b,.task-row span strong,.task-row span small { display:block; }
.task-row span b { color:#aa8b64; font-size:10px; font-weight:650; letter-spacing:.4px; }
.task-row span strong { margin-top:3px; font-size:12px; }
.task-row span small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.45; }
.task-row em { color:#9d8574; font-size:9px; font-style:normal; letter-spacing:1px; }
.task-row.completed span strong { color:#83918d; text-decoration:line-through; }

.broadcast-composer > form { padding-top:16px; }
.broadcast-composer > form > label { padding:0 21px; }
.recipient-head { display:flex; align-items:center; justify-content:space-between; padding:18px 21px 8px; }
.recipient-head span { color:var(--muted); font-size:11px; }
.recipient-list { padding:0 21px; max-height:260px; overflow:auto; }
.recipient-list > label { display:flex; grid-template-columns:none; flex-direction:row; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #eee8df; cursor:pointer; }
.recipient-list input { width:16px; height:16px; accent-color:var(--teal); }
.recipient-list span { min-width:0; }
.recipient-list b,.recipient-list small { display:block; }
.recipient-list b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recipient-list small { margin-top:2px; color:var(--muted); font-size:10px; }
.ops-rhythm { padding:10px 21px 17px; }
.ops-rhythm > div { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid #eee8df; }
.ops-rhythm > div:last-child { border-bottom:0; }
.ops-rhythm b { width:26px; height:26px; display:grid; place-items:center; color:#fff; background:var(--slate); border-radius:50%; font-size:11px; }
.ops-rhythm span { color:#5d696c; font-size:12px; }
.message-cell { max-width:360px; white-space:normal; line-height:1.5; }

@media (max-width:1100px) { .page { padding-left:30px; padding-right:30px; } .topbar { padding-left:30px; padding-right:30px; } .ops-grid { grid-template-columns:1fr; } .task-board { grid-template-columns:1fr; } }
@media (max-width:900px) { .sidebar { width:70px; } .main { margin-left:70px; width:calc(100% - 70px); } .diagnostic-grid { grid-template-columns:1fr; } .inline-form { grid-template-columns:1fr; align-items:stretch; } .inline-form .primary { justify-self:start; } .plan-toolbar .inline-form { grid-template-columns:1fr; } .plan-overview { grid-template-columns:1fr 1fr; } }
@media (max-width:650px) { .page { padding:25px 18px 40px; } .topbar { padding:20px 18px; } .diagnostic-hero { grid-template-columns:auto 1fr; } .diagnostic-hero time { grid-column:2; } .plan-overview { gap:8px; } .plan-overview > div { padding:13px; } .ops-highlight { grid-template-columns:auto 1fr; } .ops-highlight strong:nth-of-type(2) { margin-top:8px; } }
.setup-alert { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin-bottom:18px; padding:14px 17px; color:#5f531d; background:#fffbea; border:1px solid #eadb91; border-left:3px solid #d0aa2d; border-radius:6px; } .setup-alert strong { white-space:nowrap; } .setup-alert span { color:#7a713e; font-size:12px; line-height:1.6; } .setup-alert button { padding:7px 9px; color:#735f12; background:transparent; border:1px solid #d9c66d; border-radius:5px; white-space:nowrap; }
@media (max-width:650px) { .setup-alert { grid-template-columns:1fr; } .setup-alert strong { white-space:normal; } .setup-alert button { justify-self:start; } }
.profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.profile-stats > div { padding:16px 18px; background:#fff; border:1px solid #e1ece9; border-top:2px solid var(--teal); }
.profile-stats strong,.profile-stats span { display:block; }
.profile-stats strong { color:var(--teal-dark); font-size:25px; font-weight:650; }
.profile-stats span { margin-top:4px; color:var(--muted); font-size:12px; }
.profile-stats .risk { border-top-color:#d66a5e; }
.profile-stats .risk strong { color:#a94e46; }
.profile-toolbar { display:grid; grid-template-columns:1fr 180px auto; gap:10px; padding:0 20px 16px; }
.profile-toolbar input,.profile-toolbar select { min-width:0; }
.profile-detail { margin-top:18px; border-left:3px solid var(--teal); }
.profile-consent { margin:0 20px 16px; padding:10px 12px; color:var(--muted); background:#f3f8f6; font-size:12px; }
.profile-followup { margin:22px 20px 0; padding-top:16px; border-top:1px solid #e5eeeb; }
.profile-followup h4,.profile-events h4 { margin:0 0 10px; font-size:14px; }
.profile-events { margin:22px 20px 0; padding-top:16px; border-top:1px solid #e5eeeb; }
.profile-events > div { padding:10px 0; border-bottom:1px solid #edf1f2; }
.profile-events span { color:var(--muted); font-size:11px; margin-right:10px; }
.profile-events strong { color:var(--teal-dark); font-size:12px; }
.profile-events p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.6; white-space:pre-wrap; }
@media (max-width:900px) { .profile-stats { grid-template-columns:repeat(2,1fr); } .profile-toolbar { grid-template-columns:1fr; } }
.account-notice { display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; padding:15px 18px; border:1px solid #d7d0c4; border-left:3px solid #d1a45b; background:#fff9ea; color:#695a48; border-radius:6px; font-size:12px; line-height:1.6; }
.account-notice strong { color:#8f5c28; white-space:nowrap; }
.account-guide { padding:8px 21px 16px; }
.account-guide > div { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #eee8df; }
.account-guide > div:last-child { border-bottom:0; }
.account-guide b { width:24px; height:24px; display:grid; place-items:center; flex:none; color:#fff; background:var(--slate); border-radius:50%; font-size:10px; }
.account-guide span { color:#5f6b6e; font-size:12px; line-height:1.55; }
.table-error { display:block; max-width:180px; margin-top:3px; color:var(--red); font-size:10px; white-space:normal; line-height:1.35; }
@media (max-width:650px) { .account-notice { display:block; } .account-notice strong { display:block; margin-bottom:4px; } }

/* SMS notification operations */
.sms-live-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #e4d8c7; background:#fffaf2; color:#8c6a3a; font-size:11px; letter-spacing:.2px; }
.sms-live-badge i { width:7px; height:7px; border-radius:50%; background:#d1a45b; display:inline-block; }
.sms-live-badge.on { border-color:#b8d8cb; color:var(--teal); background:#f1faf6; }
.sms-live-badge.on i { background:#4ea77b; box-shadow:0 0 0 4px rgba(78,167,123,.12); }
.sms-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.sms-stat-grid > div { padding:16px 18px; border:1px solid #dfe9e8; border-top:2px solid var(--teal); background:#fbfdfc; }
.sms-stat-grid span,.sms-stat-grid small,.sms-stat-grid strong { display:block; }
.sms-stat-grid span { color:#536c70; font-size:12px; }
.sms-stat-grid strong { margin-top:8px; color:var(--teal-dark); font-size:25px; font-weight:750; }
.sms-stat-grid strong.warn { color:#b45c42; }
.sms-stat-grid small { margin-top:5px; color:var(--muted); font-size:10px; }
.sms-warning { display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; padding:13px 16px; border:1px solid #ead8a5; border-left:3px solid #c99538; background:#fff9e9; color:#80632b; font-size:12px; line-height:1.6; }
.sms-warning strong { color:#9b671f; white-space:nowrap; }
.sms-config-layout { align-items:stretch; }
.sms-config { margin-bottom:18px; }
.sms-config .form-grid { padding-bottom:5px; }
.check-field { display:flex; align-items:center; grid-template-columns:none; flex-direction:row; gap:9px; cursor:pointer; }
.check-field input { width:16px; height:16px; accent-color:var(--teal); }
.check-field span { color:#3d5558; font-weight:650; }
.field-help { color:#859196; font-size:10px; font-weight:400; line-height:1.45; }
.sms-rule-list { padding:8px 20px 16px; }
.sms-rule-list > div { display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-bottom:1px solid #edf1f2; }
.sms-rule-list > div:last-child { border-bottom:0; }
.sms-rule-list b { width:24px; height:24px; display:grid; place-items:center; flex:none; color:#fff; background:var(--slate,#12202b); border-radius:50%; font-size:10px; }
.sms-rule-list span { color:#5c6b70; font-size:12px; line-height:1.55; }
.sms-template-list { overflow:visible; }
.sms-template-rows { padding:3px 20px 14px; }
.sms-template-row { display:grid; grid-template-columns:1.2fr 1fr auto auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid #edf1f2; }
.sms-template-row:last-child { border-bottom:0; }
.sms-template-meta strong,.sms-template-meta code,.sms-template-meta small { display:block; }
.sms-template-meta strong { color:#334b50; font-size:13px; }
.sms-template-meta code { width:max-content; margin-top:4px; padding:2px 5px; color:#8f6b3b; background:#fff7e8; font-size:10px; }
.sms-template-meta small { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; }
.sms-template-code { font-size:11px; }
.sms-template-code input { padding:8px 9px; font-size:12px; }
.sms-template-enabled { white-space:nowrap; }
.sms-days { display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; }
.sms-day { display:flex; align-items:center; grid-template-columns:none; flex-direction:row; gap:5px; padding:7px 9px; border:1px solid #e0e7e8; background:#fbfcfc; color:#53656a; font-size:11px; font-weight:500; cursor:pointer; }
.sms-day input { width:14px; height:14px; accent-color:var(--teal); }
.sms-schedule-form .form-grid { padding-bottom:7px; }
.sms-contact-list { overflow:visible; }
.sms-contact-list table input[type=checkbox] { width:16px; height:16px; accent-color:var(--teal); }
.sms-contact-list td small { font-size:10px; }
.sms-log-panel,.sms-test-panel { min-width:0; }
.sms-log-table { min-width:680px; }
.sms-log-table td,.sms-log-table th { padding-left:15px; padding-right:15px; }
.sms-log-table td:last-child { max-width:240px; white-space:normal; line-height:1.4; }

@media (max-width:1100px) { .sms-stat-grid { grid-template-columns:repeat(2,1fr); } .sms-template-row { grid-template-columns:1fr 1fr; } .sms-template-enabled { justify-self:start; } }
@media (max-width:650px) { .sms-stat-grid { grid-template-columns:1fr 1fr; gap:8px; } .sms-stat-grid > div { padding:12px; } .sms-warning { display:block; } .sms-warning strong { display:block; margin-bottom:4px; } .sms-template-row { grid-template-columns:1fr; gap:9px; } .sms-template-enabled { justify-self:start; } .sms-live-badge { margin-top:15px; } }

/* WeChat official account operations */
.official-live-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #e4d8c7; background:#fffaf2; color:#8c6a3a; font-size:11px; }
.official-live-badge i { width:7px; height:7px; border-radius:50%; background:#d1a45b; display:inline-block; }
.official-live-badge.on { border-color:#b8d8cb; color:var(--teal); background:#f1faf6; }
.official-live-badge.on i { background:#4ea77b; box-shadow:0 0 0 4px rgba(78,167,123,.12); }
.official-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.official-stat-grid > div { padding:16px 18px; border:1px solid #dfe9e8; border-top:2px solid #74a6a0; background:#fbfdfc; }
.official-stat-grid span,.official-stat-grid small,.official-stat-grid strong { display:block; }
.official-stat-grid span { color:#536c70; font-size:12px; }
.official-stat-grid strong { margin-top:8px; color:var(--teal-dark); font-size:25px; font-weight:750; }
.official-stat-grid small { margin-top:5px; color:var(--muted); font-size:10px; }
.official-warning { display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; padding:13px 16px; border:1px solid #d5dfec; border-left:3px solid #668eb8; background:#f4f8fd; color:#526b83; font-size:12px; line-height:1.6; }
.official-warning strong { color:#3d648d; white-space:nowrap; }
.official-config-layout { align-items:stretch; }
.official-config { margin-bottom:18px; }
.official-guide { padding:8px 20px 16px; }
.official-guide > div { display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-bottom:1px solid #edf1f2; }
.official-guide > div:last-child { border-bottom:0; }
.official-guide b { width:24px; height:24px; display:grid; place-items:center; flex:none; color:#fff; background:#315873; border-radius:50%; font-size:10px; }
.official-guide span { color:#5c6b70; font-size:12px; line-height:1.55; }
.official-template-list,.official-accounts-list,.official-subscribers { overflow:visible; }
.official-template-rows { padding:3px 20px 14px; }
.official-template-row { display:grid; grid-template-columns:1.2fr 1fr auto auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid #edf1f2; }
.official-template-row:last-child { border-bottom:0; }
.official-template-row strong,.official-template-row code,.official-template-row small { display:block; }
.official-template-row strong { color:#334b50; font-size:13px; }
.official-template-row code { width:max-content; margin-top:4px; padding:2px 5px; color:#3f6d93; background:#eef5fc; font-size:10px; }
.official-template-row small { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; }
.official-template-row label { font-size:11px; }
.official-template-row label input { padding:8px 9px; font-size:12px; }
.official-days { display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; }
.official-log-table { min-width:760px; }
.official-log-table td,.official-log-table th { padding-left:15px; padding-right:15px; }
.official-log-table td:last-child { max-width:220px; white-space:normal; line-height:1.4; }
.official-test-panel,.official-log-panel { min-width:0; }
.official-schedule-form .form-grid { padding-bottom:7px; }

@media (max-width:1100px) { .official-stat-grid { grid-template-columns:repeat(2,1fr); } .official-template-row { grid-template-columns:1fr 1fr; } }
@media (max-width:650px) { .official-stat-grid { grid-template-columns:1fr 1fr; gap:8px; } .official-stat-grid > div { padding:12px; } .official-warning { display:block; } .official-warning strong { display:block; margin-bottom:4px; } .official-template-row { grid-template-columns:1fr; gap:9px; } .official-live-badge { margin-top:15px; } }

/* UI system refresh */
:focus-visible{outline:3px solid rgba(211,142,34,.65);outline-offset:2px}.skip-link{position:fixed;z-index:100;top:-48px;left:16px;padding:10px 14px;color:#fff;background:var(--slate);border-radius:0 0 5px 5px;transition:top .2s}.skip-link:focus{top:0}.mobile-menu{display:none;width:38px;height:38px;color:var(--slate);background:#f2ede5;border:1px solid var(--line);border-radius:6px;font-size:19px}.nav-item{min-height:42px}.panel,.stat{transition:box-shadow .2s ease,transform .2s ease}.panel:hover{box-shadow:0 18px 40px rgba(36,31,26,.10)}.stat:hover{transform:translateY(-2px)}.empty{min-height:100px;display:grid;place-items:center}.is-loading:after{content:"";position:fixed;z-index:200;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),#e9b85b,var(--teal));background-size:200% 100%;animation:loading-bar 1.1s linear infinite}@keyframes loading-bar{from{background-position:0 0}to{background-position:200% 0}}@media(max-width:900px){.mobile-menu{display:block;flex:none}.topbar{gap:12px}.sidebar{transform:translateX(-100%);transition:transform .22s ease;z-index:20;box-shadow:12px 0 30px rgba(0,0,0,.16)}.sidebar.open{transform:translateX(0);width:252px;padding:26px 15px 18px}.sidebar.open .side-brand>div:last-child,.sidebar.open .nav-item{font-size:14px}.sidebar.open .nav-item{justify-content:flex-start;padding:11px 12px}.main{margin-left:0;width:100%}.nav-scrim{display:block;position:fixed;inset:0;z-index:10;background:rgba(18,28,31,.35)}}@media(max-width:520px){.topbar h2{font-size:21px}.user-pill{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat-value{font-size:25px}}

/* Commercial theme v3: unified brand system */
:root{--paper:#f5f7f8;--white:#fff;--ink:#18252b;--muted:#6c7b82;--line:#e3e9eb;--teal:#0b7f78;--teal-dark:#075b58;--lime:#e6f4d7;--amber:#e4a93a;--slate:#102e35;--shadow:0 10px 30px rgba(16,46,53,.08)}
body{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink)}
.login-view{background:radial-gradient(circle at 10% 10%,#d9f0e8 0,transparent 38%),linear-gradient(135deg,#edf5f3,#f8faf9)}.login-panel{border-radius:16px;box-shadow:0 24px 80px rgba(15,68,65,.14)}.brand-mark{background:linear-gradient(135deg,var(--teal),#0b5f67);box-shadow:5px 5px 0 #d6efc6}
.sidebar{background:linear-gradient(180deg,#0d3038,#102a31);box-shadow:8px 0 26px rgba(9,32,37,.12)}.side-brand{padding-bottom:28px}.nav-item{border-radius:9px;padding:12px 13px}.nav-item.active{background:linear-gradient(90deg,#164e55,#1a4148);box-shadow:inset 3px 0 var(--amber)}
.topbar{height:88px;background:rgba(255,255,255,.9);box-shadow:0 1px 0 var(--line)}.page{max-width:1500px}.panel,.stat{border-radius:12px;background:var(--white);box-shadow:var(--shadow)}.panel-head{padding:19px 22px}.stat{padding:21px;border-top:3px solid #d9eee7}.stat-value{font-size:32px;color:var(--slate)}
.primary{border-radius:8px;background:var(--teal);box-shadow:0 4px 10px rgba(11,127,120,.18)}.primary:hover{background:var(--teal-dark);transform:translateY(-1px)}.ghost{border-radius:8px}.badge{border-radius:999px;padding:5px 10px}.table-wrap{border-radius:0 0 12px 12px}th{font-size:11px;letter-spacing:.4px;text-transform:uppercase}input,textarea,select{border-radius:8px;padding:12px 13px}.form-grid{gap:18px}.setup-alert{border-radius:10px}
@media(max-width:900px){.topbar{height:76px}.page{padding:24px 18px 42px}.stat-grid{gap:10px}.panel{box-shadow:0 6px 20px rgba(16,46,53,.07)}}

/* SMS operations */
.sms-template-row.is-disabled{opacity:.58;background:#f7f9f9}.sms-template-row.is-disabled .sms-template-code input{background:#eef2f2}.sms-health{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.sms-health span{padding:8px 12px;border-radius:999px;background:#e8f5ef;color:#176b59;font-size:12px}.sms-health span.warn{background:#fff2d9;color:#8b5a14}.sms-health span.danger{background:#fde7e7;color:#9c3d42}

/* Release polish */
button,.button-link,input,select,textarea{min-height:40px}.button-link{display:inline-flex;align-items:center;gap:5px}.badge{font-weight:600}.table-error{display:block;margin-top:4px;color:var(--red);font-size:11px;max-width:220px;white-space:normal;line-height:1.4}.setup-alert,.sms-warning,.account-notice{border-radius:10px;line-height:1.65}.panel-head h3{font-weight:700}.page-intro p:not(.eyebrow){max-width:760px}.check-field{display:flex;align-items:center;gap:9px}.check-field input{width:18px;height:18px;min-height:0;accent-color:var(--teal)}