:root{
  --bg:#0b0e0c;
  --panel:#0f1310;
  --panel-2:#121814;
  --paper:#0f1310;
  --line:#232b24;
  --ink:#e9efe7;
  --muted:#8b978a;
  --ink-dim:#8b978a;
  --ink-faint:#5b675c;
  --green:#46e08d;
  --green-dim:rgba(70,224,141,.12);
  --amber:#f2b552;
  --amber-dim:rgba(242,181,82,.12);
  --red:#f07a68;
  --serif:"Noto Serif SC","Songti SC",SimSun,serif;
  --sans:"Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono","Noto Sans SC",monospace;
}

html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);line-height:1.75;-webkit-font-smoothing:antialiased;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px}
body:before{display:none}
::selection{background:var(--green);color:#08110b}

.site-header,.admin-header{height:64px;background:rgba(11,14,12,.95);border-color:var(--line);backdrop-filter:none;padding-left:max(20px,calc((100vw - 960px)/2));padding-right:max(20px,calc((100vw - 960px)/2))}
.brand span{width:30px;height:30px;border-radius:5px;background:var(--green);color:#08120c;box-shadow:none}
.brand b{font:500 13px var(--mono);letter-spacing:.04em}
.brand small{font:400 10px var(--mono);letter-spacing:.04em;color:var(--ink-faint);border-color:var(--line)}
.official-link{min-height:38px;display:flex;align-items:center;border:1px solid #37423a;border-radius:5px;padding:0 14px;color:var(--ink);font:500 12px var(--mono)}
.official-link:hover{border-color:var(--amber);color:var(--amber);background:transparent}
.header-status{font:400 11px var(--mono);color:var(--ink-dim);letter-spacing:.04em}
.header-status i{width:7px;height:7px;background:var(--green);box-shadow:none;animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

main{max-width:960px;padding:32px 20px 56px}
.monitor-hero{min-height:0;display:block;padding:44px 0 38px;margin:0;border-bottom:1px solid var(--line)}
.monitor-hero:before,.monitor-hero:after,.hero-seal{display:none}
.monitor-hero .eyebrow{margin-bottom:16px}
.monitor-hero h1{font:900 clamp(30px,5vw,42px)/1.35 var(--serif);margin:0 0 14px;max-width:720px}
.monitor-hero h1 span{color:var(--green)}
.monitor-hero>div:first-child>p:last-child{font-size:14px;line-height:1.75;color:var(--ink-dim);max-width:44em}
.eyebrow,.section-index{font:500 11px var(--mono)!important;letter-spacing:.16em!important;color:var(--ink-dim)!important}
.eyebrow:before,.section-index:before{content:"// ";color:var(--green)}

.summary{margin:0 0 48px;border:0;border-bottom:1px solid var(--line);background:transparent}
.summary div{min-height:auto;padding:22px 4px 24px}
.summary div+div{border-left:0;padding-left:20px}
.summary span,.admin-summary span{font:400 11px var(--mono);color:var(--ink-faint);letter-spacing:.08em}
.summary strong{font:500 26px var(--mono);color:var(--ink)}
.summary>div:first-child strong{color:var(--green)}

.toolbar{margin-bottom:14px;align-items:end}
.toolbar>div{gap:8px 12px}
.toolbar h2,.method-heading h2,.self-test-copy h2{font:900 clamp(20px,2.6vw,25px)/1.45 var(--serif)}
.toolbar span{font:400 10px var(--mono);color:var(--ink-faint)}
.icon{width:40px;height:40px;border:1px solid #37423a;border-radius:5px;background:var(--panel);color:var(--ink)}
.icon:hover{border-color:var(--green);color:var(--green);background:var(--panel)}
.legend{font:400 10px var(--mono);color:var(--ink-dim);margin:0 2px 13px}

.groups{gap:12px}
.group-card{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:none}
.group-card:hover{transform:translateY(-1px);border-color:#37423a;box-shadow:none}
.group-head{height:auto;min-height:68px;padding:14px 18px;background:var(--panel-2);border-color:var(--line)}
.group-mark{width:38px;height:38px;border-radius:6px;background:var(--green-dim);border:1px solid rgba(70,224,141,.3);color:var(--green);font:500 13px var(--mono)}
.group-head h3{font-size:13px;font-weight:500}
.group-head p{font:400 10px var(--mono);color:var(--ink-faint)}
.site-row{padding:18px;border-color:var(--line)}
.site-row:hover{background:var(--panel-2)}
.site-name>i{width:32px;height:32px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--green);font:500 11px var(--mono)}
.site-name strong{font-size:13px;font-weight:500}
.site-name span{font:400 10px var(--mono);color:var(--ink-faint)}
.site-name em{color:var(--amber);background:var(--amber-dim);border:1px solid rgba(242,181,82,.35);border-radius:99px;font:400 9px var(--mono)}
.metric strong{font:500 16px var(--mono)}
.metric span{font:400 9px var(--mono);color:var(--ink-faint)}
.result-cells{height:26px;gap:3px}.empty{background:#1b221d}.passed{background:var(--green)}

.self-test-section{margin-top:58px;padding:40px 0;border-color:var(--line);grid-template-columns:1fr;gap:24px}
.self-test-copy{max-width:660px}
.self-test-copy h2{margin:7px 0 12px}
.self-test-copy>p:last-of-type{font-size:13px;line-height:1.75;color:var(--ink-dim);max-width:48em}
.privacy-line{margin-top:18px;font:400 10px var(--mono);color:var(--ink-faint)}
.privacy-line i{width:6px;height:6px;background:var(--green);box-shadow:none}
.self-test-console{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:none}
.self-test-console:before{top:9px;color:var(--ink-faint);font:400 9px var(--mono)}
.self-test-console form{gap:14px}
.self-test-console label>span{font:400 11px var(--mono);color:var(--ink-dim);letter-spacing:.08em}
.self-test-console input{height:44px;background:var(--panel-2);border:1px solid #303a32;border-radius:5px;color:var(--ink);font:400 12px var(--mono)}
.self-test-console input:focus{border-color:var(--green);box-shadow:0 0 0 2px var(--green-dim)}
.test-submit{min-height:44px;border-radius:5px;background:var(--green);font:500 13px var(--mono);padding:0 20px}
.test-submit:hover:not(:disabled){background:#5ceb9e;transform:translateY(-1px);box-shadow:none}
.test-result{border-color:var(--line)}
.test-result.running small,.test-details span{font-family:var(--mono)}
.test-result.running strong{font-size:14px}.test-result.running p{font-size:12px;color:var(--ink-dim)}
.test-orbit{border-color:#37423a}.test-orbit i{background:var(--green);box-shadow:none}
.test-verdict strong{font:900 22px var(--serif)}
.test-details{border-color:var(--line);border-radius:6px;overflow:hidden}
.test-details>div{border-color:var(--line)}

.method-section{margin-top:58px;padding-top:40px;border-color:var(--line)}
.method-heading{margin-bottom:18px}
.method-heading h2{margin-top:7px}
.method-heading>p{font-size:12px;line-height:1.75;color:var(--ink-dim)}
.method-grid{grid-template-columns:1fr 1fr;border:0;gap:12px;background:transparent}
.method-grid article{min-height:0;padding:20px;background:var(--panel);border:1px solid var(--line)!important;border-radius:8px}
.method-grid article>span{font:500 11px var(--mono);color:var(--green);border:0;padding:0}
.method-grid h3{font-size:14px;font-weight:500;margin:13px 0 7px}
.method-grid p{font-size:12px;line-height:1.75;color:var(--ink-dim)}
.question-note{grid-template-columns:145px 1fr auto;margin-top:12px;padding:16px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
.question-note span{font:400 10px var(--mono);color:var(--ink-faint)}
.question-note strong{font-size:13px}.question-note p{font-size:11px;color:var(--ink-dim)}
.question-note>b{font:500 11px var(--mono);color:var(--green)}
main>footer{margin-top:58px;padding:22px 0 8px;border-color:var(--line);font-size:11px;color:var(--ink-faint)}
main>footer strong{font:900 14px var(--serif)}main>footer a{font-family:var(--mono)}

/* Admin follows the same reference tokens with a wider work area. */
.admin-main{max-width:1180px;padding:36px 20px 56px}
.admin-title h1{font:900 clamp(27px,4vw,36px)/1.4 var(--serif)}
.admin-title>div>p:last-child{font-size:13px;color:var(--ink-dim)}
.primary,.ghost{min-height:44px;border-radius:5px;font:500 12px var(--mono)}
.primary{background:var(--green);color:#08120c}.primary:hover{background:#5ceb9e;box-shadow:none}
.ghost{border-color:#37423a;background:transparent;color:var(--ink)}.ghost:hover{border-color:var(--amber);color:var(--amber);background:transparent}
.admin-summary{margin-bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.admin-summary>div{padding:15px 17px}.admin-summary>div+div{border-left:1px solid var(--line)}
.admin-summary strong{font:500 20px var(--mono)}
.admin-workspace{grid-template-columns:235px minmax(0,1fr);gap:12px}
.group-list,.admin-editor{background:var(--panel);border:1px solid var(--line);border-radius:8px}
.group-list{padding:8px}.list-title{font:400 11px var(--mono);color:var(--ink-faint)}
.group-list>button{min-height:44px;border-radius:5px;font-size:12px;color:var(--ink-dim)}
.group-list>button.active{background:var(--green-dim);color:var(--green);box-shadow:none}
.group-list>button.active:before{display:none}
.admin-editor{padding:24px}.editor-head h2{font:900 23px var(--serif)}
.schedule{padding:14px 16px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
.schedule input[type=number]{height:36px;background:var(--panel);border-color:#37423a;border-radius:5px}
.single-source{border-radius:8px;background:var(--panel-2);border-color:var(--line)}
.single-source>div{padding:17px!important;border-color:var(--line)}
.single-source span{font:400 10px var(--mono);color:var(--ink-faint)}
.single-source strong,.single-source code{font:400 12px var(--mono)}
.danger{color:var(--amber)!important;border-color:rgba(242,181,82,.35)!important;background:var(--amber-dim)!important}

.login-screen{background:var(--bg)}
.login-screen:before,.login-screen:after{display:none}
.login-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:36px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.login-mark{background:var(--green);color:#08120c;border-radius:6px}
.login-box h1{font:900 26px var(--serif)}
.login-box>p:not(.eyebrow),.login-box label{color:var(--ink-dim)}
.login-box input,dialog input{height:44px;background:var(--panel-2);border-color:#37423a;border-radius:5px}
.login-box input:focus,dialog input:focus{border-color:var(--green);box-shadow:0 0 0 2px var(--green-dim)}
.manual-secret{background:var(--panel-2);border-color:var(--line);border-radius:6px}
dialog{background:var(--panel);border-color:var(--line);border-radius:10px}
dialog::backdrop{background:rgba(5,8,6,.78);backdrop-filter:none}
.toast{background:var(--panel-2);color:var(--ink);border:1px solid rgba(70,224,141,.4);border-radius:6px;font:400 12px var(--mono)}

.admin-tabs{display:flex;gap:4px;margin:18px 0 12px;border-bottom:1px solid var(--line);overflow-x:auto}
.admin-tabs button{min-height:42px;padding:0 15px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-dim);font:500 12px var(--mono);white-space:nowrap}
.admin-tabs button:hover{color:var(--ink)}.admin-tabs button.active{color:var(--green);border-color:var(--green)}
.admin-view{display:none}.admin-view.active{display:block}
.bulk-bar{min-height:48px;display:flex;align-items:center;gap:10px;padding:7px 9px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.bulk-bar label{margin-right:auto;font-size:12px;color:var(--ink-dim)}
.bulk-bar select,.view-head select,.settings-grid select,.form-grid select{height:36px;border:1px solid #37423a;border-radius:5px;background:var(--panel-2);color:var(--ink);padding:0 10px;font:400 11px var(--mono)}
.bulk-bar .ghost{min-height:36px}
.group-choice{display:grid;grid-template-columns:22px 1fr;align-items:center}.group-choice>input{accent-color:var(--green)}
.group-choice>button{width:100%;min-height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:5px;color:var(--ink-dim);font-size:12px}
.group-choice>button.active{background:var(--green-dim);color:var(--green)}.group-choice small{font:400 9px var(--mono);color:var(--ink-faint)}
.schedule>span{color:var(--ink-dim);font:400 11px var(--mono)}
.mini-history{margin-top:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mini-history header{position:static;height:auto;padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);font:400 10px var(--mono)}
.mini-history header b{margin-left:auto;color:var(--green)}.mini-history>div{display:grid;grid-template-columns:8px 70px 60px 1fr;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px}.mini-history>div:last-child{border:0}.mini-history i{width:7px;height:7px;border-radius:50%}.mini-history code,.mini-history time{font:400 10px var(--mono);color:var(--ink-dim)}.mini-history time{text-align:right}
.view-head{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.view-head h2{font:900 24px var(--serif);margin:3px 0 0}.view-head>div:last-child{display:flex;gap:8px;align-items:center}.export-link{display:inline-flex;align-items:center;text-decoration:none;padding:0 14px}
.data-table,.log-panel,.settings-grid,.security-grid>article{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.trend-panel{margin-bottom:12px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.trend-panel header{position:static;height:auto;padding:0 0 12px;background:transparent;border:0;display:flex;justify-content:space-between;font:400 11px var(--mono)}.trend-panel header small{color:var(--ink-faint)}.trend-chart{height:110px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.trend-day{display:grid;grid-template-rows:1fr auto;gap:7px;min-width:0}.trend-day>span{text-align:center;font:400 9px var(--mono);color:var(--ink-faint)}.trend-bars{height:82px;display:flex;align-items:end;justify-content:center;gap:3px;border-bottom:1px solid var(--line)}.trend-bars i{width:min(10px,25%);min-height:2px;border-radius:2px 2px 0 0}
.table-head,.table-row{display:grid;grid-template-columns:1.25fr 80px 1fr 70px 95px 1.4fr;gap:12px;align-items:center;padding:11px 14px}
.table-head{background:var(--panel-2);font:400 10px var(--mono);color:var(--ink-faint)}.table-row{border-top:1px solid var(--line);font-size:11px}.table-row>span:first-child{display:grid}.table-row small{color:var(--ink-faint)}.table-row code{font:400 10px var(--mono);color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis}.status-chip{display:inline-flex;padding:2px 8px;border-radius:99px;font:400 9px var(--mono);font-style:normal}.status-chip.passed{color:var(--green);background:var(--green-dim)}.status-chip.failed,.status-chip.error{color:var(--amber);background:var(--amber-dim)}.result-detail{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-dim)}
.log-panel{padding:8px 14px}.log-panel .log-line{display:grid;grid-template-columns:72px 145px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font:400 11px var(--mono);opacity:1}.log-panel .log-line:last-child{border:0}.log-panel .tag.ok{color:var(--green)}.log-panel .tag.warn,.log-panel .tag.error{color:var(--amber)}.log-panel time{color:var(--ink-faint)}.log-panel p{margin:0;color:var(--ink-dim)}
.settings-grid{padding:20px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.settings-grid label,.form-grid label{display:grid;gap:7px;font-size:11px;color:var(--ink-dim)}.settings-grid label small{color:var(--ink-faint)}.settings-grid input,.form-grid input,.security-grid input{height:44px;border:1px solid #37423a;border-radius:5px;background:var(--panel-2);color:var(--ink);padding:0 11px}.settings-grid input:focus,.form-grid input:focus,.security-grid input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 2px var(--green-dim)}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.config-transfer{grid-column:1/-1;display:flex;gap:8px;padding-top:14px;border-top:1px solid var(--line)}.import-label{min-height:44px;display:inline-flex!important;align-items:center;padding:0 14px;cursor:pointer;color:var(--ink)!important}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.security-grid>article{padding:20px}.security-grid h3{margin:0 0 13px;font-size:14px}.security-grid p{font-size:11px;color:var(--ink-dim)}.security-grid>article>button{margin-top:14px}.audit-card{grid-column:1/-1}.session-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.session-row>span{display:grid}.session-row b,.session-row small,.session-row time{font:400 10px var(--mono)}.session-row small,.session-row time{color:var(--ink-faint)}.session-row button{min-height:34px}.audit-row{display:grid;grid-template-columns:150px 1fr 150px;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px}.audit-row code{color:var(--green)}.audit-row time{color:var(--ink-faint);text-align:right}.security-grid form{display:flex;gap:8px}.security-grid form input{min-width:0;flex:1}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.form-grid .wide{grid-column:1/-1}#editDialog{width:min(650px,calc(100% - 28px))}

@media(min-width:641px) and (max-width:1024px){
  main{max-width:800px;padding-left:20px;padding-right:20px}
  .admin-main{max-width:940px}
  .admin-workspace{grid-template-columns:205px minmax(0,1fr)}
}

@media(max-width:640px){
  body{background-size:56px 56px}
  .site-header,.admin-header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  main,.admin-main{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .monitor-hero{padding:34px 0 30px}
  .monitor-hero h1{font-size:30px}
  .monitor-hero>div:first-child>p:last-child{max-width:none;font-size:13px}
  .summary{margin-bottom:40px}.summary div{padding:18px 4px}.summary div+div{padding-left:10px}.summary strong{font-size:21px}.summary span{font-size:9px}
  .self-test-section,.method-section{margin-top:48px;padding-top:32px}
  .self-test-console{padding:18px 14px}.self-test-console:before{display:none}
  .test-form-row,.method-grid{grid-template-columns:1fr}
  .question-note{grid-template-columns:1fr;gap:8px}
  .admin-main{padding-top:28px}
  .admin-title h1{font-size:28px}
  .admin-editor{padding:18px}
  .bulk-bar{flex-wrap:wrap}.bulk-bar label{width:100%}
  .view-head{align-items:flex-start}.view-head>div:last-child{flex-wrap:wrap;justify-content:flex-end}
  .table-head{display:none}.table-row{grid-template-columns:1fr auto;gap:8px}.table-row>*:nth-child(n+3){display:none}
  .log-panel .log-line{grid-template-columns:72px 1fr}.log-panel time{display:none}
  .settings-grid,.security-grid{grid-template-columns:1fr}.settings-grid{padding:16px}.audit-card{grid-column:auto}.audit-row{grid-template-columns:110px 1fr}.audit-row time{display:none}
  .session-row{grid-template-columns:1fr auto}.session-row time{display:none}
  .form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}
  .security-grid form{display:grid}
  .admin-summary>div{padding:14px}
  .login-box{padding:30px 22px}
}

@media(max-width:400px){
  .brand small{display:none}
  .summary strong{font-size:19px}
  .summary span{font-size:8px}
  .test-result.running{align-items:flex-start}
}

@media(max-height:520px) and (orientation:landscape){main,.admin-main{padding-top:18px;padding-bottom:20px}}
