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

:root {
  --apple-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* LuiOzi brand — solid primary orange from logo */
  --brand-primary: #E8560A;
  --brand-primary-hover: #C94908;

  --color-bg: #ffffff;
  --color-bg-secondary: #f5f5f7;
  --color-bg-elevated: #ffffff;
  --color-text: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary: #86868b;
  --color-link: #E8560A;
  --color-link-hover: #C94908;
  --color-accent: #E8560A;
  --color-accent-hover: #C94908;
  --color-success: #34c759;
  --color-border: #d2d2d7;
  --color-border-light: #e8e8ed;
  --color-nav-bg: rgba(251, 251, 253, 0.8);
  --color-nav-border: rgba(0, 0, 0, 0.08);
  --color-card-bg: #ffffff;
  --color-card-border: #e8e8ed;
  --color-input-bg: #f5f5f7;
  --color-input-border: #d2d2d7;
  --color-input-focus: #E8560A;
  --color-footer-bg: #f5f5f7;
  --color-overlay: rgba(0, 0, 0, 0.03);

  /* App interior design tokens */
  --app-bg: #f2f2f7;
  --app-surface: #ffffff;
  --app-surface-secondary: #f2f2f7;
  --app-surface-tertiary: #e5e5ea;
  --app-border: rgba(60,60,67,0.12);
  --app-separator: rgba(60,60,67,0.2);
  --app-text-1: #1d1d1f;
  --app-text-2: rgba(60,60,67,0.75);
  --app-text-3: rgba(60,60,67,0.45);
  --app-nav-active-bg: rgba(232,86,10,0.08);
  --app-nav-active-text: #E8560A;
  --app-nav-hover-bg: rgba(0,0,0,0.04);
}

.dark {
  --color-bg: #000000;
  --color-bg-secondary: #1d1d1f;
  --color-bg-elevated: #1d1d1f;
  --color-text: #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-tertiary: #86868b;
  --color-link: #FF7A2F;
  --color-link-hover: #FF9050;
  --color-accent: #FF7A2F;
  --color-accent-hover: #FF9050;
  --color-success: #30d158;
  --color-border: #424245;
  --color-border-light: #333336;
  --color-nav-bg: rgba(29, 29, 31, 0.8);
  --color-nav-border: rgba(255, 255, 255, 0.08);
  --color-card-bg: #161617;
  --color-card-border: #333336;
  --color-input-bg: #1d1d1f;
  --color-input-border: #424245;
  --color-input-focus: #FF7A2F;
  --color-footer-bg: #1d1d1f;
  --color-overlay: rgba(255, 255, 255, 0.02);

  /* App interior design tokens — dark */
  --app-bg: #000000;
  --app-surface: #111111;
  --app-surface-secondary: #1c1c1e;
  --app-surface-tertiary: #2c2c2e;
  --app-border: rgba(255,255,255,0.08);
  --app-separator: rgba(255,255,255,0.12);
  --app-text-1: #f5f5f7;
  --app-text-2: rgba(235,235,245,0.6);
  --app-text-3: rgba(235,235,245,0.3);
  --app-nav-active-bg: rgba(255,122,47,0.12);
  --app-nav-active-text: #FF7A2F;
  --app-nav-hover-bg: rgba(255,255,255,0.05);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { font-family: var(--apple-font); }

body.apple-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
}

