/* ========================================================
   Evan_AI PM · Shared project-page stylesheet
   Usage: <link rel="stylesheet" href="../../assets/project.css">
   (from pages/works/) or href="../assets/project.css"
   (from pages/)
   ======================================================== */

:root{
  --bg:#0A0E1A;--bg-soft:#0F1421;--bg-elev:rgba(255,255,255,.02);
  --line:rgba(255,255,255,.06);--line-strong:rgba(255,255,255,.12);
  --text:#FAFAFA;--text-dim:#A0AABF;--text-mute:#6B7280;
  --accent:#3B82F6;--accent-2:#8B5CF6;--accent-3:#06B6D4;
  --ok:#10B981;--warn:#F59E0B;--err:#EF4444;
  --radius:14px;--ease:cubic-bezier(.16,1,.3,1);
  --nav-bg:rgba(10,14,26,.6);--dot-color:rgba(255,255,255,.05);
  --btn-bg:#fff;--btn-text:#0A0E1A;
}
[data-theme="light"]{
  --bg:#F7F8FA;--bg-soft:#FFFFFF;--bg-elev:rgba(0,0,0,.02);
  --line:rgba(0,0,0,.07);--line-strong:rgba(0,0,0,.14);
  --text:#0A0E1A;--text-dim:#4B5563;--text-mute:#9CA3AF;
  --accent:#2563EB;--accent-2:#7C3AED;--accent-3:#0891B2;
  --ok:#059669;--warn:#D97706;--err:#DC2626;
  --nav-bg:rgba(255,255,255,.7);--dot-color:rgba(0,0,0,.05);
  --btn-bg:#0A0E1A;--btn-text:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:rgba(59,130,246,.3)}
html{scroll-behavior:smooth}
html,body{
  background:var(--bg);color:var(--text);
  font-family:'Inter','PingFang SC',sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease),color .5s var(--ease);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--dot-color) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse at 50% 0%,black 30%,transparent 70%);
  z-index:0;
}
a{color:inherit;text-decoration:none}
main{position:relative;z-index:1}

/* ---- NAV ---- */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 40px;backdrop-filter:blur(14px);
  background:var(--nav-bg);border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px}
.brand .mark{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
  box-shadow:0 4px 16px rgba(59,130,246,.35);
}
.brand .us{color:var(--accent-2)}
.brand .role{color:var(--text-mute);font-weight:500;font-size:12px;font-family:'JetBrains Mono',monospace;margin-left:4px}
.back{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text-dim);display:inline-flex;align-items:center;gap:6px;transition:color .3s var(--ease)}
.back:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:14px}
.theme-toggle{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line-strong);
  background:transparent;cursor:pointer;display:grid;place-items:center;
  color:var(--text-dim);transition:all .3s var(--ease);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--text)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .sun{display:none}
[data-theme="light"] .theme-toggle .sun{display:block}
[data-theme="light"] .theme-toggle .moon{display:none}

/* ---- HEADER ---- */
.header{max-width:980px;margin:0 auto;padding:140px 40px 50px}
.meta-row{
  display:flex;gap:14px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--text-mute);margin-bottom:24px;
  text-transform:uppercase;letter-spacing:.08em;
}
.meta-row .live{color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.meta-row .live::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
h1.title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(36px,5vw,56px);line-height:1.1;
  letter-spacing:-.02em;font-weight:700;margin-bottom:20px;
}
h1.title .grad{
  background:linear-gradient(135deg,#fff,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="light"] h1.title .grad{
  background:linear-gradient(135deg,#0A0E1A,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.summary{font-size:18px;line-height:1.7;color:var(--text-dim);max-width:760px;margin-bottom:36px}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}
.tag{
  font-size:11px;padding:4px 10px;border-radius:100px;font-family:'JetBrains Mono',monospace;
  background:rgba(59,130,246,.08);color:var(--accent);border:1px solid rgba(59,130,246,.22);
}
.tag.v{background:rgba(139,92,246,.08);color:var(--accent-2);border-color:rgba(139,92,246,.22)}
.tag.g{background:rgba(16,185,129,.08);color:var(--ok);border-color:rgba(16,185,129,.22)}
.tag.c{background:rgba(6,182,212,.08);color:var(--accent-3);border-color:rgba(6,182,212,.22)}

/* ---- KPI BAR ---- */
.kpi-bar{max-width:980px;margin:0 auto 80px;padding:0 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  background:var(--bg-elev);transition:all .3s var(--ease);
}
.kpi:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.kpi-num{
  font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:600;
  letter-spacing:-.02em;line-height:1;
  background:linear-gradient(135deg,var(--accent-3),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kpi-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;margin-top:10px}
.kpi-delta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ok);margin-top:6px}
.kpi-delta.down{color:var(--err)}

/* ---- CONTENT ---- */
.content{max-width:780px;margin:0 auto;padding:0 40px 60px}
.anchor-row{
  position:sticky;top:68px;z-index:10;
  display:flex;gap:24px;padding:14px 0;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  background:linear-gradient(to bottom,var(--bg) 70%,transparent);
  margin-bottom:60px;font-family:'JetBrains Mono',monospace;font-size:12px;
  overflow-x:auto;scrollbar-width:none;
}
.anchor-row::-webkit-scrollbar{display:none}
.anchor-row a{color:var(--text-mute);transition:color .3s var(--ease);white-space:nowrap}
.anchor-row a:hover,.anchor-row a.active{color:var(--accent)}
.chapter{margin-bottom:80px;scroll-margin-top:140px}
.chapter-label{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:10px;
}
.chapter-label::before{content:"";width:24px;height:1px;background:var(--accent)}
h2{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:600;letter-spacing:-.01em;margin-bottom:24px;line-height:1.2}
h3{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;margin:32px 0 14px}
p{font-size:16px;line-height:1.8;color:var(--text-dim);margin-bottom:18px}
p strong{color:var(--text);font-weight:600}
ul,ol{margin:0 0 22px 24px;color:var(--text-dim)}
li{font-size:16px;line-height:1.8;margin-bottom:6px}
li::marker{color:var(--accent-2)}
blockquote{border-left:2px solid var(--accent);padding:6px 0 6px 20px;margin:24px 0;color:var(--text-dim);font-style:italic;font-size:16px}

/* ---- CALLOUT ---- */
.callout{border:1px solid var(--line-strong);border-radius:12px;padding:22px 24px;margin:28px 0;background:var(--bg-elev);display:flex;gap:16px}
.callout .icon{font-size:20px;flex-shrink:0;line-height:1.4}
.callout .body{font-size:15px;line-height:1.7;color:var(--text-dim)}
.callout .body strong{color:var(--text)}

/* ---- PRD CARD ---- */
.prd-card{border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;background:var(--bg-elev);margin:32px 0;font-family:'JetBrains Mono',monospace}
.prd-head{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-mute)}
.prd-head .pill{padding:3px 10px;border-radius:100px;background:rgba(139,92,246,.12);color:var(--accent-2);font-size:11px}
.prd-head .pill.g{background:rgba(16,185,129,.12);color:var(--ok)}
.prd-body{padding:24px;font-size:13px;line-height:2;color:var(--text-dim)}
.prd-body .k{color:var(--accent-3)}
.prd-body .row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:8px 0;border-bottom:1px dashed var(--line)}
.prd-body .row:last-child{border:none}

