:root {
    --bg: #0b0d17;
    --surface: #ffffff;
    --ink: #1a1d29;
    --ink-soft: #5b6172;
    --line: #e7e9f0;
    --brand: #6366f1;
    --brand-2: #a855f7;
    --brand-ink: #4f46e5;
    --accent: #22d3ee;
    --ok: #16a34a;
    --warn: #d97706;
    --err: #dc2626;
    --radius: 14px;
    --shadow: 0 10px 40px -12px rgba(30, 27, 75, .25);
    --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--ink);
    background: #fbfbfe;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.container { width: min(1120px, 92vw); margin-inline: auto; }
.muted { color: var(--ink-soft); }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4em; }

.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 112px; }
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-mark { display: block; height: 90px; width: auto; }
.nav-links { display: flex; gap: 22px; margin-right: auto; }
.nav-links a { color: var(--ink-soft); font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.inline { display: inline; margin: 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: .95rem;
    border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .6); }
.btn-primary:hover { box-shadow: 0 10px 26px -8px rgba(99, 102, 241, .75); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #cfd3e0; }
.btn-link { background: none; color: var(--ink-soft); padding: 10px 6px; }
.btn-link:hover { color: var(--ink); }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn-block { width: 100%; }

.flash-wrap { margin-top: 18px; display: grid; gap: 10px; }
.flash { padding: 12px 16px; border-radius: 10px; font-weight: 500; border: 1px solid; margin-bottom: 16px; }
.flash-wrap .flash { margin-bottom: 0; }
.flash-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.flash-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.flash-info { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }

.hero { position: relative; padding: 92px 0 80px; overflow: hidden; text-align: center; }
.hero::before {
    content: ""; position: absolute; inset: -40% 0 auto 0; height: 620px; z-index: -1;
    background: radial-gradient(60% 60% at 50% 0%, rgba(168, 85, 247, .18), transparent 70%),
                radial-gradient(50% 50% at 80% 10%, rgba(34, 211, 238, .16), transparent 70%);
}
.eyebrow {
    display: inline-block; font-weight: 600; font-size: .82rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--brand-ink);
    background: #eef2ff; border: 1px solid #dbe1ff; padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 800; max-width: 15ch; margin-inline: auto; }
.hero .lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 60ch; margin: 18px auto 30px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: .9rem; color: var(--ink-soft); }

.section { padding: 72px 0; }
.section-head { text-align: center; max-width: 60ch; margin: 0 auto 46px; }
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: box-shadow .2s, transform .2s; }
.feature:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.feature .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: #eef2ff; margin-bottom: 14px; }
.feature h3 { font-size: 1.15rem; }
.feature p { color: var(--ink-soft); margin: 0; }

.pricing-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}
.pricing-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.pricing-table th,
.pricing-table td {
    padding: 14px 18px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td { border-bottom: none; }

.pt-corner,
.pt-feature {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    background: #fff;
    min-width: 220px;
    border-right: 1px solid var(--line);
}
.pt-corner { z-index: 5; font-weight: 600; color: var(--ink-soft); vertical-align: bottom; }

.pricing-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    border-bottom: 2px solid var(--line);
}
.pricing-table thead .pt-corner { z-index: 6; }
.pt-plan { min-width: 190px; }
.pt-plan > * { display: block; }
.pt-badge {
    display: inline-block;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--brand-ink); background: #eef1ff; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.pt-name { font-size: 1.2rem; font-weight: 800; }
.pt-tagline { font-size: .82rem; font-weight: 400; color: var(--ink-soft); margin: 2px 0 10px; }
.pt-amt { font-size: 1.7rem; font-weight: 800; }
.pt-per { color: var(--ink-soft); font-weight: 500; }
.pt-yearly { font-size: .8rem; color: var(--ink-soft); }
.pt-fee { display: block; font-size: .78rem; color: var(--ink-soft); margin: 4px 0 14px; }

.pt-feature { font-weight: 600; }
.pt-flabel { display: block; }
.pt-desc { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }

.pt-cell { min-width: 190px; }
.pt-yes { color: var(--ok); font-size: 1.15rem; font-weight: 700; }
.pt-no { color: var(--ink-soft); opacity: .45; }

