* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.hero-grid { background-image: linear-gradient(rgba(148,163,184,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.12) 1px, transparent 1px); background-size: 36px 36px; }
.glass { background: rgba(255,255,255,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
summary::-webkit-details-marker { display: none; }
::selection { background: #bfdbfe; color: #0f172a; }
@media (prefers-reduced-motion: no-preference) { a, button { transition-duration: 180ms; } }

/* Bootstrap is the component foundation. These design tokens keep the familiar
   iOS-like, soft-surface visual language consistent in public and portal views. */
:root { color-scheme: light; --mi-page:#f7f8fb; --mi-surface:#fff; --mi-text:#0f172a; --mi-muted:#64748b; --mi-line:#e2e8f0; --mi-shadow:0 12px 34px rgba(15,23,42,.08); }
body { background:var(--mi-page); color:var(--mi-text); }
.btn, .form-control, .form-select, .card, .modal-content { border-radius:16px; }
.card { border-color:var(--mi-line); box-shadow:var(--mi-shadow); }
.offcanvas, .modal-content { border-radius:24px 0 0 24px; }
.theme-toggle { cursor:pointer; }
[data-theme="dark"] { color-scheme:dark; --mi-page:#0b1020; --mi-surface:#111827; --mi-text:#e5e7eb; --mi-muted:#94a3b8; --mi-line:#263244; --mi-shadow:0 16px 38px rgba(0,0,0,.28); }
[data-theme="dark"] body, [data-theme="dark"] .bg-\[\#f7f8fb\] { background-color:var(--mi-page)!important; color:var(--mi-text)!important; }
[data-theme="dark"] .bg-white, [data-theme="dark"] .bg-white\/90, [data-theme="dark"] .bg-white\/95, [data-theme="dark"] .glass, [data-theme="dark"] .plan-card { background-color:var(--mi-surface)!important; }
[data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-t, [data-theme="dark"] .border-b { border-color:var(--mi-line)!important; }
[data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-ink { color:var(--mi-text)!important; }
[data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-400 { color:var(--mi-muted)!important; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background:#0f172a!important; border-color:var(--mi-line)!important; color:var(--mi-text)!important; }
[data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100 { background-color:#182235!important; }

/* Complete portal theme coverage for existing utility-based screens. */
[data-theme="dark"] body { background:var(--mi-page)!important; color:var(--mi-text)!important; }
[data-theme="dark"] main, [data-theme="dark"] header, [data-theme="dark"] footer, [data-theme="dark"] aside { color:var(--mi-text); }
[data-theme="dark"] .bg-white\/90, [data-theme="dark"] .bg-white\/95, [data-theme="dark"] .bg-white\/85 { background-color:rgba(17,24,39,.92)!important; }
[data-theme="dark"] .bg-slate-950 { background-color:#020617!important; }
[data-theme="dark"] .bg-slate-900 { background-color:#111827!important; }
[data-theme="dark"] .bg-slate-800 { background-color:#1e293b!important; }
[data-theme="dark"] .bg-slate-700 { background-color:#334155!important; }
[data-theme="dark"] .bg-blue-50 { background-color:rgba(30,58,138,.28)!important; }
[data-theme="dark"] .bg-violet-50 { background-color:rgba(91,33,182,.25)!important; }
[data-theme="dark"] .bg-emerald-50 { background-color:rgba(6,78,59,.30)!important; }
[data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-yellow-50 { background-color:rgba(120,53,15,.28)!important; }
[data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-red-50 { background-color:rgba(127,29,29,.28)!important; }
[data-theme="dark"] .text-slate-950, [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-600 { color:#e5e7eb!important; }
[data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-400 { color:#a8b4c7!important; }
[data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-600 { color:#93c5fd!important; }
[data-theme="dark"] .text-violet-700, [data-theme="dark"] .text-violet-600 { color:#c4b5fd!important; }
[data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-600 { color:#6ee7b7!important; }
[data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-600, [data-theme="dark"] .text-yellow-700 { color:#fcd34d!important; }
[data-theme="dark"] .text-rose-700, [data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-600 { color:#fda4af!important; }
[data-theme="dark"] .border, [data-theme="dark"] .border-t, [data-theme="dark"] .border-r, [data-theme="dark"] .border-b, [data-theme="dark"] .border-l, [data-theme="dark"] .border-slate-50, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300 { border-color:var(--mi-line)!important; }
[data-theme="dark"] .border-blue-100, [data-theme="dark"] .border-blue-200 { border-color:#1e40af!important; }
[data-theme="dark"] .border-violet-100, [data-theme="dark"] .border-violet-200 { border-color:#5b21b6!important; }
[data-theme="dark"] .border-emerald-100, [data-theme="dark"] .border-emerald-200 { border-color:#065f46!important; }
[data-theme="dark"] .border-rose-100, [data-theme="dark"] .border-rose-200 { border-color:#9f1239!important; }
[data-theme="dark"] table, [data-theme="dark"] thead, [data-theme="dark"] tbody, [data-theme="dark"] tr, [data-theme="dark"] td, [data-theme="dark"] th { background-color:transparent!important; color:var(--mi-text)!important; border-color:var(--mi-line)!important; }
[data-theme="dark"] tr:hover > td, [data-theme="dark"] tr:hover > th, [data-theme="dark"] .hover\:bg-slate-50:hover { background-color:#182235!important; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color:#718096!important; opacity:1; }
[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { box-shadow:0 0 0 .22rem rgba(96,165,250,.18)!important; }
[data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-xl, [data-theme="dark"] .shadow-2xl { box-shadow:0 14px 34px rgba(0,0,0,.34)!important; }
[data-theme="dark"] .plan-card, [data-theme="dark"] .pricing-hero + section, [data-theme="dark"] .modal-content { color:var(--mi-text); }
[data-theme="dark"] [class*="bg-\[\#"] { background-color:var(--mi-surface)!important; }
[data-theme="dark"] [class*="text-\[\#"] { color:var(--mi-text)!important; }
[data-theme="dark"] #customer-tabs { background:rgba(17,24,39,.96)!important; box-shadow:0 6px 18px rgba(0,0,0,.30)!important; }
[data-theme="dark"] #customer-profile-hero { background:var(--mi-surface)!important; border-color:var(--mi-line)!important; }
[data-theme="dark"] .plan-card, [data-theme="dark"] .plan-modal form { background:var(--mi-surface)!important; border-color:var(--mi-line)!important; }
[data-theme="dark"] .plan-card ul, [data-theme="dark"] .plan-features, [data-theme="dark"] #live-pricing .plan-features { color:#a8b4c7!important; }
[data-theme="dark"] .plan-card .manage { border-color:var(--mi-line)!important; }
[data-theme="dark"] .pricing-hero { box-shadow:0 16px 34px rgba(0,0,0,.25); }
[data-theme="dark"] details, [data-theme="dark"] summary { color:var(--mi-text); }
[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--mi-line)!important; }
[data-theme="dark"] .ring-slate-100, [data-theme="dark"] .ring-slate-200 { --tw-ring-color:var(--mi-line)!important; }

/* Phone layouts: keep useful content wide and eliminate the oversized gutters. */
@media (max-width: 639px) {
  header [class*="px-5"] { padding-left:14px!important; padding-right:14px!important; }
  main > .mx-auto.max-w-7xl { padding-left:12px!important; padding-right:12px!important; }
  section.px-5, #live-pricing.px-5 { padding-left:14px!important; padding-right:14px!important; }
  .px-5 { padding-left:14px!important; padding-right:14px!important; }
  .p-6 { padding-left:16px!important; padding-right:16px!important; }
  .p-5 { padding-left:14px!important; padding-right:14px!important; }
  .plan-card, .rounded-\[26px\], .rounded-\[30px\], .rounded-\[32px\] { border-radius:20px; }
  .theme-toggle { flex-shrink:0; }
  .credit-label { display:none; }
}

/* Desktop navigation remains fixed; only the menu area scrolls when it is long. */
@media (min-width: 1024px) {
  aside.fixed.inset-y-0 { padding:16px!important; overflow:hidden; }
  aside.fixed.inset-y-0 > nav { flex:1 1 auto; min-height:0; overflow-y:auto; margin-top:24px!important; padding:0 4px 10px 0; scrollbar-width:thin; }
  aside.fixed.inset-y-0 > nav::-webkit-scrollbar { width:6px; }
  aside.fixed.inset-y-0 > nav::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px; }
  [data-theme="dark"] aside.fixed.inset-y-0 > nav::-webkit-scrollbar-thumb { background:#475569; }
  aside.fixed.inset-y-0 > .mt-auto { margin-top:12px!important; }
}