/* ============================================================
   Hub 2026 Template — design tokens + base + components
   Ported from claude_design/SNI - Hub/design_handoff_hub_template/hub/
   (tokens.css + components.css).
   ALL rules are scoped under `.template-hub2026` so this stylesheet
   can be loaded site-wide without leaking into other templates or
   the SuperAdmin / Dashboard / Account UIs.
   ============================================================ */

.template-hub2026 {
    /* ---- Theme layer (recolorable via SNI Theme — these are defaults). ---- */
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-info: #22d3ee;
    --bs-info-rgb: 34, 211, 238;
    --h26-accent: var(--bs-primary);
    --h26-accent-2: var(--bs-info);

    /* status */
    --h26-danger: #ef4444;
    --h26-warning: #f59e0b;
    --h26-success: #22c55e;

    /* surfaces */
    --h26-bg: #07080d;
    --h26-bg-2: #0a0c13;
    --h26-surface: #10131c;
    --h26-surface-2: #161a26;
    --h26-surface-3: #1c2130;
    --h26-elevated: #20263a;

    /* text */
    --h26-text: #f1f3f9;
    --h26-text-2: #aab2c5;
    --h26-text-3: #6f7891;
    --h26-text-faint: #4a5167;

    /* lines */
    --h26-line: rgba(255, 255, 255, 0.08);
    --h26-line-2: rgba(255, 255, 255, 0.12);
    --h26-line-strong: rgba(255, 255, 255, 0.18);

    /* glass */
    --h26-glass-bg: rgba(18, 22, 34, 0.62);
    --h26-glass-line: rgba(255, 255, 255, 0.10);
    --h26-glass-blur: 18px;

    /* radii */
    --h26-r-sm: 8px;
    --h26-r: 12px;
    --h26-r-lg: 16px;
    --h26-r-xl: 22px;
    --h26-r-pill: 999px;

    /* shadow */
    --h26-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --h26-shadow: 0 12px 32px -12px rgba(0,0,0,.7);
    --h26-shadow-lg: 0 30px 70px -24px rgba(0,0,0,.8);
    --h26-glow: 0 0 0 1px rgba(var(--bs-primary-rgb), .25), 0 18px 50px -16px rgba(var(--bs-primary-rgb), .45);

    /* type */
    --h26-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --h26-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --h26-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

    /* layout */
    --h26-maxw: 1240px;
    --h26-gutter: 28px;
    --h26-header-h: 66px;

    background: var(--h26-bg);
    color: var(--h26-text);
    font-family: var(--h26-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* Network mesh background — a fixed layer behind the template's content. Two
   soft radial accent glows + a faint 26px dot-grid masked to fade out toward
   the bottom. Lives under .template-hub2026 .sn-h-bg so it only applies
   inside the Hub Template DOM. */
.template-hub2026 .sn-h-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 600px at 78% -8%, rgba(var(--bs-primary-rgb), .16), transparent 60%),
        radial-gradient(800px 560px at 8% 4%, rgba(var(--bs-info-rgb), .10), transparent 55%),
        var(--h26-bg);
}
.template-hub2026 .sn-h-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}

.template-hub2026 .sn-h-app { position: relative; z-index: 1; }

