/* S25 approved skins. Screen-only presentation; business geometry and print sheets
   remain owned by their original components. All three skins share one layout. */
@media screen {
 @font-face{font-family:LunoirDisplay;src:url("brand/lunoir-display.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
 html[data-skin] {
  --skin-canvas:#f2eee7;--skin-paper:#fffdf8;--skin-ink:#292720;--skin-muted:#685e4f;
  --skin-line:#dcd4c7;--skin-soft:#f0e9dd;--skin-hover:#f5efe4;--skin-selected:#f0e5d1;
  --skin-accent:#936a3d;--skin-ring:#a47c4326;--skin-rail:#24221c;--skin-rail-end:#101310;
  --skin-on-rail:#f9f0df;--skin-rail-muted:#cec5b7;--skin-rail-line:#c9b08740;
  --skin-active:#e8d1a91b;--skin-action:#22251e;--skin-action-end:#121713;
  --skin-button:#f3e8d1;--skin-button-ink:#302b21;
  min-height:100%;scrollbar-gutter:stable;scroll-behavior:auto!important;
 }
 html[data-skin]:has(:is(.arrival-dialog,.product-editor-modal)[open]){overflow:hidden}
 html[data-skin=black] {
  --skin-canvas:#f0efec;--skin-paper:#fffefd;--skin-ink:#222321;--skin-muted:#686863;
  --skin-line:#d8d7d1;--skin-soft:#eeede8;--skin-hover:#f4f3ef;--skin-selected:#e9e7df;
  --skin-accent:#82704f;--skin-ring:#91805b26;--skin-rail:#242424;--skin-rail-end:#0d0f0e;
  --skin-on-rail:#f6f2e9;--skin-rail-muted:#c7c5bd;--skin-rail-line:#d1c6aa35;
  --skin-active:#e0d5b51a;--skin-action:#282a27;--skin-action-end:#111411;
  --skin-button:#f3eedf;--skin-button-ink:#292b25;
 }
 html[data-skin=green] {
  --skin-canvas:#eef2eb;--skin-paper:#fffef9;--skin-ink:#243a2c;--skin-muted:#56644f;
  --skin-line:#d2ddcd;--skin-soft:#e9f0e2;--skin-hover:#f1f5eb;--skin-selected:#e5eedb;
  --skin-accent:#537448;--skin-ring:#6b8b5526;--skin-rail:#254b36;--skin-rail-end:#122c20;
  --skin-on-rail:#f4f6e9;--skin-rail-muted:#c4d3bc;--skin-rail-line:#b3c99e40;
  --skin-active:#d4e4bd1a;--skin-action:#2f5339;--skin-action-end:#193a27;
  --skin-button:#eeeeda;--skin-button-ink:#28432b;
 }
 html[data-skin] #lunoir-app {
  --green:var(--skin-ink);--ink:var(--skin-ink);--text:var(--skin-ink);--muted:var(--skin-muted);
  --paper:var(--skin-paper);--canvas:var(--skin-canvas);--white:var(--skin-paper);--line:var(--skin-line);--rule:var(--skin-line);
  --client-forest:var(--skin-rail);--client-muted:var(--skin-muted);--client-line:var(--skin-line);--staff-forest:var(--skin-rail);
  --bs-body-color:var(--skin-ink);--bs-border-color:var(--skin-line);--bs-body-bg:var(--skin-paper);
  min-height:100dvh;background:var(--skin-canvas);color:var(--skin-ink);
 }
 /* Repeated pages get no new padding or row/font metrics. Only the shell fills
    the available viewport; tables retain their existing responsive columns. */
 html[data-skin] #lunoir-app #main-content.container,html[data-skin] #lunoir-app footer.container {
  max-width:none;
 }
 html[data-skin] #lunoir-app #main-content.container {
  background:transparent;border-color:transparent;border-radius:0;box-shadow:none;
 }
 html[data-skin] #lunoir-app :is(h1,h2,h3,h4,.bean-name,.customer-portal-title,.grand-total,.customer-order-amount strong):not(.offcanvas-title){color:var(--skin-ink)}
 html[data-skin] #lunoir-app:not(.print-view) :is(.head h1,.page-heading h1,.auth-card h1){font-family:LunoirDisplay,"Songti SC",SimSun,serif}
 html[data-skin] #lunoir-app :is(.text-muted,.form-text,.helptext,.section-kicker:not(.sample-page-lead *),.eyebrow:not(.sample-page-lead *),.updatetime,.return-navigation a,.stock-sort-hint){color:var(--skin-muted)!important}
 html[data-skin] #lunoir-app :is(a,button,summary){-webkit-tap-highlight-color:transparent}
 html[data-skin] #lunoir-app :is(a,button,summary,select,textarea):focus-visible {outline:2px solid var(--skin-accent);outline-offset:3px}
 html[data-skin] #lunoir-app :is(.btn,.primary){border-radius:5px;transition:background-color 130ms,border-color 130ms,box-shadow 130ms,color 130ms}
 html[data-skin] #lunoir-app :is(.btn,.primary,a,summary):is(:hover,:active){transform:none}
 html[data-skin] #lunoir-app :is(.btn-primary,.primary) {
  --bs-btn-bg:var(--skin-action);--bs-btn-border-color:var(--skin-action);--bs-btn-hover-bg:var(--skin-rail);--bs-btn-hover-border-color:var(--skin-accent);--bs-btn-active-bg:var(--skin-rail-end);--bs-btn-active-border-color:var(--skin-accent);
  background:linear-gradient(145deg,var(--skin-action),var(--skin-action-end));border-color:var(--skin-action);color:var(--skin-on-rail);box-shadow:inset 0 1px #ffffff18,0 2px 4px #151b1210;
 }
 html[data-skin] #lunoir-app :is(.btn-primary,.primary):hover{filter:none;border-color:var(--skin-accent);box-shadow:inset 0 1px #ffffff24,0 3px 8px #171b1214}
 html[data-skin] #lunoir-app :is(.btn-outline-primary,.btn-outline-secondary,.page-heading .btn-primary) {
  background:var(--skin-paper);color:var(--skin-ink);border-color:var(--skin-line);box-shadow:inset 0 1px #fff8;
 }
 html[data-skin] #lunoir-app :is(.btn-outline-primary,.btn-outline-secondary,.page-heading .btn-primary):hover{background:var(--skin-soft);border-color:var(--skin-accent);color:var(--skin-ink)}
 html[data-skin] #lunoir-app :is(.form-control,.form-select,.control,.staff-password-field input){background-color:var(--skin-paper);color:var(--skin-ink);border-color:var(--skin-line);border-radius:5px;box-shadow:inset 0 1px 2px #28201005;caret-color:var(--skin-accent)}
 html[data-skin] #lunoir-app :is(.form-control,.form-select,.control,.staff-password-field input):focus{background-color:var(--skin-paper);border-color:var(--skin-accent);box-shadow:0 0 0 2px var(--skin-ring)}
 html[data-skin] #lunoir-app :is(input,textarea)::placeholder{color:var(--skin-muted)!important;opacity:1}
 html[data-skin] #lunoir-app input:is([type=checkbox],[type=radio]){accent-color:var(--skin-accent)}
 html[data-skin] #lunoir-app .form-check-input:checked{background-color:var(--skin-accent);border-color:var(--skin-accent)}
 html[data-skin] #lunoir-app :is(.card,.table-wrap,.stock-table,.quote-share,.import-upload-card,.stock-receive-card,.editor-card,.auth-card,.staff-self-card,.staff-security-card,.staff-password-card,.collection){background:var(--skin-paper);border-color:var(--skin-line);border-radius:8px;box-shadow:0 4px 20px #30261705}
 html[data-skin] #lunoir-app :is(.filter-bar,.order-finder,.quote-controls,.order-header-grid,.order-summary,.pack-summary,.stock-view-tabs){background:var(--skin-soft);border-color:var(--skin-line);border-radius:7px}
 html[data-skin] #lunoir-app :is(.record-table,.stock-table table,.arrival-table,.batch-table,.presale-batches-table,.order-lines,.order-table){--bs-table-bg:transparent;--bs-table-hover-bg:var(--skin-hover);--bs-table-border-color:var(--skin-line);color:var(--skin-ink)}
 html[data-skin] #lunoir-app :is(.record-table,.stock-table table,.arrival-table,.batch-table,.presale-batches-table,.order-lines,.order-table,.document-lines) thead th,html[data-skin] #lunoir-app .table-heading{background:var(--skin-soft);color:var(--skin-muted);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app :is(.record-table,.stock-table table,.arrival-table,.batch-table,.presale-batches-table,.order-lines,.order-table) tbody td{border-color:var(--skin-line);color:var(--skin-ink)}
 /* Paint the entire row/card so responsive grid gaps do not split the highlight. */
 html[data-skin] #lunoir-app :is(.record-table,.stock-table table,.arrival-table,.batch-table,.presale-batches-table) tbody tr:hover>td{background-color:transparent;box-shadow:none;--bs-table-bg-state:transparent;--bs-table-accent-bg:transparent}
 @media(hover:hover){html[data-skin] #lunoir-app :is(.record-table,.stock-table table,.arrival-table,.batch-table,.presale-batches-table) tbody tr:hover{background-color:var(--skin-hover)}}
 html[data-skin] #lunoir-app :is(.record-table,.stock-table table,.arrival-table) td a:not(.btn){color:var(--skin-ink);text-decoration-color:var(--skin-line)}
 html[data-skin] #lunoir-app :is(.metric,.order-current-step,.metric-link){background:var(--skin-paper);border-color:var(--skin-line);box-shadow:inset 0 1px #fff8}
 html[data-skin] #lunoir-app :is(.stock-metrics,.stock-metrics>div,.overview-metrics>div){background:var(--skin-paper);border-color:var(--skin-line);color:var(--skin-ink)}
 html[data-skin] #lunoir-app :is(.stock-metrics>div,.overview-metrics>div){cursor:default;transition:background-color 130ms}
 @media(hover:hover){html[data-skin] #lunoir-app :is(.stock-metrics>div,.overview-metrics>div):hover{background:var(--skin-hover)}}
 html[data-skin] #lunoir-app :is(.stock-metrics>div,.overview-metrics>div):active{background:var(--skin-soft)}
 html[data-skin] #lunoir-app :is(.stock-metrics,.overview-metrics) :is(span,small){color:var(--skin-muted)}
 html[data-skin] #lunoir-app :is(.stock-metrics,.overview-metrics) strong{color:var(--skin-ink)}
 html[data-skin] #lunoir-app .metric-link:is(:hover,:focus-within){background:var(--skin-hover)}
 html[data-skin] #lunoir-app .metric strong{color:var(--skin-ink)}
 html[data-skin] #lunoir-app .order-current-step{border-top-color:var(--skin-accent)}
 html[data-skin] #lunoir-app :is(.order-other-tools,.order-documents,.order-delivery,.order-logistics){border-color:var(--skin-line)}
 html[data-skin] #lunoir-app .pagination .page-link{background:var(--skin-paper);color:var(--skin-ink);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app .pagination .active .page-link{background:var(--skin-action);color:var(--skin-on-rail);border-color:var(--skin-action)}
 html[data-skin] #lunoir-app .pagination .disabled .page-link{background:var(--skin-soft);color:var(--skin-muted)}
 /* Semantic warnings, errors and status badges retain their original colors. */
 html[data-skin] #lunoir-app .alert-info{background:var(--skin-soft);border-color:var(--skin-line);color:var(--skin-ink)}
 html[data-skin] #lunoir-app input[type=file]::file-selector-button{background:var(--skin-soft);color:var(--skin-ink);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app :is(.site-header,.staff-navigation,.client-navigation){border-color:var(--skin-rail-line)}
 html[data-skin] #lunoir-app .staff-navigation,html[data-skin] #lunoir-app .client-navigation{
  --bs-offcanvas-bg:var(--skin-rail);--bs-offcanvas-color:var(--skin-on-rail);
  background:radial-gradient(ellipse at 0 0,#a58d6118,transparent 62%),linear-gradient(150deg,var(--skin-rail),var(--skin-rail-end));color:var(--skin-on-rail);
 }
 html[data-skin] #lunoir-app :is(.role-nav a,.client-navigation .customer-links a){background:transparent;color:var(--skin-rail-muted);border-radius:5px;box-shadow:none}
 html[data-skin] #lunoir-app :is(.role-nav a.active,.client-navigation .customer-links a.active){background:var(--skin-active);color:var(--skin-on-rail);box-shadow:inset 0 0 0 1px var(--skin-rail-line);border-color:transparent}
 html[data-skin] #lunoir-app .client-navigation .customer-links a.active::after{background:var(--skin-button)}
 html[data-skin] #lunoir-app :is(.role-nav a,.client-navigation .customer-links a):hover{background-color:var(--skin-active);color:var(--skin-on-rail)}
 html[data-skin] #lunoir-app :is(.nav-caption,.nav-signature,.offcanvas-title){color:var(--skin-rail-muted)}
 html[data-skin] #lunoir-app .client-navigation :is(.account-menu,.account-self-link,.text-button),html[data-skin] #lunoir-app .client-navigation .account-menu a{color:var(--skin-rail-muted);border-color:var(--skin-rail-line)}
 html[data-skin] #lunoir-app .account-avatar{background:var(--skin-soft);color:var(--skin-ink)}
 html[data-skin] #lunoir-app .account-menu,html[data-skin] #lunoir-app :is(.account-self-link,.text-button){color:var(--skin-muted)}
 html[data-skin] #lunoir-app .client-navigation .btn-close{filter:invert(1) grayscale(1) brightness(2)}
 html[data-skin] #lunoir-app .site-header{background:var(--skin-paper);box-shadow:none;border-color:var(--skin-line)}
 html[data-skin] #lunoir-app :is(.staff-menu-toggle,.client-menu-toggle){border-color:var(--skin-rail-line);background:#ffffff0b;color:var(--skin-on-rail);border-radius:5px}
 html[data-skin] #lunoir-app .preview-return{background:#ffffff0b;color:var(--skin-on-rail);border-color:var(--skin-rail-line);border-radius:5px}
 /* A single preference, not a business form or navigation destination. */
 .skin-picker{display:inline-flex;align-items:center;gap:6px;min-width:0;color:inherit;font-size:11px;white-space:nowrap}
 .skin-picker svg{width:15px;height:15px;flex:none;opacity:.85}
 .skin-coffee-art{display:none}
 html[data-skin] #lunoir-app .skin-picker select{width:122px;min-width:122px;max-width:122px;height:32px;min-height:32px;border:1px solid var(--skin-line);border-radius:5px;padding:3px 6px;background-color:var(--skin-paper);color:var(--skin-ink);font:12px/1.5 LunoirSans,system-ui,sans-serif;box-shadow:none}
 html[data-skin] #lunoir-app .client-navigation .skin-picker select{background-color:var(--skin-rail-end);color:var(--skin-on-rail);border-color:var(--skin-rail-line)}
 html[data-skin] #lunoir-app .staff-navigation .skin-picker{margin-top:10px;padding:12px 14px;border-top:1px solid var(--skin-rail-line);color:var(--skin-rail-muted)}
 html[data-skin] #lunoir-app .staff-navigation .skin-picker select{background-color:var(--skin-rail-end);color:var(--skin-on-rail);border-color:var(--skin-rail-line)}
 html[data-skin] #lunoir-app .auth-intro,html[data-skin] #lunoir-app .auth-intro.auth-intro-plain{background:linear-gradient(150deg,var(--skin-rail),var(--skin-rail-end));border-color:var(--skin-line);border-radius:0}
 html[data-skin] #lunoir-app .auth-intro .auth-intro-copy{background:transparent;color:var(--skin-on-rail);text-align:center}
 html[data-skin] #lunoir-app .auth-intro.auth-intro-plain .auth-intro-copy :is(h2,p,.section-kicker){color:var(--skin-on-rail)!important}
 html[data-skin] #lunoir-app .auth-intro .auth-brand-logo{filter:brightness(0) invert(1);margin-left:auto;margin-right:auto}
 @media(min-width:761px){
  html[data-skin] #lunoir-app .auth-intro.auth-intro-plain .auth-intro-copy{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-width:0;padding:40px 32px}
  html[data-skin] #lunoir-app .auth-intro.auth-intro-plain .auth-brand-logo{width:clamp(176px,16vw,208px);max-width:100%;height:auto;margin:0}
  html[data-skin] #lunoir-app .auth-intro.auth-intro-plain :is(h2,p){margin:0;max-width:100%;text-wrap:balance}
 }
 html[data-skin] #lunoir-app .auth-shell{background:var(--skin-paper);border-color:var(--skin-line);box-shadow:0 8px 28px #30261709}
 html[data-skin] #lunoir-app .auth-shell .auth-card{background:var(--skin-paper)}
 html[data-skin] #lunoir-app .staff-login-brand{background:var(--skin-rail);color:var(--skin-on-rail)}
 html[data-skin] #lunoir-app .staff-login-brand .staff-login-logo{filter:brightness(0) invert(1);opacity:.96}
 html[data-skin] #lunoir-app .staff-login-brand p{color:var(--skin-on-rail);border-color:var(--skin-rail-line)}
 /* Catalogue: no column, line-height or row padding changes. */
 html[data-skin] #lunoir-app.kg-catalog .bean-row{background:var(--skin-paper);border-color:var(--skin-line);box-shadow:none;transition:background-color 150ms,box-shadow 150ms}
 html[data-skin] #lunoir-app.kg-catalog .bean-row:is(.chosen,.is-selected,[data-client-chosen=yes]){background:var(--skin-selected)!important;box-shadow:inset 2px 0 var(--skin-accent)}
 html[data-skin] #lunoir-app.kg-catalog .bean-row:not([data-sample-ready]):focus-within{background:var(--skin-hover);box-shadow:inset 2px 0 var(--skin-accent)}
 html[data-skin] #lunoir-app.kg-catalog :is(.unit-price,.line-amount,[data-kg-amount],[data-combined-line],.bean-name){color:var(--skin-ink)}
 html[data-skin] #lunoir-app.kg-catalog :is(.price-tag,.kg-stock-label,.sub,.muted,.estate-name,.mobile-stock-label,.price .unit,.pack-line>strong,.flavor-col,.pack-token,.loose-value,.allocation:not(.error),.guide,.guide p,.guide a){color:var(--skin-muted)}
 html[data-skin] #lunoir-app.kg-catalog :is(.qty input,.kg-entry-frame::before){background-color:var(--skin-paper);border-color:var(--skin-line);box-shadow:inset 0 1px 2px #28201005}
 html[data-skin] #lunoir-app.kg-catalog .kg-entry-frame:focus-within::before{border-color:var(--skin-accent);box-shadow:0 0 0 2px var(--skin-ring)}
 html[data-skin] #lunoir-app.kg-catalog .toolbar :is(.control,.mobile-filter){border-radius:5px;border-color:var(--skin-line);background-color:var(--skin-paper);color:var(--skin-ink)}
 html[data-skin] #lunoir-app.kg-catalog .toolbar .clear{background:none;color:var(--skin-muted)}
 html[data-skin] #lunoir-app .customer-catalog-types{border-radius:7px;background:var(--skin-soft);border-color:var(--skin-line);box-shadow:inset 0 1px 2px #4e39100a}
 html[data-skin] #lunoir-app .customer-catalog-types a{border-radius:5px;color:var(--skin-muted)}
 html[data-skin] #lunoir-app .customer-catalog-types a.is-current{color:var(--skin-ink);background:var(--skin-paper);box-shadow:inset 0 0 0 1px var(--skin-line)}
 html[data-skin] #lunoir-app .customer-catalog-types:has(.ui-type-indicator) a.is-current{background:transparent;box-shadow:none}
 html[data-skin] #lunoir-app .customer-catalog-types .ui-type-indicator{background:var(--skin-paper);border-radius:5px;box-shadow:inset 0 0 0 1px var(--skin-line),0 1px 3px #30261712}
 html[data-skin] #lunoir-app .stock-view-tabs a{color:var(--skin-muted)}
 html[data-skin] #lunoir-app .stock-view-tabs a.is-current{background:var(--skin-paper);color:var(--skin-ink);box-shadow:inset 0 0 0 1px var(--skin-line)}
 html[data-skin] #lunoir-app.kg-catalog .control[data-client-filter-active=yes]{border-color:var(--skin-accent);background-color:var(--skin-soft);box-shadow:inset 2px 0 var(--skin-accent)}
 html[data-skin] #lunoir-app.kg-catalog .bottom,html[data-skin] #lunoir-app.kg-catalog .bottom.presale-submit,html[data-skin] #lunoir-app .selection-footer {
  background:linear-gradient(110deg,var(--skin-action),var(--skin-action-end));border-color:var(--skin-rail-line);border-radius:9px;box-shadow:inset 0 1px #fff7e810,0 7px 23px #151b1623;color:var(--skin-on-rail);
 }
 html[data-skin] #lunoir-app.kg-catalog .bottom{bottom:calc(14px + env(safe-area-inset-bottom))}
 html[data-skin] #lunoir-app.kg-catalog .bottom :is(.selection,.combined-summary>summary,.total,[data-combined-total],.total strong,.client-split-totals strong){color:var(--skin-on-rail)}
 html[data-skin] #lunoir-app.kg-catalog .bottom :is(.selection small,.total small,.client-split-totals){color:var(--skin-rail-muted)}
 html[data-skin] #lunoir-app.kg-catalog .bottom .primary{background:var(--skin-button);border-color:var(--skin-button);color:var(--skin-button-ink);box-shadow:inset 0 1px #ffffff80;border-radius:5px}
 html[data-skin] #lunoir-app.kg-catalog .bottom .primary:disabled{opacity:.55}
 html[data-skin] #lunoir-app :is(.combined-summary-body,.selection-panel,.ui-filter-sheet,.kg-filter-popup,.filter-panel,.dropdown-menu,.modal-content,.ui-toast){background:var(--skin-paper);border-color:var(--skin-line);color:var(--skin-ink);border-radius:8px;box-shadow:0 12px 36px #30281720}
 html[data-skin] #lunoir-app .combined-summary-body :is(h2,p,.btn-link){color:var(--skin-muted)}
 html[data-skin] #lunoir-app .combined-summary-body li{border-color:var(--skin-line)}
 html[data-skin] #lunoir-app .modal.fade .modal-dialog{transform:translateY(6px) scale(.985);transition:transform 210ms cubic-bezier(.16,1,.3,1)}
 html[data-skin] #lunoir-app .modal.show .modal-dialog{transform:none}
 html[data-skin] #lunoir-app .offcanvas{--bs-offcanvas-transition:transform 260ms cubic-bezier(.16,1,.3,1)}
 html[data-skin] #lunoir-app :is(.modal-backdrop,.offcanvas-backdrop).show{opacity:.25}
 html[data-skin] #lunoir-app .skin-selection-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(410px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--skin-line);border-radius:0;padding:0;background:var(--skin-paper);color:var(--skin-ink);box-shadow:-8px 0 35px #2f261b12;overflow:hidden}
 html[data-skin] #lunoir-app .skin-selection-dialog[open]{display:flex;flex-direction:column;animation:skin-drawer-in 240ms cubic-bezier(.16,1,.3,1)}
 html[data-skin] #lunoir-app .skin-selection-dialog::backdrop{background:#171b1640}
 html[data-skin] #lunoir-app .skin-selection-dialog .skin-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--skin-line);flex:none;background:transparent}
 html[data-skin] #lunoir-app .skin-drawer-head h2{margin:0;font-size:19px;color:var(--skin-ink)}
 html[data-skin] #lunoir-app .skin-selection-dialog .combined-summary-body{position:static;width:100%;min-width:0;max-width:none;max-height:none;flex:1;overflow:auto;padding:20px 22px;border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;transform:none!important;opacity:1!important}
 html[data-skin] #lunoir-app .skin-drawer-foot{padding:16px 22px max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--skin-line);flex:none;margin:0}
 html[data-skin] #lunoir-app .skin-drawer-foot .btn{width:100%}
 @keyframes skin-drawer-in{from{opacity:.7;translate:16px 0}to{opacity:1;translate:0 0}}
 /* Preview controls are themed; paper/PDF contents and print CSS are untouched. */
 html[data-skin] #lunoir-app.document-preview :is(.document-preview-tools,.document-preview-scroll){background:var(--skin-paper);border-color:var(--skin-line);box-shadow:0 4px 20px #30261705}
 html[data-skin] #lunoir-app.document-preview .document-preview-back{color:var(--skin-ink)}
 html[data-skin] #lunoir-app.document-preview .sales-document{background:var(--skin-paper);border-color:var(--skin-line);color:var(--skin-ink)}
 html[data-skin] #lunoir-app.document-preview :is(.document-state,.document-mobile-totals,.document-lines .document-payable){background:var(--skin-soft);color:var(--skin-ink);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app.document-preview .document-lines tbody tr:nth-child(even){background:var(--skin-hover)}
 html[data-skin] #lunoir-app footer.container{color:var(--skin-muted)!important}
 @media(min-width:1200px){
  html[data-skin] #lunoir-app.client-workbench{--client-rail:204px;--client-gutter:24px;padding-left:var(--client-rail)}
  html[data-skin] #lunoir-app.staff-workbench .staff-navigation{inset:0 auto 0 0;width:204px;height:100dvh;border-radius:0;border:0;border-right:1px solid var(--skin-rail-line);box-shadow:none}
  html[data-skin] #lunoir-app.staff-workbench .site-header .brand{left:29px;top:25px}
  html[data-skin] #lunoir-app.staff-workbench .site-header .brand span{color:var(--skin-rail-muted)}
  html[data-skin] #lunoir-app.staff-workbench .role-nav>.container{padding-inline:14px}
  html[data-skin] #lunoir-app.staff-workbench main.container{min-height:calc(100dvh - 145px)}
  html[data-skin] #lunoir-app.client-workbench .site-header{inset:0 auto 0 0;width:204px;height:100dvh;border-radius:0;border:0;border-right:1px solid var(--skin-rail-line);background:linear-gradient(150deg,var(--skin-rail),var(--skin-rail-end));box-shadow:none}
  html[data-skin] #lunoir-app.client-workbench .site-header .header-inner{height:100dvh}
  html[data-skin] #lunoir-app.client-workbench .client-navigation{min-height:0;overflow-y:auto;scrollbar-width:thin;background:transparent!important;flex:1}
  html[data-skin] #lunoir-app.client-workbench .site-header .brand span{color:var(--skin-rail-muted)}
  html[data-skin] #lunoir-app.client-workbench:not(.print-view) #main-content.container{min-height:calc(100dvh - 115px);margin-top:0;padding-top:26px!important;padding-inline:0!important}
  html[data-skin] #lunoir-app.client-workbench:not(.print-view) footer.container{padding-inline:0}
  html[data-skin=coffee] .client-navigation .skin-coffee-art{display:block;flex-shrink:0;height:122px;min-height:122px;margin:auto 14px 18px;border:1px solid #ac8c5955;border-radius:3px;background:linear-gradient(#171b1610,#171b1620),url("brand/coffee-mood.png") center/cover no-repeat}
  html[data-skin=coffee] #lunoir-app .client-navigation .account-menu{margin-top:0}
 }
 @media(min-width:1200px) and (max-height:760px){html[data-skin=coffee] .client-navigation .skin-coffee-art{display:none}html[data-skin=coffee] #lunoir-app .client-navigation .account-menu{margin-top:auto}}
 @media(max-width:1199.98px){
 html[data-skin] #lunoir-app.staff-workbench .staff-navigation .staff-account-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:16px 14px;flex:none;padding:16px 0 0;border-top:1px solid var(--skin-rail-line);color:var(--skin-on-rail)}
 html[data-skin] #lunoir-app.staff-workbench .staff-account-tools :is(.account-self-link,.text-button,.usage-help-entrypoint){display:flex;align-items:center;justify-content:flex-start;min-height:40px;margin:0;padding:6px 0;color:var(--skin-on-rail);font-size:13px;border:0;background:transparent}
 html[data-skin] #lunoir-app.staff-workbench .staff-account-tools>.skin-picker{display:flex;grid-column:1/-1;margin:0;padding:0;border:0}
 html[data-skin] #lunoir-app.staff-workbench .staff-account-tools>.account-name{display:block;grid-column:1/-1;font-size:13px;color:var(--skin-rail-muted)}
 html[data-skin] #lunoir-app.staff-workbench .staff-account-tools>.account-avatar{display:none}
 html[data-skin] #lunoir-app.staff-workbench .staff-account-tools .skin-picker select{width:100%;max-width:none;flex:1;min-height:40px;font-size:13px}
 html[data-skin] #lunoir-app.staff-workbench .staff-account-tools .skin-picker svg{display:block}
 html[data-skin] #lunoir-app.staff-workbench .staff-account-tools .usage-help-entrypoint{grid-column:1/-1}

  html[data-skin] #lunoir-app .site-header{background:linear-gradient(120deg,var(--skin-rail),var(--skin-rail-end));color:var(--skin-on-rail);border-color:var(--skin-rail-line)}
  html[data-skin] #lunoir-app .site-header .brand img{filter:brightness(0) invert(1)}
  html[data-skin] #lunoir-app .site-header :is(.brand span,.account-menu,.account-self-link,.text-button){color:var(--skin-rail-muted)}
  html[data-skin] #lunoir-app .site-header .skin-picker select{background-color:var(--skin-rail-end);color:var(--skin-on-rail);border-color:var(--skin-rail-line)}
  html[data-skin] #lunoir-app .client-navigation{overflow-y:auto}

  html[data-skin] #lunoir-app #main-content.container{min-height:calc(100dvh - 156px)}
 }
 @media(max-width:760px){
  html[data-skin] #lunoir-app .staff-workbench{padding-left:0}
  html[data-skin] #lunoir-app.staff-workbench .account-menu{gap:8px}
  html[data-skin] #lunoir-app.staff-workbench .site-header .skin-picker svg{display:none}
  html[data-skin] #lunoir-app.staff-workbench .site-header .skin-picker select{width:98px;min-width:98px;max-width:98px;font-size:11px;padding:2px}
  html[data-skin] #lunoir-app.staff-workbench .site-header .brand img{width:100px;max-width:100px}
  html[data-skin] #lunoir-app .skin-selection-dialog{inset:auto 0 0;margin:0;width:100%;height:auto;max-height:83dvh;border:1px solid var(--skin-line);border-radius:16px 16px 0 0}
  html[data-skin] #lunoir-app .skin-selection-dialog[open]{animation-name:skin-sheet-in}
  html[data-skin] #lunoir-app.kg-catalog .bean-row .mobile-purchase-strip{background:var(--skin-soft);border-color:var(--skin-line)}
  html[data-skin] #lunoir-app.kg-catalog .bean-row:is(.chosen,.is-selected,[data-client-chosen=yes]) .mobile-purchase-strip{background:var(--skin-selected)}
  html[data-skin] #lunoir-app.kg-catalog .bean-row .qty input,html[data-skin] #lunoir-app.kg-catalog .bean-row .qty input:focus{background:transparent;border:0;box-shadow:none}
  @keyframes skin-sheet-in{from{opacity:.7;translate:0 16px}to{opacity:1;translate:0 0}}
 }
 @media(max-width:370px){html[data-skin] #lunoir-app.staff-workbench .site-header .brand img{width:84px;max-width:84px}html[data-skin] #lunoir-app.staff-workbench .header-inner{gap:6px;padding-inline:10px}html[data-skin] #lunoir-app.staff-workbench .account-menu{gap:5px}}
 @media(hover:hover) and (pointer:fine){html[data-skin] #lunoir-app.kg-catalog .bean-row:not([data-sample-ready]):not(.chosen):not([data-client-chosen=yes]):not(:focus-within):hover{background:var(--skin-hover)}}
 @media(pointer:coarse) and (orientation:landscape){html[data-skin] #lunoir-app .skin-selection-dialog{inset:0 0 0 auto;width:min(410px,92vw);height:100dvh;max-height:100dvh;border-radius:0}}
 @media(prefers-reduced-motion:reduce){html[data-skin] #lunoir-app *,html[data-skin] #lunoir-app *::before,html[data-skin] #lunoir-app *::after{animation-duration:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}}
 html[data-ui-input=keyboard] .skin-selection-dialog{animation:none!important}
}

/* S25 page audit: screen surfaces share tokens; business states stay semantic. */
@media screen {
 html[data-skin] #lunoir-app :is(.order-company-snapshot,.order-identity,.order-identity>span:not(.order-type-badge),.mobile-next-link,.mobile-quantity-label,.mobile-subtotal-label,.qty>span,.order-contact-summary,.stock-entry-note){color:var(--skin-muted)}
 html[data-skin] #lunoir-app .order-status-summary{background:linear-gradient(120deg,var(--skin-soft),var(--skin-paper));border-color:var(--skin-line)}
 html[data-skin] #lunoir-app :is(.order-contact-summary,.flow-track,.confirmation-note,.box-input-row,.contact-row,.saved-invoice-profile){background-color:var(--skin-hover);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app :is(.flow-track,.confirmation-note,.flow-track .is-complete){color:var(--skin-muted)}
 html[data-skin] #lunoir-app .flow-track .is-current{background:var(--skin-selected);color:var(--skin-ink)}
 html[data-skin] #lunoir-app .order-sheet :is(table thead th,table thead td){background:var(--skin-soft);color:var(--skin-muted);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app .contact-row{display:block}
 html[data-skin] #lunoir-app .contact-row .form-grid .form-field:last-child{grid-column:1/-1}
 html[data-skin] #lunoir-app .contact-delete-check{display:flex;align-items:center;gap:8px;min-height:32px;margin:10px 0 0;font-size:12px;color:var(--skin-muted);cursor:pointer}
 html[data-skin] #lunoir-app .contact-delete-check input{width:16px;height:16px;min-height:16px;margin:0;flex:none}
 html[data-skin] #lunoir-app .ui-context-help{font-size:12px;line-height:1.7;color:var(--skin-muted);margin:10px 0 16px}
 html[data-skin] #lunoir-app .ui-context-help summary{width:fit-content;min-height:28px;cursor:pointer;color:var(--skin-ink)}
 html[data-skin] #lunoir-app .ui-context-help p{margin:8px 0 0;max-width:80ch}
 html[data-skin] #lunoir-app .ui-context-help:focus-within{outline-offset:3px}
}

@media screen {
 html[data-skin] #lunoir-app :is(.package-option label>span,.package-option small,.quantity-control>span,.line-total,.arrival-related>span,.kg-entry-frame>span,.kg-entry>span,.page-heading>div>p,.document-footnote p,.document-lines small){color:var(--skin-muted)}
 html[data-skin] #lunoir-app .status-pill.status-cancelled{color:#62685c}
}

@media screen {
 html[data-skin] #lunoir-app .export-card dt{color:var(--skin-muted)}
 html[data-skin] #lunoir-app .export-card dl{background:var(--skin-soft);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app .checkout-result-table thead th{background:var(--skin-soft);color:var(--skin-muted);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app .checkout-result-table tbody tr{background:var(--skin-paper)}
}

@media screen {html[data-skin] #lunoir-app .text-danger{color:#b02a37!important}}

/* Shared single-select affordance and deletion controls; dimensions stay local. */
html[data-skin] #lunoir-app{
 --skin-select-arrow:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23595046' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-skin] #lunoir-app select:not([multiple]):not([size]){
 appearance:none;background-image:var(--skin-select-arrow);background-repeat:no-repeat;background-position:right .65rem center;background-size:16px 16px;padding-inline-end:2rem;
}
html[data-skin] #lunoir-app :is(.client-navigation,.staff-navigation,.site-header) .skin-picker select{
 --skin-select-arrow:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6efe5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-skin] #lunoir-app .skin-picker select{padding-inline-end:24px;background-position:right 7px center}
html[data-skin] #lunoir-app .delete-option{display:inline-flex;align-items:center;gap:7px;width:auto;max-width:100%;margin:8px 0 0;font-size:13px;font-weight:400;line-height:1.5;cursor:pointer;color:var(--skin-muted)}
html[data-skin] #lunoir-app .delete-option[hidden]{display:none}
html[data-skin] #lunoir-app .delete-option input[type=checkbox]{appearance:auto;accent-color:var(--skin-accent);width:16px;height:16px;min-width:16px;min-height:0;max-width:16px;flex:0 0 16px;margin:0;padding:0;vertical-align:middle;box-shadow:none;background-image:none;cursor:inherit}
html[data-skin] #lunoir-app .delete-option input[type=checkbox]:focus-visible{outline:2px solid var(--skin-accent);outline-offset:3px}
html[data-skin] #lunoir-app .delete-option:has(input:disabled){cursor:default;opacity:.65}
@media(forced-colors:active){html[data-skin] #lunoir-app select:not([multiple]):not([size]){appearance:auto;background-image:none}html[data-skin] #lunoir-app .delete-option input[type=checkbox]{forced-color-adjust:auto}}

/* Keep compact text geometry while making account and detail actions easier to hit. */
/* Authentication has one centered content rail, including navigation and footer. */
@media screen {
 html[data-skin] #lunoir-app .stock-sold-out{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;width:max-content;max-width:100%;padding:3px 10px;border:1px solid var(--skin-line);border-radius:999px;background:var(--skin-soft);color:var(--skin-muted);font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap}
 html[data-skin] #lunoir-app .stock-sold-out::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:currentColor;opacity:.7}
}
@media screen {
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) #main-content.container,
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) footer.container{width:calc(100% - 32px);max-width:980px;margin-inline:auto;padding-inline:0!important}
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) #main-content.container{min-height:0;margin-top:0;border:0;padding-top:32px!important;padding-bottom:16px!important}
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) .auth-shell{width:100%;max-width:none;margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) footer.container{margin-top:0;text-align:center;justify-content:center}
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) footer .trial-note{text-align:inherit}
 html[data-skin] #lunoir-app .auth-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0 0 20px;padding:4px;border:1px solid var(--skin-line);border-radius:7px;background:var(--skin-soft)}
 html[data-skin] #lunoir-app .auth-methods :is(a,span){display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px;border:1px solid transparent;border-radius:4px;font-size:14px;line-height:1.5;text-decoration:none;color:var(--skin-muted)}
 html[data-skin] #lunoir-app .auth-methods [aria-current]{background:var(--skin-paper);border-color:var(--skin-line);color:var(--skin-ink);font-weight:600;box-shadow:0 1px 3px #201a1210}
 html[data-skin] #lunoir-app .auth-methods a:hover{background:var(--skin-hover);color:var(--skin-ink)}
 html[data-skin] #lunoir-app .auth-methods a:focus-visible{outline:2px solid var(--skin-accent);outline-offset:1px}
}
@media screen and (max-width:760px){
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) #main-content.container,
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) footer.container{max-width:500px}
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) #main-content.container{padding-top:20px!important}
 html[data-skin] #lunoir-app.auth-surface:not(.page-profile) .auth-shell{grid-template-columns:minmax(0,1fr)}
}
@media screen {
 html[data-skin] #lunoir-app.staff-workbench .account-menu :is(.account-self-link,form>.text-button){display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:32px;box-sizing:border-box}
 html[data-skin] #lunoir-app .client-navigation .btn-close{box-sizing:border-box;flex:none;width:32px;height:32px}
 html[data-skin] #lunoir-app button.bean-name:is([data-kg-details],[data-tasting-details]){position:relative}
 html[data-skin] #lunoir-app button.bean-name:is([data-kg-details],[data-tasting-details])::after{content:"";position:absolute;inset:-3px 0;pointer-events:auto}
}
@media screen and (max-width:760px){
 html[data-skin] #lunoir-app.kg-catalog .bottom button.selection[data-show-selection]{padding-top:9px;margin-top:-9px;min-height:24px}
}

