/* ============================================================================
   Microcript design system — adapted from the house STYLE_GUIDE
   (sky → blue, Inter, Remix Icon). Single static stylesheet, mobile-first.
   Per-tenant storefronts override --sky/--blue at runtime via inline :root.
   ============================================================================ */

:root {
    /* Microcript brand — monochrome (black & white) with a dark gradient accent */
    --sky: #2b2b2b; --blue: #0a0a0a; --blue-dark: #000000; --sky-soft: #f1f1f1;
    --teal: #0d9488; --teal-soft: #ccfbf1;
    --green: #059669; --green-soft: #d1fae5;
    --amber: #d97706; --amber-soft: #fef3c7;
    --red: #dc2626; --red-soft: #fee2e2;
    --violet: #7c3aed; --violet-soft: #ede9fe;
    --gray-badge: #64748b; --gray-soft: #f1f5f9;

    --ink: #0a0a0a; --ink-2: #2a2a2a; --muted: #6b7280; --muted-2: #9ca3af;
    --line: #e7e7e7; --line-2: #d6d6d6; --bg: #fafafa; --bg-2: #f3f3f3;
    /* Recessed surface (cards-within-cards, builder rows, avatars). Was undefined
       in this sheet, so dashboard views silently fell back to 3 different hardcodes. */
    --surface: #ffffff; --surface-2: #f3f5fb;

    --radius: 9px; --radius-lg: 12px; --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow:    0 4px 12px -4px rgba(15,23,42,.12);
    --shadow-lg: 0 12px 32px -16px rgba(15,23,42,.18);

    --grad: linear-gradient(135deg, var(--sky), var(--blue));

    /* Dashboard/admin shell geometry. The sidebar width and the desktop top-bar
       height are each referenced from several rules (sidebar, .app-main offset,
       fixed top-bar inset, anchor scroll-margin) — keep them here so the pieces
       can never drift out of agreement. */
    --rail-w: 248px;
    --topbar-h: 64px;
    --mobilebar-h: 65px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--ink); min-height: 100dvh; line-height: 1.5;
    overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
img, svg { max-width: 100%; height: auto; display: block; }
img { content-visibility: auto; }
i[class^="ri-"], i[class*=" ri-"] { font-style: normal; line-height: 1; display: inline-flex; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
[x-cloak] { display: none !important; }

/* ---- View transitions (app feel) ---- */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation-duration: .16s; }
    ::view-transition-new(root) { animation-duration: .16s; }
}

/* ============================ Buttons ============================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer; transition: filter .15s, transform .06s, background .15s, box-shadow .15s;
    font-family: inherit; white-space: nowrap; line-height: 1.1; text-align: center;
}
.btn:active { transform: scale(.975); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--grad); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { filter: brightness(1.06); color: #fff; box-shadow: var(--shadow-lg); }
.btn-secondary { background: #fff; color: var(--ink-2); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--bg-2); color: var(--ink); }
.btn-success { background: var(--green); color: #fff; }
.btn-danger  { background: var(--red); color: #fff; }
.btn-ghost   { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-light   { background: #fff; color: var(--blue); }
.btn-dark    { background: var(--ink); color: #fff; }
.btn.sm { padding: 8px 13px; font-size: 13px; }
.btn.lg { padding: 15px 26px; font-size: 16px; }
.btn-full { width: 100%; }
.icon-btn { width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; font-size: 20px; cursor: pointer; color: var(--ink-2); transition: background .15s; }
.icon-btn:hover { background: var(--bg-2); }

/* Inline add-to-cart control: "Add" button swaps to a − qty + stepper. */
.addctl { display: inline-flex; }
.qstep { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.qstep.full { display: flex; width: 100%; }
.qstep button { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 19px; font-weight: 700; color: var(--blue); line-height: 1; display: grid; place-items: center; }
.qstep.full button { width: auto; flex: 0 0 56px; height: 46px; }
.qstep button:hover { background: var(--bg-2); }
.qstep b { min-width: 30px; text-align: center; font-weight: 800; font-size: 14px; }
.qstep.full b { flex: 1; font-size: 16px; }

/* ============================ Cards ============================ */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.card.lg { padding: 26px; border-radius: var(--radius-lg); }
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }

/* ============================ Badges ============================ */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.badge.gray  { background: var(--gray-soft); color: var(--gray-badge); }
.badge.blue  { background: var(--sky-soft);  color: var(--blue); }
.badge.teal  { background: var(--teal-soft); color: var(--teal); }
.badge.green { background: var(--green-soft);color: var(--green); }
.badge.amber { background: var(--amber-soft);color: var(--amber); }
.badge.red   { background: var(--red-soft);  color: var(--red); }
.badge.violet{ background: var(--violet-soft);color: var(--violet); }

