/* ═══════════════════════════════════════════════════════════
   Win‑Toolbox Design System — styles.css
   各页面通过设置 CSS 变量 --primary 来切换主题色
   ═══════════════════════════════════════════════════════════ */

/* ── 0. Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg,#F5F9FF);
  color:var(--text,#222);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 1. CSS Variables (default light theme, primary=#209cee) ── */
:root {
  --primary:   #209cee;   /* Sky blue — 所有页面的主题色 */
  --primary-d: #1a86d4;  /* Hover 状态 */
  --primary-a: #0d6fb8;  /* Active 状态 */
  --bg:        #F5F9FF;
  --bg-card:   #ffffff;
  --text:      #222;
  --text-muted:#666;
  --border:    #dde6f0;
  --shadow:    0 1px 5px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --radius:    12px;
  --radius-sm: 8px;
  --header-h:  auto;
}

/* ── 2. App Shell ── */
.wt-app{display:flex;flex-direction:column;min-height:100vh}

/* ── 3. Header ── */
.wt-header{
  background:var(--primary);
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.wt-header-title{
  color:#fff;
  font-size:1.25rem;
  font-weight:700;
  margin:0;
  letter-spacing:0.3px;
}
.wt-header-sub{color:rgba(255,255,255,0.8);font-size:0.78rem;margin:0}

/* ── 4. Navigation Bar ── */
.wt-nav{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:6px 16px;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  position:sticky;
  top:var(--header-h, 56px);
  z-index:49;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
}
.wt-nav a{
  padding:6px 12px;
  border-radius:6px;
  text-decoration:none;
  color:#444;
  font-size:0.88rem;
  transition:background 0.15s,color 0.15s;
  white-space:nowrap;
}
.wt-nav a:hover{background:#f0f0f0;text-decoration:none}
.wt-nav a.active,.wt-nav a[data-active]{
  background:var(--primary);
  color:#fff;
}

/* ── 5. Main Content ── */
.wt-main{
  flex:1;
  padding:24px 16px 70px;
  max-width:960px;
  margin:0 auto;
  width:100%;
}
.wt-title{
  color:var(--primary);
  font-size:1.4rem;
  font-weight:700;
  margin:0 0 4px;
  text-align:center;
}
.wt-hint{
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
  margin:0 0 20px;
}

/* ── 6. Cards & Grids ── */
.wt-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  margin-top:20px;
}
.wt-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.wt-card-head{
  padding:10px 16px;
  background:#fafbfc;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wt-card-title{
  font-size:0.95rem;
  font-weight:700;
  color:var(--primary);
  margin:0;
}
.wt-card-body{padding:14px 16px}

/* Full-width card (spans all columns) */
.wt-full{grid-column:1/-1}

/* ── 7. Ring / Donut Chart ── */
.wt-ring-wrap{position:relative;width:160px;height:160px;margin:0 auto 8px}
.wt-ring-canvas{width:160px;height:160px}
.wt-ring-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;line-height:1.2}
.wt-ring-pct{font-size:1.6rem;font-weight:700;color:var(--text);display:block}
.wt-ring-sub{font-size:0.72rem;color:var(--text-muted)}

/* ── 8. Info Table ── */
.wt-info-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin-top:8px}
.wt-info-table th{
  text-align:left;padding:5px 8px;
  color:#666;font-weight:600;
  border-bottom:1px solid var(--border);width:40%;
}
.wt-info-table td{
  padding:5px 8px;color:var(--text);
  border-bottom:1px solid var(--border);word-break:break-all;
}
.wt-info-table tr:last-child th,.wt-info-table tr:last-child td{border-bottom:none}

