:root{
    --ink:#10233F;
    --ink-soft:#1B3A63;
    --paper:#FBF8F2;
    --paper-dim:#F1ECE0;
    --line:#DCD3BE;
    --slate:#4A5568;
    --gold:#A9832F;
    --gold-soft:#E8D9AE;
    --green:#146C43;
    --green-bg:#E7F3EC;
    --red:#B3261E;
    --red-bg:#FBEAE8;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper-dim);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;}
  .app{max-width:920px;margin:0 auto;min-height:100vh;background:var(--paper);box-shadow:0 0 60px rgba(16,35,63,0.08);position:relative;}
  .app::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0.035;
    background-image:radial-gradient(circle at 1px 1px, var(--ink) 1px, transparent 0);
    background-size:14px 14px;
  }

  header.topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 32px;border-bottom:1px solid var(--line);position:relative;z-index:2;
  }
  .brand{display:flex;align-items:center;gap:14px;}
  .brand-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
  .logo-img{height:38px;width:auto;display:block;}
  .brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:18px;letter-spacing:0.2px;}
  .brand-name[contenteditable]:focus{outline:1px dashed var(--gold);}
  .brand-sub{font-size:10.5px;color:var(--slate);font-family:'IBM Plex Mono',monospace;letter-spacing:0.5px;text-transform:uppercase;margin-top:2px;}

  nav.tabs{display:flex;gap:2px;}
  nav.tabs button{
    font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.3px;
    padding:10px 18px;background:transparent;border:1px solid var(--ink);color:var(--ink);
    cursor:pointer;border-radius:var(--radius);
  }
  nav.tabs button.active{background:var(--ink);color:var(--paper);}
  .admin-flag{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--gold);border:1px solid var(--gold-soft);padding:4px 9px;border-radius:20px;letter-spacing:0.5px;}

  main{padding:36px 32px 60px;position:relative;z-index:2;}
  section.tabpanel{display:none;}
  section.tabpanel.active{display:block;}

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--gold);margin-bottom:6px;
  }
  h1.pagetitle{font-family:'Fraunces',serif;font-weight:600;font-size:30px;margin:0 0 6px;}
  p.pagelede{color:var(--slate);font-size:14.5px;max-width:56ch;margin:0 0 28px;line-height:1.55;}

  .subtabs{display:flex;gap:8px;margin-bottom:22px;}
  .subtabs button{
    font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:500;
    padding:8px 16px;border:1px solid var(--line);background:var(--paper-dim);color:var(--slate);
    cursor:pointer;border-radius:var(--radius);
  }
  .subtabs button.active{border-color:var(--ink);color:var(--ink);background:var(--paper);font-weight:600;}

  .card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px;margin-bottom:20px;
  }
  .card.tight{padding:20px;}

  label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;letter-spacing:0.2px;}
  input[type=text], input[type=date], select, textarea{
    width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
    font-family:'IBM Plex Sans',sans-serif;font-size:14px;background:var(--paper);color:var(--ink);
  }
  input:focus, select:focus, textarea:focus{outline:none;border-color:var(--gold);}
  .field{margin-bottom:16px;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media(max-width:640px){.grid2{grid-template-columns:1fr;} header.topbar{flex-direction:column;align-items:flex-start;gap:14px;} nav.tabs{width:100%;} nav.tabs button{flex:1;}}

  .party-row{
    border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:10px;
    background:var(--paper-dim);
  }
  .party-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .party-row-head span{font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--slate);text-transform:uppercase;letter-spacing:0.5px;}
  .party-row-head button{background:none;border:none;color:var(--red);font-size:12px;cursor:pointer;font-weight:600;}

  .btn{
    font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:0.2px;
    padding:11px 20px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--ink);
  }
  .btn-primary{background:var(--ink);color:var(--paper);}
  .btn-primary:hover{background:var(--ink-soft);}
  .btn-ghost{background:transparent;color:var(--ink);}
  .btn-ghost:hover{background:var(--paper-dim);}
  .btn:disabled{opacity:0.45;cursor:not-allowed;}
  .btn-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}

  .dropzone{
    border:1.5px dashed var(--line);border-radius:var(--radius);padding:34px 20px;text-align:center;
    color:var(--slate);cursor:pointer;background:var(--paper-dim);transition:border-color .15s, background .15s;
  }
  .dropzone.drag{border-color:var(--gold);background:var(--gold-soft);}
  .dropzone svg{margin-bottom:10px;}
  .dropzone .fname{font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-top:10px;color:var(--ink);}

  .seal-wrap{display:flex;flex-direction:column;align-items:center;padding:30px 10px 8px;}
  .seal{width:96px;height:96px;position:relative;}
  .seal svg{width:100%;height:100%;}
  .seal.stamp{animation:stampIn .5s cubic-bezier(.2,1.4,.4,1) both;}
  @keyframes stampIn{
    0%{transform:scale(2.6) rotate(-14deg);opacity:0;}
    60%{transform:scale(0.92) rotate(3deg);opacity:1;}
    100%{transform:scale(1) rotate(0deg);opacity:1;}
  }
  .seal-result-text{font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin-top:14px;}
  .seal-result-text.ok{color:var(--green);}
  .seal-result-text.fail{color:var(--red);}
  .seal-result-text.warn{color:var(--gold);}
  .seal-result-sub{font-size:12.5px;color:var(--slate);margin-top:3px;text-align:center;max-width:46ch;}

  .doc-card{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:22px;
  }
  .doc-card-head{
    background:var(--ink);color:var(--paper);padding:14px 18px;
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .doc-card-head .dt{font-family:'Fraunces',serif;font-size:15px;font-weight:600;}
  .doc-card-head .di{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--gold-soft);letter-spacing:0.5px;}
  .doc-card-body{padding:20px;}
  .kv-row{display:flex;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;gap:14px;}
  .kv-row:last-child{border-bottom:none;}
  .kv-row .k{width:170px;flex-shrink:0;color:var(--slate);font-weight:500;}
  .kv-row .v{font-weight:500;}
  .kv-row .v.mono{font-family:'IBM Plex Mono',monospace;font-size:12.5px;}

  .party-block{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:12px;background:var(--paper-dim);}
  .party-block .role{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-bottom:4px;}
  .party-block .nm{font-weight:600;font-size:14.5px;}
  .party-block .doc{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--slate);margin-top:2px;}
  .match-badge{display:inline-block;font-size:10.5px;font-family:'IBM Plex Mono',monospace;padding:2px 7px;border-radius:20px;margin-left:8px;vertical-align:middle;}
  .match-badge.ok{background:var(--green-bg);color:var(--green);}
  .match-badge.miss{background:var(--red-bg);color:var(--red);}

  .cert-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-top:22px;}
  .cert-tabs button{
    flex:1;font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;font-weight:600;padding:11px 8px;
    background:var(--paper-dim);border:1px solid var(--line);border-bottom:none;color:var(--slate);cursor:pointer;
  }
  .cert-tabs button.active{background:var(--paper);color:var(--ink);}
  .cert-panel{border:1px solid var(--line);border-top:none;padding:18px 20px;}
  .cert-panel.hidden{display:none;}
  .check-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:13px;}
  .check-item svg{flex-shrink:0;margin-top:1px;}
  .check-item .lbl{color:var(--ink-soft);}
  .cert-kv{margin-bottom:14px;}
  .cert-kv .lbl2{font-size:10.5px;text-transform:uppercase;letter-spacing:0.8px;color:var(--slate);font-family:'IBM Plex Mono',monospace;margin-bottom:3px;}
  .cert-kv .val2{font-family:'IBM Plex Mono',monospace;font-size:12.5px;word-break:break-all;}

  .qr-box{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-dim);margin-top:16px;}
  .qr-canvas-holder{background:#fff;padding:10px;border:1px solid var(--line);flex-shrink:0;}
  .qr-info{flex:1;min-width:220px;}
  .qr-info .id-line{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--slate);word-break:break-all;margin-bottom:8px;}
  .qr-info .link-line{font-family:'IBM Plex Mono',monospace;font-size:11.5px;background:var(--paper);border:1px solid var(--line);padding:8px 10px;border-radius:var(--radius);word-break:break-all;margin-bottom:10px;}

  .list-item{
    display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
    border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;background:var(--paper);
  }
  .list-item .li-main{font-size:13.5px;}
  .list-item .li-main .nm{font-weight:600;}
  .list-item .li-main .id{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);}
  .list-item .li-actions{display:flex;gap:8px;}
  .list-item .li-actions button{font-size:11.5px;padding:6px 10px;}

  .note{font-size:12px;color:var(--slate);background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;line-height:1.5;}
  .note.gold{border-color:var(--gold-soft);background:#FBF6E9;}
  .note.red{border-color:#EFC6C2;background:var(--red-bg);color:#7A211B;}

  footer{padding:20px 32px;border-top:1px solid var(--line);font-size:11px;color:var(--slate);font-family:'IBM Plex Mono',monospace;position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}

  .divider{height:1px;background:var(--line);margin:26px 0;}
  .hidden{display:none !important;}

  /* scan sequence */
  .scan-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--paper-dim);}
  .scan-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
  .scan-step{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;color:var(--slate);opacity:0.4;}
  .scan-step.active{opacity:1;color:var(--ink);}
  .scan-step.done{opacity:1;color:var(--ink);}
  .scan-step .icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}