/* Sevyo — Static HTML version. Shared design tokens + components. */

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Figtree:wght@300;400;500;600;700;800&display=swap');

/* ===== Tokens (light) ===== */
:root {
  --font-heading: 'Figtree', sans-serif;
  --font-body: 'Inter', sans-serif;

  --bg: hsl(180 20% 99%);
  --fg: hsl(200 25% 10%);
  --card: #fff;
  --card-fg: hsl(200 25% 10%);
  --primary: hsl(220 72% 41%);
  --primary-900: hsl(220 72% 35%);
  --primary-fg: #fff;
  --accent: hsl(351 60% 45%);
  --accent-fg: #fff;
  --muted: hsl(214 10% 96%);
  --muted-fg: hsl(220 10% 45%);
  --border: hsl(180 10% 90%);
  --input: hsl(180 10% 90%);
  --ring: hsl(220 72% 41%);
  --destructive: hsl(0 84% 60%);

  --sidebar-bg: hsl(220 55% 14%);
  --sidebar-fg: hsl(210 10% 90%);
  --sidebar-primary: hsl(220 72% 55%);
  --sidebar-primary-fg: #fff;
  --sidebar-accent: hsl(220 35% 20%);
  --sidebar-border: hsl(220 35% 22%);

  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
}

.dark {
  --bg: hsl(200 25% 6%);
  --fg: hsl(180 10% 95%);
  --card: hsl(200 25% 9%);
  --card-fg: hsl(180 10% 95%);
  --primary: hsl(220 72% 55%);
  --accent: hsl(351 60% 50%);
  --muted: hsl(220 20% 14%);
  --muted-fg: hsl(210 10% 55%);
  --border: hsl(200 20% 18%);
  --sidebar-bg: hsl(200 25% 5%);
}

/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 700; color: var(--fg); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
img { max-width: 100%; display: block; }

/* ===== Layout helpers ===== */
.max-w-7xl { max-width: 1280px; margin: 0 auto; }
.max-w-6xl { max-width: 1152px; margin: 0 auto; }
.max-w-5xl { max-width: 1024px; margin: 0 auto; }
.max-w-4xl { max-width: 896px; margin: 0 auto; }
.max-w-3xl { max-width: 768px; margin: 0 auto; }
.max-w-md { max-width: 448px; margin: 0 auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.grid { display: grid; gap: 1.5rem; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; }
.text-center { text-align: center; }
.text-sm { font-size: .875rem; } .text-xs { font-size: .75rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; }
.font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; }
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.text-muted { color: var(--muted-fg); }
.text-primary { color: var(--primary); }
.text-white { color: #fff; }
.hidden { display: none; }
.w-full { width: 100%; }
.relative { position: relative; }

@media (max-width: 768px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Card ===== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.card-pad-lg { padding: 1.5rem; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; border-radius: .625rem; font-size: .875rem; font-weight: 600; transition: all .2s; white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-900); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--fg); }
.btn-outline:hover { background: var(--muted); }
.btn-accent { background: var(--accent); color: var(--accent-fg); }
.btn-danger { background: transparent; border: 1px solid hsl(0 84% 80%); color: hsl(0 70% 45%); }
.btn-danger:hover { background: hsl(0 84% 96%); }
.btn-ghost { color: var(--muted-fg); }
.btn-ghost:hover { background: var(--muted); }
.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; border-radius: 1rem; }
.btn-sm { padding: .375rem .75rem; font-size: .75rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Inputs ===== */
.input, .select, .textarea { width: 100%; height: 2.25rem; padding: 0 .75rem; border: 1px solid var(--input); border-radius: .625rem; background: transparent; color: var(--fg); transition: border-color .2s, box-shadow .2s; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px hsl(220 72% 41% / .12); }
.textarea { height: auto; min-height: 5rem; padding: .5rem .75rem; resize: vertical; }
.field-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; }

