:root{
    --bg:#111110;
    --panel:#1a1a18;
    --panel-2:#202020;
    --line:#3a3a38;
    --cream:#f2ecd9;
    --cream-dim:#a8a8a3;
    --ink:#151410;
    --paper:#ffffff;
    --danger:#c9573f;
    --gold:#c9a35c;
    --gold-dim:#8a7647;
    /* Rounded, card-based look (v1.44) — replaces the earlier sharp
       2px corners everywhere. --radius for cards/fieldsets/modals,
       --radius-sm for buttons/inputs/pills. */
    --radius:16px;
    --radius-sm:10px;
  }
  *{box-sizing:border-box;}
  /* Hard guarantee against any sideways scroll/swipe, regardless of which
     sub-pixel rounding or safe-area quirk might otherwise cause a few px
     of horizontal overflow on a real phone — nothing in this app is meant
     to scroll horizontally, so this never clips real content. */
  html,body{overflow-x:hidden;max-width:100%;}
  body{
    margin:0;color:var(--cream);font-family:'Work Sans',sans-serif;
    background-color:var(--bg);
    background-image:
      linear-gradient(180deg, rgba(10,10,9,.72), rgba(10,10,9,.72)),
      url('../assets/background.jpg');
    background-size:auto, 1100px auto;
    background-repeat:repeat, repeat;
    background-attachment:fixed, fixed;
  }
  h1,h2,h3,.label-font{font-family:'Oswald',sans-serif;letter-spacing:.02em;}

  /* min-height:100vh (fixed) makes a fixed bottom bar jump/disappear as
     Safari's own toolbar shows and hides on iOS — 100dvh tracks the real
     visible viewport instead, so the bar stays put without needing a
     scroll to "settle" into place. vh stays as the fallback for browsers
     that don't support dvh yet. */
  .appshell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
  /* Hidden by default (desktop keeps its normal masthead logo); shown only
     under 760px, see the mobile block near the end of this file. */
  .mobile-watermark{display:none;}
  .masthead{display:flex;align-items:center;gap:12px;padding:12px 22px;background:#0a0a09;border-bottom:1px solid var(--line);flex:0 0 auto;}
  .masthead .mh-brand{display:flex;align-items:center;gap:12px;order:1;}
  .masthead img{height:32px;width:auto;display:block;}
  .masthead .wordmark{display:flex;flex-direction:column;line-height:1.2;}
  .masthead .wordmark .name{font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);}
  .masthead .wordmark .tag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);}

  .tabbar{display:flex;gap:2px;padding:0 22px;background:#0d0d0c;border-bottom:1px solid var(--line);overflow-x:auto;flex:0 0 auto;}
  .tabbtn{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    padding:11px 16px;color:var(--cream-dim);background:none;border:none;border-bottom:2px solid transparent;
    cursor:pointer;white-space:nowrap;}
  .tabbtn:not(.disabled):not(.active):hover{color:var(--cream);background:rgba(242,236,217,.05);}
  .tabbtn.active{color:var(--cream);border-bottom-color:var(--cream);}
  .tabbtn.disabled{color:#5c5c59;cursor:not-allowed;}
  .soon{font-size:8.5px;letter-spacing:.06em;background:#262623;color:#8a8a86;padding:2px 6px;
    border-radius:10px;margin-left:8px;vertical-align:1px;text-transform:uppercase;}
  .tabbar-divider{flex:0 0 auto;width:1px;margin:9px 6px;background:var(--line);}
  .tabbtn-shop{color:var(--gold);}
  .tabbtn-shop:hover{color:var(--gold);background:rgba(201,163,92,.1);}
  .tabbtn-shop.active{color:var(--gold);border-bottom-color:var(--gold);}

  .install-modal{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:96;
    display:flex;align-items:center;justify-content:center;
    background:rgba(8,8,7,.72);padding:22px;
  }
  .install-modal[hidden]{display:none;}
  .install-modal-card{
    position:relative;width:360px;max-width:100%;background:var(--panel);
    border:1px solid var(--line);border-radius:var(--radius);padding:34px 26px 28px;
    text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px #48473f;
  }
  .install-modal-close{
    position:absolute;top:8px;right:10px;background:none;border:none;
    color:var(--cream-dim);font-size:22px;line-height:1;cursor:pointer;padding:6px;
  }
  .install-modal-close:hover{color:var(--cream);}
  .install-modal-logo{height:44px;width:auto;margin:0 auto 16px;display:block;}
  .install-modal-card h2{margin:0 0 10px;color:var(--cream);font-size:18px;}
  .install-modal-text{margin:0 0 22px;color:var(--cream-dim);font-size:13.5px;line-height:1.55;}
  .install-modal-btn{width:auto;padding:11px 26px;margin:0;}

  /* ---- Mobile bottom tab bar (replaces the horizontal .tabbar under 760px) ---- */
  :root{ --mb-h: 60px; }
  .mobile-bottombar{
    display:none;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    grid-template-columns:repeat(5,1fr);
    background:#0a0a09;border-top:1px solid var(--line);
    /* left/right insets keep the outer icons clear of the rounded corners /
       camera-cutout curvature on real phones — without these the first and
       last items sit exactly under the curve and read as half-clipped. */
    padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
  .mb-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:var(--mb-h);min-width:0;padding:8px 1px 0;background:none;border:none;cursor:pointer;
    color:#6e6e6a;font-family:'Oswald',sans-serif;font-size:8.8px;letter-spacing:.02em;text-transform:uppercase;
    border-top:2px solid transparent;
  }
  .mb-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mb-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 auto;}
  .mb-item.active{color:var(--gold);border-top-color:var(--gold);}
  .mb-item.active svg{stroke:var(--gold);}

  .more-sheet{position:fixed;inset:0;z-index:90;}
  .more-sheet[hidden]{display:none;}
  .more-sheet-scrim{position:absolute;inset:0;background:rgba(8,8,7,.72);}
  .more-sheet-card{
    position:absolute;left:0;right:0;bottom:0;
    background:var(--panel);border-top:1px solid var(--line);border-radius:10px 10px 0 0;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 40px rgba(0,0,0,.5);
  }
  .more-sheet-handle{width:36px;height:4px;border-radius:var(--radius-sm);background:var(--line);margin:4px auto 10px;}
  .more-sheet-item{
    display:flex;align-items:center;gap:14px;width:100%;padding:15px 24px;
    background:none;border:none;cursor:pointer;text-align:left;
    color:var(--cream);font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  }
  .more-sheet-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 auto;}
  .more-sheet-item:active{background:rgba(242,236,217,.06);}

  .app{flex:1 1 auto;min-height:0;grid-template-columns:340px 1fr;}
  .tabpanel{display:none;}
  .tabpanel.active{display:grid;}
  .controls{background:var(--panel);border-right:1px solid var(--line);padding:18px 20px 60px;overflow-y:auto;position:relative;z-index:1;}
  .sub{color:var(--cream-dim);font-size:12.5px;margin:0 0 20px;line-height:1.5;}
  fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 16px;margin:0 0 16px;background:var(--panel-2);}
  legend{font-family:'Oswald',sans-serif;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cream-dim);padding:0 6px;}
  label{display:block;font-size:12.5px;color:var(--cream-dim);margin:10px 0 5px;}
  label:first-of-type{margin-top:2px;}
  select,input[type=text],input[type=number]{
    width:100%;background:#0c0c0a;border:1px solid var(--line);color:var(--cream);
    padding:10px 12px;border-radius:var(--radius-sm);font-family:'IBM Plex Mono',monospace;font-size:13px;
    transition:border-color .15s,box-shadow .15s;
  }
  select{
    appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  }
  select:hover,input[type=text]:hover,input[type=number]:hover{border-color:#57564d;}
  select:focus,input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,92,.22);}

  /* ---- Aanvinkvelden, keuzerondjes en schuifregelaars (app-breed, modern/flat) ---- */
  input[type=checkbox]{
    appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:0 0 19px;
    border:1.5px solid #57564d;border-radius:5px;background:#0c0c0a;cursor:pointer;
    position:relative;vertical-align:-4px;transition:background .15s,border-color .15s;
  }
  input[type=checkbox]:hover{border-color:var(--cream-dim);}
  input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold);}
  input[type=checkbox]:checked::after{
    content:'';position:absolute;left:6px;top:2px;width:5px;height:9px;
    border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(40deg);
  }
  input[type=radio]{
    appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 18px;
    border:1.5px solid #57564d;border-radius:50%;background:#0c0c0a;cursor:pointer;
    position:relative;vertical-align:-4px;transition:border-color .15s;
  }
  input[type=radio]:hover{border-color:var(--cream-dim);}
  input[type=radio]:checked{border-color:var(--gold);}
  input[type=radio]:checked::after{
    content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--gold);
    border-radius:50%;transform:translate(-50%,-50%);
  }
  input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;cursor:pointer;
    background:linear-gradient(to right, var(--gold) 0%, var(--gold) var(--range-pct,50%), #3a3a38 var(--range-pct,50%), #3a3a38 100%);
    outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:18px;height:18px;border-radius:50%;margin-top:0;
    background:var(--cream);border:3px solid var(--gold);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5);
  }
  input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#3a3a38;}
  input[type=range]::-moz-range-progress{height:4px;border-radius:2px 0 0 2px;background:var(--gold);}
  input[type=range]::-moz-range-thumb{
    width:18px;height:18px;border-radius:50%;background:var(--cream);border:3px solid var(--gold);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5);
  }
  input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--gold);outline-offset:2px;}

  /* Radio/checkbox "pill"-toggles (Timer/Par, Handmatig/Willekeurig, etc.) —
     het onderliggende input blijft functioneel/toegankelijk maar onzichtbaar;
     het label zelf wordt de visuele pil (":has" i.p.v. extra JS/markup). */
  .dryfire-mode-toggle{
    display:flex;gap:4px;margin-bottom:12px;background:#0c0c0a;border:1px solid var(--line);
    border-radius:var(--radius-sm);padding:4px;flex-wrap:wrap;
  }
  .dryfire-mode-toggle label{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;
    font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:12px;
    color:var(--cream-dim);margin:0;padding:9px 10px;border-radius:calc(var(--radius-sm) - 3px);
    cursor:pointer;transition:background .15s,color .15s;line-height:1.3;
  }
  .dryfire-mode-toggle label:hover{color:var(--cream);}
  .dryfire-mode-toggle label:has(input:checked){background:var(--cream);color:var(--ink);}
  .dryfire-mode-toggle input[type=radio],.dryfire-mode-toggle input[type=checkbox]{
    position:absolute;opacity:0;width:0;height:0;pointer-events:none;
  }

  .row2{display:grid;grid-template-columns:1fr 88px;gap:8px;}
  .hint{font-size:11.5px;color:var(--cream-dim);margin-top:6px;line-height:1.5;}
  .warn{font-size:11.5px;color:#f0b39e;margin-top:6px;line-height:1.5;background:#3a2015;border:1px solid #5c3320;padding:7px 8px;border-radius:var(--radius-sm);}
  .summary{background:#0c0c0a;border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;margin:0 0 16px;}
  .summary .row{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:12.5px;padding:3px 0;color:var(--cream);}
  .summary .row span:first-child{color:var(--cream-dim);}
  .printbtn{
    width:100%;background:var(--cream);color:var(--ink);border:none;padding:14px;border-radius:var(--radius-sm);
    font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:14px;
    cursor:pointer;margin-top:4px;font-weight:600;
  }
  .printbtn:hover{background:#e2dabf;}
  .printnote{font-size:11px;color:var(--cream-dim);margin-top:8px;line-height:1.5;}
  .disclaimer{font-size:11px;color:var(--cream-dim);margin-top:22px;padding-top:14px;border-top:1px solid var(--line);line-height:1.5;}
  .datasrc{font-size:10.5px;color:#8f8f8a;margin-top:3px;line-height:1.5;}

  .preview{padding:26px 26px 60px;display:flex;flex-direction:column;align-items:center;overflow:auto;}
  .preview-toolbar{width:100%;max-width:900px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
  .preview-toolbar .t1{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:13px;color:var(--cream-dim);letter-spacing:.05em;}
  .page-shell{background:#000;box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px #48473f;overflow:hidden;}
  .page{background:var(--paper);}
  svg text{font-family:'IBM Plex Mono',monospace;}

  /* ---- Train tab ---- */
  .train-group-toggle{display:flex;gap:8px;margin-bottom:18px;}
  .train-group-btn{
    flex:1 1 50%;background:#0c0c0a;border:1px solid var(--line);color:var(--cream-dim);
    font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:600;
    padding:12px;border-radius:var(--radius-sm);cursor:pointer;
  }
  .train-group-btn:hover{color:var(--cream);border-color:#57564d;}
  .train-group-btn.active{background:var(--cream);color:var(--ink);border-color:var(--cream);}
  .train-list{display:flex;flex-direction:column;gap:6px;}
  .train-item{
    display:flex;align-items:flex-start;gap:9px;width:100%;
    background:#0c0c0a;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;
  }
  .train-item:hover{border-color:#57564d;}
  .train-item.selected{border-color:var(--gold-dim);background:rgba(201,163,92,.06);}
  .train-item-check{display:flex;align-items:center;padding-top:2px;cursor:pointer;flex:0 0 auto;}
  .train-item-check input{cursor:pointer;}
  .train-item-body{
    display:flex;flex-direction:column;gap:2px;text-align:left;flex:1 1 auto;min-width:0;
    background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit;
  }
  .train-item-name{font-family:'Oswald',sans-serif;font-size:13px;color:var(--cream);letter-spacing:.01em;}
  .train-item-body.previewing .train-item-name{color:var(--gold);}
  .train-item-desc{font-size:11px;color:var(--cream-dim);line-height:1.4;}
  .train-selectall{display:flex;gap:14px;margin:-6px 0 16px;}
  .train-selectall button{
    background:none;border:none;padding:0;color:var(--cream-dim);font-size:11px;
    text-decoration:underline;cursor:pointer;
  }
  .train-selectall button:hover{color:var(--cream);}
  .train-pagetabs{display:flex;gap:6px;margin:-4px 0 16px;flex-wrap:wrap;}
  .train-pagetab{
    flex:1 1 auto;background:#0c0c0a;border:1px solid var(--line);color:var(--cream-dim);
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;padding:7px 6px;border-radius:var(--radius-sm);cursor:pointer;
  }
  .train-pagetab:hover{color:var(--cream);}
  .train-pagetab.active{border-color:var(--gold);color:var(--gold);}
  .optic-print-batch{display:none;}
  .optic-print-batch .page{background:#fff;}
  .train-print-batch{display:none;}
  .dc-print-batch{display:none;}
  .dc-print-batch .page{background:#fff;}

  /* ---- Turret Tape ---- */
  .turret-print-batch{display:none;}
  .turret-print-batch .page{background:#fff;}
  .tt-manual-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
  .tt-manual-row span{font-size:12px;color:var(--cream-dim);}
  .tt-manual-row input{padding:6px 7px;font-size:12.5px;}
  .tt-manual-row .tt-manual-dist{width:64px;flex:0 0 64px;}
  .tt-manual-row .tt-manual-val{width:auto;flex:1 1 auto;min-width:0;}
  .tt-manual-remove{
    flex:0 0 auto;width:26px;height:26px;background:#0c0c0a;border:1px solid var(--line);color:var(--cream-dim);
    border-radius:var(--radius-sm);cursor:pointer;font-size:15px;line-height:1;
  }
  .tt-manual-remove:hover{color:var(--danger);border-color:var(--danger);}
  .tt-dist-check{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:12.5px;color:var(--cream);cursor:pointer;}
  .tt-dist-check input{cursor:pointer;flex:0 0 auto;}
  .tt-dist-val{color:var(--cream-dim);font-family:'IBM Plex Mono',monospace;font-size:11.5px;}
  .tt-extra-dist-row{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
  .tt-extra-dist-row .tt-extra-dist-input{padding:6px 7px;font-size:12.5px;width:80px;flex:0 0 80px;}
  .tt-extra-dist-row span{font-size:12px;color:var(--cream-dim);}
  .tt-extra-dist-row .printbtn{flex:1 1 auto;padding:8px 10px;font-size:12px;margin-top:0;}

  /* ---- Wapenprofielen / Dry Fire (simplepanel layout) ---- */
  .simplepanel{display:none;flex:1 1 auto;overflow-y:auto;}
  .simplepanel.active{display:flex;}
  .simplepanel-inner{width:100%;max-width:920px;margin:0 auto;padding:28px 26px 60px;}
  .simplepanel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
  .simplepanel-head h2{font-size:20px;color:var(--cream);margin:0 0 8px;}
  .simplepanel-head .sub{margin:0;max-width:560px;}
  .profile-newbtn{width:auto;padding:10px 18px;white-space:nowrap;}

  .dryfire-category{
    font-family:'Oswald',sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
    color:var(--cream-dim);margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);
  }
  .dryfire-category:first-of-type{margin-top:0;}

  .profile-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
  .profile-card{
    background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;
    text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;gap:8px;
  }
  button.profile-card{cursor:pointer;}
  button.profile-card:hover{border-color:var(--cream-dim);}
  .profile-card-disabled{opacity:.55;}
  .profile-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;}
  .profile-card-name{font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.02em;color:var(--cream);}
  .profile-card-caliber{font-size:11px;color:var(--cream-dim);text-transform:uppercase;letter-spacing:.04em;}
  .profile-card-meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--cream-dim);}
  .profile-card-rounds{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);}
  .profile-card-actions{display:flex;gap:8px;margin-top:2px;}
  .profile-card-actions button{
    flex:1;background:none;border:1px solid var(--line);color:var(--cream-dim);border-radius:var(--radius-sm);
    padding:6px 8px;font-size:11.5px;cursor:pointer;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  }
  .profile-card-actions button:hover{color:var(--cream);border-color:var(--cream-dim);}
  .profile-zerobtn{color:var(--gold) !important;border-color:rgba(201,163,92,.45) !important;}
  .profile-delete-section{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
  .profile-delete-bigbtn{width:100%;background:#a82a1c;color:#fff;border:none;border-radius:var(--radius-sm);padding:12px 16px;
    font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;}
  .profile-delete-bigbtn:hover{background:#c13322;}

  .profile-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px;}
  .profile-form-grid fieldset{margin:0;}
  .profile-form-actions{display:flex;gap:10px;align-items:center;margin-top:8px;}
  .profile-form-actions .printbtn{width:auto;padding:12px 22px;}
  .profile-cancelbtn{
    background:none;border:1px solid var(--line);color:var(--cream-dim);border-radius:var(--radius-sm);
    padding:11px 18px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;cursor:pointer;
  }
  .profile-cancelbtn:hover{color:var(--cream);border-color:var(--cream-dim);}
  .dryfire-backbtn{margin-top:18px;}

  .dope-section{margin-top:6px;}
  .dope-section h3{font-family:'Oswald',sans-serif;font-size:14px;color:var(--cream);margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em;}
  .dope-table{width:100%;border-collapse:collapse;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
  .dope-table th{text-align:left;color:var(--cream-dim);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
  .dope-table td{padding:5px 8px;border-bottom:1px solid #2a2a27;color:var(--cream);}
  .dope-table .dope-hold{color:var(--cream);font-weight:600;}
  .dope-table input{padding:6px 8px;font-size:12.5px;}

  .maintenance-section{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
  .maintenance-section h3{font-family:'Oswald',sans-serif;font-size:14px;color:var(--cream);margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em;}
  .maintenance-summary{display:flex;gap:22px;margin:14px 0;}
  .maintenance-stat{display:flex;flex-direction:column;gap:2px;}
  .maintenance-stat-num{font-family:'Oswald',sans-serif;font-size:26px;font-weight:600;color:var(--gold);line-height:1;}
  .maintenance-stat-label{font-size:11px;color:var(--cream-dim);text-transform:uppercase;letter-spacing:.03em;}
  .maintenance-add-row{display:grid;grid-template-columns:150px 140px 1fr auto;gap:8px;align-items:center;margin-bottom:10px;}
  .maintenance-add-row .printbtn{width:auto;padding:11px 16px;margin:0;font-size:12px;}
  .maintenance-resetbtn{font-size:11.5px;padding:9px 14px;margin-bottom:16px;}
  .maintenance-log-table{width:100%;border-collapse:collapse;margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
  .maintenance-log-table th{text-align:left;color:var(--cream-dim);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
  .maintenance-log-table td{padding:6px 8px;border-bottom:1px solid #2a2a27;color:var(--cream);}
  .maintenance-log-table .maintenance-row td{color:var(--gold-dim);font-style:italic;}
  .maintenance-delbtn{background:none;border:none;color:var(--cream-dim);cursor:pointer;font-size:15px;line-height:1;padding:2px 6px;}
  .maintenance-delbtn:hover{color:#f0b39e;}
  @media (max-width:640px){
    .maintenance-add-row{grid-template-columns:1fr;}
  }

  /* ---- Dry Fire session ---- */
  .dryfire-cta{width:auto;padding:12px 22px;margin-top:16px;}
  .dryfire-mode-fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 16px;margin:0 0 16px;background:var(--panel-2);}
  .dryfire-mode-toggle{display:flex;gap:18px;margin-bottom:12px;}
  .dryfire-mode-toggle label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cream);margin:0;}
  .dryfire-distance-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;}
  .dryfire-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cream);margin:0;background:#0c0c0a;border:1px solid var(--line);padding:7px 9px;border-radius:var(--radius-sm);}
  .ar-selectall{display:inline-flex;width:auto;margin-bottom:12px;}

  .dryfire-interval-toggle{flex-wrap:wrap;}
  .dryfire-session-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}

  /* ---- Dry Fire active stage (professional, high-contrast, readable at range) ---- */
  .dryfire-stage{
    background:#fff;color:#111;position:relative;box-sizing:border-box;
    display:flex;flex-direction:column;
    min-height:78vh;border-radius:var(--radius-sm);overflow:hidden;
  }
  .dryfire-stage:fullscreen{min-height:100vh;height:100vh;}
  .dryfire-stage-progress{position:absolute;top:0;left:0;right:0;height:5px;background:#e6e1d2;z-index:2;}
  .dryfire-stage-progress-bar{height:100%;background:#171510;width:100%;}
  .dryfire-stage-stop{
    position:absolute;top:18px;right:18px;background:#171510;color:#f2ecd9;border:none;z-index:2;
    border-radius:var(--radius-sm);padding:9px 16px;font-family:'Oswald',sans-serif;text-transform:uppercase;
    letter-spacing:.04em;font-size:12.5px;cursor:pointer;
  }
  .dryfire-stage-stop:hover{background:#000;}
  .dryfire-progress-badge{
    position:absolute;top:18px;left:18px;background:#f2ecd9;color:#171510;z-index:2;
    border-radius:var(--radius-sm);padding:7px 14px;font-family:'IBM Plex Mono',monospace;font-weight:600;
    letter-spacing:.03em;font-size:13px;
  }

  .dryfire-stage-body{flex:1 1 auto;display:flex;min-height:0;}

  .dryfire-stage-info{flex:0 0 auto;width:min(320px,34vw);display:flex;background:#fafaf7;border-right:1px solid #e2ded0;}
  .dryfire-stage-info-accent{flex:0 0 4px;background:#171510;}
  .dryfire-stage-info-inner{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:32px 28px;gap:18px;}
  .dryfire-stage-label{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#9a9a95;font-size:clamp(11px,1.1vw,13px);margin-bottom:-10px;}
  .dryfire-stage-distance{font-family:'Oswald',sans-serif;font-weight:700;color:#111;font-size:clamp(32px,4.4vw,56px);line-height:1;}
  .dryfire-stage-row{font-family:'IBM Plex Mono',monospace;color:#333;font-size:clamp(15px,1.8vw,22px);display:flex;gap:8px;align-items:baseline;padding-top:8px;border-top:1px solid #e2ded0;}
  .dryfire-stage-row span{color:#8a8a86;font-size:.62em;text-transform:uppercase;letter-spacing:.05em;min-width:5.2em;}
  .dryfire-stage-row strong{color:#111;font-weight:600;}
  .dryfire-stage-row em{color:#9a9a95;font-style:normal;font-size:.6em;}
  .dryfire-stage-reticle{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:#9a9a95;font-size:12px;margin-top:6px;}

  .dryfire-stage-target{flex:1 1 auto;display:flex;align-items:flex-end;justify-content:center;min-height:0;padding:28px;overflow:hidden;}
  .dryfire-ipsc-wrap{height:100%;max-height:64vh;display:flex;align-items:flex-end;transform-origin:center bottom;transition:transform .25s ease;}
  .dryfire-ipsc{height:100%;width:auto;}
  .dryfire-ipsc path{fill:#9a9a95;}
  .dryfire-ipsc-azone{fill:none;stroke:#4a4a47;stroke-width:2.5;stroke-dasharray:6,4;}

  /* ---- AR Training ---- */
  .ar-drill-card{cursor:pointer;display:block;}
  .ar-drill-card:hover{border-color:var(--cream-dim);}
  .ar-drill-card input[type=checkbox]{margin-right:8px;vertical-align:-2px;}

  .ar-prep-stage,.ar-countdown-stage,.ar-target-stage{align-items:center;justify-content:center;}
  .ar-prep-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:520px;padding:20px;}
  .ar-prep-name{font-family:'Oswald',sans-serif;font-size:clamp(28px,4vw,44px);color:#111;margin:0;}
  .ar-prep-steps{list-style:decimal;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:clamp(15px,1.8vw,19px);color:#333;padding-left:1.4em;margin:0;display:flex;flex-direction:column;gap:8px;}
  .ar-prep-steps li{padding-left:4px;}

  .ar-countdown-text{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.05em;font-size:clamp(64px,12vw,140px);color:#111;}
  .ar-countdown-standby{color:var(--danger);}
  .ar-countdown-stage .ar-countdown-text{animation:ac-countdown-in .2s ease;}
  @keyframes ac-countdown-in{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}

  .ar-target-stage{flex-direction:column;gap:18px;padding:28px 20px;}
  .ar-stopwatch{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(36px,6vw,64px);color:#111;flex:0 0 auto;}
  .ar-target-area{flex:0 0 auto;height:52vh;display:flex;align-items:flex-end;justify-content:center;width:100%;overflow:hidden;}
  .ar-target-row{display:flex;align-items:flex-end;justify-content:center;gap:24px;height:100%;}
  .ar-target-row .ar-target-wrap{height:100%;display:flex;align-items:flex-end;}
  .ar-target-row .dryfire-ipsc{height:100%;width:auto;}
  .ar-target-row .dryfire-ipsc path{fill:#9a9a95;}
  .ar-target-row .dryfire-ipsc-azone{fill:none;stroke:#4a4a47;stroke-width:2.5;stroke-dasharray:6,4;}
  .ar-target-row-3 .ar-target-wrap{max-width:30%;}
  .ar-done-btn{width:auto;padding:12px 28px;}
  .dryfire-stage > .ar-done-btn{align-self:center;margin:16px 0 20px;flex:0 0 auto;}

  @media (max-width: 760px){
    .ar-target-area{height:36vh;}
    .ar-target-row{gap:10px;}
    .ar-prep-steps{font-size:14px;}
    .dryfire-stage-body{flex-direction:column;}
    .dryfire-stage-info{width:100%;border-right:none;border-bottom:1px solid #e2ded0;}
    .dryfire-stage-info-inner{padding:20px 22px;gap:12px;}
    .dryfire-stage-row{padding-top:6px;}
    .dryfire-stage-target{flex:none;height:40vh;padding:16px;}
    .dryfire-ipsc-wrap{height:100%;max-height:100%;}
    .simplepanel-inner{padding:20px 16px 40px;}
    .app{grid-template-columns:1fr;}
    .controls{border-right:none;border-bottom:1px solid var(--line);padding-bottom:24px;}
    .masthead{padding:12px 16px;}
    .preview{padding:18px 12px 40px;}

    /* Bottom tab bar replaces the horizontal scrolling tabbar entirely */
    .tabbar{display:none;}
    .mobile-bottombar{display:grid;}
    /* Clearance so the fixed bottom bar never covers the last bit of
       content in any of the panel layouts (two-pane .app, single-column
       .simplepanel, .shop-panel each scroll independently). */
    .controls,.preview,.simplepanel,.shop-panel{
      padding-bottom:calc(var(--mb-h) + 24px + env(safe-area-inset-bottom,0px)) !important;
    }
  }

  /* ---- Shop ---- */
  .shop-panel{display:none;flex:1 1 auto;overflow-y:auto;}
  .shop-panel.active{display:flex;flex-direction:column;}

  /* Standing "drops happen occasionally, get first word via WhatsApp"
     banner — deliberately generic (not tied to the Custom Grip or any
     single product) so it still makes sense once there's more than one
     item in the shop. Sits above .shop-inner, same page on both mobile
     and desktop. */
  .shop-stayup{
    width:100%;max-width:1040px;margin:26px auto 0;padding:18px 22px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    background:var(--panel-2);border:1px solid var(--gold-dim);border-radius:var(--radius);
  }
  .shop-stayup-text{flex:1 1 320px;}
  .shop-stayup-kicker{
    display:block;font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:4px;
  }
  .shop-stayup-text p{margin:0;color:var(--cream-dim);font-size:13.5px;line-height:1.5;}
  .shop-stayup-btn{background:var(--gold);color:var(--ink);flex:0 0 auto;width:auto;padding:12px 22px;white-space:nowrap;}
  .shop-stayup-btn:hover{background:#dab672;}

  .shop-inner{
    width:100%;max-width:1040px;margin:0 auto;padding:32px 26px 10px;
    display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
  }

  .shop-viewer{
    position:relative;aspect-ratio:1;border:1px solid var(--line);
    background:
      radial-gradient(ellipse 55% 40% at 50% 80%, rgba(0,0,0,.09) 0%, rgba(0,0,0,0) 70%),
      radial-gradient(ellipse 120% 100% at 50% 18%, #fbfbfb 0%, #e7e7e7 45%, #cfcfcf 78%, #c2c2c2 100%);
    border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center;user-select:none;
  }
  .shop-viewer::after{
    content:'';position:absolute;left:50%;bottom:9%;width:42%;height:6%;
    background:radial-gradient(ellipse closest-side, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 75%);
    transform:translateX(-50%);pointer-events:none;
  }
  .shop-viewer-img{
    position:relative;z-index:1;width:78%;height:78%;object-fit:contain;pointer-events:none;
    filter:drop-shadow(0 16px 12px rgba(0,0,0,.26)) drop-shadow(0 2px 3px rgba(0,0,0,.16));
    will-change:transform;
  }
  .shop-viewer-placeholder{
    display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--cream-dim);font-size:12.5px;text-align:center;
  }
  .shop-viewer-placeholder[hidden]{display:none;}
  .shop-viewer-placeholder-icon{
    font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;letter-spacing:.04em;color:var(--gold-dim);
    border:1px dashed var(--line);border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  }
  .shop-viewer-hint{text-align:center;margin-top:10px;}

  .shop-kicker{font-family:'Oswald',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);}
  .shop-title{
    font-family:'Oswald',sans-serif;font-weight:700;font-size:34px;letter-spacing:.01em;
    color:var(--cream);margin:8px 0 10px;line-height:1.05;
  }
  /* Two-weight tagline (thin lead-in, bold punch word) — a compact stand-in
     for a full sentence, reads faster than the paragraph below it. */
  .shop-tagline{margin:0 0 16px;line-height:1.15;}
  .shop-tagline-lead{
    display:block;font-family:'Oswald',sans-serif;font-weight:400;font-size:15px;
    color:var(--cream-dim);letter-spacing:.02em;text-transform:uppercase;
  }
  .shop-tagline-punch{
    display:block;font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;
    color:var(--gold);letter-spacing:.01em;text-transform:uppercase;
  }
  .shop-desc{color:var(--cream-dim);font-size:13.5px;line-height:1.6;margin:0 0 20px;}

  .shop-hero-cta{background:var(--gold);color:var(--ink);margin:0 0 20px;}
  .shop-hero-cta:hover{background:#dab672;}

  /* Trust bar — short, spaced-out claims under the primary CTA, same role
     as the "100% MADE IN USA" row it's modeled after. */
  .shop-trustbar{
    display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 28px;padding-top:16px;
    border-top:1px solid var(--line);
  }
  .shop-trustbar span{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;
    text-transform:uppercase;color:var(--cream-dim);white-space:nowrap;
  }

  .shop-steps{margin-bottom:24px;}
  .shop-steps h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);margin:0 0 10px;}
  .shop-steps ol{margin:0;padding-left:20px;color:var(--cream-dim);font-size:13px;line-height:1.7;}

  .shop-order{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 18px;}
  .shop-order h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);margin:0 0 12px;}
  .shop-orderbtn{background:var(--gold);color:var(--ink);}
  .shop-orderbtn:hover{background:#dab672;}

  .shop-application{width:100%;max-width:1040px;margin:36px auto 0;padding:0 26px 50px;}
  .shop-application h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);margin:0 0 12px;}
  .shop-application-photo{
    aspect-ratio:16/7;background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;color:var(--cream-dim);font-size:12.5px;
  }

  /* ---- Shop: multi-view (landing / product detail / science) ----
     A plain "page" switch inside the Shop tab, not a real route — Shop is
     the only tab that goes more than one level deep, so it manages its own
     sub-navigation rather than adding a whole router for one flow. */
  .shop-view{display:none;}
  .shop-view.active{display:block;}
  .shop-page-inner{width:100%;max-width:720px;margin:0 auto;padding:32px 26px 60px;}
  .shop-view-detail .shop-application{width:auto;max-width:none;margin:28px 0 0;padding:0;}
  .shop-back{
    background:none;border:none;padding:0;margin-bottom:20px;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;
    font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--gold);
  }
  .shop-back:hover{color:#dab672;}
  .shop-desc-lg{font-size:14.5px;margin-bottom:26px;}
  /* Inline on the product-detail page, above "Wat je moet doen" — the
     conversion logic being: explain why it works before what to do and
     before the order form, not after. By the time someone's scrolled to
     "Bestellen" it's too late to still be making the case. */
  .shop-science{margin-bottom:26px;}
  /* A real button, not a plain heading — same family as .shop-orderbtn
     (gold fill) but sized down, since this opens an optional info panel
     rather than being the page's primary action. */
  .shop-science-toggle{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--gold);color:var(--ink);border:none;
    padding:9px 16px;border-radius:var(--radius-sm);margin:0;cursor:pointer;
    font-family:'Oswald',sans-serif;font-size:12.5px;font-weight:600;text-transform:uppercase;
    letter-spacing:.05em;
  }
  .shop-science-toggle:hover{background:#dab672;}
  .shop-science-chevron{font-size:10px;color:var(--ink);transition:transform .25s ease;}
  .shop-science-toggle[aria-expanded="true"] .shop-science-chevron{transform:rotate(180deg);}
  .shop-science-body{
    max-height:0;overflow:hidden;
    transition:max-height .3s ease, margin-top .3s ease;
  }
  .shop-science-toggle[aria-expanded="true"] + .shop-science-body{max-height:900px;margin-top:18px;}
  .shop-science-block{margin-bottom:20px;}
  .shop-science-block:last-child{margin-bottom:0;}
  .shop-science-block h4{
    font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;
    letter-spacing:.03em;color:var(--gold);margin:0 0 6px;
  }
  .shop-science-block p{color:var(--cream-dim);font-size:13.5px;line-height:1.65;margin:0;}
  @media (max-width:760px){
    .shop-inner{grid-template-columns:1fr;}
    .shop-viewer{aspect-ratio:4/3;}
    /* Desktop's single row (kicker+text on the left, button on the right)
       reads as one tall stacked column on a narrow phone — kicker, then a
       multi-line paragraph, then a full-width button underneath.
       display:contents lifts the kicker and paragraph out of
       .shop-stayup-text so all three pieces (kicker/button/text) become
       direct flex items of .shop-stayup, letting them be reordered
       independently: kicker and button share a tight top row (button
       right next to the heading, not stacked far below it), and the
       (now single-line) description sits underneath — noticeably
       shorter overall than the old three-block stack. */
    .shop-stayup{
      flex-wrap:wrap;align-items:center;gap:8px 12px;
      margin:16px auto 0;padding:14px 16px;
    }
    .shop-stayup-text{display:contents;}
    .shop-stayup-kicker{order:1;margin-bottom:0;}
    .shop-stayup-btn{order:2;padding:8px 14px;font-size:12.5px;}
    .shop-stayup-text p{order:3;flex:1 1 100%;font-size:12.5px;}
  }

  /* ---- Contact ---- */
  .contact-inner{display:flex;align-items:center;justify-content:center;min-height:60vh;}
  .contact-card{
    width:420px;max-width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
    padding:36px 30px;text-align:center;
  }
  .contact-logo{height:48px;width:auto;margin:0 auto 18px;display:block;}
  .contact-card h2{margin:0 0 8px;color:var(--cream);}
  .contact-card .sub{margin:0 0 20px;}
  .contact-email{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--gold);
    text-decoration:none;word-break:break-all;margin-bottom:18px;
  }
  .contact-email:hover{color:var(--cream);}
  .contact-copybtn{width:auto;padding:11px 22px;}
  .contact-copyhint{min-height:16px;margin-top:10px;}
  .contact-divider{height:1px;background:var(--line);margin:24px 0 20px;}
  .contact-idea-sub{margin:0 0 14px;}
  .contact-whatsapp-btn{
    display:inline-block;width:auto;background:#25D366;color:#0c0c0a;border:none;padding:11px 22px;
    border-radius:var(--radius-sm);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;
    font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;
  }
  .contact-whatsapp-btn:hover{background:#1ebe5b;}
  @media (max-width:480px){
    .contact-card{padding:30px 20px;}
    .contact-email{font-size:14px;}
  }

  /* ---- Shottimer ---- */
  .st-btn-secondary{background:transparent;border:1px solid var(--line);color:var(--cream);}
  .st-btn-secondary:hover{background:var(--panel-2);}
  .st-onboard-steps{display:flex;gap:6px;margin-bottom:16px;}
  .st-onboard-dot{width:10px;height:10px;border-radius:50%;background:var(--line);}
  .st-onboard-dot.active{background:var(--gold);}
  .st-onboard-dot.done{background:var(--cream-dim);}
  .st-onboard-nav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
  .st-onboard-nav .printbtn{width:auto;padding:11px 20px;margin-top:0;}
  .st-status-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:6px;}
  .st-status-list li{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--cream);}
  .st-status-ok{color:#6fcf7a;}
  .st-status-warn{color:var(--gold);}
  .st-status-bad{color:var(--danger);}
  .st-field{display:block;font-size:12.5px;color:var(--cream-dim);margin:14px 0 4px;}
  .st-field input[type=range]{width:100%;margin-top:6px;}
  .st-field input[type=number]{background:#0c0c0a;border:1px solid var(--line);color:var(--cream);border-radius:var(--radius-sm);padding:6px 8px;font-family:'IBM Plex Mono',monospace;}
  .st-field input[type=checkbox]{margin-right:6px;}
  .st-partime-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
  .st-partime-row input.st-partime-input{width:6em;flex:0 0 6em;}
  .st-partime-del{background:transparent;border:1px solid var(--line);color:var(--cream-dim);border-radius:var(--radius-sm);width:28px;height:28px;cursor:pointer;font-size:16px;line-height:1;}
  .st-partime-del:hover{color:var(--danger);border-color:var(--danger);}

  .st-running{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:18px;text-align:center;}
  .st-running-mode{font-family:'Oswald',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim);font-size:14px;}
  .st-running-time{font-family:'IBM Plex Mono',monospace;font-size:clamp(64px,16vw,140px);color:var(--cream);line-height:1;}
  .st-running-shots{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--gold);}
  .st-stop-btn{width:auto;padding:18px 44px;font-size:16px;background:var(--danger);color:var(--cream);margin-top:10px;}
  .st-stop-btn:hover{background:#a8482f;}

  .st-review-summary{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
  .st-review-summary div{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;flex:1 1 140px;}
  .st-review-summary span{display:block;font-size:11px;color:var(--cream-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
  .st-review-summary strong{font-family:'IBM Plex Mono',monospace;font-size:20px;color:var(--cream);}
  .st-review-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--cream);}
  .st-review-row:last-child{border-bottom:none;}
  .st-review-row.voided{color:var(--cream-dim);text-decoration:line-through;}
  .st-btn-void{background:transparent;border:1px solid var(--line);color:var(--cream-dim);border-radius:var(--radius-sm);padding:5px 10px;font-size:11px;cursor:pointer;white-space:nowrap;}
  .st-btn-void:hover{color:var(--cream);border-color:var(--cream-dim);}

  .st-debug-meter{position:relative;height:18px;background:#0c0c0a;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
  .st-debug-meter-fill{height:100%;width:0;background:var(--gold);transition:width .05s linear;}
  .st-debug-meter-threshold{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);}
  .st-debug-log{max-height:200px;overflow-y:auto;background:#0c0c0a;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:8px;}
  .st-debug-log-row{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--cream-dim);padding:2px 0;}
  #stDebugFileInput{color:var(--cream);font-size:12.5px;}

  @media print{
    body{background:#fff;}
    .masthead,.tabbar,.controls,.preview-toolbar,.gate,.changelog,.install-modal,.update-toast,.mobile-bottombar,.more-sheet{display:none !important;}
    .appshell{display:block;}
    .tabpanel{display:none !important;}
    .tabpanel.active{display:block !important;}
    .preview{padding:0;display:block;}
    .page-shell{box-shadow:none;transform:none !important;width:auto !important;height:auto !important;}
    .page{box-shadow:none;transform:none !important;transform-origin:initial !important;}

    /* Zero Optic Calculator: print a fresh build at printSafePaper() size
       (see js/app.js) instead of the live-preview page — iOS/Safari's print
       pipeline enforces its own non-removable margin, so a page built at
       the exact nominal A4 size overflowed onto a 2nd sheet. */
    #panel-optic .preview{display:none !important;}
    .optic-print-batch{display:block !important;}
    .optic-print-batch .page{box-shadow:none;margin:0 auto;}

    /* Train: print a batch of full-size pages (one per selected oefening/blad)
       instead of the single live-preview page, which still carries its
       on-screen fit-to-viewport scale. Same printSafePaper() margin-safety
       sizing as Zero Optic Calculator, for the same reason. */
    .train-panel .preview{display:none !important;}
    .train-print-batch{display:block !important;}
    .train-print-batch .page{box-shadow:none;margin:0 auto;page-break-after:always;}
    .train-print-batch .page:last-child{page-break-after:auto;}

    /* Dope Card: print a batch of small (armmapje-formaat) cards instead of
       the normal-layout setup screen. */
    #panel-dopecard .simplepanel-inner{display:none !important;}
    .dc-print-batch{display:block !important;}
    .dc-print-batch .page{box-shadow:none;margin:0 auto;page-break-after:always;}
    .dc-print-batch .page:last-child{page-break-after:auto;}

    /* Turret Tape: the only liggend (landscape) blad. Two things turned out
       not to survive iOS/Safari's actual print pipeline: @page{size:...
       landscape} is silently ignored there, AND a CSS `transform: rotate()`
       only rotates what's PAINTED — WebKit's print pagination still
       measures the un-rotated (pre-transform) LAYOUT box to decide where
       page breaks fall, so a landscape-sized box kept overflowing onto
       extra sheets no matter how it was visually rotated. So instead of
       rotating a landscape box with CSS at print time, ttBuildPrintSVG()
       in turret.js bakes the rotation directly into the SVG itself (an
       inner <g transform="rotate(90) ..."> inside a genuinely portrait-
       shaped outer <svg>) — the printed .page's LAYOUT size really is
       portrait A4, no CSS trickery for WebKit's pagination to ignore. */
    #panel-turret .preview{display:none !important;}
    .turret-print-batch{display:block !important;}
    .turret-print-batch .page{box-shadow:none;margin:0 auto;}
  }

  /* ---- Gate / pass phrase screen ---- */
  body:not(.unlocked) .appshell{display:none;}
  body.unlocked .gate{display:none;}
  .gate{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;justify-content:center;
    background-color:var(--bg);
    background-image:
      linear-gradient(180deg, rgba(10,10,9,.72), rgba(10,10,9,.72)),
      url('../assets/background.jpg');
    background-size:auto, 1100px auto;
    background-repeat:repeat, repeat;
    background-attachment:fixed, fixed;
  }
  .gate-card{
    width:300px;max-width:88vw;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:28px 26px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px #48473f;
  }
  .gate-logo{height:46px;width:auto;margin:0 auto 14px;display:block;}
  .gate-name{font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);}
  .gate-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:20px;}
  .gate-card label{display:block;font-size:11.5px;color:var(--cream-dim);margin:0 0 6px;text-align:left;}
  .gate-card input{
    width:100%;background:#0c0c0a;border:1px solid var(--line);color:var(--cream);
    padding:10px 10px;border-radius:var(--radius-sm);font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.1em;
    text-align:center;
  }
  .gate-card input:focus{outline:1px solid var(--cream);}
  .gate-btn{margin-top:14px;}
  .gate-error{font-size:11.5px;color:#f0b39e;min-height:16px;margin:10px 0 0;}

  /* "Vraag pass phrase aan" — for someone with the installed app but no
     pass phrase yet. Goes straight to WhatsApp with the request template
     ready to fill in there (no in-app fields) — a secondary/outline style
     below "Openen" so it doesn't compete with it. */
  .gate-request-btn{
    background:transparent;color:var(--cream);border:1px solid var(--line);
    margin-top:14px;
  }
  .gate-request-btn:hover{background:#1f1f1c;}
  .gate-request-hint{font-size:10.5px;color:var(--cream-dim);margin:10px 0 0;line-height:1.45;}

  /* ---- Version / changelog ---- */
  .versionlink{
    order:2;margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cream-dim);
    background:none;border:1px solid var(--line);border-radius:10px;padding:3px 10px;cursor:pointer;
  }
  .versionlink:hover{color:var(--cream);border-color:var(--cream-dim);}
  .masthead .refreshlink{order:3;margin-left:0;}
  .contact-version-row{display:flex;justify-content:center;gap:10px;margin-top:22px;}
  .contact-version-row .versionlink{order:0;margin-left:0;}
  .changelog{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90;display:none;align-items:flex-start;justify-content:flex-end;
    background:rgba(8,8,7,.45);padding:64px 22px 0 0;}
  .changelog.open{display:flex;}
  .changelog-card{width:340px;max-width:88vw;max-height:70vh;overflow-y:auto;background:var(--panel);
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px #48473f;}
  .changelog-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
    border-bottom:1px solid var(--line);font-family:'Oswald',sans-serif;text-transform:uppercase;
    letter-spacing:.05em;font-size:13px;color:var(--cream);}
  .changelog-close{background:none;border:none;color:var(--cream-dim);font-size:20px;line-height:1;cursor:pointer;}
  .changelog-close:hover{color:var(--cream);}
  .changelog-body{padding:14px;}
  .changelog-entry{margin-bottom:16px;}
  .changelog-entry:last-child{margin-bottom:0;}
  .changelog-version{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--cream);font-weight:600;}
  .changelog-date{font-size:10.5px;color:var(--cream-dim);margin-left:6px;}
  .changelog-entry ul{margin:6px 0 0;padding-left:16px;}
  .changelog-entry li{font-size:12px;color:var(--cream-dim);line-height:1.5;margin-bottom:2px;}

  /* ---- Update-available toast ---- */
  .update-toast{
    position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;
    display:flex;align-items:center;gap:14px;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:12px 16px;box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 0 1px #48473f;
    font-size:13px;color:var(--cream);max-width:90vw;
  }
  .update-toast[hidden]{display:none;}
  .update-toast button{
    background:var(--cream);color:var(--ink);border:none;border-radius:var(--radius-sm);padding:7px 14px;
    font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:12px;
    font-weight:600;cursor:pointer;flex:0 0 auto;
  }
  .update-toast button:hover{background:#e2dabf;}

  /* ---- Mobile: no top bar at all, static centered watermark logo instead ----
     Placed at the end of the file on purpose — .masthead/etc. have their
     base rules scattered earlier in the stylesheet, and a same-specificity
     mobile override only wins if it comes later in source order (see the
     .shop-inner bug fixed in v1.40 for why this matters). Keeping every
     "under 760px" override down here avoids re-introducing that bug. */
  @media (max-width:760px){
    /* Removed entirely (18-09-2026) — no logo, no Contact link, no version
       up top. Brand presence moves to .mobile-watermark below instead;
       Contact is already one tap away in the bottom bar. */
    .masthead{display:none;}
    /* Content now starts at the very top — just enough padding to clear
       the notch/status bar, no bar height to account for anymore. */
    .controls,.preview,.simplepanel,.shop-panel{
      padding-top:calc(18px + env(safe-area-inset-top,0px)) !important;
    }
    /* The update-toast floats just above the bottom bar instead of
       overlapping it. */
    .update-toast{bottom:calc(var(--mb-h) + 14px + env(safe-area-inset-bottom,0px));}
    /* Shop stays gold at rest (not just when active) — mirrors the
       desktop tabbar's .tabbtn-shop treatment, so it stands out as the
       one revenue-driving destination in an otherwise neutral bar. */
    .mb-item[data-tab="shop"]{color:var(--gold);}
    .mb-item[data-tab="shop"].active{border-top-color:var(--gold);}
    /* Static, centered brand watermark — replaces the masthead logo.
       Fixed (not part of the scrolling background), low-opacity so it
       reads as texture, not UI: recognizable without competing with real
       content. Same logo asset as desktop, just placed differently.

       z-index:0 (i.e. behind real content) only works together with the
       .appshell rule below. Without it, .controls (the scrolling form
       panel on most tabs) has its own position:relative;z-index:1, which
       *escapes* .appshell entirely — a positioned descendant only stays
       contained by an ancestor that itself establishes a stacking context,
       which position:relative alone does NOT do; it takes position +
       an explicit z-index. So .controls (and, on the tabs that don't use
       it — Contact's card, Shop's product photo — any other opaque
       surface) was comparing directly against the watermark at the root
       level and losing, letting the watermark bleed straight across the
       Contact card and the Shop 3D render instead of sitting behind them. */
    .mobile-watermark{
      display:block;position:fixed;top:50%;left:50%;
      transform:translate(-50%,-50%);
      width:220px;height:220px;z-index:0;pointer-events:none;
      background:url('../icons/logo.svg') center/contain no-repeat;
      opacity:.08;
    }
    /* Gives .appshell its own stacking context (position + a real
       z-index, not z-index:auto) so every opaque surface inside it —
       .controls included — is contained within it instead of bubbling
       up to compete with the watermark directly. .appshell then paints
       above the watermark as a whole, but that's paint order, not an
       opacity mask: wherever .appshell's own content is transparent
       (the gaps between cards, the empty space around the Contact card),
       the watermark still shows through from underneath, exactly like
       before — just without the bleed-through on opaque surfaces. */
    .appshell{position:relative;z-index:1;}
  }

  /* ---- Dope Card: setup screen (normal app layout) ---- */
  .dc-hob-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .dc-preview-box{background:#0c0c0a;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--cream-dim);}
  /* PDF-export (iPhone/iPad, js/pdfexport.js): "PDF maken…" -> "Delen / opslaan". */
  .ac-pdf-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px;}
  .ac-pdf-box{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;color:var(--cream);}
  .ac-pdf-title{font-family:'Oswald',sans-serif;font-size:18px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px;}
  .ac-pdf-box .hint{margin:0 0 14px;}
  .ac-paper-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .ac-paper-choice .printbtn{padding:16px 10px;font-size:20px;display:flex;flex-direction:column;align-items:center;gap:4px;}
  .ac-paper-choice .printbtn span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0;text-transform:none;opacity:.75;}
  .dc-preview-box.dc-preview-warn{border-color:var(--danger);color:#f0b39e;}
  .dc-preview-box strong{color:var(--cream);}
  .dc-noprofile{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center;}

  /* ---- Dope Card: fullscreen overlay ---- */
  .dc-overlay{
    position:fixed;inset:0;z-index:9999;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:var(--dcbg);color:var(--dcfg);
    font-family:ui-monospace,'IBM Plex Mono',monospace;
    touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;
  }
  .dc-overlay.dc-theme-day{--dcbg:#f2ede0;--dcfg:#15140f;--dcbadge-bg:#15140f;--dcbadge-fg:#f2ede0;--dcline:rgba(21,20,15,.22);--dcline-strong:rgba(21,20,15,.55);--dcdim:rgba(21,20,15,.55);--dcwatermark-filter:invert(1);}
  .dc-overlay.dc-theme-night{--dcbg:#000;--dcfg:rgba(242,236,217,.8);--dcbadge-bg:#f2ecd9;--dcbadge-fg:#000;--dcline:rgba(242,236,217,.18);--dcline-strong:rgba(242,236,217,.4);--dcdim:rgba(242,236,217,.5);--dcwatermark-filter:none;}
  /* Nachtzicht (NVG): geen room/wit, alleen diep rood — rood is veel minder
     verblindend voor een beeldversterkerbril dan wit/groen en tast je eigen
     donker-adaptatie niet aan. Vlakke, verzadigde vullingen i.p.v. transparant
     wit/cream houden dit ook bij minimale schermhelderheid nog leesbaar. */
  .dc-overlay.dc-theme-nv{--dcbg:#000;--dcfg:#a30000;--dcbadge-bg:#a30000;--dcbadge-fg:#000;--dcline:rgba(163,0,0,.35);--dcline-strong:rgba(163,0,0,.6);--dcdim:rgba(163,0,0,.55);--dcwatermark-filter:sepia(1) saturate(10) hue-rotate(-50deg) brightness(.35);}
  .dc-rotor{width:100%;height:100%;display:flex;position:relative;}
  /* position:fixed negeert de safe-area-padding van .dc-overlay, dus die
     wordt hier zelf afgetrokken: de geroteerde laag beslaat alleen het
     veilige gebied (onder de iOS-statusbalk/Dynamic Island, boven de
     home-indicator) en staat gecentreerd in dat gebied. Logische breedte =
     fysieke hoogte, logische hoogte = fysieke breedte (want 90° gedraaid). */
  .dc-overlay.dc-rot-left .dc-rotor,.dc-overlay.dc-rot-right .dc-rotor{
    position:fixed;
    top:calc(50% + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2);
    left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2);
    width:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height:calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .dc-overlay.dc-rot-left .dc-rotor{transform:translate(-50%,-50%) rotate(-90deg);}
  .dc-overlay.dc-rot-right .dc-rotor{transform:translate(-50%,-50%) rotate(90deg);}
  .dc-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;position:relative;overflow:hidden;}
  .dc-strip{flex:0 0 50px;display:flex;flex-direction:column;border-left:1px solid var(--dcline-strong);}
  .dc-strip-btn{
    flex:1 1 0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:none;border:none;border-bottom:1px solid var(--dcline);color:var(--dcfg);
    font-family:ui-monospace,'IBM Plex Mono',monospace;font-size:15px;font-weight:600;cursor:pointer;gap:2px;
  }
  .dc-strip-btn:last-child{border-bottom:none;}
  .dc-strip-btn.dc-dim{opacity:.4;}
  .dc-strip-btn span{font-size:10px;font-weight:400;}

  /* Dope grid */
  .dc-grid{flex:1 1 auto;display:flex;min-height:0;}
  .dc-grid-col{flex:1 1 0;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--dcline-strong);}
  .dc-grid-col:last-child{border-right:none;}
  .dc-wind-cell{
    flex:3 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;
    padding:6px 10px;border-bottom:2px solid var(--dcline-strong);cursor:pointer;position:relative;
  }
  .dc-wind-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0;}
  .dc-wind-badge{background:var(--dcbadge-bg);color:var(--dcbadge-fg);font-weight:700;padding:1px 6px;font-size:12px;line-height:1.3;}
  .dc-wind-value{font-size:clamp(18px,3.4vw,30px);font-weight:700;line-height:1;}
  .dc-wind-label{font-size:9px;color:var(--dcdim);text-transform:uppercase;letter-spacing:.04em;line-height:1.3;}
  .dc-wind-sub{font-size:9px;color:var(--dcdim);line-height:1.3;}
  .dc-wind-mode-toggle{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;}
  .dc-wind-mode-btn{
    background:none;border:1px solid var(--dcline-strong);color:var(--dcdim);font-family:inherit;
    font-size:10px;font-weight:700;letter-spacing:.03em;padding:8px 14px;min-height:32px;min-width:56px;cursor:pointer;
  }
  .dc-wind-mode-btn.active{background:var(--dcfg);color:var(--dcbg);border-color:var(--dcfg);}
  .dc-strip-mic span{display:block;font-size:8px;letter-spacing:.04em;margin-top:2px;opacity:.7;}
  .dc-strip-mic.on{color:#2e8b4a;}
  .dc-strip-mic.arm{color:#c9332a;animation:dcPulse 1s infinite;}
  .dc-voice-heard{position:absolute;left:8px;bottom:4px;right:64px;font-size:11px;color:var(--dcdim);background:var(--dcbg);padding:2px 6px;z-index:4;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .dc-voice-heard.final{color:var(--dcfg);}
  .dc-voice-banner{position:absolute;left:50%;top:6px;transform:translateX(-50%);max-width:80%;background:var(--dcfg);color:var(--dcbg);font-size:12px;font-weight:700;padding:6px 12px;z-index:5;text-align:center;pointer-events:none;}
  .dc-help-screen{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:6px 14px;}
  .dc-help-head{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
  .dc-help-title{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--dcdim);}
  .dc-help-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;gap:18px;font-size:11.5px;line-height:1.35;}
  .dc-help-col{flex:1 1 0;min-width:0;}
  .dc-help-col h4{margin:8px 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--dcline-strong);padding-bottom:2px;}
  .dc-help-col p{margin:0 0 4px;}
  .dc-help-warn{color:var(--dcdim);font-size:10.5px;margin-top:8px !important;}
  @media (max-width:560px){.dc-help-body{flex-direction:column;gap:0;}}
  /* Milling */
  .dc-mil-screen{flex:1 1 auto;display:flex;min-height:0;}
  .dc-mil-left{flex:0 0 46%;display:flex;flex-direction:column;padding:6px 14px;gap:4px;min-width:0;border-right:1px solid var(--dcline-strong);}
  .dc-mil-right{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
  .dc-mil-label{font-size:10px;letter-spacing:.08em;color:var(--dcdim);margin-top:2px;}
  .dc-mil-input{display:flex;gap:6px;align-items:center;}
  .dc-mil-field{flex:1 1 auto;min-width:0;height:44px;margin:0;padding:0;box-sizing:border-box;font-family:inherit;font-size:24px;font-weight:700;text-align:center;background:none;border:1px solid var(--dcline-strong);border-radius:0;color:var(--dcfg);}
  .dc-mil-fieldwrap{position:relative;flex:1 1 auto;min-width:0;}
  .dc-mil-fieldwrap .dc-mil-field{width:100%;padding-right:34px;}
  .dc-mil-unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:700;color:var(--dcdim);pointer-events:none;display:flex;align-items:center;}
  .dc-mil-sign{width:28px;height:22px;display:inline-block;vertical-align:middle;}
  .dc-mil-thead .dc-mil-sign{width:22px;height:17px;margin-left:2px;}
  .dc-mil-unit{color:var(--dcfg) !important;}
  .dc-mil-presets{display:flex;gap:6px;}
  .dc-mil-preset{flex:1 1 0;min-height:34px;background:none;border:1px solid var(--dcline-strong);color:var(--dcdim);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}
  .dc-mil-preset.active{background:var(--dcfg);color:var(--dcbg);border-color:var(--dcfg);}
  .dc-mil-addrow{display:flex;gap:6px;margin-top:4px;}
  .dc-mil-add{flex:1 1 auto;min-height:44px;background:var(--dcfg);color:var(--dcbg);border:none;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.05em;cursor:pointer;}
  .dc-mil-tgtopen{flex:0 0 36%;min-height:44px;background:none;border:1px solid var(--dcline-strong);color:var(--dcfg);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;}
  .dc-mil-result{margin-top:auto;border-top:2px solid var(--dcline-strong);padding-top:4px;text-align:center;}
  .dc-mil-d{font-size:clamp(40px,10vw,76px);font-weight:700;line-height:1;}
  .dc-mil-d span{font-size:.38em;margin-left:4px;color:var(--dcdim);}
  .dc-mil-hold{display:flex;gap:18px;justify-content:center;font-size:clamp(16px,3.4vw,24px);font-weight:700;margin-top:2px;}
  .dc-mil-hold b{font-size:10px;color:var(--dcdim);letter-spacing:.08em;margin-right:3px;}
  .dc-mil-detail{font-size:10px;color:var(--dcdim);margin-top:2px;}
  .dc-mil-table{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .dc-mil-trow{display:flex;justify-content:space-between;padding:7px 16px;border-bottom:1px solid var(--dcline);font-size:16px;font-weight:600;}
  .dc-mil-trow span:last-child{font-weight:700;}
  .dc-mil-thead{position:sticky;top:0;background:var(--dcbg);font-size:10px;letter-spacing:.08em;color:var(--dcdim);border-bottom:2px solid var(--dcline-strong);}
  .dc-mil-hit{background:var(--dcfg);color:var(--dcbg);}
  .dc-strip-mil svg{display:block;}
  .dc-mil-left{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* Liggende telefoon (Samsung S25 ≈ 340–360 px hoog): alles op één scherm, + TGT blijft zichtbaar. */
  @media (max-height:440px){
    .dc-mil-left{padding:3px 12px;gap:2px;}
    .dc-mil-left .dc-wind-back{min-height:28px;padding:0;font-size:13px;}
    .dc-mil-label{font-size:9px;margin-top:0;line-height:1.1;}
    .dc-mil-left .dc-mover-step{flex:0 0 38px;width:38px;height:38px;font-size:18px;}
    .dc-mil-left .dc-mil-field,.dc-overlay .dc-mil-left input.dc-mil-field{height:38px;font-size:22px !important;}
    .dc-mil-preset{min-height:26px;font-size:11px;}
    .dc-mil-d{font-size:clamp(32px,12vh,48px);}
    .dc-mil-hold{font-size:15px;margin-top:0;}
    .dc-mil-result{padding-top:2px;}
    .dc-mil-detail{font-size:9px;margin-top:1px;}
    .dc-mil-add,.dc-mil-tgtopen{min-height:36px;font-size:13px;}
    .dc-mil-addrow{margin-top:3px;}
    .dc-mil-trow{padding:5px 14px;font-size:15px;}
    .dc-mil-thead{font-size:10px;padding:4px 14px;}
  }
  @media (max-height:370px){
    .dc-mil-detail{display:none;}
    .dc-mil-left .dc-mover-step{flex:0 0 34px;width:34px;height:34px;}
    .dc-mil-left .dc-mil-field,.dc-overlay .dc-mil-left input.dc-mil-field{height:34px;font-size:20px !important;}
    .dc-mil-preset{min-height:24px;}
    .dc-mil-d{font-size:clamp(28px,11vh,40px);}
  }
  .dc-overlay input.dc-mil-field,.dc-overlay input.dc-mover-dist{background:transparent !important;color:var(--dcfg) !important;font-size:26px !important;font-weight:700 !important;border:1px solid var(--dcline-strong) !important;box-shadow:none !important;text-align:center;}
  /* Mover (bewegend doel, spraak) */
  .dc-mover-btn{flex:1 1 auto;align-self:stretch;margin:2px 0;background:var(--dcfg);color:var(--dcbg);border:none;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.05em;min-width:64px;cursor:pointer;}
  .dc-mover-screen{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:8px 14px;gap:6px;overflow:hidden;}
  .dc-mover-head{display:flex;justify-content:space-between;align-items:center;}
  .dc-mover-tools{display:flex;gap:8px;}
  .dc-mover-tool{background:none;border:1px solid var(--dcline-strong);color:var(--dcdim);font-family:inherit;font-size:12px;font-weight:700;min-width:44px;min-height:40px;cursor:pointer;}
  .dc-mover-tool.active{background:var(--dcfg);color:var(--dcbg);border-color:var(--dcfg);}
  .dc-mover-hint{font-size:10.5px;color:var(--dcdim);line-height:1.25;}
  @media (max-height:460px){.dc-mover-hint{display:none;}.dc-mover-screen{gap:4px;padding:4px 14px;}}
  .dc-mover-body{display:flex;gap:12px;align-items:stretch;min-height:0;}
  .dc-mover-mic{flex:0 0 auto;width:clamp(72px,14vw,110px);background:none;border:2px solid var(--dcline-strong);color:var(--dcfg);font-family:inherit;font-size:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;}
  .dc-mover-mic span{font-size:11px;font-weight:700;letter-spacing:.06em;}
  .dc-mover-mic.listening{background:#c9332a;border-color:#c9332a;color:#fff;animation:dcPulse 1s infinite;}
  @keyframes dcPulse{50%{opacity:.7;}}
  .dc-mover-fields{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0;}
  .dc-mover-status{font-size:13px;min-height:18px;color:var(--dcfg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dc-mover-status.err{color:#d2493f;white-space:normal;}
  .dc-mover-row{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;}
  .dc-mover-step{flex:0 0 44px;width:44px;height:44px;padding:0;font-size:20px;font-weight:700;background:none;border:1px solid var(--dcline-strong);color:var(--dcfg);cursor:pointer;}
  .dc-mover-dist{flex:0 0 84px;width:84px;height:44px;margin:0;padding:0;box-sizing:border-box;font-family:inherit;font-size:24px;font-weight:700;text-align:center;background:none;border:1px solid var(--dcline-strong);border-radius:0;color:var(--dcfg);}
  .dc-mover-unit{flex:0 0 auto;font-size:14px;color:var(--dcdim);margin-right:2px;}
  .dc-mover-dir,.dc-mover-opt{flex:1 1 auto;min-height:44px;background:none;border:1px solid var(--dcline-strong);color:var(--dcdim);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.03em;padding:0 8px;cursor:pointer;}
  .dc-mover-dir.active,.dc-mover-opt.active{background:var(--dcfg);color:var(--dcbg);border-color:var(--dcfg);}
  .dc-mover-result{display:flex;gap:24px;justify-content:center;align-items:baseline;border-top:2px solid var(--dcline-strong);padding-top:4px;}
  .dc-mover-lead{font-size:clamp(30px,7vw,56px);font-weight:700;line-height:1.05;}
  .dc-mover-k{font-size:12px;color:var(--dcdim);letter-spacing:.08em;margin-right:4px;}
  .dc-mover-detail{font-size:10.5px;color:var(--dcdim);text-align:center;line-height:1.3;}
  .dc-mover-actions{display:flex;gap:8px;margin-top:auto;}
  .dc-mover-act{flex:1 1 0;min-height:44px;background:none;border:1px solid var(--dcline-strong);color:var(--dcfg);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;}
  .dc-block{display:flex;flex-direction:column;border-bottom:2px solid var(--dcline-strong);min-height:0;}
  .dc-block:last-child{border-bottom:none;}
  .dc-row{
    flex:1 1 0;display:flex;align-items:center;min-height:0;border-bottom:1px solid var(--dcline);
    font-weight:700;font-size:clamp(11px,2.6vw,16px);cursor:pointer;padding:0 6px;gap:6px;
  }
  .dc-block .dc-row:last-child{border-bottom:none;}
  .dc-row-dist{flex:0 0 2.6em;width:2.6em;text-align:center;font-weight:400;font-size:.7em;color:var(--dcdim);}
  .dc-row-dist.dc-badge{background:var(--dcbadge-bg);color:var(--dcbadge-fg);font-weight:700;padding:1px 0;font-size:.75em;}
  .dc-row-elev{flex:1 1 0;text-align:right;padding-right:1.6em;}
  .dc-row-wind{flex:0 0 3.4em;width:3.4em;text-align:right;padding-left:.6em;border-left:1px solid var(--dcline);}
  .dc-row.dc-selected{background:var(--dcfg);color:var(--dcbg);}
  .dc-row.dc-selected .dc-row-dist{background:var(--dcbg);color:var(--dcfg);}

  .dc-toast{
    position:absolute;left:50%;top:16px;transform:translateX(-50%);background:var(--dcbadge-bg);color:var(--dcbadge-fg);
    padding:8px 16px;font-size:13px;font-weight:600;z-index:2;pointer-events:none;
  }

  /* Wind screen */
  .dc-wind-screen{flex:1 1 auto;display:flex;min-height:0;}
  .dc-wind-left{flex:0 0 40%;display:flex;flex-direction:column;padding:14px;min-width:0;}
  .dc-wind-back{background:none;border:none;color:var(--dcfg);font-family:inherit;font-size:14px;font-weight:700;text-align:left;padding:6px 0;cursor:pointer;min-height:44px;}
  .dc-wind-speed-label{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--dcdim);margin-top:16px;}
  .dc-wind-speed-value{font-size:clamp(40px,9vw,72px);font-weight:700;line-height:1;text-align:center;margin:6px 0;}
  .dc-wind-speed-hint{font-size:10px;color:var(--dcdim);text-align:center;}
  .dc-wind-pm{display:flex;justify-content:center;gap:16px;margin:10px 0;}
  .dc-wind-pm button{width:44px;height:44px;font-size:20px;font-weight:700;background:none;border:1px solid var(--dcline-strong);color:var(--dcfg);cursor:pointer;}
  .dc-angle-clear-btn{background:none;border:1px solid var(--dcline-strong);color:var(--dcdim);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.05em;padding:8px 10px;cursor:pointer;min-height:36px;margin-top:auto;}
  .dc-eff-box{border:1px solid var(--dcline-strong);padding:10px;margin-top:auto;text-align:center;}
  .dc-eff-box-label{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--dcdim);}
  .dc-eff-box-value{font-size:clamp(26px,5vw,40px);font-weight:700;}
  .dc-wind-right{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;min-width:0;position:relative;}
  .dc-dial-tgt{font-size:12px;font-weight:700;letter-spacing:.08em;margin-bottom:4px;}
  .dc-dial-wrap{position:relative;width:min(90%,60vh);aspect-ratio:1;}
  .dc-dial-svg{width:100%;height:100%;}
  .dc-dial-watermark{position:absolute;inset:12%;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.09;filter:var(--dcwatermark-filter);pointer-events:none;}

  /* Target card */
  .dc-target-screen{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;position:relative;}
  .dc-target-watermark{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:40%;opacity:.06;filter:var(--dcwatermark-filter);pointer-events:none;}
  .dc-target-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--dcline-strong);position:relative;z-index:1;}
  .dc-target-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.05em;}
  .dc-target-clr{background:none;border:1px solid var(--dcline-strong);color:var(--dcfg);font-family:inherit;font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer;min-height:32px;}
  .dc-target-eff{font-size:14px;font-weight:700;cursor:pointer;}
  .dc-target-rows{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;position:relative;z-index:1;}
  .dc-target-row{flex:1 1 0;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--dcline);cursor:pointer;min-height:0;}
  .dc-target-row:last-child{border-bottom:none;}
  .dc-target-row.dc-active .dc-target-num{background:var(--dcfg);color:var(--dcbg);}
  .dc-target-num{flex:0 0 auto;background:var(--dcbadge-bg);color:var(--dcbadge-fg);font-weight:700;font-size:14px;padding:4px 8px;}
  .dc-target-rng{flex:0 0 auto;font-size:clamp(14px,2.6vw,20px);color:var(--dcdim);min-width:3.5em;}
  .dc-target-vals{flex:1 1 0;text-align:right;font-size:clamp(20px,5vw,40px);font-weight:700;}
  .dc-target-empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;color:var(--dcdim);font-size:14px;text-align:center;padding:20px;}
  .dc-flash{background:var(--dcfg) !important;color:var(--dcbg) !important;}

  /* Notities per doel — bewust klein en rustig: een kleine knop links, en
     alleen als er iets is ingevuld een dimmer tekstvak in het midden. */
  .dc-notes-btn{
    flex:0 0 auto;background:none;border:1px solid var(--dcline-strong);color:var(--dcdim);font-family:inherit;
    font-size:9px;font-weight:700;letter-spacing:.05em;padding:5px 8px;min-height:28px;cursor:pointer;
  }
  .dc-notes-btn.dc-has-note{color:var(--dcfg);border-color:var(--dcfg);}
  .dc-note-box{flex:1 1 0;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 6px;overflow:hidden;}
  .dc-note-head{font-size:11px;font-weight:700;color:var(--dcfg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .dc-note-text{font-size:10px;color:var(--dcdim);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .dc-target-vals{flex:0 0 auto;}
  .dc-notes-editor{
    position:absolute;left:12px;top:44px;z-index:3;width:min(340px,70%);background:var(--dcbg);color:var(--dcfg);
    border:2px solid var(--dcfg);padding:10px 12px;display:flex;flex-direction:column;gap:6px;
    -webkit-user-select:text;user-select:text;
  }
  .dc-notes-editor-title{font-size:12px;font-weight:700;letter-spacing:.05em;}
  .dc-notes-editor-hint{font-size:9px;color:var(--dcdim);line-height:1.4;margin:0;}
  .dc-notes-editor label{display:flex;flex-direction:column;gap:2px;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--dcdim);margin:0;}
  .dc-notes-editor input{
    width:100%;background:transparent;border:1px solid var(--dcline-strong);color:var(--dcfg);font-family:inherit;font-size:14px;
    padding:6px 8px;border-radius:0;-webkit-user-select:text;user-select:text;box-shadow:none;
  }
  .dc-notes-editor input:focus{border-color:var(--dcfg);box-shadow:none;outline:none;}
  .dc-notes-editor-actions{display:flex;gap:6px;margin-top:2px;}
  .dc-notes-editor-actions button{
    flex:1;background:none;border:1px solid var(--dcline-strong);color:var(--dcfg);font-family:inherit;font-size:10px;font-weight:700;
    padding:9px 6px;min-height:36px;cursor:pointer;
  }
  .dc-notes-editor-actions button[data-act="notesave"]{background:var(--dcfg);color:var(--dcbg);}