@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&family=Noto+Sans+TC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');
    :root{--paper:#f4f0e8;--paper2:#e7dece;--ink:#1d1b18;--ink2:#403b35;--muted:#897f72;--hair:#cfc4b2;--surface:rgba(250,247,240,.78);--surface2:rgba(232,224,211,.52);--accent:#5b665d;--accent2:#9a6a43;--danger:#8e3f35;--ok:#526b52;--warn:#9b7a3c;--blue:#526579;--shadow:0 26px 80px rgba(45,37,25,.08)}

    *{box-sizing:border-box}
 html{background:var(--paper)}
 body{margin:0;min-height:100dvh;color:var(--ink);font-family:'Noto Sans TC',sans-serif;font-weight:300;letter-spacing:.015em;background:linear-gradient(90deg,rgba(29,27,24,.035) 1px,transparent 1px) 0 0/84px 84px,linear-gradient(180deg,rgba(29,27,24,.025) 1px,transparent 1px) 0 0/84px 84px,radial-gradient(circle at 84% 12%,rgba(93,103,92,.16),transparent 34%),radial-gradient(circle at 9% 88%,rgba(155,109,69,.10),transparent 38%),var(--paper)}

    body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.38;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");mix-blend-mode:multiply}

    button,input,select,textarea{font:inherit}
.app{display:grid;grid-template-columns:300px 1fr;min-height:100dvh}
.side{border-right:1px solid var(--hair);padding:38px 28px;background:rgba(244,240,232,.82);backdrop-filter:blur(12px);position:sticky;top:0;height:100dvh}
.brand{display:grid;grid-template-columns:54px 1fr;align-items:start;gap:14px;margin-bottom:38px}
.mark{width:54px;height:78px;border:1px solid var(--ink);display:grid;place-items:end center;padding-bottom:9px;font-family:'Noto Serif TC',serif;font-size:28px;font-weight:900;letter-spacing:-.12em}
.brand h1{font-family:'Noto Serif TC',serif;font-size:19px;line-height:1.25;margin:0;font-weight:900;letter-spacing:.08em}
.brand p{margin:8px 0 0;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.nav{display:grid;gap:2px;border-top:1px solid var(--hair)}
.nav button{width:100%;text-align:left;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--ink2);padding:15px 0;border-radius:0;cursor:pointer;font-weight:400;letter-spacing:.04em;transition:color .22s ease,padding-left .22s ease}
.nav button.active,.nav button:hover{color:var(--ink);padding-left:16px}
.nav button.active:before{content:"—";margin-right:10px;color:var(--accent2)}
.nav small{display:block;color:var(--muted);margin-top:6px;font-size:11px;font-weight:300}
.main{padding:52px 62px 92px;max-width:1580px}
.top{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:42px;align-items:start;margin-bottom:38px}
.eyebrow{color:var(--accent2);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em}
.title{font-family:'Noto Serif TC',serif;font-size:clamp(42px,5vw,78px);line-height:.98;margin:16px 0 20px;font-weight:900;letter-spacing:.02em;max-width:930px}
.subtitle{color:var(--ink2);max-width:780px;line-height:2;margin:0;font-size:15px}
.status{background:rgba(244,240,232,.55);border-left:1px solid var(--ink);border-top:1px solid var(--hair);padding:18px 0 18px 20px;color:var(--ink2);line-height:1.8}
.status b{font-family:'Noto Serif TC',serif;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.span12{grid-column:span 12}
.span8{grid-column:span 8}
.span7{grid-column:span 7}
.span6{grid-column:span 6}
.span5{grid-column:span 5}
.span4{grid-column:span 4}
.span3{grid-column:span 3}
.card{background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shadow);padding:24px;position:relative}
.card:after{content:"";position:absolute;left:24px;right:24px;bottom:10px;height:1px;background:rgba(29,27,24,.08)}
.card h2,.card h3{font-family:'Noto Serif TC',serif;margin:0 0 18px;font-weight:900;letter-spacing:.06em}
.muted{color:var(--muted)}
.mono{font-family:'JetBrains Mono',monospace}
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.field label{display:block;color:var(--muted);font-size:12px;margin:0 0 7px;letter-spacing:.06em}
.field input,.field select{width:100%;background:rgba(255,255,255,.35);color:var(--ink);border:0;border-bottom:1px solid var(--hair);padding:12px 2px;min-height:44px;outline:none}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:400;letter-spacing:.08em;padding:12px 17px;min-height:44px;cursor:pointer}
.btn:hover{background:transparent;color:var(--ink)}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.btn.secondary:hover{border-color:var(--ink)}
.metric{padding:18px;border:1px solid var(--hair);background:rgba(232,224,211,.45)}
.metric .num{font-family:'Noto Serif TC',serif;font-size:34px;font-weight:900}
.metric .lab{color:var(--muted);font-size:12px;letter-spacing:.08em}
.metric.danger{border-color:rgba(142,63,53,.45)}
.metric.warn{border-color:rgba(155,122,60,.45)}
.metric.ok{border-color:rgba(82,107,82,.45)}
.tablewrap{overflow:auto;border:1px solid var(--hair);background:rgba(255,255,255,.22)}
table{width:100%;border-collapse:collapse;min-width:1060px}
th,td{padding:13px 12px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:middle;font-size:14px;line-height:1.65}
th{white-space:nowrap;color:var(--ink);background:rgba(232,224,211,.72);position:sticky;top:0;z-index:1;font-weight:500;letter-spacing:.08em}
td{color:var(--ink2)}
tr:hover td{background:rgba(255,255,255,.24)}
.pill{display:inline-flex;align-items:center;border:1px solid currentColor;padding:4px 8px;font-size:12px;font-weight:400;letter-spacing:.05em;background:transparent;white-space:nowrap}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.bad{color:var(--danger)}
.info{color:var(--blue)}
.split{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.note{border-left:1px solid var(--ink);padding:12px 0 12px 18px;color:var(--ink2);line-height:1.8}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--hair)}
.step{padding:18px;border-right:1px solid var(--hair);min-height:112px;background:rgba(255,255,255,.18)}
.step:last-child{border-right:0}
.step b{font-family:'Noto Serif TC',serif;font-size:20px}
.bar{height:8px;background:rgba(207,196,178,.65);margin-top:12px}
.bar i{display:block;height:100%;background:var(--ink)}
.timeline{display:grid;gap:10px}
.lane{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.track{height:46px;border:1px solid var(--hair);position:relative;background:rgba(255,255,255,.18)}
.block{position:absolute;top:8px;height:28px;background:var(--ink);color:var(--paper);font-size:12px;padding:5px 8px;white-space:nowrap;overflow:hidden}
.block.warn{background:var(--warn);color:var(--paper)}
.block.bad{background:var(--danger);color:#fff}
.drawer{position:fixed;right:34px;bottom:34px;width:min(540px,calc(100vw - 68px));background:var(--paper);border:1px solid var(--ink);padding:24px;box-shadow:var(--shadow);z-index:10}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:13px 18px;box-shadow:var(--shadow);z-index:20;letter-spacing:.08em}
.link{color:var(--blue);text-decoration:none;border-bottom:1px solid currentColor}
.tabs{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:18px 0}
.tab{border:0;border-right:1px solid var(--hair);background:transparent;color:var(--muted);padding:13px 18px;cursor:pointer}
.tab.active{background:var(--ink);color:var(--paper)}

    input[type="checkbox"]{width:18px;height:18px;accent-color:var(--ink);cursor:pointer}
.checkwrap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.checkwrap input{pointer-events:auto}
.pick{border:1px solid var(--hair);background:rgba(250,247,240,.9);padding:8px 14px;cursor:pointer;color:var(--blue);font-weight:700}
.pick.active{background:var(--ink);border-color:var(--ink);color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(154,106,67,.38);outline-offset:3px}
.tablewrap{max-width:100%;overflow:auto}
.span6 table,.span5 table,.span7 table{min-width:100%}
.ops{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--hair);background:var(--hair);margin-bottom:18px}
.summary div{background:rgba(250,247,240,.86);padding:18px}
.summary b{display:block;font-family:'Noto Serif TC',serif;font-size:30px;line-height:1}
.summary span{display:block;color:var(--muted);font-size:12px;margin-top:8px}
.hintline{font-size:12px;color:var(--muted);line-height:1.8;margin-top:10px}
.warnline{border-left:1px solid var(--danger);padding-left:12px;color:var(--ink2)}
.uxbar{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:stretch}
.nextbox{border:1px solid var(--ink);padding:18px;background:rgba(255,255,255,.22)}
.nextbox b{font-family:'Noto Serif TC',serif;font-size:22px}
.mini{font-size:12px;color:var(--muted);line-height:1.8}
.choicebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 0}
.choicebar .btn,.ops .btn{min-height:44px}
.btn[disabled]{opacity:.38;cursor:not-allowed}
.empty{padding:26px;border:1px dashed var(--hair);color:var(--muted);line-height:1.9;background:rgba(255,255,255,.18)}
.role{width:100%;margin-top:14px;border:1px solid var(--hair);background:rgba(255,255,255,.28);padding:10px;color:var(--ink)}

    .rowlink{border:0;background:transparent;color:var(--blue);text-decoration:underline;text-underline-offset:5px;cursor:pointer;padding:0;font-family:'JetBrains Mono',monospace;font-weight:600}
