/* Life Assistant 3.2.1 — final visual layer. */
:root {
  --la-accent: #5b5ce2;
  --la-accent-2: #8b5cf6;
  --la-warm: #f59e72;
  --la-radius: 18px;
  --la-radius-sm: 12px;
  --la-ease: cubic-bezier(.2,.75,.25,1);
}

html:not([data-theme="dark"]) {
  --bg: #f3f4f8;
  --main-bg: #f7f7fa;
  --card-bg: rgba(255,255,255,.88);
  --card-brd: rgba(30,32,48,.09);
  --text: #20212b;
  --muted: #717383;
  --ac: var(--la-accent);
  --ac-s: rgba(91,92,226,.1);
}

html[data-theme="dark"] {
  --bg: #101116;
  --main-bg: #15161d;
  --card-bg: rgba(31,32,42,.9);
  --card-brd: rgba(255,255,255,.075);
  --text: #f4f3f8;
  --muted: #9d9dab;
  --ac: #9394ff;
  --ac-s: rgba(147,148,255,.13);
}

body {
  background:
    radial-gradient(circle at 78% -10%, rgba(139,92,246,.12), transparent 34rem),
    radial-gradient(circle at 25% 110%, rgba(245,158,114,.09), transparent 30rem),
    var(--main-bg) !important;
  color: var(--text);
  letter-spacing: -.01em;
}

.app-shell { background: transparent !important; }

.desktop-sidebar {
  width: 244px !important;
  padding: 10px !important;
  background: color-mix(in srgb, var(--bg) 86%, transparent) !important;
  border-right: 1px solid var(--card-brd) !important;
  backdrop-filter: blur(24px) saturate(130%);
}

.main-area { margin-left: 244px !important; background: transparent !important; }
.sidebar-head { padding: 10px 9px 14px !important; border: 0 !important; }
.brand { gap: 11px !important; padding: 4px !important; }
.brand-mark {
  width: 38px !important; height: 38px !important; border-radius: 13px !important;
  display: grid; place-items: center; color: white !important;
  background: linear-gradient(145deg, var(--la-accent), var(--la-accent-2)) !important;
  box-shadow: 0 8px 24px rgba(91,92,226,.28);
}
.brand-copy strong { font-size: 15px !important; letter-spacing: -.025em; }
.brand-copy small { color: var(--muted) !important; font-size: 10px !important; letter-spacing: .03em; }

.side-nav { padding: 4px 2px !important; gap: 2px !important; }
.side-nav button {
  min-height: 39px !important; padding: 8px 10px !important; border-radius: 11px !important;
  color: var(--muted) !important; font-weight: 560 !important;
  transition: background .18s var(--la-ease), color .18s ease, transform .18s var(--la-ease) !important;
}
.side-nav button:hover { color: var(--text) !important; background: color-mix(in srgb, var(--card-bg) 68%, transparent) !important; transform: translateX(2px); }
.side-nav button.active, .side-nav button[aria-current="page"] {
  color: var(--text) !important; background: var(--card-bg) !important;
  box-shadow: 0 1px 2px rgba(20,20,35,.06), inset 0 0 0 1px var(--card-brd) !important;
}
.nav-group-label { color: color-mix(in srgb, var(--muted) 75%, transparent) !important; letter-spacing: .09em !important; }
.sidebar-footer { padding: 11px 3px 2px !important; border-top: 1px solid var(--card-brd) !important; }
.primary-action {
  min-height: 43px !important; border: 0 !important; border-radius: 12px !important; color: white !important;
  background: linear-gradient(135deg, var(--la-accent), var(--la-accent-2)) !important;
  box-shadow: 0 9px 22px rgba(91,92,226,.24) !important;
}

.topbar {
  margin: 12px 18px 0 !important; padding: 8px 10px 8px 14px !important; min-height: 58px !important;
  border: 1px solid var(--card-brd) !important; border-radius: 16px !important;
  background: color-mix(in srgb, var(--card-bg) 84%, transparent) !important;
  box-shadow: 0 8px 34px rgba(20,20,35,.055) !important; backdrop-filter: blur(22px) saturate(130%);
}
.greeting-copy strong { font-size: 14px !important; letter-spacing: -.02em; }
.greeting-copy small { color: var(--muted) !important; }
.search-box { border: 1px solid transparent !important; border-radius: 11px !important; background: color-mix(in srgb, var(--bg) 72%, transparent) !important; }
.search-box:focus-within { border-color: color-mix(in srgb, var(--ac) 45%, transparent) !important; box-shadow: 0 0 0 3px var(--ac-s); }
.topbar .icon-button, .theme-icon-button { border-radius: 11px !important; background: transparent !important; }
.topbar .icon-button:hover, .theme-icon-button:hover { background: var(--ac-s) !important; color: var(--ac) !important; }

