:root{
    --paper:#FAF7EF;
    --ink:#1C2B39;
    --ink-soft:#4A5A68;
    --stamp:#2F6F5E;
    --stamp-dark:#20503F;
    --alert:#B3441E;
    --line:#D8D0BC;
    --card:#FFFFFF;
  }
  [data-theme="dark"]{
    --paper:#121218;
    --ink:#DEE4EA;
    --ink-soft:#8A949E;
    --stamp:#3DAF7A;
    --stamp-dark:#5CC892;
    --alert:#EF5350;
    --line:#2A2A35;
    --card:#1A1A24;
  }
  [data-theme="dark"] .video-frame{background:#0A0A10;}
  [data-theme="dark"] .video-frame .placeholder{color:#5A646E;}
  [data-theme="dark"] .btn-primary:hover{background:#2A2A35;}
  [data-theme="dark"] .btn-flash.on{background:var(--stamp);border-color:var(--stamp);}
  [data-theme="dark"] .btn-danger-ghost{border-color:#4A2A2A;}
  [data-theme="dark"] .toast{background:#1A2A22;border-color:#2A4A3A;box-shadow:0 8px 30px rgba(0,0,0,.35);}
  [data-theme="dark"] .toast.err{background:#8B2E14;border-color:#A33A18;box-shadow:0 8px 30px rgba(0,0,0,.45);}
  [data-theme="dark"] thead th{background:#22222E;}
  [data-theme="dark"] tbody td{border-bottom-color:#2A2A35;}
  [data-theme="dark"] tbody tr:hover{background:#22222E;}
  [data-theme="dark"] .ocr-area .ocr-preview{background:#1A1A24;}
  [data-theme="dark"] .status-dot i{background:#5A5A6A;}
  [data-theme="dark"] #mobileStatus i{background:#5A5A6A;}
  [data-theme="dark"] .report-card{box-shadow:0 1px 0 rgba(255,255,255,.04);}
  [data-theme="dark"] .ticket{box-shadow:0 1px 0 rgba(255,255,255,.04);}
  [data-theme="dark"] .reticle{border-color:rgba(61,175,122,.5);}
  [data-theme="dark"] #mobileReticle{border-color:rgba(61,175,122,.5);}
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
   .wrap{max-width:1120px;margin:0 auto;padding:28px 18px 60px;}
   #viewSettings{max-width:640px;margin:0 auto;padding:0 18px;}
  .view{display:none;}
  .view.active{display:block;}

  header.masthead{
    display:flex;align-items:baseline;justify-content:space-between;
    border-bottom:2px solid var(--ink);
    padding-bottom:14px;margin-bottom:22px;
  }
  header.masthead .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--stamp-dark);
  }
  header.masthead h1{
    font-size:22px;margin:2px 0 0;font-weight:600;letter-spacing:-.01em;
  }
   #btnTheme{background:none;border:none;cursor:pointer;font-size:18px;padding:2px 6px;opacity:.6;}
   #btnTheme:hover{opacity:1;}
   [data-theme="dark"] #btnTheme{opacity:.9;}
   #btnSearch{background:none;border:none;cursor:pointer;font-size:18px;padding:2px 6px;opacity:.6;}
   #btnSearch:hover{opacity:1;}

  .back-bar{
    display:flex;align-items:center;gap:10px;margin-bottom:16px;
  }
  .back-bar button{font-size:12px;padding:6px 12px;}
  .back-bar h2{font-size:16px;margin:0;font-weight:600;}

  .report-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:2px;
    padding:16px 18px;
    margin-bottom:10px;
    cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;
    transition:border-color .15s;
  }
  .report-card:hover{border-color:var(--stamp);}
  .report-card .name{font-weight:600;font-size:15px;}
  .report-card .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .report-card .actions{display:flex;gap:6px;}
   .report-card .actions button{font-size:11px;padding:4px 8px;}

   .search-result-item{
     background:var(--card);
     border:1px solid var(--line);
     border-radius:2px;
     padding:10px 14px;
     margin-bottom:6px;
     cursor:pointer;
     transition:border-color .15s, background .15s;
   }
   .search-result-item:hover{border-color:var(--stamp);background:var(--card-hover);}

   .ticket{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:2px;
    position:relative;
    box-shadow:0 1px 0 rgba(28,43,57,.04);
    margin-bottom:22px;
  }
  .ticket::before{
    content:"";
    position:absolute;top:-1px;left:0;right:0;height:1px;
    background-image:radial-gradient(circle,var(--paper) 2.5px,transparent 2.6px);
    background-size:14px 1px;background-position:0 0;
  }
  .ticket-inner{padding:20px;}
  .ticket-head{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  }
  .ticket-head h2{
    font-size:13px;text-transform:uppercase;letter-spacing:.1em;
    color:var(--ink-soft);margin:0;font-weight:600;
  }
  .status-dot{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);
  }
  .status-dot i{width:7px;height:7px;border-radius:50%;background:#B7ADA0;display:inline-block;}
  .status-dot.live i{background:var(--stamp);box-shadow:0 0 0 3px rgba(47,111,94,.18);}

  .scan-area{
    display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;
  }
  .video-frame{
    width:280px;height:210px;background:#10181f;border-radius:3px;overflow:hidden;
    position:relative;flex-shrink:0;
  }
  .video-frame video{width:100%;height:100%;object-fit:cover;display:block;}
  .video-frame .reticle{
    position:absolute;inset:24px;border:2px solid rgba(47,111,94,.85);border-radius:4px;pointer-events:none;
  }
  .video-frame .placeholder{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#7C8B98;font-size:12px;font-family:'IBM Plex Mono',monospace;text-align:center;padding:20px;
  }
  .video-frame .focus-ripple{
    position:absolute;width:56px;height:56px;margin-left:-28px;margin-top:-28px;
    border:2px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;
    transform:scale(.55);opacity:0;animation:focusRipple .7s ease-out forwards;
  }
  @keyframes focusRipple{
    0%{transform:scale(.55);opacity:0;}
    25%{opacity:1;}
    100%{transform:scale(1);opacity:0;}
  }

  .scan-controls{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px;}

  .add-wrapper{position:relative;margin-left:auto;}
  #cameraControls .btn-stop{flex:1;text-align:center;}
  #cameraControls .btn-flash{flex:0 0 auto;}
  #cameraControls #btnBackFromCam{flex:0 0 100%;margin-top:6px;}
  #scanPanel{overflow-anchor:none;}
  .add-dd{position:absolute;top:100%;left:0;right:0;min-width:180px;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:2px;box-shadow:0 4px 16px rgba(0,0,0,.1);display:none;overflow:hidden;}
  .add-dd.show{display:block;}
  .add-opt{display:block;width:100%;text-align:left;padding:12px 16px;font-size:14px;background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);transition:background .1s;}
  .add-opt:last-child{border-bottom:none;}
  .add-opt:hover{background:var(--paper);}

  .ocr-area{display:none;flex-direction:column;gap:10px;}
  #ocrMode{flex-direction:column;gap:10px;}
  #ocrMode.show{display:flex;}
  .ocr-area.show{display:flex;}
  .ocr-area .ocr-preview{width:100%;max-height:200px;object-fit:contain;background:#f0ede4;border:1px solid var(--line);border-radius:2px;}
  .ocr-area .ocr-result{font-family:'IBM Plex Mono',monospace;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:2px;padding:10px;max-height:150px;overflow-y:auto;white-space:pre-wrap;}
  button{
    font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:13px;
    border:none;border-radius:2px;padding:10px 16px;cursor:pointer;
    transition:transform .05s ease, background .15s ease;
  }
  button:active{transform:scale(.98);}
  .btn-primary{background:var(--ink);color:var(--paper);}
  .btn-primary:hover{background:#0f1c26;}
  .btn-stop{background:var(--alert);color:#fff;}
  .btn-flash{background:transparent;color:var(--ink);border:1px solid var(--line);font-size:11px;padding:10px;}
  .btn-flash.on{background:#2F6F5E;color:#fff;border-color:#2F6F5E;}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
  .btn-ghost:hover{border-color:var(--ink);}
  .btn-danger-ghost{background:transparent;color:var(--alert);border:1px solid #E3C3B3;font-size:12px;padding:6px 10px;}

  .manual-entry{display:flex;gap:8px;}
  .manual-entry input{
    flex:1;font-family:'IBM Plex Mono',monospace;font-size:12px;
    padding:9px 10px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);
  }
  .manual-entry input:focus{outline:2px solid var(--stamp);outline-offset:1px;}

  .toast{
    font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.45;font-weight:600;padding:16px 20px 18px;border-radius:4px;
    background:#EEF5F2;color:var(--stamp-dark);border:1px solid #CFE3DB;border-left:4px solid var(--stamp);
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));max-width:560px;margin:0 auto;z-index:300;
    box-shadow:0 8px 30px rgba(0,0,0,.18);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
    transform:translateY(calc(100% + 24px));opacity:0;
    display:flex;align-items:flex-start;gap:10px;
    white-space:normal;word-break:break-word;overflow-wrap:anywhere;
    text-align:left;
  }
  .toast.show{transform:translateY(0);opacity:1;}
  .toast.err{background:#B3441E;color:#fff;border-color:#A33A18;border-left-color:#7A2A10;box-shadow:0 8px 30px rgba(179,68,30,.4);}
  .toast.err::before{content:"⚠️";flex-shrink:0;font-size:18px;line-height:1;}
  [data-theme="dark"] .toast.err::before{filter:brightness(1.2);}
  .toast .toast-bar{
    position:absolute;bottom:0;left:0;height:3px;background:var(--stamp);
    animation:toast-shrink 5s linear forwards;
  }
  .toast.err .toast-bar{background:#fff;opacity:.9;}
  @keyframes toast-shrink{from{width:100%}to{width:0%}}

  #shareBanner{
    display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
    background:#EEF5F2;border:1px solid #CFE3DB;border-left:4px solid var(--stamp);
    border-radius:3px;padding:10px 14px;margin-bottom:14px;
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--stamp-dark);
  }
  [data-theme="dark"] #shareBanner{background:#1A2A22;border-color:#2A4A3A;}
  .share-guest{
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;
  }
  .share-guest:last-child{border-bottom:none;}
  .share-tag{
    font-size:10px;font-weight:600;color:var(--stamp-dark);
    border:1px solid #CFE3DB;border-radius:2px;padding:1px 6px;margin-left:6px;white-space:nowrap;
  }
  .stats-bar{
    display:flex;gap:1px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:18px;
  }
  .stat{flex:1 1 0;min-width:0;background:var(--card);padding:14px 16px;}
  .stat .label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);overflow-wrap:anywhere;}
  .stat .value{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;margin-top:4px;overflow-wrap:anywhere;word-break:break-word;}

  table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);}
  thead th{
    text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
    color:var(--ink-soft);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);
    background:#F3F0E6;
  }
  tbody td{
    padding:10px 12px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
    border-bottom:1px solid #EFEAE0;vertical-align:middle;
  }
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#FBFAF6;}
  td.num{text-align:right;}
  td.edit-input input{
    width:100%;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
    border:1px solid var(--stamp);border-radius:2px;padding:4px 6px;
  }
  #formRow input{width:100%;font-family:'IBM Plex Mono',monospace;font-size:12.5px;border:1px solid var(--line);border-radius:2px;padding:4px 6px;background:var(--card);color:var(--ink);}
  #formRow input:focus{outline:2px solid var(--stamp);outline-offset:1px;}
  #formRow td{border-bottom:1px solid var(--line);vertical-align:middle;padding:2px 2px;}
  #formRow .form-actions{display:flex;gap:4px;}
  #formRow .form-actions button{font-size:11px;padding:4px 8px;white-space:nowrap;}
  .row-actions{display:flex;gap:6px;}
  .row-actions button{padding:5px 9px;font-size:11px;}
  .empty-row td{
    text-align:center;color:var(--ink-soft);font-family:'IBM Plex Sans',sans-serif;
    padding:34px 12px;font-size:13px;
  }

  .footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
  .footer-actions .left{display:flex;gap:10px;}
  footer.note{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);
    margin-top:26px;text-align:center;
  }
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:18px;}
  canvas{display:none;}
  input,textarea,select{font-size:16px!important;}
  #mobileMode{display:none;flex-direction:column;gap:10px;}
  #mobileMode.show{display:flex;}
  #qrCanvas{display:block;margin:0 auto;border:1px solid var(--line);border-radius:2px;background:#fff;}
  #mobileStatus{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);}
  #mobileStatus i{width:7px;height:7px;border-radius:50%;background:#B7ADA0;display:inline-block;}
  #mobileStatus.connected i{background:var(--stamp);box-shadow:0 0 0 3px rgba(47,111,94,.18);}
  #mobileLog{font-family:'IBM Plex Mono',monospace;font-size:11px;max-height:120px;overflow-y:auto;border-top:1px solid var(--line);padding-top:8px;margin-top:8px;display:none;}
  #mobileLog div{padding:2px 0;}
  #modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;}
  #modal.show{display:flex;}
  #modal-backdrop{position:absolute;inset:0;background:rgba(28,43,57,.5);}
  #modal-box{position:relative;background:var(--card);border:1px solid var(--line);border-radius:3px;padding:24px;max-width:min(640px,92vw);width:92%;max-height:80vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 8px 30px rgba(0,0,0,.15);}
  .manual-form{display:flex;flex-direction:column;gap:10px;}
  .manual-form label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);display:flex;flex-direction:column;gap:3px;}
  .mf-input{font-family:'IBM Plex Mono',monospace;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:2px;background:var(--card);color:var(--ink);}
  .mf-input:focus{outline:2px solid var(--stamp);outline-offset:1px;}
  .field-error{font-size:10px;color:var(--alert);min-height:1.2em;display:block;margin-top:2px;}
  #manualPanel .manual-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  @media(max-width:500px){#manualPanel .manual-form{grid-template-columns:1fr;}}

  .record-extras-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:100%;min-width:0;}
  .record-extras-form label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;overflow:hidden;}
  .record-extras-form .mf-input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
  .record-extras-form select.mf-input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:28px;}
  .record-extras-form .balance-ok{color:var(--stamp);font-weight:600;overflow-wrap:anywhere;word-break:break-word;}
  .record-extras-form .balance-err{color:var(--alert);font-weight:600;background:rgba(0,0,0,.02);padding:8px;border-left:3px solid var(--alert);overflow-wrap:anywhere;word-break:break-word;}
  @media(max-width:600px){.record-extras-form{grid-template-columns:1fr;}}
  .record-detail{font-family:'IBM Plex Mono',monospace;font-size:13px;}
  .record-detail > div{display:flex;padding:7px 0;border-bottom:1px solid var(--line);}
  .record-detail > div:last-child{border-bottom:none;}
  .rd-label{font-weight:600;color:var(--ink-soft);min-width:130px;flex-shrink:0;}
  .rd-sep{margin-top:8px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--line) !important;}
  .rd-value{color:var(--ink);word-break:break-all;}
  .rd-value a{color:var(--stamp);text-decoration:underline;}
  td.grip{width:28px;cursor:grab;color:var(--line);font-size:16px;user-select:none;text-align:center;padding:10px 4px;}
  td.grip:active{cursor:grabbing;}
  tr.dragging{opacity:.4;}
  tr.drag-over td{border-bottom:2px solid var(--stamp);}
  tr.selected td{background:rgba(47,111,94,.08);}
  td input[type="checkbox"]{width:14px;height:14px;cursor:pointer;accent-color:var(--stamp);margin:0;vertical-align:middle;}
  th input[type="checkbox"]{width:14px;height:14px;cursor:pointer;accent-color:var(--stamp);margin:0;vertical-align:middle;}
  @media (max-width:560px){
    .scan-area{flex-direction:column;}
    .video-frame{width:100%;}
    .table-scroll{border:1px solid var(--line);border-radius:2px;}
    .stats-bar{flex-direction:column;}
    .stat{padding:10px 14px;}
    .stat .value{font-size:17px;}
  }
  @media (max-width:480px){
    .toast{left:10px;right:10px;font-size:15px;padding:16px 18px 20px;}
  }