.rowlink:hover{color:var(--accent2)}
.detailgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin:16px 0}
.detailgrid div{background:rgba(250,247,240,.9);padding:14px}
.detailgrid b{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-bottom:6px}
.drawer .tablewrap{margin-top:14px}
.drawer h4{font-family:'Noto Serif TC',serif;font-size:20px;margin:18px 0 8px}
.drawer .bar{max-width:180px}

    .rowlink{border:0;background:transparent;color:var(--blue);text-decoration:underline;text-underline-offset:5px;cursor:pointer;padding:0;font-family:'JetBrains Mono',monospace;font-weight:600}
.rowlink:hover{color:var(--accent2)}
.detailgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin:16px 0}
.detailgrid div{background:rgba(250,247,240,.9);padding:14px}
.detailgrid b{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-bottom:6px}
.drawer .tablewrap{margin-top:14px}
.drawer h4{font-family:'Noto Serif TC',serif;font-size:20px;margin:18px 0 8px}
.drawer .bar{max-width:180px}
.chartlist{display:grid;gap:14px}
.chartrow{display:grid;grid-template-columns:190px 1fr 64px;gap:14px;align-items:center}
.chartbar{height:18px;background:var(--paper2);border:1px solid var(--hair);position:relative}
.chartbar i{display:block;height:100%;background:var(--ink)}
.chartbar.warn i{background:var(--warn)}
.chartbar.bad i{background:var(--danger)}
.chartbar.ok i{background:var(--ok)}
.spark{display:flex;align-items:end;gap:8px;height:150px;border-left:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:10px 0 0 12px}
.spark div{width:42px;background:var(--ink);min-height:8px;display:grid;place-items:start center;color:var(--paper);font-size:10px;padding-top:4px}
.spark div.warn{background:var(--warn)}
.spark div.bad{background:var(--danger)}
.roleactions{margin-top:16px}
.roleactions .btn{min-width:128px}
.shipbox{border-left:1px solid var(--accent2);padding-left:14px;color:var(--ink2);line-height:1.8}


    .rangebar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end;margin-top:18px}
