:root {
  color-scheme: dark;
  --bg: #071018;
  --sidebar: #09131d;
  --surface: rgba(15, 29, 42, .72);
  --surface-strong: #101f2c;
  --line: rgba(133, 178, 211, .13);
  --line-strong: rgba(76, 195, 255, .24);
  --text: #edf6fc;
  --muted: #8296a8;
  --muted-2: #5f7486;
  --blue: #39adff;
  --cyan: #31d9d0;
  --purple: #9276ff;
  --green: #48d7a2;
  --amber: #f3b85b;
  --red: #ff6d78;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .19);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(95, 168, 205, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 168, 205, .025) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
body::after { content: ""; position: fixed; width: 650px; height: 650px; left: 46%; top: -420px; pointer-events: none; background: radial-gradient(circle, rgba(43, 140, 210, .12), transparent 68%); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 244px; display: flex; flex-direction: column; padding: 26px 14px 18px; background: rgba(8, 18, 27, .94); border-right: 1px solid var(--line); backdrop-filter: blur(22px); transition: width .25s ease, transform .25s ease; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 27px; }
.brand strong { display: block; font-size: 20px; letter-spacing: .04em; }
.brand small { display: block; margin-top: 3px; color: #557085; font-size: 8px; letter-spacing: .2em; }
.brand-mark { width: 39px; height: 39px; position: relative; display: grid; place-items: center; border: 1px solid rgba(66, 196, 255, .3); border-radius: 11px; background: linear-gradient(145deg, rgba(47, 172, 242, .2), rgba(81, 81, 190, .12)); box-shadow: inset 0 0 18px rgba(48, 191, 255, .08), 0 0 28px rgba(48, 169, 239, .1); }
.brand-mark::before { content: ""; width: 18px; height: 18px; border: 1px solid #4fc9ff; border-radius: 50%; box-shadow: 0 0 11px rgba(60, 193, 255, .55); }
.brand-mark span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); }
.brand-mark span:nth-child(1) { left: 8px; top: 11px; }.brand-mark span:nth-child(2) { right: 8px; top: 11px; }.brand-mark span:nth-child(3) { bottom: 7px; }
.nav { flex: 1; }
.nav-label { margin: 10px 12px 7px; color: #4f6578; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.nav-item { position: relative; height: 43px; margin-bottom: 3px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border-radius: 10px; color: #778da0; font-size: 13px; transition: .2s ease; }
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-item span:nth-of-type(1) { flex: 1; }
.nav-item b { opacity: 0; font-size: 9px; color: #597186; }
.nav-item em { min-width: 22px; height: 18px; padding: 0 6px; display: grid; place-items: center; border-radius: 8px; background: rgba(70, 130, 166, .14); color: #6e899e; font-size: 9px; font-style: normal; }
.nav-item em.warning { background: rgba(239, 168, 77, .12); color: var(--amber); }
.nav-item:hover { color: #c3d8e7; background: rgba(91, 149, 182, .07); }
.nav-item.active { color: #dceffa; background: linear-gradient(90deg, rgba(42, 158, 225, .16), rgba(42, 158, 225, .04)); }
.nav-item.active::before { content: ""; position: absolute; left: -14px; width: 2px; height: 23px; border-radius: 3px; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.nav-item.active svg { color: #57c5ff; }.nav-item.active b { opacity: 1; }
.ai-dot { width: 5px; height: 5px; flex: none !important; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.sidebar-system { margin: 6px 3px 14px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(25, 45, 60, .35); }
.system-head, .system-row { display: flex; justify-content: space-between; align-items: center; }
.system-head { margin-bottom: 11px; color: #a9bdcb; font-size: 10px; }.system-row { margin-top: 8px; color: #587083; font-size: 9px; }.system-row strong { color: #7690a3; font-weight: 500; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 99px; color: var(--green); background: rgba(60, 205, 153, .08); font-size: 9px; font-weight: 600; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.collapse-btn { width: 100%; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #506779; cursor: pointer; font-size: 10px; }
.collapse-btn:hover { background: rgba(255,255,255,.025); color: #93aabb; }.collapse-btn svg { width: 15px; }

.content-shell { margin-left: 244px; transition: margin .25s ease; }
.topbar { position: sticky; top: 0; z-index: 20; height: 68px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(7, 16, 24, .8); backdrop-filter: blur(22px); }
.top-title > div > span { display: none; }.top-title small { color: #b9cfdd; font-size: 14px; font-weight: 600; }
.top-status { display: flex; align-items: center; gap: 20px; }.cloud-status, .mini-status { display: flex; align-items: center; gap: 9px; }.cloud-status small, .mini-status small { display: block; margin-bottom: 2px; color: #526a7d; font-size: 9px; }.cloud-status strong, .mini-status strong { display: block; color: #9eb5c5; font-size: 10px; font-weight: 500; }.cloud-status strong { color: #74d9b3; }
.pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(72, 215, 162, .7); }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(72, 215, 162, .35); border-radius: 50%; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.55); opacity: 1; } 80%,100% { transform: scale(1.35); opacity: 0; } }
.mini-status svg { width: 15px; height: 15px; color: #5e8299; }.top-divider { width: 1px; height: 23px; background: var(--line); }
.icon-btn { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(20, 39, 53, .5); cursor: pointer; }.icon-btn svg { width: 16px; height: 16px; }.notification-btn { position: relative; color: #7890a2; }.notification-btn span { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border: 1px solid #0c1720; border-radius: 50%; background: var(--amber); font-size: 0; }
.profile { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }.avatar { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(74, 186, 240, .25); border-radius: 9px; background: linear-gradient(145deg, #173a50, #17273e); color: #94d9ff; font-size: 11px; }.profile-copy strong,.profile-copy small { display: block; }.profile-copy strong { color: #b4c8d6; font-size: 10px; font-weight: 600; }.profile-copy small { margin-top: 2px; color: #50687a; font-size: 8px; }.profile > svg { width: 12px; color: #506779; }
.mobile-menu { display: none; }

.dashboard { width: min(1540px, 100%); margin: auto; padding: 26px 32px 18px; }
.hero { min-height: 184px; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 32px; border: 1px solid rgba(72, 154, 204, .16); border-radius: 18px; background: radial-gradient(circle at 78% 40%, rgba(54, 152, 219, .12), transparent 24%), linear-gradient(120deg, rgba(14, 33, 47, .94), rgba(10, 23, 36, .72)); box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .15; background-image: radial-gradient(circle at center, #69cfff 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 48%, black); }
.hero-copy { position: relative; z-index: 2; }.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #5d839a; font-size: 8px; font-weight: 700; letter-spacing: .17em; }.eyebrow span { width: 17px; height: 1px; background: #42bdfd; }.hero h1 { margin: 0; font-size: clamp(24px, 2vw, 31px); letter-spacing: -.03em; }.hero h1 span { color: #70caff; }.hero p { margin: 9px 0 15px; color: #768fa1; font-size: 12px; }.hero-health { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(72, 215, 162, .11); border-radius: 7px; background: rgba(49, 183, 135, .055); color: #73a993; font-size: 9px; }.hero-health .pulse-dot { width: 5px; height: 5px; }.hero-health b { color: #446758; }
.hero-actions { position: relative; z-index: 3; display: flex; gap: 9px; }.btn { height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font-size: 10px; font-weight: 600; transition: transform .15s, border .15s, background .15s; }.btn:hover { transform: translateY(-1px); }.btn:active { transform: translateY(1px); }.btn svg { width: 14px; height: 14px; }.btn-primary { background: #178bd3; border-color: #39abef; box-shadow: 0 8px 23px rgba(15, 131, 201, .2); }.btn-primary:hover { background: #2099e2; }.btn-secondary { background: rgba(26, 51, 68, .75); border-color: rgba(117, 169, 199, .2); color: #bdd0dc; }.btn-secondary:hover { border-color: rgba(117, 193, 238, .35); }
.hero-orbit { position: absolute; z-index: 1; width: 230px; height: 230px; right: 25%; top: -40px; opacity: .6; }.orbit-ring { position: absolute; inset: 0; border: 1px solid rgba(78, 194, 246, .13); border-radius: 50%; }.ring-one::before,.ring-one::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #4ec7ff; box-shadow: 0 0 10px #4ec7ff; }.ring-one::before { left: 27px; top: 42px; }.ring-one::after { right: 4px; bottom: 85px; }.ring-two { inset: 42px; border-style: dashed; animation: spin 25s linear infinite; }.orbit-core { position: absolute; inset: 83px; display: grid; place-items: center; border: 1px solid rgba(69, 197, 255, .25); border-radius: 50%; background: rgba(24, 112, 169, .13); box-shadow: 0 0 30px rgba(36, 172, 243, .08); }.orbit-core span { width: 9px; height: 9px; border-radius: 50%; background: #5acaff; box-shadow: 0 0 15px #44bdf5; }@keyframes spin { to { transform: rotate(360deg); } }

.stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px; margin: 14px 0 25px; }.stat-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(14, 29, 41, .69); box-shadow: 0 8px 28px rgba(0,0,0,.08); transition: border .2s, transform .2s; }.stat-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }.stat-top { display: flex; justify-content: space-between; align-items: center; }.stat-label { color: #6d8496; font-size: 9px; }.stat-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(54, 161, 224, .09); color: #52b9f2; }.stat-icon svg { width: 14px; }.stat-card.alert .stat-icon { background: rgba(243, 184, 91, .08); color: var(--amber); }.stat-value { margin-top: 12px; display: flex; align-items: baseline; gap: 4px; font-size: 24px; font-weight: 650; letter-spacing: -.04em; }.stat-value small { color: #668095; font-size: 10px; font-weight: 500; letter-spacing: 0; }.stat-foot { margin-top: 8px; display: flex; gap: 5px; align-items: center; color: #526b7c; font-size: 8px; }.trend-up { color: var(--green); }.trend-warning { color: var(--amber); }

.content-section { margin-top: 24px; scroll-margin-top: 84px; }.section-heading,.panel-heading { display: flex; align-items: center; justify-content: space-between; }.section-heading { margin-bottom: 12px; }.section-heading h2,.panel-heading h2 { margin: 0; font-size: 14px; letter-spacing: -.01em; }.section-heading p,.panel-heading p { margin: 4px 0 0; color: #5b7284; font-size: 9px; }.text-btn,.panel-link { display: flex; align-items: center; gap: 5px; border: 0; background: none; color: #638398; cursor: pointer; font-size: 9px; }.text-btn:hover,.panel-link:hover { color: #80cfff; }.text-btn svg,.panel-link svg { width: 12px; }
.rooms-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }.room-card { position: relative; overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(18, 36, 49, .88), rgba(12, 26, 38, .7)); transition: .2s ease; }.room-card:hover { transform: translateY(-2px); border-color: rgba(70, 176, 232, .25); }.room-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 172, 227, .08), transparent 70%); }.room-head { display: flex; align-items: center; gap: 10px; }.room-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(86, 159, 198, .15); border-radius: 9px; color: #5cbcf1; background: rgba(57, 136, 178, .08); }.room-icon svg { width: 17px; }.room-head h3 { margin: 0 0 3px; font-size: 12px; }.room-head p { margin: 0; color: #577082; font-size: 8px; }.online-mark { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(72,215,162,.5); }.room-env { display: flex; gap: 20px; margin: 17px 0 13px; }.env-value span { display: flex; align-items: center; gap: 5px; color: #5d7689; font-size: 8px; }.env-value span svg { width: 11px; }.env-value strong { display: block; margin-top: 5px; font-size: 15px; font-weight: 600; }.env-value strong small { color: #5e7789; font-size: 8px; }.room-devices { display: flex; padding-top: 11px; border-top: 1px solid var(--line); gap: 7px; }.room-device { flex: 1; display: flex; align-items: center; gap: 6px; color: #536d7f; font-size: 8px; }.room-device svg { width: 12px; }.room-device.on { color: #7bc7eb; }.room-arrow { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.015); color: #58768a; cursor: pointer; }.room-arrow svg { width: 11px; }
.devices-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px; }.device-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14, 29, 41, .7); transition: .2s ease; }.device-card:hover { border-color: rgba(74, 176, 232, .24); transform: translateY(-2px); }.device-card.offline { opacity: .62; }.device-head { display: flex; justify-content: space-between; }.device-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(50, 151, 207, .09); color: #56bef5; }.device-icon svg { width: 17px; }.device-status { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; }.device-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.device-status.off { color: #637482; }.device-card h3 { min-height: 18px; margin: 13px 0 3px; font-size: 11px; }.device-room { color: #526b7d; font-size: 8px; }.device-metric { margin: 12px 0; padding: 8px; border-radius: 7px; background: rgba(5, 16, 25, .45); color: #7f9bad; font-size: 9px; }.device-footer { display: flex; justify-content: space-between; align-items: center; }.device-detail { display: flex; align-items: center; gap: 4px; border: 0; background: none; color: #59778b; cursor: pointer; font-size: 8px; }.device-detail svg { width: 10px; }
.switch { width: 32px; height: 18px; position: relative; padding: 0; border: 0; border-radius: 99px; background: #283c49; cursor: pointer; transition: background .25s; }.switch span { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #8095a2; transition: transform .25s, background .25s; }.switch.on { background: rgba(36, 161, 224, .55); box-shadow: inset 0 0 8px rgba(42, 182, 242, .2); }.switch.on span { transform: translateX(14px); background: #e8f8ff; }.switch:disabled { cursor: not-allowed; opacity: .45; }.switch.loading span { animation: switchLoad .6s ease infinite alternate; }.switch.success { box-shadow: 0 0 0 3px rgba(72,215,162,.1); }@keyframes switchLoad { to { opacity: .35; } }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13, 28, 40, .72); box-shadow: var(--shadow); }.monitor-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(275px, .72fr); gap: 12px; margin-top: 26px; scroll-margin-top: 84px; }.chart-panel,.comm-panel { padding: 18px; }.chart-actions { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 8px; background: rgba(3, 13, 21, .4); }.chart-tab,.period-btn { height: 25px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #587284; cursor: pointer; font-size: 8px; }.chart-tab.active { background: rgba(43, 142, 199, .18); color: #7fcfff; }.period-btn { margin-left: 4px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); }.period-btn svg { width: 10px; }.chart-legend { min-height: 24px; display: flex; align-items: center; gap: 16px; margin-top: 8px; color: #688296; font-size: 8px; }.chart-legend span { display: flex; align-items: center; gap: 6px; }.chart-legend i { width: 13px; height: 2px; border-radius: 3px; }.chart-legend strong { margin-left: 2px; color: #afc3d1; font-size: 11px; }.chart-wrap { height: 190px; position: relative; margin-top: 4px; }.chart-svg { width: 100%; height: 100%; overflow: visible; }.chart-grid { stroke: rgba(103, 143, 167, .09); stroke-width: 1; }.chart-label { fill: #4f687a; font-size: 8px; }.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawChart 1.2s ease forwards; }.chart-area { opacity: .12; }.chart-point { cursor: crosshair; stroke: #0c1a25; stroke-width: 2; }.chart-point:hover { r: 5; }.chart-tooltip { position: absolute; z-index: 4; min-width: 102px; pointer-events: none; transform: translate(-50%, calc(-100% - 9px)); padding: 8px 10px; border: 1px solid rgba(91, 185, 234, .22); border-radius: 8px; background: #122432; box-shadow: 0 9px 22px rgba(0,0,0,.3); color: #aec4d2; font-size: 8px; opacity: 0; transition: opacity .12s; }.chart-tooltip strong { display: block; margin-bottom: 3px; color: white; font-size: 10px; }@keyframes drawChart { to { stroke-dashoffset: 0; } }
.chart-skeleton { height: 100%; }.skeleton { position: relative; overflow: hidden; border-radius: 9px; background: rgba(81, 119, 143, .07); }.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(149, 193, 218, .06), transparent); animation: shimmer 1.3s infinite; }@keyframes shimmer { to { transform: translateX(100%); } }
.comm-score { display: flex; align-items: center; gap: 15px; margin: 18px 0; }.score-ring { width: 70px; height: 70px; flex: none; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at center, #102532 59%, transparent 61%), conic-gradient(var(--cyan) 0 96%, #223844 96%); box-shadow: 0 0 18px rgba(49, 217, 208, .06); }.score-ring strong { font-size: 17px; }.score-ring small { color: #5f7a8b; font-size: 7px; }.comm-score > div:last-child > strong { font-size: 10px; }.comm-score p { margin: 5px 0 0; color: #587183; font-size: 8px; line-height: 1.7; }.comm-list { border-top: 1px solid var(--line); }.comm-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }.comm-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #61bde9; background: rgba(48,141,190,.08); }.comm-icon svg { width: 13px; }.comm-item strong,.comm-item small { display: block; }.comm-item strong { color: #9db4c3; font-size: 8px; }.comm-item small { margin-top: 2px; color: #50697a; font-size: 7px; }.signal { display: flex; align-items: flex-end; gap: 2px; height: 14px; }.signal i { width: 2px; background: #53cc9c; border-radius: 2px; }.signal i:nth-child(1){height:4px}.signal i:nth-child(2){height:7px}.signal i:nth-child(3){height:10px}.signal i:nth-child(4){height:13px}.panel-link { width: 100%; justify-content: center; padding-top: 13px; }

.automation-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }.automation-card { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 34, 47, .8), rgba(11, 25, 36, .72)); }.automation-top { display: flex; align-items: flex-start; gap: 10px; }.automation-icon { width: 33px; height: 33px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(59, 155, 213, .09); color: #5cbcf2; }.automation-icon svg { width: 16px; }.automation-top h3 { margin: 1px 0 3px; font-size: 11px; }.automation-meta { color: #526b7d; font-size: 8px; }.automation-top .switch { margin-left: auto; }.automation-description { height: 34px; margin: 13px 0; color: #70889a; font-size: 8px; line-height: 1.65; }.automation-info { display: flex; justify-content: space-between; margin-bottom: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: #50697a; font-size: 7px; }.automation-info span { display: flex; gap: 5px; align-items: center; }.automation-info svg { width: 10px; }.automation-actions { display: flex; gap: 7px; }.automation-actions button { flex: 1; height: 29px; border-radius: 7px; cursor: pointer; font-size: 8px; }.run-scene { display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(59, 164, 222, .18); background: rgba(36, 140, 195, .1); color: #78c9f2; }.run-scene svg { width: 10px; }.edit-scene { border: 1px solid var(--line); background: transparent; color: #607a8c; }.run-scene.loading svg { animation: spin 1s linear infinite; }

.lower-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); gap: 12px; margin-top: 26px; }.ai-panel { position: relative; overflow: hidden; padding: 19px; border-color: rgba(100, 126, 231, .18); scroll-margin-top: 84px; }.ai-glow { position: absolute; width: 280px; height: 280px; left: -120px; top: -160px; background: radial-gradient(circle, rgba(87, 83, 209, .13), transparent 67%); pointer-events: none; }.ai-header { position: relative; display: flex; align-items: center; gap: 12px; }.ai-avatar { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border: 1px solid rgba(90, 198, 248, .26); border-radius: 13px; background: linear-gradient(145deg, rgba(42, 127, 189, .17), rgba(102, 72, 186, .14)); }.ai-core { width: 17px; height: 17px; position: relative; border: 1px solid #72d5ff; border-radius: 50%; box-shadow: 0 0 12px rgba(86, 202, 255, .35); }.ai-core::before,.ai-core::after { content: ""; position: absolute; width: 3px; height: 3px; top: 6px; border-radius: 50%; background: #7de4ff; }.ai-core::before { left: 3px; }.ai-core::after { right: 3px; }.ai-title { display: flex; align-items: center; gap: 8px; }.ai-title h2 { margin: 0; font-size: 14px; }.ai-title span { display: flex; align-items: center; gap: 4px; color: #6fcfa9; font-size: 7px; }.ai-title i { width: 4px; height: 4px; border-radius: 50%; background: var(--green); }.ai-header p { margin: 4px 0 0; color: #586f82; font-size: 8px; }.ai-metrics { margin-left: auto; display: flex; gap: 8px; }.ai-metrics span { min-width: 73px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(9,21,32,.45); }.ai-metrics small,.ai-metrics strong { display: block; }.ai-metrics small { color: #536c7f; font-size: 7px; }.ai-metrics strong { margin-top: 3px; font-size: 13px; }.ai-metrics em { color: #638092; font-size: 7px; font-style: normal; }.suggestion-list { margin: 16px 0 12px; display: grid; gap: 7px; }.suggestion { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(10, 23, 34, .48); }.suggestion-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: rgba(92, 106, 218, .09); color: #8ca2f7; }.suggestion-icon svg { width: 13px; }.suggestion p { margin: 0; color: #8298a9; font-size: 8px; line-height: 1.5; }.suggestion button { padding: 5px 8px; border: 1px solid rgba(101, 142, 223, .16); border-radius: 6px; background: rgba(72, 91, 178, .08); color: #9eabed; cursor: pointer; font-size: 7px; }.quick-commands { display: flex; gap: 6px; margin-bottom: 9px; overflow-x: auto; scrollbar-width: none; }.quick-commands::-webkit-scrollbar { display: none; }.quick-command { flex: none; padding: 6px 9px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: #5e798c; cursor: pointer; font-size: 7px; }.quick-command:hover { border-color: rgba(94, 169, 220, .24); color: #86b9d5; }.ai-input { height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 7px 0 12px; border: 1px solid rgba(90, 153, 207, .19); border-radius: 10px; background: rgba(6, 17, 27, .65); }.ai-input > svg { width: 14px; color: #766fcd; }.ai-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #c0d1dc; font-size: 9px; }.ai-input input::placeholder { color: #486174; }.ai-input button { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 7px; background: linear-gradient(135deg, #2f82c2, #665db8); cursor: pointer; }.ai-input button svg { width: 13px; }.ai-input button:disabled { opacity: .5; }.ai-response { display: none; margin-top: 9px; padding: 9px 11px; border-left: 2px solid #6d77d2; background: rgba(80,80,170,.05); color: #8399ab; font-size: 8px; line-height: 1.65; }.ai-response.show { display: block; animation: fadeIn .25s ease; }
.side-stack { display: grid; gap: 12px; }.alerts-panel,.activity-panel { padding: 17px; }.alert-item { display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }.alert-item:last-child { border: 0; padding-bottom: 0; }.alert-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: rgba(242, 174, 75, .08); color: var(--amber); }.alert-icon.info { color: var(--blue); background: rgba(56, 164, 229, .08); }.alert-icon svg { width: 13px; }.alert-item h3 { margin: 0 0 3px; color: #a8bcc9; font-size: 8px; }.alert-item p { max-width: 220px; margin: 0; color: #5d7587; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.alert-meta { text-align: right; }.alert-meta time { display: block; color: #526a7c; font-size: 7px; }.alert-meta button { margin-top: 4px; padding: 0; border: 0; background: transparent; color: #8b7957; cursor: pointer; font-size: 7px; }.timeline { margin-top: 12px; }.timeline-item { position: relative; display: grid; grid-template-columns: 23px 1fr auto; gap: 8px; align-items: center; padding: 0 0 13px; }.timeline-item:not(:last-child)::after { content: ""; position: absolute; width: 1px; height: 13px; left: 11px; top: 23px; background: var(--line); }.timeline-dot { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(45, 136, 190, .09); color: #58b6e7; }.timeline-dot svg { width: 11px; }.timeline-item p { margin: 0; color: #7d94a5; font-size: 8px; }.timeline-item time { color: #4e6779; font-size: 7px; }
footer { margin-top: 25px; display: flex; justify-content: space-between; padding: 14px 2px 0; border-top: 1px solid var(--line); color: #40596b; font-size: 7px; }

.toast-stack { position: fixed; z-index: 100; right: 22px; top: 84px; display: grid; gap: 8px; }.toast { min-width: 240px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid rgba(69, 202, 151, .2); border-radius: 10px; background: rgba(17, 37, 48, .96); box-shadow: 0 16px 40px rgba(0,0,0,.3); color: #a8c5b9; font-size: 9px; animation: toastIn .25s ease; }.toast.error { border-color: rgba(255,109,120,.25); color: #e0a2a7; }.toast svg { width: 14px; color: var(--green); }.toast.error svg { color: var(--red); }@keyframes toastIn { from { opacity: 0; transform: translateX(12px); } }
.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 9, 14, .72); backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition: opacity .2s; }.modal-backdrop.open { opacity: 1; pointer-events: auto; }.modal { width: min(370px,100%); padding: 28px; text-align: center; border: 1px solid rgba(82, 178, 228, .2); border-radius: 18px; background: #0e202d; box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: translateY(10px); transition: transform .2s; }.modal-backdrop.open .modal { transform: none; }.modal-icon { width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 14px; background: rgba(54, 163, 224, .1); color: #61c3f4; }.modal-icon svg { width: 22px; animation: pulseIcon 1.5s ease infinite; }.modal h2 { margin: 0; font-size: 16px; }.modal p { margin: 8px auto 18px; color: #698294; font-size: 9px; line-height: 1.7; }.scan-state { height: 42px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 9px; background: rgba(6,17,26,.5); color: #83a1b4; font-size: 9px; }.scan-state span { width: 11px; height: 11px; border: 2px solid #324d5d; border-top-color: #58bdef; border-radius: 50%; animation: spin .8s linear infinite; }.modal .btn { width: 100%; }
@keyframes pulseIcon { 50% { transform: scale(1.08); } }
.section-reveal { animation: fadeUp .5s both; }.section-reveal:nth-of-type(2){animation-delay:.06s}.section-reveal:nth-of-type(3){animation-delay:.12s}@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.mobile-scrim { display: none; }

body.sidebar-collapsed .sidebar { width: 72px; }body.sidebar-collapsed .content-shell { margin-left: 72px; }body.sidebar-collapsed .brand > div:last-child,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-item span,body.sidebar-collapsed .nav-item b,body.sidebar-collapsed .nav-item em,body.sidebar-collapsed .sidebar-system,body.sidebar-collapsed .collapse-btn span { display: none; }body.sidebar-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }body.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }body.sidebar-collapsed .nav-item.active::before { left: -14px; }body.sidebar-collapsed .collapse-btn { justify-content: center; }body.sidebar-collapsed .collapse-btn svg { transform: rotate(180deg); }

@media (max-width: 1250px) { .stats-grid { grid-template-columns: repeat(3,1fr); }.devices-grid { grid-template-columns: repeat(3,1fr); }.automation-grid { grid-template-columns: repeat(2,1fr); }.hero-orbit { right: 23%; }.sync-status { display: none; }.top-status { gap: 14px; } }
@media (max-width: 980px) { .sidebar { transform: translateX(-100%); width: 244px !important; }.sidebar.open { transform: none; }.content-shell,body.sidebar-collapsed .content-shell { margin-left: 0; }.mobile-menu { display: grid; }.top-title { display: flex; align-items: center; gap: 10px; }.top-title > div > span { display: block; color: #50697b; font-size: 8px; }.top-title small { display: block; }.mobile-scrim { position: fixed; z-index: 29; inset: 0; background: rgba(2,8,13,.65); }.mobile-scrim.open { display: block; }.rooms-grid { grid-template-columns: repeat(2,1fr); }.monitor-layout,.lower-layout { grid-template-columns: 1fr; }.side-stack { grid-template-columns: repeat(2,1fr); }.hero-orbit { right: 18%; }.collapse-btn { display: none; } }
@media (max-width: 680px) { .topbar { height: 60px; padding: 0 15px; }.top-status .cloud-status,.top-status .top-divider,.top-status .mini-status,.profile-copy,.profile > svg { display: none; }.dashboard { padding: 15px 14px; }.hero { min-height: 265px; display: block; padding: 22px 20px; }.hero-actions { position: absolute; left: 20px; bottom: 20px; right: 20px; }.hero-actions .btn { flex: 1; padding: 0 8px; }.hero-orbit { width: 175px; height: 175px; right: -35px; top: -28px; opacity: .42; }.orbit-core { inset: 64px; }.ring-two { inset: 34px; }.hero h1 { max-width: 240px; line-height: 1.35; }.hero p { max-width: 250px; line-height: 1.6; }.stats-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }.stat-card { padding: 14px; }.rooms-grid,.automation-grid { grid-template-columns: 1fr; }.devices-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }.device-card { padding: 12px; }.chart-panel,.comm-panel { padding: 14px; }.panel-heading { align-items: flex-start; }.chart-actions { max-width: 100%; margin-top: 12px; overflow-x: auto; }.chart-panel .panel-heading { display: block; }.chart-wrap { height: 180px; overflow: hidden; }.chart-svg { min-width: 620px; }.chart-wrap { overflow-x: auto; scrollbar-width: thin; }.side-stack { grid-template-columns: 1fr; }.ai-header { align-items: flex-start; flex-wrap: wrap; }.ai-metrics { width: 100%; margin: 5px 0 0 55px; }.suggestion { grid-template-columns: 27px 1fr; }.suggestion button { grid-column: 2; justify-self: start; }.alert-item p { max-width: 170px; }.profile .avatar { width: 31px; height: 31px; }.toast-stack { left: 14px; right: 14px; top: 70px; }.toast { min-width: 0; }.content-section { margin-top: 20px; } footer { gap: 6px; flex-wrap: wrap; } }
@media (max-width: 410px) { .devices-grid { grid-template-columns: 1fr; }.hero-actions { flex-direction: column; }.hero { min-height: 315px; }.stats-grid { grid-template-columns: 1fr 1fr; }.stat-value { font-size: 21px; }.section-heading p { max-width: 220px; }.ai-metrics { margin-left: 0; }.alert-item { grid-template-columns: 27px 1fr; }.alert-meta { grid-column: 2; display: flex; gap: 8px; text-align: left; } }

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