/* ---------- typography ---------- */
.template-hub2026 h1,
.template-hub2026 h2,
.template-hub2026 h3,
.template-hub2026 h4 {
    font-family: var(--h26-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--h26-text);
}
.template-hub2026 .h-display {
    font-family: var(--h26-font-display);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.02;
}
.template-hub2026 .h-grad-text {
    background: linear-gradient(100deg, var(--h26-accent) 0%, var(--h26-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.template-hub2026 .h-eyebrow {
    font-family: var(--h26-font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h26-text-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.template-hub2026 .h-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--h26-accent); box-shadow: 0 0 10px var(--h26-accent);
}
.template-hub2026 .h-mono { font-family: var(--h26-font-mono); }
.template-hub2026 .h-muted { color: var(--h26-text-2); }
.template-hub2026 .h-faint { color: var(--h26-text-3); }

/* ---------- container ---------- */
.template-hub2026 .h-wrap { max-width: var(--h26-maxw); margin: 0 auto; padding: 0 var(--h26-gutter); }

/* ---------- buttons ---------- */
.template-hub2026 .h-btn {
    font-family: var(--h26-font-body);
    font-weight: 600;
    font-size: 14.5px;
    border: 1px solid transparent;
    border-radius: var(--h26-r-sm);
    padding: 10px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.template-hub2026 .h-btn:active { transform: translateY(1px); }
/* Primary button — solid accent with a subtle gradient. Strong white text and
   a small (not glowing) lift shadow. Earlier version used color-mix() + a heavy
   purple bloom shadow; the bloom dominated and washed out the text contrast in
   the CTA panel where the surrounding background was already accent-tinted. */
.template-hub2026 .h-btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 100%), var(--h26-accent);
    color: #fff !important;
    border-color: var(--h26-accent);
    box-shadow: 0 4px 12px -6px rgba(var(--bs-primary-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.template-hub2026 .h-btn-primary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, transparent 100%), var(--h26-accent);
    box-shadow: 0 6px 16px -6px rgba(var(--bs-primary-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.template-hub2026 .h-btn-primary i { color: #fff; }
.template-hub2026 .h-btn-ghost {
    background: rgba(255,255,255,.04);
    color: var(--h26-text);
    border-color: var(--h26-line-2);
}
.template-hub2026 .h-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--h26-line-strong); }
.template-hub2026 .h-btn-quiet { background: transparent; color: var(--h26-text-2); }
.template-hub2026 .h-btn-quiet:hover { color: var(--h26-text); background: rgba(255,255,255,.05); }
.template-hub2026 .h-btn-lg { padding: 13px 22px; font-size: 15.5px; border-radius: var(--h26-r); }
.template-hub2026 .h-btn-sm { padding: 7px 12px; font-size: 13px; }

/* ---------- cards / glass / hairline ---------- */
.template-hub2026 .h-section-card {
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
}
.template-hub2026 .h-glass {
    background: var(--h26-glass-bg);
    -webkit-backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    border: 1px solid var(--h26-glass-line);
}
.template-hub2026 .h-hairline {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--h26-line-2) 20%, var(--h26-line-2) 80%, transparent);
    border: 0; margin: 0;
}

/* ---------- chips / pills ---------- */
.template-hub2026 .h-chip {
    font-family: var(--h26-font-mono);
    font-size: 12.5px;
    color: var(--h26-text-2);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r-pill);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all .14s ease;
    text-decoration: none;
}
.template-hub2026 .h-chip:hover {
    color: var(--h26-text);
    border-color: var(--h26-accent);
    background: rgba(var(--bs-primary-rgb), .10);
}
.template-hub2026 .h-chip .ct { color: var(--h26-text-3); font-size: 11px; }
.template-hub2026 .h-chip:hover .ct { color: var(--h26-accent-2); }

.template-hub2026 .h-pill {
    font-family: var(--h26-font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: var(--h26-r-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--h26-line-2);
    color: var(--h26-text-2);
}
.template-hub2026 .h-pill-accent { color: var(--h26-accent); border-color: rgba(var(--bs-primary-rgb), .4); background: rgba(var(--bs-primary-rgb), .12); }
.template-hub2026 .h-pill-info { color: var(--h26-accent-2); border-color: rgba(var(--bs-info-rgb), .4); background: rgba(var(--bs-info-rgb), .10); }
.template-hub2026 .h-pill-live { color: var(--h26-success); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.10); }
.template-hub2026 .h-pill-live .blip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--h26-success); box-shadow: 0 0 8px var(--h26-success);
    animation: snH26Blip 1.8s ease-in-out infinite;
}
@keyframes snH26Blip { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- favicon avatar + image placeholder ---------- */
.template-hub2026 .h-favi {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-family: var(--h26-font-display);
    font-weight: 600; font-size: 16px;
    color: #fff;
    flex: none;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.template-hub2026 .h-imgph {
    position: relative;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.05) 10px 20px),
        var(--h26-surface-2);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r-sm);
    display: grid; place-items: center; overflow: hidden;
}
.template-hub2026 .h-imgph .lbl {
    font-family: var(--h26-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--h26-text-faint);
    text-transform: uppercase;
}

