:root{
  --paper:#f6f1e6;
  --paper-2:#efe8d8;
  --ink:#16261f;
  --ink-soft:#3d4f46;
  --forest:#1e4436;
  --sage:#6f8d72;
  --amber:#b4771c;
  --amber-soft:#f0e0c2;
  --clay:#a04a2e;
  --line:rgba(22,38,31,.14);
  --line-strong:rgba(22,38,31,.28);
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  background:
    radial-gradient(1100px 520px at 12% -8%, #fffdf7 0%, rgba(255,253,247,0) 62%),
    radial-gradient(900px 460px at 92% 4%, #eee4cf 0%, rgba(238,228,207,0) 58%),
    linear-gradient(180deg,#f8f4ea 0%, var(--paper) 42%, #f2ecdd 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.22'/></svg>");
  mix-blend-mode:multiply;
}

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--max); margin:0 auto; padding:18px 28px 14px;
  background:linear-gradient(180deg,rgba(246,241,230,.96),rgba(246,241,230,.86) 70%,rgba(246,241,230,0));
  backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--forest); text-decoration:none}
.brand svg{width:26px; height:26px}
.brand-text{font-family:var(--serif); font-weight:700; letter-spacing:.02em; font-size:16px}
.brand-text em{font-style:normal; font-weight:500; color:var(--ink-soft); margin-left:6px; font-size:12px; letter-spacing:.12em}
.masthead-meta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:.04em}
.dot{width:7px; height:7px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 3px rgba(111,141,114,.16)}
.ghost-link{color:var(--forest); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:1px}
.ghost-link:hover{border-color:var(--forest)}

/* ---------- hero ---------- */
main{position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:22px 28px 80px}
.hero{padding:34px 0 26px; border-bottom:1px solid var(--line)}
.eyebrow{margin:0 0 14px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--amber)}
.hero h1{
  margin:0; font-family:var(--serif); font-weight:900; line-height:1.05;
  font-size:clamp(40px,7.4vw,84px); letter-spacing:-.01em;
}
.lede{max-width:640px; margin:18px 0 0; color:var(--ink-soft); font-size:15.5px; line-height:1.85}

.kpis{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0;
  margin:34px 0 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line);
}
.kpi{padding:16px 14px 14px; border-right:1px solid var(--line); animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.kpi:last-child{border-right:none}
.kpi dt{font-size:11.5px; letter-spacing:.08em; color:var(--ink-soft)}
.kpi dd{margin:6px 0 0; font-family:var(--mono); font-weight:600; font-size:clamp(22px,2.6vw,30px); line-height:1}
.kpi.done dd{color:var(--forest)}
.kpi.skip dd{color:var(--clay)}
.kpi.muted dd{color:var(--sage)}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:26px; padding:22px 0 0; border-bottom:1px solid var(--line); overflow-x:auto}
.tab{
  appearance:none; background:none; border:0; padding:0 0 12px; cursor:pointer;
  font-family:var(--serif); font-size:15px; font-weight:700; color:var(--ink-soft);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s,border-color .2s;
}
.tab span{font-family:var(--mono); font-weight:400; font-size:11px; color:var(--sage); margin-left:4px}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink); border-color:var(--amber)}

/* ---------- panels ---------- */
.panel{display:none; padding-top:26px; animation:fade .35s ease both}
.panel.is-active{display:block}
.panel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:16px}
.panel-head h2{margin:0; font-family:var(--serif); font-size:22px; letter-spacing:.01em}
.hint{margin:6px 0 0; max-width:720px; font-size:12.5px; color:var(--ink-soft)}

