@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* HostAiHub — "Agent Crew" design system
   Warm cream canvas, white cards with soft hairlines, an ink primary button and three agent
   colours (coral · teal · butter) that double as the OpenClaw / Hermes / n8n identities.
   Bricolage Grotesque for display type, Inter for UI text. Plain CSS used alongside the
   Tailwind Play CDN; crew.css adds the characters, hero scene and dashboard widgets.

   Every class name from the previous "Aurora" system is kept (cards, badges, forms, shell,
   tracker, tables…) so existing pages restyle without markup changes. The old token names
   (--accent, --brand, --glass, --muted…) are mapped onto the new palette for the same reason. */

:root {
  /* ---- Crew palette ---- */
  --bg: #FFFBF5;
  --bg-2: #FFF6EA;
  --card: #FFFFFF;
  --ink: #1F2937;
  --ink-2: #4B5563;
  --ink-3: #6B7280;
  --ink-4: #9CA3AF;
  --line: #F1E8DB;
  --line-2: #E7DBCA;
  --coral: #FF6B57; --coral-600: #EE5641; --coral-700: #C2402C; --coral-50: #FFF3F0; --coral-100: #FFE2DC;
  --teal: #14B8A6; --teal-600: #0D9488; --teal-700: #0F766E; --teal-50: #EDFBF8; --teal-100: #CCFBF1;
  --butter: #FDE68A; --butter-50: #FFFAEA; --butter-100: #FEF3C7; --amber: #F59E0B; --amber-700: #B45309; --orange: #F97316;
  --green: #16A34A; --green-700: #15803D; --green-50: #EAFBF0;
  --red: #DC2626; --red-700: #B91C1C; --red-50: #FEF1F1;
  --r-sm: 14px; --r: 20px; --r-lg: 28px; --r-xl: 36px;
  --sh-1: 0 1px 2px rgba(31, 41, 55, .05), 0 2px 6px -2px rgba(31, 41, 55, .06);
  --sh-2: 0 1px 2px rgba(31, 41, 55, .04), 0 14px 32px -14px rgba(31, 41, 55, .18);
  --sh-3: 0 2px 6px rgba(31, 41, 55, .04), 0 32px 72px -30px rgba(31, 41, 55, .30);
  --font-d: "Bricolage Grotesque", "Sora", Inter, system-ui, sans-serif;
  --font-b: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- Legacy token names, mapped onto the Crew palette ---- */
  --accent: var(--coral);
  --accent-dark: var(--coral-600);
  --accent-2: var(--teal);
  --grad: linear-gradient(120deg, #FF6B57 0%, #FF8A5B 55%, #FDBA74 100%);
  --surface: #fff;
  --surface-strong: #fff;
  --border: var(--line);
  --border-strong: var(--line-2);
  --glass: #fff;
  --glass-strong: #fff;
  --glass-border: var(--line);
  --glass-blur: none;
  --shadow-soft: var(--sh-1);
  --shadow-glow: var(--sh-2);
  --brand: var(--coral-700);
  --brand-dark: #A8331F;
  --brand-soft: var(--coral-50);
  --text: var(--ink);
  --muted: var(--ink-3);
  --subtle: var(--ink-4);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --warning: var(--amber-700);
  --warning-soft: #FFF6E0;
  --danger: var(--red-700);
  --danger-soft: var(--red-50);
  --info: #1D4ED8;
  --info-soft: #EEF4FF;
  --radius: 24px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
  --shadow-lg: var(--sh-3);
  --ring: 0 0 0 4px rgba(20, 184, 166, .15);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-b);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(20, 184, 166, .45); outline-offset: 2px; border-radius: 10px; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Former glass utilities: now plain white surfaces ---- */
.glass-panel, .glass-panel-strong { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.glass-pill { background: #fff; border: 1px solid var(--line-2); }
.hover-lift { transition: transform .35s var(--spring), box-shadow .35s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.gradient-text, .grad-text { color: var(--coral-700); }
.status-glow-green { box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); }
.status-glow-amber { box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
.kpi-card-1 { background: linear-gradient(135deg, var(--coral-50) 0%, #fff 70%); }
.kpi-card-2 { background: linear-gradient(135deg, var(--teal-50) 0%, #fff 70%); }
.kpi-card-3 { background: linear-gradient(135deg, var(--green-50) 0%, #fff 70%); }
.kpi-card-4 { background: linear-gradient(135deg, var(--butter-50) 0%, #fff 70%); }
.float-gentle { animation: floatGentle 6s ease-in-out infinite; }
.float-gentle-delay { animation: floatGentle 6s ease-in-out 2s infinite; }
.float-gentle-delay-2 { animation: floatGentle 6s ease-in-out 4s infinite; }
@keyframes floatGentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Typography ---- */
.h1, .h2, .h3, .brand, .price, .stat .v, .side-cta .v { font-family: var(--font-d); }
.h1 { font-weight: 700; font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -.042em; text-wrap: balance; }
.h2 { font-weight: 700; font-size: clamp(30px, 4.1vw, 48px); line-height: 1.06; letter-spacing: -.032em; text-wrap: balance; }
.h3 { font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.lead { font-size: 18px; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.muted { color: var(--ink-3); }
.subtle { color: var(--ink-4); }
.mono { font-family: var(--font-m); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  padding: 6px 14px 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.eyebrow.e-teal::before { background: var(--teal); }
.eyebrow.e-butter::before { background: var(--amber); }

/* ---- Layout ---- */
/* `body .container` outranks the Tailwind CDN `.container` utility (injected later, widens to 1536px). */
body .container, .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section, .sec { padding: 96px 0; position: relative; }
.section-sm { padding: 56px 0; }
.sec-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.sec-head .h2 { margin: 18px 0 14px; }
.sec-alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 18%, var(--bg-2) 82%, var(--bg) 100%); }
.hero-glow {
  background:
    radial-gradient(ellipse 50% 45% at 88% 0%, rgba(255, 107, 87, .12), transparent 65%),
    radial-gradient(ellipse 45% 40% at 6% 100%, rgba(20, 184, 166, .09), transparent 65%);
}
.grid-bg { background-image: radial-gradient(rgba(31, 41, 55, .07) 1px, transparent 1.3px); background-size: 18px 18px; }
.tint-coral { background: var(--coral-50); } .tint-teal { background: var(--teal-50); } .tint-butter { background: var(--butter-50); }
.c-coral { color: var(--coral-700); } .c-teal { color: var(--teal-700); } .c-butter { color: var(--amber-700); }

/* ---- Buttons ---- */
.btn {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: 15px; line-height: 1.1; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .3s var(--spring), box-shadow .3s, background-color .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg, .btn i, .btn .ic { width: 17px; height: 17px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 22px -10px rgba(31, 41, 55, .55); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 30px -12px rgba(255, 107, 87, .7); }
.btn-coral { background: var(--coral); color: var(--ink); box-shadow: 0 10px 22px -10px rgba(255, 107, 87, .7); }
.btn-coral:hover { background: var(--coral-600); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-1); }
.btn-outline:hover { border-color: #D9CBB6; box-shadow: var(--sh-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.btn-danger { background: #fff; color: var(--red-700); border-color: #F5C2C2; }
.btn-danger:hover { background: var(--red-50); border-color: #F0A8A8; }
.btn-lg { --h: 54px; padding: 0 26px; font-size: 16px; }
.btn-sm { --h: 38px; padding: 0 15px; font-size: 14px; }
.btn-xs { --h: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn-xs svg, .btn-xs i, .btn-xs .ic { width: 15px; height: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.arrow-c { width: 28px; height: 28px; margin-right: -12px; border-radius: 50%; background: var(--coral); color: var(--ink); display: grid; place-items: center; transition: transform .35s var(--spring); }
.arrow-c svg, .arrow-c i, .arrow-c .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.btn:hover .arrow-c { transform: translateX(3px) rotate(-8deg); }
/* "Start here" CTA — the Setup Guide & Terminal button on the instance page. */
.btn-setup-cta { animation: setupPulse 2.2s ease-out infinite; }
.btn-setup-cta:hover, .btn-setup-cta:focus-visible { animation: none; }
@keyframes setupPulse {
  0% { box-shadow: 0 8px 20px -12px rgba(255, 107, 87, .6), 0 0 0 0 rgba(255, 107, 87, .5); }
  70% { box-shadow: 0 8px 20px -12px rgba(255, 107, 87, .6), 0 0 0 9px rgba(255, 107, 87, 0); }
  100% { box-shadow: 0 8px 20px -12px rgba(255, 107, 87, .6), 0 0 0 0 rgba(255, 107, 87, 0); }
}

/* ---- Chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--sh-1); text-decoration: none; transition: transform .3s var(--spring), box-shadow .3s;
}
a.chip:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.chip svg, .chip i, .chip .ic { width: 15px; height: 15px; color: var(--ink-3); }
.chip-new { background: var(--teal); color: #06302B; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }

/* ---- Cards ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1); }
.card-pad { padding: 24px; }
.card-hover { transition: transform .35s var(--spring), box-shadow .35s, border-color .3s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-2); }

/* ---- Badges / status pills ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; line-height: 1.2; white-space: nowrap; border: 1px solid transparent;
}
.badge .dot, .badge > i:empty { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--green-50); color: var(--green-700); border-color: #CDEFD9; }
.badge-success .dot { background: #22C55E; }
.badge-warning { background: #FFF6E0; color: var(--amber-700); border-color: #FBE3B0; }
.badge-danger { background: var(--red-50); color: var(--red-700); border-color: #F8CFCF; }
.badge-info { background: var(--info-soft); color: var(--info); border-color: #D6E3FF; }
.badge-brand { background: var(--coral-50); color: var(--coral-700); border-color: var(--coral-100); }
.badge-muted { background: #F5F1EA; color: var(--ink-3); border-color: var(--line); }
.b-coral { background: var(--coral-50); color: var(--coral-700); border-color: var(--coral-100); }
.b-teal { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-100); }
.b-butter { background: var(--butter-50); color: var(--amber-700); border-color: var(--butter-100); }

/* ---- Forms ---- */
.label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.input, .select, .textarea {
  width: 100%; background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 11px 14px; font-size: 14.5px; color: var(--ink); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
/* .mono is declared earlier, so the font-family:inherit above would win — keep mono fields monospace. */
.input.mono, .textarea.mono { font-family: var(--font-m); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.help { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.input-affix { position: relative; }
.input-affix .toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-3); cursor: pointer; padding: 6px; border-radius: 8px;
}
.input-affix .toggle:hover { background: var(--bg); color: var(--ink); }

/* ---- Switch ---- */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { display: none; }
.switch .track { width: 42px; height: 24px; background: #E5DCCD; border-radius: 999px; transition: .2s; position: relative; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 999px; transition: .2s; box-shadow: var(--sh-1); }
.switch input:checked + .track { background: var(--teal); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* ---- Brand mark ---- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-b); font-weight: 700; font-size: 20px; letter-spacing: -.045em; color: var(--ink); white-space: nowrap; }
.brand-wordmark { line-height: 1.2; }
.brand em { font-style: normal; color: var(--teal-700); }
.brand .mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.brand .mark img, .brand .mark svg { display: block; width: 100%; height: 100%; }
/* Legacy icon-in-a-tile brand mark (admin/auth layouts that still render <i data-lucide>) */
.brand .mark > i, .brand .mark > svg.lucide { width: 18px; height: 18px; }
.brand .mark:has(> i), .brand .mark:has(> svg.lucide) { border-radius: 11px; background: var(--coral); color: var(--ink); }

/* ---- Legacy top nav (kept for any page that still uses it) ---- */
.topnav { position: sticky; top: 0; z-index: 40; background: rgba(255, 251, 245, .93); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.topnav .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.navlink { color: var(--ink-2); font-weight: 500; font-size: 14.5px; padding: 8px 12px; border-radius: 999px; transition: .18s; }
.navlink:hover { color: var(--ink); background: #fff; box-shadow: var(--sh-1); }

/* ---- Pricing (legacy pricing page) ---- */
.price { font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.price small { font-family: var(--font-b); font-size: 15px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.tick { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14.5px; color: var(--ink); }
.tick i, .tick svg { color: var(--teal-700); width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ribbon {
  position: absolute; top: 16px; right: 16px; background: var(--coral); color: var(--ink);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(255, 107, 87, .8);
}

/* ---- Stat tile (legacy) ---- */
.stat-link { display: block; text-decoration: none; color: inherit; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .v { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat .k { font-size: 13px; color: var(--ink-3); font-weight: 500; }
/* The icon chip carries BOTH classes (<span class="stat ic">) — the compound selector matches it. */
.stat.ic { width: 42px; height: 42px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--coral-50); color: var(--coral-700); }
.stat.ic svg, .stat.ic i { width: 20px; height: 20px; }

/* ---- Table ---- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #FFFDF9; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: #FFFDF9; }

/* ---- Deploy stage tracker ---- */
.tracker { display: flex; align-items: center; width: 100%; }
.tracker .step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 92px; text-align: center; }
.tracker .dot { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line-2); color: var(--ink-4); font-weight: 700; font-size: 13px; }
.tracker .step .lbl { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.tracker .line { height: 2px; background: var(--line-2); flex: 1 1 auto; margin-bottom: 26px; border-radius: 2px; }
.tracker .step.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.tracker .step.done + .line, .tracker .line.done { background: var(--green); }
.tracker .step.active .dot { background: var(--coral); border-color: transparent; color: var(--ink); box-shadow: 0 0 0 5px rgba(255, 107, 87, .18); animation: pulse 1.8s infinite; }
.tracker .step.active .lbl { color: var(--coral-700); font-weight: 700; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 107, 87, .18); } 50% { box-shadow: 0 0 0 9px rgba(255, 107, 87, .05); } }

/* ---- App shell (admin; the customer dashboard uses crew.css's .dash) ---- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 0;
  padding: 18px 14px 16px; background: #FFFDF9; border-right: 1px solid var(--line); overflow-y: auto; z-index: 30;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 500; font-size: 14.5px; transition: background-color .2s, color .2s, box-shadow .2s; margin-bottom: 2px; }
.side-link i, .side-link svg { width: 18px; height: 18px; color: var(--ink-4); transition: color .2s; }
.side-link:hover { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.side-link:hover i, .side-link:hover svg { color: var(--ink-2); }
.side-link.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); }
.side-link.active i, .side-link.active svg { color: var(--coral); }
.side-section { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); padding: 22px 12px 8px; }
.main { min-width: 0; padding: 22px 32px 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.content { padding: 0 0 28px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; background: linear-gradient(135deg, var(--coral), #FDBA74); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line-2); flex: none; }
.side-cta { background: linear-gradient(150deg, #FFE7E1, #FFF4D6 60%, #E3F8F4); border: 1px solid var(--line); border-radius: 22px; padding: 16px; }
.side-cta .t { font-size: 13px; font-weight: 600; color: var(--coral-700); margin-bottom: 2px; }
.side-cta .v { font-weight: 700; font-size: 18px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 12px; color: var(--ink); }

/* ---- Agent identity chips ---- */
.agent-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: var(--ink); font-family: var(--font-d); }
.ic-openclaw { background: var(--coral-100); color: var(--coral-700); }
.ic-hermes { background: var(--teal-100); color: var(--teal-700); }
.ic-n8n { background: var(--butter-100); color: var(--amber-700); }
.ic-soon { background: #F5F1EA; color: var(--ink-4); }

/* ---- Auth split (login / register) ---- */
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; overflow: hidden; background: linear-gradient(150deg, #FFE7E1 0%, #FFF4D6 52%, #DDF6F1 100%); border-right: 1px solid var(--line); }
.auth-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(31, 41, 55, .07) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 80%); mask-image: linear-gradient(160deg, #000, transparent 80%); }
.auth-brand > * { position: relative; z-index: 1; }
.auth-formcol { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-formwrap { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 34px 30px; }
.auth-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); }
.auth-feature i, .auth-feature svg { width: 18px; height: 18px; color: var(--teal-700); flex: none; margin-top: 2px; }

/* ---- Misc ---- */
.divider { height: 1px; background: var(--line); border: none; margin: 0; }
.kbd { font-family: var(--font-m); font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink-2); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
details.faq { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 0; margin-bottom: 12px; transition: box-shadow .3s, border-color .3s; }
details.faq[open] { box-shadow: var(--sh-2); border-color: var(--line-2); }
details.faq summary { cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px 20px 24px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary i, details.faq summary svg { flex: none; width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: var(--bg); color: var(--ink); transition: transform .4s var(--spring), background-color .3s; }
details.faq[open] summary i, details.faq[open] summary svg { transform: rotate(180deg); background: var(--butter); }
details.faq p { color: var(--ink-2); margin: 0; padding: 0 24px 22px; }

/* ---- Legal / long-form prose ---- */
.legal-prose { max-width: 768px; }
.legal-prose > h2 { font-family: var(--font-d); font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 36px 0 12px; }
.legal-prose > h2:first-of-type { margin-top: 0; }
.legal-prose h3 { font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.legal-prose p { color: var(--ink-2); line-height: 1.75; margin: 0 0 18px; }
.legal-prose ul, .legal-prose ol { color: var(--ink-2); line-height: 1.7; margin: 0 0 20px; padding-left: 22px; }
.legal-prose li { margin-bottom: 7px; }
.legal-prose a { color: var(--coral-700); font-weight: 600; }
.legal-prose a:hover { text-decoration: underline; }
.legal-prose strong { color: var(--ink); font-weight: 700; }
.legal-prose .updated { font-family: var(--font-m); font-size: 12.5px; color: var(--ink-4); margin: 0 0 28px; }
.legal-prose .callout { background: var(--green-50); border: 1px solid #CDEFD9; border-radius: 18px; padding: 18px 20px; margin: 0 0 22px; }
.legal-prose .callout h3 { color: var(--green-700); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.legal-prose .callout ul { color: #2C6B4D; margin-bottom: 0; }
.legal-prose .rights-grid { display: grid; gap: 12px; margin: 0 0 22px; }
.legal-prose .rights-grid .card { padding: 16px 18px; }
.legal-prose .rights-grid p { margin: 0; font-size: 14px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 22px; }
.legal-table th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 11px 14px; border: 1px solid var(--line); background: #FFFDF9; }
.legal-table td { padding: 11px 14px; border: 1px solid var(--line); color: var(--ink); }

/* ---- Floating mockup screen switcher (design previews only) ---- */
#mockbar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; background: rgba(31, 41, 55, .94); border-radius: 999px; padding: 6px; display: flex; gap: 2px; box-shadow: var(--sh-3); max-width: 94vw; overflow: auto; }
#mockbar a { color: #D1D5DB; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: .14s; }
#mockbar a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
#mockbar a.active { background: #fff; color: var(--ink); }
#mockbar .mb-label { color: var(--ink-4); font-size: 11px; font-weight: 700; padding: 7px 10px; text-transform: uppercase; letter-spacing: .05em; }

/* ---- Admin dashboard: chart, overview, activity feed ---- */
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; position: relative; }
.bar { width: 100%; max-width: 52px; border-radius: 10px 10px 4px 4px; transition: opacity .15s, height 1s var(--ease); min-height: 4px; background: linear-gradient(180deg, var(--coral) 0%, #FDBA74 100%); }
.bar-col:hover .bar { opacity: .85; }
.bar-col:hover .bar-amt { opacity: 1; }
.bar-amt { position: absolute; top: -2px; font-size: 11px; font-weight: 700; font-family: var(--font-m); color: var(--ink); opacity: 0; transition: opacity .15s; pointer-events: none; white-space: nowrap; transform: translateY(-100%); }
.bar-lbl { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.ov-row { display: flex; flex-direction: column; gap: 2px; }
.ov-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 12px; font-size: 14px; transition: background .12s; text-decoration: none; color: inherit; }
.ov-item:hover { background: #FFFDF9; }
.ov-l { display: flex; align-items: center; gap: 9px; color: var(--ink-3); }
.ov-l i, .ov-l svg { width: 16px; height: 16px; }
.ov-v { font-weight: 700; font-family: var(--font-m); font-size: 13.5px; }
.ov-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--line); background: #FFFDF9; border-radius: 16px; text-decoration: none; color: inherit; transition: transform .3s var(--spring), box-shadow .3s; }
.ov-tile:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--sh-2); }
.ov-tile i, .ov-tile svg { width: 18px; height: 18px; color: var(--coral-700); }
.ov-tile span { font-weight: 700; font-size: 20px; font-family: var(--font-d); }
.ov-tile small { font-size: 11px; color: var(--ink-3); }
.feed { display: flex; flex-direction: column; gap: 2px; }
.feed-item { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: none; }
.feed-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--coral-50); color: var(--coral-700); display: grid; place-items: center; flex: none; }
.feed-ic i, .feed-ic svg { width: 15px; height: 15px; }

/* ---- Flash message ---- */
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 16px; font-size: 14.5px; border: 1px solid; }
.flash i, .flash svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.flash-success { background: var(--green-50); border-color: #CDEFD9; color: #14532D; }
.flash-error { background: var(--red-50); border-color: #F8CFCF; color: #7F1D1D; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { display: none; }
  .auth-formcol { padding: 28px 16px; }
}
@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .main { padding: 16px 16px 0; }
}
@media (max-width: 640px) {
  body .container, .wrap { padding: 0 16px; }
  .section, .sec { padding: 72px 0; }
  .sec-head { margin-bottom: 40px; }
  .lead { font-size: 16.5px; }
  .card-pad { padding: 18px; }
  .topbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}