:root{
    --ink:#14110f;
    --paper:#f4f1ea;
    --paper2:#ece7dc;
    --card:#fffdf8;
    --line:#d8d1c2;
    --muted:#7c7568;
    --accent:#e85d24;      /* print-ink orange */
    --accent2:#1b9e8c;     /* teal */
    --cy:#00a6c4; --mg:#d6336c; --ye:#e8a300; --bk:#222;
    --urgent:#d6336c; --normal:#1b9e8c; --others:#8a7e69;
    --shadow:0 1px 0 rgba(20,17,15,.04), 0 8px 24px -12px rgba(20,17,15,.25);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:'IBM Plex Sans',sans-serif;background:var(--paper);color:var(--ink);
    -webkit-font-smoothing:antialiased;
    background-image:radial-gradient(rgba(20,17,15,.025) 1px,transparent 1px);
    background-size:18px 18px;
  }
  .mono{font-family:'IBM Plex Mono',monospace}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  input,select,textarea{font-family:inherit;font-size:14px}

  /* ---------- shell ---------- */
  .app{display:flex;min-height:100vh}
  .side{
    width:248px;flex:none;background:var(--ink);color:#e9e4d8;
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  }
  .brand{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
  .brand .logo{font-family:'Archivo';font-weight:900;font-size:25px;line-height:.92;letter-spacing:-1px}
  .brand .logo span{color:var(--accent)}
  .brand .tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8c8576;margin-top:7px}
  .cmyk{display:flex;gap:4px;margin-top:12px}
  .cmyk i{width:13px;height:13px;border-radius:50%}
  .cmyk i:nth-child(1){background:var(--cy)} .cmyk i:nth-child(2){background:var(--mg)}
  .cmyk i:nth-child(3){background:var(--ye)} .cmyk i:nth-child(4){background:var(--bk);border:1px solid #555}

  nav{padding:14px 12px;flex:1;overflow:auto}
  .navlbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#6f6757;padding:14px 12px 6px}
  .nav-i{display:flex;align-items:center;gap:11px;width:100%;text-align:left;color:#cfc9bb;
    padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;transition:.15s}
  .nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-i.on{background:var(--accent);color:#fff}
  .nav-i .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}
  .nav-i .badge{margin-left:auto;background:rgba(255,255,255,.18);font-size:11px;
    padding:1px 7px;border-radius:20px;font-weight:600}
  .nav-i.on .badge{background:rgba(0,0,0,.22)}

  .who{padding:14px;border-top:1px solid rgba(255,255,255,.08)}
  .who label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#6f6757;display:block;margin-bottom:6px}
  .who select{width:100%;background:#221e1a;color:#fff;border:1px solid #3a342d;border-radius:8px;padding:9px 10px;font-weight:600}
  .who .role{font-size:11px;color:#8c8576;margin-top:8px}

  /* ---------- main ---------- */
  main{flex:1;min-width:0;display:flex;flex-direction:column}
  .top{display:flex;align-items:center;gap:16px;padding:20px 30px;border-bottom:1px solid var(--line);
    background:rgba(244,241,234,.82);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
  .top h1{font-family:'Archivo';font-weight:800;font-size:22px;letter-spacing:-.5px}
  .top .sub{color:var(--muted);font-size:13px;margin-top:2px}
  .spacer{flex:1}
  .content{padding:26px 30px 60px;max-width:1180px;width:100%}

  .btn{background:var(--ink);color:#fff;border-radius:9px;padding:10px 16px;font-weight:600;font-size:14px;
    display:inline-flex;align-items:center;gap:8px;transition:.15s}
  .btn:hover{transform:translateY(-1px)}
  .btn.accent{background:var(--accent)}
  .btn.green{background:#128a5e}
  .btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
  .btn.sm{padding:7px 12px;font-size:13px;border-radius:8px}
  .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

  /* stat cards */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
  .stat .n{font-family:'Archivo';font-weight:800;font-size:30px;line-height:1}
  .stat .l{color:var(--muted);font-size:12.5px;margin-top:6px;font-weight:500}
  .stat .bar{height:4px;border-radius:4px;margin-top:11px;background:var(--paper2);overflow:hidden}
  .stat .bar i{display:block;height:100%;background:var(--accent)}

  .sec-h{display:flex;align-items:center;gap:12px;margin:6px 0 14px}
  .sec-h h2{font-family:'Archivo';font-weight:800;font-size:16px}
  .sec-h .line{flex:1;height:1px;background:var(--line)}

  /* order cards / table */
  .ords{display:flex;flex-direction:column;gap:10px}
  .ord{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 17px;
    box-shadow:var(--shadow);display:flex;gap:16px;align-items:center;transition:.15s}
  .ord:hover{border-color:#c2b9a5}
  .ord .typ{font-family:'Archivo';font-weight:800;font-size:10px;letter-spacing:1px;text-transform:uppercase;
    padding:5px 9px;border-radius:7px;flex:none}
  .typ.offset{background:#1b110b;color:#ffb38a}
  .typ.digital{background:#082b30;color:#7fe3f0}
  .ord .mid{flex:1;min-width:0}
  .ord .jn{font-weight:700;font-size:15px;display:flex;align-items:center;gap:9px}
  .ord .jn .num{font-family:'IBM Plex Mono';font-size:12px;color:var(--muted);font-weight:500}
  .ord .meta{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;gap:14px;flex-wrap:wrap}
  .ord .meta b{color:var(--ink);font-weight:600}
  .pri{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border-radius:20px;flex:none}
  .pri.urgent{background:#fbe3ec;color:var(--urgent)} .pri.normal{background:#dff4f0;color:#0f6f60}
  .pri.others{background:#eee9dd;color:#6b6151}
  .st{font-size:11px;font-weight:700;padding:5px 10px;border-radius:7px;white-space:nowrap;flex:none}
  .st.bill{background:#fff2e0;color:#b8590f;border:1px solid #f3d4ac}
  .st.print{background:#e6f0ff;color:#1c5fb8;border:1px solid #c3d9ff}
  .st.prog{background:#efe7ff;color:#6b3fb8;border:1px solid #d8c8ff}
  .st.done{background:#e1f5e9;color:#15784e;border:1px solid #b7e6c9}
  .st.notif{background:#d9f3dc;color:#1f7a2e;border:1px solid #aee0b4}

  .empty{text-align:center;color:var(--muted);padding:50px 20px;border:2px dashed var(--line);border-radius:14px}
  .empty .ic{font-size:34px;opacity:.4}

  /* board */
  .board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .lane{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:13px;min-height:200px}
  .lane h3{font-family:'Archivo';font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1px;
    display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:0 4px}
  .lane h3 .c{margin-left:auto;background:#fff;border:1px solid var(--line);font-size:11px;padding:1px 8px;border-radius:20px;color:var(--muted)}
  .lane .tag{width:10px;height:10px;border-radius:3px}
  .lane.urgent .tag{background:var(--urgent)} .lane.normal .tag{background:var(--normal)} .lane.others .tag{background:var(--others)}
  .bcard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;
    box-shadow:0 4px 10px -8px rgba(0,0,0,.3);cursor:pointer;transition:.15s}
  .bcard:hover{transform:translateY(-2px);border-color:#bfb6a2}
  .bcard .top2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
  .bcard .jn{font-weight:700;font-size:13.5px}
  .bcard .num{font-family:'IBM Plex Mono';font-size:11px;color:var(--muted)}
  .bcard .who2{font-size:12px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:6px}
  .av{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;
    display:flex;align-items:center;justify-content:center;flex:none}

  /* modal */
  .scrim{position:fixed;inset:0;background:rgba(20,17,15,.55);backdrop-filter:blur(3px);z-index:100;
    display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
  .modal{background:var(--paper);border-radius:18px;width:100%;max-width:760px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
    border:1px solid var(--line);overflow:hidden;animation:pop .2s ease}
  @keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}}
  .mhead{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);background:var(--card)}
  .mhead h2{font-family:'Archivo';font-weight:800;font-size:19px}
  .mhead .x{margin-left:auto;font-size:22px;color:var(--muted);width:34px;height:34px;border-radius:9px}
  .mhead .x:hover{background:var(--paper2)}
  .mbody{padding:22px 24px;max-height:64vh;overflow:auto}
  .mfoot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--card)}

  .seg{display:inline-flex;background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:18px}
  .seg button{padding:8px 18px;border-radius:8px;font-weight:700;font-size:13px;color:var(--muted)}
  .seg button.on{background:var(--ink);color:#fff}

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
  .field{display:flex;flex-direction:column;gap:5px}
  .field.full{grid-column:1/-1}
  .field label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
  .field input,.field select,.field textarea{
    border:1.5px solid var(--line);background:var(--card);border-radius:9px;padding:9px 11px;width:100%;color:var(--ink)}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
  .field textarea{resize:vertical;min-height:60px}
  .chips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{border:1.5px solid var(--line);background:var(--card);border-radius:9px;padding:8px 13px;font-weight:600;font-size:13px;color:var(--muted)}
  .chip.on{border-color:var(--accent);background:#fff3ec;color:var(--accent)}

  .det-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
  .det-row .k{color:var(--muted);font-weight:500} .det-row .v{font-weight:600;text-align:right}
  .wtable{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
  .wtable th{text-align:left;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
  .wtable td{padding:6px 8px;border-bottom:1px solid var(--line)}
  .wtable input[type=checkbox]{width:17px;height:17px;accent-color:#128a5e}

  .note{background:#fff3ec;border:1px solid #f3d4ac;color:#9a4a10;border-radius:10px;padding:11px 13px;font-size:13px;display:flex;gap:9px;margin-bottom:16px}
  .lock{background:var(--paper2);border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center;color:var(--muted);font-size:13px}

  /* reports */
  .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
  .panel h3{font-family:'Archivo';font-weight:800;font-size:14px;margin-bottom:15px;display:flex;align-items:center;gap:8px}
  .rbar{margin-bottom:11px}
  .rbar .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
  .rbar .lbl b{font-family:'IBM Plex Mono';font-weight:600}
  .rbar .track{height:11px;background:var(--paper2);border-radius:7px;overflow:hidden}
  .rbar .track i{display:block;height:100%;border-radius:7px;transition:width .4s}
  .wk-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
  .wk-row:last-child{border:none}
  .wk-row .nm{font-weight:600;font-size:14px} .wk-row .rl{font-size:11.5px;color:var(--muted)}
  .wk-row .stat2{margin-left:auto;text-align:right}
  .wk-row .stat2 b{font-family:'Archivo';font-weight:800;font-size:19px}
  .wk-row .stat2 small{display:block;font-size:11px;color:var(--muted)}
  .seg.rt{margin-bottom:18px}

  .demo-bar{background:#1b110b;color:#ffce9e;font-size:12px;padding:7px 30px;display:flex;align-items:center;gap:8px}
  .demo-bar b{color:#ffb38a}

  @media(max-width:880px){
    .side{position:fixed;left:-260px;z-index:200;transition:.2s} .side.open{left:0}
    .grid2,.board{grid-template-columns:1fr}
    .content{padding:18px}
    .menu-btn{display:inline-flex!important}
  }
  .menu-btn{display:none}

  /* login */
  .login{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:24px;
    background:var(--ink);
    background-image:radial-gradient(circle at 20% 20%,rgba(232,93,36,.18),transparent 45%),
                     radial-gradient(circle at 85% 75%,rgba(0,166,196,.16),transparent 45%);}
  .login-card{background:var(--paper);border-radius:20px;padding:34px 30px;width:100%;max-width:380px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.6);border:1px solid var(--line)}
  .login-brand{text-align:center;margin-bottom:24px}
  .login-brand .logo{font-family:'Archivo';font-weight:900;font-size:34px;letter-spacing:-1.5px;line-height:1}
  .login-brand .logo span{color:var(--accent)}
  .login-brand .tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:8px}
  .login-brand .cmyk{justify-content:center;margin-top:14px}
  .login-err{background:#fbe3ec;color:#b01b53;border:1px solid #f0c2d2;border-radius:9px;padding:9px 12px;font-size:13px;margin-top:14px}
  .login-hint{margin-top:18px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.7;
    border-top:1px dashed var(--line);padding-top:14px}

/* report orders status table */
.rtable{width:100%;border-collapse:collapse;font-size:12.5px}
.rtable th{text-align:left;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  padding:8px 9px;border-bottom:2px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--card)}
.rtable td{padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
.rtable tbody tr:hover{background:var(--paper2)}
.rtable .typ{display:inline-block}