/* ---- Navigation ---- */
.an { position:fixed;top:0;left:0;right:0;z-index:9999;height:48px;background:var(--color-nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--color-nav-border); }
.an-inner { max-width:980px;margin:0 auto;padding:0 22px;height:48px;display:flex;align-items:center;justify-content:space-between; }
.an-brand { font-size:21px;font-weight:600;color:var(--color-text);text-decoration:none;letter-spacing:-0.04em; }
.an-links { display:flex;gap:28px;align-items:center; }
.an-links a { font-size:12px;font-weight:400;color:var(--color-text-secondary);text-decoration:none;transition:color .3s;white-space:nowrap; }
.an-links a:hover { color:var(--color-text); }
.an-right { display:flex;align-items:center;gap:12px; }
.an-cta { display:inline-flex;align-items:center;font-size:12px;font-weight:400;color:#fff;background:var(--color-accent);padding:4px 14px;border-radius:980px;text-decoration:none;transition:background .3s; }
.an-cta:hover { background:var(--color-accent-hover); }
.an-login { font-size:12px;color:var(--color-link);text-decoration:none;transition:color .3s; }
.an-login:hover { color:var(--color-link-hover); }
.an-theme { background:none;border:none;cursor:pointer;color:var(--color-text-secondary);padding:2px;display:flex;align-items:center;transition:color .3s; }
.an-theme:hover { color:var(--color-text); }
.an-theme svg { width:16px;height:16px; }
.dark .an-theme .t-sun { display:block; } .dark .an-theme .t-moon { display:none; }
.an-theme .t-sun { display:none; } .an-theme .t-moon { display:block; }
.an-mobile { display:none;background:none;border:none;cursor:pointer;color:var(--color-text-secondary);padding:4px; }
.an-mobile svg { width:20px;height:20px; }
.an-mobile-menu { display:none;position:fixed;top:48px;left:0;right:0;background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:12px 22px;z-index:9998; }
.an-mobile-menu.open { display:block; }
.an-mobile-menu a { display:block;padding:10px 0;font-size:17px;color:var(--color-text);text-decoration:none;border-bottom:1px solid var(--color-border-light); }
.an-mobile-menu a:last-child { border-bottom:none; }

/* ---- Hero ---- */
.ah { padding:100px 0 0;text-align:center; }
.ah h1 { font-size:56px;line-height:1.07;font-weight:600;letter-spacing:-0.005em;margin:0; }
.ah-sub { font-size:28px;line-height:1.14;font-weight:400;letter-spacing:.007em;color:var(--color-text-secondary);margin:6px 0 0; }
.ah-cta { display:flex;gap:20px;justify-content:center;margin-top:28px;flex-wrap:wrap;padding:0 22px; }
.ah-note { font-size:14px;color:var(--color-text-tertiary);margin-top:16px; }

/* ---- Logo ---- */
.alogo { display:inline-flex;align-items:center;gap:10px;text-decoration:none; }
.alogo-img { height:30px;width:auto;display:block; }
.alogo-img-lg { height:44px;width:auto;display:block; }
.alogo-name { font-size:17px;font-weight:600;letter-spacing:-0.025em;color:var(--color-text); }
/* Auth card logo */
.aauth-logo { width:52px;height:52px;border-radius:14px;background:none;display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px; }
.aauth-logo img { width:52px;height:52px;object-fit:contain; }

/* ---- Buttons ---- */
.ab { display:inline-flex;align-items:center;gap:6px;font-family:var(--apple-font);font-size:17px;line-height:1.18;font-weight:400;letter-spacing:-.022em;border-radius:980px;padding:12px 24px;transition:all .3s;text-decoration:none;cursor:pointer;border:none; }
.ab-primary { background:var(--color-accent);color:#fff; }
.ab-primary:hover { background:var(--color-accent-hover); }
.ab-secondary { background:transparent;color:var(--color-link);padding:12px 4px; }
.ab-secondary:hover { text-decoration:underline; }
.ab-secondary::after { content:' \203A';font-size:20px;line-height:0; }
.ab-outline { background:transparent;color:var(--color-accent);border:1px solid var(--color-accent); }
.ab-outline:hover { background:var(--color-accent);color:#fff; }
.ab-sm { font-size:14px;padding:8px 18px; }
.ab-full { width:100%;justify-content:center; }

/* ---- Sections ---- */
.as { padding:80px 0;position:relative; }
.as-alt { background:var(--color-bg-secondary); }
.as-title { font-size:48px;line-height:1.08;font-weight:600;letter-spacing:-.003em;text-align:center;margin:0 0 6px; }
.as-subtitle { font-size:21px;line-height:1.38;font-weight:400;letter-spacing:.011em;color:var(--color-text-secondary);text-align:center;max-width:700px;margin:0 auto 50px; }
.ac { max-width:980px;margin:0 auto;padding:0 22px; }
.ac-wide { max-width:1120px;margin:0 auto;padding:0 22px; }

/* ---- Video ---- */
.av { max-width:980px;margin:40px auto 0;padding:0 22px; }
.av-wrap { position:relative;border-radius:20px;overflow:hidden;background:var(--color-bg-secondary);aspect-ratio:16/9; }
.av-wrap video { width:100%;height:100%;object-fit:cover;display:block; }
.av-fallback { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d1d1f 0%,#2d2d30 50%,#1d1d1f 100%); }
html:not(.dark) .av-fallback { background:linear-gradient(135deg,#f5f5f7 0%,#e8e8ed 50%,#f5f5f7 100%); }
.av-fallback span { font-size:21px;color:var(--color-text-tertiary); }

/* ---- Cards ---- */
.acard { background:var(--color-card-bg);border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s;border:1px solid var(--color-card-border); }
.acard:hover { transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.08); }
.dark .acard:hover { box-shadow:0 12px 40px rgba(0,0,0,.3); }
.acard-body { padding:30px; }
.acard h3 { font-size:21px;line-height:1.19;font-weight:600;letter-spacing:.011em;margin:0 0 8px; }
.acard p { font-size:14px;line-height:1.43;color:var(--color-text-secondary);margin:0; }
.acard-icon { width:36px;height:36px;margin-bottom:14px;color:var(--color-accent); }
.acard-link { display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--color-link);text-decoration:none;margin-top:12px;transition:gap .3s; }
.acard-link:hover { gap:8px; }
.acard-link::after { content:'\203A';font-size:18px;line-height:0; }

/* ---- Grid ---- */
.ag-2 { display:grid;grid-template-columns:repeat(2,1fr);gap:20px; }
.ag-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.ag-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }

/* ---- Pricing Card ---- */
.ap-card { background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:18px;padding:40px 24px 32px;text-align:center;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;position:relative; }
.ap-card:hover { transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.08); }
.dark .ap-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.3); }
.ap-card.featured { border-color:var(--color-accent);border-width:2px; }
.ap-badge { position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--color-accent);color:#fff;font-size:12px;font-weight:600;padding:4px 16px;border-radius:980px;white-space:nowrap; }
.ap-name { font-size:21px;font-weight:600;margin:0 0 16px; }
.ap-price { font-size:36px;font-weight:600;letter-spacing:-.02em;margin:0; }
.ap-period { font-size:14px;color:var(--color-text-tertiary);margin:4px 0 0; }
.ap-branch { font-size:12px;color:var(--color-text-tertiary);margin:4px 0 20px; }
.ap-features { list-style:none;padding:0;margin:0 0 24px;text-align:left; }
.ap-features li { display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;color:var(--color-text-secondary); }
.ap-features .check { width:16px;height:16px;color:var(--color-success);flex-shrink:0; }
.ap-days { font-size:12px;color:var(--color-text-tertiary);margin-top:auto;padding-top:8px; }