.content { max-width: 1460px !important; padding: 22px 24px 48px !important; }
.card, .hero-card, .metric-card, .list-card, .today-card, .panel, .modal-card, .bottom-sheet {
  border: 1px solid var(--card-brd) !important; border-radius: var(--la-radius) !important;
  background: var(--card-bg) !important;
  box-shadow: 0 12px 36px rgba(20,20,35,.055) !important;
  backdrop-filter: blur(16px);
}
.button, button { transition: transform .16s var(--la-ease), box-shadow .16s ease, background .16s ease, border-color .16s ease !important; }
.button:hover, .primary-action:hover { transform: translateY(-1px); }
.button.primary, .button:not(.secondary):not(.danger) { border: 0 !important; background: linear-gradient(135deg, var(--la-accent), var(--la-accent-2)) !important; color: white !important; }
input, textarea, select { border-radius: 12px !important; border-color: var(--card-brd) !important; background: color-mix(in srgb, var(--card-bg) 65%, var(--bg)) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--ac) !important; box-shadow: 0 0 0 3px var(--ac-s) !important; }

.device-select-screen, .connection-screen {
  background:
    radial-gradient(circle at 50% -10%, rgba(139,92,246,.23), transparent 34rem),
    radial-gradient(circle at 10% 105%, rgba(245,158,114,.14), transparent 28rem),
    var(--bg) !important;
}
.device-select-card, .connection-card {
  max-width: 720px !important; padding: clamp(28px,5vw,54px) !important;
  border: 1px solid var(--card-brd) !important; border-radius: 28px !important;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent) !important;
  box-shadow: 0 28px 80px rgba(15,16,30,.16) !important; backdrop-filter: blur(28px) saturate(130%);
}
.device-select-logo { width: 58px !important; height: 58px !important; border-radius: 17px !important; box-shadow: 0 13px 32px rgba(91,92,226,.28) !important; }
.device-select-card h1, .connection-card h1 { font-size: clamp(28px,4vw,42px) !important; letter-spacing: -.045em !important; font-weight: 720 !important; }
.device-select-sub { max-width: 440px !important; font-size: 15px !important; margin-bottom: 28px !important; }
.device-select-options { gap: 14px !important; }
.device-option {
  min-height: 180px; padding: 23px 16px !important; border: 1px solid var(--card-brd) !important;
  border-radius: 18px !important; background: color-mix(in srgb, var(--card-bg) 72%, transparent) !important;
}
.device-option:hover { border-color: color-mix(in srgb, var(--ac) 55%, transparent) !important; background: var(--ac-s) !important; transform: translateY(-4px) !important; box-shadow: 0 18px 35px rgba(35,35,60,.1) !important; }
.device-option-ico { width: 58px !important; height: 58px !important; border-radius: 17px !important; background: var(--ac-s) !important; color: var(--ac) !important; }
.device-option-label { font-size: 15px !important; }
.device-option-sub { font-size: 12px !important; }
.connection-card { max-width: 560px !important; }
.connection-logo { background: linear-gradient(145deg, var(--la-accent), var(--la-accent-2)) !important; box-shadow: 0 13px 32px rgba(91,92,226,.25); }

.security-banner, .offline-banner, .update-banner, .sync-status-bar { margin-inline: 24px !important; border-radius: 13px !important; }

@media (max-width: 760px) {
  .main-area { margin-left: 0 !important; }
  .topbar { margin: 8px 10px 0 !important; border-radius: 15px !important; }
  .content { padding: 16px 14px 96px !important; }
  .device-select-screen, .connection-screen { padding: 14px !important; align-items: center !important; }
  .device-select-card, .connection-card { padding: 28px 20px !important; border-radius: 23px !important; }
  .device-select-options { grid-template-columns: 1fr !important; }
  .device-option { min-height: auto; display: grid !important; grid-template-columns: 52px 1fr; text-align: left !important; padding: 15px !important; }
  .device-option-ico { grid-row: 1 / 3; width: 52px !important; height: 52px !important; }
  .device-option-sub br { display: none; }
  .mobile-nav { margin: 0 10px 9px !important; width: calc(100% - 20px) !important; border-radius: 18px !important; border: 1px solid var(--card-brd) !important; background: color-mix(in srgb, var(--card-bg) 90%, transparent) !important; backdrop-filter: blur(24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}