:root{
    --paper:#efece3; --card:#fbfaf6; --ink:#191c19; --muted:#6c7268;
    --line:#d9d6cb; --green:#1f5132; --green2:#2e7d4f; --amber:#d9870c;
    --field:#ffffff; --focus:#2e7d4f;
    --shadow:0 1px 2px rgba(20,30,20,.06),0 8px 30px rgba(20,40,20,.07);
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --sans:'Hanken Grotesk',sans-serif;
    --body:'IBM Plex Sans',sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(46,125,79,.06), transparent 60%),
      radial-gradient(120% 80% at 100% 0%, rgba(217,135,12,.06), transparent 55%),
      var(--paper);
    color:var(--ink); font-family:var(--body); font-size:14px; line-height:1.45;
  }
  .topbar{
    display:flex;align-items:center;gap:14px;padding:14px 22px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));
    position:sticky;top:0;z-index:5;backdrop-filter:blur(6px);
  }
  .brandmark{width:30px;height:30px;flex:0 0 auto}
  .topbar h1{font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:-.01em;margin:0}
  .topbar .sub{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
  .topbar .spacer{flex:1}
  .layout{display:grid;grid-template-columns:minmax(360px,440px) 1fr;gap:0;align-items:start}
  @media (max-width:900px){.layout{grid-template-columns:1fr}}

  /* ---- form panel ---- */
  .panel{padding:20px 22px 60px;max-height:calc(100vh - 60px);overflow:auto}
  @media (max-width:900px){.panel{max-height:none}}
  .group{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;margin-bottom:14px;box-shadow:var(--shadow)}
  .group > h2{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--green);margin:0 0 12px;display:flex;align-items:center;gap:8px;
  }
  .group > h2::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--amber)}
  label.f{display:block;margin:0 0 11px}
  label.f > span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;font-weight:500}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  input[type=text],input[type=number],input[type=date],select,textarea{
    width:100%;font-family:var(--body);font-size:13.5px;color:var(--ink);
    background:var(--field);border:1px solid var(--line);border-radius:9px;padding:8px 10px;outline:none;
  }
  textarea{resize:vertical;min-height:46px;line-height:1.4}
  input:focus,select:focus,textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(46,125,79,.12)}
  .chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);margin:2px 0 6px}
  .chk input{width:16px;height:16px;accent-color:var(--green)}
  .radios{display:flex;gap:14px;font-size:12.5px;margin-bottom:8px}
  .radios label{display:flex;align-items:center;gap:6px}
  .hint{font-size:11px;color:var(--muted);margin-top:-4px}
  .rangewrap{display:flex;align-items:center;gap:10px}
  .rangewrap input[type=range]{flex:1;accent-color:var(--green)}
  .rangeval{font-family:var(--mono);font-size:12px;color:var(--green);min-width:38px;text-align:right}

  /* ---- preview panel ---- */
  .preview{position:sticky;top:60px;height:calc(100vh - 60px);display:flex;flex-direction:column;
    border-left:1px solid var(--line);background:
      linear-gradient(0deg,rgba(0,0,0,.02),transparent 30%),
      repeating-linear-gradient(45deg,rgba(0,0,0,.012) 0 12px,transparent 12px 24px);}
  @media (max-width:900px){.preview{position:static;height:auto;border-left:none;border-top:1px solid var(--line)}}
  .pvbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.45)}
  .pvbar .t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .pvbar .spacer{flex:1}
  .btn{font-family:var(--sans);font-weight:700;font-size:13px;border:1px solid var(--line);background:#fff;color:var(--ink);
    padding:8px 13px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  .btn:hover{border-color:var(--green2)}
  .btn.primary{background:var(--green);border-color:var(--green);color:#fff}
  .btn.primary:hover{background:var(--green2)}
  .btn.ghost{padding:7px 10px}
  .zoom{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--muted)}
  .zoom button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;line-height:1}
  .stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:30px}
  .scaler{transform-origin:center center}

  /* ============ THE LABEL (faithful reproduction) ============ */
  .label{
    width:var(--lw); height:var(--lh);
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:var(--fs);            /* base unit in mm; everything inside uses em */
    color:#1a1a1a; background:#fdfdfb;
    display:flex; overflow:hidden; position:relative;
    border:0.25mm solid #e6e6e0;
    box-shadow:0 10px 40px rgba(0,0,0,.18);
  }
  .label .col{padding:1.2em 1.15em;display:flex;flex-direction:column;min-width:0}
  .label .c1{flex:0 0 30%;border-right:0.18mm solid #d8d8d2}
  .label .c2{flex:1 1 40%;border-right:0.18mm solid #d8d8d2;align-items:stretch}
  .label .c3{flex:0 0 30%}
  .label .kicker{font-family:'Helvetica Neue',Arial;font-weight:700;font-size:1.55em;letter-spacing:.04em;text-transform:uppercase;color:#3a3a3a}
  .label .val{font-size:2.05em;font-weight:700;line-height:1.12;color:#161616}
  .label .val.reg{font-weight:400}
  .label .sub{font-size:1.75em;font-weight:400;color:#2a2a2a;line-height:1.2}
  .label .sect{margin:0 0 .55em}
  .label .dash{border:0;border-top:0.18mm dashed #c7c7c0;margin:.55em 0}

  /* logo */
  .label .logo{display:flex;align-items:center;gap:.5em;margin-bottom:1em}
  .label .logo svg{height:2.9em;width:auto}
  .label .logo .wm{font-weight:700;font-size:2.9em;color:#5a4e7a;letter-spacing:-.01em}

  /* preparation + Rx */
  .label .prep{display:flex;align-items:flex-start;justify-content:space-between;gap:.4em}
  .label .rx{font-family:Georgia,'Times New Roman',serif;font-size:3.4em;font-weight:700;line-height:.8;color:#222}
  .label .rx sub{font-size:.5em}

  /* dosage form icon */
  .label .dose{display:flex;align-items:center;gap:.5em}
  .label .capsule{width:2.4em;height:1.25em;border-radius:1em;flex:0 0 auto;
     background:linear-gradient(90deg,#cfcfcf 0 50%,#f3f3f3 50% 100%);border:0.15mm solid #b9b9b9}

  /* manufacturer box */
  .label .mfr{margin-top:auto;border:0.18mm dashed #b9b9b3;border-radius:.5em;padding:.6em .7em}
  .label .mfr b{font-size:1.6em;font-weight:700}
  .label .mfr div{font-size:1.55em;color:#333}

  /* center column */
  .label .adek{font-weight:800;font-size:7.2em;line-height:.9;letter-spacing:.02em;color:#141414}
  .label .vc{font-weight:700;font-size:2.55em;letter-spacing:.18em;color:#222;margin-top:.1em}
  .label .forwho{font-weight:700;font-size:1.85em;letter-spacing:.06em;color:#333;margin-top:.15em}
  .label .agepill{align-self:flex-start;background:#1d1f1d;color:#fff;font-weight:700;font-size:1.7em;
     letter-spacing:.05em;border-radius:1em;padding:.35em 1em;margin:.7em 0}
  .label .vits{display:flex;justify-content:space-between;gap:.4em;margin:.2em 0 .5em}
  .label .vit{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25em}
  .label .vit .disc{width:3.1em;height:3.1em;border-radius:50%;display:flex;align-items:center;justify-content:center;
     color:#fff;font-weight:800;font-size:2.4em}
  .label .vit .cap{font-size:1.25em;font-weight:700;line-height:1.05;color:#333;text-transform:uppercase;letter-spacing:.01em}
  .label .vA{background:#dd5436}.label .vD{background:#efa61c}.label .vE{background:#5a9e3c}.label .vK{background:#7a4ea2}
  .label .desc{font-size:1.62em;line-height:1.28;color:#333;text-align:center;margin:.2em 0 .55em}
  .label table.ing{width:100%;border-collapse:collapse;font-size:1.62em}
  .label table.ing thead th{background:#2c6b3e;color:#fff;font-weight:700;text-align:left;padding:.3em .55em;font-size:.92em;letter-spacing:.02em}
  .label table.ing thead th.amt{text-align:right}
  .label table.ing td{padding:.32em .55em;border-bottom:0.15mm solid #ddd;color:#262626}
  .label table.ing td.amt{text-align:right;font-weight:600;white-space:nowrap}
  .label .support{display:flex;align-items:center;gap:.45em;margin:.55em 0;color:#2c6b3e;font-weight:700;font-size:1.5em}
  .label .support svg{width:2em;height:2em;flex:0 0 auto}
  .label .pharm{margin-top:auto;font-size:1.5em;color:#333;display:flex;flex-direction:column;gap:.18em}
  .label .pharm .ln{display:flex;align-items:center;gap:.4em}
  .label .pharm svg{width:1.5em;height:1.5em;flex:0 0 auto;color:#2c6b3e}
  .label .pharm b{font-weight:700;color:#1c1c1c}

  /* right column */
  .label .rh{display:flex;align-items:flex-start;gap:.5em;margin-bottom:.2em}
  .label .rh svg{width:2.3em;height:2.3em;flex:0 0 auto;color:#222;margin-top:.1em}
  .label .rh .htxt{font-weight:700;font-size:1.6em;letter-spacing:.05em;text-transform:uppercase;color:#1a1a1a}
  .label .rbody{font-size:1.62em;line-height:1.28;color:#2a2a2a;margin:.1em 0 .2em 0}
  .label .rbody b{font-weight:700;color:#161616}
  .label .rdate{display:flex;align-items:flex-start;gap:.5em;margin:.15em 0}
  .label .rdate svg{width:2.1em;height:2.1em;flex:0 0 auto;color:#222;margin-top:.05em}
  .label .rdate .lab{font-weight:700;font-size:1.5em;letter-spacing:.04em;text-transform:uppercase;color:#1a1a1a}
  .label .rdate .dv{font-size:1.6em;color:#262626}
  .label .qrwrap{margin-top:.5em;align-self:flex-start}
  .label .qrwrap img,.label .qrwrap canvas,.label .qrwrap svg{width:13em !important;height:13em !important;display:block}
  .label .qrfallback{width:13em;height:13em;border:0.2mm solid #999;display:flex;align-items:center;justify-content:center;
     font-size:1.2em;color:#999;text-align:center}

  .footnote{padding:0 18px 16px;font-size:11px;color:var(--muted)}
  .footnote code{font-family:var(--mono);background:#fff;border:1px solid var(--line);padding:1px 5px;border-radius:5px}

  /* ===================== PRINT ===================== */
  @media print{
    html,body{margin:0 !important;padding:0 !important;height:auto !important;background:#fff !important}
    /* remove the app chrome entirely so it generates no pages */
    .topbar,.panel,.pvbar,.footnote{display:none !important}
    /* collapse the containers around the label to plain, untransformed blocks */
    .layout,.preview,.stage,.scaler{
      display:block !important;position:static !important;transform:none !important;
      overflow:visible !important;height:auto !important;max-height:none !important;
      margin:0 !important;padding:0 !important;border:0 !important;background:none !important}
    /* the label is now the only flow content → exactly one label-sized page */
    #label{position:static !important;margin:0 !important;transform:none !important;
           box-shadow:none !important;border:0 !important}
  }