/* ---------- section heading ---------- */
.template-hub2026 .h-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.template-hub2026 .h-sec-head .ttl { font-family: var(--h26-font-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.template-hub2026 .h-sec-head .sub { color: var(--h26-text-3); font-size: 13.5px; margin-top: 4px; }
.template-hub2026 .h-sec-link { color: var(--h26-text-2); font-size: 13.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.template-hub2026 .h-sec-link:hover { color: var(--h26-accent-2); }

/* ---------- trend indicator ---------- */
.template-hub2026 .h-trend { font-family: var(--h26-font-mono); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.template-hub2026 .h-trend.up { color: var(--h26-success); }
.template-hub2026 .h-trend.down { color: var(--h26-danger); }
.template-hub2026 .h-trend.flat { color: var(--h26-text-3); }

/* ---------- focus + scrollbar ---------- */
.template-hub2026 a:focus-visible,
.template-hub2026 button:focus-visible,
.template-hub2026 input:focus-visible {
    outline: 2px solid var(--h26-accent);
    outline-offset: 2px;
}

/* Slot dev-tag — hidden by default. The Hub 2026 template renders these next
   to each slot's eyebrow so designers can see the slot wiring; off in normal
   use. Enable per-page via `?slots=1` (the shell flips data-slots="on" on the
   template root) so SuperAdmins / designers can inspect the layout. */
.template-hub2026 .h-slot-tag {
    display: none;
    margin-left: 8px;
    font-family: var(--h26-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--h26-text-faint);
    border: 1px dashed var(--h26-line-2);
    border-radius: 5px;
    padding: 2px 6px;
}
.template-hub2026[data-slots="on"] .h-slot-tag { display: inline-block; }

/* ============================================================
   Header
   ============================================================ */
.template-hub2026 .sn-h-header {
    position: sticky; top: 0; z-index: 50;
    height: var(--h26-header-h);
    display: flex; align-items: center;
    backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--h26-glass-blur)) saturate(140%);
    background: var(--h26-glass-bg);
    border-bottom: 1px solid transparent;
    transition: border-color .15s, box-shadow .15s;
}
.template-hub2026 .sn-h-header.scrolled {
    border-bottom-color: var(--h26-line);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 14px 28px -22px rgba(0,0,0,.6);
}
.template-hub2026 .sn-h-header .wrap-row {
    width: 100%; max-width: var(--h26-maxw); margin: 0 auto;
    padding: 0 var(--h26-gutter);
    display: flex; align-items: center; gap: 16px;
}
.template-hub2026 .sn-h-logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--h26-text);
    font-family: var(--h26-font-display); font-weight: 600; font-size: 19px; letter-spacing: -.02em;
}
.template-hub2026 .sn-h-logo .mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(140deg, var(--h26-accent) 0%, var(--h26-accent-2) 100%);
    display: grid; place-items: center; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.template-hub2026 .sn-h-logo .net {
    background: linear-gradient(100deg, var(--h26-accent) 0%, var(--h26-accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.template-hub2026 .sn-h-nav { display: flex; gap: 4px; }
.template-hub2026 .sn-h-navlink {
    font-size: 14px; color: var(--h26-text-2); text-decoration: none;
    padding: 8px 12px; border-radius: var(--h26-r-sm);
    transition: color .15s, background .15s;
}
.template-hub2026 .sn-h-navlink:hover { color: var(--h26-text); background: rgba(255,255,255,.05); }
.template-hub2026 .sn-h-navlink.active { color: var(--h26-text); background: rgba(255,255,255,.07); }
.template-hub2026 .sn-h-search {
    flex: 0 0 auto; width: 210px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r-pill);
    padding: 7px 12px;
    display: flex; align-items: center; gap: 8px;
    color: var(--h26-text-2); font-size: 13.5px;
    transition: border-color .15s, background .15s;
}
.template-hub2026 .sn-h-search:focus-within { border-color: var(--h26-accent); background: rgba(255,255,255,.06); }
.template-hub2026 .sn-h-search input {
    background: transparent; border: 0; outline: 0; color: var(--h26-text);
    font-size: 13.5px; flex: 1; font-family: var(--h26-font-body);
}
.template-hub2026 .sn-h-search input::placeholder { color: var(--h26-text-3); }
.template-hub2026 .sn-h-auth { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.template-hub2026 .sn-h-iconbtn {
    position: relative; width: 38px; height: 38px; border-radius: var(--h26-r-sm);
    border: 1px solid var(--h26-line); background: rgba(255,255,255,.03); color: var(--h26-text-2);
    cursor: pointer; display: grid; place-items: center; font-size: 16px; transition: all .15s;
}
.template-hub2026 .sn-h-iconbtn:hover { color: var(--h26-text); border-color: var(--h26-line-2); background: rgba(255,255,255,.07); }
.template-hub2026 .sn-h-iconbtn .dot {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--h26-accent); color: #fff; font-size: 10px;
    font-family: var(--h26-font-mono);
    display: grid; place-items: center; border: 2px solid var(--h26-bg); font-weight: 600;
}
.template-hub2026 .sn-h-ownerbtn {
    display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; cursor: pointer;
    background: rgba(255,255,255,.03); border: 1px solid var(--h26-line); border-radius: var(--h26-r-pill);
    transition: all .15s;
}
.template-hub2026 .sn-h-ownerbtn:hover { border-color: var(--h26-line-2); background: rgba(255,255,255,.07); }
.template-hub2026 .sn-h-burger { display: none; }

/* Owner dropdown */
.template-hub2026 .sn-h-ownermenu {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 280px; padding: 14px;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line-2);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow);
    z-index: 100;
}
.template-hub2026 .sn-h-menurow {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    text-decoration: none; color: var(--h26-text); transition: background .12s; font-size: 14px;
}
.template-hub2026 .sn-h-menurow:hover { background: rgba(255,255,255,.06); }
.template-hub2026 .sn-h-menurow .badge {
    margin-left: auto; font-family: var(--h26-font-mono); font-size: 11px;
    color: var(--h26-text-3); background: rgba(255,255,255,.05);
    border: 1px solid var(--h26-line); border-radius: 6px; padding: 1px 6px;
}