/* ===== Badge ===== */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 600; border: 1px solid; }
.badge-confirmed { background: #eff6ff; color: #2563eb; border-color: #dbeafe; }
.badge-pending { background: #faf5ff; color: #9333ea; border-color: #f3e8ff; }
.badge-broadcast { background: #fffbeb; color: #d97706; border-color: #fef3c7; }
.badge-in_progress { background: #fffbeb; color: #d97706; border-color: #fef3c7; }
.badge-completed { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.badge-cancelled { background: #fff1f2; color: #e11d48; border-color: #ffe4e6; }
.badge-expired { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.badge-active { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.badge-inactive { background: #fff1f2; color: #e11d48; border-color: #ffe4e6; }
.badge-pending-v { background: #fffbeb; color: #d97706; border-color: #fef3c7; }
.badge-paid { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.badge-unpaid { background: #fffbeb; color: #d97706; border-color: #fef3c7; }
.badge-verified { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.badge-unverified { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

/* ===== Status pill text helper ===== */
.status-label { text-transform: capitalize; }

/* ===== Stat card ===== */
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; transition: box-shadow .2s; }
.stat-card:hover { box-shadow: var(--shadow); }
.stat-card .stat-icon { width: 2.5rem; height: 2.5rem; border-radius: .625rem; display: flex; align-items: center; justify-content: center; background: hsl(220 72% 41% / .1); color: var(--primary); }
.stat-card .stat-icon.amber { background: #fffbeb; color: #d97706; }
.stat-card .stat-icon.emerald { background: #ecfdf5; color: #059669; }
.stat-card .stat-icon.rose { background: #fff1f2; color: #e11d48; }
.stat-card .stat-icon.blue { background: #eff6ff; color: #2563eb; }
.stat-card .stat-icon.violet { background: #f5f3ff; color: #7c3aed; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-heading); }
.stat-card .stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); }

/* ===== Sidebar / Panel layout ===== */
.panel-wrap { min-height: 100vh; background: var(--bg); }
.sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 16rem; background: var(--sidebar-bg); z-index: 40; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s; }
.sidebar.open { transform: translateX(0); }
.sidebar-brand { padding: 1.25rem; border-bottom: 1px solid var(--sidebar-border); }
.sidebar-brand .logo { height: 4.5rem; width: auto; filter: brightness(0) invert(1); }
.sidebar-brand .panel-title { font-size: .625rem; color: hsla(210 10% 90% / .6); text-transform: uppercase; letter-spacing: .15em; margin-top: .25rem; }
.sidebar nav { flex: 1; padding: .75rem; overflow-y: auto; }
.sidebar nav a { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .625rem; font-size: .875rem; font-weight: 500; color: hsla(210 10% 90% / .7); transition: all .2s; margin-bottom: .125rem; }
.sidebar nav a:hover { color: hsl(210 10% 90%); background: var(--sidebar-accent); }
.sidebar nav a.active { background: var(--sidebar-primary); color: var(--sidebar-primary-fg); box-shadow: var(--shadow-sm); }
.sidebar nav a .nav-badge { margin-left: auto; font-size: .625rem; font-weight: 700; background: var(--accent); color: var(--accent-fg); padding: .125rem .4rem; border-radius: 999px; }
.sidebar nav a svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.main-area { margin-left: 0; min-height: 100vh; }
@media (min-width: 1024px) {
  .sidebar { transform: translateX(0); }
  .main-area { margin-left: 16rem; }
}
.panel-content { padding: 1rem 1.5rem 2rem; }
@media (min-width: 1024px) { .panel-content { padding: 1.5rem 2rem 2rem; } }

/* Mobile toggle */
.mobile-toggle { display: flex; position: fixed; top: .75rem; left: .75rem; z-index: 50; width: 2.5rem; height: 2.5rem; border-radius: .625rem; background: var(--sidebar-bg); align-items: center; justify-content: center; box-shadow: var(--shadow); }
.mobile-toggle svg { color: var(--sidebar-fg); width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39; }
.sidebar-overlay.show { display: block; }
@media (min-width: 1024px) { .sidebar-overlay { display: none !important; } }

/* Top bar */
.topbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
@media (max-width: 1023px) { .topbar { padding-top: 2.5rem; } }

/* Notification bell */
.notif-bell { position: relative; }
.notif-btn { position: relative; width: 2.25rem; height: 2.25rem; border-radius: .625rem; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.notif-btn:hover { background: var(--muted); }
.notif-btn svg { width: 1rem; height: 1rem; color: var(--muted-fg); }
.notif-dot { position: absolute; top: -.125rem; right: -.125rem; min-width: 1rem; height: 1rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.notif-dropdown { position: absolute; right: 0; top: 2.75rem; width: 20rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; }

/* Page header */
.page-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .page-header { flex-direction: row; align-items: center; justify-content: space-between; } }
.page-header h1 { font-size: 1.625rem; }
.page-header .subtitle { font-size: .875rem; color: var(--muted-fg); margin-top: .25rem; }

/* Tabs / filter bar */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filter-chip { padding: .375rem .875rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--card); border: 1px solid var(--border); color: var(--muted-fg); transition: all .2s; }
.filter-chip:hover { background: var(--muted); }
.filter-chip.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
td { padding: .875rem 1rem; border-bottom: 1px solid var(--border); font-size: .85rem; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--muted); }

/* Avatar */
.avatar { border-radius: 999px; object-fit: cover; }
.avatar-placeholder { display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; color: #fff; }

/* Empty state */
.empty-state { background: var(--card); border: 2px dashed var(--border); border-radius: var(--radius); padding: 3rem; text-align: center; }
.empty-state svg { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: hsl(220 10% 80%); }

/* Spinner */
.spinner { width: 1.5rem; height: 1.5rem; border: 2px solid hsl(220 72% 41% / .3); border-top-color: var(--primary); border-radius: 999px; animation: spin .7s linear infinite; }
.spinner-lg { width: 2rem; height: 2rem; }
.loading-center { display: flex; justify-content: center; padding: 6rem 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade in */
.fade-section { opacity: 0; transform: translateY(32px); transition: opacity .65s ease, transform .65s ease; }
.fade-section.visible { opacity: 1; transform: translateY(0); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .7s ease both; }

/* Landing nav */
.landing-nav { background: rgba(255,255,255,.9); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid #f1f5f9; box-shadow: var(--shadow-sm); }
.landing-nav .inner { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; max-width: 1280px; margin: 0 auto; }
.landing-nav .logo { height: 3rem; }
.landing-nav .nav-links { display: none; gap: 2rem; }
@media (min-width: 768px) { .landing-nav .nav-links { display: flex; } }
.landing-nav .nav-links a { font-size: .875rem; font-weight: 500; color: #64748b; transition: color .2s; }
.landing-nav .nav-links a:hover { color: var(--primary); }
.landing-nav .nav-actions { display: flex; align-items: center; gap: .75rem; }
.landing-nav .sign-in { font-size: .875rem; font-weight: 500; color: #475569; padding: .5rem 1rem; border-radius: .625rem; transition: all .2s; }
.landing-nav .sign-in:hover { background: #f8fafc; color: var(--primary); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 7rem 1.5rem; background: linear-gradient(to bottom, hsl(220 72% 41% / .06), var(--bg)); }
@media (min-width: 1024px) { .hero { padding: 10rem 1.5rem; } }
.hero-blob { position: absolute; border-radius: 999px; filter: blur(100px); pointer-events: none; }
.hero-content { position: relative; max-width: 56rem; margin: 0 auto; text-align: center; }
.pill-badge { display: inline-block; background: hsl(220 72% 41% / .1); color: var(--primary); padding: .375rem 1rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.hero h1 { font-size: 3rem; line-height: 1.08; margin-top: 1.5rem; }
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; } }
.hero .lead { font-size: 1.25rem; color: var(--muted-fg); max-width: 42rem; margin: 1.5rem auto 0; line-height: 1.6; }
@media (min-width: 640px) { .hero .lead { font-size: 1.25rem; } }

/* Service grid tile */
.service-tile { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: 1rem; border: 1px solid #f1f5f9; background: hsl(210 40% 98% / .6); text-align: left; transition: all .2s; }
.service-tile:hover { box-shadow: var(--shadow); border-color: hsl(220 72% 41% / .2); background: #fff; transform: translateY(-2px); }
.service-tile .tile-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-tile .tile-label { font-size: .75rem; font-weight: 600; color: #334155; line-height: 1.2; }

/* Step card */
.step-card { background: #fff; border-radius: 1.5rem; border: 1px solid #f1f5f9; padding: 2rem; box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; gap: 1.25rem; }
.step-card .step-num { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: hsl(220 72% 41% / .1); color: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; }

/* Testimonial card */
.testimonial { background: hsl(210 40% 98% / .8); padding: 1.75rem; border-radius: 1.5rem; border: 1px solid #f1f5f9; height: 100%; display: flex; flex-direction: column; }
.testimonial .stars { display: flex; gap: 2px; margin-bottom: 1rem; }
.testimonial .stars svg { width: 1rem; height: 1rem; color: #fbbf24; fill: #fbbf24; }
.testimonial .quote { color: #64748b; font-style: italic; font-size: .875rem; line-height: 1.6; flex: 1; }

/* FAQ */
.faq-item { background: #fff; border-radius: 1rem; border: 1px solid #f1f5f9; overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-item .faq-q { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.25rem; text-align: left; }
.faq-item .faq-q .q-text { font-weight: 600; color: #1e293b; font-size: .875rem; padding-right: 1rem; }
.faq-item .faq-q .chevron { width: 1.25rem; height: 1.25rem; color: var(--primary); flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-q .chevron { transform: rotate(180deg); }
.faq-item .faq-a { display: none; padding: 0 1.25rem 1.25rem; color: #64748b; font-size: .875rem; line-height: 1.6; border-top: 1px solid #f8fafc; }

/* CTA band */
.cta-band { background: linear-gradient(135deg, hsl(220 72% 47%), var(--primary)); border-radius: 1.5rem; padding: 3.5rem; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
@media (min-width: 1024px) { .cta-band { padding: 5rem; } }
.cta-band h2 { color: #fff; font-size: 2.25rem; }
@media (min-width: 1024px) { .cta-band h2 { font-size: 3rem; } }
.cta-band p { color: rgba(255,255,255,.8); font-size: 1.125rem; }

/* Footer */
.landing-footer { background: #fff; border-top: 1px solid #f1f5f9; }
.landing-footer .inner { padding: 2.5rem 1.5rem; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .landing-footer .inner { flex-direction: row; justify-content: space-between; } }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: var(--card); border-radius: 1rem; max-width: 32rem; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-body { padding: 1.5rem; }

/* Auth page - Two panel layout matching original */
.auth-wrap { min-height: 100vh; display: flex; background: #f8faff; }
.auth-left { flex: 1; display: none; background: linear-gradient(135deg, hsl(220 72% 41%), hsl(220 60% 30%)); padding: 4rem 3rem; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-left::before { content: ''; position: absolute; top: -20%; right: -20%; width: 30rem; height: 30rem; border-radius: 999px; background: hsla(0 0% 100% / .05); pointer-events: none; }
.auth-left::after { content: ''; position: absolute; bottom: -10%; left: -10%; width: 20rem; height: 20rem; border-radius: 999px; background: hsla(351 60% 60% / .1); pointer-events: none; }
@media (min-width: 1024px) { .auth-left { display: flex; } }
.auth-left-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2.5rem; max-width: 28rem; }
.auth-left-logo { height: 3.5rem; width: auto; filter: brightness(0) invert(1); }
.auth-left-title { color: #fff; font-size: 2rem; line-height: 1.2; font-weight: 700; }
.auth-left-features { display: flex; flex-direction: column; gap: 1rem; list-style: none; }
.auth-left-features li { display: flex; align-items: center; gap: .75rem; color: hsla(0 0% 100% / .85); font-size: .95rem; }
.auth-left-features .check-icon { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: hsla(0 0% 100% / .2); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.auth-left-copy { color: hsla(0 0% 100% / .5); font-size: .75rem; margin-top: auto; }
.auth-right { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; }
.auth-back { position: absolute; top: 2rem; left: 2rem; font-size: .875rem; color: var(--muted-fg); transition: color .2s; }
.auth-back:hover { color: var(--primary); }
.auth-card { background: var(--card); border-radius: 1.5rem; box-shadow: var(--shadow-lg); max-width: 28rem; width: 100%; padding: 2.5rem; }
.auth-logo-link { display: block; }
.auth-logo { height: 3.5rem; margin: 0 auto 1.5rem; display: block; }
.auth-tabs { display: flex; gap: .25rem; background: var(--muted); border-radius: .75rem; padding: .25rem; margin-bottom: 1.5rem; }
.auth-tab { flex: 1; padding: .5rem; border-radius: .625rem; font-size: .875rem; font-weight: 600; color: var(--muted-fg); transition: all .2s; }
.auth-tab.active { background: var(--card); color: var(--primary); box-shadow: var(--shadow-sm); }
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.role-card { border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; text-align: center; transition: all .2s; cursor: pointer; }
.role-card:hover { border-color: hsl(220 72% 41% / .3); }
.role-card.active { border-color: var(--primary); background: hsl(220 72% 41% / .05); }

/* User hero banner */
.user-hero { background: linear-gradient(135deg, hsl(220 72% 41%), hsl(220 55% 30%)); border-radius: 1.25rem; padding: 2.5rem 2rem; position: relative; overflow: hidden; }
.user-hero::before { content: ''; position: absolute; top: -40%; right: -10%; width: 20rem; height: 20rem; border-radius: 999px; background: hsla(0 0% 100% / .06); pointer-events: none; }
.user-hero::after { content: ''; position: absolute; bottom: -30%; left: -5%; width: 15rem; height: 15rem; border-radius: 999px; background: hsla(351 60% 60% / .08); pointer-events: none; }
.user-hero-content { position: relative; z-index: 1; }
.user-hero-title { color: #fff; font-size: 1.5rem; margin-bottom: .25rem; }
.user-hero-subtitle { color: hsla(0 0% 100% / .75); font-size: .875rem; margin-bottom: 1.25rem; }
.user-hero-search { display: flex; gap: .5rem; max-width: 32rem; }
.user-hero-input { background: rgba(255,255,255,.15); border: 1px solid hsla(0 0% 100% / .2); color: #fff; height: 2.75rem; border-radius: .75rem; padding: 0 1rem; flex: 1; }
.user-hero-input::placeholder { color: hsla(0 0% 100% / .5); }
.user-hero-input:focus { border-color: hsla(0 0% 100% / .5); box-shadow: 0 0 0 3px hsla(0 0% 100% / .15); }
.user-hero-btn { height: 2.75rem; border-radius: .75rem; background: #fff; color: var(--primary); }
.user-hero-btn:hover { background: #f1f5f9; }
.user-hero-trust { display: flex; gap: 1.5rem; margin-top: 1rem; color: hsla(0 0% 100% / .7); font-size: .75rem; flex-wrap: wrap; }

/* Progress bar */
.progress-track { height: .5rem; background: var(--muted); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s; }

/* Toast */
#toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast-item { background: var(--fg); color: var(--bg); padding: .75rem 1.25rem; border-radius: .75rem; font-size: .85rem; font-weight: 500; box-shadow: var(--shadow-lg); animation: fadeUp .3s ease; }

/* Star rating row */
.stars-row { display: flex; gap: 2px; }
.stars-row svg { width: .875rem; height: .875rem; }
.star-filled { color: #fbbf24; fill: #fbbf24; }
.star-empty { color: #e5e7eb; fill: #e5e7eb; }

/* Bar chart (simple) */
.bar-chart { display: flex; align-items: flex-end; gap: .75rem; height: 12rem; padding-top: 1rem; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.bar-chart .bar { width: 100%; background: linear-gradient(to top, var(--primary), hsl(220 72% 55%)); border-radius: .375rem .375rem 0 0; transition: height .4s; min-height: 4px; }
.bar-chart .bar-label { font-size: .7rem; color: var(--muted-fg); font-weight: 600; }

/* Donut (CSS conic) */
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.donut { width: 10rem; height: 10rem; border-radius: 999px; position: relative; }
.donut::after { content: ''; position: absolute; inset: 1.25rem; background: var(--card); border-radius: 999px; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut-legend { display: flex; flex-direction: column; gap: .5rem; }
.donut-legend .leg { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.donut-legend .leg .dot { width: .75rem; height: .75rem; border-radius: 999px; }

/* Utility */
.rounded-xl { border-radius: var(--radius); }
.rounded-lg { border-radius: calc(var(--radius) - 2px); }
.rounded-full { border-radius: 999px; }
.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.pb-4 { padding-bottom: 1rem; }
.pt-4 { padding-top: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.items-start { align-items: flex-start; }
.gap-1 { gap: .25rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Gradient stat card (original style) */
.stat-card-gradient { border-radius: var(--radius); padding: 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; color: #fff; position: relative; overflow: hidden; }
.stat-card-gradient::before { content: ''; position: absolute; top: -50%; right: -30%; width: 8rem; height: 8rem; border-radius: 999px; background: hsla(0 0% 100% / .1); pointer-events: none; }
.stat-card-gradient .stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.stat-card-gradient .stat-value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-heading); }
.stat-card-gradient .stat-icon { width: 2.5rem; height: 2.5rem; border-radius: .625rem; background: hsla(0 0% 100% / .2); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }

/* Alert banner */
.alert-banner { border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.alert-banner-info { background: #eff6ff; border: 1px solid #dbeafe; color: #1e40af; }
.alert-banner-warning { background: #fffbeb; border: 1px solid #fef3c7; color: #92400e; }