:root {
    --primary: #1a3d6d;
    --primary-dark: #132e52;
    --accent: #2f6f4f;
    --danger: #c0392b;
    --warn: #b9770e;
    --ok: #1e8449;
    --bg: #f2f5f9;
    --card: #ffffff;
    --text: #22303f;
    --muted: #6b7a8d;
    --border: #dde4ec;
    --radius: 12px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
  }
  .container { max-width: 720px; margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
  .app-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff; border-radius: 0 0 var(--radius) var(--radius);
    padding: 18px 20px 20px; margin: -16px -16px 16px;
  }
  .app-header h1 { font-size: 20px; letter-spacing: .3px; }
  .app-header .sub { font-size: 12.5px; opacity: .85; margin-top: 4px; }
  .app-header .user { position: absolute; right: 20px; top: 18px; font-size: 12px; opacity: .9; }
  .app-header .logout { position: absolute; right: 20px; top: 40px; font-size: 12px; color: #ffd9d9; text-decoration: underline; cursor: pointer; }
  .card {
    background: var(--card); border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(20,40,70,.08);
    padding: 16px; margin-bottom: 14px;
  }
  .card h3 { font-size: 14.5px; color: var(--primary); margin-bottom: 12px; }
  .field { margin-bottom: 12px; }
  .field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
  .field input, .field select {
    width: 100%; padding: 11px 12px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 15px; background: #fbfcfe; color: var(--text);
    outline: none; appearance: none; -webkit-appearance: none;
  }
  .field input:focus, .field select:focus { border-color: var(--primary); background: #fff; }
  .row { display: flex; gap: 10px; }
  .row > div { flex: 1; }
  .btn {
    display: inline-block; border: none; border-radius: 10px; padding: 13px 16px;
    font-size: 15px; font-weight: 600; cursor: pointer; text-align: center;
    transition: opacity .15s; user-select: none;
  }
  .btn:active { opacity: .75; }
  .btn-primary { background: var(--primary); color: #fff; width: 100%; }
  .btn-accent { background: var(--accent); color: #fff; }
  .btn-danger { background: #fdecea; color: var(--danger); }
  .btn-outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
  .btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
  .btn:disabled { opacity: .5; }
  .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
  .toolbar input[type="month"] {
    flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  }
  .order-item {
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px; position: relative;
  }
  .order-item .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .order-item .oid { font-size: 12px; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
  .order-item .amount { font-size: 17px; font-weight: 700; color: var(--primary); }
  .order-item .meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
  .order-item .actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; color: #fff;
  }
  .st-0 { background: var(--ok); }        /* pending */
  .st-1 { background: #8e5cd6; }          /* dispensing */
  .st-2 { background: var(--primary); }   /* completed */
  .st-3 { background: var(--danger); }    /* revoked */
  .st-4 { background: var(--muted); }     /* expired */
  .empty { text-align: center; color: var(--muted); padding: 26px 0; font-size: 13.5px; }
  .toast {
    position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translateX(-50%); background: rgba(20,30,45,.92); color: #fff;
    padding: 11px 18px; border-radius: 10px; font-size: 13.5px; max-width: 86%;
    opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 99;
  }
  .toast.show { opacity: 1; }
  /* QR modal */
  .modal-mask {
    position: fixed; inset: 0; background: rgba(10,20,35,.62);
    display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px;
  }
  .modal-mask.show { display: flex; }
  .modal {
    background: #fff; border-radius: 14px; padding: 20px; width: min(440px, 100%);
    text-align: center; max-height: 90vh; overflow-y: auto;
  }
  .modal h3 { font-size: 15px; color: var(--primary); margin-bottom: 4px; }
  .modal .qr-size { margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
  .modal .amt { font-size: 18px; font-weight: 700; margin: 6px 0 2px; }
  .modal .label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .modal canvas, .modal qr-img { max-width: 100%; height: auto; }
  .modal .hint { font-size: 11.5px; color: #a0672a; background: #fef6e6; border-radius: 8px; padding: 8px; margin: 10px 0; }
  .modal .btns { display: flex; gap: 10px; margin-top: 12px; }
  .modal .btns .btn { flex: 1; padding: 11px; font-size: 14px; }
  @media (min-width: 760px) { .container { max-width: 860px; } .app-header { margin-top: -16px; } }