.pricing-table .featured { background: #f6f7ff; }
.pricing-table thead th.featured { background: #eef1ff; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: start; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px; position: relative; }
.plan.featured { border-color: var(--brand); box-shadow: var(--shadow); }
.plan.featured::before {
    content: "Most popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--grad); color: #fff; font-size: .75rem; font-weight: 600; padding: 5px 14px; border-radius: 999px;
}
.plan h3 { font-size: 1.4rem; }
.plan .tagline { color: var(--ink-soft); min-height: 3em; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 4px; }
.plan .price .amt { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.plan .price .per { color: var(--ink-soft); font-weight: 500; }
.plan .yearly { font-size: .9rem; color: var(--ink-soft); margin-bottom: 22px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.plan li::before { content: "✓"; color: var(--ok); font-weight: 800; }

.auth-wrap { max-width: 440px; margin: 60px auto; padding: 0 20px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px; box-shadow: var(--shadow); }

.card + .card,
.card + .panel,
.panel + .card { margin-top: 20px; }
.card h1 { font-size: 1.7rem; }
.card .sub { color: var(--ink-soft); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.field input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; background: #fdfdff; transition: border .15s, box-shadow .15s;
}
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }
.field input[type=checkbox], .field input[type=radio] { width: auto; padding: 0; flex: none; }
.field-check { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.field-check input { width: auto; margin: 0; }
.cookie-cat { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 0 0 16px; }
.cookie-cat legend { font-weight: 700; font-size: .95rem; padding: 0 6px; }
.cookie-cat textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; }
.form-errors { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; }
.check-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.check-list li { font-size: .95rem; }
.check-list .tick { display: inline-block; width: 20px; font-weight: 800; }
.check-list li.ok .tick { color: var(--ok); }
.check-list li.bad .tick { color: var(--err); }
.form-errors ul { margin: 0; padding-left: 18px; }
.fld-err { color: var(--err); font-size: .8rem; font-weight: 600; margin: 4px 0 0; }
.fld-invalid, input.fld-invalid, select.fld-invalid, textarea.fld-invalid { border-color: var(--err); }
.auth-alt { text-align: center; margin-top: 20px; color: var(--ink-soft); }

.page { padding: 48px 0 80px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.page-head h1 { font-size: 2rem; margin: 0; }
.subnav { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 20px 0 30px; }
.subnav a { padding: 10px 14px; color: var(--ink-soft); font-weight: 500; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.active { color: var(--brand-ink); border-color: var(--brand); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.empty { text-align: center; padding: 48px 24px; color: var(--ink-soft); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.table tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge-active { background: #ecfdf5; color: #065f46; }
.badge-pending { background: #eff6ff; color: #1e40af; }
.badge-past_due { background: #fffbeb; color: #92400e; }
.badge-suspended, .badge-cancelled, .badge-failed { background: #fef2f2; color: #991b1b; }
.badge-paid { background: #ecfdf5; color: #065f46; }

.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 48px 0 28px; background: #fff; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-logo { display: block; width: 170px; height: auto; margin-bottom: 12px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-cols h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 4px; font-weight: 700; }
.footer-cols a { display: block; color: var(--ink); margin-bottom: 8px; font-size: .95rem; }
.footer-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .88rem; }

.order-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.order-price .amt { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.order-price .per { color: var(--ink-soft); }
.interval-pills { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.pill { padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-weight: 500; font-size: .92rem; }
.pill:hover { border-color: #cfd3e0; text-decoration: none; }
.pill.active { border-color: var(--brand); background: #eef2ff; color: var(--brand-ink); }
.pill .save { color: var(--ok); font-weight: 600; margin-left: 4px; }
.card-input { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fdfdff; }
.card-input.StripeElement--focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }

.success-mark {
    width: 68px; height: 68px; margin: 8px auto 18px; border-radius: 50%;
    background: var(--grad); color: #fff; font-size: 2rem; display: grid; place-items: center;
    box-shadow: 0 10px 30px -8px rgba(99, 102, 241, .6);
}
.steps { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.steps li { padding-left: 4px; }
code { background: #f1f2f8; padding: 2px 6px; border-radius: 6px; font-size: .9em; }

body.admin { background: #f4f5fa; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-side { background: #14162a; color: #cdd0e0; padding: 22px 18px; display: flex; flex-direction: column; }
.admin-side .brand { color: #fff; margin-bottom: 28px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav a { color: #cdd0e0; padding: 10px 12px; border-radius: 9px; font-weight: 500; }
.admin-nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.admin-nav a.active { background: var(--grad); color: #fff; }
.admin-side-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.admin-side-foot .btn-link { color: #cdd0e0; }
.admin-main { padding: 34px 40px; max-width: 1100px; }
.admin-main.is-wide { max-width: none; }
.admin-main h1 { font-size: 1.8rem; margin-bottom: 22px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.stat-label { color: var(--ink-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: 4px 0; }
.stat-sub { color: var(--ink-soft); font-size: .82rem; }
.stat.mini { text-align: center; align-items: center; }
.stat.mini .stat-value { font-size: 1.7rem; margin: 0; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; font-size: .95rem; }
.detail-grid .field { margin-bottom: 0; }

.admin-help {
    position: fixed; top: 0; right: 0; bottom: 0; width: 50%; z-index: 80;
    background: #fff; border-left: 1px solid var(--line); box-shadow: -14px 0 44px rgba(20,22,42,.18);
    transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column;
}
@media (max-width: 1020px) { .admin-help { width: 80%; } }
@media (max-width: 650px)  { .admin-help { width: 100%; } }
html.admin-help-open .admin-help { transform: none; }

.admin-help-head { display: flex; align-items: center; gap: 8px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex: none; }
.admin-help-title { font-weight: 700; font-size: 1.1rem; margin-right: auto; }
.admin-help-btn { background: none; border: 0; cursor: pointer; color: var(--ink-soft); font-size: 1.1rem; padding: 4px 8px; border-radius: 8px; }
.admin-help-btn:hover { background: rgba(20,22,42,.06); color: var(--ink); }

.admin-help-search { padding: 14px 22px 8px; flex: none; }
.admin-help-search input { width: 100%; padding: 11px 15px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fdfdff; }
.admin-help-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.16); }

.admin-help-page, .admin-help-view { padding: 10px 22px 28px; overflow-y: auto; flex: 1; }
.admin-help-section { text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; margin: 8px 0; }
.admin-help-empty { font-size: .9rem; }

.help-article { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.help-article > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: .95rem; list-style: none; }
.help-article > summary::-webkit-details-marker { display: none; }
.help-article > summary::before { content: '▸'; color: var(--ink-soft); margin-right: 8px; font-size: .8rem; }
.help-article[open] > summary::before { content: '▾'; }
.help-article[open] > summary { border-bottom: 1px solid var(--line); }

.admin-help-back { background: none; border: 0; color: var(--brand-ink, var(--brand)); cursor: pointer; font: inherit; font-size: .85rem; padding: 4px 0 10px; }
.admin-help-results { list-style: none; padding: 0; margin: 0; }
.admin-help-result { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 10px 12px; cursor: pointer; }
.admin-help-result:hover { background: rgba(99,102,241,.08); }
.admin-help-result-title { display: block; font-weight: 600; font-size: .92rem; }
.admin-help-result-page { display: block; color: var(--ink-soft); font-size: .78rem; margin-top: 2px; }
.admin-help-view-title { margin: 6px 0 12px; font-size: 1.15rem; }

.help-body { font-size: .92rem; line-height: 1.6; color: var(--ink); padding: 14px 16px 6px; }
.admin-help-view .help-body { padding-left: 0; padding-right: 0; }
.help-body > *:last-child { margin-bottom: 8px; }
.help-body h2 { font-size: 1.05rem; margin: 18px 0 8px; }
.help-body h3 { font-size: .95rem; margin: 16px 0 6px; }
.help-body p { margin: 0 0 10px; }
.help-body ul, .help-body ol { margin: 0 0 12px; padding-left: 20px; }
.help-body li { margin-bottom: 4px; }
.help-body blockquote { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--brand);
    background: #f7f7fb; border-radius: 0 8px 8px 0; color: var(--ink-soft); }
.help-body blockquote p:last-child { margin-bottom: 0; }
.help-body blockquote strong { color: var(--ink); }

.help-body code { background: #f4f5fb; padding: 1px 5px; border-radius: 5px; font-size: .88em; }
.help-body pre { background: #14162a; color: #e7e9f0; padding: 12px 14px; border-radius: 10px; overflow-x: auto; font-size: .82rem; }
.help-body pre code { background: none; padding: 0; color: inherit; }
.help-body table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: .88rem; }
.help-body th, .help-body td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.help-body th { background: #f7f8fc; }
.help-body img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0 12px; cursor: zoom-in; display: block; }
.help-body a { color: var(--brand-ink, var(--brand)); }

.admin-help-reopen { position: fixed; right: 20px; top: 20px; z-index: 60; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); cursor: pointer; font-size: 1.2rem; }
.admin-help-reopen:hover { border-color: var(--brand); }
html.admin-help-open .admin-help-reopen { display: none; }
@media (max-width: 640px) { .admin-help-reopen { display: none; } }
.admin-topbar-help { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 1.2rem; padding: 4px 8px; }

.admin-help-scrim { display: none; position: fixed; inset: 0; background: rgba(20,22,42,.4); z-index: 75; }
html.admin-help-open .admin-help-scrim { display: block; }

.help-lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(10,11,20,.86); align-items: center; justify-content: center; padding: 3vw; cursor: zoom-out; }
.help-lightbox.is-open { display: flex; }
.help-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 80px rgba(0,0,0,.6); }
.help-lightbox-close { position: fixed; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 1.8rem; cursor: pointer; }

.games-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.games-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fdfdff; }
.games-row form { margin: 0; }
.games-title { font-weight: 600; }

.buy-grades { max-width: 560px; }
.buy-grades th, .buy-grades td { padding: 8px 12px; }
.buy-grades td input[type="number"] { width: 88px; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: 8px; font: inherit; background: #fdfdff; transition: border .15s, box-shadow .15s; }
.buy-grades td input[type="number"]:focus { outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }
.buy-grades input[type="checkbox"] { width: 18px; height: 18px; }

.scope-form select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; background: #fdfdff; }
.scope-form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }

.form-actions { margin: 4px 0 24px; }

.scope-tag { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    font-weight: 700; color: var(--brand); background: rgba(99, 102, 241, .12); padding: 2px 8px;
    border-radius: 999px; vertical-align: middle; margin-right: 6px; }

.admin-topbar { display: none; }
.admin-scrim { display: none; }

@media (max-width: 640px) {
    .nav-links { display: none; }
    .footer-inner { flex-direction: column; }
}

.help-search {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1px solid #d5d8de;
    border-radius: 8px;
    margin-bottom: 20px;
}
.help-cats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.help-list { margin: 0; padding-left: 18px; line-height: 1.9; }
.help-results { display: grid; gap: 12px; }
.help-result { display: block; text-decoration: none; }
.help-result span { display: block; margin-top: 4px; font-size: .9rem; }
.help-crumb { margin: 0 0 8px; font-size: .9rem; }
.help-article { max-width: 760px; line-height: 1.7; }
.help-article a, .help-crumb a { text-decoration: underline; }
.help-article h1 { margin-top: 0; }
.help-article h2 { margin-top: 1.6em; }
.help-article h3 { margin-top: 1.3em; }
.help-article code { background: #f2f3f5; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.help-article pre { background: #1a1410; color: #f3e9dd; padding: 14px 16px; border-radius: 8px; overflow-x: auto; }
.help-article pre code { background: none; padding: 0; color: inherit; }
.help-article blockquote {
    margin: 1em 0;
    padding: 10px 16px;
    border-left: 3px solid #e0a648;
    background: #fdf6ea;
    color: #5b4a2f;
}
.help-article ul, .help-article ol { line-height: 1.7; }
.help-more { display: inline-block; margin-top: 10px; font-size: .9rem; font-weight: 600; }
.help-article figure { margin: 1.4em 0; }
.help-article figure img { display: block; width: 100%; border: 1px solid #d5d8de; border-radius: 8px; }
.help-article figcaption { margin-top: 6px; font-size: .85rem; color: #6b7280; text-align: center; }

.admin-side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.admin-side .brand { margin-bottom: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-brand-toggle {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 4px; border: none; border-radius: 10px;
    background: rgba(255,255,255,.06); color: #cdd0e0; cursor: pointer; line-height: 1;
}
.admin-brand-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.admin-brand-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.admin-brand-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.order-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.order-qr img { flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.order-qr > div { flex: 1 1 240px; }
.order-qr code { background: #f1f2f7; padding: 1px 5px; border-radius: 4px; }

.admin-nav a { display: flex; align-items: center; gap: 10px; }
.admin-nav-ico { width: 20px; text-align: center; flex: 0 0 auto; font-size: 1rem; }
.admin-nav-group { margin: 14px 0 2px; padding: 0 12px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7180; }

html.admin-collapsed .admin-shell { grid-template-columns: 64px 1fr; }
html.admin-collapsed .admin-nav-label,
html.admin-collapsed .admin-nav-group { display: none; }
html.admin-collapsed .admin-side { padding: 22px 10px; }
html.admin-collapsed .admin-nav a,
html.admin-collapsed .admin-side-head,
html.admin-collapsed .admin-side-foot form button { justify-content: center; gap: 0; }

@media (max-width: 900px) {
    .table, .foodmenu-table, .rv-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .rs-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .admin-shell { grid-template-columns: 1fr; }

    .admin-topbar { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 14px; background: #14162a; z-index: 60; }
    .admin-topbar .brand { color: #fff; margin: 0; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
    .admin-topbar-name { display: inline-block; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-topbar .admin-brand-toggle { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.28); }

    .admin-side { position: fixed; top: 0; bottom: 0; left: 0; width: 270px; max-width: 84vw; transform: translateX(-100%); transition: transform .22s ease; z-index: 70; overflow-y: auto; padding: 18px 16px; flex-direction: column; align-items: stretch; }
    html.admin-drawer-open .admin-side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .admin-side .admin-brand-toggle { display: none; }
    .admin-nav { flex-direction: column; }
    .admin-side-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }

    html.admin-collapsed .admin-shell { grid-template-columns: 1fr; }
    html.admin-collapsed .admin-nav-label,
    html.admin-collapsed .admin-nav-group { display: revert; }
    html.admin-collapsed .admin-side { padding: 18px 16px; }
    html.admin-collapsed .admin-nav a,
    html.admin-collapsed .admin-side-head,
    html.admin-collapsed .admin-side-foot form button { justify-content: flex-start; gap: 10px; }

    .admin-scrim { display: block; position: fixed; inset: 0; background: rgba(10,12,24,.5); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    html.admin-drawer-open .admin-scrim { opacity: 1; pointer-events: auto; }
    html.admin-drawer-open { overflow: hidden; } 

    .admin-main { padding: 74px 16px 32px; max-width: none; }
    .admin-main h1, .page-head h1 { font-size: 1.5rem; }
    .panel { padding: 16px; }
}

@media (max-width: 480px) {
    .admin-main { padding: 70px 12px 28px; }
    .panel { padding: 14px; }
    .inline-form { width: 100%; }
    .inline-form .card-input { flex: 1 1 auto; min-width: 0; }
}

.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

.staff-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.staff-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.staff-check { flex-direction: row !important; align-items: center; gap: 8px; align-self: end; }
.staff-check input, .perm-check input { width: auto; margin: 0; }
.staff-check-block { display: block; font-size: .82rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 12px; }
.staff-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.staff-row > summary { cursor: pointer; font-size: .95rem; }
.staff-row > summary .badge { margin-left: 6px; }
.staff-row > form, .staff-actions { margin-top: 14px; }
.staff-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.perm-details { margin: 6px 0 14px; }
.perm-details > summary { cursor: pointer; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 10px 0 16px; }
.perm-group { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.perm-group h4, .perm-group legend { margin: 0 0 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .85rem; margin-bottom: 6px; }
.perm-row .card-input { padding: 5px 8px; font-size: .82rem; width: auto; }
.perm-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin-bottom: 6px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eef; color: #445; font-size: .72rem; font-weight: 600; }
.btn-danger { color: var(--danger, #c0432f); }

select,
textarea,
input:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=submit], [type=button], [type=image])) {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
    font: inherit; background: #fdfdff; color: var(--ink);
    transition: border .15s, box-shadow .15s;
}
select:focus, textarea:focus,
input:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=submit], [type=button], [type=image])):focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
}
select:disabled, textarea:disabled,
input:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=submit], [type=button], [type=image])):disabled {
    background: #f4f4f7; color: var(--ink-soft);
}

.field-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field-grid > label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .9rem; }
.field-grid > label > input, .field-grid > label > select { min-width: 14rem; font-weight: 400; }

.btn-sm { padding: 6px 12px; font-size: .82rem; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.field-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 16px; }
.field-narrow input, .field-narrow select { max-width: 14rem; }

.ship-methods { display: flex; flex-direction: column; gap: 2px; }
.ship-methods .ship-row { align-items: center; }

.foodmenu-form { display: flex; flex-direction: column; gap: 12px; }

.filter-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.filter-group-head h2 { margin: 0; }
.shared-filter-group { margin-bottom: 18px; }
.shared-filter-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .95rem; }
.badge-locked { background: #eef2ff; color: #3730a3; }

.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.danger-zone { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

.brand-icon-preview { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }

.events-editor-loading { padding: 20px 0; }

.cust-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start;
    margin-bottom: 20px; }
@media (max-width: 900px) { .cust-grid { grid-template-columns: 1fr; } }
.cust-main, .cust-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cust-grid .panel { margin: 0; }
.cust-grid h3 { font-size: .9rem; margin: 18px 0 6px; }
.cust-address { margin: 0; line-height: 1.6; }

.cust-side .stat { padding: 16px 18px; }
.cust-side .stat-value { font-size: 1.5rem; }

.cust-fob { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cust-fob img { width: 200px; height: 200px; flex: none; }
.cust-fob-body { flex: 1 1 16rem; min-width: 0; }
.cust-fob-body h2 { margin-top: 0; }
.cust-fob-code { font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 1px; margin: 0 0 6px; }

.cust-adjust { align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.cust-adjust-field { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .85rem; }
.cust-adjust-field input { font-weight: 400; }
.cust-adjust-reason { flex: 1 1 18rem; }

.cust-pos { color: #065f46; }
.cust-neg { color: #991b1b; }

.th-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.th-sort:hover { color: var(--brand); }
.th-sort.is-sorted { color: var(--brand); }
.th-caret { font-size: .65em; min-width: .7em; line-height: 1; }
th.num .th-sort { justify-content: flex-end; }

.cust-match { font-size: .82rem; font-weight: 400; }

.field select, .field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; background: #fdfdff; transition: border .15s, box-shadow .15s;
}
.field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }

.badge-shipped { background: #f5f3ff; color: #5b21b6; }
.badge-processing { background: #eff6ff; color: #1e40af; }
.badge-completed { background: #ecfdf5; color: #065f46; }
.badge-refunded { background: #f3f4f6; color: #374151; }
.badge-partially_refunded { background: #fffbeb; color: #92400e; }

.badge-requested { background: #fffbeb; color: #92400e; }
.badge-authorised { background: #eff6ff; color: #1e40af; }
.badge-rejected { background: #fef2f2; color: #991b1b; }

.theme-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.theme-choice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.theme-swatch { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.lang-choices { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.lang-choice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.lang-choice input:disabled + span { opacity: .6; }
.lang-pct-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lang-pct-row .lang-name { min-width: 8rem; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pager { margin-top: 16px; }

.pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pager-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.pager-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 36px;
    padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
    color: var(--ink); font-size: .86rem; font-weight: 600; text-decoration: none;
    transition: border .15s, color .15s;
}
.pager-link:hover { border-color: var(--brand); color: var(--brand); }
.pager-link.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager-link.is-disabled { color: var(--ink-soft); background: #f7f7fa; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--ink-soft); }

#nav-builder { --nb-line: var(--line); }
.nb-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.nb-h2 { margin: 0 0 2px; font-size: 1.05rem; }
.nb-hint { margin: 0; color: var(--ink-soft); font-size: .82rem; max-width: 46ch; }
.nb-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nb-langs { display: inline-flex; gap: 4px; background: #f2f3f9; padding: 3px; border-radius: 10px; }
.nb-lang { border: 0; background: transparent; padding: 5px 10px; border-radius: 8px; font: inherit; font-size: .8rem; color: var(--ink-soft); cursor: pointer; }
.nb-lang.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.nb-save { border: 0; background: var(--grad); color: #fff; padding: 9px 16px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(99,102,241,.6); }
.nb-langnote { margin: -4px 0 12px; font-size: .82rem; color: var(--ink-soft); }

.nb-menubar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; padding: 10px; background: #f7f8fc; border: 1px solid var(--nb-line); border-radius: 12px; }
.nb-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--nb-line); border-radius: 10px; cursor: grab; user-select: none; }

.nb-tab > .nb-switch, .nb-tab > .nb-x {
    max-width: 0; opacity: 0; margin-left: -8px; padding-left: 0; padding-right: 0;
    overflow: hidden; white-space: nowrap; pointer-events: none;
    transition: max-width .2s cubic-bezier(.4,0,.2,1), opacity .16s ease,
                margin-left .2s cubic-bezier(.4,0,.2,1), padding .2s cubic-bezier(.4,0,.2,1);
}
.nb-tab:hover > .nb-switch, .nb-tab:hover > .nb-x,
.nb-tab:focus-within > .nb-switch, .nb-tab:focus-within > .nb-x,
.nb-tab.active > .nb-switch, .nb-tab.active > .nb-x {
    max-width: 60px; opacity: 1; margin-left: 0; padding-left: 8px; padding-right: 8px; pointer-events: auto;
}
.nb-feature > .nb-feat-label {
    max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    transition: max-width .22s cubic-bezier(.4,0,.2,1), opacity .16s ease;
}
.nb-feature:hover > .nb-feat-label,
.nb-feature:focus-within > .nb-feat-label,
.nb-feature.off > .nb-feat-label { max-width: 200px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nb-feature > .nb-feat-label { transition: none; } }

.nb-tab.off > .nb-switch { max-width: 60px; opacity: 1; margin-left: 0; padding-left: 8px; padding-right: 8px; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .nb-tab > .nb-switch, .nb-tab > .nb-x { transition: none; } }
.nb-tab.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.nb-tab.off { opacity: .5; }
.nb-tab.nb-dragging { opacity: .4; }
.nb-tab-label, .nb-cat-label, .nb-sub-label { cursor: text; font-weight: 500; padding: 1px 3px; border-radius: 5px; }
.nb-tab-label:hover, .nb-cat-label:hover, .nb-sub-label:hover { background: #eef0f8; }
.nb-ghost { color: #a0a4b8; font-style: italic; }
.nb-feature { background: #eef0fb; }
.nb-feat-dot { color: var(--brand); font-size: .7rem; }
.nb-tab-add { border: 1px dashed #c7cbe0; background: transparent; color: var(--brand-ink); padding: 7px 12px; border-radius: 10px; font: inherit; cursor: pointer; }
.nb-input { font: inherit; padding: 4px 7px; border: 1px solid var(--brand); border-radius: 7px; min-width: 8rem; }

.nb-switch { border: 1px solid var(--nb-line); background: #f2f3f9; color: var(--ink-soft); font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; cursor: pointer; }
.nb-switch.on { background: rgba(22,163,74,.12); color: var(--ok); border-color: rgba(22,163,74,.3); }
.nb-switch.sm { font-size: .62rem; padding: 2px 6px; }
.nb-x { border: 0; background: transparent; color: #b3b7c7; font-size: .95rem; line-height: 1; cursor: pointer; padding: 2px 4px; }
.nb-x:hover { color: var(--err); }
.nb-img { display: inline-flex; align-items: center; gap: 6px; }
.nb-img-preview { width: 30px; height: 22px; border-radius: 4px; border: 1px solid var(--nb-line); background-size: cover; background-position: center; flex: none; }
.nb-img-preview.empty { background: repeating-linear-gradient(45deg, #f2f3f9, #f2f3f9 4px, #e8eaf3 4px, #e8eaf3 8px); }
.nb-img-btn { border: 1px solid var(--nb-line); background: #f2f3f9; color: var(--ink-soft); font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; cursor: pointer; }
.nb-img-btn:hover:not(:disabled) { border-color: var(--brand, #6d3bef); color: var(--brand, #6d3bef); }
.nb-img-btn:disabled { opacity: .6; cursor: default; }
.nb-cat-desc { padding: 0 8px 8px 34px; }
.nb-cat-descinput { width: 100%; font-size: .82rem; padding: 4px 8px; }
.nb-img--icon .nb-img-preview { width: 42px; height: 42px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.nb-img-clear { border: 0; background: transparent; color: #b3b7c7; font-size: .95rem; line-height: 1; cursor: pointer; padding: 2px 4px; }
.nb-img-clear:hover { color: var(--err); }
.nb-grip { color: #c2c6d6; cursor: grab; }
.nb-grip.sm { font-size: .82rem; }

.nb-panel { margin-top: 14px; border: 1px solid var(--nb-line); border-radius: 12px; padding: 14px; background: var(--surface);
            overflow: hidden; opacity: 0; transform: translateY(-4px);
            transition: max-height .24s cubic-bezier(.4,0,.2,1), opacity .2s ease, transform .24s cubic-bezier(.4,0,.2,1); }
.nb-panel.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nb-panel { transition: none; } }
.nb-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.nb-panel-edit { margin-left: auto; align-self: center; padding: 5px 14px; border: 1px solid var(--nb-line); border-radius: 8px;
    background: var(--surface); color: inherit; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.nb-panel-edit:hover { border-color: var(--brand); color: var(--brand); }

.nb-modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(15, 16, 24, .55); display: flex; align-items: center; justify-content: center; padding: 24px; }
/* display:flex beats the hidden attribute's display:none, so a hidden modal stays on screen unless
   this says otherwise. Every user of nb-modal-back needs it, so it belongs here and not in each one. */
.nb-modal-back[hidden] { display: none; }
.nb-modal { display: flex; flex-direction: column; position: relative; width: min(1100px, 100%); max-height: min(760px, 90vh); background: #fff;
    border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 16, 24, .28); overflow: hidden; }
.nb-modal-head { display: flex; align-items: baseline; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.nb-modal-title { font-size: 1.05rem; }
.nb-modal-sub { color: var(--ink-soft); font-size: .9rem; }
.nb-modal-close { margin-left: auto; align-self: center; border: 0; background: transparent; color: var(--ink-soft); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px 6px; }
.nb-modal-close:hover { color: var(--ink); }
.nb-modal-body { flex: 1 1 auto; overflow: auto; padding: 20px; }
/* The footer had only ever been styled inside .bp-modal, so every other modal using it rendered its
   buttons flush against the bottom-left corner with no padding at all. It belongs here beside the
   head and the body, which are shared the same way. flex: 0 0 auto keeps it off the body's scroll. */
.nb-modal-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.nb-modal-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nb-modal-status { font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f3f4f6; color: #374151; }
.nb-modal-status.is-ahead { background: #fffbeb; color: #92400e; }
.nb-modal-status.is-current { background: #ecfdf5; color: #065f46; }
.nb-modal-status.is-never { background: #eff6ff; color: #1e40af; }

.nb-des-tools { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: #fbfbfe; }
.nb-des-toolsnote { font-size: .82rem; color: var(--ink-soft); }
.nb-des-toolbtns { margin-left: auto; display: flex; gap: 8px; }
.nb-des-tool { padding: 6px 12px; border: 1px solid var(--nb-line, var(--line)); border-radius: 8px; background: #fff; color: inherit;
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.nb-des-tool:hover { border-color: var(--brand); color: var(--brand); }

.nb-des { --navcol2-w: max(220px, calc(580px - var(--navcat-w, 230px)));
    display: grid; grid-template-columns: var(--navcat-w, 230px) var(--navcol2-w) 220px; grid-template-rows: auto 1fr auto;
    width: calc(var(--navcat-w, 230px) + var(--navcol2-w) + 220px); max-width: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 340px;
    background-repeat: repeat-y; background-size: auto; background-position: left top; }
.nb-des.has-bg .nb-des-cats,
.nb-des.has-bg .nb-des-col,
.nb-des.has-bg .nb-des-col.on { background: transparent; }
.nb-des.has-bg .nb-des-block { background: transparent; border-color: transparent; }
.nb-des.has-bg .nb-des-block:hover { border-color: rgba(255, 255, 255, .6); }
.nb-des.has-bg .nb-des-block.is-open { border-color: var(--brand); }
.nb-des-cats { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.nb-des-cat { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 7px 22px; font-size: 13.5px; border: 0; border-left: 2px solid transparent;
    background: transparent; color: inherit; font: inherit; font-size: .92rem; cursor: pointer; }
.nb-des-cat.on { border-left-color: var(--brand); color: var(--navcat-link, var(--brand)); font-weight: 600; }
.nb-des-caticon { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; border-radius: 6px; }
.nb-des-catwords { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nb-des-catname { font-weight: 600; white-space: nowrap; }
.nb-des-catdesc { font-size: 12px; font-weight: 400; color: var(--ink-soft); line-height: 1.35; }
.nb-des-dot { margin-left: auto; color: var(--brand); font-size: .6rem; }

.nb-des-col { position: relative; display: flex; flex-direction: column; gap: 4px; cursor: default; }
.nb-des-col--r2, .nb-des-col--r3 { border-left: 1px solid var(--line); }
.nb-des-col > .nb-fieldnote { padding: 16px 22px; margin: 0; }

.nb-des-cats { grid-column: 1; grid-row: 1 / -1; }
.nb-des-col--r1 { grid-column: 2 / -1; grid-row: 1; }
.nb-des-col--r2 { grid-column: 2; grid-row: 2; }
.nb-des-col--r3 { grid-column: 3; grid-row: 2; }
.nb-des-col--r4 { grid-column: 2 / -1; grid-row: 3; }
.nb-des-col--r1 { border-bottom: 1px solid var(--line); border-top: 0; }
.nb-des-col--row { align-content: flex-start; min-height: 0; }
.nb-des-col--r1, .nb-des-col--r4 { border-left: 0; }
.nb-des-col--row { grid-column: 2 / -1; border-top: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.nb-des-col--row > .nb-des-block { flex: 0 1 auto; }
.nb-des-col--row > .nb-fieldnote { flex: 1 1 100%; }
.nb-des-wrap { overflow-x: auto; }
.nb-des-col.on { background: #fcfcff; box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .18); }
.nb-des-colbadge { position: absolute; top: 6px; right: 8px; z-index: 2; padding: 2px 8px; border-radius: 999px;
    background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; pointer-events: none; }

.nb-des-block { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.nb-des-block.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.nb-des-preview { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.nb-des-block--image .nb-des-preview { display: block; }
.nb-des-block--tile-top .nb-des-preview { flex-direction: column; align-items: stretch; }
.nb-des-block--tile-top .nb-des-previmg { width: 100%; height: auto; }
.nb-des-block--link .nb-des-preview { padding: 0; }
.nb-des-previmg { width: 72px; height: auto; border-radius: 6px; background: #f1f1f7; flex: 0 0 auto; }
.nb-des-block--image .nb-des-previmg { width: 100%; height: auto; border-radius: 6px; }
.nb-des-previmg--empty { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #b9b9c9; height: 48px; }
.nb-des-block--tile-top .nb-des-previmg--empty, .nb-des-block--image .nb-des-previmg--empty { height: 96px; }
.nb-des-prevwords { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-des-prevlabel { font-weight: var(--navblk-weight, 600); font-size: var(--navblk-size, 14px); color: var(--navblk-link, inherit); }
.nb-des-block--heading .nb-des-prevlabel { font-size: var(--navblk-size, 14px); font-weight: var(--navblk-weight, 600); }
.nb-des-block--text .nb-des-prevlabel { font-size: var(--navblk-size, 13px); font-weight: var(--navblk-weight, 400); color: var(--navblk-link, var(--ink-soft)); }
.nb-des-prevbody { font-size: .82rem; color: var(--ink-soft); }
.nb-des-prevlinks { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 13px; }
.nb-des-prevlink { color: var(--navblk-link, var(--brand)); border-radius: 4px; outline: none; }
.nb-des-prevlink:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, .35); }
.nb-des-prevlink.is-empty::before { content: attr(data-placeholder); color: #b3b3c4; }
.nb-des-sep { color: var(--ink-soft); white-space: pre; }
.nb-des-addlink { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: .8rem; padding: 0 4px; border-radius: 4px; }
.nb-des-addlink:hover { color: var(--brand); background: #f2f2fa; }
.nb-des-sepsel { flex: 0 0 auto; width: 5.5rem; }
.nb-des-menu { position: absolute; z-index: 1200; width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(17,20,34,.22); }
.nb-des-menu .nb-des-blockbar { border-top: 0; border-radius: 12px; background: #fff; padding: 10px; gap: 6px; }
.nb-des-menu .nb-des-blockbar > .nb-input.sm { flex: 1 1 100%; }
.nb-des-menuname { flex: 1 1 100%; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.nb-des-blockbar--cat { flex-direction: column; align-items: stretch; }
.nb-des-cat { color: var(--navcat-link, inherit); }
.nb-des-cat:hover { color: var(--navcat-link-hover, var(--brand)); }
.nb-des-blockbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px; border-top: 1px solid var(--line); background: #fcfcff; }
.nb-des-blockbar .nb-input.sm { flex: 1 1 130px; min-width: 0; padding: 4px 8px; font-size: .8rem; }
.nb-des-padcell .nb-input.sm { flex: 0 1 auto; width: 100%; min-width: 0; padding: 3px 4px; font-size: .78rem; text-align: center; }
.nb-des-tool.sm { padding: 4px 10px; font-size: .78rem; }
.nb-des-del { flex: 0 0 auto; margin-left: auto; font-size: .8rem; }
.nb-des-move { border: 0; background: transparent; cursor: pointer; color: var(--ink-soft); font-size: .9rem; padding: 2px 5px; border-radius: 6px; }
.nb-des-move:hover { color: var(--brand); background: #f2f2fa; }
.nb-des-blockbar .nb-x { margin-left: auto; }
.nb-des-field { display: flex; flex-direction: column; gap: 3px; }

.nb-des-prevlabel, .nb-des-prevbody { outline: none; border-radius: 4px; }
.nb-des-prevlabel:focus, .nb-des-prevbody:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, .35); }
.nb-des-prevlabel.is-empty::before, .nb-des-prevbody.is-empty::before { content: attr(data-placeholder); color: #b3b3c4; }

.nb-des-addpop { width: 380px; }
.nb-des-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb-des-typerow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: end; }
.nb-des-typerows, .nb-des-stylerows, .nb-des-colourrows { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.nb-des-colourrows { margin-top: 0; }
.nb-des-padgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.nb-des-padcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-des-padcell .nb-input { width: 100%; min-width: 0; }
.nb-des-padlabel { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.nb-des-colrow { display: flex; align-items: center; gap: 10px; }
.nb-des-colrow .nb-des-padlabel { flex: 0 0 62px; }
.nb-des-colrow .nb-fieldnote { flex: 1 1 auto; margin: 0; }
.nb-des-colour { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.nb-des-addcard { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px; border: 1px solid var(--line);
    border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.nb-des-addcard:hover { border-color: var(--brand); }
.nb-des-sketch { width: 100%; height: 42px; background: #f5f5fb; border-radius: 6px; padding: 4px; fill: #c9c9dd; }
.nb-des-addname { font-size: .82rem; font-weight: 600; }
.nb-des-image { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nb-des-pop { position: absolute; top: 64px; right: 20px; width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 16, 24, .18); padding: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.nb-des-histrow { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: .86rem; }
.nb-des-livetag { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: #065f46; background: #ecfdf5; padding: 2px 8px; border-radius: 999px; }
.nb-panel-title { font-weight: 700; }
.nb-panel-sub { color: var(--ink-soft); font-size: .8rem; }
.nb-cats { display: flex; flex-direction: column; gap: 10px; }
.nb-empty-inline { color: var(--ink-soft); font-size: .85rem; padding: 6px 2px; }
.nb-cat { border: 1px solid var(--nb-line); border-radius: 10px; padding: 10px; }
.nb-cat.off { opacity: .55; }
.nb-cat-row { display: flex; align-items: center; gap: 8px; }
.nb-subs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0 22px; }
.nb-sub { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #f7f8fc; border-radius: 8px; }
.nb-sub.off { opacity: .55; }
.nb-add-sub, .nb-add-cat { align-self: flex-start; border: 1px dashed #c7cbe0; background: transparent; color: var(--brand-ink); padding: 5px 10px; border-radius: 8px; font: inherit; font-size: .82rem; cursor: pointer; margin-top: 6px; }
.nb-cat-adv { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--nb-line); }
.nb-check { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
.nb-fgroups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.nb-fieldlabel { font-size: .78rem; color: var(--ink-soft); }
.nb-fieldnote { font-size: .78rem; color: var(--ink-soft); font-style: italic; }
.nb-fgroup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--nb-line); border-radius: 999px; font-size: .8rem; cursor: pointer; }
.nb-fgroup-chip.on { background: rgba(99,102,241,.1); border-color: var(--brand); color: var(--brand-ink); }

.nb-dirty { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); font-size: .85rem; }
.nb-dirty-save { border: 0; background: #fff; color: var(--ink); font: inherit; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }

.hero-toolbar { display: flex; align-items: flex-end; gap: 16px; }
.hero-toolbar .field { margin: 0; }
.hero-toolbar select { min-width: 220px; }
.hero-editor-loading { padding: 24px; }
.hero-empty { padding: 28px; text-align: center; }

.hero-card { padding: 0; overflow: hidden; }
.hero-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fafbff; }
.hero-order { display: inline-flex; gap: 2px; }
.hero-order .btn-link { padding: 2px 6px; font-size: 1rem; line-height: 1; }
.hero-card-title { flex: 1; font-size: .95rem; }
.hero-active { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.hero-del { color: #b91c1c; }

.hero-tabs { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; }
.hero-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px 999px 0 0; padding: 6px 14px; font: inherit; font-size: .8rem; color: var(--ink-soft); cursor: pointer; }
.hero-tab.is-active { border-color: var(--brand); color: var(--brand-ink); background: rgba(99,102,241,.08); font-weight: 600; }

.hero-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 16px; }
.hero-fields { display: flex; flex-direction: column; gap: 12px; }
.hero-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.hero-field span { text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.admin-input { border: 1px solid #cdd2e6; border-radius: 8px; padding: 8px 11px; font: inherit; font-size: .88rem; color: var(--ink); width: 100%; background: #fff; }
textarea.admin-input { resize: vertical; }
.hero-row { display: flex; gap: 12px; }
.hero-row > .hero-field { flex: 1; }
.hero-layout { display: flex; flex-direction: column; gap: 12px; }
.hero-layout-hint { font-size: .78rem; font-style: italic; }
.hero-save { align-self: flex-start; margin-top: 4px; }
.hero-card-err { margin: 4px 0 0; }

.hero-field-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.imged-wrap { display: flex; flex-direction: column; gap: 6px; }
.imged { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.imged-frame { position: relative; width: 100%; border: 2px dashed #cdd2e6; border-radius: 10px; overflow: hidden; background: #eef0f7; display: flex; align-items: center; justify-content: center; touch-action: none; }
.imged-frame.grabbing { cursor: grabbing; }
.imged-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; cursor: grab; }
.imged-saved { width: 100%; height: 100%; object-fit: cover; display: block; }
.imged-saved[hidden] { display: none; }
.imged-empty { color: #9096ad; font-size: .82rem; }
.imged-tools { display: flex; align-items: center; gap: 12px; }
.imged-btn { border: 1px solid #cdd2e6; background: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .82rem; color: var(--ink); cursor: pointer; }
.imged-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.imged-file { display: none; }
.imged-zoom { flex: 1; accent-color: var(--brand); }
.imged-danger { color: #b91c1c; }
.imged-danger:hover { border-color: #b91c1c; color: #b91c1c; }

.imged-modal-back { position: fixed; inset: 0; background: rgba(17, 20, 34, .55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.imged-modal { background: #fff; border-radius: 14px; width: min(620px, 100%); max-height: 90vh; overflow: auto; padding: 18px 20px 16px; box-shadow: 0 20px 60px rgba(17, 20, 34, .3); }
.imged-modal-head { font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 12px; }
.imged-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.hero-pv { position: relative; border-radius: 10px; min-height: 260px; overflow: hidden; display: grid; align-items: center; background-color: #15121a; background-size: cover; background-position: center; color: #ede6d8; }
.hero-pv-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,15,23,.9) 0%, rgba(18,15,23,.3) 60%, transparent 100%); }
.hero-pv.al-center .hero-pv-scrim { background: linear-gradient(0deg, rgba(18,15,23,.75), rgba(18,15,23,.35)); }
.hero-pv-inner { position: relative; z-index: 1; padding: 22px 26px; display: grid; gap: 8px; }
.hero-pv.al-center .hero-pv-inner { justify-items: center; text-align: center; }
.hero-pv.al-right .hero-pv-inner { justify-items: end; text-align: right; }
.hero-pv-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #e8a13a; }
.hero-pv-title { font-size: 1.9rem; font-weight: 800; line-height: 1.05; }
.hero-pv-sub { font-size: .9rem; color: #cfc7b8; }
.hero-pv-body { font-size: .82rem; color: #b8b0a2; max-width: 42ch; line-height: 1.5; }
.hero-pv-ctas { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hero-pv-btn { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(237,230,216,.4); font-size: .75rem; font-weight: 700; }
.hero-pv-btn.primary { background: #e8a13a; color: #1a1410; border-color: #e8a13a; }

@media (max-width: 900px) { .hero-card-body { grid-template-columns: 1fr; } }

.blog-admin { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.blog-list { display: flex; flex-direction: column; gap: 12px; }
.blog-new { align-self: stretch; }
.blog-list-items { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.blog-list-item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; }
.blog-list-item:last-child { border-bottom: none; }
.blog-list-item.is-active { background: #f3f4f6; }
.blog-li-title { font-size: .9rem; font-weight: 700; color: var(--ink); }
.blog-li-meta { font-size: .72rem; color: var(--ink-soft); }
.blog-badge { font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.blog-badge.st-published { background: #ecfdf5; color: #047857; }
.blog-badge.st-draft { background: #fff7ed; color: #b45309; }
.blog-list-empty { padding: 16px; }
.blog-empty-pane { padding: 40px; text-align: center; }

.blog-editor-pane { padding: 20px; }
.blog-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.blog-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .8rem; color: var(--ink-soft); cursor: pointer; }
.blog-tab.is-active { border-color: var(--brand); color: var(--brand-ink); background: rgba(99,102,241,.08); font-weight: 600; }
.blog-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.blog-field > span { text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.admin-input { width: 100%; border: 1px solid #cdd2e6; border-radius: 8px; padding: 8px 11px; font: inherit; font-size: .88rem; color: var(--ink); background: #fff; box-sizing: border-box; }
textarea.admin-input { resize: vertical; }
.blog-row { display: flex; gap: 12px; }
.blog-row > .blog-field { flex: 1; }
.blog-slug-row { display: flex; align-items: center; gap: 6px; }
.blog-slug-pre { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--ink-soft); }
.blog-layout-hint { font-size: .78rem; font-style: italic; margin: 0 0 12px; }

.blog-img { margin-top: 4px; border: 1px dashed #cdd2e6; border-radius: 10px; min-height: 120px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.blog-img.has { border-style: solid; }
.blog-img img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.blog-img-ph { color: var(--ink-soft); font-size: .82rem; }
.blog-file { display: none; }
.blog-img-clear { color: #b91c1c; align-self: flex-start; padding: 4px 0; }

.blog-body-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.blog-ptabs { display: inline-flex; border: 1px solid #cdd2e6; border-radius: 8px; overflow: hidden; }
.blog-ptab { border: none; background: #fff; padding: 4px 12px; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; color: var(--ink); border-right: 1px solid var(--line); }
.blog-ptab:last-child { border-right: none; }
.blog-ptab.is-active { background: var(--ink); color: #fff; }
.blog-body { width: 100%; min-height: 320px; resize: vertical; font-family: ui-monospace, monospace; font-size: .82rem; line-height: 1.6; box-sizing: border-box; }
.blog-preview { border: 1px solid var(--line); border-radius: 8px; min-height: 320px; width: 100%; display: block; background: #fff; }

.blog-seo { margin-top: 14px; }
.blog-seo summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--ink); }
.blog-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.blog-pub { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.blog-del { color: #b91c1c; margin-left: auto; }
.blog-err { margin-top: 12px; }
.blog-editor-loading { padding: 24px; }

@media (max-width: 900px) { .blog-admin { grid-template-columns: 1fr; } }

.blog-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.blog-list-head .btn-link { padding: 0; font-size: .72rem; }
.cp-empty { padding: 14px; font-size: .8rem; }

.cp-pill { margin-left: 8px; font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.cp-pill.is-live { background: #ecfdf5; color: #047857; }
.cp-pill.is-draft { background: #fff7ed; color: #b45309; }

.cp-add { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }

.cp-where { font-size: .78rem; line-height: 1.6; margin-bottom: 14px; }
.cp-where code { font-family: ui-monospace, monospace; font-size: .76rem; background: #f3f4f6; border-radius: 4px; padding: 1px 5px; }

.cp-toggles { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.cp-check { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.cp-seo-desc { min-height: 56px; }

.cp-blocks { margin-top: 22px; }
.cp-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.cp-block.is-off { opacity: .55; }
.cp-block-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.cp-block-type { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-ink); background: rgba(99,102,241,.08); border-radius: 999px; padding: 2px 9px; }
.cp-block-title { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-block-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.cp-block-tools .btn-link { padding: 2px 6px; }
.cp-block-body { padding: 4px 12px 14px; border-top: 1px solid var(--line); }
.cp-del { color: #b91c1c; }

.cp-add-block { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.cp-type-pick { max-width: 220px; }

.cp-image { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cp-thumb { max-width: 220px; border-radius: 8px; display: block; }

.cp-tiles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cp-tile { display: flex; flex-direction: column; gap: 7px; border: 1px dashed #cdd2e6; border-radius: 10px; padding: 10px; }
.cp-tile-head { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.cp-tile-head .cp-del { margin-left: auto; }
.cp-warn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #b45309; color: #fff; font-size: .66rem; font-weight: 700; }

.ev-today-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; cursor: pointer; }
.ev-today-toggle input { width: 16px; height: 16px; accent-color: var(--brand); }

.ev-admin { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.ev-admin-list { display: flex; flex-direction: column; gap: 12px; }
.ev-admin-list #ev-new { align-self: stretch; }
.ev-admin-list ul { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ev-list-item { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; }
.ev-admin-list li:last-child .ev-list-item { border-bottom: none; }
.ev-list-item:hover { background: #f8f9fc; }
.ev-list-item.is-active { background: #f3f4f6; box-shadow: inset 3px 0 0 var(--brand); }
.ev-list-title { font-size: .9rem; font-weight: 700; color: var(--ink); }
.ev-list-sub { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--ink-soft); }
.ev-list-count { margin-left: auto; }
.ev-list-empty { padding: 18px; font-size: .82rem; }
.ev-badge { font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.ev-badge.st-recurring { background: rgba(99,102,241,.1); color: var(--brand-ink); }
.ev-badge.st-oneoff { background: #eef2f7; color: #475569; }
.ev-badge.st-hidden { background: #fff7ed; color: #b45309; }

.ev-admin-detail { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.ev-admin-detail > .muted { padding: 20px 4px; }
.ev-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.ev-field > span { text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.ev-admin-detail input:not([type=checkbox]):not([type=file]),
.ev-admin-detail select,
.ev-admin-detail textarea {
    width: 100%; border: 1px solid #cdd2e6; border-radius: 8px; padding: 9px 11px; font: inherit;
    font-size: .88rem; color: var(--ink); background: #fff; box-sizing: border-box;
}
.ev-admin-detail textarea { resize: vertical; }
.ev-admin-detail input:focus, .ev-admin-detail select:focus, .ev-admin-detail textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.ev-newgame { display: flex; gap: 6px; margin-top: 6px; }
.ev-newgame[hidden] { display: none; }
.ev-newgame > button { flex: none; white-space: nowrap; }
.ev-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ev-row > .ev-field { flex: 1; min-width: 150px; }

.ev-check { display: flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 600; color: var(--ink); margin: 10px 0; cursor: pointer; }
.ev-check input { width: 16px; height: 16px; accent-color: var(--brand); }

.ev-recur-box, .ev-oneoff-box, .ev-tx { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 6px 0 14px; background: #fbfbfd; }
.ev-recur-box legend, .ev-oneoff-box legend, .ev-tx legend { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 0 6px; }
.ev-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.ev-days label { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cdd2e6; border-radius: 999px; padding: 5px 11px; font-size: .78rem; font-weight: 600; color: var(--ink); background: #fff; cursor: pointer; text-transform: capitalize; }
.ev-days label:has(input:checked) { border-color: var(--brand); background: rgba(99,102,241,.08); color: var(--brand-ink); }
.ev-days input { width: 14px; height: 14px; accent-color: var(--brand); }

.ev-tx-lang { padding: 10px 0; border-top: 1px dashed var(--line); }
.ev-tx-lang:first-of-type { border-top: none; }
.ev-tx-lang > strong { display: block; font-size: .82rem; color: var(--ink); margin-bottom: 8px; }

.ev-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ev-danger { color: #b91c1c; }
.ev-form-actions .ev-danger { margin-left: auto; }
.ev-form-flash { font-size: .82rem; font-weight: 600; border-radius: 8px; }
.ev-form-flash.is-ok, .ev-form-flash.is-err { padding: 10px 12px; margin-bottom: 12px; }
.ev-form-flash.is-ok { background: #ecfdf5; color: #047857; }
.ev-form-flash.is-err { background: #fef2f2; color: #b91c1c; }

.ev-bookings-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .82rem; }
.ev-bookings-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 8px 10px; border-bottom: 2px solid var(--line); }
.ev-bookings-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.ev-bookings-table tr:last-child td { border-bottom: none; }

@media (max-width: 900px) { .ev-admin { grid-template-columns: 1fr; } }

.admin-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 1000;
    max-width: 360px; padding: 13px 18px; border-radius: 10px;
    background: #065f46; color: #fff; font-size: .88rem; font-weight: 600;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,.4);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.admin-toast.is-show { opacity: 1; transform: translateY(0); }
.admin-toast.is-err { background: #991b1b; }
@media (max-width: 575px) { .admin-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

.disc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.disc-chips-empty { margin: 0; font-size: .82rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.disc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font-size: .82rem; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; }
.disc-chip em { font-style: normal; font-weight: 700; color: var(--ink-soft); font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em; }
.disc-chip-x { border: 0; background: none; cursor: pointer; color: var(--ink-soft);
    font-size: 1rem; line-height: 1; padding: 0 4px; }
.disc-chip-x:hover { color: var(--danger, #c0432f); }

.disc-targets-note { margin: 2px 0 10px; font-size: .78rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.disc-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.disc-add select { max-width: 16rem; font-size: .85rem; font-weight: 400; }
.disc-add-hint { margin: 6px 0 0; font-size: .78rem; font-weight: 400; text-transform: none; letter-spacing: 0; }

.signup-progress { display: flex; list-style: none; padding: 0; margin: 0 0 28px; }
.signup-progress-step {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: .74rem; color: var(--ink-soft); text-align: center;
}
.signup-progress-step::before {
    content: ""; position: absolute; top: 15px; right: 50%; left: -50%; height: 2px;
    background: var(--line); z-index: 0;
}
.signup-progress-step:first-child::before { display: none; }
.signup-progress-step.is-done::before, .signup-progress-step.is-current::before { background: var(--grad); }
.signup-progress-num {
    position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid;
    place-items: center; font-weight: 700; font-size: .82rem; background: #fff; color: var(--ink-soft);
    border: 2px solid var(--line);
}
.signup-progress-step.is-done, .signup-progress-step.is-current { color: var(--ink); font-weight: 700; }
.signup-progress-step.is-done .signup-progress-num { background: var(--grad); color: #fff; border-color: transparent; }
.signup-progress-step.is-current .signup-progress-num { color: var(--brand-ink); border-color: var(--brand); }

.game-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; margin-bottom: 20px; }
.check { display: flex; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; }
.check input:disabled { opacity: .4; }
.check:has(input:disabled) { color: var(--ink-soft); cursor: not-allowed; }

.wizard-actions { display: flex; gap: 12px; margin-top: 8px; }
.wizard-actions .btn { flex: 1; }

.auth-wrap--signup { max-width: 560px; }
.auth-wrap--wide { max-width: 960px; }
.auth-wrap--signup .game-picker { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

@media (max-width: 640px) {
    .auth-wrap--signup { margin: 28px auto; }
    .auth-wrap--signup .card { padding: 22px; }
}

.tag-picker-section { margin-bottom: 18px; }
.tag-picker-section:last-child { margin-bottom: 0; }
.tag-picker-heading { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 8px; }
.tag-picker-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.tag-picker-group > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 600; background: var(--panel, #fafbff); display: flex; align-items: center; gap: 8px; }
.tag-picker-group > summary::-webkit-details-marker { display: none; }
.tag-picker-group > summary::before { content: "▸"; color: var(--ink-soft); font-size: .8rem; transition: transform .12s; }
.tag-picker-group[open] > summary::before { transform: rotate(90deg); }
.tag-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; padding: 12px 14px; border-top: 1px solid var(--line); }

.foodmenu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; }
.foodmenu-check { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0; }
.foodmenu-table { width: 100%; border-collapse: collapse; }
.foodmenu-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.foodmenu-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.foodmenu-table input[type="text"], .foodmenu-table input[type="number"] { width: 100%; }
.foodmenu-table .foodmenu-desc { margin-top: 4px; font-size: .85rem; }
.foodmenu-table .foodmenu-num { max-width: 90px; }
.foodmenu-table .foodmenu-upc { max-width: 130px; }
.foodmenu-avail { text-align: center; }
.foodmenu-actions { white-space: nowrap; display: flex; gap: 6px; }

.rv-table { width: 100%; border-collapse: collapse; }
.rv-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rv-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rv-stars { color: #f5a623; white-space: nowrap; }
.rv-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; }
.rv-pending { background: #fff3cd; color: #8a6d3b; }
.rv-approved { background: #e6f4ea; color: #1a7f37; }
.rv-rejected { background: #fde8e8; color: #b42318; }
.rv-actions { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; }
.rv-actions form { display: inline; }

.rs-wrap { display: grid; grid-template-columns: 200px 1fr 260px; gap: 16px; align-items: start; }
.rs-floor-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rs-floor-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 4px; border-radius: 6px; }
.rs-floor-row.is-active { background: var(--panel, #eef); }
.rs-floor-pick { background: none; border: 0; cursor: pointer; font: inherit; text-align: left; flex: 1; }
.rs-floor-ctl button { background: none; border: 0; cursor: pointer; font-size: .8rem; padding: 2px; }
.rs-toolbar { margin-bottom: 8px; display: flex; gap: 6px; }
.rs-grid { display: grid; gap: 3px; background: var(--panel, #f4f5fb); border: 1px solid var(--line); padding: 6px; border-radius: 8px; user-select: none; touch-action: none; min-height: 420px; }
.rs-tile { position: relative; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .72rem; cursor: grab; padding: 2px; text-align: center; }
.rs-tile.is-sel { outline: 3px solid #111; }
.rs-tile.rs-fixture { opacity: .55; }
.rs-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
    background: rgba(0,0,0,.28); border-radius: 0 0 6px 0;
    box-shadow: inset -3px -3px 0 -1px rgba(255,255,255,.7); }
.rs-tile:hover .rs-resize, .rs-tile.is-sel .rs-resize { background: rgba(0,0,0,.5); }
.rs-need-floor { margin-left: 10px; font-size: .85rem; }
.rs-size { display: flex; gap: 12px; }
.rs-size .field { flex: 1; }
.rs-form .field { margin-bottom: 10px; }
.rs-form label { display: block; font-size: .85rem; margin-bottom: 4px; }
.rs-form input:not([type=checkbox]), .rs-form select { width: 100%; }
.rs-toolbar .btn[disabled] { opacity: .45; cursor: not-allowed; }

#league-admin .lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 800px) { #league-admin .lg-grid { grid-template-columns: 1fr; } }
.lg-card { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 16px; }
.lg-card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.lg-field { display: block; margin-bottom: 12px; }
.lg-field span { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: 4px; }
.lg-places-head { font-size: .85rem; color: var(--ink-soft); margin: 4px 0 6px; }
.lg-places { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lg-place { display: flex; flex-direction: column; width: 64px; }
.lg-place span { font-size: .75rem; color: var(--ink-soft); margin-bottom: 2px; }
.lg-place input { width: 100%; }

.lg-seasons { list-style: none; margin: 0 0 12px; padding: 0; }
.lg-seasons li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lg-seasons li:last-child { border-bottom: 0; }
.lg-badge { display: inline-block; font-size: .7rem; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.lg-badge-on { background: var(--ok, #16a34a); color: #fff; }
.lg-season-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lg-season-form input[type=text] { flex: 1 1 12rem; }

.lg-run { margin-top: 4px; }
.lg-run #lg-occ { width: 100%; max-width: 40rem; margin-bottom: 14px; }
.lg-run-meta { margin-bottom: 10px; }
.lg-roster-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.lg-roster-table th, .lg-roster-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.lg-roster-table th { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.lg-placing { width: 4rem; }
.lg-scored { color: var(--ok, #16a34a); font-weight: 600; }

.lg-pairings { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.lg-pairings h3 { font-size: 1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.lg-round h4 { font-size: .9rem; margin: 10px 0 4px; display: flex; align-items: center; gap: 8px; }
.lg-round ul { list-style: none; margin: 0; padding: 0; }
.lg-round li { padding: 4px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn-xs { padding: 2px 8px; font-size: .75rem; }
.lg-monitor { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.lg-monitor a { word-break: break-all; }

.table .num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pe { display: block; }

.pe-toolbar { position: absolute; z-index: 950; display: flex; flex-direction: column; gap: 5px; padding: 5px; background: rgba(23,20,34,.95); border-radius: 9px; box-shadow: 0 8px 26px rgba(17,20,34,.32); }
.pe-tb-row { display: flex; align-items: center; gap: 3px; }
.pe-toolbar-name { color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; padding: 0 5px 0 3px; white-space: nowrap; }
.pe-tb { border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 5px; padding: 3px 8px; font: inherit; font-size: .74rem; cursor: pointer; line-height: 1.4; }
.pe-tb:hover { background: rgba(255,255,255,.28); }
.pe-rot { display: inline-block; transform: rotate(-90deg); }

.pe-tb:disabled { opacity: .3; cursor: default; }
.pe-tb:disabled:hover { background: rgba(255,255,255,.14); }
.pe-tb-primary { background: var(--brand); }
.pe-tb.pe-danger { color: #fecaca; }
.pe-tb.pe-danger:hover { background: #b91c1c; color: #fff; }

.pe-tb-colour { border-top: 1px solid rgba(255,255,255,.14); padding-top: 5px; }
.pe-tb-sel { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 5px; padding: 3px 6px; font: inherit; font-size: .74rem; }
.pe-tb-sel option { color: #17141c; }

.pe-stage { min-width: 0; overflow-x: auto; }
.pe-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pe-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .78rem; cursor: pointer; color: var(--ink); }
.pe-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pe-zoom { width: 130px; accent-color: var(--brand); }
.pe-zoom-val { font-size: .75rem; color: var(--ink-soft); min-width: 34px; }

.pe-frame-wrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-inline: auto; }
.pe-frame { border: 0; display: block; }

.pe-pop { position: absolute; z-index: 900; width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(17,20,34,.18); }
.pe-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pe-pop-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; max-height: 320px; overflow: auto; }
.pe-mini { border: 1px solid #cdd2e6; background: #fff; border-radius: 6px; padding: 2px 7px; font: inherit; font-size: .74rem; cursor: pointer; color: var(--ink); }
.pe-mini:hover { border-color: var(--brand); color: var(--brand-ink); }
.pe-danger { color: #b91c1c; }
.pe-danger:hover { border-color: #b91c1c; color: #b91c1c; }
.pe-field { display: flex; flex-direction: column; gap: 3px; }
.pe-field > span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.pe-field small { font-size: .7rem; line-height: 1.35; }
.pe-field .admin-input { font-size: .82rem; padding: 5px 8px; }
.pe-check-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; cursor: pointer; }
.pe-check-row > span { font-size: .82rem; }
.pe-check-row > small { grid-column: 2; font-size: .7rem; line-height: 1.35; }
.pe-check { accent-color: var(--brand); width: 15px; height: 15px; grid-row: 1; }
.pe-publishpop .pe-pop-body .btn { align-self: flex-start; }
.pe-dirty { font-size: .78rem; margin-right: 10px; }
.pe-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #f7f8fc; border-radius: 7px; padding: 5px 7px; }
.pe-item-name { font-size: .78rem; color: var(--ink); flex: 1; min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-publish.is-quiet { opacity: .55; }
.pe-tb-img { display: inline-flex; gap: 2px; }
.pe-tb-clear { padding: 3px 6px; opacity: .75; }
.pe-tb-clear:hover { opacity: 1; }

.pe-pick { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 6px;
           background: rgba(255,255,255,.10); color: #fff; cursor: pointer; display: inline-flex;
           align-items: center; justify-content: center; }
.pe-pick:hover { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.18); }
.pe-pick svg { width: 15px; height: 15px; display: block; }
.pe-pick-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.pe-pick-clear { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
                 background: none; color: rgba(255,255,255,.72); font: inherit; font-size: .8rem;
                 line-height: 1; cursor: pointer; }
.pe-pick-clear:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.pe-icons { display: grid; grid-template-columns: repeat(7, 34px); gap: 5px; margin: 5px 0; justify-content: space-between; }
.pe-icon { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid var(--line);
           background: #fff; border-radius: 7px; cursor: pointer; color: var(--ink-soft); padding: 5px; }
.pe-icon svg { width: 100%; height: 100%; }
.pe-icon:hover { border-color: var(--brand); color: var(--brand-ink); }
.pe-icon.is-on { border-color: var(--brand); background: #efe9ff; color: var(--brand-ink);
                 box-shadow: inset 0 0 0 2px var(--brand); }
.pe-tb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pe-tb-delete { margin-left: auto; white-space: nowrap; }

.pe-crumbs { gap: 2px; flex-wrap: wrap; max-width: 260px; }
.pe-crumb { border: 0; background: none; color: #fff; opacity: .6; font: inherit; font-size: .7rem; cursor: pointer; padding: 1px 3px; border-radius: 4px; }
.pe-crumb:hover { opacity: 1; background: rgba(255,255,255,.16); }
.pe-crumb.is-here { opacity: 1; font-weight: 700; }
.pe-crumb-sep { color: #fff; opacity: .35; font-size: .7rem; }
.pe-tb-stack { display: flex; flex-direction: column; gap: 5px; }
.pe-tb-stack .pe-icons { background: rgba(255,255,255,.08); padding: 5px; border-radius: 6px; min-width: 278px; }
.pe-tb-stack .pe-icon { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.9); }
.pe-tb-input { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 5px; padding: 3px 7px; font: inherit; font-size: .74rem; width: 120px; }
.pe-tb-input::placeholder { color: rgba(255,255,255,.5); }
.pe-tb-num { width: 56px; }

.page-head-actions { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: space-between; }
.pe-status { display: flex; align-items: baseline; gap: 8px; margin: 0 auto; }
.pe-live { font-size: .82rem; }
.pe-viewlive { font-size: .82rem; color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.pe-viewlive:hover { text-decoration: underline; }
.pe-actions { display: flex; align-items: center; gap: 8px; }

.pe-pagesel { max-width: 240px; font-size: .82rem; padding: 4px 8px; }
.pe-add-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--brand); color: #fff;
              font-size: 1.05rem; line-height: 1; cursor: pointer; flex: none; }
.pe-add-btn:hover { background: var(--brand-ink, #5b2fd0); }

.pe-addmenu { width: 420px; }
.pe-addgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px 12px; }
.pe-addcard { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px;
              border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; }
.pe-addcard:hover { border-color: var(--brand); box-shadow: 0 3px 12px rgba(109,59,239,.14); }
.pe-addart { display: block; background: #f6f7fb; border-radius: 5px; padding: 5px; }
.pe-addart svg { width: 100%; height: auto; display: block; }
.pe-addart .o { fill: none; stroke: #c3c7da; stroke-width: 1.4; }
.pe-addart .f { fill: #6d3bef; }
.pe-addart .f6 { fill: #d7d9e8; }
.pe-addart .f4 { fill: #b9bdd2; }
.pe-addname { font-size: .74rem; font-weight: 600; color: var(--ink); text-align: left; }
.pe-status-sep { color: var(--ink-soft); opacity: .6; }
.nb-pagelink { font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
               border: 1px solid var(--nb-line, var(--line)); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.nb-pagelink:hover { border-color: var(--brand); color: var(--brand-ink); }
.nb-pagelink.has-page { color: var(--brand-ink); border-color: #d6c9ff; background: #f6f2ff; }
.nb-pagelink.is-off { opacity: .4; pointer-events: none; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════════
 * THE MARKETING SITE
 *
 * Everything below is scoped to .mkt, set on <body> by marketing/layout.blade.php. app.css is shared
 * with the platform back office, whose layout carries no marketing class -- an unscoped rule here
 * redecorates the admin.
 *
 * Four constraints, each of which broke the live site once:
 *   - .nav inherits `backdrop-filter: saturate(180%) blur(12px)`. It lay dormant while the header sat
 *     on near-opaque white. A transparent header over artwork is exactly what wakes it up, and what
 *     it then blurs is the artwork -- so a transparent header states `backdrop-filter: none`.
 *   - `background` is a shorthand and resets background-image. Where only the colour is meant, the
 *     rules below say `background-color`.
 *   - .pricing-table's header row and its first column are position:sticky. A sticky cell cannot be
 *     transparent -- rows scroll straight through it -- so both carry an opaque dark matched to the
 *     band behind them.
 *   - .pricing-table-wrap is overflow-x:auto, which computes overflow-y to auto as well, so nothing
 *     can hang outside the table. The "Most popular" badge lives inside the header cell.
 * ════════════════════════════════════════════════════════════════════════════════════════════════ */

.mkt {
    --m-ground: #0b0d17;
    --m-band: #0e1020;
    --m-raise: #14172b;
    --m-sunk: #080a13;

    --m-line: rgba(255, 255, 255, .09);
    --m-line-2: rgba(255, 255, 255, .16);

    --m-ink: #ffffff;
    --m-ink-2: rgba(255, 255, 255, .74);
    --m-ink-3: rgba(255, 255, 255, .55);
    --m-ink-4: rgba(255, 255, 255, .38);

    --m-accent: #7c4dff;
    --m-accent-2: #9d5cff;
    --m-accent-ink: #c4a6ff;
    --m-grad: linear-gradient(135deg, #7c4dff 0%, #9d5cff 100%);
    --m-glow: 0 12px 32px -10px rgba(124, 77, 255, .6);

    --m-ok: #4ade80;
    --m-ok-bg: rgba(34, 197, 94, .13);
    --m-ok-line: rgba(34, 197, 94, .36);
    --m-err: #fda4af;
    --m-err-bg: rgba(244, 63, 94, .12);
    --m-err-line: rgba(244, 63, 94, .38);

    --m-r: 12px;
    --m-r-lg: 18px;
    --m-r-pill: 999px;

    --m-t-hero: clamp(2.4rem, 6vw, 4.4rem);
    --m-t-h1: clamp(2rem, 4.4vw, 3.4rem);
    --m-t-h2: clamp(1.7rem, 3.2vw, 2.4rem);
    --m-t-lead: clamp(1.04rem, 1.5vw, 1.2rem);

    --m-gap: 22px;
    --m-pad-page: 44px;
    --m-pad-section: 78px;

    background-color: var(--m-ground);
    color: var(--m-ink-2);
    /* Checkboxes, radios, scrollbars and the select popup are drawn by the browser, not by this
     * sheet. Without this they arrive in their light-mode livery on a black page. */
    color-scheme: dark;
}

.mkt h1, .mkt h2, .mkt h3, .mkt h4 { color: var(--m-ink); }
.mkt .muted { color: var(--m-ink-3); }
.mkt hr { border: 0; border-top: 1px solid var(--m-line); }
.mkt code { background-color: rgba(255, 255, 255, .08); color: #e9defc; }
.mkt ::selection { background-color: rgba(124, 77, 255, .4); color: #fff; }

/* :not(.btn) is load-bearing -- calls to action are anchors, and a bare `.mkt a` colour rule outranks
 * .btn-primary's own and turns every button's label purple on its purple fill. */
.mkt a:not(.btn) { color: var(--m-accent-ink); }
.mkt a:not(.btn):hover { color: #e0cdff; }

/* ── Nav ───────────────────────────────────────────────────────────────────────────────────────── */

.mkt .nav {
    position: sticky; top: 0; z-index: 50;
    background-color: rgba(14, 16, 32, .92);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--m-line);
}
.mkt .nav-inner { height: 96px; gap: 30px; }
.mkt .brand-mark { height: 76px; }
.mkt .nav-links { gap: 26px; }
.mkt .nav-links a {
    position: relative; color: var(--m-ink-3); font-weight: 500; font-size: .97rem;
    padding: 6px 0; transition: color .15s;
}
.mkt .nav-links a:hover, .mkt .nav-links a.active { color: var(--m-ink); }
.mkt .nav-links a.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    border-radius: var(--m-r-pill); background-image: var(--m-grad);
}
.mkt .nav .btn-ghost { background-color: rgba(255, 255, 255, .07); border-color: var(--m-line-2); color: var(--m-ink); }
.mkt .nav .btn-ghost:hover { background-color: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }
.mkt .nav .btn-link { color: var(--m-ink-3); }
.mkt .nav .btn-link:hover { color: var(--m-ink); }

/* The one page where the header leaves the flow: it is laid OVER the hero art so the photograph
 * bleeds to the top of the window. backdrop-filter has to be switched off, not merely left alone. */
.mkt-home .nav {
    position: absolute; inset: 0 0 auto; z-index: 5;
    background-color: transparent;
    backdrop-filter: none;
    border-bottom: 0; box-shadow: none;
}

/* ── Buttons ───────────────────────────────────────────────────────────────────────────────────── */

.mkt .btn { border-radius: 11px; }
.mkt .btn-primary {
    background-color: transparent; background-image: var(--m-grad);
    color: #fff; border-color: transparent; box-shadow: var(--m-glow);
}
.mkt .btn-primary:hover { box-shadow: 0 16px 40px -12px rgba(124, 77, 255, .9); }
.mkt .btn-ghost {
    background-color: rgba(255, 255, 255, .06); color: var(--m-ink); border-color: var(--m-line-2);
}
.mkt .btn-ghost:hover { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.mkt .btn-link { background: none; color: var(--m-ink-3); }
.mkt .btn-link:hover { color: var(--m-ink); }
.mkt .btn-danger { color: #fda4af; }
.mkt .btn:focus-visible { outline: 2px solid var(--m-accent-2); outline-offset: 3px; }

/* ── Hero, two variants ────────────────────────────────────────────────────────────────────────── */

.mkt .hero { position: relative; overflow: hidden; text-align: center; padding: 84px 0 68px; }
.mkt .hero > .container { position: relative; z-index: 1; }
.mkt .hero h1 {
    color: var(--m-ink); font-weight: 800; margin-inline: auto;
    font-size: var(--m-t-hero); line-height: 1.06; letter-spacing: -.025em; max-width: 20ch;
}
.mkt .hero .lead { color: rgba(255, 255, 255, .72); font-size: var(--m-t-lead); max-width: 62ch; margin: 20px auto 32px; }
.mkt .hero-actions { gap: 14px; }
.mkt .hero-note { color: var(--m-ink-4); font-size: .9rem; margin-top: 18px; }

.mkt .eyebrow {
    display: inline-block; margin-bottom: 22px; padding: 9px 20px; border-radius: var(--m-r-pill);
    background-color: rgba(124, 77, 255, .12); border: 1px solid rgba(168, 85, 247, .38);
    color: var(--m-accent-ink); font-size: .76rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}

/* The word the headline turns on. The rule beneath it is a pseudo-element rather than
 * text-decoration so it can carry the same gradient and sit clear of the descenders. */
.mkt .hero-accent {
    position: relative; white-space: nowrap;
    background-image: linear-gradient(100deg, #8b5cf6 0%, #c084fc 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mkt .hero-accent::after {
    content: ""; position: absolute; left: 2%; right: 2%; bottom: -.14em; height: 4px;
    border-radius: var(--m-r-pill);
    background-image: linear-gradient(90deg, rgba(139, 92, 246, 0) 0%, #a855f7 18%, #c084fc 82%, rgba(192, 132, 252, 0) 100%);
}

/* Variant one: the photographic plate, home only. The art is busiest at its edges and deliberately
 * quiet in the middle, so the scrim is a centred ellipse rather than a flat wash -- it darkens behind
 * the words without flattening the dragon and the dice, which are the reason for a photograph. */
.mkt .hero-art {
    padding: 152px 0 40px;
    background-color: var(--m-ground);
    background-image: url('/platform/hero-home.webp');
    background-size: cover;
    background-position: center;
}
.mkt .hero-art::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image:
        radial-gradient(58% 52% at 50% 44%, rgba(11, 13, 23, .86) 0%, rgba(11, 13, 23, .5) 55%, rgba(11, 13, 23, 0) 100%),
        linear-gradient(180deg, rgba(11, 13, 23, 0) 0%, rgba(11, 13, 23, 0) 55%, rgba(11, 13, 23, .5) 100%);
}

/* Variant two: the same rhythm on a gradient ground. /features and /pricing lead with this, so the
 * artwork stays home's alone and the selling pages still open on something. */
.mkt .hero-plain { padding: 76px 0 60px; background-color: var(--m-ground); }
.mkt .hero-plain h1 { font-size: var(--m-t-h1); max-width: 24ch; }
.mkt .hero-plain::before {
    content: ""; position: absolute; inset: -34% -12% auto; height: 780px; z-index: 0;
    background-image:
        radial-gradient(44% 58% at 50% 4%, rgba(124, 77, 255, .30), transparent 70%),
        radial-gradient(36% 48% at 84% 20%, rgba(168, 85, 247, .20), transparent 72%),
        radial-gradient(32% 44% at 14% 24%, rgba(56, 120, 255, .16), transparent 72%);
}
.mkt .hero-plain::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}

/* The strip sits INSIDE the hero so it overlaps the foot of the art. */
.mkt .hero-strip {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    margin: 74px auto 0; padding: 22px 10px; list-style: none;
    max-width: 1180px; text-align: left;
    background-color: rgba(17, 19, 32, .72);
    border: 1px solid var(--m-line); border-radius: 16px;
    backdrop-filter: blur(8px);
}
.mkt .hero-strip li { display: flex; gap: 13px; align-items: flex-start; padding: 0 14px; }
.mkt .hero-strip li + li { border-left: 1px solid rgba(255, 255, 255, .07); }
.mkt .hero-strip svg {
    flex: none; width: 30px; height: 30px; margin-top: 2px;
    fill: none; stroke: #a855f7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.mkt .hero-strip strong { display: block; color: var(--m-ink); font-size: .95rem; font-weight: 700; }
.mkt .hero-strip span { display: block; margin-top: 3px; color: var(--m-ink-3); font-size: .84rem; line-height: 1.4; }

/* ── Page header: what the pages that inform get instead of a hero ─────────────────────────────── */

.mkt .mkt-head {
    position: relative; padding: 52px 0 34px;
    background-color: var(--m-band); border-bottom: 1px solid var(--m-line);
}
.mkt .mkt-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background-image: linear-gradient(90deg, transparent, rgba(124, 77, 255, .6), transparent);
}
.mkt .mkt-head h1 { margin: 0; font-size: var(--m-t-h1); letter-spacing: -.02em; }
.mkt .mkt-head-lead { margin: 12px 0 0; color: var(--m-ink-3); font-size: 1.06rem; max-width: 68ch; }
.mkt .help-crumb { margin: 0 0 12px; font-size: .86rem; font-weight: 600; }
.mkt .help-crumb a { text-decoration: none; }
.mkt .help-crumb a:hover { text-decoration: underline; }

.mkt .page { padding: var(--m-pad-page) 0 88px; }
.mkt .page-head h1 { font-size: var(--m-t-h2); }

/* ── Sections and bands ────────────────────────────────────────────────────────────────────────── */

.mkt .section { padding: var(--m-pad-section) 0; background-color: transparent; }
.mkt .section-band { background-color: var(--m-band); border-block: 1px solid var(--m-line); }
.mkt .section-tight { padding-top: 26px; }
.mkt .section-head { margin-bottom: 46px; }
.mkt .section-head h2 { font-size: var(--m-t-h2); }
.mkt .section-head p { color: var(--m-ink-3); font-size: 1.08rem; }

.mkt .mkt-cta { text-align: center; }
.mkt .mkt-cta p { max-width: 52ch; margin: 0 auto 28px; font-size: 1.1rem; color: var(--m-ink-3); }
.mkt .mkt-note { text-align: center; margin-top: 34px; max-width: 74ch; margin-inline: auto; }

.mkt .mkt-promo {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.mkt .mkt-promo strong { font-size: 1.1rem; color: var(--m-ink); }
.mkt .mkt-promo p { margin: 4px 0 0; }

/* ── Feature cards ─────────────────────────────────────────────────────────────────────────────── */

.mkt .feature-grid { gap: var(--m-gap); }
.mkt .feature {
    background-color: rgba(255, 255, 255, .035);
    border: 1px solid var(--m-line); border-radius: var(--m-r-lg);
    color: var(--m-ink-2);
    transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
}
.mkt .feature:hover {
    border-color: rgba(168, 85, 247, .45);
    background-color: rgba(255, 255, 255, .06);
    transform: translateY(-3px);
    box-shadow: 0 20px 48px -26px rgba(124, 77, 255, .9);
}
.mkt .feature h3 { color: var(--m-ink); font-size: 1.12rem; }
.mkt .feature p { color: var(--m-ink-3); }
.mkt .feature .ico {
    background-color: rgba(124, 77, 255, .16);
    border: 1px solid rgba(168, 85, 247, .3);
    color: var(--m-accent-ink);
}

/* ── Pricing table ─────────────────────────────────────────────────────────────────────────────── */

.mkt .pricing-table-wrap {
    background-color: rgba(255, 255, 255, .03);
    border: 1px solid var(--m-line); border-radius: var(--m-r-lg);
    box-shadow: none;
}
.mkt .pricing-table { color: var(--m-ink-2); }
.mkt .pricing-table th,
.mkt .pricing-table td { border-bottom-color: var(--m-line); }

/* Sticky, therefore opaque. */
.mkt .pricing-table thead th {
    background-color: var(--m-band);
    border-bottom: 2px solid rgba(255, 255, 255, .14);
    padding-top: 34px;
}
.mkt .pt-corner,
.mkt .pt-feature { background-color: var(--m-band); border-right-color: var(--m-line); }
.mkt .pt-corner { color: var(--m-ink-4); }

.mkt .pricing-table .featured { background-color: #191d38; }
.mkt .pricing-table thead th.featured { background-color: #1e2242; }
.mkt .pricing-table tbody th.featured { background-color: #191d38; }

/* Out of flow so it stops pushing the Pro column's name a line below every other column's, and
 * inside the header cell because the wrapper scrolls and would clip anything above it. */
.mkt .pt-badge {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    margin: 0; white-space: nowrap; border: 0;
    background-color: rgba(124, 77, 255, .22); color: var(--m-accent-ink);
}
.mkt .pt-name { color: var(--m-ink); }
.mkt .pt-price, .mkt .pt-amt { color: var(--m-ink); }
.mkt .pt-tagline,
.mkt .pt-desc,
.mkt .pt-per,
.mkt .pt-yearly, .mkt .pt-fee { color: var(--m-ink-3); }
.mkt .pt-flabel { color: rgba(255, 255, 255, .82); }
.mkt .pt-feature { color: var(--m-ink-2); }
.mkt .pt-yes { color: var(--m-ok); }
.mkt .pt-no { color: rgba(255, 255, 255, .4); opacity: 1; }

/* ── Surfaces ──────────────────────────────────────────────────────────────────────────────────── */

.mkt .card, .mkt .panel {
    background-color: var(--m-raise);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    color: var(--m-ink-2);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95);
}
.mkt .card .sub { color: var(--m-ink-3); }
.mkt .empty { color: var(--m-ink-4); }
.mkt .subnav { border-bottom-color: var(--m-line); }
.mkt .subnav a { color: var(--m-ink-3); }
.mkt .subnav a:hover { color: var(--m-ink); }
.mkt .subnav a.active { color: var(--m-accent-ink); border-color: var(--m-accent-2); }

.mkt .table th, .mkt .table td { border-bottom-color: var(--m-line); }
.mkt .table th { color: var(--m-ink-4); }

.mkt .badge-active, .mkt .badge-paid { background-color: var(--m-ok-bg); color: #86efac; }
.mkt .badge-pending { background-color: rgba(99, 102, 241, .16); color: #c7d2fe; }
.mkt .badge-past_due { background-color: rgba(217, 119, 6, .18); color: #fcd34d; }
.mkt .badge-suspended, .mkt .badge-cancelled, .mkt .badge-failed { background-color: var(--m-err-bg); color: var(--m-err); }

/* ── The pages that convert: one narrow column, the form and nothing else ──────────────────────── */

.mkt .auth-wrap { position: relative; max-width: 460px; margin: 64px auto 96px; padding: 0 20px; }
/* Both modifiers are one class, so `.mkt .auth-wrap` above outranks them and would squeeze the tier
 * grid into a single column. Restated at the same weight as the rule that beat them. */
.mkt .auth-wrap--signup { max-width: 560px; }
.mkt .auth-wrap--wide { max-width: 960px; }
.mkt .auth-wrap::before {
    /* Stays inside the column. Bleeding it sideways with a negative inset widened the document and
     * gave every form page a horizontal scrollbar on a phone. */
    content: ""; position: absolute; inset: -120px 0 auto; height: 420px; z-index: -1;
    background-image: radial-gradient(60% 60% at 50% 0%, rgba(124, 77, 255, .24), transparent 72%);
}
.mkt .auth-wrap .card { padding: 36px; }
.mkt .auth-wrap h1 { font-size: 1.75rem; }
.mkt .auth-alt { color: var(--m-ink-3); }
.mkt .mkt-secure { font-size: .85rem; }

.mkt .field label { color: rgba(255, 255, 255, .82); }
.mkt .mkt-hint { margin: 6px 0 0; font-size: .85rem; color: var(--m-ink-4); }
.mkt .mkt-field-row { display: flex; align-items: center; gap: 8px; }
.mkt .mkt-field-row input { flex: 1; }

/* Left light these are white slabs on a dark page, which reads as broken rather than as contrast. */
.mkt input[type=text], .mkt input[type=email], .mkt input[type=password],
.mkt input[type=number], .mkt input[type=search], .mkt input[type=tel],
.mkt input[type=url], .mkt input[type=date], .mkt select, .mkt textarea,
.mkt .field input {
    background-color: rgba(255, 255, 255, .045);
    border: 1px solid var(--m-line-2);
    border-radius: 10px;
    color: var(--m-ink);
}
.mkt input::placeholder, .mkt textarea::placeholder { color: var(--m-ink-4); }
.mkt option { background-color: var(--m-raise); color: var(--m-ink); }
.mkt input:focus, .mkt select:focus, .mkt textarea:focus, .mkt .field input:focus {
    outline: none;
    border-color: var(--m-accent-2);
    box-shadow: 0 0 0 3px rgba(124, 77, 255, .25);
}
.mkt input[type=checkbox], .mkt input[type=radio] { accent-color: var(--m-accent-2); }
.mkt .card-input { background-color: rgba(255, 255, 255, .045); border-color: var(--m-line-2); border-radius: 10px; color: var(--m-ink); }
.mkt .card-input.StripeElement--focus { border-color: var(--m-accent-2); box-shadow: 0 0 0 3px rgba(124, 77, 255, .25); }

.mkt .order-summary {
    padding: 18px 20px; margin-bottom: 18px;
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid var(--m-line); border-radius: var(--m-r);
}
.mkt .order-summary strong { display: block; color: var(--m-ink); }
.mkt .order-price .amt { color: var(--m-ink); }
.mkt .order-price .per { color: var(--m-ink-3); }
.mkt .mkt-terms { font-size: .9rem; color: var(--m-ink-3); }

.mkt .flash-success { background-color: var(--m-ok-bg); border-color: var(--m-ok-line); color: #86efac; }
.mkt .flash-error { background-color: var(--m-err-bg); border-color: var(--m-err-line); color: var(--m-err); }
.mkt .flash-info { background-color: rgba(99, 102, 241, .14); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; }
.mkt .form-errors { background-color: var(--m-err-bg); border-color: var(--m-err-line); color: var(--m-err); }
.mkt .fld-err { color: var(--m-err); }
.mkt .fld-invalid, .mkt input.fld-invalid, .mkt select.fld-invalid, .mkt textarea.fld-invalid { border-color: #f43f5e; }
.mkt .success-mark { background-image: var(--m-grad); box-shadow: var(--m-glow); }

/* ── The signup wizard ─────────────────────────────────────────────────────────────────────────── */

.mkt .signup-progress-step { color: var(--m-ink-4); }
.mkt .signup-progress-step::before { background-color: rgba(255, 255, 255, .13); background-image: none; }
.mkt .signup-progress-step.is-done::before,
.mkt .signup-progress-step.is-current::before { background-image: var(--m-grad); }
.mkt .signup-progress-num {
    background-color: rgba(255, 255, 255, .05);
    border-color: var(--m-line-2);
    color: var(--m-ink-4);
}
.mkt .signup-progress-step.is-done,
.mkt .signup-progress-step.is-current { color: var(--m-ink); }
.mkt .signup-progress-step.is-done .signup-progress-num {
    background-color: transparent; background-image: var(--m-grad); border-color: transparent; color: #fff;
}
.mkt .signup-progress-step.is-current .signup-progress-num {
    background-color: rgba(124, 77, 255, .18); border-color: var(--m-accent-2); color: var(--m-accent-ink);
}

.mkt .check { color: var(--m-ink-2); }
.mkt .check:has(input:disabled) { color: var(--m-ink-4); }
.mkt .wizard-actions { margin-top: 18px; }

/* ── News and help ─────────────────────────────────────────────────────────────────────────────── */

.mkt .mkt-news {
    display: block; margin-bottom: 14px; text-decoration: none; color: inherit;
    transition: border-color .18s, background-color .18s, transform .18s;
}
.mkt .mkt-news:hover {
    border-color: rgba(168, 85, 247, .45); background-color: rgba(255, 255, 255, .05); transform: translateY(-2px);
}
.mkt .mkt-news-date {
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--m-accent-ink);
}
.mkt .mkt-news h2 { margin: 6px 0 6px; font-size: 1.22rem; }
.mkt .mkt-news p { margin: 0; color: var(--m-ink-3); }

.mkt .help-cats { gap: var(--m-gap); }
.mkt .help-cat { margin-bottom: 0; }
.mkt .help-cat h3 { margin: 0 0 4px; font-size: 1.15rem; }
.mkt .help-cat > p { margin: 0 0 12px; }
.mkt .help-list li::marker { color: var(--m-accent-ink); }
.mkt .help-more { display: inline-block; margin-top: 10px; font-size: .9rem; font-weight: 600; }

.mkt .help-article { color: var(--m-ink-2); max-width: 780px; }
.mkt .help-article > *:first-child { margin-top: 0; }
.mkt .help-article h2, .mkt .help-article h3 { color: var(--m-ink); }
.mkt .help-article code { background-color: rgba(255, 255, 255, .08); color: #e9defc; }
.mkt .help-article pre { background-color: var(--m-sunk); border: 1px solid var(--m-line); color: #e6e1f5; }
.mkt .help-article blockquote {
    background-color: rgba(124, 77, 255, .1);
    border-left-color: var(--m-accent-2);
    color: var(--m-ink-2);
}
.mkt .help-article figure img { border-color: var(--m-line); }
.mkt .help-article figcaption { color: var(--m-ink-4); }

/* ── The "what would this cost elsewhere" calculator ───────────────────────────────────────────── */

.mkt .calc { margin-bottom: 40px; padding: 30px; }
.mkt .calc-head h2 { font-size: var(--m-t-h2); margin-bottom: 10px; }
.mkt .calc-head p { max-width: 68ch; margin: 0 0 26px; }

.mkt .calc-inputs {
    display: grid; gap: 20px 26px; align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding-bottom: 24px; margin-bottom: 24px;
    border-bottom: 1px solid var(--m-line);
}
.mkt .calc-inputs .field { margin-bottom: 0; }
.mkt .calc-amount { display: flex; align-items: center; gap: 8px; }
.mkt .calc-prefix { color: var(--m-ink-3); font-weight: 700; }
.mkt .calc-amount input { flex: 1; }

.mkt .calc input[type=range] {
    width: 100%; margin-top: 12px; accent-color: var(--m-accent-2);
    background: none; border: 0; padding: 0;
}
.mkt .calc-check { display: flex; align-items: center; gap: 10px; font-size: .95rem; cursor: pointer; }
.mkt .calc-check input { width: auto; }

.mkt .calc-verdict {
    padding: 18px 20px; margin-bottom: 22px;
    background-color: rgba(124, 77, 255, .12);
    border: 1px solid rgba(168, 85, 247, .34);
    border-radius: var(--m-r);
}
.mkt .calc-verdict-line { margin: 0; font-size: 1.05rem; color: var(--m-ink-2); }
.mkt .calc-verdict-line strong { color: var(--m-ink); }

.mkt .calc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mkt .calc-row {
    position: relative; padding: 16px 18px;
    background-color: rgba(255, 255, 255, .035);
    border: 1px solid var(--m-line); border-radius: var(--m-r);
}
.mkt .calc-row.is-ours { border-color: var(--m-accent-2); background-color: rgba(124, 77, 255, .1); }
.mkt .calc-row.is-cheapest .calc-total { color: var(--m-ok); }

.mkt .calc-row-main { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mkt .calc-name { font-weight: 700; color: var(--m-ink); }
.mkt .calc-name em { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--m-ok); margin-left: 8px; }
.mkt .calc-total { font-size: 1.35rem; font-weight: 800; color: var(--m-ink); white-space: nowrap; }
.mkt .calc-total { text-align: right; }
.mkt .calc-total small { font-size: .8rem; font-weight: 500; color: var(--m-ink-3); margin-left: 2px; }
.mkt .calc-year {
    display: block; margin-top: 2px; font-style: normal;
    font-size: .76rem; font-weight: 600; color: var(--m-ink-4);
}

.mkt .calc-row-parts { margin-top: 6px; font-size: .84rem; color: var(--m-ink-3); }
.mkt .calc-setup { color: var(--m-err); font-weight: 600; }
.mkt .calc-note { margin-top: 6px; font-size: .82rem; color: var(--m-ink-4); }
.mkt .calc-src { position: absolute; top: 16px; right: 18px; font-size: .74rem; opacity: .55; }
.mkt .calc-src:hover { opacity: 1; }
.mkt .calc-row-main { padding-right: 54px; }

.mkt .calc-migration { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--m-line); }
.mkt .calc-migration h3 { font-size: 1.1rem; margin-bottom: 6px; }
.mkt .calc-migration p { margin: 0 0 16px; }
.mkt .calc-footnote { margin: 22px 0 0; font-size: .8rem; line-height: 1.6; }

@media (max-width: 560px) {
    .mkt .calc { padding: 22px; }
    .mkt .calc-src { position: static; display: inline-block; margin-top: 8px; }
    .mkt .calc-row-main { padding-right: 0; }
}

/* ── Pagination, shared by /news and /account/invoices ─────────────────────────────────────────── */

.mkt .pager-link {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--m-line-2);
    color: var(--m-ink-2);
}
.mkt .pager-link:hover { border-color: var(--m-accent-2); color: var(--m-ink); }
.mkt .pager-link.is-current {
    background-color: transparent; background-image: var(--m-grad); border-color: transparent; color: #fff;
}
.mkt .pager-link.is-disabled { background-color: rgba(255, 255, 255, .02); color: var(--m-ink-4); }
.mkt .pager-gap { color: var(--m-ink-4); }

/* ── Footer ────────────────────────────────────────────────────────────────────────────────────── */

.mkt .footer {
    margin-top: 0; padding: 64px 0 30px;
    background-color: var(--m-sunk);
    border-top: 1px solid var(--m-line);
    color: var(--m-ink-3);
}
.mkt .footer-cols { gap: 56px; }
.mkt .footer-cols h2 { color: var(--m-ink-4); }
.mkt .footer-cols a { color: var(--m-ink-2); }
.mkt .footer-cols a:hover { color: var(--m-ink); text-decoration: none; }
.mkt .footer-legal { border-top-color: var(--m-line); color: var(--m-ink-4); }

/* ── Narrower ──────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .mkt .hero-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 8px; }
    .mkt .hero-strip li + li { border-left: 0; }
}

@media (max-width: 880px) {
    .mkt .nav-inner { height: auto; padding: 12px 0; gap: 12px 18px; flex-wrap: wrap; }
    .mkt .brand-mark { height: 54px; }
    /* display is restated because the base sheet hides .nav-links outright below 640px, which left
     * the marketing site with no way to reach Features, Pricing, News or Help on a phone. Here they
     * wrap onto a second row instead. */
    .mkt .nav-links { display: flex; order: 3; width: 100%; margin-right: 0; justify-content: center; gap: 20px; }
    .mkt .nav-cta { margin-left: auto; }
    .mkt .footer-inner { gap: 28px; }
    .mkt .footer-cols { gap: 32px; }
}

@media (max-width: 640px) {
    .mkt { --m-pad-section: 56px; --m-pad-page: 30px; }
    .mkt .hero-art { padding-top: 176px; }
    .mkt .hero-plain { padding: 52px 0 44px; }
    .mkt .mkt-head { padding: 34px 0 26px; }
    .mkt .auth-wrap { margin: 32px auto 64px; }
    .mkt .auth-wrap .card { padding: 24px; }
    .mkt .hero-actions .btn { width: 100%; }
    .mkt .mkt-promo .btn { width: 100%; }
}

@media (max-width: 560px) {
    .mkt .hero-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .mkt .feature, .mkt .mkt-news { transition: none; }
    .mkt .feature:hover, .mkt .mkt-news:hover { transform: none; }
}


@media (max-width: 560px) {
}
.variant-actions { display: flex; gap: 6px; align-items: center; }

/* The platform's legal documents. Narrow measure and generous leading, because these are read in
   long runs rather than scanned, and a clause table has to stay legible on a phone. */
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
.legal-nav a { font-size: .9rem; color: var(--m-ink-3, #6b7280); text-decoration: none; }
.legal-nav a:hover { text-decoration: underline; }
.legal-nav a.active { color: var(--m-ink, #111827); font-weight: 600; }
.legal-doc { max-width: 46rem; line-height: 1.7; }
.legal-doc h2 { margin: 2rem 0 .6rem; font-size: 1.15rem; }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 .85rem; }
.legal-doc blockquote { margin: 1.2rem 0; padding: 12px 16px; border-left: 3px solid var(--m-line, #e5e7eb);
    background: rgba(127, 127, 127, .06); border-radius: 0 8px 8px 0; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; display: block; overflow-x: auto; }
.legal-doc th, .legal-doc td { padding: 8px 10px; border-bottom: 1px solid var(--m-line, #e5e7eb);
    text-align: left; vertical-align: top; font-size: .93rem; }
.legal-doc th { font-weight: 600; }

.mkt-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--m-raise, #14172b); color: var(--m-ink-2, #fff);
    border-top: 1px solid var(--m-line-2, rgba(255, 255, 255, .16));
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .5); }
.mkt-consent-inner { max-width: 1120px; margin: 0 auto; padding: 18px 20px;
    display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.mkt-consent-copy { flex: 1 1 340px; }
.mkt-consent-copy h2 { margin: 0 0 6px; font-size: 1rem; color: var(--m-ink, #fff); }
.mkt-consent-copy p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--m-ink-3, rgba(255, 255, 255, .55)); }
.mkt-consent-actions { flex: 0 1 400px; display: flex; flex-direction: column; gap: 12px; }
.mkt-consent-custom { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mkt-consent-cats { display: flex; flex-direction: column; gap: 10px; }
.mkt-consent-cat { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; }
.mkt-consent-cat input { margin-top: 3px; }
.mkt-consent-cat strong { display: block; font-weight: 600; color: var(--m-ink, #fff); }
.mkt-consent-cat em { font-style: normal; color: var(--m-ink-3, rgba(255, 255, 255, .55)); }
.mkt-consent-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
@media (max-width: 640px) {
    .mkt-consent-inner { padding: 14px 16px; }
    .mkt-consent-buttons { justify-content: stretch; }
    .mkt-consent-buttons > * { flex: 1 1 auto; }
}