.rangebar .seg{display:flex;gap:8px}
.rangebar .seg .btn{flex:1}
.pressurechart{height:230px;border-left:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:12px 10px 34px;display:flex;align-items:end;gap:14px;overflow-x:auto}
.pressurebar{min-width:82px;display:grid;grid-template-rows:1fr auto;align-items:end;height:100%;gap:8px}
.pressurebar .barfill{width:100%;min-height:18px;background:var(--ink);display:flex;align-items:flex-start;justify-content:center;color:var(--paper);padding-top:8px;font-size:13px;font-weight:700}
.pressurebar .barfill.warn{background:var(--warn)}
.pressurebar .barfill.bad{background:var(--danger)}
.pressurebar .xlabel{text-align:center;line-height:1.35}
.pressurebar .xlabel b{display:block;font-family:'JetBrains Mono',monospace;font-size:13px}
.pressurebar .xlabel span{display:block;color:var(--muted);font-size:11px}
.sectiontitle{display:flex;justify-content:space-between;gap:16px;align-items:end}
.sectiontitle small{color:var(--muted);line-height:1.7}
.catblock{border:1px solid var(--hair);background:rgba(255,255,255,.18);padding:16px;margin-top:12px}
.catblock h3{font-family:'Noto Serif TC',serif;font-size:22px;margin:0 0 12px}
.catblock .chartrow{grid-template-columns:190px 1fr 86px}
.catbadge{display:inline-block;border:1px solid var(--hair);padding:3px 8px;margin-right:8px;color:var(--accent2);font-size:11px}

    #overlay:empty{display:none}