/* ---- FLOW ---- */
.flow{border:1px solid var(--line);border-radius:12px;padding:28px;background:var(--bg-elev);margin:28px 0}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.flow-step{
  border:1px solid var(--line-strong);border-radius:10px;padding:16px;
  background:var(--bg-soft);position:relative;display:flex;flex-direction:column;gap:6px;
}
.flow-step::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:var(--text-mute);font-size:14px;z-index:2}
.flow-step:last-child::after{display:none}
.flow-step .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.flow-step .t{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--text)}
.flow-step .d{font-size:11px;color:var(--text-mute);line-height:1.5;font-family:'JetBrains Mono',monospace}

/* ---- DATA TABLE ---- */
.data-table{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:28px 0;font-family:'JetBrains Mono',monospace;font-size:13px}
.data-table table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:14px 18px;background:var(--bg-elev);border-bottom:1px solid var(--line);font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.data-table td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--text-dim)}
.data-table tr:last-child td{border:none}
.data-table .up{color:var(--ok)}
.data-table .dn{color:var(--err)}

/* ---- MOCK SCREEN ---- */
.mock-screen{border:1px solid var(--line-strong);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,0));backdrop-filter:blur(8px);overflow:hidden;margin:28px 0;position:relative}
.mock-screen::before{content:"";position:absolute;inset:-1px;border-radius:14px;padding:1px;background:linear-gradient(135deg,rgba(59,130,246,.4),transparent 40%,rgba(139,92,246,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.mock-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-mute)}
.mock-head .dots{display:flex;gap:5px;margin-right:6px}
.mock-head .dots span{width:8px;height:8px;border-radius:50%}
.mock-head .dots span:nth-child(1){background:#ff5f57}
.mock-head .dots span:nth-child(2){background:#febc2e}
.mock-head .dots span:nth-child(3){background:#28c840}

/* ---- REFLECT ---- */
.reflect-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.reflect{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--bg-elev)}
.reflect .rl{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.reflect.good .rl{color:var(--ok)}
.reflect.bad .rl{color:var(--warn)}
.reflect h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin-bottom:10px}
.reflect p{font-size:14px;color:var(--text-dim);margin-bottom:0;line-height:1.7}

/* ---- NEXT CTA ---- */
.next-cta{max-width:780px;margin:60px auto;padding:0 40px}
.next-card{border:1px solid var(--line-strong);border-radius:18px;padding:40px;background:radial-gradient(circle at 30% 0%,rgba(59,130,246,.08),transparent 50%);text-align:center}
.next-card h3{font-family:'Space Grotesk',sans-serif;font-size:24px;margin-bottom:10px}
.next-card p{color:var(--text-dim);margin-bottom:24px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .35s var(--ease)}
.btn-p{background:var(--btn-bg);color:var(--btn-text)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn-g{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.btn-g:hover{border-color:var(--line-strong);background:rgba(127,127,127,.06)}

footer{padding:40px;border-top:1px solid var(--line);text-align:center;color:var(--text-mute);font-size:12px;font-family:'JetBrains Mono',monospace}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .kpi-bar{grid-template-columns:repeat(2,1fr);padding:0 24px}
  .flow-grid{grid-template-columns:1fr}
  .flow-step::after{content:"↓";right:auto;left:50%;top:auto;bottom:-18px;transform:translateX(-50%)}
  .reflect-grid{grid-template-columns:1fr}
  .header,.content,.next-cta{padding-left:24px;padding-right:24px}
  nav.top{padding:14px 20px}
  .prd-body .row{grid-template-columns:1fr;gap:4px}
}