/* ---- Two Column ---- */
.a2col { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start; }

/* ---- IRT Table ---- */
.at { width:100%;border-collapse:separate;border-spacing:0;font-size:14px; }
.at th { font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary);padding:12px 0;text-align:left;border-bottom:1px solid var(--color-border); }
.at td { padding:12px 0;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border-light); }
.at tr:last-child td { border-bottom:none; }
.at .rate { text-align:right;font-weight:600; }
.at th:last-child { text-align:right; }
.at-note { font-size:12px;color:var(--color-text-tertiary);background:var(--color-bg-secondary);border-radius:12px;padding:12px 16px;margin-top:16px; }

/* ---- Feature List ---- */
.afl { list-style:none;padding:0;margin:16px 0 0; }
.afl li { display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:14px;color:var(--color-text-secondary); }
.afl .check { width:16px;height:16px;color:var(--color-success);flex-shrink:0;margin-top:2px; }

/* ---- Info Box ---- */
.ainfo { background:var(--color-bg-secondary);border-radius:14px;padding:24px;border:1px solid var(--color-border-light); }
.ainfo h4 { font-size:17px;font-weight:600;margin:0 0 8px; }
.ainfo p,.ainfo li { font-size:14px;color:var(--color-text-secondary);line-height:1.5; }
.ainfo-accent { border-color:var(--color-accent);border-left:3px solid var(--color-accent); }

/* ---- Licensing ---- */
.al-price-row { display:flex;justify-content:space-between;padding:10px 0;font-size:14px;border-bottom:1px solid var(--color-border-light); }
.al-price-row:last-child { border-bottom:none; }
.al-price-row span:first-child { color:var(--color-text-secondary); }
.al-price-row span:last-child { font-weight:600; }
.al-total { font-size:28px;font-weight:600;color:var(--color-accent);margin:16px 0 0; }