/* Stock tabs always follow the active skin; never imply selection on hover. */
@media screen {
 html[data-skin] #lunoir-app .stock-view-tabs a:not(.is-current):hover{background:var(--skin-hover);color:var(--skin-ink);transform:none}
 html[data-skin] #lunoir-app .stock-view-tabs a:focus-visible{outline-color:var(--skin-accent)}
}

@media screen{html[data-skin] #lunoir-app .skip-link:not(:focus-visible){transform:translateY(-200%);pointer-events:none}html[data-skin] #lunoir-app .skip-link:focus-visible{transform:none;pointer-events:auto}}

/* Preview chrome follows the selected skin; the printable paper stays neutral. */
@media screen {
 html[data-skin] #lunoir-app.document-preview :is(.document-preview-tools,.document-preview-scroll){background:var(--skin-soft);border-color:var(--skin-line);box-shadow:0 8px 26px #211b1308}
 html[data-skin] #lunoir-app.document-preview :is(.document-preview-back,.document-preview-context){color:var(--skin-ink)}
 html[data-skin] #lunoir-app.document-preview .document-preview-tools .btn{border-radius:6px}
 html[data-skin] #lunoir-app.document-preview .document-preview-tools .btn-outline-secondary{background:var(--skin-paper);color:var(--skin-ink);border-color:var(--skin-line)}
 html[data-skin] #lunoir-app.document-preview .document-preview-tools .btn-primary{background:linear-gradient(145deg,var(--skin-action),var(--skin-action-end));color:var(--skin-on-rail);border-color:var(--skin-action)}
}