:root {
  --bg: #09111f;
  --surface-2: #f7f9fc;
  --text: #0e172a;
  --muted: #61708a;
  --brand: #6d5efc;
  --brand-2: #23c5ff;
  --accent: #0fba81;
  --shadow: 0 20px 60px rgba(15, 23, 42, 0.16);
  --radius-xl: 28px;
  --container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: #f7f9fc; }
a { color: inherit; text-decoration: none; }
.hidden { display:none !important; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(7, 12, 22, 0.58); border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.brand-badge { width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; box-shadow: 0 12px 30px rgba(109,94,252,0.35); }
.brand-logo { width: 46px; height: 46px; border-radius: 16px; object-fit: cover; box-shadow: 0 12px 30px rgba(15,23,42,0.18); }
.brand small { display:block; color: rgba(255,255,255,0.7); margin-top: 2px; }
nav { display:flex; gap: 22px; align-items:center; }
nav a { color: rgba(255,255,255,0.84); font-size: 0.95rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none; border-radius: 999px; font-weight:700; cursor:pointer; transition: 0.22s ease; padding: 14px 22px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; box-shadow: 0 14px 34px rgba(76, 81, 255, 0.28); }
.btn-secondary { background: rgba(255,255,255,0.08); color:#fff; border: 1px solid rgba(255,255,255,0.12); }
.btn-dark { background: #101827; color:#fff; }
.btn-light { background: #fff; color:#101827; border: 1px solid #d7dfec; }
.small-btn { padding:8px 12px; border-radius:12px; font-size:0.85rem; }
.hero { padding: 42px 0 72px; color:#fff; position: relative; overflow: hidden; background:
  radial-gradient(circle at top left, rgba(109,94,252,0.28), transparent 30%),
  radial-gradient(circle at top right, rgba(35,197,255,0.18), transparent 26%),
  linear-gradient(180deg, #08101e 0%, #0e1930 100%);
}
.hero-grid { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: stretch; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); font-size: 0.88rem; font-weight: 600; }
h1 { font-size: clamp(2.7rem, 5vw, 4.5rem); line-height: 1.04; margin: 20px 0 18px; letter-spacing: -0.04em; }
.lead { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 62ch; }
.hero-actions { display:flex; gap:14px; flex-wrap: wrap; margin-top: 28px; }
.hero-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.stat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: 18px; }
.stat strong { display:block; font-size: 1.5rem; margin-bottom: 6px; }
.glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(18px); }
.hero-panel { padding: 26px; border-radius: var(--radius-xl); display:flex; flex-direction:column; justify-content:space-between; }
.hero-image { width: 100%; max-height: 180px; object-fit: cover; border-radius: 20px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.12); }
.panel-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.badge { display:inline-flex; padding: 8px 12px; border-radius:999px; font-size: 0.8rem; background: rgba(255,255,255,0.1); }
.price-chip { background: rgba(15,186,129,0.14); color: #d3ffee; border: 1px solid rgba(15,186,129,0.22); }
.service-stack { display:grid; gap:12px; margin-top: 22px; }
.service-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-radius: 18px; background: rgba(255,255,255,0.06); }
.service-row span:last-child { color: rgba(255,255,255,0.7); font-weight:600; }
.section { padding: 80px 0; position: relative; z-index: 1; }
.first-section { background: #f7f9fc; }
.section-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.section-head.left { margin-left: 0; text-align:left; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height:1.08; margin: 12px 0 14px; letter-spacing: -0.035em; }
.section-head p { color: var(--muted); line-height: 1.72; }
.pill { display:inline-flex; padding:8px 12px; border-radius:999px; background: rgba(109,94,252,0.08); color: #4e46e5; font-weight:700; font-size: 0.82rem; }
.cards { display:grid; gap: 18px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { background: rgba(255,255,255,0.84); border: 1px solid rgba(148,163,184,0.18); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.card h3 { margin: 14px 0 10px; font-size: 1.2rem; }
.card p { color: var(--muted); line-height: 1.72; margin: 0; }
.icon-wrap { width: 54px; height:54px; border-radius: 18px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(109,94,252,0.12), rgba(35,197,255,0.12)); color:#3d36c7; }
.icon-wrap svg { width: 28px; height:28px; }
.banner { margin-top: 22px; background: linear-gradient(135deg, #fff, #eef5ff); border-radius: 28px; border:1px solid rgba(148,163,184,0.16); box-shadow: var(--shadow); padding: 28px; display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items:center; }
.banner ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.8; }
.grid-two { display:grid; grid-template-columns: 1.08fr 0.92fr; gap: 28px; align-items:start; }
.form-shell { background: #fff; border-radius: 30px; padding: 28px; box-shadow: 0 24px 60px rgba(14,23,42,0.12); border:1px solid rgba(148,163,184,0.16); }
.form-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom: 18px; }
.tiny { font-size: 0.86rem; color: var(--muted); }
.grid-form { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: 1 / -1; }
label { display:block; font-size: 0.93rem; font-weight:600; color:#22304c; }
input, select, textarea { width:100%; margin-top:8px; border:1px solid #d7dfec; background:#f9fbff; border-radius:16px; padding: 14px 15px; font: inherit; color:#101827; outline:none; transition: 0.2s ease; }
input:focus, select:focus, textarea:focus { border-color: rgba(109,94,252,0.52); box-shadow: 0 0 0 4px rgba(109,94,252,0.12); background:#fff; }
textarea { resize: vertical; }
.price-box { display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 18px 20px; background: linear-gradient(135deg, #101827, #1f2f50); color:#fff; border-radius: 22px; margin: 20px 0; }
.price-box strong { font-size: 1.8rem; }
.full { width:100%; }
.alert { margin: 0 0 16px; border-radius: 18px; padding: 16px 18px; font-weight: 600; }
.success { background: rgba(15,186,129,0.12); color:#0d7b57; border:1px solid rgba(15,186,129,0.18); }
.error { background: rgba(239,68,68,0.1); color:#b91c1c; border:1px solid rgba(239,68,68,0.18); }
.payment-area,.note-box,.upload-card { margin-top: 16px; padding: 18px; border-radius: 18px; background: #f2f7ff; border:1px dashed #c7d8ff; }
.rebook-banner { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(109,94,252,0.08), rgba(35,197,255,0.08)); border: 1px solid rgba(109,94,252,0.14); }
.side-panel { background: linear-gradient(180deg, #fff, #f7fbff); border:1px solid rgba(148,163,184,0.16); border-radius: 30px; box-shadow: var(--shadow); padding: 28px; position: sticky; top: 96px; }
.side-panel h3 { margin-top: 0; font-size: 1.2rem; }
.side-panel ol, .side-panel ul { color: var(--muted); line-height: 1.8; padding-left: 20px; }
.mini-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.mini-card { padding: 16px; border-radius: 18px; background: #f8fbff; border:1px solid rgba(148,163,184,0.16); }
.feature-strip { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.feature-strip .mini-card strong { display:block; margin-bottom: 6px; }
.provider-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.choice-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.choice { position: relative; border: 1px solid #dde5f2; border-radius: 18px; padding: 14px 14px 14px 44px; background: #fbfcff; transition: 0.2s ease; cursor: pointer; min-height: 90px; }
.choice:hover { border-color: rgba(109,94,252,0.38); box-shadow: 0 8px 24px rgba(109,94,252,0.08); }
.choice input { position:absolute; left: 14px; top: 16px; width: 18px; height:18px; margin:0; accent-color: var(--brand); }
.choice strong { display:block; margin-bottom: 6px; }
.choice span { color: var(--muted); font-size: 0.9rem; line-height:1.5; }
.provider-highlights { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.provider-highlights .mini-card { background: linear-gradient(180deg, #fff, #f6f9ff); }
.faq-list { display:grid; gap:14px; }
.faq-item { background: rgba(255,255,255,0.84); border: 1px solid rgba(148,163,184,0.18); border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow); }
.faq-item strong { display:block; margin-bottom:8px; font-size:1.05rem; }
.quote-mark { font-size: 2rem; line-height: 1; color: #6d5efc; opacity: 0.35; margin-bottom: 10px; }

/* Admin */
.admin-shell { min-height: 100vh; background: #f7f9fc; }
.admin-top { background: linear-gradient(180deg, #08101e 0%, #0e1930 100%); color: #fff; padding: 36px 0 120px; }
.admin-wrap { margin-top: -86px; }
.admin-grid { display:grid; grid-template-columns: 280px 1fr; gap: 22px; align-items:start; }
.admin-sidebar, .admin-panel { background:#fff; border:1px solid rgba(148,163,184,0.16); border-radius: 26px; box-shadow: var(--shadow); }
.admin-sidebar { padding: 20px; position: sticky; top: 98px; }
.admin-menu { display:grid; gap: 10px; margin-top: 18px; }
.admin-menu button { width:100%; text-align:left; border:none; padding: 14px 16px; border-radius: 16px; background:#f7f9fc; font: inherit; font-weight:700; cursor:pointer; }
.admin-menu button.active { background: linear-gradient(135deg, rgba(109,94,252,0.12), rgba(35,197,255,0.12)); color:#3028bd; }
.admin-panel { padding: 22px; }
.admin-card-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.metric-card { background:#f8fbff; border:1px solid rgba(148,163,184,0.16); border-radius: 20px; padding: 16px; }
.metric-card strong { display:block; font-size: 1.6rem; margin-top: 8px; }
.admin-toolbar,.service-actions-row,.export-actions { display:flex; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.admin-toolbar input, .admin-toolbar select { width:auto; min-width: 180px; margin-top:0; }
.table-wrap { overflow:auto; border:1px solid rgba(148,163,184,0.16); border-radius: 20px; }
table { width:100%; border-collapse: collapse; min-width: 980px; }
th, td { padding: 14px 12px; border-bottom:1px solid rgba(148,163,184,0.16); text-align:left; vertical-align: top; font-size: 0.94rem; }
th { background:#f8fbff; color:#384860; position: sticky; top:0; }
.status-chip,.payout-chip { display:inline-flex; padding: 6px 10px; border-radius:999px; font-size: 0.8rem; font-weight:700; background:#eef2ff; color:#4338ca; }
.payout-chip { background: rgba(15,186,129,0.12); color: #0d7b57; }
.login-card { max-width: 430px; margin: 0 auto; background:#fff; border:1px solid rgba(148,163,184,0.16); border-radius: 26px; box-shadow: var(--shadow); padding: 28px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-userbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding:14px 16px; background:#f8fbff; border:1px solid rgba(148,163,184,0.16); border-radius:18px; }
.content-value-textarea,.service-lines-textarea,.service-json-textarea { min-width: 320px; min-height: 100px; }
.order-input { width: 90px !important; }
.toggle-row { display:flex; align-items:center; gap:10px; }
.toggle-row input { margin-top:0; width:auto; }
.helper-text,.cta-link-preview { display:block; margin-top:8px; color:#61708a; font-size:0.82rem; line-height:1.5; }
.subservice-chip { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(148,163,184,0.16); border-radius:12px; background:#f8fbff; margin-bottom:8px; }
.subservice-chip input { margin-top:0; }
.footer { padding: 30px 0 48px; color: #60708a; }

@media (max-width: 1100px) {
  .hero-grid, .grid-two, .banner, .admin-grid { grid-template-columns: 1fr; }
  .cards.four { grid-template-columns: repeat(2, 1fr); }
  .cards.three, .feature-strip, .provider-highlights, .admin-card-grid { grid-template-columns: 1fr; }
  .side-panel, .admin-sidebar { position: static; }
}
@media (max-width: 720px) {
  nav { display:none; }
  .hero-stats, .grid-form, .cards.four, .cards.three, .choice-grid, .mini-grid, .provider-grid, .auth-row { grid-template-columns: 1fr; }
  .hero { padding-top: 22px; }
  .form-shell, .side-panel, .banner, .card, .admin-sidebar, .admin-panel, .login-card { border-radius: 24px; }
  .container { padding: 0 16px; }
  h1 { font-size: 2.5rem; }
  .brand small { display:none; }
}


/* v21.1 additions */
.auth-strip,.account-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.auth-pill{padding:10px 14px;border-radius:999px;background:#eef5ff;border:1px solid #d6e4ff;color:#24406a;font-weight:600}
.modal{position:fixed;inset:0;background:rgba(9,17,31,.6);display:grid;place-items:center;padding:24px;z-index:60}
.modal-card{width:min(520px,100%);background:#fff;border-radius:28px;padding:24px;box-shadow:0 30px 80px rgba(14,23,42,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.icon-btn{width:40px;height:40px;border:none;border-radius:14px;background:#eff4fb;font-size:1.4rem;cursor:pointer}
.compact-tabs,.admin-menu{display:flex;gap:10px;flex-wrap:wrap}
.compact-tabs .tab,.admin-menu button{border:none;background:#eef3fb;padding:12px 14px;border-radius:14px;font-weight:700;cursor:pointer}
.compact-tabs .tab.active,.admin-menu button.active{background:#101827;color:#fff}
.auth-form{display:grid;gap:14px}
.account-grid{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
.account-sidebar,.account-main-card{background:#fff;border:1px solid rgba(148,163,184,0.16);border-radius:28px;box-shadow:var(--shadow);padding:24px}
.account-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.summary-item{background:#f8fbff;border:1px solid #dde7f5;border-radius:20px;padding:18px}
.right-text{text-align:right}
.account-list,.subscription-list,.history-list{display:grid;gap:14px}
.booking-card,.subscription-card{background:#f9fbff;border:1px solid #dbe6f5;border-radius:22px;padding:18px}
.admin-layout-v21{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
.admin-sidebar{background:#101827;color:#fff;border-radius:28px;padding:24px;position:sticky;top:92px}
.admin-sidebar .btn{margin-top:16px}
.admin-panel{display:grid;gap:18px}
.admin-section-card{background:#fff;border:1px solid rgba(148,163,184,0.16);border-radius:28px;box-shadow:var(--shadow);padding:22px}
.admin-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.metric-card{background:#fff;border:1px solid rgba(148,163,184,0.16);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.metric-card strong{font-size:2rem;display:block;margin-top:8px}
.table-wrap{overflow:auto;background:#fff;border-radius:22px;border:1px solid #dde7f5}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:14px;border-bottom:1px solid #edf2f9;vertical-align:top;text-align:left}
.note-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap}
.secondary-nav{display:flex;gap:12px;flex-wrap:wrap}
.secondary-nav a{padding:10px 14px;border-radius:999px;background:#eef3fb;font-weight:700}
.theme-preview{padding:18px;border-radius:20px;color:#fff}
.hidden-mobile{display:block}
@media (max-width: 980px){.hero-grid,.grid-two,.banner,.account-grid,.admin-layout-v21,.booking-layout{grid-template-columns:1fr}.cards.four,.cards.three,.feature-strip,.hero-stats,.summary-strip,.provider-highlights,.account-stat-grid,.kpi-grid{grid-template-columns:1fr}.nav,.desktop-nav{flex-wrap:wrap}.desktop-nav{display:none}.side-panel,.admin-sidebar{position:static}}


/* v21.2 additions */
.payment-method-meta{margin-top:12px;padding:14px 16px;border-radius:18px;background:#f8fbff;border:1px solid #d8e4f6}
.payment-method-meta strong{display:block;margin-bottom:6px}
.booking-card .inline-actions,.subscription-card .inline-actions{margin-top:12px}
.plan-features{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
.subtle-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef3fb;border-radius:10px;padding:2px 8px}


/* v21.5 polish */
.wide-admin-table{overflow-x:auto}
.wide-admin-table table{min-width:1320px}
.wide-admin-table input[type="text"],.wide-admin-table input[type="number"],.wide-admin-table input[type="url"],.wide-admin-table select,.wide-admin-table textarea{width:100%;min-width:0;box-sizing:border-box}
.wide-admin-table textarea{min-height:110px;resize:vertical}
.wide-admin-table td{min-width:170px}
.wide-admin-table td:nth-child(5){min-width:280px}
.subservices-wrap{display:grid;gap:12px;min-width:260px}
.subservice-chip{display:grid;grid-template-columns:minmax(0,1.5fr) 110px auto;gap:10px;align-items:start;padding:12px;border:1px solid #dbe6f5;border-radius:18px;background:#f8fbff}
.subservice-chip input{min-width:0}
.helper-text{display:block;margin-top:8px;color:var(--muted);font-size:.86rem;line-height:1.45}
.toggle-row{display:flex;align-items:center;gap:10px;font-size:.94rem}
.order-stack{display:grid;gap:10px}
.admin-card-list{display:grid;gap:16px}
.content-block-card{background:#fff;border:1px solid #dde7f5;border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.content-block-grid{display:grid;gap:18px}
.content-block{display:grid;grid-template-columns:1.2fr minmax(260px,.8fr);gap:20px;align-items:center;background:#fff;border:1px solid rgba(148,163,184,.16);border-radius:28px;padding:24px;box-shadow:var(--shadow)}
.content-block.no-image{grid-template-columns:1fr}
.content-block-media img{width:100%;height:100%;max-height:320px;object-fit:cover;border-radius:22px;border:1px solid #dde7f5}
.content-block .content-html h2,.content-block .content-html h3,.content-block .content-html h4{margin:0 0 10px}
.content-block .content-html p{margin:0 0 12px;color:var(--muted);line-height:1.7}
.content-block .content-html ul{margin:0 0 10px 18px;color:var(--muted);line-height:1.7}
.format-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.format-toolbar button{padding:8px 10px;border:1px solid #dbe6f5;background:#fff;border-radius:12px;font-weight:700;cursor:pointer}
.html-preview{margin-top:10px;padding:12px;border:1px dashed #cbd8ea;border-radius:14px;background:#fbfdff}
.hidden{display:none!important}
@media (max-width:980px){.content-block{grid-template-columns:1fr}.subservice-chip{grid-template-columns:1fr}.wide-admin-table table{min-width:1080px}}


/* final v22 admin/entity polish */
.entity-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.entity-card{background:#fbfdff;border:1px solid #dde7f5;border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.entity-card h4{margin:0 0 6px}
.entity-card textarea{min-height:110px;resize:vertical}
.entity-card .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.entity-card .field-grid.single{grid-template-columns:1fr}
.entity-card .field-grid label,.entity-card > label{display:grid;gap:6px;font-weight:600}
.entity-card .meta-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.entity-card .chip-row{display:flex;gap:8px;flex-wrap:wrap}
.entity-card .save-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width:980px){.entity-card .field-grid{grid-template-columns:1fr}}


.nav-auth{margin-right:12px;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}.topbar .nav{align-items:center}


/* v32 supabase-driven header and typography */
:root{
  --font-family: Inter, system-ui, sans-serif;
  --header-nav-gap: 24px;
  --header-height: 84px;
  --header-badge-size: 52px;
  --header-logo-size: 52px;
  --header-auth-max-width: 220px;
  --brand-max-width: 340px;
  --header-subtitle-max-width: 230px;
  --header-font-size: 16px;
}
body{font-family:var(--font-family);}
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(148,163,184,.18)}
.topbar .nav{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:14px;min-width:0;max-width:var(--brand-max-width);flex:0 1 var(--brand-max-width)}
.brand > div:last-child{min-width:0}
.brand strong{display:block;font-size:1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;max-width:var(--header-subtitle-max-width);line-height:1.2}
.brand-badge{width:var(--header-badge-size);height:var(--header-badge-size);border-radius:18px;display:grid;place-items:center;font-weight:800;font-size:1.15rem;flex:0 0 var(--header-badge-size)}
.brand-logo{width:var(--header-logo-size);height:var(--header-logo-size);object-fit:cover;border-radius:18px;border:1px solid rgba(148,163,184,.2);background:#fff;flex:0 0 var(--header-logo-size)}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:var(--header-nav-gap);flex:1 1 auto;min-width:0;white-space:nowrap}
.desktop-nav a{font-size:var(--header-font-size);font-weight:600;color:#475569}
.inline-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 1 auto;min-width:0;flex-wrap:nowrap}
.auth-pill.nav-auth{margin-right:0;max-width:var(--header-auth-max-width);padding:8px 14px;font-size:.95rem;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-compact .btn{padding:11px 16px;border-radius:16px}
.header-compact .btn-primary,.header-compact .btn-secondary{box-shadow:none}
@media (max-width: 1260px){
  .topbar .nav{gap:12px}
  .desktop-nav{gap:18px}
  .brand{max-width:300px}
  .auth-pill.nav-auth{max-width:180px}
}
@media (max-width: 1100px){
  .brand small{display:none}
  .desktop-nav{gap:14px}
}


.brand img.brand-logo.hidden + .brand-badge{display:grid}.brand img.brand-logo:not(.hidden) + .brand-badge{display:none}