/* =============================================================================================
   CCS design system — shared by Studio Companion (/) and Booking HQ (/booking-admin).
   Taken from the customer booking card (/book): Figtree, near-black ink on a soft grey page,
   white surfaces with hairline borders instead of shadows, an ink ring for "selected", pill chips,
   10px controls, 18px cards, uppercase tracked labels. Colour is only used for state.
   Read DESIGN_SYSTEM.md before adding styles. App-specific layout lives in app.css / hq.css and
   must use these tokens and components rather than new colours, fonts, radii or shadows.
   ============================================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* ink and neutrals */
  --ink: #111111; --ink-2: #2b2b2b; --muted: #6b6b6b; --faint: #a3a3a3;
  --line: rgba(17, 17, 17, .10); --line2: rgba(17, 17, 17, .16);
  --wash: #f5f5f5;          /* page background (the booking card's "cream") */
  --paper: #ffffff;         /* surfaces: cards, inputs, tables */
  --hover: #fafafa;         /* row and control hover */
  --sunken: #ececec;        /* wells, empty tracks, quiet columns */
  /* state colours: a strong tone, an ink tone for text on the soft tint, and the soft tint */
  --ok: #2e8b45;    --ok-ink: #1f6b35;    --oksoft: rgba(46, 139, 69, .10);
  --amber: #e0a400; --amber-ink: #7d5400; --ambersoft: rgba(224, 164, 0, .14);
  --red: #d32f2f;   --red-ink: #b3261e;   --redsoft: rgba(211, 47, 47, .09);
  --blue: #2a6fd6;  --blue-ink: #1d4f9c;  --bluesoft: rgba(42, 111, 214, .10);
  --purple: #6b3fb5; --purple-ink: #5b2a9c; --purplesoft: rgba(107, 63, 181, .10);
  /* dark surfaces (sidebar, hero blocks): the booking card header */
  --night: #111111; --night-2: #1c1c1c; --night-line: rgba(255, 255, 255, .10);
  --on-night: #f5f5f5; --on-night-muted: rgba(245, 245, 245, .58); --on-night-faint: rgba(245, 245, 245, .38);
  /* type */
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* shape */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px;
  --ring: 0 0 0 1px var(--ink);
  --shadow-pop: 0 16px 44px -12px rgba(17, 17, 17, .22);      /* menus, popovers, tooltips */
  --shadow-modal: 0 40px 90px -30px rgba(17, 17, 17, .45);    /* dialogs and drawers only */
  /* spacing (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  /* layout */
  --side: 240px; --content: 1240px;
  color-scheme: light;
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--wash); color: var(--ink); font: 400 14px/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.sm:not(.btn) { color: var(--muted); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--font-code); font-size: .92em; letter-spacing: 0; }
.sp { flex: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 3. Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.kicker:first-child { margin-top: 0; }
.phead { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.phead h1 { margin: 0; font: 800 30px/1.05 var(--font); letter-spacing: -.03em; }
.phead p, .phead .lede { margin: 6px 0 0; color: var(--muted); font-size: 14px; max-width: 64ch; }
.phead .sp { flex: 1; }

/* ---------- 4. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
.btn:hover { border-color: var(--ink); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--on-night); }
.btn.dark:hover { background: #000; }
.btn.white { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: rgba(17, 17, 17, .05); color: var(--ink); }
.btn.green { background: var(--oksoft); border-color: transparent; color: var(--ok-ink); }
.btn.danger, .btn.red { background: var(--paper); border-color: rgba(211, 47, 47, .35); color: var(--red-ink); }
.btn.danger:hover, .btn.red:hover { background: var(--redsoft); border-color: var(--red); }
.btn.solid-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.pill { border-radius: var(--r-pill); }
.btn.sm { min-height: 32px; padding: 4px 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn.lg { min-height: 46px; padding: 11px 18px; font-size: 14px; border-radius: var(--r-md); }
.btn.block { display: flex; width: 100%; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--paper); color: var(--ink); }
.iconbtn:hover { border-color: var(--ink); }
.iconbtn svg { width: 18px; height: 18px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* busy state: the label stays for layout, a spinner shows instead */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; opacity: .8; }
button.busy, .btn.busy { position: relative; color: transparent !important; pointer-events: none; }
button.busy::after, .btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -9px 0 0 -9px; border: 2px solid var(--muted); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.dark.busy::after { border-color: #fff; border-right-color: transparent; }

/* ---------- 5. Chips and badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; min-height: 22px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
/* tones (canonical name first, legacy synonym second) */
.chip.ok, .chip.green { background: var(--oksoft); border-color: transparent; color: var(--ok-ink); }
.chip.amber, .chip.amb { background: var(--ambersoft); border-color: transparent; color: var(--amber-ink); }
.chip.red, .chip.bad { background: var(--redsoft); border-color: transparent; color: var(--red-ink); }
.chip.blue { background: var(--bluesoft); border-color: transparent; color: var(--blue-ink); }
.chip.purple { background: var(--purplesoft); border-color: transparent; color: var(--purple-ink); }
.chip.dark, .chip.blk { background: var(--ink); border-color: var(--ink); color: var(--on-night); }
.chip.quiet { background: var(--sunken); border-color: transparent; color: var(--muted); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink); font-size: 11px; font-weight: 700; }
.count.alert { background: var(--red); color: #fff; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.dot.ok { background: var(--ok); } .dot.warn, .dot.busy { background: var(--amber); } .dot.bad, .dot.err { background: var(--red); }
.dot.amber, .dot.amb { background: var(--amber); } .dot.red { background: var(--red); } .dot.blue { background: var(--blue); } .dot.purple { background: var(--purple); } .dot.quiet { background: var(--faint); }
/* State chip: a status shown by colour, with a leading dot in the chip's own colour (the booking card's label dot) */
.chip.stat::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- 6. Forms ---------- */
.in, select.in, textarea.in { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font-size: 14px; transition: border-color .12s, box-shadow .12s; }
.in:hover { border-color: rgba(17, 17, 17, .3); }
.in:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.in::placeholder { color: var(--faint); }
textarea.in { min-height: 84px; resize: vertical; line-height: 1.5; }
select.in, .selx { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.selx { min-height: 40px; padding: 7px 34px 7px 12px; border: 1px solid var(--line2); border-radius: var(--r-md); background-color: var(--paper); font-size: 13px; font-weight: 600; }
label.f, .f { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.fld + .fld { margin-top: 14px; }
.tick { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tick input[type=checkbox], .tick input[type=radio] { -webkit-appearance: none; appearance: none; width: 19px; height: 19px; margin: 0; flex: none; border: 1.5px solid var(--ink); border-radius: var(--r-xs); background: var(--paper); display: inline-grid; place-items: center; }
.tick input[type=radio] { border-radius: 50%; }
.tick input:checked { background: var(--ink); }
.tick input[type=checkbox]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.tick input[type=radio]:checked { background: var(--paper); }
.tick input[type=radio]:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.sw { position: relative; flex: none; width: 42px; height: 24px; border: 0; border-radius: var(--r-pill); background: var(--line2); transition: background .15s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
.sw.on { background: var(--ink); } .sw.on::after { left: 21px; }

/* ---------- 7. Segmented control and chip pickers ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.seg::-webkit-scrollbar { display: none; }
.seg button { padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--on-night); }
.chipsel { display: flex; flex-wrap: wrap; gap: 8px; }
.chipsel button { padding: 7px 14px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: var(--paper); font-size: 13px; font-weight: 700; }
.chipsel button:hover { border-color: var(--ink); }
.chipsel button.on { background: var(--ink); border-color: var(--ink); color: var(--on-night); }
.chipsel button .dot { margin-right: 7px; vertical-align: 1px; }

/* ---------- 8. Surfaces ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); }
.card.sel, .is-selected { border-color: var(--ink); box-shadow: var(--ring); }
.well { background: var(--wash); border-radius: var(--r-lg); padding: 12px 14px; }
.hero-dark { background: var(--night); color: var(--on-night); border-radius: var(--r-2xl); }
.empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }
.empty b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.callout { border-radius: var(--r-lg); padding: 12px 14px; background: var(--wash); font-size: 13.5px; line-height: 1.5; }
.callout.ok { background: var(--oksoft); color: var(--ok-ink); } .callout.amber { background: var(--ambersoft); color: var(--amber-ink); } .callout.red { background: var(--redsoft); color: var(--red-ink); }

/* ---------- 9. Dark sidebar (both apps) ---------- */
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: calc(20px + env(safe-area-inset-top, 0px)) 12px 14px; background: var(--night); color: var(--on-night); scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side .brand { display: flex; align-items: center; gap: 11px; margin: 2px 8px 10px; padding-bottom: 18px; border-bottom: 1px solid var(--night-line); color: var(--on-night); text-decoration: none; }
.side .brand img { width: 56px; height: auto; display: block; flex: none; opacity: .95; }
.side .brand b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.side .brand small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--on-night-faint); }
.ngroup { margin-top: 12px; }
.ngroup > div:first-child { padding: 0 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-faint); }
.navbtn { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--on-night-muted); font-size: 13.5px; font-weight: 600; text-align: left; text-decoration: none; transition: background .12s, color .12s; }
.navbtn svg { width: 18px; height: 18px; flex: none; }
.navbtn:hover { background: rgba(255, 255, 255, .07); color: var(--on-night); }
.navbtn.on { background: var(--paper); color: var(--ink); }
.navbtn .cnt { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); color: var(--on-night); font-size: 11px; font-weight: 700; }
.navbtn.on .cnt { background: var(--wash); color: var(--ink); }
.navbtn .cnt.alert { background: var(--red); color: #fff; }
.side .foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--night-line); }