/* Mobile drawer */
.template-hub2026 .sn-h-drawer { display: none; flex-direction: column; padding: 16px 20px; gap: 4px; }
.template-hub2026 .sn-h-drawer-link {
    padding: 11px 4px; color: var(--h26-text); text-decoration: none; font-size: 15px;
    border-bottom: 1px solid var(--h26-line);
}
.template-hub2026 .sn-h-drawer-link:hover { color: var(--h26-accent-2); }

/* ============================================================
   Homepage Signal layout
   ============================================================ */
.template-hub2026 .sn-h-pitchbar {
    display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin: 22px 0 28px;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
    flex-wrap: wrap;
}
.template-hub2026 .sn-h-pitchbar .pitchcopy { flex: 1; min-width: 240px; font-size: 14.5px; color: var(--h26-text-2); }
.template-hub2026 .sn-h-pitchbar .pitchcopy strong { color: var(--h26-text); font-weight: 600; }
.template-hub2026 .sn-h-pitchbar .pitchctas { display: flex; gap: 8px; }

.template-hub2026 .sn-h-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}
.template-hub2026 .sn-h-feat-card {
    padding: 18px;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
    transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease;
    text-decoration: none; color: var(--h26-text);
    display: flex; flex-direction: column; gap: 12px;
}
.template-hub2026 .sn-h-feat-card:hover {
    transform: translateY(-3px);
    border-color: var(--h26-line-strong);
    box-shadow: var(--h26-shadow);
}
.template-hub2026 .sn-h-feat-head { display: flex; gap: 14px; align-items: flex-start; }
.template-hub2026 .sn-h-feat-head .meta { flex: 1; min-width: 0; }
.template-hub2026 .sn-h-feat-head .name { font-family: var(--h26-font-display); font-size: 16px; font-weight: 600; }
.template-hub2026 .sn-h-feat-head .domain { font-family: var(--h26-font-mono); font-size: 12px; color: var(--h26-text-2); }
.template-hub2026 .sn-h-feat-card .blurb { color: var(--h26-text-2); font-size: 14px; line-height: 1.5; }
.template-hub2026 .sn-h-feat-card .foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding-top: 8px; border-top: 1px solid var(--h26-line);
}
.template-hub2026 .sn-h-feat-card .stats {
    display: inline-flex; gap: 12px; font-family: var(--h26-font-mono);
    font-size: 12px; color: var(--h26-text-3);
}

