:root{
  --bg:#F6F5F1;
  --panel:#FFFFFF;
  --ink:#1C1E1F;
  --muted:#6B6F76;
  --line:#E3E1D9;
  --accent:#1F6F63;
  --accent-ink:#0E3D36;
  --accent-soft:#E4EFEC;
  --danger:#B3432B;
  --danger-soft:#F7E6E1;
  --ok:#1F6F63;
  --ok-soft:#E4EFEC;
  --warn:#9C7A1F;
  --warn-soft:#F5EEDB;
  --radius:8px;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --sidebar-w:236px;
}

[data-theme="dark"]{
  --bg:#15171A;
  --panel:#1C1F23;
  --ink:#EDEBE4;
  --muted:#9498A0;
  --line:#2C3036;
  --accent:#4FB3A3;
  --accent-ink:#CFEFE8;
  --accent-soft:#1E3630;
  --danger:#E07A5F;
  --danger-soft:#3A2420;
  --ok:#4FB3A3;
  --ok-soft:#1E3630;
  --warn:#D8B34A;
  --warn-soft:#3A3220;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom: 40px; /* 留出底部全局时钟栏高度 */
}
h1,h2{font-family:var(--sans);margin:0;}
a{color:var(--accent);}
button{font-family:inherit;}

#app{display:flex;min-height:100vh;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--panel);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding:22px 14px; gap:22px; position:sticky; top:0; height:100vh;
}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:0 8px;}
.brand-mark{
  width:30px;height:30px;border-radius:6px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;}
.brand-text strong{font-size:15px;}
.brand-text small{color:var(--muted);font-size:11.5px;}

.nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:6px;
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500; border:1px solid transparent;
}
.nav-item svg{width:17px;height:17px;flex:none;}
.nav-item:hover{background:var(--accent-soft);color:var(--ink);}
.nav-item.active{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--line);}

.sidebar-footer{display:flex;align-items:center;gap:8px;padding:0 8px;}

/* ---------- Topbar (mobile) ---------- */
.topbar{
  display:none; align-items:center; gap:10px; padding:10px 14px;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:20;
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:600;flex:1;}
.topbar-actions{display:flex;align-items:center;gap:6px;}

.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:29;}

/* ---------- Buttons / inputs ---------- */
.icon-btn{
  width:34px;height:34px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn:hover{background:var(--accent-soft);}
.pill-btn{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;
}
.pill-btn:hover{background:var(--accent-soft);}

.btn{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:7px;padding:9px 16px;font-size:13.5px;font-weight:500;cursor:pointer;
}
.btn:hover{border-color:var(--accent);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn-ghost:hover{color:var(--danger);background:var(--danger-soft);}

input[type="text"],input[type="search"],textarea,select{
  font-family:var(--mono); background:var(--bg); border:1px solid var(--line);
  border-radius:7px; color:var(--ink); padding:9px 11px; font-size:13.5px;
}
textarea{width:100%;resize:vertical;font-family:var(--mono);}
select{font-family:var(--sans);}

.field-inline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.checkbox{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 0;cursor:pointer;}
.checkbox input{accent-color:var(--accent);width:15px;height:15px;}

/* ---------- Main content ---------- */
.content{
  flex:1; min-width:0; padding:36px 40px 60px; max-width:920px;
  display: flex; flex-direction: column;
}
.panel{display:none;}
.panel.active{display:flex; flex-direction:column; flex: 1; animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.panel-head{margin-bottom:22px;max-width:70ch;}
.panel-head h1{font-size:24px;font-weight:600;margin-bottom:6px;}
.panel-head p{color:var(--muted);font-size:14px;margin:0;}

.panel-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0;}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:18px;
}
.card h2{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--ink);}
.card-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.card-head-row h2{margin:0;}
.hint{color:var(--muted);font-size:12.5px;margin:6px 0 0;}

/* Readout */
.readout{display:flex;flex-direction:column;}
.readout-row{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line); font-size:13.5px;
}
.readout-row:last-child{border-bottom:none;}
.readout-row .k{color:var(--muted);}
.readout-row .v{font-family:var(--mono);text-align:right;word-break:break-all;}

/* IP Grid */
.ip-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 20px;
}
.ip-card { margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; border-top: 4px solid var(--accent); }
.ip-card h2 { font-size: 13.5px; color: var(--muted); }
.ip-main-value { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--accent-ink); margin: 8px 0; word-break: break-all; }
.ip-sub-value { font-size: 13px; color: var(--muted); }

/* Latency Grid */
.latency-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
}
.latency-item {
  background: var(--bg); border: 1px solid var(--line); padding: 12px; border-radius: var(--radius);
  display: flex; justify-content: space-between; align-items: center;
}
.site-name { font-weight: 600; font-size: 13px; }
.site-ms { font-family: var(--mono); font-size: 14px; font-weight: 700; }