/* ============================ Forms ============================ */
.form-group { margin-bottom: 15px; }
.form-group label, .lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
input, select, textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    font-size: 16px; font-family: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
input[type=color] { padding: 4px; height: 46px; cursor: pointer; }
/* Native checkboxes & radios keep their intrinsic size — the blanket `input{width:100%}` rule above
   otherwise stretches them into a full-width padded box, shoving the adjacent label far to the side. */
input[type=checkbox]:not(.tgl), input[type=radio] {
    width: auto; height: auto; padding: 0; margin: 0; border: 0; border-radius: 0;
    flex: 0 0 auto; accent-color: var(--sky); cursor: pointer;
}
input[type=checkbox]:not(.tgl):focus, input[type=radio]:focus { box-shadow: none; outline: 2px solid var(--sky); outline-offset: 1px; }
/* Native file input — match the design system instead of the raw browser button. */
input[type=file] { padding: 8px 12px; font-size: 14px; color: var(--muted); cursor: pointer; }
input[type=file]::file-selector-button {
    margin-right: 12px; padding: 9px 15px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    background: var(--bg-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
input[type=file]::file-selector-button:hover { background: var(--gray-soft); border-color: var(--muted-2); }
textarea { resize: vertical; min-height: 84px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.input-affix { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.input-affix:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.input-affix input { border: 0; box-shadow: none !important; }
.input-affix .affix { padding: 0 12px; color: var(--muted); font-size: 14px; background: var(--bg-2); align-self: stretch; display: flex; align-items: center; white-space: nowrap; }

/* Payment gateway picker (checkout) — shared by central + storefront. */
.gw-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gw-opt { position: relative; display: block; }
.gw-opt input { position: absolute; inset: 0; opacity: 0; width: auto; cursor: pointer; }
.gw-opt .gw-card { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line-2, #d6d6d6); border-radius: 11px; padding: 11px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.gw-opt .gw-card i { font-size: 20px; color: var(--sky, #0ea5e9); }
.gw-opt .gw-card b { font-size: 14px; display: block; line-height: 1.2; }
.gw-opt .gw-card small { display: block; font-size: 10.5px; opacity: .65; }
.gw-opt input:checked ~ .gw-card { border-color: var(--sky, #0ea5e9); box-shadow: 0 0 0 1px var(--sky, #0ea5e9) inset; }
@media (max-width: 420px) { .gw-pick { grid-template-columns: 1fr; } }

/* ============================ Messages / loaders ============================ */
.msg { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.msg.err  { background: var(--red-soft);   color: #b91c1c; }
.msg.ok   { background: var(--green-soft); color: #047857; }
.msg.info { background: var(--sky-soft);   color: var(--blue); }
/* `.msg warn` was used by the first-party sales board with no rule behind it, so the
   "nothing can be sold on this channel" notice rendered as unstyled body text. Adding the
   modifier keeps the author's intended severity instead of recolouring the message. */
.msg.warn { background: var(--amber-soft); color: #92400e; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.15); border-top-color: var(--blue); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
.spinner.white { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--bg-2) 25%, #e9eef5 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ==================== Lazy media: shimmer → blur-up → fade-in ====================
   Wrap any media in a fixed-ratio .mc-media box. While the real pixels download the
   box shows a moving shimmer (plus an optional blurred LQIP set via style="--lqip:url()").
   Once decoded the image fades in and the shimmer clears. Enhanced by mcLazyMedia() in
   app.js — with JS off the image still shows. Theme-aware (--bg-2) + reduced-motion safe. */
.mc-media { position: relative; overflow: hidden; background: var(--bg-2); }
.mc-media--fill { width: 100%; height: 100%; }
.prod-thumb.mc-media, .sf-pthumb.mc-media { background: var(--bg-2); }   /* theme bg while a real cover loads */
.mc-media img, .mc-media > video, .mc-media > iframe { opacity: 0; transition: opacity .6s ease; }   /* img descendant → also styles <picture> > img */
.mc-media::before, .mc-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mc-media::before {                                   /* blurred low-quality placeholder (Stage 2) */
    z-index: 1; opacity: 0;
    background: var(--lqip, none) center / cover no-repeat;
    filter: blur(18px); transform: scale(1.1); transition: opacity .6s ease;
}
.mc-media[style*="--lqip"]::before { opacity: 1; }
.mc-media::after {                                    /* moving shimmer sheen */
    z-index: 2;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.32) 50%, transparent 80%);
    background-size: 220% 100%; background-repeat: no-repeat;
    animation: sk 1.25s ease-in-out infinite; transition: opacity .5s ease;
}
.mc-media.is-loaded img, .mc-media.is-loaded > video, .mc-media.is-loaded > iframe { opacity: 1; }
.mc-media.is-loaded::before, .mc-media.is-loaded::after { opacity: 0; animation: none; }
.mc-media.is-error img { opacity: 1; }                /* reveal the broken-image glyph rather than nothing */
.mc-media.is-error::before, .mc-media.is-error::after { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
    .mc-media::after { animation: none; }
    .mc-media > img, .mc-media > video, .mc-media > iframe,
    .mc-media::before, .mc-media::after { transition-duration: .01ms; }
}

/* ============================ Stats ============================ */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .stats.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.stat .label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat .value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.stat .ic { font-size: 22px; color: var(--blue); }
.stat.accent { background: var(--grad); color: #fff; border: none; }
.stat.accent .label, .stat.accent .ic { color: rgba(255,255,255,.9); }

/* ============================ Tables ============================ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--bg); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* ============================ Utilities ============================ */
.mt-1{margin-top:6px}.mt-2{margin-top:10px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}.mt-5{margin-top:32px}
.mb-2{margin-bottom:10px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gradient-text { background: linear-gradient(120deg, #0a0a0a, #6b6b6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-bg { background: var(--grad); }
.brand-text { color: var(--blue); }
.logo-chip { border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }

/* ============================ Landing (ld-*) ============================ */
.ld-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
/* Fixed dark-gradient header (monochrome theme signature). */
.ld-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--grad); border-bottom: 1px solid rgba(255,255,255,.08); }
.site { padding-top: 66px; }
.ld-header .ld-wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; position: relative; }
.ld-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; color: #fff; }
.ld-brand .logo { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #0a0a0a; display: grid; place-items: center; font-size: 21px; }
.ld-brand small { display: block; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.65); letter-spacing: .04em; }
.ld-nav-links { display: none; gap: 26px; align-items: center; }
.ld-nav-links a { color: rgba(255,255,255,.82); font-weight: 600; font-size: 14.5px; }
.ld-nav-links a:hover { color: #fff; }
.ld-header-cta { display: flex; align-items: center; gap: 10px; }
/* On the dark header, invert the CTA buttons + burger. */
.ld-header .btn-primary { background: #fff; color: #0a0a0a; box-shadow: none; }
.ld-header .btn-primary:hover { filter: none; background: #f0f0f0; }
.ld-header .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.ld-header .btn-secondary:hover { background: rgba(255,255,255,.1); color: #fff; }
.ld-header .ld-burger { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
@media (max-width: 600px) { .site { padding-top: 58px; } }
/* Desktop: true-centre the nav links in the header (independent of brand/CTA widths). */
@media (min-width: 900px) { .ld-nav-links { display: flex; position: absolute; left: 50%; transform: translateX(-50%); } }
/* On mobile the burger menu carries the CTAs, so hide the inline header
   buttons (they otherwise overflow the row). */
@media (max-width: 899px) { .ld-header-cta .btn { display: none; } }
@media (max-width: 600px) { .ld-header .ld-wrap { height: 58px; padding: 0 14px; } .ld-brand small { display: none; } .ld-brand { font-size: 16px; } }

/* mobile menu (hamburger) */
.ld-burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 22px; color: var(--ink-2); cursor: pointer; }
@media (min-width: 900px) { .ld-burger { display: none; } }
.ld-mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: #fff; z-index: 80; transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.ld-mobile-menu.open { transform: translateX(0); }
.ld-mobile-menu a { padding: 14px 12px; border-radius: 12px; font-size: 16px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 12px; }
.ld-mobile-menu a:hover { background: var(--bg-2); }
.ld-menu-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 70; display: none; }
.ld-menu-backdrop.show { display: block; }

.ld-hero { background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.ld-hero::after { content: ''; position: absolute; width: 520px; height: 520px; right: -180px; top: -180px; background: radial-gradient(circle, rgba(10,10,10,.05), transparent 70%); border-radius: 50%; }
.ld-hero .ld-wrap { display: grid; grid-template-columns: 1fr; gap: 34px; padding: 44px 20px 52px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 920px) { .ld-hero .ld-wrap { grid-template-columns: 1.05fr .95fr; padding: 76px 20px 84px; } }
.ld-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--sky-soft); color: var(--blue); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm); }
.ld-hero h1 { font-size: 36px; line-height: 1.07; font-weight: 800; letter-spacing: -.025em; margin: 16px 0 14px; }
@media (min-width: 920px) { .ld-hero h1 { font-size: 54px; } }
.ld-hero p.lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 540px; margin-bottom: 26px; }
.ld-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ld-trust { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 30px; }
.ld-trust .item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ld-trust .item i { color: var(--ink); font-size: 19px; }

.ld-section { padding: 60px 0; }
.ld-section.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ld-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.ld-head .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.ld-head h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 12px; }
@media (min-width: 720px) { .ld-head h2 { font-size: 34px; } }
.ld-head p { font-size: 16px; color: var(--muted); line-height: 1.6; }
.ld-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ld-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ld-grid.cols-3 { grid-template-columns: repeat(3,1fr); } .ld-grid.cols-4 { grid-template-columns: repeat(4,1fr); } }
.ld-feature { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px; transition: transform .15s, box-shadow .15s; }
.ld-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Monochrome theme: all marketing feature icons render mono (status colours
   are reserved for functional badges only). */
.ld-feature .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; margin-bottom: 14px; background: var(--ink); color: #fff; }
.ld-feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.ld-feature p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Dual-path split (two giant choice cards on the hero/home) */
.ld-paths { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .ld-paths { grid-template-columns: 1fr 1fr; } }
.path-card { position: relative; border-radius: 22px; padding: 30px 26px; overflow: hidden; color: #fff; display: flex; flex-direction: column; min-height: 230px; box-shadow: var(--shadow-lg); transition: transform .18s; }
.path-card:hover { transform: translateY(-4px); }
.path-card.buy { background: var(--grad); }
/* Inverted white card for visual duality against the filled-black buy card. */
.path-card.sell { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: var(--shadow); }
.path-card.sell .ic { background: var(--bg-2); color: var(--ink); }
.path-card.sell p { opacity: .7; }
.path-card .ic { width: 54px; height: 54px; border-radius: 15px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 28px; margin-bottom: 16px; }
.path-card h3 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.path-card p { font-size: 14.5px; opacity: .9; margin-top: 8px; line-height: 1.55; flex: 1; }
.path-card .go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }

.ld-banner { background: var(--grad); border-radius: 24px; padding: 46px 28px; text-align: center; color: #fff; box-shadow: 0 24px 56px -24px rgba(3,105,161,.6); }
.ld-banner h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.ld-banner p { font-size: 16px; opacity: .92; margin-bottom: 22px; max-width: 560px; margin-left: auto; margin-right: auto; }

.ld-footer { background: var(--grad); color: #cbd5e1; padding: 50px 0 26px; }
.ld-footer .brand .logo { background: #fff !important; color: #0a0a0a !important; }
.ld-footer .ld-wrap { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .ld-footer .ld-wrap { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.ld-footer .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 12px; }
.ld-footer .brand .logo { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); display: grid; place-items: center; font-size: 20px; color: #fff; }
.ld-footer p { font-size: 13.5px; line-height: 1.7; color: #94a3b8; max-width: 320px; }
.ld-footer h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; }
.ld-footer a { color: #cbd5e1; font-size: 14px; display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.ld-footer a:hover { color: #fff; }
.ld-footer-bottom { border-top: 1px solid #1e293b; margin-top: 30px; padding-top: 18px; text-align: center; font-size: 13px; color: #64748b; }

/* ============================ Product / store grids ============================ */
.prod-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .prod-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .prod-grid.cols-3 { grid-template-columns: repeat(3,1fr); } }
.prod-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.prod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.prod-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, #f4f4f4, #e6e6e6); display: grid; place-items: center; color: var(--muted-2); font-size: 42px; }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.prod-body h3 { font-size: 16px; font-weight: 700; }
.prod-body .tag { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 4px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.5em * 2); }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.prod-price { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

/* chips / filter pills */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: #fff; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; transition: all .12s; }
.chip:hover { border-color: var(--line-2); }
.chip.active { background: var(--grad); color: #fff; border-color: transparent; }

/* ============================ Admin / dashboard shell ============================ */
.app-shell { min-height: 100dvh; }
.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); background: #fff;
    border-right: 1px solid var(--line); display: flex; flex-direction: column;
    /* z-index must beat .tabbar (60): the drawer is opened FROM the tab bar's
       "More", and at equal z-index the tab bar (later in the DOM) painted over
       the sidebar's bottom rows — burying "Get help" and "Log out". */
    padding: 18px 14px; z-index: 70; transform: translateX(-100%); transition: transform .2s;
}
.app-sidebar.open { transform: translateX(0); }
/* Scrim sits above the tab bar too, so the open drawer reads as one modal layer. */
.app-bd { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 65; display: none; }
.app-bd.show { display: block; }
@media (min-width: 1024px) { .app-bd { display: none !important; } }
.app-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.app-brand .logo { width: 40px; height: 40px; border-radius: 11px; }
.app-brand img.logo { object-fit: cover; }
.app-brand h1 { font-size: 15px; font-weight: 800; line-height: 1.2; }
.app-brand p { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.app-sidebar > nav { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; gap: 3px;
    /* Momentum scrolling on iOS, and don't chain the gesture to the page behind
       the drawer once the rail hits its end. */
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.app-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.app-nav a i { font-size: 20px; }
.app-nav a:hover { background: var(--bg-2); color: var(--ink); }
.app-nav a.active { background: var(--sky-soft); color: var(--blue); }
.app-nav-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); padding: 14px 13px 4px; }
.app-nav-label:first-child { padding-top: 2px; }
/* Sidebar search + collapsible groups */
.nav-filter { position: relative; margin: 2px 4px 8px; }
.nav-filter i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--muted-2); pointer-events: none; }
.nav-filter input { width: 100%; border: 1px solid var(--line); background: var(--bg-2); border-radius: 9px; padding: 8px 10px 8px 32px; font: inherit; font-size: 13px; color: var(--ink); }
.nav-filter input::placeholder { color: var(--muted-2); }
.nav-filter input:focus { outline: none; border-color: var(--sky); background: #fff; }
.nav-group { display: flex; flex-direction: column; }
.nav-group-b { display: flex; flex-direction: column; gap: 3px; }
.nav-group-h { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted-2); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 14px 13px 5px; }
.nav-group-h span { flex: 1; text-align: left; }
.nav-group-h:hover { color: var(--ink-2); }
.nav-group-h .chev { font-size: 16px; color: var(--muted-2); transition: transform .18s; }
.nav-group.is-collapsed .chev { transform: rotate(-90deg); }
.nav-group.is-collapsed .nav-group-b { display: none; }
.app-main { min-height: 100dvh; }
/* FIXED, not sticky. `html`/`body` both set overflow-x:hidden (see the reset at the
   top of this file), which turns them into scroll containers and silently kills
   position:sticky for descendants — the bar scrolled away on mobile. Fixed pins it
   for real; .app-main gets matching top padding so content starts below it. */
.app-mobilebar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #fff; border-bottom: 1px solid var(--line); position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.app-content { padding: 16px; max-width: 760px; margin: 0 auto; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) {
    /* --mobilebar-h = 11px padding × 2 + 42px control + 1px border. */
    .app-main { padding-top: var(--mobilebar-h); }
    /* Anchor targets (e.g. /settings#domain) must not hide under the fixed bar. */
    .app-main [id] { scroll-margin-top: calc(var(--mobilebar-h) + 9px); }
}
@media (min-width: 1024px) {
    body.has-shell { background: var(--bg-2); }
    .app-sidebar { transform: none; }
    /* padding-top clears the FIXED .app-topbar (see its rule for why it can't be sticky). */
    .app-main { margin-left: var(--rail-w); padding-top: var(--topbar-h); }
    .app-main [id] { scroll-margin-top: calc(var(--topbar-h) + 10px); }
    .app-mobilebar, .tabbar { display: none !important; }
    /* Fill the desktop work area instead of a narrow 760px column.
       Centered with a comfortable max so it doesn't stretch on ultra-wide. */
    .app-content { padding: 28px 40px 56px; max-width: 1280px; }
}

/* bottom tab bar */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { min-width: 0; }
.tabbar a span, .tabbar a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px 8px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.tabbar a i { font-size: 22px; }
.tabbar a.active { color: var(--blue); }

/* iOS-style switch */
.switch { width: 48px; height: 28px; border-radius: 999px; background: var(--line-2); position: relative; border: 0; cursor: pointer; transition: background .18s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .18s; }
.switch.on { background: var(--green); }
.switch.on::after { left: 23px; }
/* Checkbox rendered as the iOS switch — for forms that submit a boolean. */
input.tgl { -webkit-appearance: none; appearance: none; border: 0; margin: 0; flex-shrink: 0; width: 46px !important; height: 27px !important; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .18s; vertical-align: middle; }
input.tgl::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .18s; }
input.tgl:checked { background: var(--green); }
input.tgl:checked::after { left: 22px; }
input.tgl:focus { outline: none; box-shadow: 0 0 0 3px var(--sky-soft); }

/* checklist */
.check-item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.check-item.done { color: var(--muted-2); text-decoration: line-through; }
.check-item .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; flex-shrink: 0; font-size: 13px; }
.check-item.done .tick { background: var(--green); border-color: var(--green); color: #fff; }
.progress { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--grad); transition: width .5s; }

/* ============================ Narrow page (auth / wizard) ============================ */
.page-narrow { max-width: 460px; margin: 0 auto; padding: 0 0 40px; }
.auth-hero { background: var(--grad); color: #fff; text-align: center; padding: 56px 24px 72px; border-radius: 0 0 32px 32px; }
.auth-hero .logo { width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 30px; font-weight: 800; margin: 0 auto 16px; }
.auth-card { background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 24px; margin: -44px 16px 0; }

/* wizard */
.wiz-head { padding: 18px 20px 4px; max-width: 460px; margin: 0 auto; }
.wiz-bars { display: flex; gap: 6px; margin-top: 14px; }
.wiz-bars span { height: 6px; flex: 1; border-radius: 999px; background: var(--bg-2); }
.wiz-bars span.on { background: var(--grad); }
.wiz-body { max-width: 460px; margin: 0 auto; padding: 8px 20px 40px; }
.wiz-body h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.swatch { aspect-ratio: 1; border-radius: 12px; border: 3px solid transparent; cursor: pointer; transition: transform .1s; }
.swatch.sel { border-color: var(--ink); transform: scale(1.06); }

/* sticky bottom action bar */
.sticky-bar { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, transparent); padding: 12px 0 calc(8px + env(safe-area-inset-bottom)); }

/* toast host */
#mc-toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; max-width: 92%; display: flex; flex-direction: column; gap: 8px; }
.mc-toast-item { color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px; animation: toastIn .2s; }
@keyframes toastIn { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* tap feedback */
.tap { transition: transform .08s ease; }
.tap:active { transform: scale(.97); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* ── CRM Kanban + activity rows ─────────────────────────────────────────── */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.kanban-col { flex: 0 0 280px; background: var(--bg-2); border-radius: var(--radius-lg); padding: 12px; }
.kanban-drop { min-height: 140px; display: flex; flex-direction: column; gap: 10px;
               border-radius: var(--radius); padding: 4px; transition: background .12s; }
.kanban-drop.over { background: var(--sky-soft); outline: 2px dashed var(--sky); }
.kanban-card { cursor: grab; padding: 12px 14px; }
.kanban-card.dragging { opacity: .45; }
.kanban-empty { font-size: 12px; text-align: center; padding: 18px 0; }
.kanban-move { display: none; margin-top: 8px; font-size: 12px; }
@media (hover: none) { .kanban-move { display: block; } .kanban-card { cursor: default; } }

.activity-row.is-done { opacity: .55; }
.activity-row.is-done .activity-title { text-decoration: line-through; color: var(--muted); }

/* ── Tabbed panes (settings + project workspace) ───────────────────────── */
.set-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.set-tab.on { background: var(--grad); color: #fff; border-color: transparent; }
.set-tab .tab-count { font-size: 11px; opacity: .75; font-weight: 700; }
.set-pane { display: none; }
.set-pane.on { display: block; }

/* vertical milestone timeline */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 18px; }
.tl-item::before { content: ''; position: absolute; left: -22px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); }
.tl-item.done::before { background: var(--green); border-color: var(--green); }
.tl-item.active::before { background: var(--blue); border-color: var(--blue); }

/* chat thread bubbles */
.chat-scroll { max-height: 440px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.chat-msg { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.chat-msg .meta { font-size: 10.5px; opacity: .7; margin-top: 3px; }
.chat-msg.them { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 4px; }

/* ── Catalogue category chips (central store) — red active, compact on mobile ── */
.cat-chips .chip.active { background: var(--red); color: #fff; border-color: transparent; }
@media (max-width: 600px) {
    .cat-chips { gap: 6px; }
    .cat-chips .chip { padding: 6px 12px; font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v23 — Card hub (Settings + Plugins), slide-over sheet, WhatsApp module
   ══════════════════════════════════════════════════════════════════════ */
.hub-head { margin-bottom: 18px; }
.hub-head h1 { font-size: 23px; font-weight: 800; margin: 0 0 4px; }
.hub-head p { font-size: 13.5px; color: var(--muted); margin: 0; }
.hub-sec-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted-2); margin: 24px 4px 11px; }
.hub-sec-label.first { margin-top: 4px; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 14px; }
.hub-card { display: flex; gap: 13px; align-items: flex-start; padding: 16px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-lg); cursor: pointer; width: 100%;
    text-align: left; text-decoration: none; color: inherit; font: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.hub-ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    font-size: 21px; background: var(--sky-soft); color: var(--ink); }
.hub-ic.teal { background: var(--teal-soft); color: var(--teal); }
.hub-ic.amber { background: var(--amber-soft); color: var(--amber); }
.hub-ic.violet { background: var(--violet-soft); color: var(--violet); }
.hub-ic.green { background: var(--green-soft); color: var(--green); }
.hub-ic.red { background: var(--red-soft); color: var(--red); }
.hub-ic.blue { background: #e0f2fe; color: #0284c7; }
.hub-bd { min-width: 0; flex: 1; }
.hub-card h4 { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; display: flex; align-items: center; gap: 7px; }
.hub-card p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.hub-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.hub-pill.on { background: var(--green-soft); color: var(--green); }
.hub-pill.off { background: var(--gray-soft); color: var(--gray-badge); }
.hub-pill.warn { background: var(--amber-soft); color: var(--amber); }
.hub-arrow { margin-left: auto; align-self: center; color: var(--muted-2); font-size: 18px; }

.hub-search { position: relative; margin-bottom: 14px; }
.hub-search input { padding-left: 42px; height: 48px; border-radius: var(--radius-lg); font-size: 14px; }
.hub-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: 19px; }
.seg-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.seg-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 15px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.sheet-bd { position: fixed; inset: 0; background: rgba(10,10,10,.42); z-index: 80;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.sheet-bd.open { opacity: 1; visibility: visible; }
.sheet { position: fixed; top: 0; right: 0; height: 100%; width: min(480px, 100%); background: #fff;
    z-index: 81; box-shadow: var(--shadow-lg); transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.sheet-bd.open .sheet { transform: none; }
.sheet-hd { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.sheet-hd .hub-ic { width: 38px; height: 38px; font-size: 19px; }
.sheet-hd h3 { font-size: 16px; font-weight: 800; margin: 0; }
.sheet-x { margin-left: auto; border: 0; background: var(--gray-soft); width: 32px; height: 32px;
    border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--ink-2); line-height: 1; }
.sheet-bdy { padding: 20px; overflow: auto; flex: 1; }

.wstat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.wstat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 16px; }
.wstat .n { font-size: 24px; font-weight: 800; line-height: 1; }
.wstat .l { font-size: 12px; color: var(--muted); margin-top: 5px; }

.wa-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.wa-list { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow: auto; }
.wa-conv { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--radius); text-decoration: none;
    color: inherit; align-items: center; }
.wa-conv:hover { background: var(--bg-2); }
.wa-conv.active { background: var(--sky-soft); }
.wa-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--teal-soft); color: var(--teal);
    display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.wa-conv .nm { font-size: 13.5px; font-weight: 600; }
.wa-conv .pv { font-size: 12px; color: var(--muted); }
.wa-unread { margin-left: auto; background: var(--green); color: #fff; font-size: 10.5px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; }
.wa-chat { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--bg-2);
    border-radius: var(--radius-lg); min-height: 320px; max-height: 58vh; overflow: auto; }
.wa-bub { max-width: 76%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word; }
.wa-bub.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.wa-bub.out { align-self: flex-end; background: #dcfce7; border-bottom-right-radius: 4px; }
.wa-bub small { display: block; font-size: 10px; color: var(--muted-2); margin-top: 4px; }
.wa-replybar { display: flex; gap: 8px; margin-top: 12px; }
.wa-replybar input { flex: 1; }

@media (max-width: 720px) {
    .wa-layout { grid-template-columns: 1fr; }
    .sheet { width: 100%; }
}

/* ── PWA install card (brand-aware via --grad) ─────────────────────────── */
.mc-install { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom));
    z-index: 120; max-width: 440px; margin: 0 auto; background: #fff; color: var(--ink, #0a0a0a);
    border: 1px solid var(--line, #e7e7e7); border-radius: 16px; padding: 13px 14px; display: flex;
    align-items: center; gap: 12px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.3);
    transform: translateY(160%); transition: transform .35s cubic-bezier(.34,1.3,.64,1); }
.mc-install.show { transform: none; }
.mc-install .ic { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--grad, #0369a1);
    color: #fff; display: grid; place-items: center; font-size: 24px; }
.mc-install .tx { flex: 1; min-width: 0; line-height: 1.3; }
.mc-install .tx strong { font-size: 14.5px; font-weight: 800; }
.mc-install .tx span { display: block; font-size: 12px; color: var(--muted, #6b7280); }
.mc-install button { border: 0; font: inherit; cursor: pointer; border-radius: 9px; }
.mc-install .no { background: transparent; color: var(--muted, #6b7280); font-size: 13px; padding: 8px 6px; }
.mc-install .yes { background: var(--grad, #0369a1); color: #fff; font-weight: 700; padding: 9px 16px; }
@media (min-width: 1024px) { .mc-install { bottom: 24px; } }

/* ============================================================================
   HUB NAVIGATION — 6 plain-language areas replace the 30-link sidebar.
   Home hub → pick an area → see only that area's few items (sub-nav pills).
   Keeps the existing .app-shell / .app-content frame; adds a desktop top bar,
   an area rail, breadcrumbs and pill sub-navigation. Light system, tokenised.
   ============================================================================ */
/* --- Area rail (sidebar body) --- */
.app-rail { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; gap: 3px; }
.rail-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px; color: var(--ink-2); font-size: 14.5px; font-weight: 650; position: relative; }
.rail-item:hover { background: var(--bg-2); color: var(--ink); }
.rail-item.active { background: var(--sky-soft); color: var(--blue); }
.rail-item.active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
.rail-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); font-size: 19px; }
.rail-item.active .rail-ic { background: #fff; color: var(--blue); }
.rail-item .rail-badge { margin-left: auto; font-size: 11px; font-weight: 800; color: #fff; background: var(--amber); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.rail-sep { flex: 1; }
.rail-home { margin-bottom: 8px; }

/* --- Desktop top bar (breadcrumb · store status · account) --- */
.app-topbar { display: none; }
@media (min-width: 1024px) {
    /* FIXED, not sticky — same reason as .app-mobilebar: html/body both set
       overflow-x:hidden, which makes them scroll containers and silently disables
       position:sticky for descendants, so this bar used to scroll away.
       Fixed takes it out of flow, hence .app-main's padding-top. An explicit height
       (--topbar-h) instead of vertical padding keeps that offset exact: the tallest
       child, .omni-input, is ~40px, so 64px leaves it comfortably centred. */
    .app-topbar {
        display: flex; align-items: center; gap: 16px; padding: 0 40px;
        height: var(--topbar-h); box-sizing: border-box;
        background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line);
        position: fixed; top: 0; left: var(--rail-w); right: 0; z-index: 50;
    }
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-right: auto; min-width: 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { font-size: 15px; color: var(--muted-2); }
.crumbs .cur { color: var(--ink); font-weight: 800; }
.store-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--muted); font-family: inherit; }
.store-pill.open { color: var(--green); }
.store-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.store-pill.open .d { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.app-ava { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }

/* --- Sub-navigation pills (the area's few items) --- */
.subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13.5px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.subnav a i { font-size: 17px; }
.subnav a:hover { background: var(--bg-2); color: var(--ink); }
.subnav a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.subnav a.active i { color: #fff; }
.subnav a .pn { font-size: 11px; font-weight: 800; background: var(--amber); color: #fff; border-radius: 999px; padding: 0 6px; }
.subnav a.active .pn { background: rgba(255,255,255,.28); }
.subnav a.maint { opacity: .6; }
.subnav a.locked { opacity: .5; }
/* On phones the pills scroll horizontally instead of wrapping into a tall block. */
@media (max-width: 640px) {
    .subnav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 0 16px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .subnav::-webkit-scrollbar { display: none; }
}

/* --- Mobile breadcrumb (back to home) --- */
.mcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.mcrumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); }
@media (min-width: 1024px) { .mcrumb { display: none; } }
/* Compact store toggle in the mobile bar — drop the word on very narrow phones. */
@media (max-width: 360px) { .app-mobilebar .store-pill-tx { display: none; } }

/* --- Global feature search ("where is X?") — top bar + mobile drawer --- */
.omni { position: relative; }
.omni-input { width: 100%; border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 9px; padding: 9px 12px 9px 34px; font: inherit; font-size: 13.5px; color: var(--ink); }
.omni-input:focus { outline: none; border-color: var(--sky); background: #fff; box-shadow: 0 0 0 3px var(--sky-soft); }
.omni > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--muted-2); pointer-events: none; }
.omni-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 348px; overflow: auto; z-index: 80; display: none; padding: 6px; }
.omni-panel.show { display: block; }
.omni-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.omni-opt:hover, .omni-opt.hl { background: var(--bg-2); color: var(--ink); }
.omni-opt > i { font-size: 18px; color: var(--muted); flex: none; }
.omni-opt .area { margin-left: auto; font-size: 11px; color: var(--muted-2); font-weight: 700; white-space: nowrap; }
.omni-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.app-topbar .omni { width: 300px; max-width: 34vw; }
.omni-mobile { display: block; margin: 2px 4px 10px; }
@media (min-width: 1024px) { .omni-mobile { display: none; } }