/* ── 9. Status Chips / Badges ── */
.wt-chip{
  display:inline-block;padding:2px 8px;
  border-radius:10px;font-size:0.72rem;font-weight:600;
  vertical-align:middle;
}
.wt-chip-ok  {background:#e8f5e9;color:#2e7d32}
.wt-chip-warn{background:#fff3e0;color:#e65100}
.wt-chip-info{background:#e3f2fd;color:#1565c0}
.wt-chip-err{background:#ffebee;color:#c62828}
.wt-chip-gray{background:#f5f5f5;color:#666}

/* ── 10. Buttons ── */
.wt-btn{
  padding:7px 14px;
  border:none;border-radius:6px;
  font-size:0.86rem;cursor:pointer;font-weight:600;
  transition:all .15s;display:inline-flex;align-items:center;gap:5px;
}
.wt-btn-primary{background:var(--primary);color:#fff}
.wt-btn-primary:hover{background:var(--primary-d)}
.wt-btn-primary:active{background:var(--primary-a)}

.wt-btn-green{background:#4caf50;color:#fff}
.wt-btn-green:hover{background:#388e3c}

.wt-btn-orange{background:#ff9800;color:#fff}
.wt-btn-orange:hover{background:#e68900}

.wt-btn-red{background:#f44336;color:#fff}
.wt-btn-red:hover{background:#d32f2f}

.wt-btn-gray{background:#e0e0e0;color:#444}
.wt-btn-gray:hover{background:#bdbdbd}

.wt-btn:disabled{opacity:0.5;cursor:not-allowed}

/* ── 11. Form Elements ── */
.wt-input,.wt-select{
  width:100%;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:0.88rem;
  background:#fff;
  color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.wt-input:focus,.wt-select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(32,156,238,0.15);
}
.wt-label{display:block;font-weight:600;font-size:0.82rem;color:#555;margin-bottom:4px}
.wt-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wt-help{font-size:0.77rem;color:#999;margin:0}

/* ── 12. Output / Terminal ── */
.wt-output{
  white-space:pre-wrap;word-break:break-all;
  background:#1a1a2e;color:#d4d4d4;
  border:1px solid #2d2d44;
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:0.82rem;min-height:60px;max-height:200px;
  overflow:auto;
  font-family:'Courier New',Consolas,monospace;
  margin-top:8px;line-height:1.6;
}
.wt-output.light{background:#f5f7fa;color:#333;border-color:#e2eaf0}

/* ── 13. Modal ── */
.wt-modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.45);
  z-index:1000;
  display:none;align-items:center;justify-content:center;padding:16px;
}
.wt-modal.open{display:flex}
.wt-modal-box{
  background:var(--bg-card);
  border-radius:var(--radius);
  max-width:560px;width:100%;
  max-height:80vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.wt-modal-hdr{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.wt-modal-title{margin:0;font-size:1rem;font-weight:700;color:var(--text)}
.wt-modal-close{
  background:none;border:none;
  font-size:1.4rem;cursor:pointer;color:#888;line-height:1;padding:0;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
}
.wt-modal-close:hover{background:#f0f0f0;color:#333}
.wt-modal-body{padding:12px 16px;overflow-y:auto;flex:1}
.wt-modal-body pre{
  white-space:pre-wrap;word-break:break-all;
  background:#f5f7fa;padding:10px;border-radius:6px;
  font-size:12.5px;margin:0;font-family:monospace;
}
.wt-modal-foot{
  padding:10px 16px;
  border-top:1px solid var(--border);
  text-align:right;
}

/* ── 14. Tag / Badge variants ── */
.wt-tag{
  display:inline-block;padding:2px 8px;border-radius:10px;
  font-size:0.72rem;font-weight:600;
  background:#e8f5e9;color:#2e7d32;
}
.wt-tag-w{background:#fff3e0;color:#e67e22}
.wt-tag-b{background:#e3f2fd;color:#1565c0}
.wt-tag-r{background:#ffebee;color:#c62828}

.wt-badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:0.75rem;font-weight:700}
.wt-ok{background:#e8f5e9;color:#2e7d32}
.wt-err{background:#ffebee;color:#c62828}

/* ── 15. Section Label ── */
.wt-section-label{font-weight:700;font-size:0.85rem;color:#555;margin:0 0 6px;display:block}

/* ── 16. Progress Bar ── */
.wt-progress{
  width:100%;height:8px;
  background:#e8e8e8;border-radius:4px;overflow:hidden;
}
.wt-progress-bar{
  height:100%;border-radius:4px;
  background:var(--primary);
  transition:width 0.3s;
}
.wt-progress-bar.warn{background:#ff9800}
.wt-progress-bar.err{background:#f44336}
.wt-progress-bar.ok{background:#4caf50}

/* ── 17. Step Indicator ── */
.wt-steps{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.wt-step{
  display:flex;align-items:center;gap:5px;
  font-size:0.8rem;color:#999;
}
.wt-step.ok{color:#2e7d32}
.wt-step.err{color:#c62828}
.wt-step-dot{
  width:8px;height:8px;border-radius:50%;
  background:#ddd;flex-shrink:0;
}
.wt-step.ok .wt-step-dot{background:#2e7d32}
.wt-step.err .wt-step-dot{background:#c62828}

/* ═══════════════════════════════════════════════════════════
   DARK THEME — dashboard.html 专用
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  --bg:#0d1b2a;
  --bg-card:rgba(14,24,42,0.85);
  --text:#e0f0ff;
  --text-muted:#7fa8d0;
  --border:#1e3a5f;
  --shadow:0 0 20px rgba(0,136,255,0.08);
  --shadow-md:0 4px 24px rgba(0,136,255,0.15);
}
:root[data-theme="dark"] .wt-header{background:#0d1b2a}
:root[data-theme="dark"] .wt-nav{background:#0d1b2a;border-color:#1e3a5f}
:root[data-theme="dark"] .wt-nav a{color:#7fa8d0}
:root[data-theme="dark"] .wt-nav a:hover{background:#1e3a5f}
:root[data-theme="dark"] .wt-nav a.active,
:root[data-theme="dark"] .wt-nav a[data-active]{background:var(--primary);color:#fff}
:root[data-theme="dark"] .wt-card{background:rgba(14,24,42,0.8);border-color:#1e3a5f}
:root[data-theme="dark"] .wt-card-head{background:#0d1b2a;border-color:#1e3a5f;color:#e0f0ff}
:root[data-theme="dark"] .wt-card-title{color:#70d4ff}
:root[data-theme="dark"] .wt-title{color:#44c7ff}
:root[data-theme="dark"] .wt-output{background:#0a1428;color:#a5d6ff;border-color:#1e3a5f}
:root[data-theme="dark"] .wt-output.light{background:#0d1b2a;color:#d4e8ff;border-color:#1e3a5f}
:root[data-theme="dark"] .wt-info-table th{border-color:#1e3a5f;color:#7fa8d0;background:#0d1b2a}
:root[data-theme="dark"] .wt-info-table td{border-color:#1e3a5f}
:root[data-theme="dark"] .wt-chip-info{background:rgba(32,156,238,0.2);color:#70d4ff}
:root[data-theme="dark"] .wt-input,
:root[data-theme="dark"] .wt-select{background:#0d1b2a;border-color:#1e3a5f;color:#e0f0ff}
:root[data-theme="dark"] .wt-modal-box{background:#0d1b2a;border:1px solid #1e3a5f}
:root[data-theme="dark"] .wt-modal-hdr{border-color:#1e3a5f}
:root[data-theme="dark"] .wt-modal-body pre{background:#0a1428;border-color:#1e3a5f;color:#a5d6ff}
:root[data-theme="dark"] .wt-modal-foot{border-color:#1e3a5f}

/* Dark-theme card variant for dashboard */
:root[data-theme="dark"] .wt-card-dk{
  background:rgba(14,24,42,0.75);
  border:1px solid #1e3a5f;
  border-radius:16px;
  padding:20px;
  box-shadow:0 0 20px rgba(0,136,255,0.1);
}
:root[data-theme="dark"] .wt-card-dk h2{color:#70d4ff}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:600px){
  .wt-main{padding:16px 12px 70px}
  .wt-ring-wrap{width:130px;height:130px}
  .wt-ring-canvas{width:130px;height:130px}
  .wt-ring-pct{font-size:1.3rem}
  .wt-card-grid{grid-template-columns:1fr 1fr;gap:10px}
  .wt-card-head{padding:8px 12px}
  .wt-card-body{padding:10px 12px}
  .wt-title{font-size:1.2rem}
  .wt-header-title{font-size:1.1rem}
}
@media(max-width:400px){
  .wt-card-grid{grid-template-columns:1fr}
  .wt-nav a{padding:5px 8px;font-size:0.8rem}
}