/* ---------- 10. Tables ---------- */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th { position: sticky; top: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--hover); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.dtable td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr.click, .dtable.click tbody tr { cursor: pointer; }
.dtable tbody tr.click:hover td, .dtable.click tbody tr:hover td { background: var(--hover); }
.dtable .r { text-align: right; }

/* ---------- 11. Overlays: modal, drawer, popover, toast, tooltip ---------- */
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17, 17, 17, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ds-fade .18s ease-out; }
.modal .box, .modal .mbox, .modal .mcard { width: min(440px, 100%); max-height: 92vh; overflow: auto; padding: 24px; border-radius: var(--r-2xl); background: var(--paper); box-shadow: var(--shadow-modal); animation: ds-rise .22s cubic-bezier(.2, .7, .2, 1); }
.modal .mcard.wide { width: min(920px, 100%); }
.modal h2, .modal h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.modal p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.modal .acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pop { position: absolute; z-index: 30; max-height: 74vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-pop); }
#toast, .toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 200; max-width: min(560px, calc(100vw - 32px)); padding: 11px 16px; border-radius: var(--r-lg); background: var(--ink); color: var(--on-night); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-pop); }
#toast.bad, .toast.bad { background: var(--red-ink); }
.tipbox, .tip { position: fixed; z-index: 300; max-width: 280px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--on-night); font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: var(--shadow-pop); pointer-events: none; }
.tipi { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; vertical-align: 1px; border: 1px solid var(--line2); border-radius: 50%; background: var(--paper); color: var(--muted); font: 700 10px/1 var(--font); font-style: normal; letter-spacing: 0; text-transform: none; cursor: help; }

