:root{
    --bg:#f4f7f7;
    --panel:#ffffff;
    --panel-2:#f0f4f4;
    --border:#dbe4e3;
    --border-soft:#e6edec;
    --text:#182524;
    --muted:#54696a;
    --muted-2:#5c7071;
    --accent:#0b7c72;
    --accent-dark:#08645e;
    --accent-2:#7c3aed;
    --danger:#dc2626;
    --danger-bg:rgba(220,38,38,.08);
    --radius:14px;
    --radius-sm:8px;
    --shadow:0 10px 30px rgba(24,37,36,.08);
  }
  *,*::before,*::after{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1100px 550px at 12% -8%, rgba(13,148,136,.06), transparent 60%),
      radial-gradient(900px 500px at 105% 0%, rgba(124,58,237,.06), transparent 60%),
      var(--bg);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  #app{min-height:100vh;display:flex;flex-direction:column}
  a{color:var(--accent)}
  button{font-family:inherit}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

  /* ---------- Header ---------- */
  .site-header{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:calc(16px + env(safe-area-inset-top, 0px)) calc(28px + env(safe-area-inset-right, 0px)) 16px calc(28px + env(safe-area-inset-left, 0px));border-bottom:1px solid var(--border-soft);
    flex-wrap:wrap;position:relative;z-index:40;background:var(--bg);isolation:isolate;
  }
  .wordmark{display:flex;flex-direction:row;align-items:center;gap:14px;line-height:1.2;background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;border-radius:10px}
  .wordmark:hover{opacity:.85}
  .wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .wordmark-text{border-left:1px solid var(--border);padding-left:14px;display:block}
  .wordmark-text .wm-title,.wordmark-text .wm-sub{display:block}
  .wm-title{font-weight:700;font-size:16px;letter-spacing:.2px}
  .wm-sub{font-size:12.5px;color:var(--muted)}
  .header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .header-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
  .nav-btn{border:none;background:transparent;color:var(--muted);padding:8px 10px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
  .nav-btn:hover,.nav-btn.active{background:var(--panel-2);color:var(--text)}
  .province-chip{
    display:flex;align-items:center;gap:8px;background:var(--panel);
    border:1px solid var(--border);border-radius:999px;padding:6px 8px 6px 14px;font-size:13px;
  }
  .province-chip-copy{display:flex;flex-direction:column;line-height:1.15}
  .province-chip-label{font-size:9px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;color:var(--muted-2)}
  .province-chip .name{font-weight:600}

  /* ---------- Generic ---------- */
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;width:fit-content}
  .badge-single{background:rgba(13,148,136,.16);color:#085041;border:1px solid rgba(13,148,136,.45)}
  .badge-double{background:rgba(124,58,237,.14);color:#5b21b6;border:1px solid rgba(124,58,237,.4)}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);
    font-size:14px;font-weight:600;padding:11px 18px;cursor:pointer;transition:transform .08s ease,border-color .15s,background .15s;
  }
  .btn:hover{border-color:var(--muted-2)}
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn-primary{
    background:var(--accent);color:#ffffff;border:1px solid var(--accent);font-weight:700;
  }
  .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
  .btn-ghost{background:transparent;border:1px solid var(--border)}
  .btn-block{width:100%}
  .btn-sm{padding:7px 12px;font-size:13px}

  .container{max-width:1180px;margin:0 auto;padding:32px 24px 80px;width:100%;flex:1}
  .screen-heading{font-size:26px;font-weight:800;margin:0 0 6px}
  .screen-sub{color:var(--muted);margin:0 0 28px;font-size:15px;max-width:640px}
  .loading-copy{margin:0 auto}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 1px 3px rgba(24,37,36,.05)}
  .notice-banner{
    background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.25);color:#5b21b6;
    border-radius:10px;padding:12px 16px;font-size:13.5px;margin-bottom:20px;line-height:1.5;
  }
  .error-text{color:var(--danger);font-size:12.5px;margin-top:6px}
  .success-text{color:#087669;font-size:13px;margin-top:8px}
  .status-box{border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.5;margin:14px 0}
  .status-error{background:var(--danger-bg);border:1px solid rgba(220,38,38,.2);color:#991b1b}
  .status-success{background:rgba(13,148,136,.08);border:1px solid rgba(13,148,136,.25);color:#075e55}
  .loading-card{max-width:460px;margin:70px auto;text-align:center}
  .loading-dot{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 16px}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }

  /* ---------- Gate ---------- */
  .gate-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  .gate-wrap-header{min-height:calc(100vh - 88px)}
  .forgot-link-row{text-align:right;margin:-7px 0 14px}
  /* The negative pull tightens the link under the password field, but it dragged the link on top
     of the sign-in error when one appeared between them. Cancel it in that case only. */
  .error-text + .forgot-link-row{margin-top:8px}
  .login-submit{margin-top:8px}
  .gate-help{margin:10px auto 22px}
  .gate-password-help{margin:12px auto 22px}
  .gate-card{
    width:100%;max-width:400px;background:var(--panel);border:1px solid var(--border);
    border-radius:var(--radius);padding:40px 32px;box-shadow:var(--shadow);text-align:center;
  }
  .gate-logo{font-size:26px;font-weight:800;margin-bottom:4px}
  .gate-logo span{color:var(--accent)}
  .gate-logo-img{width:220px;max-width:70%;height:auto;display:block;margin:0 auto 14px}
  .wordmark-img{height:54px;width:auto;display:block;align-self:flex-start;object-fit:contain}
  .gate-tag{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:2px;margin-bottom:28px}
  .gate-card label{display:block;text-align:left;font-size:13px;color:var(--muted);margin-bottom:6px}
  .field{margin-bottom:18px;text-align:left}
  .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
  .field input,.field select,.field textarea{margin-top:0}
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
    width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);
    border-radius:10px;padding:11px 13px;font-size:14.5px;font-family:inherit;
  }
  input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{
    outline:2px solid var(--accent);outline-offset:1px;
  }
  textarea{resize:vertical;min-height:74px}
  input::placeholder{color:var(--muted-2)}
  @keyframes shake{
    10%,90%{transform:translateX(-1px)}
    20%,80%{transform:translateX(2px)}
    30%,50%,70%{transform:translateX(-5px)}
    40%,60%{transform:translateX(5px)}
  }
  .gate-card.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
  .gate-footer{margin-top:20px;font-size:11.5px;color:var(--muted-2)}
  .gate-register{margin-top:18px;font-size:13.5px;color:var(--muted)}
  .linklike{background:none;border:none;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
  .linklike:hover{color:var(--accent-dark)}

  /* ---------- Public home + age gate ---------- */
  .age-gate-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
  .age-gate-card{max-width:520px;padding:42px 38px}
  .age-gate-title{font-size:30px;line-height:1.15;margin:0 0 10px;letter-spacing:-.5px}
  .age-gate-copy{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 auto 24px;max-width:390px}
  .age-gate-fields{display:grid;grid-template-columns:1.35fr .75fr 1fr;gap:10px;text-align:left}
  .age-gate-fields label{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 6px}
  .age-gate-error{text-align:left;margin-top:10px}
  .age-gate-submit{margin-top:18px}
  .age-gate-legal{font-size:11.5px;line-height:1.5;color:var(--muted-2);margin:18px 8px 0}
  .home-main{width:100%;max-width:1180px;margin:0 auto;padding:68px 24px 80px}
  .home-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:58px;align-items:center;padding:26px 0 72px}
  .home-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-dark);margin-bottom:12px}
  .home-hero h1{font-size:clamp(42px,5.8vw,72px);line-height:.98;letter-spacing:-2.8px;max-width:780px;margin:0 0 24px}
  .home-hero-copy>p{font-size:18px;line-height:1.65;color:var(--muted);max-width:680px;margin:0}
  .home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .home-actions .btn{padding:13px 22px}
  .home-order-note{background:linear-gradient(145deg,#ffffff,#eef7f5);border:1px solid rgba(11,124,114,.28);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
  .home-note-kicker{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--accent-dark);padding-bottom:14px;border-bottom:1px solid var(--border)}
  .home-rule{display:flex;flex-direction:column;gap:4px;padding:17px 0;border-bottom:1px solid var(--border-soft)}
  .home-rule strong{font-size:16px}
  .home-rule span,.home-order-note p{font-size:13.5px;line-height:1.55;color:var(--muted)}
  .home-order-note p{margin:17px 0 0}
  .home-stamps{padding:38px 0 62px;border-top:1px solid var(--border-soft)}
  .home-section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:22px}
  .home-section-heading h2,.home-expansion h2{font-size:28px;line-height:1.15;letter-spacing:-.5px;margin:0}
  .home-section-heading p{max-width:420px;margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
  .home-stamp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .home-stamp-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px;display:flex;min-height:138px;flex-direction:column;justify-content:space-between;gap:18px}
  .home-stamp-card h3{font-size:16px;line-height:1.25;margin:5px 0 0}
  .home-stamp-code{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted-2)}
  .home-expansion{display:flex;align-items:center;justify-content:space-between;gap:42px;padding:30px 32px;background:linear-gradient(100deg,rgba(124,58,237,.055),var(--panel) 55%)}
  .home-expansion>div{max-width:760px}
  .home-expansion p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:12px 0 0}
  .home-expansion .btn{flex:none}

  @media (max-width:880px){
    .home-main{padding-top:42px}
    .home-hero{grid-template-columns:1fr;gap:28px;padding:20px 0 54px}
    .home-stamp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:600px){
    .age-gate-card{padding:32px 22px}
    .age-gate-fields{grid-template-columns:1fr 1fr}
    .age-gate-fields>div:first-child{grid-column:1/-1}
    .home-main{padding:34px 18px 60px}
    .home-hero{padding-top:8px}
    .home-hero h1{font-size:43px;letter-spacing:-1.8px}
    .home-hero-copy>p{font-size:16px}
    .home-actions{flex-direction:column}
    .home-actions .btn{width:100%}
    .home-section-heading{align-items:flex-start;flex-direction:column;gap:8px}
    .home-stamp-grid{grid-template-columns:1fr}
    .home-stamp-card{min-height:0}
    .home-expansion{align-items:stretch;flex-direction:column;gap:22px;padding:26px 22px}
    .home-expansion .btn{width:100%}
    .province-chip-label{display:none}
  }

  /* ---------- Province ---------- */
  .province-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
  .province-card{
    text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:16px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .08s;
  }
  .province-card:hover{border-color:var(--accent);transform:translateY(-1px)}
  .province-card-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .province-current-tag{font-size:11px;font-weight:700;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.4px}
  .province-name{font-weight:700;font-size:15px}
  .province-code{color:var(--muted);font-size:12px}
  .province-note{font-size:11.5px;color:#b45309;line-height:1.4}
  .province-sub-note{font-size:11px;color:var(--muted-2);line-height:1.3;margin-top:-2px}
  .province-back{margin-bottom:18px}
  .province-container{max-width:1020px;text-align:center}
  .province-container .screen-sub{margin-left:auto;margin-right:auto;max-width:700px}
  .province-container .province-back{display:inline-flex;float:left}
  .province-container .province-grid{text-align:left}
  .province-container .more-provinces-btn{display:inline-flex;margin:22px auto 0}
  .province-container .more-grid{margin-top:16px}
  .more-provinces-btn{margin-top:20px}
  .more-provinces-btn .more-sub{font-weight:400;color:var(--muted-2);font-size:12.5px}
  .more-grid{margin-top:14px}
  .legend-single{color:#085041;font-weight:700}
  .legend-double{color:#5b21b6;font-weight:700}
  .age-blocked-text{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:12px}
  .province-card.province-card-disabled{cursor:default}
  .province-card.province-card-disabled:hover{border-color:var(--border);transform:none}
  .province-card.province-card-disabled .province-name,
  .province-card.province-card-disabled .province-code{opacity:.5}
  .province-stock-note{font-size:11.5px;color:var(--muted-2);line-height:1.4}

  /* ---------- Stamp request screen ---------- */
  .stamp-container{max-width:660px}
  .stamp-card{padding:32px}
  .stamp-section-heading{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:26px 0 14px}
  .stamp-section-heading:first-child{margin-top:0}
  .chip-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .check-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
  .check-chip:hover{border-color:var(--muted-2)}
  .check-chip.checked{background:rgba(13,148,136,.12);border-color:var(--accent);color:var(--accent-dark)}
  .stamp-hint{font-size:12px;color:var(--muted-2);margin-top:8px}
  .stamp-success{text-align:center;padding:24px 8px}
  .stamp-success-icon{color:var(--accent);display:inline-flex}
  .stamp-success .screen-heading{text-align:center}
  .stamp-success .screen-sub{text-align:center;margin-left:auto;margin-right:auto}
  .upload-drop{border:2px dashed var(--border);border-radius:12px;padding:22px;text-align:center;background:var(--panel-2);transition:border-color .15s,background .15s}
  .upload-drop-title{margin:0 0 10px;font-size:14px;font-weight:600}
  .upload-drop.dragover{border-color:var(--accent);background:rgba(13,148,136,.06)}
  .upload-drop input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
  .upload-help{font-size:12px;color:var(--muted-2);line-height:1.5;margin-top:8px}
  .file-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .file-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:7px 9px 7px 12px;background:#fff;border:1px solid var(--border);border-radius:999px;font-size:12px}
  .file-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}
  .file-remove{border:none;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
  .attest-label{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--text)}
  .attest-label input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--accent)}

  /* ---------- Order screen: preset picker + order sheet ---------- */
  .panel-title{font-size:16px;font-weight:700;margin:0 0 14px}
  .search-box{margin-bottom:16px}
  .static-value{padding:11px 0;color:var(--muted);font-size:13.5px}
  .segmented{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--panel-2);padding:4px;border-radius:10px;border:1px solid var(--border)}
  .segmented button{flex-shrink:0;padding:8px 14px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-weight:700;cursor:pointer;font-size:13px}
  .segmented button.active{background:var(--accent);color:#ffffff}
  .ratio-fixed-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .ratio-chip-fixed{padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--muted);font-weight:700;font-size:13px;cursor:default}
  .ratio-fixed-suffix{font-size:12px;color:var(--muted-2)}
  .flavor-empty{color:var(--muted);font-size:13.5px;padding:20px 4px;text-align:center}

  body.order-screen{overflow:hidden}
  body.order-screen #app{height:100dvh;overflow:hidden}
  .order-shell{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .order-notice-wrap{flex-shrink:0;padding:0 24px}
  .order-notice-wrap .status-box{max-width:1180px;margin:10px auto}
  .notice-strip{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;
    background:rgba(124,58,237,.06);border-bottom:1px solid rgba(124,58,237,.25);color:#5b21b6;
    padding:9px 24px;font-size:13px;line-height:1.4;
  }
  .notice-dismiss{flex-shrink:0;border:none;background:transparent;color:#5b21b6;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}

  .order-panes{flex:1;min-height:0;display:flex;overflow:hidden}
  .order-left{flex:0 0 40%;min-width:0;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border-soft)}
  .left-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 0}
  .left-pane-head .panel-title{margin:0}
  .preset-bar{flex-shrink:0;padding:14px 24px 16px;border-bottom:1px solid var(--border-soft)}
  .preset-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
  .preset-row:last-child{margin-bottom:0}
  .preset-label{width:64px;flex-shrink:0;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .addqty-wrap{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
  .addqty-stepper{display:inline-flex;align-items:center;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:2px}
  .addqty-stepper input[type=number]{width:48px;height:26px;text-align:center;padding:2px 1px;border:none;background:transparent;font-size:13.5px;font-weight:700;color:var(--text)}
  .addqty-stepper input[type=number]:focus{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
  .addqty-hint{font-size:11.5px;color:var(--muted-2)}
  .flavor-palette{flex:1;min-height:0;overflow-y:auto;padding:16px 24px 24px}
  .flavor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
  .flavor-chip{
    position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
    background:#ffffff;border:1px solid var(--border);border-radius:10px;padding:12px 10px;min-height:44px;
    font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s,transform .08s;
  }
  .flavor-chip:hover{border-color:var(--accent)}
  .flavor-chip:active{transform:translateY(1px)}
  /* Tap confirmation that moves nothing: the chip itself answers. */
  @keyframes chipTap{0%{background:rgba(13,148,136,.30);border-color:var(--accent)}100%{background:#ffffff}}
  .flavor-chip.tapped{animation:chipTap 600ms ease-out}
  .flavor-chip.tapped.has-order{animation:chipTap 600ms ease-out}
  .flavor-chip.has-order{border-color:rgba(13,148,136,.4);background:rgba(13,148,136,.04)}
  .flavor-chip:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
  .flavor-ban-notice{font-size:12.5px;color:var(--muted);margin:-6px 0 12px;line-height:1.4}
  .chip-badge{
    position:absolute;top:-7px;right:-7px;display:inline-flex;align-items:center;gap:3px;
    background:var(--accent);color:#ffffff;font-size:10.5px;font-weight:800;border-radius:999px;
    padding:2px 7px 2px 5px;line-height:1.3;box-shadow:0 1px 3px rgba(24,37,36,.2);
  }
  .chip-dot{width:5px;height:5px;border-radius:50%;background:#ffffff}

  .order-right{flex:0 0 60%;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--panel)}
  .sheet-header{display:none}
  .sheet-toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px 5px;border-bottom:1px solid var(--border-soft)}
  .sheet-hint{font-size:11px;line-height:1.4;color:var(--muted)}
  .sheet-toolbar .btn{flex-shrink:0}
  .line-select{width:15px;height:15px;margin:0;accent-color:var(--accent);cursor:pointer}
  .line-select-hit{display:flex;align-items:center;justify-content:center;width:20px;height:24px}
  .sheet-cols .select-all-box{vertical-align:middle}
  /* Dragging down the tick column must not drag a text selection with it. */
  .sheet-lines.drag-selecting{user-select:none;-webkit-user-select:none}
  .sheet-line.selected{background:rgba(13,148,136,.08)}
  .bulk-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:7px 16px;background:rgba(13,148,136,.09);border-top:1px solid rgba(13,148,136,.3)}
  .bulk-count{font-size:12.5px;font-weight:700;color:var(--text)}
  .bulk-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .bulk-actions input[type=number]{width:72px;height:28px;padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:#ffffff;color:var(--text);font-size:13px;font-weight:700;text-align:center}
  .bulk-actions input[type=number]:focus{outline:2px solid var(--accent);outline-offset:1px}
  /* The -/+ buttons replace the native spinners, which are too cramped to hit at this size. */
  .qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button,
  .addqty-stepper input::-webkit-outer-spin-button,.addqty-stepper input::-webkit-inner-spin-button,
  .bulk-actions input::-webkit-outer-spin-button,.bulk-actions input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .qty-input,.addqty-stepper input[type=number],.bulk-actions input[type=number]{-moz-appearance:textfield;appearance:textfield}
  .sheet-lines{flex:1;min-height:0;overflow-y:auto;padding:4px 16px}
  .sheet-empty{color:var(--muted);font-size:13.5px;padding:32px 4px;text-align:center}
  /* scroll-margin keeps a line clear of the sticky column header when it is scrolled into view. */
  .sheet-line{display:grid;grid-template-columns:20px minmax(0,1.4fr) 58px 42px 52px 44px 104px 70px 24px;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--border-soft);border-radius:6px;scroll-margin-top:30px;scroll-margin-bottom:6px}
  .sheet-cols{display:grid;grid-template-columns:20px minmax(0,1.4fr) 58px 42px 52px 44px 104px 70px 24px;gap:6px;padding:7px 0 5px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:2}
  .sheet-province-summary span:last-child{text-align:right}
  .sheet-cols .num{text-align:center}
  .sheet-cols .end{text-align:right}
  .sl-col{font-size:12px;color:var(--muted);white-space:nowrap;text-align:center}
  .sheet-line-info{min-width:0}
  .sheet-line:last-child{border-bottom:none}
  /* An added line is scrolled into view and flashes yellow, so a tap on the far-left palette is
     visibly answered on the far-right sheet. */
  @keyframes lineFlash{0%,14%{background:rgba(250,204,21,.8)}100%{background:transparent}}
  .sheet-line.flash{animation:lineFlash 1200ms ease-out}
  /* The global reduced-motion rule cuts every animation to 0.01ms, which would leave those
     users with no answer at all. Give them a static highlight instead; it clears on the next render. */
  @media (prefers-reduced-motion:reduce){
    .sheet-line.flash{background:rgba(250,204,21,.5)}
  }
  .sheet-line-name{font-weight:600;font-size:13px}
  .sheet-line-attrs{display:none;font-size:12px;color:var(--muted-2);margin-top:2px}
  .sheet-line-right{display:contents}
  .sheet-line-qty{display:inline-flex;align-items:center;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:2px}
  .qty-btn{width:24px;height:24px;border-radius:5px;border:none;background:transparent;color:var(--text);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .qty-btn:hover{background:#ffffff}
  .sheet-line .qty-input{width:34px;height:24px;text-align:center;padding:2px 1px;border:none;background:transparent;font-size:13px;font-weight:700}
  .qty-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
  .sheet-line-total{font-size:12.5px;font-weight:700;white-space:nowrap;min-width:52px;text-align:right}
  .line-remove{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:none;background:transparent;color:var(--muted-2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .line-remove:hover{background:var(--danger-bg);color:var(--danger)}

  .sheet-footer{flex-shrink:0;border-top:1px solid var(--border-soft);padding:8px 16px 10px;display:flex;flex-direction:column;gap:3px}
  .sheet-footer-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:22px;align-items:stretch}
  .sheet-footer-breakdown{display:flex;flex-direction:column;gap:2px}
  .sheet-footer-highlight{display:flex;flex-direction:column;justify-content:center;gap:4px;border-left:1px solid var(--border-soft);padding:2px 2px 2px 22px}
  .sheet-footer-highlight .sheet-totals-row{font-size:13px;color:var(--text)}
  .sheet-totals-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
  .sheet-footer-highlight .sheet-totals-row.grand{align-items:baseline;font-size:18px;font-weight:800;line-height:1.1;letter-spacing:-.2px;margin-bottom:3px}
  .sheet-footer-highlight .sheet-totals-row.grand span:last-child{font-size:22px;letter-spacing:-.45px}
  .moq-wrap{margin:2px 0 4px}
  .moq-status{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--muted)}
  .moq-status strong{color:var(--text);white-space:nowrap}
  .sheet-footer-highlight .moq-status{align-items:baseline;font-size:12.5px;line-height:1.25}
  .sheet-footer-highlight .moq-status strong{font-size:13.5px}

  .mobile-order-bar{display:none}

  /* ---------- Phone: one continuous page ----------
     The order used to live in a full-screen sheet behind a "View order" button, so building an
     order meant tapping, opening a sheet, closing it, tapping again. John, 2026-08-22: the
     add-a-line controls and the flavours must all be on screen at the top, the lines sit below,
     and you scroll down to review and place the order. So the two panes simply stack and the
     page scrolls as one. */
  @media (max-width:860px){
    body.order-screen{overflow:auto}
    body.order-screen #app{height:auto;overflow:visible}
    /* The clearance grows with the iPhone home-indicator inset so the final action can always
       scroll completely above the fixed tally. */
    .order-shell{overflow:visible;padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
    .order-panes{flex-direction:column;overflow:visible;min-height:0}
    .order-left{flex:0 0 auto;border-right:none;min-height:0}
    .flavor-palette{flex:0 0 auto;overflow:visible;min-height:0;padding-bottom:18px}
    .order-right{
      flex:0 0 auto;min-height:0;position:static;transform:none;
      border-top:8px solid var(--panel-2);
    }
    .sheet-lines{flex:0 0 auto;overflow:visible;min-height:0}
    .sheet-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 6px}
    .sheet-header .panel-title{margin:0;font-size:15px}
    .mobile-order-bar{
      display:flex;align-items:center;justify-content:space-between;gap:14px;
      position:fixed;left:0;right:0;bottom:0;z-index:30;background:#ffffff;
      border-top:1px solid var(--border-soft);padding:10px calc(16px + env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));box-shadow:0 -6px 18px rgba(24,37,36,.08);
    }
    .mobile-order-summary{font-size:13.5px;font-weight:700;color:var(--muted)}
    .mobile-order-total{font-size:16px;font-weight:800;letter-spacing:-.2px}
    .sheet-line{display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;gap:12px}
    .sl-col{display:none}
    .sheet-cols{display:none}
    .sheet-line-attrs{display:block}
    .line-select{flex:0 0 15px}
    .sheet-line > .sheet-line-info{flex:1 1 calc(100% - 30px);min-width:0}
    /* Tab order and shift-click are pointer/keyboard affordances; on a phone the hint is just
       three lines of permanently lost sheet height. */
    .sheet-hint{display:none}
    .sheet-toolbar{padding:6px 16px;justify-content:flex-end}
    .bulk-bar{padding:8px 16px}
    .sheet-line-attrs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .qty-stepper input[type=number]{width:64px}
    .sheet-footer-summary{display:flex;flex-direction:column;gap:3px}
    .sheet-footer-highlight{border-left:0;border-top:1px solid var(--border-soft);padding:7px 0 1px}
    .sheet-footer-highlight .sheet-totals-row.grand{font-size:17px}
    .sheet-footer-highlight .sheet-totals-row.grand span:last-child{font-size:20px}
  }


  /* ---------- Phone layout ----------
     Measured on a 402x874 iPhone viewport: the header stacked into four rows (251px) and the
     preset bar into five (320px), so the flavour palette did not start until y=678 of 874 and
     the buyer landed on a screen with almost no product on it. Everything below is phone-only;
     the desktop two-pane layout is untouched. Touch targets are raised to iOS size at the same
     time, the quantity and remove controls were 24px squares. */
  @media (max-width:640px){
    body.order-screen{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
    body.order-screen::before{content:"";position:fixed;z-index:100;top:0;left:0;right:0;height:env(safe-area-inset-top, 0px);background:var(--bg);pointer-events:none}
    .site-header{padding:calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px));gap:8px}
    .wordmark{gap:10px}
    .wordmark-img{height:34px}
    .wordmark-text{padding-left:10px}
    .wm-title{font-size:15px}
    .wordmark-text .wm-sub{display:none}
    .header-right{gap:8px}
    .header-nav{order:2;gap:2px}
    .nav-btn{padding:7px 8px;font-size:13px}
    /* Province and account chips share one row instead of taking one each. */
    .province-chip{gap:6px;padding:4px 5px 4px 10px;font-size:12px;flex:1 1 auto;min-width:0}
    .province-chip-copy{min-width:0}
    .province-chip .name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .province-chip .badge{display:none}
    .province-chip .btn-sm{padding:6px 9px;font-size:12px;white-space:nowrap}
    .account-chip{padding:4px 10px 4px 4px;gap:7px;max-width:none;flex:0 1 auto;min-width:0}
    .account-avatar{width:26px;height:26px;font-size:12px}
    .account-email{display:none}
    .account-name{max-width:110px}

    .left-pane-head{padding:10px 16px 0}
    .left-pane-head .panel-title{font-size:15px}
    .preset-bar{padding:10px 16px 12px}
    .preset-row{gap:8px;margin-bottom:6px}
    .preset-label{width:auto;min-width:44px;font-size:10px;letter-spacing:.3px}
    .segmented{gap:3px;padding:3px}
    .segmented button{min-height:40px;padding:7px 10px;font-size:12.5px}
    .ratio-chip-fixed{min-height:40px;padding:7px 10px;font-size:12.5px}
    .addqty-stepper input[type=number]{height:40px}
    /* Safari zooms the viewport when a focused form control renders below 16px. */
    body.order-screen input[type=text],body.order-screen input[type=number]{font-size:16px}
    .addqty-hint{display:none}
    /* The old overlay needed a large bottom spacer. In the continuous page it only separated
       the flavour grid from the order lines. */
    .flavor-palette{padding:12px 16px 18px}
    .notice-strip{padding:8px 14px;font-size:12.5px}

    /* A phone line is a ledger row: identity, direct quantity, money, remove. The desktop
       stepper would consume a third of the row by itself, so its secondary +/- buttons are
       hidden while the numeric field stays directly editable. */
    .sheet-lines{padding:2px 16px 8px}
    .sheet-line{display:grid;grid-template-columns:40px minmax(0,1fr) 42px 54px 40px;gap:4px;row-gap:0;min-height:48px;padding:3px 0;border-radius:0;scroll-margin-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
    .sheet-line > .sheet-line-info{min-width:0}
    .sheet-line-name{font-size:12.5px;line-height:1.2;overflow-wrap:anywhere}
    .sheet-line-attrs{font-size:10.5px;line-height:1.2;margin-top:2px;white-space:normal;overflow:visible;text-overflow:clip}
    .sheet-line-right{display:contents}
    .sheet-line-qty{display:block;padding:0;border:0;background:transparent}
    .sheet-line-qty .qty-btn{display:none}
    .addqty-stepper .qty-btn{width:40px;height:40px;font-size:17px}
    .sheet-line .qty-input{width:42px;height:40px;padding:2px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);font-size:16px}
    .sheet-line-total{min-width:0;font-size:11.5px;letter-spacing:-.2px;text-align:right}
    .line-select-hit{width:40px;height:40px}
    .line-remove{width:40px;height:40px;font-size:19px}
    .line-select{width:18px;height:18px}
    .notice-dismiss{width:40px;height:40px;font-size:22px;display:flex;align-items:center;justify-content:center;margin:-8px -8px -8px 0}
    .sheet-toolbar{padding:4px 16px}
  }


  /* ---------- Phone review pass (Fable, 2026-08-22) ---------- */
  /* Rapid tapping is the core interaction on a phone, and without these a double tap on a chip
     selects its label or zooms the page instead of adding a second lot. */
  .flavor-chip,.qty-btn,.segmented button,.ratio-chip-fixed,.line-remove,.nav-btn,
  .btn,.line-select,.line-select-hit,.notice-dismiss{touch-action:manipulation;-webkit-user-select:none;user-select:none}

  @media (max-width:640px){
    /* The pre-submit table was 520px wide inside a 304px box, so Qty and the line totals, the
       two things a buyer checks, were the columns scrolled out of sight. Type, Stamp and Unit
       are all derivable from what remains, so they go instead. */
    .items-table{min-width:0;font-size:12px}
    .items-table th,.items-table td{padding-right:8px}
    .items-table .col-drop{display:none}

    /* iOS zooms the page whenever a focused field is under 16px. This covers every screen,
       not just the order builder: login, profile, notes, contact and the stamp request. */
    input[type=text],input[type=email],input[type=password],input[type=number],
    input[type=search],input[type=tel],select,textarea{font-size:16px}

    /* The fixed bar owns the running count and grand total. The sheet footer owns the price
       breakdown and MOQ state, so the same readout is not repeated back-to-back. */
    .sheet-bottle-count,.sheet-footer-highlight .sheet-totals-row.grand{display:none}

    /* With a long order, a checkbox ticked at the top revealed the bulk bar far below the fold.
       Pinning it above the tally keeps the action where the buyer is looking. */
    .bulk-bar{position:sticky;bottom:calc(52px + env(safe-area-inset-bottom,0px));z-index:20;
      box-shadow:0 -4px 14px rgba(24,37,36,.10)}
  }

  /* lineFlash has a reduced-motion fallback; chipTap did not, which left those users with no
     tap confirmation on the chip at all. */
  @media (prefers-reduced-motion:reduce){
    .flavor-chip.tapped{background:rgba(13,148,136,.30);border-color:var(--accent)}
  }

  .totals{border-top:1px solid var(--border);margin-top:6px;padding-top:14px;display:flex;flex-direction:column;gap:8px}
  .totals-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
  .totals-row.grand{color:var(--text);font-weight:800;font-size:17px;border-top:1px solid var(--border-soft);padding-top:10px;margin-top:4px}

  /* ---------- Quote / Summary ---------- */
  .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  @media (max-width:880px){.quote-grid{grid-template-columns:1fr}}
  .quote-box .totals-row{font-size:14.5px}
  .quote-note{font-size:12px;color:var(--muted-2);margin-top:14px;font-style:italic}
  .quote-province-block{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}
  .quote-province-block:last-of-type{border-bottom:none;padding-bottom:0;margin-bottom:6px}
  .quote-province-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin:0 0 10px;display:flex;align-items:center;gap:8px;color:var(--text)}
  .quote-province-spaced{margin-top:14px}
  .quote-province-totals{display:flex;flex-direction:column;gap:8px}
  .quote-grand-total{border-top:1px solid var(--border);padding-top:12px;margin-top:2px}
  .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:520px){.form-row-2{grid-template-columns:1fr}}
  .required-note{font-size:12px;color:var(--muted-2);margin:-6px 0 16px}
  .action-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

  .recap-section{margin-bottom:22px}
  .recap-section-tight{margin-bottom:6px}
  .recap-section h3{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 12px}
  .recap-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-bottom:1px solid var(--border-soft)}
  .recap-line:last-child{border-bottom:none}
  .recap-meta{color:var(--muted);font-size:12px;margin-top:2px}
  .table-scroll{overflow-x:auto}
  .summary-item-list{display:none}
  .items-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 4px;min-width:520px}
  .items-table th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--border)}
  .items-table td{padding:7px 10px 7px 0;border-bottom:1px solid var(--border-soft);white-space:nowrap}
  .items-table td:first-child{white-space:normal;font-weight:500}
  .items-table tr:last-child td{border-bottom:none}
  .items-table .num{text-align:right;padding-right:0}
  .items-table th.num{padding-right:0}
  .buyer-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;font-size:14px}
  .buyer-grid-spaced{margin-bottom:20px}
  .buyer-grid-wide{grid-column:1/-1}
  @media (max-width:600px){.buyer-grid{grid-template-columns:1fr}}
  @media (max-width:640px){
    .summary-container{padding:24px 14px 80px}
    .summary-card{padding:18px 16px}
    .summary-table-scroll{display:none}
    .summary-item-list{display:grid;gap:0;list-style:none;margin:0;padding:0}
    .summary-item{padding:9px 0;border-bottom:1px solid var(--border-soft)}
    .summary-item:last-child{border-bottom:none}
    .summary-item-main,.summary-item-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:12px}
    .summary-item-main{font-size:13px;font-weight:700}
    .summary-item-flavor{min-width:0;overflow-wrap:anywhere}
    .summary-item-total{white-space:nowrap;text-align:right}
    .summary-item-detail{margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--muted)}
    .summary-item-detail span:last-child{white-space:nowrap;font-weight:700;color:var(--text)}
  }
  .buyer-grid dt{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;margin-top:12px}
  .buyer-grid dd{margin:2px 0 0;white-space:pre-wrap}

  .order-notes-field{margin-top:20px}
  .notes-copy{white-space:pre-wrap;font-size:14px}
  .success-card{text-align:center;padding:38px}
  .success-heading-small{margin-top:14px}
  .success-heading{margin-top:16px}
  .success-copy{margin-left:auto;margin-right:auto}
  .actions-centered{justify-content:center}
  .password-help{margin-bottom:18px}
  .mailto-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}

  .step-back{margin-bottom:18px}
  .content-narrow{max-width:780px}
  .faq-list{display:grid;gap:14px}
  .faq-item h2{font-size:16px;margin:0 0 7px}
  .faq-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
  .profile-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:22px;align-items:start}
  @media (max-width:820px){.profile-grid{grid-template-columns:1fr}.site-header{padding:14px 18px}.header-right{width:100%;justify-content:space-between}.header-nav{order:2;width:100%;justify-content:center}}
  /* Keep the tighter phone padding later in the cascade than the shared tablet header. */
  @media (max-width:640px){
    .site-header{padding:calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px))}
    .nav-btn,.province-chip .btn-sm,.account-chip{min-height:40px}

    /* The phone header used to stack into four rows and cost about 195px before any
       product appeared. It is now two: identity, stamps and account share the top row,
       navigation sits under it. header-right dissolves so its three children become
       grid items of the header itself. */
    .site-header{
      display:grid;grid-template-columns:auto minmax(0,1fr) auto;
      grid-template-areas:"logo prov acct" "nav nav nav";
      align-items:center;gap:6px 10px;
    }
    .wordmark{grid-area:logo}
    .header-right{display:contents}
    .province-chip{grid-area:prov;min-width:0;overflow:hidden;padding:3px 4px 3px 10px;gap:6px}
    .province-chip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .province-chip .badge{display:none}
    .btn-word{display:none}
    .account-wrap{grid-area:acct;justify-self:end;min-width:0}
    /* These beat the base .account-chip rules, which are declared later in the file.
       On a phone the avatar plus caret is the whole affordance; the business name is
       already in the dropdown, and spending 100px on it crushes the stamp chip. */
    .site-header .account-chip{max-width:none;padding:5px 8px 5px 6px}
    .site-header .account-id{display:none}
    .header-nav{grid-area:nav;width:100%;justify-content:center;flex-wrap:wrap}
    /* The logo is the Avalon Vapor wordmark already; the word beside it is what makes
       the top row overflow on a 390px phone. */
    .wordmark-text{display:none}
  }
  .profile-email{padding:11px 13px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);font-size:14px;color:var(--muted)}
  .profile-provinces{display:flex;flex-wrap:wrap;gap:8px}
  .success-ref{font-size:34px;font-weight:800;letter-spacing:.5px;color:var(--accent-dark);margin:8px 0 14px}
  .honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

  /* ---------- Admin ---------- */
  .admin-container{max-width:1040px}
  .admin-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
  .admin-filter{display:flex;align-items:center;gap:10px}
  .admin-filter label{font-size:13px;font-weight:700;color:var(--muted)}
  .admin-filter select{width:auto;min-width:150px;background:var(--panel)}
  .admin-count{font-size:13px;color:var(--muted)}
  .admin-list{display:grid;gap:16px}
  .admin-card{padding:22px}
  .admin-card-pending{border-color:#e6b84b;background:linear-gradient(90deg,rgba(245,158,11,.075),var(--panel) 22%)}
  .admin-card>summary,.admin-order-card>summary{cursor:pointer;list-style:none}
  .admin-card>summary::-webkit-details-marker,.admin-order-card>summary::-webkit-details-marker{display:none}
  .admin-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .admin-card[open] .admin-card-head{margin-bottom:18px}
  .admin-card-title{font-size:18px;line-height:1.35;margin:0 0 4px;overflow-wrap:anywhere}
  .admin-card-email{font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
  .status-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
  .status-pending{background:#fef3c7;color:#92400e;border:1px solid #f5cf6a}
  .status-approved{background:#d1fae5;color:#065f46;border:1px solid #8dddbb}
  .status-denied{background:#e5e7eb;color:#4b5563;border:1px solid #cbd0d7}
  .history-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .history-list{display:flex;flex-direction:column;gap:14px}
  .history-card{padding:18px 20px}
  .history-card>summary{cursor:pointer;list-style:none}
  .history-card>summary::-webkit-details-marker{display:none}
  .history-card>summary::after{content:"View details";font-size:12px;color:var(--accent-dark);font-weight:700;margin-left:10px}
  .history-card[open]>summary::after{content:"Hide details"}
  .history-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
  .history-ref{font-weight:800;font-size:16px;letter-spacing:.3px}
  .history-date{font-size:12.5px;color:var(--muted);margin-top:2px}
  .history-head-right{display:flex;align-items:center;gap:10px}
  .history-total{font-weight:800;font-size:16px}
  .history-tracking{font-size:13.5px;margin:10px 0 4px;overflow-wrap:anywhere}
  .history-tracking a{color:#087f7a}
  .history-muted{color:var(--muted)}
  .history-notes{font-size:13px;margin-top:10px;white-space:pre-wrap}
  .history-details summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);margin:8px 0}
  .history-details[open] summary{margin-bottom:12px}
  .admin-orders-section{margin-top:34px}
  .admin-order-card{padding:16px 20px}
  .admin-order-controls{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
  .admin-paid-label{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;white-space:nowrap}
  .admin-order-controls input[type=text]{flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--border-soft);border-radius:9px;font-size:13.5px}
  .admin-order-saved{font-size:12.5px;color:#065f46;font-weight:700}
  .admin-order-notified{font-size:12.5px;font-weight:700}
  .admin-order-notified.success{color:#065f46}
  .admin-order-notified.failure{color:var(--danger)}
  .admin-tracking-field{margin:12px 0 0}
  .admin-tracking-field textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
  .admin-note-field{margin:12px 0 0}
  .admin-message{margin-top:14px;padding:16px;border:1px solid var(--border-soft);border-radius:12px;background:var(--panel-2)}
  .admin-message h4{margin:0 0 4px;font-size:15px}
  .account-wrap{position:relative}
  .account-chip{display:flex;align-items:center;gap:9px;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:999px;padding:5px 12px 5px 6px;font:inherit;cursor:pointer;max-width:260px}
  .account-chip:hover,.account-chip.open{border-color:var(--accent);background:var(--panel)}
  .account-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
  .account-id{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
  .account-name{font-size:13px;font-weight:700;color:var(--text);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .account-email{font-size:11px;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .account-caret{font-size:11px;color:var(--muted)}
  .account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--panel);border:1px solid var(--border-soft);border-radius:12px;box-shadow:0 12px 30px rgba(16,58,56,.16);padding:8px;z-index:60}
  .account-menu-head{font-size:11.5px;color:var(--muted);padding:8px 10px 10px;border-bottom:1px solid var(--border-soft);margin-bottom:6px;line-height:1.5;overflow-wrap:anywhere}
  .account-item{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer}
  .account-item:hover{background:var(--panel-2)}
  .account-item-danger{color:#a1343c;margin-top:4px;border-top:1px solid var(--border-soft);border-radius:0 0 8px 8px}
  .tax-warning{margin-top:10px;font-size:12.5px;color:#92400e;background:#fef3c7;border:1px solid #f5cf6a;border-radius:9px;padding:9px 11px;line-height:1.5}
  .tracking-chip{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:7px;padding:3px 8px;margin:2px 4px 2px 0}
  a.tracking-chip{color:#087f7a;text-decoration:none}
  a.tracking-chip:hover{border-color:var(--accent);text-decoration:underline}
  .history-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border-soft);border-radius:6px;padding:2px 6px;vertical-align:middle}
  .history-totals{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-soft)}
  .history-card .items-table{font-size:13px}
  .packing-slip{display:none}
  .admin-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;margin:0}
  .admin-detail{border-top:1px solid var(--border-soft);padding:10px 0;min-width:0}
  .admin-detail-wide{grid-column:1/-1}
  .admin-detail dt{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);margin-bottom:4px}
  .admin-detail dd{font-size:13.5px;line-height:1.55;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
  .admin-files{display:flex;flex-wrap:wrap;gap:8px}
  .admin-file{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:600;text-decoration:none}
  .admin-file:hover{border-color:var(--accent)}
  .admin-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--border-soft)}
  .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
  .btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
  .admin-link-result{margin-top:14px;padding:13px;border-radius:10px;background:rgba(13,148,136,.07);border:1px solid rgba(13,148,136,.23)}
  .admin-link-result h4{font-size:13px;margin:0 0 8px}
  .admin-link-row{display:flex;gap:8px;align-items:stretch}
  .admin-link-row input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:var(--panel);min-width:0}
  .admin-email-status{font-size:12.5px;color:var(--muted);margin-top:8px}
  .admin-email-status.sent{color:#087669}
  .admin-copy-status{font-size:12px;color:var(--accent-dark);margin-top:6px;min-height:18px}
  .admin-empty{text-align:center;padding:38px 24px;color:var(--muted)}
  @media (max-width:650px){
    .admin-details{grid-template-columns:1fr}
    .admin-detail-wide{grid-column:auto}
    .admin-card-head{align-items:flex-start}
    .admin-link-row{flex-direction:column}
  }

  @media print{
    @page{size:auto;margin:14mm}
    body{background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif}
    #app{display:none!important}
    .packing-slip{display:block!important}
    .packing-slip-document{font-size:11pt;line-height:1.35}
    .packing-slip-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:20px}
    .packing-brand{font-size:22pt;font-weight:800;letter-spacing:.2px}
    .packing-subtitle{font-size:11pt;text-transform:uppercase;letter-spacing:1.2px;margin-top:3px}
    .packing-reference{text-align:right;display:flex;flex-direction:column;gap:4px}
    .packing-reference strong{font-size:16pt}
    .packing-meta{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;margin-bottom:22px}
    .packing-meta h2,.packing-notes h2{font-size:9pt;text-transform:uppercase;letter-spacing:.8px;margin:0 0 7px}
    .packing-meta p,.packing-notes p{margin:0;white-space:pre-wrap}
    .packing-meta dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0}
    .packing-meta dt{font-weight:700}
    .packing-meta dd{margin:0}
    .packing-table{width:100%;border-collapse:collapse;margin:0 0 22px}
    .packing-table th{font-size:8.5pt;text-transform:uppercase;letter-spacing:.5px;text-align:left;border-bottom:2px solid #111;padding:7px 6px}
    .packing-table td{border-bottom:1px solid #bbb;padding:8px 6px;vertical-align:top}
    .packing-table tr{break-inside:avoid}
    .packing-table td span{font-size:9pt;color:#333}
    .packing-qty{font-size:13pt;font-weight:800;width:52px}
    .packing-notes{border:1px solid #999;padding:10px 12px;margin:0 0 14px;break-inside:avoid}
    .order-print-totals{width:48%;margin:0 0 20px auto;break-inside:avoid}
    .order-print-totals>div{display:flex;justify-content:space-between;gap:20px;padding:4px 0}
    .order-print-grand{border-top:2px solid #111;margin-top:4px;padding-top:8px!important;font-size:13pt}
    .packing-footer{display:flex;justify-content:space-between;gap:24px;margin-top:36px;padding-top:12px;border-top:1px solid #777}
  }