:root{
  --primary:#0f766e; --primary-hover:#115e59; --primary-soft:#e6f2f0;
  --bg:#f4f7f5; --surface:#ffffff; --border:#e2e8e2;
  --text:#1f2d2a; --text-sub:#5f6f6a; --text-faint:#8a9a95;
  --success:#16a34a; --warning:#d97706; --danger:#dc2626;
  --font-display:"Noto Serif SC","Songti SC",Georgia,serif;
  --font-body:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Noto Sans CJK SC",monospace;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(31,45,42,.06);
  --shadow-md:0 8px 24px rgba(31,45,42,.08);
  --sidebar-w:232px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);color:var(--text);background:var(--bg);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- App Shell ---------- */
.app-nav{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:22px 16px;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--primary);
  display:grid;place-items:center;color:#fff;flex:none}
.brand-name{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:11px;color:var(--text-faint);margin-top:1px}
.nav-label{font-size:11px;letter-spacing:.12em;color:var(--text-faint);text-transform:uppercase;padding:14px 10px 6px}
.nav-link{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--text-sub);font-size:13.5px;margin-bottom:2px;transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-link svg{width:17px;height:17px;flex:none;opacity:.85}
.nav-link:hover{background:var(--bg);color:var(--text)}
.nav-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.nav-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-faint)}
.nav-foot b{color:var(--text-sub);font-weight:600}

.app-content{margin-left:var(--sidebar-w);padding:34px 40px 64px;max-width:1200px}

/* ---------- Page intro ---------- */
.page-eyebrow{font-size:12px;letter-spacing:.14em;color:var(--primary);font-weight:700;text-transform:uppercase}
.page-title{font-family:var(--font-display);font-size:30px;font-weight:700;margin:6px 0 8px;letter-spacing:-.01em}
.page-desc{color:var(--text-sub);max-width:720px;font-size:14.5px}
.page-head{margin-bottom:26px}

/* ---------- Cards & grid ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:20px}
.card-title{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:4px}
.card-sub{font-size:12.5px;color:var(--text-sub);margin-bottom:4px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Stat ---------- */
.stat{display:flex;flex-direction:column}
.stat .k{font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1.1}
.stat .v{font-size:12.5px;color:var(--text-sub);margin-top:2px}
.stat .tag{font-size:11px;color:var(--primary);font-weight:600;margin-top:6px}

/* ---------- Bars / meters ---------- */
.meter{height:8px;background:var(--bg);border-radius:99px;overflow:hidden;width:100%}
.meter b{display:block;height:100%;border-radius:99px;background:var(--primary);transition:width .6s var(--ease)}

/* ---------- Tag / chip ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:99px;border:1px solid var(--border);color:var(--text-sub);background:var(--surface)}
.chip.is-high{color:var(--success);border-color:#bbe7c9;background:#f0fbf4}
.chip.is-mid{color:var(--warning);border-color:#f3ddb0;background:#fdf6e4}
.chip.is-low{color:var(--danger);border-color:#f3c0c0;background:#fdf0f0}
.chip.is-teal{color:var(--primary);border-color:#bfe0dc;background:var(--primary-soft)}

/* ---------- Table ---------- */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-size:11.5px;letter-spacing:.05em;color:var(--text-faint);
  font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}
.table td{padding:11px 10px;border-bottom:1px solid var(--border);color:var(--text)}
.table tr:last-child td{border-bottom:none}
.table .cell-sub{font-size:11.5px;color:var(--text-faint)}

/* ---------- Loop diagram ---------- */
.loop{display:flex;flex-direction:column;gap:0}
.loop-stage{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;position:relative}
.loop-stage:not(:last-child)::after{content:"";position:absolute;left:31px;top:52px;bottom:-14px;width:2px;background:var(--border)}
.loop-node{width:64px;height:64px;border-radius:50%;background:var(--surface);border:2px solid var(--primary);
  display:grid;place-items:center;color:var(--primary);font-family:var(--font-display);font-weight:700;font-size:13px;
  box-shadow:var(--shadow-sm);position:relative;z-index:1;text-align:center;line-height:1.1}
.loop-node small{display:block;font-size:9px;font-weight:600;color:var(--text-faint);letter-spacing:.05em}
.loop-body{padding-top:6px}
.loop-body h4{font-size:15px;font-weight:700}
.loop-body p{font-size:12.5px;color:var(--text-sub);margin-top:2px}

/* ---------- Metacognition cards ---------- */
.meta-card{border-left:3px solid var(--primary);background:var(--surface);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);padding:18px 20px;border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.meta-stage{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--primary);text-transform:uppercase}
.meta-prompt{font-size:15px;font-weight:600;margin-top:8px;line-height:1.5}
.meta-note{font-size:12.5px;color:var(--text-sub);margin-top:8px}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(10px);animation:rise .5s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .app-nav{position:static;width:100%;border-right:none;border-bottom:1px solid var(--border);padding:14px 16px}
  .app-nav .nav-list{display:flex;overflow-x:auto;gap:4px}
  .nav-link{flex:none;margin-bottom:0}
  .nav-foot,.nav-label{display:none}
  .app-content{margin-left:0;padding:24px 18px 56px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
}