.template-hub2026 .sn-h-signal-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
    margin-bottom: 36px;
}
.template-hub2026 .sn-h-signal-aside {
    position: sticky;
    top: calc(var(--h26-header-h) + 16px);
    align-self: flex-start;
    display: flex; flex-direction: column; gap: 18px;
}

/* Popular leaderboard */
.template-hub2026 .sn-h-poprows {
    display: flex; flex-direction: column;
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    overflow: hidden;
}
.template-hub2026 .sn-h-poprow {
    display: grid;
    grid-template-columns: 36px 38px 1fr auto auto;
    gap: 14px; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--h26-line);
    text-decoration: none; color: var(--h26-text);
    transition: background .14s;
}
.template-hub2026 .sn-h-poprow:last-child { border-bottom: 0; }
.template-hub2026 .sn-h-poprow:hover { background: rgba(255,255,255,.04); }
.template-hub2026 .sn-h-poprow .rank { font-family: var(--h26-font-mono); font-size: 13px; color: var(--h26-text-3); }
.template-hub2026 .sn-h-poprow .name { font-size: 14px; font-weight: 500; }
.template-hub2026 .sn-h-poprow .domain { font-family: var(--h26-font-mono); font-size: 11.5px; color: var(--h26-text-3); }
.template-hub2026 .sn-h-poprow .spark svg { display: block; }

/* ============================================================
   Card hovers shared across post / feat
   ============================================================ */
.template-hub2026 .sn-h-post-card {
    background: var(--h26-surface);
    border: 1px solid var(--h26-line);
    border-radius: var(--h26-r);
    box-shadow: var(--h26-shadow-sm);
    transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease;
    text-decoration: none; color: var(--h26-text);
    display: block; padding: 16px;
}
.template-hub2026 .sn-h-post-card:hover {
    transform: translateY(-3px);
    border-color: var(--h26-line-strong);
    box-shadow: var(--h26-shadow);
}

/* ============================================================
   Prose (Site Page bodies)
   ============================================================ */