/* ---- Forms ---- */
.ainput { width:100%;font-family:var(--apple-font);font-size:17px;line-height:1.24;font-weight:400;letter-spacing:-.022em;color:var(--color-text);background:var(--color-input-bg);border:1px solid var(--color-input-border);border-radius:12px;padding:12px 16px;outline:none;transition:border-color .3s,box-shadow .3s;box-sizing:border-box; }
.ainput::placeholder { color:var(--color-text-tertiary); }
.ainput:focus { border-color:var(--color-input-focus);box-shadow:0 0 0 4px rgba(0,113,227,.12); }
.dark .ainput:focus { box-shadow:0 0 0 4px rgba(41,151,255,.12); }
.alabel { display:block;font-size:14px;font-weight:500;color:var(--color-text-secondary);margin-bottom:6px;letter-spacing:-.01em; }
.aform-group { margin-bottom:16px; }
.aform-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.aform-section { font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-tertiary);padding-bottom:8px;margin-bottom:16px;border-bottom:1px solid var(--color-border-light); }
.aform-note { font-size:14px;color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:10px; }
.aform-note svg { width:20px;height:20px;color:var(--color-success);flex-shrink:0; }
.aform-link { text-align:center;font-size:14px;color:var(--color-text-tertiary);padding-top:20px;margin-top:20px;border-top:1px solid var(--color-border-light); }
.aform-link a { color:var(--color-link);text-decoration:none;font-weight:500; }
.aform-link a:hover { text-decoration:underline; }

