*{-webkit-tap-highlight-color:transparent}
  [x-cloak]{display:none !important}
  /* ---------- Odoo typography ----------
     Roboto, regular tracking, 13px base — the same face and scale the
     client's Odoo screens use. */
  body{font-family:'Roboto',-apple-system,system-ui,'Segoe UI','Helvetica Neue',Arial,sans-serif;
       background:#F1F0F0;color:#212529;letter-spacing:0;-webkit-font-smoothing:antialiased;
       -moz-osx-font-smoothing:grayscale;font-size:13px;line-height:1.5}
  h1,h2,h3,h4{letter-spacing:0;font-weight:500}
  .tracking-tight{letter-spacing:0 !important}
  b,strong{font-weight:700}
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
  .thin::-webkit-scrollbar{width:8px;height:8px}
  .thin::-webkit-scrollbar-thumb{background:#ced4da;border-radius:99px;border:2px solid transparent;background-clip:content-box}
  .thin::-webkit-scrollbar-thumb:hover{background:#636b73;background-clip:content-box}
  .thin::-webkit-scrollbar-track{background:transparent}
  .noscroll{scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}
  .glass{backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
  /* Apple motion: a firm ease-out curve, short durations, small displacements */
  .press{transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .14s ease,background-color .14s ease}
  .press:active{transform:scale(.975)}
  .lift{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,border-color .18s ease}
  .lift:hover{transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(0,0,0,.20)}
  .hair{box-shadow:inset 0 -1px 0 0 #E9ECEF}
  .glass{backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
  :focus-visible{outline:2px solid #714B67;outline-offset:2px;border-radius:4px}
  /* ---------- corner ribbon (HOT PRODUCT / NEW / OFFER …) ---------- */
  .text-zinc-300{color:#767e86 !important}
  .rib{position:absolute;top:-6px;right:-6px;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
  .rib-auto{width:min(42%,104px);aspect-ratio:1/1}
  /* ---------- Odoo top bar ----------
     Purple navigation bar (#714B67) with white controls; the search field and
     drop-down panels stay white, as in Odoo. */
  header.sticky{background:#714B67 !important;border-bottom:0 !important;box-shadow:0 1px 2px rgba(0,0,0,.18);backdrop-filter:none}
  header.sticky > div{height:44px}
  header.sticky,header.sticky button,header.sticky .text-zinc-500,header.sticky .text-zinc-600,header.sticky .text-zinc-400{color:rgba(255,255,255,.88)}
  header.sticky .text-zinc-300{color:rgba(255,255,255,.5)}
  header.sticky button:hover{background:rgba(255,255,255,.14) !important}
  header.sticky .hover\:text-indigo-600:hover{color:#fff}
  header.sticky > div > .shrink-0.inline-flex,header.sticky > div > .relative > button.border{
    background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.22) !important}
  header.sticky .bg-indigo-600{background:#fff !important;color:#714B67 !important}
  header.sticky .bg-indigo-50{background:rgba(255,255,255,.18) !important;color:#fff !important}
  header.sticky [x-ref=searchWrap]{background:#fff !important;border-color:#fff !important}
  header.sticky [x-ref=searchWrap] *{color:#495057}
  header.sticky [x-ref=searchWrap] button:hover{background:#f1f0f0 !important}
  header.sticky [x-ref=searchWrap] input{color:#212529}
  header.sticky .absolute{color:#212529}
  header.sticky button .hidden.xl\:block.rounded-full{background:rgba(0,0,0,.22) !important;color:#fff !important}
  header.sticky .bg-rose-500{color:#fff !important}
  header.sticky button > div.rounded-full{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
  header.sticky .absolute button,header.sticky .absolute .text-zinc-500,header.sticky .absolute .text-zinc-400,header.sticky .absolute .text-zinc-600{color:inherit}
  header.sticky .absolute button:hover{background:#f1f0f0 !important}
  header.sticky .absolute .bg-indigo-50{background:#f6f1f5 !important;color:#714B67 !important}
  header.sticky .absolute .text-indigo-700,header.sticky .absolute .text-indigo-600{color:#714B67 !important}

  ::selection{background:rgba(113,75,103,.18)}
  .navlabel{white-space:nowrap;overflow:hidden;transition:opacity .18s ease, max-width .18s ease}
  :focus-visible{outline:2px solid #714B67;outline-offset:2px}
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

  .o-fld{width:100%;height:34px;padding:0 10px;border:1px solid #DEE2E6;border-radius:4px;font-size:13px;
         background:#fff;outline:none;color:#212529;transition:border-color .15s ease,box-shadow .15s ease}
  .o-fld:hover{border-color:#b9b9c0}
  .o-fld:focus{border-color:#714B67;box-shadow:0 0 0 3.5px rgba(113,75,103,.16)}
  select.o-fld{appearance:none;-webkit-appearance:none;padding-right:26px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 9px center}
  .o-fld:focus{border-color:#714B67;box-shadow:0 0 0 3px rgba(113,75,103,.16)}
  .o-fld:disabled,.o-fld[readonly]{background:#fafafa;color:#636b73}
  textarea.o-fld{height:auto;padding:7px 9px;line-height:1.55}
  .o-lbl{font-size:11.5px;font-weight:500;color:#636b73;display:block;margin-bottom:4px;letter-spacing:0}
  .o-hd{font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:#636b73}
  .o-cap{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#636b73}
  .o-btn{height:33px;padding:0 13px;border:1px solid #DEE2E6;background:#fff;border-radius:4px;font-size:13px;
         font-weight:500;color:#212529;display:inline-flex;align-items:center;gap:6px;letter-spacing:0;
         transition:background .15s ease,border-color .15s ease,transform .1s ease}
  .o-btn:hover{background:#f8f9fa;border-color:#bfbfc6}
  .o-btn:hover{background:#fafafa;border-color:#d4d4d8}
  .o-btn-p{height:33px;padding:0 15px;border-radius:4px;background:#714B67;color:#fff;font-size:13px;
           font-weight:500;display:inline-flex;align-items:center;gap:6px;letter-spacing:0;border:1px solid #714B67;
           transition:background .15s ease,transform .1s ease}
  .o-btn-p:hover{background:#5B3A53;border-color:#5B3A53}
  .o-btn-p:hover{background:#5B3A53}

  /* ---------- compact icon-button system (high-density action bars) ---------- */
  .o-ib{width:33px;height:33px;flex:0 0 33px;border:1px solid #DEE2E6;background:#fff;border-radius:4px;color:#495057;
        display:inline-grid;place-items:center;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease}
  .o-ib:hover{background:#fafafa;border-color:#ced4da;color:#212529}
  .o-ib:active{transform:scale(.94)}
  .o-ib:disabled{opacity:.32;pointer-events:none}
  .o-ib.on{background:#f6f1f5;border-color:#d9c4d3;color:#5B3A53}
  .o-ib-p{width:32px;height:32px;flex:0 0 32px;border:1px solid #714B67;background:#714B67;color:#fff;border-radius:4px;
          display:inline-grid;place-items:center;transition:background .12s ease,transform .12s ease}
  .o-ib-p:hover{background:#5B3A53;border-color:#5B3A53}
  .o-ib-p:active{transform:scale(.94)}
  .o-ib-d{color:#c23b37;border-color:#f6bcc4;background:#fff}
  .o-ib-d:hover{background:#fff1f2;border-color:#fda4af;color:#a8123a}
  .o-ib-v{color:#7c3aed;border-color:#ddd6fe}
  .o-ib-v:hover{background:#f5f3ff;border-color:#c4b5fd;color:#6d28d9}
  .o-ib-g{color:#007f7c;border-color:#aee0bd}
  .o-ib-g:hover{background:#ecfdf5;border-color:#6ee7b7;color:#047857}
  .o-ib-sm{width:28px;height:28px;flex:0 0 28px;border-radius:8px}
  .o-ib-lg{width:36px;height:36px;flex:0 0 36px;border-radius:4px}
  .ibwrap{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
  .ibwrap .cnt{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:99px;
               background:#714B67;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;
               line-height:1;pointer-events:none;box-shadow:0 0 0 2px #fff}
  /* Action rail: one compact row of icon-buttons.
     IMPORTANT — never put overflow on this element. It is the positioning
     context for the dropdowns inside it, and any overflow value other than
     visible clips them out of sight. It wraps instead of scrolling. */
  .rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow:visible;min-width:0;row-gap:6px;max-width:100%}
  /* phone widths: nothing may push the document wider than the viewport */
  @media (max-width:640px){
    html,body{max-width:100vw;overflow-x:hidden}
    .rail > *{max-width:100%}
    table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .kpi-val{font-size:clamp(14px,5.2vw,22px)}
    .apptile{width:64px;height:64px}
    .appcell .applabel{font-size:11.5px;max-width:96px}
  }
  .rail > *{flex-shrink:0}
  .rail .grow{flex:1 1 auto;min-width:8px}
  .ibsep{width:1px;height:20px;background:#e4e4e7;flex:0 0 1px;margin:0 1px}
  .ibgrp{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid #e4e4e7;border-radius:4px;background:#fff}
  .ibgrp .o-ib,.ibgrp .o-ib-p{border:0;border-radius:8px;width:28px;height:28px;flex-basis:28px}
  .ibgrp .o-ib:hover{background:#f4f4f5}
  /* ---------- record view motion ----------
     The form used to pop in with a bare opacity fade. A short rise + scale
     reads as the record lifting out of the row it came from, and the tab
     panes cross-fade so switching tabs no longer snaps. */
  .recEnter{transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .24s cubic-bezier(.22,1,.36,1)}
  .recLeave{transition:opacity .14s ease,transform .14s ease}
  .recEnterFrom{opacity:0;transform:translateY(10px) scale(.985)}
  .recEnterTo{opacity:1;transform:none}
  .tabpane{animation:tabIn .22s cubic-bezier(.22,1,.36,1)}
  .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 #714B67;outline-offset:2px;border-radius:6px}
  /* ---------- @ / # mention chips ---------- */
  .mchip{display:inline;border-radius:5px;padding:1px 4px;font-weight:700;cursor:pointer;font-size:.96em}
  .mchip-p{background:#f3ecf1;color:#714B67}
  .mchip-c{background:#e6f7f3;color:#0b7f75}
  .mchip-r{background:#fdf0e6;color:#9a4a07}
  .mchip:hover{filter:brightness(.94);text-decoration:underline}
  .mpop{position:absolute;bottom:100%;left:0;margin-bottom:6px;z-index:70;min-width:230px;max-height:230px;
        overflow-y:auto;background:#fff;border:1px solid #e4e4e7;border-radius:12px;
        box-shadow:0 12px 34px -10px rgba(24,24,27,.35);padding:4px}
  .mpop button{width:100%;text-align:left;padding:5px 8px;border-radius:8px;font-size:13px;display:flex;
               align-items:center;gap:7px}
  .mpop button.on{background:#f6f1f5;color:#5B3A53;font-weight:700}
  /* ---------- app launcher (Odoo-style home) ---------- */
  .launch{min-height:calc(100vh - 40px);
          background:linear-gradient(135deg,#eceaf5 0%,#f1eff7 38%,#e7e5f0 62%,#f4f2f8 100%)}
  .launch::before{content:'';position:absolute;inset:0;pointer-events:none;
                  background:linear-gradient(118deg,transparent 0 46%,rgba(255,255,255,.55) 46% 62%,transparent 62%)}
  .apptile{background:#fff;border-radius:16px;width:88px;height:88px;display:grid;place-items:center;
           box-shadow:0 1px 2px rgba(24,24,27,.06),0 6px 18px -8px rgba(24,24,27,.18);
           transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease}
  .appcell:hover .apptile{transform:translateY(-4px) scale(1.04);
           box-shadow:0 4px 8px rgba(24,24,27,.08),0 18px 34px -12px rgba(24,24,27,.32)}
  .appcell:active .apptile{transform:translateY(-1px) scale(.99)}
  .appcell .applabel{font-size:13px;font-weight:700;color:#343a40;text-align:center;line-height:1.25;
                     max-width:118px;margin:10px auto 0}
  .appcell:hover .applabel{color:#212529}
  .appcell .appsub{font-size:10.5px;color:#636b73;text-align:center;max-width:118px;margin:2px auto 0}
  .appcount{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
            background:#212529;color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;
            box-shadow:0 0 0 2px #fff}
  .appgrp{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#636b73}
  @media (max-width:640px){ .apptile{width:72px;height:72px;border-radius:14px} }
  /* form layout modes — each mode must be visibly different, not just re-flowed */
  .fm-list .o-sec{border:0;border-radius:0;background:transparent;box-shadow:none}
  .fm-list .o-sechd{background:transparent;border-bottom:1px solid #e4e4e7;padding-left:0;padding-right:0}
  .fm-list .o-secbody{padding:0}
  .fm-list .o-row{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;
                  padding:5px 0;border-bottom:1px solid #f4f4f5}
  .fm-list .o-row:last-child{border-bottom:0}
  .fm-list .o-row .o-lbl{margin:0;padding:0;width:auto}
  .fm-list .o-fld{height:30px;padding-top:2px;padding-bottom:2px}
  /* Single page reads as one continuous document: no cards, sections divided by
     a rule. Most modules have a single tab, so flattening tabs alone left it
     looking identical to Sections. */
  .fm-single .o-sec{border:0;border-radius:0;box-shadow:none;background:transparent;
                    border-top:1px solid #E9ECEF;break-inside:avoid}
  .fm-single .o-sec:first-child{border-top:0}
  .fm-single .o-sechd{background:transparent;border-bottom:0;padding-left:0;padding-top:16px}
  .fm-single .o-secbody{padding:2px 0 10px 0;column-gap:28px}
  @media (min-width:1100px){ .fm-single .o-secbody{columns:2} }
  .fm-single .o-row{break-inside:avoid;padding:4px 0}
  /* ---- three column: tighter rows so three fit without truncating ---- */
  .fm-three .o-row{gap:8px}
  .fm-three .o-row .o-lbl{font-size:10.5px}
  .fm-three .o-fld{height:31px;font-size:12px}
  /* ---- table: reads like the printed form ---- */
  .fm-table .o-sec{border:1px solid #DEE2E6;border-radius:12px;overflow:hidden}
  .fm-table .o-sechd{background:#F1F0F0;border-bottom:1px solid #DEE2E6}
  .fm-table .o-secbody{padding:0}
  .fm-table .o-row{display:grid;grid-template-columns:240px 1fr;gap:0;align-items:stretch;
                   border-bottom:1px solid #E9ECEF;padding:0}
  .fm-table .o-row:last-child{border-bottom:0}
  .fm-table .o-row .o-lbl{margin:0;padding:9px 12px;background:#f8f9fa;
                          border-right:1px solid #E9ECEF;display:flex;align-items:center;
                          font-weight:700;color:#343a40;width:auto}
  .fm-table .o-row > :not(.o-lbl){padding:5px 10px;display:flex;align-items:center}
  .fm-table .o-fld{border-color:transparent;background:transparent}
  .fm-table .o-fld:hover{border-color:#DEE2E6;background:#fff}
  .fm-table .o-fld:focus{border-color:#714B67;background:#fff}
  /* ---- focus: one section, generous spacing ---- */
  .fm-focus .o-sec{border:0;box-shadow:none;background:transparent}
  .fm-focus .o-sechd{display:none}
  .fm-focus .o-secbody{padding:0}
  .fm-focus .o-row{padding:7px 0}
  .fm-focus .o-row .o-lbl{font-size:12px;width:190px}
  .fm-focus .o-fld{height:38px;font-size:14px}
  @media (max-width:900px){
    .fm-table .o-row{grid-template-columns:1fr}
    .fm-table .o-row .o-lbl{border-right:0;border-bottom:1px solid #E9ECEF}
  }
  @media (max-width:640px){ .fm-list .o-row{grid-template-columns:1fr} }
  @keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .recshell .o-fld{transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}
  .recshell .stg{transition:background .16s ease,color .16s ease}
  @media (prefers-reduced-motion:reduce){
    .recEnter,.recLeave,.recshell .o-fld,.recshell .stg{transition:none}
    .tabpane{animation:none}
  }
  /* ---------- type scale ----------
     Tabular figures everywhere a number is compared down a column, and a
     tightened heading scale so KPI values read as the primary object on a
     card (matching the reference dashboard's big-number treatment). */
  .num,.o-fld.num,table td.num,table th.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv01" 1}
  .kpi-val{font-size:clamp(15px,2.1vw,30px);line-height:1.08;font-weight:700;letter-spacing:0;
           font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:break-word;max-width:100%;display:block}
  /* long Indian-format money strings step down instead of spilling out of the card */
  .kpi-val.long{font-size:clamp(12px,1.25vw,17px);line-height:1.2}
  .kpi-val.xlong{font-size:clamp(11px,1.05vw,14px);line-height:1.25}
  .kpi-card,.kpi-card *{min-width:0}
  .kpi-lab{font-size:13px;font-weight:700;color:#212529;letter-spacing:0}
  .kpi-sub{font-size:11.5px;color:#636b73;font-weight:500}
  .zoom-strong .o-ib:hover,.zoom-strong .o-ib-p:hover{transform:translateY(-1px) scale(1.06)}
  .zoom-subtle .o-ib:hover,.zoom-subtle .o-ib-p:hover{transform:translateY(-1px)}
  .zoom-off .o-ib:hover,.zoom-off .o-ib-p:hover{transform:none}
  .cellinput{background:transparent;outline:none;width:100%;border-radius:6px;padding:2px 5px;border:1px solid transparent;font:inherit}
  .cellinput:hover{border-color:#e4e4e7;background:#fff}
  .cellinput:focus{background:#fff;border-color:#714B67;box-shadow:0 0 0 2px rgba(79,70,229,.14)}
  .trow:hover{background:#fafaff}
  .drag{opacity:.35}
  .dropzone{outline:2px dashed #8F6B85;outline-offset:-3px;background:#f6f1f5}
  .tgl{appearance:none;width:34px;height:20px;border-radius:99px;background:#e4e4e7;position:relative;cursor:pointer;transition:background .15s;flex:0 0 34px}
  .tgl:checked{background:#714B67}
  .tgl::before{content:"";position:absolute;width:16px;height:16px;border-radius:99px;background:#fff;top:2px;left:2px;transition:transform .15s}
  .tgl:checked::before{transform:translateX(14px)}
  kbd{font-family:'Roboto Mono',ui-monospace,Menlo,monospace;font-size:9.5px;background:#f4f4f5;border:1px solid #e4e4e7;border-radius:5px;padding:1px 4px;color:#495057}
  .stg{position:relative;padding:5px 16px 5px 22px;font-size:11.5px;font-weight:700;background:#f4f4f5;color:#636b73;border:1px solid #e4e4e7;border-left:0;white-space:nowrap}
  .stg:first-child{border-left:1px solid #e4e4e7;border-radius:8px 0 0 8px;padding-left:12px}
  .stg:last-child{border-radius:0 8px 8px 0}
  .stg.on{background:#714B67;color:#fff;border-color:#714B67}
  .stg.done{background:#f6f1f5;color:#5B3A53;border-color:#d9c4d3}
  .kcol{background:#f4f4f5;border:1px solid #e4e4e7;border-radius:12px}
  .rng{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:#e4e4e7;outline:none}
  .rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:99px;background:#fff;border:1px solid #d4d4d8;box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer}
  .rng::-moz-range-thumb{width:18px;height:18px;border-radius:99px;background:#fff;border:1px solid #d4d4d8;cursor:pointer}
  .tip{position:fixed;z-index:120;pointer-events:none;background:#212529;color:#fff;border-radius:8px;padding:7px 9px;font-size:11.5px;line-height:1.45;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);max-width:240px}
  .chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:700}
  .zoom-off .lift:hover{transform:none}
  .zoom-off .press:active{transform:none}
  .zoom-subtle .lift:hover{transform:translateY(-2px) scale(1.01)}
  .zoom-subtle .trow:hover{transform:none}
  .zoom-strong .lift:hover{transform:translateY(-4px) scale(1.035);box-shadow:0 18px 38px -14px rgba(24,24,27,.42)}
  .zoom-strong .trow{transition:transform .14s ease}
  .zoom-strong .trow:hover{transform:scale(1.006)}
  .zoom-strong .o-btn:hover,.zoom-strong .o-btn-p:hover{transform:translateY(-1px) scale(1.03)}
  .zoom-subtle .o-btn:hover,.zoom-subtle .o-btn-p:hover{transform:translateY(-1px)}

  .doc{--pad:8px 10px;--fs:11px;--lh:1.45;--imgh:78px;--gap:14px;--tscale:1;--rad:8px}
  .doc[data-density="compact"]{--pad:4px 7px;--fs:9.6px;--lh:1.25;--imgh:56px;--gap:9px}
  .doc[data-density="comfortable"]{--pad:8px 10px;--fs:11px;--lh:1.45;--imgh:78px;--gap:14px}
  .doc[data-density="spacious"]{--pad:14px 13px;--fs:12.4px;--lh:1.7;--imgh:104px;--gap:22px}
  .doc .page{background:#fff;position:relative;overflow:hidden}
  .doc .ptable{width:100%;border-collapse:collapse;font-size:calc(var(--fs) * var(--tscale));line-height:var(--lh)}
  .doc .ptable th{padding:var(--pad);text-align:left;font-weight:700;font-size:calc(var(--fs) * var(--tscale) - .4px);letter-spacing:.03em;text-transform:uppercase;color:#fff}
  .doc .ptable td{padding:var(--pad);border-bottom:1px solid #ececf1;vertical-align:middle}
  .doc .ptable tbody tr:nth-child(even){background:#fafafa}
  .doc .ptable[data-zebra="0"] tbody tr:nth-child(even){background:#fff}
  .doc .gridwrap{display:grid;gap:var(--gap)}
  .doc .rib{position:absolute;top:-6px;right:-6px;z-index:3}
  .doc .rib-auto{width:min(42%,104px);aspect-ratio:1/1}
  .doc .card{position:relative;border:1px solid #e4e4e7;border-radius:4px;padding:calc(var(--gap) * .7);font-size:calc(var(--fs) * var(--tscale));line-height:var(--lh);break-inside:avoid}
  .doc .thumb{width:100%;height:var(--imgh);object-fit:cover;border-radius:var(--rad);background:#f4f4f5}
  .doc[data-frame="square"] .thumb{border-radius:0}
  .doc[data-frame="circle"] .thumb{border-radius:999px}
  .doc[data-frame="ring"] .thumb{border:3px solid #fff;box-shadow:0 0 0 1px #e4e4e7}

  @page{size:A4;margin:11mm}
  @media print{
    html,body{background:#fff !important}
    body *{visibility:hidden !important}
    #printArea, #printArea *{visibility:visible !important}
    #printArea{position:absolute;left:0;top:0;width:100%;padding:0;margin:0}
    /* one document page = exactly one printed sheet: A4 (297 mm) minus the 11 mm margins is 1039 px, so 1035 px leaves a hair of slack.
       Body pages are cut to fit by measurement (see pageFits); covers, banners and back pages are laid out to fill the sheet. */
    #printArea .page{page-break-after:always;break-after:page;height:1035px !important;min-height:0 !important;overflow:hidden !important;box-shadow:none !important;border:0 !important;margin:0 !important;border-radius:0 !important}
    body:not(.print-sheet) #printArea .page{padding:0 !important}
    #printArea .page > div[style*="min-height:1050px"]{min-height:100% !important;height:100% !important}
    /* the 11 mm margin lives inside the page (see printBegin): 1122 px sheet - 2 x 41.6 px = 1039 px of content */
    body.print-sheet #printArea .page{box-sizing:border-box !important;height:1120px !important}
    /* text pages keep a 11 mm margin; covers, banners and the back page run to the edge of the sheet */
    body.print-sheet #printArea .page.pg-flow{padding:11mm !important}
    #printArea .page:last-child{page-break-after:auto;break-after:auto}
    #printArea .ptable tr{page-break-inside:avoid;break-inside:avoid}
    #printArea .ptable thead{display:table-header-group}
    #printArea .card{break-inside:avoid;page-break-inside:avoid}
    .noprint{display:none !important}
    body.printing-dash *{visibility:hidden !important}
    body.printing-dash [data-dash], body.printing-dash [data-dash] *{visibility:visible !important}
    body.printing-dash [data-dash]{position:absolute;left:0;top:0;width:100%}
  }

/* ---- small screens: the control bar wraps into rows instead of running off the right edge ---- */
@media (max-width: 1023px) {
  header.sticky > div:first-child { height: auto !important; min-height: 2.5rem; flex-wrap: wrap; row-gap: 4px; padding-top: 4px; padding-bottom: 4px; }
}
@media (max-width: 639px) {
  header.sticky > div:first-child > div.flex-1:has(input) { flex: 1 0 100%; order: 99; margin: 0; }
}