:root {
    --paper:#f4f0e6; --paper-deep:#ebe5d6; --ink:#1c1a14; --ink-soft:#5b564a;
    --rule:#d6cdb8; --accent:#9a3b1b; --accent-2:#2e5e4e; --gold:#b08428;
    --ok:#2e5e4e; --warn:#9a6b1b; --err:#9a3b1b;
    --shadow:0 1px 0 rgba(28,26,20,.04), 0 8px 30px -12px rgba(28,26,20,.25);
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body {
    font-family:'Newsreader',Georgia,serif; background:var(--paper); color:var(--ink);
    font-size:17px; min-height:100vh; -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(176,132,40,.05), transparent 40%),
      radial-gradient(circle at 88% 78%, rgba(46,94,78,.05), transparent 42%);
  }
  .wrap { max-width:1080px; margin:0 auto; padding:48px 28px 80px; }
  header.masthead { border-bottom:2px solid var(--ink); padding-bottom:18px; margin-bottom:6px;
    display:flex; align-items:flex-end; justify-content:space-between; }
  .title { font-family:'Fraunces',serif; font-weight:600; font-size:38px; letter-spacing:-.5px; line-height:1; }
  .title .dot { color:var(--accent); }
  .kicker { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:2px;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
  .userbox { display:flex; align-items:center; gap:12px; }
  .userbox img { width:36px; height:36px; border-radius:50%; border:1px solid var(--rule); }
  .userbox .who { text-align:right; }
  .userbox .who .nm { font-size:16px; }
  .userbox .who .rl { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px;
    text-transform:uppercase; color:var(--accent-2); }
  .logout-btn { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1px;
    text-transform:uppercase; background:none; border:1px solid var(--rule); color:var(--ink-soft);
    padding:8px 15px; border-radius:2px; cursor:pointer; transition:.2s; }
  .logout-btn:hover { border-color:var(--ink); color:var(--ink); }

  .tabs { display:flex; gap:6px; border-bottom:1px solid var(--rule); margin:28px 0 34px; }
  .tab { font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--ink-soft); background:none; border:none;
    padding:11px 18px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
  .tab.active { color:var(--accent); border-bottom-color:var(--accent); }

  .login-stage { min-height:100vh; display:flex; align-items:center; justify-content:center; }
  .login-card { background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px;
    padding:48px 44px; width:400px; box-shadow:var(--shadow); text-align:center; }
  .login-card .title { font-size:34px; margin-bottom:6px; }
  .login-card .lede { font-style:italic; color:var(--ink-soft); font-size:17px; margin-bottom:32px; }
  .gbtn { display:inline-flex; align-items:center; gap:12px; font-family:'IBM Plex Mono',monospace;
    font-size:14px; letter-spacing:.5px; background:#fff; color:#1c1a14; border:1px solid var(--rule);
    border-radius:4px; padding:14px 24px; cursor:pointer; text-decoration:none; transition:.18s; }
  .gbtn:hover { box-shadow:var(--shadow); border-color:var(--ink-soft); }
  .gbtn svg { width:19px; height:19px; }
  .login-note { font-size:14px; color:var(--ink-soft); margin-top:24px; font-style:italic; }
  .login-err { color:var(--err); font-size:15px; margin-top:16px; font-style:italic; min-height:18px; }

  .btn { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:1.5px;
    text-transform:uppercase; cursor:pointer; border:none; border-radius:3px; padding:14px 24px;
    transition:.18s; background:var(--ink); color:var(--paper); }
  .btn:hover { background:var(--accent); }
  .btn:disabled { opacity:.45; cursor:not-allowed; }

  .panel { background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px;
    padding:30px; margin-bottom:36px; box-shadow:var(--shadow); }
  .panel-head { font-family:'Fraunces',serif; font-size:24px; font-weight:600; margin-bottom:4px; }
  .panel-sub { font-style:italic; color:var(--ink-soft); font-size:16px; margin-bottom:22px; }
  .drop { border:1.5px dashed var(--rule); border-radius:4px; padding:34px; text-align:center;
    transition:.2s; cursor:pointer; background:rgba(255,255,255,.25); }
  .drop:hover,.drop.over { border-color:var(--accent); background:rgba(154,59,27,.04); }
  .drop .icon { font-family:'Fraunces',serif; font-size:30px; color:var(--accent); }
  .drop .main { font-size:18px; margin:8px 0 3px; }
  .drop .hint { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1px; color:var(--ink-soft); }
  .chosen { margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--accent-2); display:none; }
  .field-row { display:flex; gap:16px; align-items:flex-end; margin-top:20px; flex-wrap:wrap; }
  .field label { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
    letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
  .pin-set { font-family:'IBM Plex Mono',monospace; font-size:18px; letter-spacing:6px; text-align:center;
    width:140px; padding:11px; border:1px solid var(--rule); border-radius:3px; background:var(--paper);
    color:var(--ink); outline:none; }
  .pin-set:focus { border-color:var(--accent); }
  .note { font-style:italic; color:var(--ink-soft); font-size:15px; }
  .banner { border-left:3px solid var(--warn); background:rgba(154,107,27,.08); padding:12px 16px;
    font-size:16px; margin-bottom:22px; border-radius:0 3px 3px 0; display:none; }

  .sec-head { font-family:'Fraunces',serif; font-size:24px; font-weight:600; margin-bottom:18px;
    display:flex; align-items:baseline; gap:12px; }
  .sec-head .count { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); letter-spacing:1px; }
  table { width:100%; border-collapse:collapse; }
  th { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--ink-soft); text-align:left; padding:0 14px 12px; border-bottom:1px solid var(--ink); }
  td { padding:16px 14px; border-bottom:1px solid var(--rule); font-size:16px; vertical-align:middle; }
  tr:last-child td { border-bottom:none; }
  tbody tr:nth-child(even) { background: rgba(214,205,184,.22); }
  .fname { font-weight:500; }
  .meta { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); margin-top:3px; }
  .pill { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase;
    padding:5px 11px; border-radius:20px; display:inline-block; }
  .pill.pending,.pill.preparing,.pill.submitted,.pill.collecting { background:rgba(154,107,27,.12); color:var(--warn); }
  .pill.completed { background:rgba(46,94,78,.12); color:var(--ok); }
  .pill.failed { background:rgba(154,59,27,.12); color:var(--err); }
  .spin { display:inline-block; animation:pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
  .act { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--accent); text-decoration:none; border:1px solid var(--rule); padding:7px 12px;
    border-radius:3px; transition:.18s; cursor:pointer; background:none; display:inline-block; }
  .act:hover { border-color:var(--accent); background:rgba(154,59,27,.05); }
  .act.danger { color:var(--err); }
  .act + .act { margin-left:6px; }
  .empty { text-align:center; padding:50px; color:var(--ink-soft); font-style:italic; font-size:16px; }

  .toggle { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px;
    text-transform:uppercase; padding:6px 11px; border-radius:3px; cursor:pointer; border:1px solid var(--rule);
    background:none; color:var(--ink-soft); }
  .toggle.on { background:rgba(46,94,78,.12); color:var(--ok); border-color:var(--ok); }
  .toggle.off { background:rgba(154,59,27,.08); color:var(--err); border-color:var(--err); }

  .modal-bg { position:fixed; inset:0; background:rgba(28,26,20,.55); display:none;
    align-items:center; justify-content:center; z-index:50; padding:30px; }
  .modal { background:var(--paper); border-radius:4px; width:100%; max-width:960px; max-height:86vh;
    overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px -20px rgba(28,26,20,.5); }
  .modal.wide { max-width:1100px; }
  .modal.small { max-width:420px; }
  .modal-head { padding:20px 24px; border-bottom:1px solid var(--rule); display:flex;
    justify-content:space-between; align-items:center; }
  .modal-head h3 { font-family:'Fraunces',serif; font-weight:600; font-size:21px; }
  .modal-head .x { cursor:pointer; font-size:22px; color:var(--ink-soft); background:none; border:none; }
  .modal-body { overflow:auto; padding:0; }
  .modal-body.pad { padding:24px; }
  .modal-body table td,.modal-body table th { white-space:nowrap; font-size:14px; }
  .modal-body table th { position:sticky; top:0; background:var(--paper-deep); }
  .modal-foot { padding:14px 24px; border-top:1px solid var(--rule); font-size:14px; font-style:italic; color:var(--ink-soft); }
  .pin-prompt-input { font-family:'IBM Plex Mono',monospace; font-size:22px; letter-spacing:8px; text-align:center;
    width:100%; padding:14px; border:1px solid var(--rule); border-radius:3px; background:var(--paper-deep);
    color:var(--ink); outline:none; margin:8px 0 16px; }
  .pin-prompt-input:focus { border-color:var(--accent); }
  .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px 24px; border-bottom:1px solid var(--rule); }
  .stat { background:var(--paper-deep); border:1px solid var(--rule); border-radius:4px; padding:16px 18px; }
  .stat .num { font-family:'Fraunces',serif; font-size:28px; font-weight:600; color:var(--accent); }
  .stat .lbl { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
  .chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; padding:24px; }
  .chart-box { min-height:240px; }
  .chart-box h4 { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
  .chart-box canvas { max-height:260px; }
  .hidden { display:none !important; }