/* ---- Auth Card ---- */
.aauth { background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:20px;padding:40px;box-shadow:0 4px 24px rgba(0,0,0,.04);max-width:400px;margin:0 auto; }
.dark .aauth { box-shadow:0 4px 24px rgba(0,0,0,.2); }
.aauth.wide { max-width:520px; }
.aauth-header { text-align:center;margin-bottom:28px; }
.aauth-header h1 { font-size:28px;font-weight:600;margin:12px 0 4px; }
.aauth-header p { font-size:14px;color:var(--color-text-tertiary);margin:0; }
.aauth-logo-fallback { width:52px;height:52px;border-radius:14px;background:#E8560A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:700; }

/* ---- Footer ---- */
.af { background:var(--color-bg-secondary);padding:16px 0;border-top:1px solid var(--color-border); }
.af-inner { max-width:980px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;align-items:center; }
.af p { font-size:12px;color:var(--color-text-tertiary);margin:0; }

/* ---- WhatsApp ---- */
.awa { position:fixed;bottom:24px;right:24px;z-index:9998;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(37,211,102,.3);text-decoration:none;transition:transform .3s,box-shadow .3s; }
.awa:hover { transform:scale(1.08);box-shadow:0 6px 20px rgba(37,211,102,.4); }
.awa svg { width:26px;height:26px; }

/* ---- Reveal Animation ---- */
.ar { opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease; }
.ar.visible { opacity:1;transform:translateY(0); }

/* ---- Alert Messages ---- */
.aalert { border-radius:12px;padding:14px 16px;font-size:14px;display:flex;align-items:flex-start;gap:10px;margin-bottom:20px; }
.aalert-success { background:rgba(52,199,89,.08);color:#34c759;border:1px solid rgba(52,199,89,.2); }
.aalert-error { background:rgba(255,59,48,.08);color:#ff3b30;border:1px solid rgba(255,59,48,.2); }
.dark .aalert-success { background:rgba(48,209,88,.1);color:#30d158;border-color:rgba(48,209,88,.2); }
.dark .aalert-error { background:rgba(255,69,58,.1);color:#ff453a;border-color:rgba(255,69,58,.2); }
.aalert svg { width:18px;height:18px;flex-shrink:0;margin-top:1px; }

/* ---- PWA Banner ---- */
.apwa { display:none;position:fixed;bottom:0;left:0;right:0;z-index:10000;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);padding:12px 22px;box-shadow:0 -4px 20px rgba(0,0,0,.06); }
.apwa.show { display:block; }
.apwa-inner { max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.apwa-info { display:flex;align-items:center;gap:12px;font-size:14px; }
.apwa-info strong { color:var(--color-text); }
.apwa-info span { color:var(--color-text-tertiary);font-size:12px; }
.apwa-actions { display:flex;gap:8px; }

/* ---- App interior brand overrides (Tailwind bg-brand / text-brand) ---- */
/* Overrides the blue 'brand' from the pre-built Tailwind bundle with LuiOzi orange */
.bg-brand { background-color:#E8560A !important; }
.text-brand { color:#E8560A !important; }
.border-brand { border-color:#E8560A !important; }
.shadow-brand\/25,.shadow-brand\/30,.shadow-brand\/40 { box-shadow:0 4px 14px rgba(232,86,10,.2) !important; }
.hover\:bg-brand\/90:hover { background-color:#C94908 !important; }
.bg-brand\/10 { background-color:rgba(232,86,10,.08) !important; }
.bg-brand\/20 { background-color:rgba(232,86,10,.14) !important; }
.border-brand\/30 { border-color:rgba(232,86,10,.3) !important; }
.border-brand\/40 { border-color:rgba(232,86,10,.4) !important; }
.border-brand\/50 { border-color:rgba(232,86,10,.5) !important; }
.focus\:ring-brand\/50:focus { --tw-ring-color:rgba(232,86,10,.5) !important; }
.focus\:border-brand\/50:focus { border-color:rgba(232,86,10,.5) !important; }
.hover\:border-brand\/50:hover { border-color:rgba(232,86,10,.5) !important; }
.text-brand-light { color:#FF7A2F !important; }
.hover\:text-brand:hover { color:#E8560A !important; }
.hover\:text-brand-light:hover { color:#FF7A2F !important; }
.dark .text-brand { color:#FF7A2F !important; }
.dark .bg-brand { background-color:#FF7A2F !important; }
.dark .hover\:bg-brand\/90:hover { background-color:#FF9050 !important; }

/* ---- Responsive ---- */
@media(max-width:768px){
  .an-links { display:none; }
  .an-mobile { display:flex; }
  .ah h1 { font-size:32px; }
  .ah-sub { font-size:19px; }
  .as { padding:56px 0; }
  .as-title { font-size:28px; }
  .as-subtitle { font-size:17px;margin-bottom:32px; }
  .ag-2,.ag-3,.ag-4 { grid-template-columns:1fr; }
  .a2col { grid-template-columns:1fr;gap:32px; }
  .aauth { padding:24px;margin:0 16px; }
  .aform-grid { grid-template-columns:1fr; }
  .af-inner { flex-direction:column;gap:4px;text-align:center; }
  .ap-card { padding:28px 20px 24px; }
  .apwa-inner { flex-direction:column;text-align:center; }
}
@media(min-width:769px) and (max-width:1023px){
  .ag-3,.ag-4 { grid-template-columns:repeat(2,1fr); }
}
@media(min-width:769px){
  .an-mobile { display:none; }
  .an-mobile-menu { display:none!important; }
}

/* =============================================================
   APP INTERIOR — COMPREHENSIVE DESIGN SYSTEM
   
   LIGHT MODE PALETTE (Apple-inspired):
     Page bg    : #f2f2f7  (iOS system background)
     Card/Panel : #ffffff  (primary surface)
     Secondary  : #f9fafb  (filter bars, alt rows)
     Tertiary   : #f1f5f9  (subtle hover, tags)
     Text-1     : #1d1d1f  (primary)
     Text-2     : #48484a  (secondary)
     Text-3     : #8e8e93  (tertiary/placeholder)
     Border     : rgba(0,0,0,0.1)  (subtle)
     Accent     : #E8560A  (brand orange)
   
   DARK MODE PALETTE (already handled by Tailwind dark: variants):
     Page bg    : #000000 / #0c0c0e
     Card/Panel : #1c1c1e
     Secondary  : #2c2c2e
     Text-1     : #f5f5f7
     Border     : rgba(255,255,255,0.1)
   
   Views were built dark-first without dark: prefixes.
   These rules normalise them in light mode without touching
   view files. Scoped to <main> to avoid header/sidebar.
   ============================================================= */

/* ---- App layout dark mode — reinforce structural elements ---- */
/* .lu-header / .lu-sidebar handle this natively; these rules cover plain Tailwind elements */
.dark header.fixed,
.dark header[class*="fixed"] { background-color: var(--app-surface) !important; border-bottom-color: var(--app-border) !important; }
.dark footer.fixed,
.dark footer[class*="fixed"] { background-color: var(--app-surface) !important; border-top-color: var(--app-border) !important; }
.dark aside.fixed { background-color: var(--app-surface-secondary) !important; border-right-color: var(--app-border) !important; }

/* ---- App interior global baseline (light mode) ---- */
html:not(.dark) body { background-color: var(--app-bg); }
html:not(.dark) main { background-color: var(--app-bg); }

/* ---- SURFACES: dark → light ----
   Hierarchy: slate-900 → #f9fafb (secondary surface)
              slate-800 → #ffffff (primary/card surface)
              slate-700 → #f1f5f9 (tertiary/tag surface)
   Modal backdrop /75 is excluded — it stays semi-opaque dark.
   /70 and /80 are overridden since panels use them too.        */

html:not(.dark) main .bg-slate-950,
html:not(.dark) main .bg-slate-900,
html:not(.dark) main .bg-slate-900\/30,
html:not(.dark) main .bg-slate-900\/50,
html:not(.dark) main .bg-slate-900\/70,
html:not(.dark) main .bg-slate-900\/80,
html:not(.dark) main .bg-slate-900\/90,
html:not(.dark) main .bg-gray-900 {
  background-color: #f9fafb !important;
}

html:not(.dark) main .bg-slate-800,
html:not(.dark) main .bg-slate-800\/30,
html:not(.dark) main .bg-slate-800\/40,
html:not(.dark) main .bg-slate-800\/50,
html:not(.dark) main .bg-slate-800\/60,
html:not(.dark) main .bg-slate-800\/70,
html:not(.dark) main .bg-slate-800\/80,
html:not(.dark) main .bg-slate-800\/95,
html:not(.dark) main .bg-gray-800 {
  background-color: var(--app-surface) !important;
}

html:not(.dark) main .bg-slate-700,
html:not(.dark) main .bg-slate-700\/20,
html:not(.dark) main .bg-slate-700\/30,
html:not(.dark) main .bg-slate-700\/50,
html:not(.dark) main .bg-gray-700 {
  background-color: var(--app-surface-tertiary) !important;
}

/* Protect true modal backdrop: /75 stays semi-opaque dark */
html:not(.dark) main .bg-slate-900\/75 {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

/* ---- TEXT: light-on-dark → dark-on-light ---- */
html:not(.dark) main .text-slate-100 { color: var(--app-text-1) !important; }
html:not(.dark) main .text-slate-200 { color: #3a3a3c !important; }
html:not(.dark) main .text-slate-300 { color: #48484a !important; }
/* slate-400 (#94a3b8) is naturally muted, keep or slightly darken */
html:not(.dark) main .text-gray-100 { color: var(--app-text-1) !important; }
html:not(.dark) main .text-gray-200 { color: #3a3a3c !important; }
html:not(.dark) main .text-gray-300 { color: #48484a !important; }

/* ---- STATUS / SEMANTIC COLORS: 300-400 → darken for white bg ---- */
html:not(.dark) main .text-green-300,
html:not(.dark) main .text-green-400   { color: #16a34a !important; }
html:not(.dark) main .text-emerald-300,
html:not(.dark) main .text-emerald-400 { color: #059669 !important; }
html:not(.dark) main .text-teal-300,
html:not(.dark) main .text-teal-400    { color: #0d9488 !important; }
html:not(.dark) main .text-yellow-300,
html:not(.dark) main .text-yellow-400  { color: #b45309 !important; }
html:not(.dark) main .text-amber-300,
html:not(.dark) main .text-amber-400   { color: #b45309 !important; }
html:not(.dark) main .text-orange-300,
html:not(.dark) main .text-orange-400  { color: #c2410c !important; }
html:not(.dark) main .text-red-300,
html:not(.dark) main .text-red-400     { color: #dc2626 !important; }
html:not(.dark) main .text-rose-300,
html:not(.dark) main .text-rose-400    { color: #e11d48 !important; }
html:not(.dark) main .text-blue-300,
html:not(.dark) main .text-blue-400    { color: #2563eb !important; }
html:not(.dark) main .text-indigo-300,
html:not(.dark) main .text-indigo-400  { color: #4f46e5 !important; }
html:not(.dark) main .text-violet-300,
html:not(.dark) main .text-violet-400  { color: #7c3aed !important; }
html:not(.dark) main .text-purple-300,
html:not(.dark) main .text-purple-400  { color: #7c3aed !important; }
html:not(.dark) main .text-pink-300,
html:not(.dark) main .text-pink-400    { color: #db2777 !important; }
html:not(.dark) main .text-cyan-300,
html:not(.dark) main .text-cyan-400    { color: #0891b2 !important; }

/* ---- BORDERS: dark → subtle light ---- */
html:not(.dark) main .border-slate-600,
html:not(.dark) main .border-slate-700,
html:not(.dark) main .border-slate-800,
html:not(.dark) main .border-gray-600,
html:not(.dark) main .border-gray-700,
html:not(.dark) main .border-gray-800 {
  border-color: #e5e7eb !important;
}
html:not(.dark) main .border-slate-700\/30,
html:not(.dark) main .border-slate-700\/50,
html:not(.dark) main .border-slate-800\/30,
html:not(.dark) main .border-slate-800\/50 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---- TABLE DIVIDERS ---- */
html:not(.dark) main .divide-slate-600 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-gray-700  > :not([hidden]) ~ :not([hidden]),
html:not(.dark) main .divide-gray-800  > :not([hidden]) ~ :not([hidden]) {
  border-color: #f0f0f5 !important;
}

/* ---- HOVER STATES: dark hover → soft light hover ---- */
html:not(.dark) main .hover\:bg-slate-800:hover,
html:not(.dark) main .hover\:bg-slate-700:hover,
html:not(.dark) main .hover\:bg-slate-600:hover,
html:not(.dark) main .hover\:bg-gray-800:hover,
html:not(.dark) main .hover\:bg-gray-700:hover {
  background-color: var(--app-bg) !important;
}
html:not(.dark) main .hover\:bg-slate-800\/30:hover,
html:not(.dark) main .hover\:bg-slate-800\/50:hover,
html:not(.dark) main .hover\:bg-slate-800\/60:hover,
html:not(.dark) main .hover\:bg-slate-700\/30:hover,
html:not(.dark) main .hover\:bg-slate-700\/50:hover,
html:not(.dark) main .hover\:bg-slate-800\/70:hover,
html:not(.dark) main .hover\:bg-gray-700\/30:hover {
  background-color: var(--app-bg) !important;
}
/* Table row hover */
html:not(.dark) main tr:hover > td {
  background-color: var(--app-nav-hover-bg) !important;
}

/* ---- FORM INPUTS: dark inputs → clean light Apple inputs ---- */
html:not(.dark) main input[class*="bg-slate-"],
html:not(.dark) main select[class*="bg-slate-"],
html:not(.dark) main textarea[class*="bg-slate-"],
html:not(.dark) main input[class*="bg-gray-"],
html:not(.dark) main select[class*="bg-gray-"],
html:not(.dark) main textarea[class*="bg-gray-"] {
  background-color: var(--app-surface) !important;
  color: var(--app-text-1) !important;
  border-color: #d1d5db !important;
}
html:not(.dark) main input[class*="bg-slate-"]:focus,
html:not(.dark) main select[class*="bg-slate-"]:focus,
html:not(.dark) main textarea[class*="bg-slate-"]:focus {
  border-color: var(--app-nav-active-text) !important;
  box-shadow: 0 0 0 3px var(--app-nav-active-bg) !important;
}
/* Also covers inputs without explicit bg but inside dark containers */
html:not(.dark) main input[class*="text-slate-1"],
html:not(.dark) main input[class*="text-slate-2"],
html:not(.dark) main select[class*="text-slate-1"],
html:not(.dark) main select[class*="text-slate-2"] {
  color: var(--app-text-1) !important;
}

/* ---- TABLE HEADERS: dark thead → light Apple thead ---- */
html:not(.dark) main thead { background-color: var(--app-surface-secondary) !important; }
html:not(.dark) main thead tr,
html:not(.dark) main thead th { background-color: transparent !important; }
html:not(.dark) main thead th {
  color: #6b7280 !important;
  border-bottom-color: #e5e7eb !important;
}

/* ---- ROUNDED PANELS: add Apple-style card shadow in light mode ---- */
html:not(.dark) main .rounded-xl[class*="bg-slate-"],
html:not(.dark) main .rounded-2xl[class*="bg-slate-"],
html:not(.dark) main .rounded-lg[class*="bg-slate-"] {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.03) !important;
}

/* ---- MODAL / POPUP PANELS (inside <main> DOM even if visually fixed) ---- */
html:not(.dark) main [x-show] .bg-slate-900,
html:not(.dark) main [x-show] .bg-slate-800 {
  background-color: var(--app-surface) !important;
}
/* Modal full overlay panels */
html:not(.dark) .bg-slate-800\/95,
html:not(.dark) .bg-slate-900\/95 {
  background-color: rgba(255,255,255,0.97) !important;
}
/* Drawer / sidebar modals with fixed/absolute */
html:not(.dark) .fixed .bg-slate-900,
html:not(.dark) .absolute .bg-slate-900,
html:not(.dark) .fixed .bg-slate-800,
html:not(.dark) .absolute .bg-slate-800 {
  background-color: var(--app-surface) !important;
}
html:not(.dark) .fixed .border-slate-700,
html:not(.dark) .fixed .border-slate-800,
html:not(.dark) .absolute .border-slate-700,
html:not(.dark) .absolute .border-slate-800 {
  border-color: #e5e7eb !important;
}
html:not(.dark) .fixed .text-slate-100,
html:not(.dark) .fixed .text-slate-200,
html:not(.dark) .fixed .text-slate-300,
html:not(.dark) .absolute .text-slate-100,
html:not(.dark) .absolute .text-slate-200,
html:not(.dark) .absolute .text-slate-300 {
  color: #1d1d1f !important;
}

/* ---- DROPDOWN MENUS (positioned overlays with dark bg) ---- */
html:not(.dark) [role="menu"][class*="bg-slate-"],
html:not(.dark) [role="listbox"][class*="bg-slate-"],
html:not(.dark) [x-ref="panel"][class*="bg-slate-"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* ---- PROGRESS BARS, BADGES, RING overlays ---- */
html:not(.dark) main .ring-slate-700,
html:not(.dark) main .ring-slate-800 { --tw-ring-color: #e5e7eb !important; }

/* ---- SCROLLBAR (light mode) ---- */
html:not(.dark) ::-webkit-scrollbar { width: 6px; height: 6px; }
html:not(.dark) ::-webkit-scrollbar-track { background: var(--app-bg); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 3px; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #8e8e93; }

/* =============================================================
   APP INTERIOR — COMPONENT CLASSES (.lu-*)
   ============================================================= */

/* ---- Header ---- */
.lu-header {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* ---- Sidebar ---- */
.lu-sidebar {
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
}

/* ---- Nav items ---- */
.lu-nav-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--app-text-2);
  text-decoration: none;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lu-nav-item:hover {
  background: var(--app-nav-hover-bg);
  color: var(--app-text-1);
}
.lu-nav-item.is-active {
  background: var(--app-nav-active-bg);
  color: var(--app-nav-active-text);
  border-left-color: var(--app-nav-active-text);
}
.lu-nav-item.is-active .lu-nav-icon { color: var(--app-nav-active-text); }

/* Submenu items get a tighter indent feel */
.lu-nav-subitem {
  padding: 7px 10px;
  font-size: 13px;
}

/* ---- Nav group label ---- */
.lu-nav-group-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-3);
  padding: 12px 14px 4px;
}

/* ---- Nav icon ---- */
.lu-nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--app-text-3);
  transition: color 0.15s ease;
}
.lu-nav-item:hover .lu-nav-icon { color: var(--app-text-2); }

/* ---- Flash alerts ---- */
.lu-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 16px;
}
.lu-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.lu-alert-success {
  background: rgba(52,199,89,0.10);
  color: #1a7f37;
  border: 1px solid rgba(52,199,89,0.25);
}
.lu-alert-error {
  background: rgba(255,59,48,0.08);
  color: #c0392b;
  border: 1px solid rgba(255,59,48,0.20);
}
.lu-alert-warning {
  background: rgba(255,159,10,0.10);
  color: #b45309;
  border: 1px solid rgba(255,159,10,0.25);
}

.dark .lu-alert-success {
  background: rgba(48,209,88,0.10);
  color: #30d158;
  border-color: rgba(48,209,88,0.20);
}
.dark .lu-alert-error {
  background: rgba(255,69,58,0.10);
  color: #ff453a;
  border-color: rgba(255,69,58,0.20);
}
.dark .lu-alert-warning {
  background: rgba(255,159,10,0.12);
  color: #ffd60a;
  border-color: rgba(255,159,10,0.25);
}

/* ---- Sidebar desktop collapse toggle ---- */
.lu-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--app-border);
  background: transparent;
  color: var(--app-text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.lu-sidebar-toggle:hover { background: var(--app-nav-hover-bg); color: var(--app-text-1); }
.lu-sidebar-toggle svg { width: 14px; height: 14px; transition: transform 0.25s ease; }

/* Smooth transition for sidebar width and main padding */
#desktop-sidebar { transition: width 0.25s cubic-bezier(0.4,0,0.2,1); }
#main-content    { transition: padding-left 0.25s cubic-bezier(0.4,0,0.2,1); }

/* Collapsed state — triggered by html.sidebar-collapsed (set in <head>) */
html.sidebar-collapsed #desktop-sidebar { width: 56px !important; }
html.sidebar-collapsed #desktop-sidebar .lu-nav-label,
html.sidebar-collapsed #desktop-sidebar .lu-nav-chevron,
html.sidebar-collapsed #desktop-sidebar .lu-submenu-wrapper,
html.sidebar-collapsed #desktop-sidebar .lu-sidebar-footer-info { display: none !important; }
html.sidebar-collapsed #desktop-sidebar .lu-nav-item {
  justify-content: center !important;
  padding: 10px !important;
  gap: 0 !important;
}
html.sidebar-collapsed #desktop-sidebar .lu-nav-icon { width: 22px; height: 22px; }
html.sidebar-collapsed #desktop-sidebar .lu-sidebar-toggle { margin: 0 auto; }
html.sidebar-collapsed #desktop-sidebar .lu-sidebar-toggle svg { transform: rotate(180deg); }
@media (min-width: 1024px) {
  html.sidebar-collapsed #main-content { padding-left: 56px !important; }
}

/* ---- Mobile drawer backdrop ---- */
.lu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}