/* Table */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;}
.table{width:100%; min-width:560px; border-collapse:collapse;font-size:13px;}
.table th{text-align:left;font-weight:600;color:var(--muted);font-size:11.5px;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.table td{padding:9px 10px;border-bottom:1px solid var(--line);font-family:var(--mono);white-space:nowrap;}
.table tr:last-child td{border-bottom:none;}

/* Speed test */
.speed-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
  background: var(--accent-soft); padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.meta-item { display: flex; flex-direction: column; }
.meta-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.meta-value { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--accent-ink); word-break: break-all;}
.meta-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 改为三列布局完美容纳 6 个框 */
.speed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px;}
.speed-gauge{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 14px;text-align:center;
}
.speed-gauge-value{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--accent-ink);}
.speed-gauge-value small{font-size:12px;color:var(--muted);margin-left:4px;font-family:var(--sans);}
.speed-gauge-label{color:var(--muted);font-size:12.5px;margin-top:4px;}
.progress-track{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:6px;}
.progress-fill{height:100%;width:0%;background:var(--accent);transition:width .15s linear;}

/* Claude verdict */
.verdict-card{
  display:flex;align-items:center;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:18px;
}
.verdict-badge{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:var(--warn-soft);color:var(--warn);
}
.verdict-badge.ok{background:var(--ok-soft);color:var(--ok);}
.verdict-badge.bad{background:var(--danger-soft);color:var(--danger);}
.verdict-headline{font-size:16px;font-weight:600;}
.verdict-sub{color:var(--muted);font-size:13px;margin-top:2px;}

/* Calendar */
.cal-selection-info {
  background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius);
  padding: 12px 16px; font-size: 15px; font-weight: 500; text-align: center; margin-bottom: 12px;
}
.cal-selection-info .diff-num { font-size: 20px; font-weight: 700; color: var(--accent); margin: 0 4px; }
.calendar-card { flex: 1; display: flex; flex-direction: column; min-height: 500px; }

.cal-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.cal-title{font-weight:600;font-size:18px;flex:1;text-align:center;}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;}
.cal-weekdays div{text-align:center;font-size:14px;color:var(--muted);font-weight:600;}
.cal-grid{flex: 1; display:grid; grid-template-rows:repeat(6,1fr); grid-template-columns:repeat(7,1fr); gap:6px;}

.cal-cell{
  position:relative; border-radius: 8px; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--panel); transition: transform 0.1s, border-color 0.1s, background 0.15s;
  cursor: pointer;
}
.cal-cell:hover{border-color:var(--accent); z-index:2;}
.cal-cell.outside{opacity:.4; background:var(--bg);}
.cal-cell.weekend{background:var(--bg);}
.cal-cell.today{border-color:var(--accent); border-width: 2px;}
.cal-cell.selected{border: 2px solid var(--accent); background: var(--accent-soft); opacity: 1;}

.cal-cell .solar{font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink);}
.cal-cell .lunar{font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.1;}
.cal-cell .lunar.is-holiday{color: var(--danger); font-weight: 600;}
.cal-cell .lunar.is-workday{color: var(--warn); font-weight: 600;}

/* Password */
.pw-output{display:flex;gap:8px;}
.pw-output-input{flex:1;font-size:16px;padding:12px 14px;}
.pw-strength{height:5px;border-radius:3px;background:var(--line);margin:10px 0 16px;overflow:hidden;}
.pw-strength i{display:block;height:100%;width:0%;background:var(--danger);transition:width .2s,background .2s;}
.pw-options{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin-bottom:6px;}
.pw-options .field-inline{grid-column:1/-1;}
.pw-options input[type=range]{flex:1;accent-color:var(--accent);}
.pw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.pw-list li{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:7px;padding:9px 12px;
}
.pw-list .pw-val{flex:1;font-family:var(--mono);font-size:13.5px;word-break:break-all;}
.pw-list .pw-meta{font-size:11px;color:var(--muted);white-space:nowrap;}

/* Codec panels */
.codec-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;}
.codec-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
.codec-col label{font-size:12px;color:var(--muted);font-weight:600;}
.codec-actions{display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:120px;}

/* 全局时钟 */
.global-footer {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100;
  background: var(--panel); border-top: 1px solid var(--line);
  padding: 8px 14px; text-align: center;
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  /* 移动端垂直流，修复 Topbar 错位 */
  #app { flex-direction: column; }
  
  .topbar{display:flex;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:30;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:0 0 0 1px var(--line);
  }
  .sidebar.open{transform:none;}
  .sidebar.open ~ .scrim, #app.nav-open .scrim{display:block;}
  .sidebar-footer{display:none;}
  .content{padding:22px 16px 80px;max-width:100%;}
  .speed-grid{grid-template-columns:repeat(2,1fr);}
  .codec-grid{grid-template-columns:1fr;}
  .codec-actions{flex-direction:row;flex-wrap:wrap;}
  .pw-options{grid-template-columns:1fr;}
  .calendar-card { min-height: 480px; }
  .cal-cell .solar{font-size: 20px;}
}

@media (max-width:420px){
  .speed-meta-grid { grid-template-columns: 1fr; }
  .speed-grid{grid-template-columns:1fr 1fr;}
  .ip-main-value{font-size: 20px;}
  .cal-cell .lunar{font-size: 11px;}
}