/* ---------- 12. Avatars ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-night); font-size: 10.5px; font-weight: 700; object-fit: cover; }
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }

/* ---------- 13. Responsive helpers ---------- */
@media (max-width: 700px) {
  .phead { margin-bottom: 16px; }
  .phead h1 { font-size: 26px; }
  .modal { align-items: flex-end; padding: 0; }
  .modal .box, .modal .mbox, .modal .mcard { width: 100%; max-height: 90vh; border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .btn, .in, .selx { min-height: 42px; }
  .btn.sm { min-height: 34px; }
}

/* ---------- 14. Layout utilities (use these instead of inline style="") ---------- */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.hstack { display: flex; align-items: center; gap: 8px; }
.hstack.wrap { flex-wrap: wrap; }
.acts-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.tr { text-align: right; }
.divide-top { border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- 15. Platform shell: page tabs, phone bottom bar, More sheet (drawn by public/nav.js in both pages) ---------- */
/* Page tabs: the screens of one destination (Kit / SOPs, Studios and prices / Extras / Checkout). Under the page title. */
.ptabs { display: flex; gap: 2px; margin: -10px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ptabs a:hover { color: var(--ink); }
.ptabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.ptabs .count { height: 18px; min-width: 18px; font-size: 10.5px; }
.ptabs .count.alert { background: var(--red); color: #fff; }
.phead.tabbed { margin-bottom: 18px; }
.ptlede { margin: -6px 0 18px; color: var(--muted); font-size: 14px; max-width: 72ch; }
/* Phone bottom bar (four destinations and More) */
.bottom { display: none; }
@media (max-width: 899px) {
  .bottom { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ink); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottom button { background: none; border: 0; color: var(--on-night-muted); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; padding: 4px 0; position: relative; }
  .bottom button svg { width: 21px; height: 21px; }
  .bottom button.on { color: #fff; }
  .bottom .cnt { position: absolute; top: 0; left: 50%; margin-left: 6px; min-width: 0; height: auto; font: 700 9px var(--font); background: var(--red); color: #fff; border-radius: var(--r-sm); padding: 0 4px; }
  .ptabs { margin-top: -6px; }
}
/* More sheet: everything not in the bottom bar, by group */
.morescrim { position: fixed; inset: 0; z-index: 44; background: rgba(17, 17, 17, .35); }
.moresheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 86vh; overflow-y: auto; background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-modal); }
.moresheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto 12px; }
.moresheet .mlabel { margin: 12px 4px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.moresheet .mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.moresheet .mgrid button, .moresheet .mextra { position: relative; border: 1px solid var(--line); background: var(--wash); border-radius: var(--r-lg); padding: 14px 6px; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink); }
.moresheet .mextra { flex-direction: row; justify-content: center; width: 100%; margin-top: 12px; padding: 12px; }
.moresheet svg { width: 22px; height: 22px; }
.moresheet .cnt { position: absolute; top: 6px; right: 8px; }