.tools{display:flex; gap:10px; align-items:center}
.search{display:flex; align-items:center; gap:8px; border:1px solid var(--line-strong); background:rgba(255,253,247,.72); padding:8px 12px; border-radius:2px}
.search svg{width:15px; height:15px; color:var(--sage)}
.search input{border:0; outline:0; background:none; font-family:var(--sans); font-size:13px; width:220px; color:var(--ink)}
.search input::placeholder{color:#8a968f}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px}
.chip{
  appearance:none; cursor:pointer; border:1px solid var(--line-strong); background:transparent;
  padding:6px 12px; border-radius:999px; font-size:12.5px; color:var(--ink-soft);
  transition:all .18s ease; font-family:var(--sans);
}
.chip b{font-family:var(--mono); font-weight:600; margin-left:5px; color:var(--ink)}
.chip:hover{border-color:var(--forest); color:var(--ink)}
.chip.is-active{background:var(--forest); border-color:var(--forest); color:#f6f1e6}
.chip.is-active b{color:#f0e0c2}

/* ---------- tables ---------- */
.table-wrap{
  border:1px solid var(--line-strong); background:rgba(255,253,247,.6);
  max-height:66vh; overflow:auto; position:relative;
}
table.ledger{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.ledger thead th{
  position:sticky; top:0; z-index:2; text-align:left; font-weight:600; font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-soft); background:#efe8d8; border-bottom:1px solid var(--line-strong); padding:10px 12px; white-space:nowrap;
}
.ledger td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.ledger tbody tr{animation:fade .3s ease both}
.ledger tbody tr:hover{background:rgba(180,119,28,.06)}
.ledger .num, .ledger .mono{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.ledger .num{text-align:right}
.ledger td.num{text-align:right}
.p-title{font-weight:500; color:var(--ink); max-width:420px}
.p-link{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.p-link:hover{border-color:var(--line-strong); color:var(--forest)}
.clamp{max-width:430px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.now small, .was small{font-family:var(--sans); font-size:10px; color:var(--sage); margin-left:2px}
.p-sub{margin-top:3px; font-family:var(--mono); font-size:11px; color:#7c8a83}
.was{color:#8a968f; text-decoration:line-through; text-decoration-thickness:1px}
.arrow{color:var(--amber); padding:0 4px}
.now{color:var(--forest); font-weight:600}
.muted{color:var(--sage); font-weight:600}
.tgt{color:var(--ink-soft)}
.tag{display:inline-block; font-size:11px; padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-soft); white-space:nowrap}
.status{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; white-space:nowrap}
.status i{width:6px; height:6px; border-radius:50%; display:inline-block}
.status.ok{color:var(--forest)} .status.ok i{background:var(--forest)}
.status.good{color:var(--sage)} .status.good i{background:var(--sage)}
.status.skip{color:var(--clay)} .status.skip i{background:var(--clay)}
.status.wait{color:var(--amber)} .status.wait i{background:var(--amber)}
.verify{font-size:12px; color:var(--ink-soft)}
.empty{padding:26px; text-align:center; color:var(--ink-soft); font-size:13px}

/* ---------- SOP ---------- */
.sop-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.sop-card{position:relative; border:1px solid var(--line-strong); background:rgba(255,253,247,.66); padding:20px 20px 18px}
.sop-card .idx{font-family:var(--mono); font-size:11px; color:var(--amber); letter-spacing:.12em}
.sop-card h3{margin:8px 0 10px; font-family:var(--serif); font-size:17px}
.sop-card p{margin:0 0 10px; font-size:13px; color:var(--ink-soft); line-height:1.75}
.sop-card p:last-child{margin-bottom:0}
.sop-card.accent{border-color:rgba(180,119,28,.5); background:linear-gradient(180deg,rgba(240,224,194,.55),rgba(255,253,247,.7))}
.small{font-size:12px !important; color:#6d7a72 !important}
.steps{margin:0 0 10px; padding-left:18px; font-size:13px; color:var(--ink-soft); line-height:1.8}
code{font-family:var(--mono); font-size:.92em; background:rgba(30,68,54,.08); padding:1px 5px; border-radius:2px}

.exceptions{margin-top:22px; border-top:1px solid var(--line-strong); padding-top:18px}
.exceptions h3{margin:0 0 10px; font-family:var(--serif); font-size:16px}
.exceptions ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:13px; line-height:1.9}
.exceptions b{color:var(--ink)}

/* ---------- footer ---------- */
.foot{
  position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:26px 28px 40px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft);
}
.foot-left{display:flex; gap:8px; flex-wrap:wrap}
.sep{color:var(--sage)}
.foot-right{display:flex; gap:16px; flex-wrap:wrap}
.foot a{color:var(--forest); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.foot a:hover{border-color:var(--forest)}

@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}

@media (max-width:980px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi:nth-child(3){border-right:none}
  .kpi:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .sop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .masthead{padding:14px 16px 10px}
  .brand-text em{display:none}
  .masthead-meta{gap:8px; font-size:10.5px}
  .masthead-meta .ghost-link:first-of-type{display:none}
  .masthead-meta #generated{max-width:86px; white-space:normal; line-height:1.3}
  main{padding:10px 16px 60px}
  .hero{padding:22px 0 18px}
  .lede{font-size:14px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{border-right:none; border-bottom:1px solid var(--line)}
  .kpi:nth-child(odd){border-right:1px solid var(--line)}
  .sop-grid{grid-template-columns:1fr}
  .search input{width:150px}
  .table-wrap{max-height:none}
  .p-title{max-width:220px}
  .foot{padding:20px 16px 32px}
}