#overlay:not(:empty){position:fixed;inset:0;z-index:50;background:rgba(29,27,24,.26);display:grid;place-items:center;padding:28px}
.drawer{width:min(980px,94vw);max-height:88vh;overflow:auto;background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow);padding:32px}
.toast{position:fixed;right:28px;bottom:28px;background:var(--ink);color:var(--paper);padding:14px 18px;z-index:60}
.chartrow.linkrow{cursor:pointer}
.chartrow.linkrow:hover span{text-decoration:underline;text-underline-offset:5px}
.chartrow.linkrow:hover .chartbar{border-color:var(--ink)}

    @media(max-width:1080px){.app{grid-template-columns:1fr}
.side{position:relative;height:auto}
.main{padding:32px 22px 72px}
.top{grid-template-columns:1fr}
.filters{grid-template-columns:1fr 1fr}
.span8,.span7,.span6,.span5,.span4,.span3{grid-column:span 12}
.flow{grid-template-columns:1fr}
.step{border-right:0;border-bottom:1px solid var(--hair)}
.summary{grid-template-columns:repeat(2,1fr)}
}

    @media(max-width:560px){.filters{grid-template-columns:1fr}
.title{font-size:38px}
.side{padding:26px 20px}
.brand{margin-bottom:26px}
.lane{grid-template-columns:1fr}
.tablewrap table{min-width:900px}
}

/* ──────────────────────────────────────────────────────────
   Phase 1 enhancements appended below
   ────────────────────────────────────────────────────────── */

/* Print stylesheet — clean output for老闆 export reports */
@media print {
  body { background: #fff; }
  body::before { display: none; }
  .side, .drawer, .toast, #overlay, .roleactions, .role, .choicebar, .ops { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .main { padding: 0; max-width: 100%; }
  .card { background: #fff; border: 1px solid #888; box-shadow: none; page-break-inside: avoid; }
  .pressurechart, .timeline { page-break-inside: avoid; }
  .top { grid-template-columns: 1fr; }
  .filters, .summary { page-break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}

/* Mobile horizontal-scroll affordance — show a fade gradient + hint */
@media (max-width: 768px) {
  .tablewrap { position: relative; }
  .tablewrap::after {
    content: '← 左右滑動看完整表格 →';
    display: block;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    padding: 6px 0;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    background: linear-gradient(to bottom, transparent, rgba(244,240,232,0.6));
  }
}

/* Stronger warn color (Boss feedback: warn 金與 muted 灰有時糊在一起) */
.pill.warn, .chartbar.warn i, .barfill.warn { color: #8a6a25; }
.metric.warn { border-color: rgba(138,106,37,.55); }
.metric.warn .num { color: #8a6a25; }

/* Audit log nav entry hint */
.nav button[onclick*="'audit'"] { border-top: 1px solid var(--hair); margin-top: 10px; padding-top: 18px; }

/* Sidebar footer area for future status pills */
.side-foot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 11px; line-height: 1.7; }

/* Brand sidebar caption — soften "Sales · Production · Operation" hardcoded English so it doesn't read as decorative */
.brand p { font-style: normal; }

/* KPI benchmark indicator (small pip below the number) */
.metric .bench { display: block; color: var(--muted); font-size: 10px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }
.metric.ok .bench { color: var(--ok); }
.metric.warn .bench { color: #8a6a25; }
.metric.danger .bench { color: var(--danger); }