/* ============================================================
   ĐỀ TÀI 2 · L03 · N8 — SAR ADC
   LIGHT THEME · Full-bleed · Rich Animations
   ============================================================ */
:root{
  --bg:#f4f7fc;
  --bg2:#eaf1fb;
  --paper:#ffffff;
  --line:#e3e8f3;
  --line2:#dde3f0;
  --text:#0d1b34;
  --muted:#5d6c8a;
  --soft:#7a89a8;
  --accent:#0b62d6;
  --accent2:#3aa6ff;
  --accent-dark:#063e8c;
  --accent-soft:#e4efff;
  --good:#16a37b;
  --warn:#c98301;
  --bad:#d63b4b;
  --grad:linear-gradient(135deg,#3aa6ff 0%,#0b62d6 60%,#063e8c 100%);
  --grad-soft:linear-gradient(135deg,#e4efff 0%,#fff 100%);
  --shadow-sm:0 2px 8px rgba(11,98,214,.06);
  --shadow:0 16px 36px -16px rgba(11,98,214,.22), 0 4px 12px -4px rgba(11,98,214,.08);
  --shadow-lg:0 32px 70px -28px rgba(11,98,214,.4);
  --gw:1480px;  /* main grid max width */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 90% -10%, rgba(58,166,255,.20), transparent 60%),
    radial-gradient(900px 700px at -10% 5%, rgba(11,98,214,.12), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(58,166,255,.10), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}
::selection{background:#cfe2ff;color:#0b1f44}
.mono{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace}

/* ===== SPLASH SCREEN ===== */
.splash{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100vw !important; height:100vh !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:center;justify-content:center;
  background:radial-gradient(900px 700px at 50% 30%, #1a4fb5 0%, #082155 70%, #051539 100%);
  overflow:hidden;
  opacity:1;
  transition:opacity .6s ease, visibility .6s ease;
}
.splash.hide{opacity:0 !important;visibility:hidden !important;pointer-events:none}
.splash-bg{
  position:absolute;inset:-30%;
  background:
    radial-gradient(closest-side, rgba(58,166,255,.55), transparent 70%) 30% 30%/50% 50% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%) 70% 60%/45% 45% no-repeat;
  filter:blur(40px);
  animation:splashSpin 12s linear infinite;
}
@keyframes splashSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.splash-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
}
.splash-content{
  position:relative;text-align:center;color:#fff;
  animation:fadeUp .8s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.splash-logo{display:inline-block;filter:drop-shadow(0 16px 30px rgba(0,0,0,.3));animation:logoIn 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes logoIn{
  0%{transform:scale(.4) rotate(-90deg);opacity:0}
  60%{transform:scale(1.1) rotate(8deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.splash-tag{
  display:inline-block;margin-top:18px;padding:8px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;
  color:#bfd9ff;font-size:11px;letter-spacing:2px;background:rgba(255,255,255,.08);
  animation:fadeUp .8s .2s both;
}
.splash-title{
  margin:14px 0 6px;font-size:48px;font-weight:800;letter-spacing:-.8px;
  animation:fadeUp .8s .35s both;
}
.splash-title .grad{
  background:linear-gradient(135deg,#7ec0ff 0%, #fff 50%, #7ec0ff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shineX 3s linear infinite;
}
@keyframes shineX{0%{background-position:0 50%}100%{background-position:200% 50%}}
.splash-sub{color:#bfd9ff;font-size:14px;margin:0;animation:fadeUp .8s .5s both}
.splash-bar{
  width:280px;height:3px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;margin:24px auto 12px;
  animation:fadeUp .8s .65s both;
}
.splash-bar span{
  display:block;height:100%;width:30%;background:linear-gradient(90deg,#3aa6ff,#fff);border-radius:99px;
  animation:loaderMove 1.4s ease-in-out infinite;
}
@keyframes loaderMove{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(400%)}
}
.splash-loading{color:#9bbbe6;font-size:12px;letter-spacing:1.5px;animation:fadeUp .8s .8s both}

/* ===== Top scroll progress ===== */
.scroll-bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,#3aa6ff,#0b62d6,#3aa6ff);
  background-size:200% 100%;animation:shineX 4s linear infinite;
  box-shadow:0 0 12px rgba(58,166,255,.5);
  transition:width .12s linear;
}

/* ===== BG ORBS + Particles ===== */
.bg-orbs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-orbs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:orbFloat 16s ease-in-out infinite}
.bg-orbs span:nth-child(1){width:600px;height:600px;left:-160px;top:-150px;background:#a9c8ff}
.bg-orbs span:nth-child(2){width:420px;height:420px;right:-100px;top:80px;background:#cfe2ff;animation-duration:20s}
.bg-orbs span:nth-child(3){width:300px;height:300px;left:30%;top:120%;background:#bcdcff;animation-duration:24s}
.bg-orbs span:nth-child(4){width:380px;height:380px;right:20%;bottom:-200px;background:#d4e6ff;animation-duration:28s}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) translateX(0) scale(1)}
  33%{transform:translateY(-50px) translateX(30px) scale(1.06)}
  66%{transform:translateY(30px) translateX(-25px) scale(.97)}
}
.particles{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.6}

/* Cursor follower */
.cursor{
  position:fixed;top:0;left:0;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--accent2);background:rgba(58,166,255,.08);
  pointer-events:none;z-index:100;
  transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;
  mix-blend-mode:multiply;
}
.cursor.hover{width:50px;height:50px;background:rgba(58,166,255,.15);border-color:var(--accent)}
@media (hover:none){.cursor{display:none}}

/* ===== Top bar ===== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:14px 36px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  position:sticky;top:0;z-index:50;
  animation:slideDown .6s ease both;
}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand .logo svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brand:hover .logo svg{transform:rotate(-12deg) scale(1.08)}
.brand-text h1{margin:0;font-size:14.5px;font-weight:700;letter-spacing:.1px}
.brand-text p{margin:2px 0 0;color:var(--muted);font-size:12px}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:#bcd6ff}
.pill b{color:var(--text)}

/* ===== HERO ===== */
.hero{padding:80px 36px 50px;text-align:center;max-width:var(--gw);margin:0 auto;position:relative}
.hero-tag{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 18px;border:1px solid var(--line);border-radius:999px;
  color:var(--accent);font-size:12px;letter-spacing:1.5px;background:#fff;
  box-shadow:var(--shadow-sm);
  animation:popIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.hero-tag::before{
  content:"";width:8px;height:8px;border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 0 rgba(11,98,214,.45);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(11,98,214,.45)}
  70%{box-shadow:0 0 0 14px rgba(11,98,214,0)}
  100%{box-shadow:0 0 0 0 rgba(11,98,214,0)}
}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}

.hero-title{
  margin:22px auto 16px;font-size:62px;line-height:1.04;font-weight:900;letter-spacing:-1.2px;
  max-width:1100px;
  animation:rise .8s cubic-bezier(.2,.8,.2,1) .1s both;
}
.hero-title .grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 200%;animation:shine 6s ease-in-out infinite;
}
@keyframes shine{0%,100%{background-position:0 0}50%{background-position:100% 100%}}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.hero-sub{color:var(--muted);max-width:880px;margin:0 auto;font-size:17px;line-height:1.7;animation:rise .8s .25s both}

.hero-stats{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-stats .stat{
  padding:16px 28px;border:1px solid var(--line);border-radius:14px;background:#fff;min-width:220px;
  box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
  animation:rise .8s both;
  position:relative;overflow:hidden;
}
.hero-stats .stat:nth-child(1){animation-delay:.30s}
.hero-stats .stat:nth-child(2){animation-delay:.40s}
.hero-stats .stat:nth-child(3){animation-delay:.50s}
.hero-stats .stat::before{
  content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .3s;z-index:-1;
}
.hero-stats .stat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#bcd6ff}
.hero-stats .stat span{display:block;font-size:11px;letter-spacing:1.5px;color:var(--muted)}
.hero-stats .stat b{font-size:20px;display:block;margin-top:4px}

/* ===== Members ===== */
.members{max-width:var(--gw);margin:30px auto 10px;padding:0 36px}
.sec-head h3{margin:0;font-size:13px;letter-spacing:2px;color:var(--accent)}
.sec-head p{margin:4px 0 18px;color:var(--muted);font-size:13px}
.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.member{
  padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
  animation:rise .8s var(--d,0s) both;
  cursor:default;
}
.member:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:var(--shadow-lg);border-color:#bcd6ff}
.member::before{
  content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 100% 0%, rgba(58,166,255,.18), transparent 70%);
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.member:hover::before{opacity:1}
.member::after{
  content:"";position:absolute;left:-30%;top:-30%;width:60%;height:160%;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-100%) skewX(-20deg);transition:transform .9s;
  pointer-events:none;
}
.member:hover::after{transform:translateX(300%) skewX(-20deg)}
.avatar{
  width:54px;height:54px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:1px;color:#fff;
  box-shadow:0 10px 24px -10px rgba(11,98,214,.55);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.member:hover .avatar{transform:scale(1.08) rotate(-8deg)}
.role{margin:16px 0 6px;font-size:11px;letter-spacing:1.5px;color:var(--accent)}
.name{font-size:19px;font-weight:700}
.mssv{margin-top:4px;color:var(--muted);font-size:13px}

/* ===== Tabs ===== */
.tabs{
  max-width:var(--gw);margin:36px auto 18px;padding:8px;display:flex;gap:6px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.85);box-shadow:var(--shadow-sm);
  position:sticky;top:78px;z-index:40;backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.tab{
  flex:1;min-width:170px;padding:13px 14px;border:none;background:transparent;color:var(--muted);
  border-radius:11px;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.3px;
  display:flex;align-items:center;gap:10px;transition:all .25s;
  position:relative;overflow:hidden;
}
.tab span{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:var(--accent-soft);font-size:11px;color:var(--accent);transition:all .25s;
  font-weight:700;
}
.tab.active{background:var(--grad);color:#fff;box-shadow:0 14px 28px -12px rgba(11,98,214,.55)}
.tab.active span{background:rgba(255,255,255,.22);color:#fff}
.tab:not(.active):hover{color:var(--text);background:var(--accent-soft)}
.tab:not(.active):hover span{transform:scale(1.1)}

/* ===== Container & panes ===== */
.container{max-width:var(--gw);margin:0 auto 80px;padding:0 36px}
.tabpane{display:none}
.tabpane.active{display:block;animation:paneIn .4s ease both}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ===== KPIs ===== */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:14px}
.kpi{
  padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s;
  position:relative;overflow:hidden;
  animation:rise .7s both;
}
.kpi:nth-child(1){animation-delay:.05s}
.kpi:nth-child(2){animation-delay:.12s}
.kpi:nth-child(3){animation-delay:.19s}
.kpi:nth-child(4){animation-delay:.26s}
.kpi:nth-child(5){animation-delay:.33s}
.kpi:nth-child(6){animation-delay:.40s}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#bcd6ff}
.kpi::before{
  content:"";position:absolute;inset:auto -40% -40% auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(58,166,255,.18), transparent 70%);
  transform:scale(0);transition:transform .5s;
}
.kpi:hover::before{transform:scale(1)}
.kpi span{display:block;font-size:10.5px;letter-spacing:1.4px;color:var(--muted)}
.kpi b{font-size:28px;font-weight:800;display:block;margin-top:2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi i{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px;-webkit-text-fill-color:initial}

/* status */
.status-bar{
  display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid #c5ead7;border-radius:14px;
  background:#e9f8f1;color:#0e6e51;font-size:13px;margin-bottom:18px;
  animation:rise .6s both;
}
.status-bar .dot{width:8px;height:8px;border-radius:999px;background:var(--good);box-shadow:0 0 0 4px rgba(22,163,123,.18);animation:pulse 2s infinite}
.status-bar.warn{border-color:#f1d99a;background:#fff6e1;color:#7a4f02}
.status-bar.warn .dot{background:var(--warn);box-shadow:0 0 0 4px rgba(201,131,1,.18)}
.status-bar.bad{border-color:#f5c2ca;background:#ffeef0;color:#922334}
.status-bar.bad .dot{background:var(--bad);box-shadow:0 0 0 4px rgba(214,59,75,.18)}

/* ===== Layout ===== */
.layout{display:grid;grid-template-columns:360px 1fr;gap:18px}
@media (max-width:1180px){.layout{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(3,1fr)}.member-grid{grid-template-columns:repeat(2,1fr)}.hero-title{font-size:42px}}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}.member-grid{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.hero-title{font-size:34px}}

/* ===== Panel ===== */
.panel{
  border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px;height:fit-content;
  position:sticky;top:160px;box-shadow:var(--shadow-sm);
  animation:rise .7s both;
}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.panel-head h4{margin:0;font-size:12px;letter-spacing:2px;color:var(--accent)}
.ghost{
  background:#fff;border:1px solid var(--line);color:var(--muted);padding:7px 12px;border-radius:9px;cursor:pointer;font-size:12px;
  transition:all .2s;
}
.ghost:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.ghost:active{transform:scale(.97)}
.group{padding:14px 0;border-top:1px dashed var(--line)}
.group:first-of-type{border-top:none;padding-top:6px}
.g-title{font-size:10.5px;letter-spacing:1.6px;color:var(--muted);margin-bottom:10px}
.panel label{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}
.panel label b{color:var(--text);font-weight:600;margin-left:4px}
.panel label span{color:var(--text);font-weight:600;float:right}
.panel select,.panel input[type=range]{width:100%;margin-top:6px}
.panel select{
  padding:10px;border-radius:10px;background:#fff;color:var(--text);border:1px solid var(--line);font-size:13px;
  transition:border-color .2s,box-shadow .2s;
}
.panel select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,98,214,.12)}
.formula{
  padding:10px;border:1px dashed #cbe0ff;border-radius:10px;background:linear-gradient(135deg,#eaf3ff,#f5faff);color:#063e8c;
  font-family:'JetBrains Mono',monospace;font-size:12px;margin:6px 0 12px;
}
.ck{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;cursor:pointer}
.ck input{accent-color:var(--accent);width:auto}
.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.presets button{
  padding:10px;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:10px;cursor:pointer;font-size:12px;
  transition:all .25s;
}
.presets button:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.presets button:active{transform:scale(.97)}

/* range — animated */
input[type=range]{
  -webkit-appearance:none;height:6px;border-radius:999px;outline:none;
  background:linear-gradient(90deg,var(--accent) var(--p,50%),#dde6f5 var(--p,50%));
  transition:filter .2s;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);
  cursor:pointer;box-shadow:0 4px 12px -4px rgba(11,98,214,.5);
  transition:transform .2s,box-shadow .2s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-webkit-slider-thumb:active{transform:scale(.94);box-shadow:0 0 0 6px rgba(11,98,214,.18)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer}

/* ===== Workspace cards ===== */
.workspace{display:flex;flex-direction:column;gap:16px}
.card{
  border:1px solid var(--line);border-radius:20px;background:#fff;padding:20px;
  box-shadow:var(--shadow-sm);transition:transform .35s,box-shadow .35s,border-color .35s;
  animation:rise .7s both;
}
.card:hover{box-shadow:var(--shadow);border-color:#cfe0ff}
.card.tilt{transition:transform .25s ease-out, box-shadow .35s, border-color .35s}
.card h5{margin:0 0 12px;font-size:12px;letter-spacing:1.6px;color:var(--accent)}
.card-head{display:flex;justify-content:space-between;align-items:center}
.badge{padding:4px 12px;border-radius:999px;font-size:11px;letter-spacing:1.2px;font-weight:600}
.badge.ok{background:#e6f7f0;color:#0e6e51;border:1px solid #c5ead7}
.badge.bad{background:#ffeef0;color:#922334;border:1px solid #f5c2ca}
.hint{margin:8px 0 0;color:var(--muted);font-size:12.5px}

/* block diagram */
.block-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin-top:10px}
.bk{
  flex:1;min-width:130px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-size:13px;font-weight:600;text-align:center;
  transition:transform .3s,box-shadow .3s,border-color .3s,background .3s;
  position:relative;
}
.bk small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:4px}
.bk:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#bcd6ff;background:var(--accent-soft)}
.bk.hl{
  border-color:transparent;background:var(--grad);color:#fff;
  box-shadow:0 14px 30px -10px rgba(11,98,214,.6);
  position:relative;
}
.bk.hl small{color:#dce8ff}
.bk.hl::after{
  content:"";position:absolute;inset:-2px;border-radius:14px;
  background:linear-gradient(135deg,#3aa6ff,#0b62d6,#3aa6ff);
  background-size:200% 200%;
  animation:bdShift 3s linear infinite;
  z-index:-1;filter:blur(10px);opacity:.6;
}
@keyframes bdShift{0%{background-position:0 0}100%{background-position:200% 0}}
.arrow{align-self:center;color:var(--accent);font-size:18px;animation:arrow 1.4s ease-in-out infinite;font-weight:bold}
@keyframes arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* tables */
.dtable{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.dtable th,.dtable td{padding:10px;border-bottom:1px dashed var(--line);text-align:left}
.dtable th{color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:1px;background:#f9fbff}
.dtable tbody tr{transition:background .15s}
.dtable tbody tr:hover{background:#eff5ff}
.dtable td.mono{font-family:'JetBrains Mono',monospace;font-size:12.5px}

.sar-table-wrap, .dtable-wrap{max-height:380px;overflow:auto;margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.sar-table-wrap::-webkit-scrollbar, .dtable-wrap::-webkit-scrollbar{width:10px;height:10px}
.sar-table-wrap::-webkit-scrollbar-thumb, .dtable-wrap::-webkit-scrollbar-thumb{background:#cfd8ee;border-radius:999px}
.sar-table-wrap::-webkit-scrollbar-thumb:hover, .dtable-wrap::-webkit-scrollbar-thumb:hover{background:#a8b8d8}

.sar-table{width:100%;border-collapse:collapse;font-size:12.5px}
.sar-table th{position:sticky;top:0;background:#f3f7ff;z-index:2;padding:10px;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:1px;border-bottom:1px solid var(--line)}
.sar-table td{padding:8px 10px;border-bottom:1px dashed var(--line)}
.sar-table tr{animation:row .35s ease both}
@keyframes row{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sar-table .keep{color:var(--good);font-weight:700}
.sar-table .drop{color:var(--bad)}

.err-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.err-stats div{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.err-stats div:hover{transform:translateY(-3px);border-color:#bcd6ff;box-shadow:var(--shadow-sm)}
.err-stats span{display:block;font-size:10.5px;letter-spacing:1.2px;color:var(--muted)}
.err-stats b{font-size:17px;display:block;margin-top:2px;color:var(--accent);font-weight:700}

/* compare */
.cmp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:10px}
.cmp{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:transform .3s,box-shadow .3s,border-color .3s;animation:rise .7s var(--d,0s) both;position:relative;overflow:hidden}
.cmp:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#bcd6ff}
.cmp::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s}
.cmp:hover::before{transform:scaleY(1)}
.cmp h6{margin:0 0 10px;font-size:15px;color:var(--accent);font-weight:700}
.cmp ul{margin:0;padding-left:18px;font-size:13px;color:var(--text)}
.cmp ul li{margin:6px 0;color:#33445f}

/* ===== THEORY ===== */
.theory-grid{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:flex-start}
@media (max-width:1180px){.theory-grid{grid-template-columns:1fr}.toc{position:relative!important;top:auto!important}}

/* TOC redesigned */
.toc{
  position:sticky;top:170px;
  border:1px solid var(--line);border-radius:22px;background:#fff;padding:18px;box-shadow:var(--shadow-sm);
  animation:rise .7s both;overflow:hidden;
}
.toc::before{
  content:"";position:absolute;inset:-1px;background:var(--grad);opacity:0;transition:opacity .4s;
  border-radius:inherit;z-index:-1;filter:blur(20px);
}
.toc:hover::before{opacity:.15}
.toc-head{
  display:flex;align-items:center;gap:12px;padding:8px 4px 14px;border-bottom:1px solid var(--line);margin-bottom:10px;
}
.toc-icon{
  width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:20px;font-weight:700;
  box-shadow:0 10px 20px -10px rgba(11,98,214,.55);
}
.toc-label{font-size:12px;letter-spacing:2px;color:var(--accent);font-weight:700}
.toc-sub{font-size:11px;color:var(--muted);margin-top:2px}
.toc-progress{height:3px;background:#eef2fa;border-radius:99px;margin:0 4px 14px;overflow:hidden}
.toc-progress span{display:block;height:100%;width:0;background:var(--grad);border-radius:99px;transition:width .3s}
.toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.toc-list a{
  display:grid;grid-template-columns:36px 1fr;gap:10px;padding:10px;border-radius:12px;
  text-decoration:none;color:var(--text);font-size:13px;line-height:1.3;
  transition:all .25s;position:relative;
}
.toc-list a i{
  font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;
  background:var(--accent-soft);color:var(--accent);border-radius:8px;
  display:grid;place-items:center;font-weight:700;height:30px;width:30px;
  transition:all .25s;align-self:start;margin-top:2px;
}
.toc-list a b{font-weight:600;display:block;color:var(--text);font-size:13px;line-height:1.3}
.toc-list a em{font-style:normal;display:block;color:var(--muted);font-size:11px;margin-top:3px;letter-spacing:.2px}
.toc-list a:hover{background:#f3f8ff;transform:translateX(4px)}
.toc-list a:hover i{background:var(--grad);color:#fff;transform:scale(1.05)}
.toc-list a.active{background:var(--grad);color:#fff;box-shadow:0 12px 24px -10px rgba(11,98,214,.55)}
.toc-list a.active i{background:rgba(255,255,255,.2);color:#fff}
.toc-list a.active b{color:#fff}
.toc-list a.active em{color:#cfe0ff}

.theory-body{display:flex;flex-direction:column;gap:16px}
.theory-card{position:relative;padding:28px 30px;scroll-margin-top:170px;overflow:hidden}
.theory-card::before{
  content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform .5s;
}
.theory-card:hover::before{transform:scaleY(1)}
.theory-card .th-num{
  position:absolute;top:18px;right:24px;font-family:'JetBrains Mono',monospace;font-size:64px;font-weight:800;
  color:transparent;-webkit-text-stroke:1.5px #cfe0ff;line-height:1;user-select:none;pointer-events:none;
  transition:-webkit-text-stroke-color .5s,transform .5s;
}
.theory-card:hover .th-num{-webkit-text-stroke-color:#7fb6ff;transform:scale(1.05) rotate(-3deg)}
.theory-card h5{font-size:14px;letter-spacing:1.6px;margin:0 0 16px;padding-right:90px}

.prose p{color:#33445f;line-height:1.78;font-size:14.5px;margin:8px 0}
.prose p b{color:var(--text)}
.prose p i{color:var(--accent)}

.prose .stepped{counter-reset:stp;list-style:none;padding:0;margin:12px 0}
.prose .stepped li{
  counter-increment:stp;position:relative;padding:14px 16px 14px 56px;border:1px solid var(--line);border-radius:14px;
  margin-bottom:10px;background:#fbfdff;color:#33445f;font-size:14px;line-height:1.6;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.prose .stepped li:hover{transform:translateX(6px);border-color:#bcd6ff;box-shadow:var(--shadow-sm)}
.prose .stepped li::before{
  content:counter(stp);position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px;
  box-shadow:0 8px 16px -6px rgba(11,98,214,.55);
}

.prose .bullet{padding-left:0;margin:12px 0;color:#33445f;font-size:14.5px;line-height:1.8;list-style:none}
.prose .bullet li{margin:8px 0;padding-left:28px;position:relative}
.prose .bullet li::before{
  content:"▸";position:absolute;left:8px;top:0;color:var(--accent);font-weight:700;
  transition:transform .2s;
}
.prose .bullet li:hover::before{transform:translateX(4px)}

.prose .ref{padding-left:24px;margin:12px 0;color:#33445f;font-size:13.5px;line-height:1.75}
.prose .ref li{margin:10px 0}

.prose .code{
  background:#0d1c39;color:#cfe2ff;border:1px solid #0d1c39;border-radius:14px;padding:20px 22px;
  font-family:'JetBrains Mono',monospace;font-size:13px;overflow:auto;line-height:1.8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px -16px rgba(13,28,57,.5);
}
.prose .code .kw{color:#7ec0ff;font-weight:600}
.prose .code .cm{color:#7a8db0;font-style:italic}

.prose .figure-caption{
  margin:12px 0 0;font-size:13px;color:var(--muted);font-style:italic;
  padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0;
}

/* KaTeX styling */
.katex-display{
  margin:16px 0!important;padding:16px 20px;border-radius:14px;
  background:linear-gradient(135deg,#f3f8ff,#fff);border:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:border-color .3s,transform .3s;
}
.katex-display:hover{border-color:#bcd6ff;transform:translateY(-2px)}
.katex-display > .katex{font-size:1.2em!important;color:#0d1b34}
.katex{font-size:1em!important;color:#0d1b34}
.katex .boxed{
  border:none!important;box-shadow:0 0 0 1.5px var(--accent) inset;
  border-radius:8px;padding:6px 10px;background:#eaf3ff;
}
.katex-display::-webkit-scrollbar{height:6px}
.katex-display::-webkit-scrollbar-thumb{background:#cfd8ee;border-radius:99px}

/* report */
.report-list{padding:0;list-style:none;margin:8px 0 16px}
.report-list li{
  padding:14px 16px;border:1px dashed var(--line);border-radius:12px;margin-bottom:8px;color:#33445f;font-size:13.5px;
  background:#fff;transition:transform .25s,border-color .25s,box-shadow .25s;
}
.report-list li:hover{transform:translateX(6px);border-color:#bcd6ff;box-shadow:var(--shadow-sm)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.primary{
  padding:13px 20px;background:var(--grad);color:#fff;border:none;border-radius:12px;cursor:pointer;font-weight:600;font-size:13px;
  box-shadow:0 14px 28px -12px rgba(11,98,214,.55);
  transition:transform .25s,filter .25s,box-shadow .25s;
}
.primary:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 20px 36px -12px rgba(11,98,214,.6)}
.primary:active{transform:scale(.97)}
.filterbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:8px}
.filterbar select{padding:8px;border-radius:8px;background:#fff;color:var(--text);border:1px solid var(--line)}

/* footer */
.footer{padding:32px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--line);background:#fff;line-height:1.7}
.footer b{color:var(--text)}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

/* number animated change pulse */
@keyframes flash{0%{background:#dcecff}100%{background:transparent}}
.kpi.changed b{animation:flash 1s ease}

/* print */
@media print{
  .topbar,.tabs,.panel,.hero-stats,.presets,.row,.bg-orbs,.particles,.cursor,.splash,.scroll-bar{display:none!important}
  .tabpane{display:block!important;page-break-inside:avoid}
  body{background:white;color:black}
  .card,.member,.kpi,.toc{background:white;border-color:#ccc;box-shadow:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}