/* NABU 5.1 — soft light, distinct materials, the same amount of information. */
:root {
  --bg:#f4f6fb; --panel:#ffffff; --soft:#e9edf5; --field:#f7f9fc;
  --line:#dce3ee; --text:#172236; --muted:#59677c;
  --accent:#365ec4; --accent2:#365ec4; --accent-soft:#e9eefc;
  --green:#2f7b65; --red:#a2414b; --tile-on:#ffffff; --tile-text:#172236;
  --shadow:0 10px 28px #2639580b,0 2px 5px #26395805;
  --overlay:#17233870; --surface:linear-gradient(150deg,#ffffffeb,#f8faffed);
  --off-surface:linear-gradient(145deg,#e8edf5ed,#e2e8f1f0);
  --edge:#ffffffde; --icon-bg:#e4eaf5; --icon-ink:#4f6485;
}
:root[data-theme=dark] {
  --bg:#101725; --panel:#1a2435; --soft:#243045; --field:#151e2e;
  --line:#35425b; --text:#eef2fc; --muted:#b0bdd1;
  --accent:#b8cdff; --accent2:#b8cdff; --accent-soft:#2a3854;
  --green:#94d5be; --red:#f2a7b0; --tile-on:#f4f7ff; --tile-text:#172236;
  --shadow:0 12px 32px #060c1724,0 2px 6px #03071116;
  --overlay:#050b18a8; --surface:linear-gradient(145deg,#202b3ef5,#172132f5);
  --off-surface:linear-gradient(145deg,#222e42f5,#1b2639fa);
  --edge:#53638042; --icon-bg:#303e57; --icon-ink:#bacded;
}
body {
  background:radial-gradient(ellipse at 83% 1%,#dfe8ff9c,transparent 45%),
             radial-gradient(ellipse at 28% 78%,#e8e1f26b,transparent 52%),var(--bg);
  background-attachment:fixed; letter-spacing:-.012em;
}
html[data-theme=dark] body {
  background:radial-gradient(ellipse at 85% 0%,#283c604f,transparent 48%),
             radial-gradient(ellipse at 14% 95%,#31304c3d,transparent 50%),var(--bg);
  background-attachment:fixed;
}
button { border-radius:15px; transition:transform .16s ease,background .18s ease,box-shadow .18s ease; }
button:hover:not(:disabled) { filter:none; }
input,select,textarea { border-radius:14px; }
h1,h2,h3 { letter-spacing:-.045em; }
.topbar h1 { font-weight:650; }
.topActions #assistantToggle { border-color:var(--edge); box-shadow:var(--shadow); }
.topActions .iconbtn { background:color-mix(in srgb,var(--panel) 65%,transparent); }
.card,.glass,.cleanPanel,.autonomyPane,.managerCard,.settingCard,.connectionCard,.voiceOverview {
  background:var(--surface); border-color:var(--edge); box-shadow:var(--shadow);
}
.homeFeed { background:transparent; border:0; box-shadow:none; }
.homeHero h2 { font-weight:650; letter-spacing:-.055em; }
.homeDate { letter-spacing:0; }
.presenceCard { background:color-mix(in srgb,var(--panel) 75%,transparent); padding:8px 12px; border-radius:24px; box-shadow:0 2px 7px #14283e05; }
.autonomyPeek { padding-right:4px; }
.featureCard { background:var(--surface); border:1px solid var(--edge); border-radius:28px; box-shadow:var(--shadow); }
.weatherCard { background:linear-gradient(120deg,#ffffffed,#eef4ffef); }
html[data-theme=dark] .weatherCard { background:linear-gradient(130deg,#263550f0,#192438f5); }
.weatherReading>strong,.climateReadings>strong { font-weight:450; letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
.weatherSvg .sun,.weatherSvg .sunRay { fill:#7195df; stroke:#7195df; }
.forecastGrid { border-color:color-mix(in srgb,var(--muted) 15%,transparent); }
.zoneChips { gap:8px; padding:6px 2px; }
.spacePill { background:color-mix(in srgb,var(--panel) 50%,transparent); border:1px solid transparent; padding:10px 18px; min-height:41px; }
.spacePill.active { background:var(--text); color:var(--bg); box-shadow:0 4px 12px #20345712; }
.homeDeviceDeck,.physicalDeviceGrid { gap:16px; }
.homeTile { border:1px solid var(--edge); border-radius:28px; background:var(--off-surface); box-shadow:inset 0 1px 0 var(--edge),0 4px 14px #22334e05; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.homeTile.active { background:var(--tile-on); border-color:var(--edge); box-shadow:0 8px 24px #1e355512,inset 0 1px 0 #fff; }
.homeTile:hover { transform:translateY(-3px); box-shadow:0 12px 26px #1b315314; }
.homeTile:focus-within { outline:3px solid var(--accent); outline-offset:3px; }
.homePhysicalCard { height:182px; border-radius:28px; padding:22px; gap:5px; }
.homePhysicalCard:focus-visible { outline:0; }
.homePhysicalIcon { display:grid; place-items:center; width:46px; height:46px; border-radius:16px; color:var(--icon-ink); background:var(--icon-bg); box-shadow:inset 0 1px 0 var(--edge); }
.homePhysicalIcon .svgIcon,.homePhysicalIcon svg { width:25px; height:25px; }
.homeTile.active .homePhysicalIcon { color:#365ec4; background:#eaf0ff; }
.homeTile.active.type-light .homePhysicalIcon { color:#647ac5; background:#eef0ff; }
.homeTile.active.type-tv .homePhysicalIcon,.homeTile.active.type-media .homePhysicalIcon { color:#6473af; background:#edf0fa; }
.homeTile.active.type-vacuum .homePhysicalIcon { color:#7561a6; background:#f1edf9; }
.homeTile.active.type-fan .homePhysicalIcon { color:#367e8b; background:#e8f4f5; }
.homePhysicalName { font-size:15px; font-weight:620; letter-spacing:-.022em; padding-right:5px; }
.homePhysicalState { font-size:12px; letter-spacing:-.01em; padding-right:24px; }
.homeTile.active .homePhysicalState { color:#5c6a80; }
.tileActionGlyph { position:absolute; top:22px; right:20px; width:27px; height:27px; display:grid; place-items:center; color:var(--muted); opacity:.7; }
.tileActionGlyph .svgIcon,.tileActionGlyph svg { width:19px; height:19px; }
.homeTile.active .tileActionGlyph { color:#365ec4; opacity:1; }
.tileDetails { width:36px; height:36px; right:9px; bottom:10px; color:var(--muted); opacity:.76; }
.tileDetails:hover { background:color-mix(in srgb,var(--muted) 9%,transparent); opacity:1; }
.tileDetails .svgIcon,.tileDetails svg { width:16px; height:16px; }
.homeTile.active .tileDetails { color:#5c6a80; }
.homeTile.busy .tileActionGlyph { animation:softPulse .7s ease-in-out infinite alternate; }
.homeTile.offline { box-shadow:none; }
.homeTile.offline .homePhysicalState { color:var(--red); }
.homeTile.active.offline .homePhysicalState { color:#a2414b; }
.modal { backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.modalCard,.deviceHubCard,.automationEditorCard,.assistantDrawer { border-radius:32px; border-color:var(--edge); box-shadow:0 28px 100px #07152835; }
.deviceHubHeader { background:var(--surface); backdrop-filter:blur(16px); }
.deviceHubIcon,.settingRowIcon { border-radius:15px; }
.deviceHubHeader .circleBtn { width:38px; height:38px; }
.settingsShortcut { border-radius:18px; }
.settingsCategoryBar button.active { background:var(--text); color:var(--bg); }
.automationCard,.routineCard { border-radius:26px; }
.bottomNav { background:color-mix(in srgb,var(--panel) 90%,transparent); border-color:var(--edge); box-shadow:0 10px 40px #152a4728; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.bottomNavBtn.active { background:var(--accent-soft); color:var(--accent); }
.ownerGate { background:radial-gradient(ellipse at 70% 20%,var(--accent-soft),transparent 65%),var(--bg); }
.ownerGateCard { background:var(--surface); border:1px solid var(--edge); box-shadow:var(--shadow); border-radius:32px; }
@keyframes softPulse { to { opacity:.35; } }
@media(min-width:1100px) {
  .sidebar { top:20px; margin:20px 0 20px 18px; height:calc(100dvh - 40px); padding:30px 15px 23px; border:1px solid var(--edge); border-radius:30px; background:var(--surface); box-shadow:var(--shadow); }
  .navbtn { border-radius:15px; }
  .navbtn.active { box-shadow:inset 0 1px 0 var(--edge); }
  .brandRow { margin-bottom:38px; }
  .main { padding-top:42px; }
}
@media(max-width:1099px) { .sidebar { background:var(--surface); border-radius:28px; border-color:var(--edge); } }
@media(max-width:600px) {
  .homeHero h2 { font-size:33px; }
  .homeHeroAside { gap:8px; }
  .presenceCard { font-size:11px; padding:7px 10px; }
  .featureCard { border-radius:25px; }
  .homeDeviceDeck,.physicalDeviceGrid { gap:12px; }
  .homeTile,.homePhysicalCard { border-radius:25px; }
  .homePhysicalCard { height:160px; padding:18px; }
  .homePhysicalIcon { width:40px; height:40px; border-radius:14px; }
  .homePhysicalName { font-size:14px; }
  .homePhysicalState { font-size:11px; }
  .tileActionGlyph { right:17px; top:19px; }
  .tileActionGlyph .svgIcon,.tileActionGlyph svg { width:17px; height:17px; }
  .spacePill { padding:8px 14px; min-height:38px; }
  .modalCard,.deviceHubCard,.automationEditorCard { border-radius:28px; }
}
@media(max-width:360px) { .homeHero h2 { font-size:30px; } .zoneChips { margin-right:-15px; max-width:calc(100% + 15px); } .homePhysicalCard { padding:15px; height:154px; } .homePhysicalName { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .homeTile:hover { transform:none; } .homeTile.busy .tileActionGlyph { animation:none; } }