.template-hub2026 .sn-h-prose .lead { font-size: 17px; color: var(--h26-text); line-height: 1.6; margin: 0 0 16px; }
.template-hub2026 .sn-h-prose h2 { font-family: var(--h26-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 30px 0 10px; }
.template-hub2026 .sn-h-prose h3 { font-family: var(--h26-font-display); font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
.template-hub2026 .sn-h-prose p { color: var(--h26-text-2); font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; }
.template-hub2026 .sn-h-prose ul { color: var(--h26-text-2); font-size: 15.5px; line-height: 1.6; padding-left: 20px; margin: 0 0 14px; }
.template-hub2026 .sn-h-prose li { margin-bottom: 9px; }
.template-hub2026 .sn-h-prose strong { color: var(--h26-text); font-weight: 600; }
/* MainContent component wraps the authored body in .sn-main-content; neutralize
   its default block margin so prose spacing comes from the rules above. */
.template-hub2026 .sn-h-prose .sn-main-content { margin: 0; }

/* Hub landing main-content block (DefaultMainContent on the homepage). Sits between the
   pitch bar and Featured; only rendered when non-empty, so the section never shows when
   blank. Own vertical rhythm so it doesn't crowd Featured below it. */
.template-hub2026 .sn-h-home-main { margin: 0 0 36px; }
.template-hub2026 .sn-h-home-main .sn-h-prose > :first-child { margin-top: 0; }

/* Search results — hub-styled product grid rendered in the page-layout body (search defaults
   to the Site Page view). Cards link out to Amazon. */
.template-hub2026 .sn-h-product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px;
}
.template-hub2026 .sn-h-product-card {
    display: flex; flex-direction: column; text-decoration: none; color: var(--h26-text);
    background: var(--h26-surface); border: 1px solid var(--h26-line); border-radius: var(--h26-r);
    overflow: hidden; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.template-hub2026 .sn-h-product-card:hover {
    border-color: var(--h26-line-2); transform: translateY(-2px); box-shadow: var(--h26-shadow-sm);
}
.template-hub2026 .sn-h-product-img {
    aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center;
    padding: 12px;
}
.template-hub2026 .sn-h-product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.template-hub2026 .sn-h-product-img .bi { font-size: 34px; color: #cbd5e1; }
.template-hub2026 .sn-h-product-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px 14px; }
.template-hub2026 .sn-h-product-brand { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--h26-text-3); }
.template-hub2026 .sn-h-product-title {
    font-size: 13.5px; line-height: 1.35; color: var(--h26-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.template-hub2026 .sn-h-product-price { margin-top: 2px; font-weight: 600; color: var(--h26-accent, #a855f7); font-size: 14px; }

/* Search empty state */
.template-hub2026 .sn-h-search-empty { text-align: center; padding: 48px 20px; color: var(--h26-text-2); }
.template-hub2026 .sn-h-search-empty .bi { font-size: 40px; color: var(--h26-text-3); display: block; margin-bottom: 14px; }
.template-hub2026 .sn-h-search-empty p { max-width: 420px; margin: 0 auto 18px; line-height: 1.55; }

/* ============================================================
   Site Page layout (breadcrumb + body + sticky sidebar)
   ============================================================ */
.template-hub2026 .sn-h-page-main { padding-top: 34px; padding-bottom: 80px; }
.template-hub2026 .sn-h-breadcrumb {
    font-size: 12px; color: var(--h26-text-3);
    margin-bottom: 20px; display: flex; gap: 8px; align-items: center;
}
.template-hub2026 .sn-h-breadcrumb a { color: var(--h26-text-3); text-decoration: none; }
.template-hub2026 .sn-h-breadcrumb a:hover { color: var(--h26-text-2); }
.template-hub2026 .sn-h-breadcrumb i { font-size: 10px; }
.template-hub2026 .sn-h-breadcrumb span { color: var(--h26-text-2); }
.template-hub2026 .sn-h-page-head { margin-bottom: 30px; }
.template-hub2026 .sn-h-page-grid {
    display: grid;
    grid-template-columns: 1.7fr .9fr;
    gap: 30px;
    align-items: start;
}
.template-hub2026 .sn-h-page-aside {
    display: flex; flex-direction: column; gap: 22px;
    position: sticky;
    top: calc(var(--h26-header-h) + 16px);
    align-self: flex-start;
}
/* Ad placeholder visible only in slot-view mode (?slots=1); the real AdBlock
   component renders alongside it and is shown in all modes. */
.template-hub2026 .sn-h-ad-ph { display: none; }
.template-hub2026[data-slots="on"] .sn-h-ad-ph { display: grid; }

@media (max-width: 1080px) {
    .template-hub2026 .sn-h-page-grid { grid-template-columns: 1fr; }
    .template-hub2026 .sn-h-page-aside { position: static; }
}

/* ============================================================
   Footer
   ============================================================ */
.template-hub2026 .sn-h-footer {
    border-top: 1px solid var(--h26-line);
    padding: 48px 0 28px;
    margin-top: 60px;
}
.template-hub2026 .sn-h-foot-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 36px 24px;
}
.template-hub2026 .sn-h-foot-grid h5 {
    font-family: var(--h26-font-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--h26-text-3); margin-bottom: 14px;
}
.template-hub2026 .sn-h-foot-link {
    color: var(--h26-text-2); text-decoration: none; font-size: 13.5px;
    display: block; padding: 4px 0; transition: color .14s;
}
.template-hub2026 .sn-h-foot-link:hover { color: var(--h26-text); }
.template-hub2026 .sn-h-foot-blurb { color: var(--h26-text-2); font-size: 13.5px; line-height: 1.55; margin-top: 12px; }

/* BYOD = "Bring Your Own Domain". The <abbr title="…"> supplies the native hover tooltip with the
   full meaning; this just makes the term visibly hoverable (dotted underline + help cursor) and
   on-brand. Scoped to the hub so it can't bleed into other pages. */
.template-hub2026 .sn-byod {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: help;
    font-weight: 600;
    color: var(--h26-accent);
    border: 0;
}
.template-hub2026 .sn-byod:hover { text-decoration-style: solid; }

.template-hub2026 .sn-h-foot-bottom {
    margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--h26-line);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--h26-text-3); flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   Responsive breakpoints
   ============================================================ */
@media (max-width: 1080px) {
    .template-hub2026 { --h26-gutter: 22px; }
    .template-hub2026 .sn-h-signal-grid { grid-template-columns: 1fr; }
    .template-hub2026 .sn-h-signal-aside { position: static; }
}
@media (max-width: 860px) {
    .template-hub2026 .sn-h-nav,
    .template-hub2026 .sn-h-search { display: none !important; }
    .template-hub2026 .sn-h-burger { display: grid; }
    .template-hub2026 .sn-h-auth .sn-h-signin { display: none; }
    .template-hub2026 .sn-h-editsite { display: none !important; }
    .template-hub2026 .sn-h-featured-grid { grid-template-columns: repeat(2, 1fr); }
    .template-hub2026 .sn-h-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .template-hub2026 .sn-h-foot-grid > div:first-child { grid-column: 1 / -1; }
    .template-hub2026 .sn-h-drawer.open { display: flex; }
}
@media (max-width: 560px) {
    .template-hub2026 { --h26-gutter: 16px; --h26-header-h: 60px; }
    .template-hub2026 .sn-h-featured-grid { grid-template-columns: 1fr; }
    .template-hub2026 .h-display { letter-spacing: -.02em; }
}
@media (max-width: 380px) {
    .template-hub2026 .sn-h-foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .template-hub2026 .h-pill-live .blip { animation: none !important; }
}

/* ============================================================
   Auth modal (sign in / register)
   ============================================================ */
.template-hub2026 .sn-h-authmodal {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center; padding: 20px;
}
.template-hub2026 .sn-h-authmodal[hidden] { display: none; }
.template-hub2026 .sn-h-authmodal-overlay {
    position: absolute; inset: 0;
    background: rgba(4, 5, 9, .66);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.template-hub2026 .sn-h-authmodal-card {
    position: relative;
    width: min(440px, 100%);
    border-radius: var(--h26-r-lg);
    box-shadow: var(--h26-shadow-lg);
    border: 1px solid var(--h26-line-2);
    background: var(--h26-surface);
}
.template-hub2026 .sn-h-authview[hidden] { display: none; }
.template-hub2026 .sn-h-authhead { padding: 20px 22px 0; display: flex; gap: 13px; align-items: flex-start; }
.template-hub2026 .sn-h-authicon {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    display: grid; place-items: center; color: #fff; font-size: 17px;
    background: linear-gradient(150deg, var(--h26-accent), var(--h26-accent-2));
    box-shadow: 0 4px 14px -4px rgba(var(--bs-primary-rgb), .7);
}
.template-hub2026 .sn-h-authttl { font-family: var(--h26-font-display); font-weight: 600; font-size: 18px; color: var(--h26-text); }
.template-hub2026 .sn-h-authsub { color: var(--h26-text-2); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.template-hub2026 .sn-h-authbody { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 13px; }
/* Only scroll when the form genuinely exceeds the viewport (header + modal
   padding ≈ 150px). The old min(74vh, 720px) capped at 720px and scrolled even
   on tall windows with room to spare. */
.template-hub2026 .sn-h-authscroll { max-height: calc(100vh - 150px); overflow-y: auto; gap: 14px; }
.template-hub2026 .sn-h-authrow { display: block; }
.template-hub2026 .sn-h-authrow > span:first-child { font-size: 12.5px; color: var(--h26-text-2); display: block; margin-bottom: 6px; }
.template-hub2026 .sn-h-authfield {
    display: flex; align-items: center; gap: 9px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--h26-line-2);
    border-radius: var(--h26-r-sm);
    padding: 0 13px;
}
.template-hub2026 .sn-h-authfield:focus-within { border-color: var(--h26-accent); }
.template-hub2026 .sn-h-authfield > i { color: var(--h26-text-3); }
.template-hub2026 .sn-h-authfield input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--h26-text); font-size: 14px; padding: 12px 0; font-family: var(--h26-font-body);
}
.template-hub2026 .sn-h-authfield input::placeholder { color: var(--h26-text-3); }
/* Override Chrome/WebKit autofill: it forces a pale background + dark text that
   ignores the field's own styling. Repaint the dark field via an inset shadow
   and keep the light text. The 9999s transition defers the autofill repaint so
   the dark fill sticks. */
.template-hub2026 .sn-h-authfield input:-webkit-autofill,
.template-hub2026 .sn-h-authfield input:-webkit-autofill:hover,
.template-hub2026 .sn-h-authfield input:-webkit-autofill:focus,
.template-hub2026 .sn-h-authfield input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--h26-text);
    -webkit-box-shadow: 0 0 0 1000px #0d0f17 inset;
    box-shadow: 0 0 0 1000px #0d0f17 inset;
    caret-color: var(--h26-text);
    transition: background-color 9999s ease-in-out 0s;
}
.template-hub2026 .sn-h-eye { background: transparent; border: none; color: var(--h26-text-3); cursor: pointer; padding: 4px; }
.template-hub2026 .sn-h-eye:hover { color: var(--h26-text-2); }
.template-hub2026 .sn-h-authhint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11.5px; }
.template-hub2026 .sn-h-authhint a { color: var(--h26-accent-2); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.template-hub2026 .sn-h-authopts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.template-hub2026 .sn-h-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--h26-text-2); cursor: pointer; }
.template-hub2026 .sn-h-check input { accent-color: var(--h26-accent); width: 15px; height: 15px; }
.template-hub2026 .sn-h-authopts a { font-size: 13px; color: var(--h26-accent-2); text-decoration: none; }
.template-hub2026 .sn-h-authalt { font-size: 12.5px; text-align: center; line-height: 1.9; color: var(--h26-text-3); margin-top: 6px; }
.template-hub2026 .sn-h-authalt a { color: var(--h26-accent-2); text-decoration: none; }
.template-hub2026 .sn-h-authnotice {
    display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--h26-accent-2);
    background: rgba(var(--bs-info-rgb), .1); border: 1px solid rgba(var(--bs-info-rgb), .35);
    border-radius: var(--h26-r-sm); padding: 11px 14px;
}
.template-hub2026 .sn-h-authoff { position: relative; padding: 34px 28px 28px; text-align: center; }
.template-hub2026 .sn-h-authoff-icon {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 18px; display: grid; place-items: center;
    background: rgba(245, 158, 11, .13); border: 1px solid rgba(245, 158, 11, .4); color: var(--h26-warning); font-size: 24px;
}
@media (max-width: 460px) {
    .template-hub2026 .sn-h-authmodal { padding: 10px; }
    .template-hub2026 .sn-h-authmodal-card { width: 100%; }
}