:root{font-family:'Microsoft YaHei','PingFang SC',sans-serif;color:#22382f;background:#f5f6f2;font-synthesis:none;--green:#235e47;--muted:#607269;--line:#dce4dc;--soft:#e8f0e7}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:3px}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:var(--green)}.shell{display:grid;grid-template-columns:216px 1fr;min-height:100vh}.sidebar{padding:27px 18px;background:#193e30;color:#e6f0e7;display:flex;flex-direction:column;gap:22px}.brand{font-size:23px;letter-spacing:2px;font-weight:600}.brand small{display:block;font-size:11px;letter-spacing:2.8px;color:#acc3b4;margin-top:7px}.nav{display:grid;gap:5px}.nav button{background:none;color:#c3d7ca;border:0;text-align:left;padding:13px 15px;border-radius:7px}.nav button.active{background:#315844;color:#fff}.nav button:hover{background:#294f3c}.sidebar-foot{font-size:12px;color:#b1c6b9;margin-top:auto;line-height:1.8}.main{min-width:0}.topbar{min-height:77px;padding:18px 32px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar small{display:block;color:var(--muted);margin-top:5px}.page{padding:30px 32px;max-width:1600px;margin:auto}h1{font-size:26px;font-weight:600;margin:0 0 8px}h2{font-size:18px;font-weight:600;margin:0 0 17px}h3{font-size:15px;margin:0 0 12px}.muted{color:var(--muted);font-size:13px;line-height:1.7}.intro{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:25px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.button{border:1px solid var(--line);background:#fff;color:#244936;border-radius:6px;padding:9px 14px;min-height:40px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}.button.primary{color:#fff;background:var(--green);border-color:var(--green)}.button.danger{color:#a3342c}.button.small{min-height:32px;padding:5px 9px;font-size:12px}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid>.panel{margin-bottom:0}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:24px}.stat{background:#fff;border:1px solid var(--line);border-radius:9px;padding:19px}.stat .value{font-size:30px;margin:10px 0 4px;font-variant-numeric:tabular-nums}.stat .label{font-size:13px;color:var(--muted)}.tag{display:inline-block;font-size:12px;line-height:1.5;padding:4px 8px;background:var(--soft);color:#315e42;border-radius:5px;white-space:nowrap}.tag.warn{background:#fff0d9;color:#84541d}.tag.bad{background:#fce6e1;color:#9b372a}.row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #e9ede7}.row:last-child{border:0}.row strong{font-size:14px;display:block}.empty{padding:35px 16px;text-align:center;color:var(--muted);font-size:14px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{color:var(--muted);text-align:left;font-weight:500;background:#f7f9f5}td,th{padding:13px 12px;border-bottom:1px solid #e8ede6;vertical-align:top}td .muted{font-size:12px}.numeric{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.form{display:grid;gap:16px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;font-size:13px;color:#344f40}.field input,.field select,.field textarea,.search{width:100%;border:1px solid #ccd8cd;border-radius:6px;background:#fff;color:#22382f;padding:11px 12px;min-width:0;font-size:15px}.field textarea{min-height:100px;resize:vertical}.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.7}.check input{margin-top:5px}.hint{background:#f0f5ed;border-left:3px solid #a1b99b;padding:13px 16px;color:#4d6654;font-size:13px;line-height:1.8;margin-bottom:20px}.hint.warning{background:#fff6e6;border-color:#ddb167;color:#745322}.error{color:#a22e27;font-size:13px;line-height:1.6}.login{max-width:480px;margin:8vh auto;padding:30px}.login .logo{font-size:30px;margin:0 0 8px}.login .panel{margin-top:28px;padding:28px}.login h1{font-size:21px}.customer-shell{max-width:650px;margin:0 auto;min-height:100vh;background:#f5f6f2}.customer-shell .topbar{padding:20px}.customer-shell .page{padding:20px}.customer-nav{display:flex;gap:5px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}.customer-nav button{border:0;background:none;padding:11px 15px;color:var(--muted);border-radius:6px}.customer-nav button.active{background:var(--soft);color:var(--green)}dialog{border:1px solid var(--line);border-radius:12px;padding:0;width:min(690px,calc(100% - 30px));max-height:90vh;color:#22382f}dialog::backdrop{background:#132e2599}#modal-content{padding:26px}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}.modal-head h2{margin:0}.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);padding:14px 22px;background:#244b37;color:white;border-radius:8px;z-index:20;display:none}pre.report{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.9 'Microsoft YaHei',sans-serif;background:#fafbf8;padding:22px;border:1px solid var(--line);border-radius:7px;margin:18px 0}.record-code{font-family:monospace;font-size:12px;color:var(--muted)}.search{max-width:310px}.meta-list{display:grid;grid-template-columns:140px 1fr;gap:12px;font-size:14px}.meta-list dt{color:var(--muted)}.meta-list dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.sample-price{font-size:30px;color:var(--green)}.loading{text-align:center;padding:60px}.split-title{display:flex;justify-content:space-between;gap:10px;align-items:center}.model-preview{width:100%;height:330px;background:#f3f4ef;border-radius:8px}.model-preview polygon{stroke:#735b3b;stroke-width:1}.text-link{background:none;border:0;color:var(--green);padding:3px;text-decoration:underline}.spaced{margin-top:20px}.full{width:100%}.nowrap{white-space:nowrap}@media(max-width:980px){.shell{grid-template-columns:175px 1fr}.page{padding:24px 20px}.topbar{padding:18px 20px}.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.sidebar{padding:24px 12px}.brand{font-size:20px}}@media(max-width:620px){.shell{display:block}.sidebar{padding:16px;gap:14px}.brand small,.sidebar-foot{display:none}.nav{display:flex;overflow-x:auto;gap:4px}.nav button{white-space:nowrap;padding:10px}.topbar{padding:14px 16px}.page{padding:22px 16px}.fields{grid-template-columns:1fr}.login{padding:20px;margin:2vh auto}.login .panel{padding:22px}.stats{gap:9px}.stat{padding:15px}.panel{padding:17px}.meta-list{grid-template-columns:90px 1fr}.row{flex-wrap:wrap}.button{min-height:44px}.button.small{min-height:40px}input,select,textarea{font-size:16px!important}.customer-shell .page{padding:16px}}@media print{.sidebar,.topbar,.intro .actions,.button,.customer-nav{display:none!important}.shell{display:block}.page{padding:0}.panel{border:0}body{background:white}pre.report{border:0;background:white}.stats{break-inside:avoid}}
.sales-stat{font:inherit;text-align:left;cursor:pointer;color:inherit;display:flex;flex-direction:column;gap:8px}.sales-stat:hover{border-color:#285d49;background:#f0f6f1}.sales-stat:focus-visible{outline:3px solid #548b70;outline-offset:3px}.sales-stat .stat-link{color:#285d49;font-size:13px;margin-top:auto}.sales-shortcuts{margin:22px 0}.sales-shortcuts .actions{gap:12px}details.panel{margin-top:22px}details.panel summary{cursor:pointer}
.care-light{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:15px;font-size:13px;white-space:nowrap}.care-light:before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}.care-green{color:#1c6b40;background:#e7f5ea}.care-yellow{color:#846000;background:#fff1be}.care-red{color:#ae2626;background:#ffe5e5}
.intent-thumbnail{display:block;width:80px;height:80px;object-fit:contain;background:#fff;border:1px solid #dce5dd;border-radius:8px}.intent-image-link{display:inline-flex;flex-direction:column;gap:5px;text-decoration:none;min-width:85px}.intent-image-link .muted{font-size:12px}.intent-image-empty{display:flex;width:85px;min-height:80px;padding:10px;align-items:center;justify-content:center;text-align:center;background:#f1f3ef;border-radius:8px;color:#68756d;font-size:12px}

.environment-banner{background:#fff3d6;color:#5d4210;padding:10px 20px;font-size:14px;border-bottom:1px solid #e3cd91}.environment-banner a{color:#235e47}

.nav .nav-group{border-bottom:1px solid rgba(255,255,255,.12);padding:5px 0}.nav .nav-group summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 10px;color:#eef5ef;font-weight:600;font-size:14px;border-radius:6px}.nav .nav-group summary::after{content:'›';font-size:20px;transition:transform .15s}.nav .nav-group[open] summary::after{transform:rotate(90deg)}.nav .nav-group summary:hover{background:rgba(255,255,255,.08)}.nav-children{display:grid;gap:3px;padding:0 0 9px 12px}.nav .nav-children button,.nav .nav-children a{display:block;width:100%;box-sizing:border-box;text-align:left;padding:10px 12px;border:0;border-radius:5px;text-decoration:none;background:transparent;color:#ccded2;font-size:13px;line-height:1.5}.nav .nav-children button:hover,.nav .nav-children a:hover{background:rgba(255,255,255,.09);color:white}.nav .nav-children button.active{background:#eaf2e9;color:#214e38;font-weight:600}.nav summary:focus-visible,.nav a:focus-visible{outline:2px solid #b9d9b7;outline-offset:2px}.sidebar{overflow-y:auto}.sidebar-foot{line-height:1.8}@media(max-width:620px){.sidebar .nav{display:block;max-height:45vh;overflow-y:auto}.nav-children{grid-template-columns:repeat(2,minmax(0,1fr))}.nav .nav-group summary{padding:9px 10px}}

/* Login password visibility */
.login-password-wrap{display:flex;align-items:stretch;gap:8px}.login-password-wrap input{flex:1;min-width:0}.login-password-toggle{flex:none;min-width:64px;min-height:44px;border:1px solid #ccd8cd;border-radius:6px;background:#fff;color:#344f40;font:inherit;cursor:pointer}.login-password-toggle:focus-visible{outline:2px solid #26714c;outline-offset:2px}

/* Staff workspace, 2026-10-04. Shared by the main app and staff-only pages.
   Keep these rules scoped: /shop and the customer workspace use their existing theme. */
.shell, .login, .staff-page, body:has(.shell) > #modal {
  --green: #236653;
  --muted: #61736b;
  --line: #dce5df;
  --soft: #eaf2ed;
  --workspace: #f2f5f3;
  --ink: #243c32;
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}
body:has(.shell), body:has(.login), .staff-page { background: #f2f5f3; }
:where(.shell, .login, .staff-page) :where(h1, h2, h3) { color: #243c32; line-height: 1.4; }
:where(.shell, .staff-page) h1 { font-size: 26px; font-weight: 650; letter-spacing: .02em; }
:where(.shell, .staff-page) h2 { font-size: 18px; }
:where(.shell, .staff-page) h3 { font-size: 15px; }
:where(.shell, .login, .staff-page) :where(a, button, input, textarea, select, summary):focus-visible,
body:has(.shell) #modal :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #448a71;
  outline-offset: 3px;
}
:where(.shell, .login, .staff-page) :where(input, textarea)::placeholder { color: #74847c; opacity: 1; }
:where(.shell, .staff-page) :where(h1, h2, h3, p, .muted) { overflow-wrap: anywhere; }

/* A quiet navigation rail keeps the active task, rather than the chrome, prominent. */
.shell { grid-template-columns: 236px minmax(0, 1fr); background: var(--workspace); }
.shell .sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 28px 16px 20px;
  gap: 22px;
  background: #f8faf8;
  color: var(--ink);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: #c1d2c8 transparent;
}
.shell .brand { position: relative; padding: 2px 0 19px 47px; font-size: 22px; letter-spacing: 1px; color: #205640; border-bottom: 1px solid var(--line); }
.shell .brand::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 30px;
  height: 36px;
  border: 1px solid #a5bbaa;
  border-radius: 3px 9px 3px 9px;
  background: linear-gradient(#f8faf8 0 0) 50% 35% / 24px 2px no-repeat,
    linear-gradient(#f8faf8 0 0) 50% 70% / 24px 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 6px, #367254 6px 8px);
}
.shell .brand small { margin-top: 4px; font-size: 9px; font-weight: 500; letter-spacing: .65px; color: #657d6e; }
.shell .nav { gap: 9px; }
.shell .nav .nav-group { padding: 0; border: 0; }
.shell .nav .nav-group summary { padding: 9px 12px; color: #637b6b; font-size: 12px; font-weight: 600; }
.shell .nav .nav-group summary::after { color: #749180; font-size: 17px; }
.shell .nav .nav-group summary:hover { background: #edf2ed; color: #24553e; }
.shell .nav-children { gap: 3px; padding: 2px 0 5px; }
.shell .nav .nav-children :is(button, a) {
  padding: 10px 12px 10px 20px;
  min-height: 40px;
  border-radius: 6px;
  color: #415c4d;
  font-size: 13px;
  line-height: 1.55;
}
.shell .nav .nav-children :is(button, a):hover { background: #eaf1eb; color: #205640; }
.shell .nav .nav-children button.active { background: #deece2; color: #174c34; box-shadow: inset 3px 0 #347553; font-weight: 650; }
.shell .nav :is(summary, a, button):focus-visible { outline: 3px solid #448a71; outline-offset: 3px; }
.shell .sidebar-foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); color: #6b8072; font-size: 11px; }
.shell .topbar { min-height: 82px; padding: 16px 32px; background: #fff; border-bottom: 1px solid var(--line); }
.shell .topbar > div:first-child { font-size: 15px; font-weight: 600; }
.shell .topbar small { font-size: 12px; font-weight: 400; margin-top: 2px; }
.shell .topbar .tag { background: #f1f5f2; font-size: 11px; }
.shell .page { max-width: 1550px; padding: 30px 32px 56px; }
.shell .intro { align-items: flex-start; margin-bottom: 24px; }
.shell .intro h1 { margin-bottom: 7px; }
.shell .intro .muted { max-width: 76ch; }
.shell .panel { border-radius: 10px; padding: 24px; border-color: var(--line); box-shadow: none; }
.shell .grid { gap: 20px; align-items: start; }
.shell .stats { gap: 0; background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.shell .stat { border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 22px 24px; background: transparent; gap: 4px; }
.shell .stat:last-child { border-right: 0; }
.shell .stat .value { font-size: 32px; line-height: 1.25; font-weight: 600; color: #235f45; margin: 10px 0; }
.shell .stat .label { font-size: 13px; color: #61736b; }
.shell .stat .stat-link { font-size: 12px; color: #46725a; }
.shell .sales-stat:hover { background: #f1f7f2; }
.shell .sales-stat:focus-visible { outline-offset: -4px; }
.shell .sales-shortcuts { margin: 20px 0; }
.shell .row { padding: 15px 0; border-color: #e8eee9; }
.shell .empty { padding: 42px 18px; line-height: 1.8; }
.shell .record-code { font-family: inherit; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Shared controls retain clear primary, secondary, warning and disabled states. */
:where(.shell, .login) .button, .staff-page button, body:has(.shell) #modal .button {
  font: inherit;
  font-size: 13px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #c8d8cd;
  border-radius: 6px;
  background: #fff;
  color: #2e6047;
  box-shadow: none;
  text-decoration: none;
}
:where(.shell, .login) .button:hover, .staff-page button:hover, body:has(.shell) #modal .button:hover { background: #edf5ef; border-color: #8dad98; }
:where(.shell, .login) .button.primary, body:has(.shell) #modal .button.primary,
.staff-page button[type="submit"], .staff-page button:not([type]):not([data-action]),
.staff-page button[data-action="confirm-request"], .staff-page button[data-action="quote"],
.staff-page button[data-action="publish"], .staff-page button[data-action="publish-live"] { background: #236653; border-color: #236653; color: white; }
:where(.shell, .login) .button.primary:hover, body:has(.shell) #modal .button.primary:hover,
.staff-page button[type="submit"]:hover { background: #194f40; border-color: #194f40; }
.shell .button.small, body:has(.shell) #modal .button.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.shell .button.danger, body:has(.shell) #modal .button.danger,
.staff-page button[data-action="close-unaccepted"], .staff-page button[data-action="access-reject"],
.staff-page button[data-action="access-suspend"], .staff-page button[value="reject"] { color: #a43d35; background: #fff8f6; border-color: #e7c7c2; }
:where(.shell, .login, .staff-page) button:disabled { cursor: not-allowed; opacity: .5; }
.shell .tag { padding: 3px 9px; border-radius: 4px; }
.shell .tag.warn { color: #825c20; background: #fff2d7; }
.shell .tag.bad { color: #a03d32; background: #fcebe7; }
:where(.shell, .login) :is(.field input, .field select, .field textarea, .search),
.staff-page :is(input, textarea, select), body:has(.shell) #modal :is(input:not([type="checkbox"]), select, textarea) {
  font: inherit;
  font-size: 14px;
  color: #243c32;
  background: #fff;
  border: 1px solid #c7d5cc;
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 42px;
  min-width: 0;
  max-width: 100%;
  box-shadow: none;
}
:where(.shell, .login, .staff-page) :is(input, select, textarea):focus { border-color: #448a71; }
.shell .field, body:has(.shell) #modal .field { gap: 8px; color: #455f4f; }
.shell .hint { border-radius: 0 6px 6px 0; background: #edf4ee; border-color: #93b09b; }
.shell .hint.warning { background: #fff6e6; border-color: #ddb167; }

/* Tables scroll inside their own region, including long SKU and order identifiers. */
.shell .table-wrap, .staff-page :is(.scroll, .table-wrap, .sku-table-scroll, .package-scroll) { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.shell table, .staff-page table { width: 100%; font-size: 13px; border-collapse: collapse; }
.shell th, .staff-page th { padding: 12px 14px; background: #f0f5f1; color: #54705e; font-size: 12px; font-weight: 600; white-space: nowrap; text-align: left; }
.shell td, .staff-page td { padding: 14px; border-bottom: 1px solid #e4ebe6; vertical-align: top; line-height: 1.7; }
.shell tbody tr:hover, .staff-page tbody tr:hover { background: #f6faf7; }
.shell table .numeric { text-align: right; }
.shell td .button { margin: 2px 0; }
.shell .table-wrap :is(td, th):first-child { padding-left: 16px; }
.shell .table-wrap :is(td, th):first-child { min-width: 120px; }

/* Standalone staff pages share the same typography and controls without changing /shop. */
.staff-page > header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding: 18px max(28px, calc((100vw - 1424px) / 2));
  background: #fff;
  border-top: 4px solid #236653;
  border-bottom: 1px solid var(--line);
}
.staff-page > header strong { margin-right: auto; font-size: 18px; font-weight: 650; color: #285b43; }
.staff-page > header a { padding: 5px 0; font-size: 13px; text-decoration: none; color: #4c6d59; }
.staff-page > header a:hover { color: #174f35; text-decoration: underline; text-underline-offset: 4px; }
.staff-page > main { width: 100%; max-width: 1480px; margin: 0 auto; padding: 28px 28px 64px; }
.staff-page #content { min-width: 0; }
.staff-page #content > h1 { margin: 0 0 8px; }
.staff-page #content > h2 { margin: 32px 0 16px; padding-left: 12px; border-left: 3px solid #8aaa91; }
.staff-page #content > .muted { max-width: 80ch; margin: 8px 0 22px; }
.staff-page #content > button { margin: 0 0 20px; }
.staff-page .card { min-width: 0; padding: 24px; margin-bottom: 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.staff-page .card > h2 { margin: 0 0 12px; }
.staff-page .card > h3 { margin: 0 0 12px; }
.staff-page .card > p { margin: 10px 0; }
.staff-page .card .card { background: #f8faf8; padding: 18px; border-radius: 6px; }
.staff-page .muted, .staff-page small { color: #61736b; font-size: 13px; }
.staff-page .grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 20px; align-items: start; }
.staff-page .grid > .card { margin-bottom: 0; }
.staff-page .row { justify-content: flex-start; align-items: stretch; gap: 16px; padding: 0; border: 0; }
.staff-page .row > * { flex: 1; min-width: min(160px, 100%); }
.staff-page .toolbar, .staff-page .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.staff-page .toolbar button, .staff-page .tabs button { margin: 0; }
.staff-page button { margin: 4px 4px 4px 0; }
.staff-page label { color: #455f4f; font-size: 13px; margin: 12px 0; }
.staff-page input, .staff-page textarea, .staff-page select { width: 100%; margin: 6px 0 0; }
.staff-page :is(input[type="checkbox"], input[type="radio"]) { width: 18px; min-height: 18px; padding: 0; margin: 0 6px 0 0; accent-color: #236653; }
.staff-page input[type="hidden"] { display: none; }
.staff-page input[type="file"] { height: auto; padding: 9px; background: #f7faf7; }
.staff-page textarea { min-height: 100px; resize: vertical; }
.staff-page fieldset { min-width: 0; border-color: #d7e3da; border-radius: 7px; }
.staff-page .price { color: #245f42; font-size: 24px; line-height: 1.4; font-weight: 650; }
.staff-page .hint { background: #edf4ee; color: #526e5c; line-height: 1.8; }
.staff-page #message { margin: 0 0 20px; padding: 12px 16px; border: 1px solid #dfc899; border-radius: 6px; background: #fff7e8; color: #775622; overflow-wrap: anywhere; }
.staff-page #message:empty { display: none; }
.staff-page :is(#error, #form-error) { margin: 12px 0; padding: 0; color: #a43d35; }
.staff-page [hidden] { display: none !important; }
.staff-page .long { overflow-wrap: anywhere; }
.staff-page .empty { padding: 36px 20px; background: white; border: 1px dashed #ccdacf; border-radius: 8px; }

/* Procurement: action queues, compact filtering and a distinct financial summary. */
.staff-purchasing #content > .card:has(> details):has(> h2) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 3px solid #477c59; }
.staff-purchasing #content > .card:has(> details):has(> h2) > :is(h2, p) { grid-column: 1 / -1; margin: 0; }
.staff-purchasing #content > .card:has(> details):has(> h2) > details { min-width: 0; padding: 14px; border: 1px solid #dce6df; border-radius: 6px; background: #f7faf7; }
.staff-purchasing summary { padding: 5px 0; color: #2d674a; font-weight: 600; cursor: pointer; }
.staff-purchasing details > p { font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.staff-purchasing #order-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 12px; align-items: end; }
.staff-purchasing #order-filter label { margin: 0; }
.staff-purchasing #order-filter button { margin: 0; min-height: 44px; white-space: nowrap; }
.staff-purchasing [id^="request-"], .staff-purchasing [id^="order-"] { scroll-margin-top: 24px; }
.staff-purchasing .request-number { color: #718378; font-size: 12px; word-break: break-all; }
.staff-purchasing .request-details { margin: 14px 0; padding: 12px 16px; border: 1px solid #dce7de; border-radius: 6px; background: #f9fbf9; }
.staff-purchasing .request-address { padding: 12px 14px; background: #f0f5f1; border-left: 3px solid #abc3b0; border-radius: 0 4px 4px 0; }
.staff-purchasing .request-totals { padding-top: 14px; border-top: 1px solid #cdddcf; color: #255d42; font-weight: 650; }
.staff-purchasing .order-payment-status { display: inline-block; border: 1px solid #d8e4da; background: #eff5f0; color: #42664e; border-radius: 4px; padding: 4px 10px; font-size: 12px; }
.staff-purchasing .scroll table { min-width: 600px; }
.staff-purchasing td { overflow-wrap: anywhere; }
.staff-purchasing .scroll :is(th, td):not(:first-child) { white-space: nowrap; }

/* Editors and catalogue keep their specialist layouts, with consistent framing. */
body:has(.shell) > #modal, .staff-page dialog {
  border: 1px solid #ccdcd0;
  border-radius: 12px;
  color: #243c32;
  background: #fff;
  max-height: 90dvh;
  box-shadow: 0 20px 70px #193c3029;
}
body:has(.shell) > #modal::backdrop, .staff-page dialog::backdrop { background: #1a352c80; }
.staff-page dialog { width: min(950px, calc(100% - 32px)); padding: 26px; }
.staff-page dialog h2 { padding-bottom: 14px; border-bottom: 1px solid #e1e9e3; }
.staff-page dialog.product-publisher { width: min(1220px, calc(100% - 32px)); background: #f2f5f3; }
.staff-page .publish-nav { background: #f2f5f3; }
.staff-page .publish-section { padding: 24px; border-color: #dce5df; scroll-margin-top: 100px; }
.staff-page .publish-section > h3 { font-size: 19px; }
.staff-page .sku-entry-table button, .staff-page .sku-tools button, .staff-page .bulk-logistics button { color: #2c6548; border-color: #c8d8cd; background: white; }
.staff-page .sku-entry-table button:hover { background: #edf5ef; }
.staff-page .sku-extra summary { color: #2d674a; }
.staff-page .cms-layout { gap: 24px; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); }
.staff-page .cms-layout > *, .staff-page .cms-layout form { min-width: 0; }
.staff-page .cms-preview-panel { border-radius: 10px; background: #edf3ee; top: 24px; }
.staff-page .cms-preview-panel h2 { font-size: 16px; }
.staff-page .cms-save { border-color: #cadacf; border-radius: 8px; }
.staff-page .cms-layout legend { font-size: 17px; }
.staff-page footer { border-top: 1px solid var(--line); gap: 8px; flex-wrap: wrap; }
.staff-page .freight-picker input[type="checkbox"] { width: 19px; height: 19px; min-width: 19px; margin: 0; }

.login { width: min(480px, 100%); max-width: 480px; margin: 8vh auto; padding: 30px 24px; }
.login .logo { color: #235f45; letter-spacing: .08em; font-size: 30px; font-weight: 650; }
.login .panel { border-top: 3px solid #477c59; border-radius: 10px; padding: 28px; margin-top: 24px; box-shadow: 0 12px 35px #274d3510; }
.login .panel > a { display: inline-block; margin-bottom: 18px; font-size: 13px; }
.login h1 { margin: 0 0 10px; font-size: 23px; }
.login .login-password-toggle { border-color: #c7d5cc; color: #3f6650; font-size: 13px; }
.login .button.primary { min-height: 44px; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: 212px minmax(0, 1fr); }
  .shell .sidebar { padding-inline: 12px; }
  .shell .brand { font-size: 20px; padding-left: 43px; }
  .shell .brand small { font-size: 8px; letter-spacing: .3px; }
  .shell .page { padding: 26px 24px 48px; }
  .shell .topbar { padding-inline: 24px; }
  .shell .stat { padding: 20px; }
  .staff-purchasing #content > .card:has(> details):has(> h2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-purchasing #order-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .shell .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .stat { border-bottom: 1px solid var(--line); }
  .shell .stat:nth-child(2n) { border-right: 0; }
  .shell .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .shell .topbar { flex-wrap: wrap; }
  .shell .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .staff-page .cms-layout { grid-template-columns: minmax(0, 1fr); }
  .staff-page .cms-preview-panel { position: static; max-height: none; }
  .staff-page .cms-save { position: static; }
  .staff-purchasing #order-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .shell { display: block; }
  .shell .sidebar { position: static; height: auto; padding: 16px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .shell .brand { padding: 0 0 0 40px; border: 0; font-size: 21px; }
  .shell .brand::before { top: 0; width: 25px; height: 29px; }
  .shell .brand small, .shell .sidebar-foot { display: none; }
  .shell .sidebar .nav { display: block; max-height: 228px; overflow-y: auto; }
  .shell .nav-children { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .nav .nav-children :is(button, a) { padding: 10px 12px; min-height: 44px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .shell .nav .nav-group summary { padding: 9px 10px; }
  .shell .topbar { padding: 16px; gap: 12px; }
  .shell .topbar .actions { gap: 6px; }
  .shell .page { padding: 24px 16px 40px; }
  .shell .intro { gap: 12px; }
  .shell .intro h1, .staff-page h1 { font-size: 23px; }
  .shell .panel, .staff-page .card { padding: 18px; }
  .shell .stat { padding: 17px; }
  .shell .stat .value { font-size: 28px; }
  .shell .fields { grid-template-columns: minmax(0, 1fr); }
  .shell :is(.button, .button.small), .staff-page button { min-height: 44px; }
  .shell .table-wrap table { min-width: 570px; }
  .staff-page > header { gap: 8px 18px; padding: 15px 16px; }
  .staff-page > header strong { width: 100%; order: -1; font-size: 18px; }
  .staff-page > main { padding: 24px 16px 40px; }
  .staff-page .row { display: flex; }
  .staff-page :is(.row > *, .row > label) { min-width: 0; flex-basis: 100%; }
  .staff-page .grid { grid-template-columns: minmax(0, 1fr); }
  .staff-page dialog, .staff-page dialog.product-publisher { padding: 18px; width: calc(100% - 24px); }
  .staff-page .publish-nav { top: -18px; }
  .staff-page dialog.product-publisher .publish-nav { position: static; }
  .staff-page dialog.product-publisher footer { position: static; bottom: auto; }
  .staff-page .publish-section { padding: 16px; }
  .staff-page .request-details { padding: 12px; }
  .staff-page .sku-extra-grid { grid-template-columns: minmax(0, 1fr); }
  .staff-page .freight-zone { gap: 8px; }
  .staff-page .freight-provinces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-page .freight-zone-title { flex-basis: 60px; }
  .login { margin: 3vh auto; padding: 24px 16px; }
  .login .panel { padding: 24px; }
}
@media (max-width: 420px) {
  .staff-purchasing #content > .card:has(> details):has(> h2) { grid-template-columns: minmax(0, 1fr); }
  .staff-purchasing #order-filter { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.shell, .login, .staff-page) *, :where(.shell, .login, .staff-page) *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .shell { display: block; }
  .shell .page, .staff-page > main { padding: 0; max-width: none; }
  .staff-page > header, .staff-page .toolbar, .staff-page #order-filter { display: none; }
  .shell .panel, .staff-page .card { break-inside: avoid; box-shadow: none; }
  .shell .table-wrap, .staff-page .scroll { overflow: visible; }
  .shell .table-wrap table, .staff-page .scroll table { min-width: 0; }
  .staff-page, body:has(.shell) { background: white; }
}