/* ═══════════════════════════════════════════════
   SMART GUEST SERVICE — Light Design System
   Clean, colorful, modern restaurant platform.
   ═══════════════════════════════════════════════ */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',sans-serif;background:#faf9f6;color:#1a1a24;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit}
input,select{font:inherit;color:inherit}

/* ── Typography ── */
h1,h2,h3,h4{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.1}
h1{font-weight:800}
.text-gold{color:#2A9D8F}
.text-accent{color:#2A9D8F;font-weight:600;font-style:italic}.text-warm{color:#E9C46A}.text-spice{color:#F4A261}.text-fire{color:#E76F51}.text-deep{color:#264653}; .font-bold{font-weight:700!important}.text-muted{color:rgba(0,0,0,0.45)}
.text-dim{color:rgba(0,0,0,0.25)}
.text-sm{font-size:0.875rem}
.text-xs{font-size:0.75rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.font-mono{font-family:'JetBrains Mono','Fira Code',monospace}
.tracking-tight{letter-spacing:-0.02em}

/* ── Cards (clean white with shadow) ── */
.glass, .card{background:#fff;border-radius:1.25rem;padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.04)}
.glass-strong{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06),0 8px 32px rgba(0,0,0,0.06);border-radius:1.25rem;padding:2rem}
.card-accent{background:#fff;border:2px solid rgba(42,157,143,0.3);border-radius:1.25rem;padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.04)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:-0.01em;border-radius:9999px;transition:all 0.2s;white-space:nowrap}
.btn-sm{padding:0.5rem 1.25rem;font-size:0.875rem}
.btn-md{padding:0.75rem 1.75rem;font-size:1rem}
.btn-lg{padding:1rem 2.25rem;font-size:1.125rem}
.btn-primary{background:#2A9D8F;color:#fff}
.btn-primary:hover{background:#40b8a8}
.btn-secondary{background:#f0ede6;color:#1a1a24;border:1px solid #e5e0d5}
.btn-secondary:hover{background:#e8e3d6}
.btn-ghost{color:rgba(0,0,0,0.45)}
.btn-ghost:hover{color:#1a1a24}
.btn:disabled{opacity:0.4;cursor:not-allowed}

/* ── Inputs ── */
.input{width:100%;background:#fff;border:1px solid #e5e0d5;border-radius:0.75rem;padding:0.625rem 1rem;font-size:0.875rem;color:#1a1a24;outline:none;transition:border-color 0.2s}
.input:focus{border-color:#2A9D8F;box-shadow:0 0 0 3px rgba(42,157,143,0.1)}
.input::placeholder{color:rgba(0,0,0,0.25)}

/* ── Layout ── */
.container{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.section{padding:8rem 0}

/* ── Navbar ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 1.5rem;background:rgba(250,249,246,0.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,0.04)}
.navbar-inner{max-width:80rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.navbar-brand{font-weight:700;font-size:1.25rem;letter-spacing:-0.02em;color:#1a1a24}
.navbar-links{display:flex;align-items:center;gap:0.75rem}
.nav-hamburger{display:none;font-size:1.5rem;padding:0.25rem 0.5rem;border-radius:0.5rem;color:#1a1a24;position:relative;z-index:101}
.mobile-menu{position:fixed;top:0;left:0;width:85vw;max-width:360px;height:100vh;background:#fff;z-index:200;display:flex;flex-direction:column;padding:1.25rem;box-shadow:4px 0 32px rgba(0,0,0,0.15);transform:translateX(-100%);transition:transform 0.3s ease}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{display:block;padding:0.75rem;border-radius:0.5rem;font-size:1rem;font-weight:500;color:#1a1a24}
.mobile-menu a:active{background:#f0ede6}

/* ── Nav links ── */
.nav-scroll-link{padding:0.35rem 0.85rem;border-radius:9999px;border:1px solid rgba(0,0,0,0.15);transition:all 0.2s;color:rgba(0,0,0,0.6);font-size:0.8125rem;font-weight:500;background:rgba(0,0,0,0.03)}
.nav-scroll-link:hover{background:rgba(42,157,143,0.1);border-color:#2A9D8F;color:#2A9D8F}

/* ── Hero ── */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;min-height:100vh;padding-top:0}
.hero-title{font-size:3.75rem;font-weight:800;line-height:1.05;letter-spacing:-0.03em;color:#1a1a24}
.hero-subtitle{font-size:1.125rem;color:rgba(0,0,0,0.5);max-width:32rem;margin-top:1rem;line-height:1.7}
.hero-actions{display:flex;gap:1rem;margin-top:1.75rem;flex-wrap:wrap}

/* ── Phone Mockup ── */
.phone-mockup{position:relative;width:280px;height:570px;margin:0 auto;border-radius:3rem;border:3px solid #d5d0c7;background:#fff;box-shadow:0 0 60px rgba(0,0,0,0.08);overflow:hidden}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:7rem;height:1.5rem;background:#1a1a24;border-radius:0 0 1rem 1rem;z-index:2}
.phone-screen{position:absolute;inset:3px;border-radius:2.8rem;overflow:hidden;background:#faf9f6;padding:1.25rem;padding-top:2.5rem;display:flex;flex-direction:column}
.phone-logo{text-align:center;margin-bottom:1rem}
.phone-logo-dot{width:2.5rem;height:2.5rem;border-radius:50%;margin:0 auto 0.5rem;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.875rem}
.phone-name{font-size:0.75rem;font-weight:500;color:rgba(0,0,0,0.6)}
.phone-wait{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:1.25rem}
.phone-wait-dot{width:0.5rem;height:0.5rem;border-radius:50%}
.phone-wait-text{font-size:0.625rem;color:rgba(0,0,0,0.5)}
.phone-wait-val{color:#1a1a24;font-weight:600}
.phone-btn{width:100%;padding:0.75rem;border-radius:0.75rem;text-align:center;font-size:0.6875rem;font-weight:500;margin-bottom:0.625rem}
.phone-btn-outline{background:#faf9f6;border:1px solid #e5e0d5;color:rgba(0,0,0,0.6)}
.phone-btn-fill{color:#fff;font-weight:600}
.phone-status{margin-top:1rem;padding:0.625rem;border-radius:0.75rem;text-align:center;border:1px solid}
.phone-status-text{font-size:0.625rem;font-weight:500}

/* ── Pricing Cards ── */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:72rem;margin:0 auto}
.pricing-card{border-radius:1.5rem;padding:2rem;display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.04)}
.pricing-card-featured{background:#fff;border:2px solid #2A9D8F;transform:scale(1.02);box-shadow:0 4px 12px rgba(42,157,143,0.15)}
.pricing-name{font-size:1.125rem;font-weight:600;margin-bottom:0.25rem}
.pricing-tables{font-size:0.875rem;color:rgba(0,0,0,0.4);margin-bottom:1.5rem}
.pricing-amount{font-size:2.5rem;font-weight:700;display:block}
.pricing-period{font-size:0.875rem;color:rgba(0,0,0,0.4)}
.pricing-features{list-style:none;margin:1.5rem 0 2rem;flex:1}
.pricing-features li{font-size:0.875rem;color:rgba(0,0,0,0.55);padding:0.375rem 0;display:flex;align-items:center;gap:0.5rem}
.pricing-features li::before{content:'✓';color:#22c55e;font-size:0.75rem}

/* ── FAQ ── */
.faq-item{background:#fff;border:1px solid #e5e0d5;border-radius:1rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.faq-btn{width:100%;padding:1.25rem 1.5rem;text-align:left;display:flex;align-items:center;justify-content:space-between;font-weight:500;color:#1a1a24}
.faq-btn span:last-child{color:#2A9D8F;font-size:1.25rem;transition:transform 0.25s;flex-shrink:0}
.faq-btn.open span:last-child{transform:rotate(45deg)}
.faq-answer{padding:0 1.5rem 1.25rem;font-size:0.875rem;color:rgba(0,0,0,0.55);line-height:1.7;display:none}
.faq-answer.show{display:block}

/* ── Feature Grid ── */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature-card{background:#fff;padding:1.5rem;border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.feature-icon{font-size:1.5rem;margin-bottom:1rem}
.feature-title{font-weight:600;margin-bottom:0.5rem}
.feature-desc{font-size:0.875rem;color:rgba(0,0,0,0.5);line-height:1.6}

/* ── How It Works ── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step-number{font-size:4.5rem;font-weight:700;color:rgba(0,0,0,0.06);margin-bottom:1rem;text-shadow:0 2px 12px rgba(0,0,0,0.04)}
.step-title{font-size:1.25rem;font-weight:600;margin-bottom:0.75rem}
.step-desc{font-size:0.875rem;color:rgba(0,0,0,0.5);line-height:1.6}

/* ── Testimonials ── */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.testimonial-card{background:#fff;padding:2rem;border-radius:1.5rem;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.04)}
.testimonial-text{font-size:0.875rem;color:rgba(0,0,0,0.55);line-height:1.7;flex:1;font-style:italic}
.testimonial-author{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e5e0d5}
.testimonial-name{font-weight:600;font-size:0.875rem}
.testimonial-role{font-size:0.75rem;color:rgba(0,0,0,0.4);margin-top:0.125rem}

/* ── Dashboard Table ── */
.dash-table{width:100%;border-collapse:collapse;border-radius:1rem;overflow:hidden}
.dash-table th{text-align:left;padding:0.75rem 1rem;font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:rgba(0,0,0,0.35);border-bottom:1px solid #e5e0d5}
.dash-table td{padding:1rem;border-bottom:1px solid #f0ede6;font-size:0.875rem}
.dash-table .status-dot{display:inline-block;width:0.5rem;height:0.5rem;border-radius:50%;margin-right:0.375rem}
.dash-table .badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.6875rem;font-weight:500}
.dash-table .row-new{animation:flash-row 1s ease-in-out infinite}
.dash-table .row-new-green{animation:flash-row-green 1s ease-in-out infinite}

@keyframes flash-row{
  0%,100%{background:transparent}
  50%{background:rgba(239,68,68,0.1)}
}
@keyframes flash-row-green{
  0%,100%{background:transparent}
  50%{background:rgba(34,197,94,0.1)}
}

/* ── Admin Tabs ── */
.tab-bar{display:flex;gap:0.25rem;padding:0.25rem;background:#f0ede6;border-radius:1rem;margin-bottom:2rem}
.tab-btn{flex:1;padding:0.625rem;border-radius:0.75rem;font-size:0.875rem;font-weight:500;text-align:center;transition:all 0.2s}
.tab-btn.active{background:#fff;color:#2A9D8F;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.tab-btn:not(.active){color:rgba(0,0,0,0.4)}
.tab-btn:not(.active):hover{color:rgba(0,0,0,0.7)}

/* ── QR Grid ── */
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.qr-card{background:#fff;padding:1rem;border-radius:1rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.qr-card img{width:100%;aspect-ratio:1;object-fit:contain}
.qr-card-label{font-size:0.75rem;color:rgba(0,0,0,0.5);text-align:center}
.qr-card-table{font-size:1.125rem;font-weight:700;text-align:center}

/* ── Stats Cards ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.stat-card{background:#fff;padding:1.5rem;border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.stat-label{font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.05em;color:rgba(0,0,0,0.35);margin-bottom:0.5rem}
.stat-value{font-size:1.875rem;font-weight:700;line-height:1}
.stat-sub{font-size:0.8125rem;color:rgba(0,0,0,0.45);margin-top:0.25rem}

/* ── Guest View ── */
.guest-wrap{min-height:100vh;background:#faf9f6;display:flex;flex-direction:column;align-items:center;padding:0 1.5rem 2.5rem;max-width:28rem;margin:0 auto}
.guest-header{text-align:center;padding-top:2.5rem;padding-bottom:1.5rem}
.guest-logo-img{height:3.5rem;margin:0 auto 0.75rem;object-fit:contain}
.guest-logo-dot{width:3.5rem;height:3.5rem;border-radius:50%;margin:0 auto 0.75rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;font-weight:700}
.guest-name{font-size:1.25rem;font-weight:600;color:#1a1a24}
.guest-wait{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:2rem}
.guest-wait-dot{width:0.5rem;height:0.5rem;border-radius:50%}
.guest-wait-pulse{animation:pulse-dot 2s ease-in-out infinite}
.guest-wait-text{font-size:0.875rem;font-weight:500;color:rgba(0,0,0,0.5)}
.guest-wait-val{color:#1a1a24;font-weight:600}
.guest-actions{width:100%;display:flex;flex-direction:column;gap:0.75rem;margin-top:1rem}
.guest-action{display:block;width:100%;padding:1.25rem;border-radius:1rem;text-align:center;font-size:1.125rem;font-weight:600;transition:all 0.2s}
.guest-action-outline{background:#fff;border:1px solid #e5e0d5;color:#1a1a24}
.guest-action-outline:hover{background:#f0ede6}
.guest-action-fill{color:#fff}
.guest-status{margin-top:1.25rem;width:100%;padding:1rem;border-radius:0.75rem;text-align:center}
.guest-status-border{border:1px solid rgba(42,157,143,0.3)}
.guest-status-done{background:rgba(42,157,143,0.06)}
.guest-spinner{display:inline-block;width:1.25rem;height:1.25rem;border:2px solid #e5e0d5;border-top-color:#1a1a24;border-radius:50%;animation:spin 0.6s linear infinite;margin-right:0.5rem;vertical-align:middle}

/* ── Dashboard Header ── */
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.dash-title{font-size:1.5rem;font-weight:700}
.dash-subtitle{font-size:0.875rem;color:rgba(0,0,0,0.5);margin-top:0.25rem}
.dash-mute{padding:0.5rem 1rem;border-radius:9999px;font-size:0.875rem;font-weight:500;transition:all 0.2s;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.dash-wait-editor{display:flex;align-items:center;gap:0.75rem;font-size:0.875rem;color:rgba(0,0,0,0.5);margin-bottom:1.5rem}
.dash-wait-val{color:#1a1a24;font-weight:600;cursor:pointer}
.dash-wait-val:hover{opacity:0.7}
.dash-wait-input{width:4rem;background:#fff;border:1px solid #e5e0d5;border-radius:0.5rem;padding:0.25rem 0.5rem;font-size:0.875rem;color:#1a1a24;text-align:center}
.dash-empty{text-align:center;color:rgba(0,0,0,0.2);padding:3rem;font-size:0.875rem}
.dash-refresh{font-size:0.75rem;color:rgba(0,0,0,0.25);text-align:center;margin-top:1rem}

/* ── Auth forms ── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth-card{width:100%;max-width:24rem;padding:2.5rem;border-radius:1.5rem;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06),0 8px 32px rgba(0,0,0,0.06)}
.auth-title{font-size:1.5rem;font-weight:700;margin-bottom:0.25rem}
.auth-sub{font-size:0.875rem;color:rgba(0,0,0,0.5);margin-bottom:2rem}
.auth-field{margin-bottom:1rem}
.auth-field label{display:block;font-size:0.75rem;font-weight:500;color:rgba(0,0,0,0.5);margin-bottom:0.375rem}
.auth-error{font-size:0.8125rem;color:#ef4444;margin-top:0.75rem}

/* ── Animations ── */
@keyframes pulse-dot{0%,100%{box-shadow:0 0 8px rgba(42,157,143,0.3)}50%{box-shadow:0 0 20px rgba(42,157,143,0.6)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade-up{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.75rem)}}
.animate-fade-up{animation:fade-up 0.6s ease-out}
.animate-float{animation:float 6s ease-in-out infinite}
.animate-pulse-glow{animation:pulse-dot 2s ease-in-out infinite}

/* ── Dark Mode ── */
html.dark body{background:#0f0f17!important;color:#e0e0e0!important}
html.dark body.admin-body{background:#0f0f17!important}
html.dark .glass,html.dark .card,html.dark .glass-strong,html.dark .card-accent{background:#1a1a24!important;box-shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.3)}
html.dark .btn-secondary{background:#252530!important;color:#e0e0e0!important;border-color:#2a2a3a!important}
html.dark .btn-secondary:hover{background:#2e2e3a!important}
html.dark .btn-ghost{color:rgba(255,255,255,0.6)!important}
html.dark .btn-ghost:hover{color:#fff!important}
html.dark .input{background:#1a1a2e!important;border-color:#2a2a3a!important;color:#e0e0e0!important}
html.dark .input::placeholder{color:rgba(255,255,255,0.25)!important}
html.dark .input:focus{border-color:#2A9D8F!important;box-shadow:0 0 0 3px rgba(42,157,143,0.15)!important}
html.dark .navbar{background:rgba(15,15,23,0.85)!important;border-bottom-color:rgba(255,255,255,0.06)!important}
html.dark .navbar-brand{color:#e0e0e0!important}
html.dark .nav-scroll-link{background:rgba(255,255,255,0.04)!important;border-color:rgba(255,255,255,0.12)!important;color:rgba(255,255,255,0.6)!important}
html.dark .nav-scroll-link:hover{background:rgba(42,157,143,0.15)!important;border-color:#2A9D8F!important;color:#2A9D8F!important}
html.dark .nav-hamburger{color:#e0e0e0!important}
html.dark .mobile-menu{background:#1a1a24!important;box-shadow:4px 0 32px rgba(0,0,0,0.5)!important}
html.dark .mobile-menu a{color:#e0e0e0!important}
html.dark .mobile-menu a:active{background:#252530!important}
html.dark .hero-title{color:#e0e0e0!important}
html.dark .hero-subtitle{color:rgba(255,255,255,0.5)!important}
html.dark .phone-mockup{background:#0f0f17!important;border-color:#2a2a3a!important}
html.dark .phone-screen{background:#0f0f17!important}
html.dark .phone-name{color:rgba(255,255,255,0.6)!important}
html.dark .phone-wait-text{color:rgba(255,255,255,0.5)!important}
html.dark .phone-wait-val{color:#e0e0e0!important}
html.dark .phone-btn-outline{background:#1a1a24!important;border-color:#2a2a3a!important;color:rgba(255,255,255,0.6)!important}
html.dark .pricing-card{background:#1a1a24!important}
html.dark .pricing-name{color:#e0e0e0!important}
html.dark .pricing-tables{color:rgba(255,255,255,0.4)!important}
html.dark .pricing-amount{color:#e0e0e0!important}
html.dark .pricing-period{color:rgba(255,255,255,0.4)!important}
html.dark .pricing-features li{color:rgba(255,255,255,0.55)!important}
html.dark .faq-item{background:#1a1a24!important;border-color:#2a2a3a!important}
html.dark .faq-btn{color:#e0e0e0!important}
html.dark .faq-answer{color:rgba(255,255,255,0.55)!important}
html.dark .feature-card{background:#1a1a24!important}
html.dark .feature-desc{color:rgba(255,255,255,0.5)!important}
html.dark .step-number{color:rgba(255,255,255,0.06)!important}
html.dark .step-desc{color:rgba(255,255,255,0.5)!important}
html.dark .testimonial-card{background:#1a1a24!important}
html.dark .testimonial-text{color:rgba(255,255,255,0.55)!important}
html.dark .testimonial-author{border-top-color:#2a2a3a!important}
html.dark .testimonial-role{color:rgba(255,255,255,0.4)!important}
html.dark .dash-table th{color:rgba(255,255,255,0.35)!important;border-bottom-color:#2a2a3a!important}
html.dark .dash-table td{border-bottom-color:#252530!important}
html.dark .dash-empty{color:rgba(255,255,255,0.15)!important}
html.dark .dash-refresh{color:rgba(255,255,255,0.2)!important}
html.dark .dash-wait-val{color:#e0e0e0!important}
html.dark .dash-wait-editor{color:rgba(255,255,255,0.5)!important}
html.dark .dash-wait-input{background:#1a1a2e!important;border-color:#2a2a3a!important;color:#e0e0e0!important}
html.dark .dash-mute{background:#1a1a24!important}
html.dark .dash-subtitle{color:rgba(255,255,255,0.5)!important}
html.dark .tab-bar{background:#1e1e2a!important}
html.dark .tab-btn.active{background:#252530!important;color:#2A9D8F!important}
html.dark .tab-btn:not(.active){color:rgba(255,255,255,0.4)!important}
html.dark .tab-btn:not(.active):hover{color:rgba(255,255,255,0.7)!important}
html.dark .qr-card{background:#1a1a24!important}
html.dark .qr-card-label{color:rgba(255,255,255,0.5)!important}
html.dark .qr-card-table{color:#e0e0e0!important}
html.dark .qr-card p:last-of-type{color:rgba(255,255,255,0.35)!important}
html.dark .stat-card{background:#1a1a24!important}
html.dark .stat-label{color:rgba(255,255,255,0.35)!important}
html.dark .stat-sub{color:rgba(255,255,255,0.4)!important}
html.dark .auth-card{background:#1a1a24!important}
html.dark .auth-title{color:#e0e0e0!important}
html.dark .auth-sub{color:rgba(255,255,255,0.5)!important}
html.dark .auth-field label{color:rgba(255,255,255,0.5)!important}
html.dark .guest-wrap{background:#0f0f17!important}
html.dark .guest-name{color:#e0e0e0!important}
html.dark .guest-wait-text{color:rgba(255,255,255,0.5)!important}
html.dark .guest-wait-val{color:#e0e0e0!important}
html.dark .guest-action-outline{background:#1a1a24!important;border-color:#2a2a3a!important;color:#e0e0e0!important}
html.dark .guest-action-outline:hover{background:#252530!important}
html.dark .guest-spinner{border-color:#2a2a3a!important;border-top-color:#e0e0e0!important}
html.dark .g-card{background:#1a1a24!important;border-color:#2a2a3a!important}
html.dark .g-name{color:#e0e0e0!important}
html.dark .g-wait-text{color:rgba(255,255,255,0.55)!important}
html.dark .g-wait-val{color:#e0e0e0!important}
html.dark .g-btn-glass{background:#252530!important;border-color:#2a2a3a!important;color:#e0e0e0!important}
html.dark .g-btn-glass:hover{background:#2e2e3a!important}
html.dark .g-btn-outline{border-color:#2a2a3a!important;color:rgba(255,255,255,0.5)!important}
html.dark .g-btn-outline:hover{border-color:rgba(255,255,255,0.25)!important;color:#e0e0e0!important}
html.dark #demo-card{background:rgba(0,0,0,0.02)!important;border-color:#2a2a3a!important}
html.dark #demo-card button{background:rgba(255,255,255,0.04)!important;border-color:#2a2a3a!important;color:rgba(255,255,255,0.6)!important}
html.dark select.input,html.dark select{background:#1a1a2e!important;color:#e0e0e0!important}
html.dark .text-muted{color:rgba(255,255,255,0.45)!important}
html.dark .text-dim{color:rgba(255,255,255,0.25)!important}
html.dark hr{border-color:rgba(255,255,255,0.08)!important}
html.dark .cookie-banner{background:#1a1a24!important;border-color:#2a2a3a!important;color:#e0e0e0!important}
html.dark .chat-toggle{background:#1a1a24!important;border-color:#2a2a3a!important;color:#e0e0e0!important}
html.dark .chat-window{background:#1a1a24!important;border-color:#2a2a3a!important}
html.dark .chat-header{background:#252530!important;border-bottom-color:#2a2a3a!important}
html.dark .chat-messages{background:#0f0f17!important}
html.dark .chat-input{background:#1a1a2e!important;border-top-color:#2a2a3a!important;color:#e0e0e0!important}
/* Override inline rgba(0,0,0) styles */
html.dark .auth-field button[type="button"]{color:rgba(255,255,255,0.35)!important}
html.dark #welcome-steps{color:rgba(255,255,255,0.6)!important}
html.dark #welcome-steps p{border-top-color:rgba(255,255,255,0.08)!important}
html.dark #welcome-modal>button{color:rgba(255,255,255,0.5)!important}
html.dark #staff-list p{color:rgba(255,255,255,0.4)!important}
html.dark #staff-list span{color:rgba(255,255,255,0.4)!important}
html.dark #staff-list .staff-table-unassigned{color:rgba(255,255,255,0.6)!important}
html.dark #staff-list .btn{color:rgba(255,255,255,0.6)!important;background:rgba(255,255,255,0.06)!important}
html.dark #qr-table-hint{color:rgba(255,255,255,0.15)!important}
html.dark #qr-hint-text{color:rgba(255,255,255,0.2)!important}
html.dark #set-hint{color:rgba(255,255,255,0.2)!important}
html.dark #guest-langs-checks label{color:rgba(255,255,255,0.6)!important}
html.dark .auth-error{color:#ef4444!important}
html.dark #preview-wtext{color:rgba(255,255,255,0.5)!important}
html.dark #set-logo-file-name{color:rgba(255,255,255,0.4)!important}
html.dark #set-menu-file-name{color:rgba(255,255,255,0.4)!important}
html.dark #set-logo-preview span{color:rgba(255,255,255,0.4)!important}
html.dark #set-logo-preview img{border-color:#2a2a3a!important}
html.dark #crop-modal>p{color:rgba(255,255,255,0.4)!important}
html.dark #crop-modal>div span{color:rgba(255,255,255,0.4)!important}
html.dark #staff-list>div{border-color:rgba(255,255,255,0.06)!important}
html.dark #staff-list>div>div{border-top-color:rgba(255,255,255,0.06)!important}
html.dark #theme-preview{background:#0f0f17!important;border-color:#2a2a3a!important}
html.dark #preview-screen{background:#0f0f17!important}
html.dark #preview-name{color:#e0e0e0!important}
html.dark #preview-btn1,html.dark #preview-btn2,html.dark #preview-btn3,html.dark #preview-btn4{background:#252530!important;border-color:#2a2a3a!important;color:#e0e0e0!important}
html.dark #set-guest-theme{background:#1a1a2e!important}
html.dark #crop-viewport{border-color:rgba(42,157,143,0.5)!important}
html.dark #new-staff-role{background:#1a1a2e!important;color:#e0e0e0!important}

/* ── Dark Mode Toggle ── */
.dark-toggle{position:fixed;top:0.75rem;left:0.75rem;z-index:110;width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;border:1px solid #e5e0d5;font-size:1.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all 0.2s}
.dark-toggle:hover{box-shadow:0 4px 16px rgba(0,0,0,0.12);transform:scale(1.05)}
html.dark .dark-toggle{background:#252530;border-color:#2a2a3a;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
html.dark .dark-toggle:hover{box-shadow:0 4px 16px rgba(0,0,0,0.6)}

/* ── Responsive ── */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:3rem}
  .hero-title{font-size:2.5rem}
  .hero-actions{justify-content:center}
  .hero-subtitle{margin-left:auto;margin-right:auto}
  .phone-mockup{margin-top:1rem}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card-featured{transform:none}
  .feature-grid{grid-template-columns:1fr 1fr}
  .steps-grid{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .section{padding:3rem 0}
  .hero-title{font-size:1.75rem;line-height:1.15}
  .hero-subtitle{font-size:1rem;margin-top:1rem}
  .hero-actions{margin-top:1.5rem;flex-direction:column;gap:0.75rem}
  .hero-actions .btn{width:100%}
  .feature-grid{grid-template-columns:1fr;gap:0.75rem}
  .feature-card{padding:1.25rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .phone-mockup{width:220px;height:450px;margin:1rem auto 0}
  .nav-scroll-link{display:none!important}
  .nav-hamburger{display:block}
  .navbar-links .nav-scroll-link{display:none!important}
  .navbar-links{gap:0.35rem}
  .navbar-links .btn-sm{padding:0.35rem 0.65rem;font-size:0.6875rem}
  #lang-toggle{font-size:0.625rem;padding:0.35rem 0.5rem}
  .navbar-brand{font-size:0.9375rem}
  .navbar{padding:0.5rem 0.75rem}
  #demo .container>div{grid-template-columns:1fr!important}
  #demo .container>div{gap:1.5rem!important}
  #requests-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dash-table{min-width:420px}
  .dash-table th,.dash-table td{padding:0.35rem 0.35rem;font-size:0.6875rem}
  .dash-table th{font-size:0.5625rem;letter-spacing:0.02em}
  .dash-table .badge{font-size:0.5625rem;padding:0.08rem 0.3rem}
  .dash-table .btn-sm{padding:0.15rem 0.4rem!important;font-size:0.625rem!important}
  #demo-staff-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #demo-staff-table .dash-table{min-width:380px}
  #setup .container>div:last-child{grid-template-columns:1fr 1fr!important}
  .steps-grid{gap:1.25rem}
  .step-number{font-size:3rem}
  .pricing-card{padding:1.5rem}
  .testimonial-card{padding:1.25rem}
  /* Admin mobile */
  body.admin-body{padding:1rem 0.75rem!important}
  #owner-wrap>div:first-child{flex-direction:column;align-items:flex-start!important;gap:0.5rem}
  #owner-wrap>div:first-child>div{width:100%;justify-content:flex-start;flex-wrap:wrap}
  #owner-wrap>div:first-child h1{font-size:1.25rem}
  .tab-btn{font-size:0.6875rem;padding:0.5rem 0.35rem}
  .qr-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  #crop-viewport{width:240px!important;height:240px!important}
}
@media(max-width:480px){
  #setup .container>div:last-child{grid-template-columns:1fr!important}
  .hero-title{font-size:1.5rem}
  .hero-grid{gap:2rem;min-height:auto;padding-top:4rem;padding-bottom:2rem}
  .container{padding:0 1rem}
  .section{padding:2.5rem 0}
  .phone-mockup{width:200px;height:410px}
  /* Admin tighter */
  .tab-btn{font-size:0.625rem;padding:0.4rem 0.2rem}
  #staff-link{font-size:0.6875rem;padding:0.35rem 0.65rem}
  #crop-viewport{width:200px!important;height:200px!important}
}

/* ── Print (QR codes) ── */
@media print{
  body{background:#fff !important;color:#000 !important}
  .no-print{display:none !important}
  .dark-toggle{display:none !important}
  .qr-grid{grid-template-columns:repeat(4,1fr)}
  .qr-card{border:1px solid #ddd;background:#fff;break-inside:avoid}
  .qr-card-label,.qr-card-table{color:#000 !important}
  .qr-card p:last-of-type,html.dark .qr-card p:last-of-type{color:#000 !important}
}