@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{--primary:#1461C4;--primary-dark:#0d4290;--success:#16A34A;--warning:#F59E0B;--danger:#DC2626;--dark:#1F2937;--muted:#64748b;--bg:#F8FAFC;--white:#fff;--border:#E5E7EB;--shadow:0 12px 32px rgba(15,23,42,.08);--radius:16px;font-family:'Montserrat',system-ui,sans-serif;color:var(--dark);background:var(--bg);line-height:1.5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}.container{width:min(1120px,calc(100% - 32px));margin:0 auto}.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-family:'Montserrat';font-weight:700;font-size:1.18rem}.brand-logo{display:block;width:auto;height:42px;max-width:220px;object-fit:contain}.guest-header .brand-logo{height:72px;max-width:min(320px,80vw);margin:0 auto 8px}.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--primary);display:grid;place-items:center;color:white;font-weight:700}.nav-links{display:flex;align-items:center;gap:22px;color:#475569;font-weight:600;font-size:.94rem}.nav-actions{display:flex;align-items:center;gap:10px}.menu-toggle{display:none;background:transparent;font-size:1.4rem;color:var(--dark)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;font-weight:700;transition:.2s ease;border:1px solid transparent}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:#fff;color:var(--primary);border-color:#bfd2ef}.btn-ghost{background:transparent;color:var(--primary)}.btn-danger{background:#fee2e2;color:#991b1b}.btn-success{background:#dcfce7;color:#166534}.btn-sm{min-height:36px;padding:0 12px;font-size:.88rem}.hero{padding:92px 0 72px;background:linear-gradient(135deg,#f8fbff 0%,#fff 55%,#eef5ff 100%)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}.eyebrow{color:var(--primary);font-weight:800;letter-spacing:.12em;font-size:.76rem;text-transform:uppercase}.hero h1{font-family:'Montserrat';font-size:clamp(2.5rem,6vw,5rem);line-height:1.03;margin:16px 0}.hero h1 span{color:var(--primary)}.hero p{font-size:1.1rem;color:#475569;max-width:600px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-card{background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:22px;box-shadow:var(--shadow)}.phone-preview{border:10px solid #172033;border-radius:28px;background:#f8fbff;padding:16px;max-width:310px;margin:auto}.preview-top{height:10px;width:70px;background:#cbd5e1;border-radius:20px;margin:0 auto 18px}.preview-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px}.section{padding:78px 0}.section-muted{background:#eef5ff}.section-heading{text-align:center;max-width:680px;margin:0 auto 42px}.section-heading h2{font-family:'Montserrat';font-size:clamp(1.8rem,4vw,2.7rem);margin:10px 0}.section-heading p{color:var(--muted)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 5px 18px rgba(15,23,42,.03)}.card h3{margin:0 0 8px;font-family:'Montserrat'}.card p{color:var(--muted);margin:0}.icon-box{width:42px;height:42px;border-radius:12px;background:#e8f1ff;color:var(--primary);display:grid;place-items:center;font-weight:800;margin-bottom:16px}.steps{counter-reset:step}.step{position:relative}.step-number{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:16px}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.price-card{position:relative}.price-card.featured{border:2px solid var(--primary);padding:21px}.badge{position:absolute;right:16px;top:16px;background:#dbeafe;color:var(--primary);border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:800}.price{font-family:'Montserrat';font-size:2rem;margin:16px 0 4px}.price-note{color:var(--muted);margin-bottom:22px}.feature-list{padding:0;margin:20px 0;list-style:none;display:grid;gap:10px;color:#475569}.feature-list li:before{content:'✓';color:var(--success);font-weight:800;margin-right:8px}.site-footer{padding:32px 0;background:#13233e;color:#cbd5e1}.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-row strong{color:#fff}.form-page{min-height:100vh;display:grid;place-items:center;padding:30px 16px}.auth-card{width:min(460px,100%);background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:var(--shadow)}.auth-card h1{font-family:'Montserrat';margin:0 0 8px}.auth-card>p{color:var(--muted);margin-top:0}.form-grid{display:grid;gap:14px}.field{display:grid;gap:6px}.field label{font-size:.9rem;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:11px 12px;background:#fff;color:var(--dark);outline:none}.field textarea{min-height:100px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #dbeafe}.field small{color:var(--muted)}.form-error,.form-success{border-radius:10px;padding:11px 12px;font-size:.9rem}.form-error{background:#fef2f2;color:#991b1b}.form-success{background:#f0fdf4;color:#166534}.hidden{display:none!important}.app-shell{min-height:100vh}.app-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:15}.app-nav{height:68px;display:flex;align-items:center;justify-content:space-between;gap:15px}.app-layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - 68px)}.sidebar{background:#fff;border-right:1px solid var(--border);padding:20px 12px}.side-links{display:grid;gap:5px}.side-links a{padding:11px 12px;border-radius:9px;color:#475569;font-weight:600}.side-links a.active,.side-links a:hover{background:#eaf2ff;color:var(--primary)}.main-content{padding:28px 24px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}.page-head h1{font-family:'Montserrat';margin:0 0 5px}.muted{color:var(--muted)}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0}.stat-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px}.stat-card span{display:block;color:var(--muted);font-size:.83rem}.stat-card strong{font-size:1.75rem;font-family:'Montserrat';display:block;margin-top:7px}.trial-banner{background:#eaf2ff;border:1px solid #bfd7ff;border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.trial-banner.expired{background:#fff1f2;border-color:#fecdd3}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px}.data-table{width:100%;border-collapse:collapse;min-width:700px}.data-table th,.data-table td{text-align:left;padding:13px 14px;border-bottom:1px solid #edf0f4;font-size:.9rem}.data-table th{color:#475569;background:#f8fafc;font-weight:800}.status{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:.75rem;font-weight:800;text-transform:capitalize}.status-pending,.status-trial{background:#fef3c7;color:#92400e}.status-playing,.status-active{background:#dbeafe;color:#1d4ed8}.status-played,.status-lifetime{background:#dcfce7;color:#166534}.status-rejected,.status-expired,.status-suspended{background:#fee2e2;color:#991b1b}.status-archived{background:#e2e8f0;color:#475569}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.toolbar input,.toolbar select{border:1px solid #cbd5e1;border-radius:9px;padding:10px 11px;background:#fff}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);display:grid;place-items:center;padding:16px;z-index:50}.modal{background:#fff;border-radius:18px;width:min(560px,100%);max-height:90vh;overflow:auto;padding:24px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-head h2{font-family:'Montserrat';margin:0}.qr-box{text-align:center;background:#fff;border:1px solid var(--border);padding:20px;border-radius:16px}.qr-box img,.qr-box canvas{max-width:100%;margin:12px auto;display:block}.guest-page{min-height:100vh;padding:22px 0 40px}.guest-header{text-align:center;margin-bottom:22px}.guest-card{width:min(620px,calc(100% - 28px));margin:auto}.event-closed{background:#fff1f2;border:1px solid #fecdd3;color:#991b1b;border-radius:14px;padding:20px;text-align:center}.notice{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:12px;padding:12px}.toast{position:fixed;right:18px;bottom:18px;background:#172033;color:#fff;padding:13px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:100}.danger-text{color:var(--danger)}.success-text{color:var(--success)}.admin-kpi{border-left:4px solid var(--primary)}.footer-note{color:var(--muted);font-size:.84rem;text-align:center;margin-top:24px}@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.nav-links,.nav-actions{display:none}.menu-toggle{display:block}.nav.open .nav-links{display:grid;position:absolute;left:0;right:0;top:72px;background:#fff;padding:16px;border-bottom:1px solid var(--border)}.nav.open .nav-actions{display:flex;position:absolute;left:16px;right:16px;top:236px;background:#fff;padding:12px;border-bottom:1px solid var(--border)}.grid-3,.pricing-grid{grid-template-columns:1fr}.app-layout{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--border);padding:8px 12px;overflow:auto}.side-links{display:flex;min-width:max-content}.side-links a{font-size:.85rem;padding:8px 10px}.main-content{padding:22px 16px}.stats-grid{grid-template-columns:repeat(2,1fr)}.trial-banner,.page-head{display:block}.page-head .btn{margin-top:12px}.hero{padding:66px 0 52px}.section{padding:56px 0}}@media(max-width:400px){.container{width:min(100% - 22px,1120px)}.grid-4,.stats-grid{grid-template-columns:1fr}.btn{width:100%}.hero-actions{display:grid}.auth-card{padding:21px}}

.app-menu-toggle{display:none}
@media(max-width:720px){.app-header .app-nav{display:flex;align-items:center;gap:8px}.app-menu-toggle{display:inline-flex;margin-left:auto}.app-header .logout-btn{margin-left:0}.app-layout{display:block;position:relative}.app-layout .sidebar{display:none;position:absolute;z-index:20;top:0;left:0;right:0;background:#fff;border-bottom:1px solid #dbe4ef;box-shadow:0 10px 24px rgba(15,23,42,.12)}.app-layout .sidebar.open{display:block}.app-layout .side-links{display:flex;flex-direction:column;padding:10px}.app-layout .side-links a{display:block;padding:12px 14px}.app-layout .main-content{width:100%;padding:20px 14px}.page-head{gap:14px}.page-head .hero-actions{width:100%;flex-wrap:wrap}}

/* ===== Dashboard cards (Phase 2) ===== */
.app-header-actions{display:flex;align-items:center;gap:12px}
.notification-bell{position:relative;background:transparent;border:0;font-size:1.35rem;padding:6px 8px;border-radius:10px;cursor:pointer;line-height:1}
.notification-bell:hover{background:#f1f5f9}
.notification-badge{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;line-height:1}
.dashboard-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.dash-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-height:140px;transition:.2s ease}
.dash-card-primary{background:linear-gradient(135deg,#1461C4 0%,#0d4290 100%);color:#fff;border:0;text-decoration:none}
.dash-card-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(20,97,196,.28)}
.dash-card-label{font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.dash-card-value{font-family:'Montserrat';font-size:2.4rem;font-weight:700;line-height:1}
.dash-card-hint{font-size:.8rem;opacity:.75}
.dash-card-primary .dash-card-hint{opacity:.9}
.recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.recent-list li a{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.recent-list li a:hover{color:var(--primary)}
.recent-list .muted{font-size:.8rem}
.toast-container{position:fixed;top:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast-new-request{background:#0f172a;color:#fff;padding:14px 16px;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:4px;animation:slideIn .25s ease}
.toast-new-request strong{font-size:.95rem}
.toast-new-request span{font-size:.86rem;opacity:.9}
@keyframes slideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.status-played{background:#dcfce7;color:#166534}
.status-rejected{background:#fee2e2;color:#991b1b}
.status-pending{background:#dbeafe;color:#1e40af}
.status-playing{background:#fef3c7;color:#92400e}
.status-archived{background:#f1f5f9;color:#64748b}
@media(max-width:900px){.dashboard-cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dashboard-cards{grid-template-columns:1fr}.dash-card-value{font-size:2rem}}

/* Request messages */
.row-unread { background: #f0f7ff; }
.row-unread td { font-weight: 500; }
.status-unread { background: #dbeafe; color: #1e40af; }
.status-read { background: #f1f5f9; color: #64748b; }

/* ===== Landing page redesign ===== */
.landing .hero-dj {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 100px 0 80px;
  background: #0b1220;
  color: #f8fafc;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(20,97,196,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(99,102,241,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #111827 45%, #0f172a 100%);
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
}
.hero-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,97,196,0.45) 0%, transparent 70%);
  top: -80px;
  right: -60px;
  animation: heroFloat 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroFloat {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-40px, 30px) scale(1.08); }
}
.hero-dj .hero-grid {
  position: relative;
  z-index: 1;
}
.hero-dj .eyebrow { color: #93c5fd; }
.hero-dj h1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.05;
  margin: 14px 0 18px;
  color: #fff;
}
.hero-dj h1 span { color: #60a5fa; }
.hero-dj p { color: #cbd5e1; font-size: 1.12rem; max-width: 34rem; }
.hero-note { margin-top: 14px; font-size: 0.9rem; }
.hero-dj .hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 10px;
}
.hero-dj .phone-preview {
  background: #0f172a;
  border-radius: 16px;
  padding: 22px 18px 18px;
  color: #e2e8f0;
}
.hero-dj .preview-card {
  background: #1e293b;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 700;
  background: #25D366;
  color: #fff;
  border: 1px solid transparent;
  transition: 0.2s ease;
}
.btn-whatsapp:hover {
  background: #1da851;
  transform: translateY(-1px);
  color: #fff;
}
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 1.05rem; }
.section-alt { background: #f1f5f9; }
.feature-icon { font-size: 1.8rem; margin-bottom: 8px; }
.feature-card h3 { margin: 0 0 8px; }
.cta-section { padding-bottom: 80px; }
.cta-box {
  background: linear-gradient(135deg, #1461C4 0%, #0d4290 100%);
  color: #fff;
  border-radius: 24px;
  padding: 48px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.cta-box h2 { color: #fff; margin: 8px 0 12px; }
.cta-box p { color: #dbeafe; max-width: 36rem; margin: 0; }
.cta-box .eyebrow { color: #93c5fd; }
.cta-box .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.cta-box .btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .hero-dj { min-height: auto; padding: 88px 0 56px; }
  .cta-box { padding: 32px 24px; }
}

/* ===== Landing — white hero, brand blue ===== */
.landing .hero-light {
  position: relative;
  background: #ffffff;
  color: var(--dark);
  padding: 88px 0 72px;
  overflow: hidden;
}
.landing .hero-light .eyebrow { color: var(--primary); }
.landing .hero-light h1 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.08;
  margin: 12px 0 16px;
  color: var(--dark);
}
.landing .hero-light h1 span { color: var(--primary); }
.landing .hero-light p { color: var(--muted); font-size: 1.08rem; max-width: 34rem; }
.hero-visual { display: flex; align-items: center; justify-content: center; }
.hero-image-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
  max-width: 100%;
}
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  animation: heroKen 18s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes heroKen {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.hero-image-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(20, 97, 196, 0.92);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}
.landing .cta-box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 48px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.landing .cta-box h2 { color: #fff; margin: 8px 0 12px; }
.landing .cta-box p { color: #dbeafe; max-width: 36rem; margin: 0; }
.landing .cta-box .eyebrow { color: #93c5fd; }
.landing .cta-box .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.landing .cta-box .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* Alignment polish */
.app-layout .main-content { max-width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.stats-grid, .dashboard-cards { align-items: stretch; }
.data-table th, .data-table td { vertical-align: middle; }
.form-grid { max-width: 520px; }

/* Dark mode */
[data-theme="dark"] {
  --bg: #0f172a;
  --white: #1e293b;
  --dark: #f1f5f9;
  --muted: #94a3b8;
  --border: #334155;
  --shadow: 0 12px 32px rgba(0,0,0,.35);
  color: var(--dark);
  background: var(--bg);
}
[data-theme="dark"] body,
[data-theme="dark"] .app-shell,
[data-theme="dark"] .site-header,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .auth-card {
  background: var(--bg);
  color: var(--dark);
}
[data-theme="dark"] .site-header,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dash-card {
  background: var(--white);
  border-color: var(--border);
}
[data-theme="dark"] .data-table th { background: #0f172a; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0f172a;
  border-color: var(--border);
  color: var(--dark);
}
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--primary); border-color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; }
}
@media (max-width: 900px) {
  .landing .hero-light { padding: 72px 0 48px; }
  .hero-image { max-height: 260px; }
}

.hero-image-fallback {
  min-height: 280px;
  background: linear-gradient(135deg, #1461C4 0%, #0d4290 50%, #1e293b 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.hero-image-wrap {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: default;
}
.hero-image-wrap:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.2);
}
.hero-image-wrap:hover .hero-image {
  animation-duration: 10s;
}

/* App shell layout polish */
.app-shell { background: #f4f6fb; min-height: 100vh; }
.app-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 40;
}
.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 64px);
}
.sidebar {
  background: #fff;
  border-right: 1px solid #e5e7eb;
  padding: 20px 14px;
}
.side-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-links a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: #475569;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.side-links a:hover { background: #f1f5f9; color: var(--primary); }
.side-links a.active {
  background: #e8f0fe;
  color: var(--primary);
}
.main-content {
  padding: 28px 28px 48px;
  max-width: 1200px;
}
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.dash-card, .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.price-card.featured {
  border: 2px solid var(--primary);
  position: relative;
}
@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid #e5e7eb; }
  .side-links { flex-direction: row; flex-wrap: wrap; }
}

/* Sidebar logout */
.side-logout {
  margin-top: 16px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: #b91c1c;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}
.side-logout:hover { background: #fef2f2; }

/* Compact subscription banner */
.trial-banner-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: 12px;
}
.trial-banner-compact strong { font-size: 0.95rem; }
.trial-banner-compact #trial-days { font-size: 0.85rem; color: var(--muted); }
.page-head-simple { margin-bottom: 12px; }
.page-head-simple h1 { margin: 4px 0 6px; font-size: clamp(1.5rem, 3vw, 1.9rem); }

/* Compact stat tiles */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.stat-tile {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat-tile-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.stat-tile-primary .dash-card-label { color: rgba(255,255,255,0.85); }
.stat-tile .dash-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.stat-tile .dash-card-value {
  font-size: 1.6rem;
  font-weight: 800;
  margin-top: 6px;
  line-height: 1.1;
}
.card-title { margin: 0 0 12px; font-size: 1.05rem; }
@media (max-width: 900px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Guest / audience page tighter spacing */
.guest-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 16px 40px;
}
.guest-header {
  text-align: center;
  margin-bottom: 16px;
}
.guest-header h1 {
  margin: 6px 0 4px;
  font-size: 1.6rem;
  line-height: 1.2;
}
.guest-header .eyebrow { margin-bottom: 2px; }
.guest-header #dj-bio {
  margin: 4px 0 0;
  font-size: 0.95rem;
}
.guest-card {
  padding: 18px 16px;
}
.guest-card h2 {
  margin: 4px 0 6px;
  font-size: 1.25rem;
}
.guest-card .eyebrow { margin-bottom: 2px; }
.guest-card .muted { margin: 0 0 12px; }
.guest-card .btn { margin-top: 0; }
.guest-card .btn + .btn { margin-top: 10px; }
.copy-tip-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

/* Pending tile: force readable white number on brand blue */
.stat-tile-primary,
.stat-tile-primary .dash-card-label,
.stat-tile-primary .dash-card-value,
.stat-tile-primary #stat-pending {
  color: #ffffff !important;
}
.stat-tile-primary .dash-card-value,
.stat-tile-primary #stat-pending {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  display: block !important;
  margin-top: 8px !important;
}
.stat-tile-primary:hover {
  filter: brightness(1.05);
}


/* Event modal must stay closed until opened */
.modal-backdrop[hidden] {
  display: none !important;
}
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop.is-open {
  display: flex !important;
}

.rank-list { margin: 0; padding-left: 1.2rem; }
.rank-list li { margin: 8px 0; }
.poll-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fff;
}
.poll-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.poll-result-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 12px;
  align-items: center;
  margin: 8px 0;
  font-size: 0.92rem;
}
.poll-bar {
  grid-column: 1 / -1;
  height: 8px;
  background: #eef2ff;
  border-radius: 99px;
  overflow: hidden;
}
.poll-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
}

/* Sidebar always shows full nav; scroll if needed */
.sidebar {
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  position: sticky;
  top: 64px;
  align-self: start;
}
.side-links {
  min-height: min-content;
}
.side-links a {
  white-space: nowrap;
}
/* Prevent iOS input zoom feel: 16px inputs on mobile */
@media (max-width: 720px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  .sidebar {
    max-height: none;
    position: relative;
    top: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
}