:root {
  color-scheme: dark;
  --bg: #070c16;
  --panel: rgba(15, 24, 42, .78);
  --panel-strong: #111b2e;
  --line: rgba(153, 185, 231, .14);
  --line-bright: rgba(126, 216, 255, .3);
  --text: #f4f8ff;
  --muted: #8d9bb2;
  --cyan: #63dcf7;
  --blue: #6878ff;
  --green: #52e0a4;
  --amber: #ffbe69;
  --shadow: 0 28px 80px rgba(0, 0, 0, .36);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 70% -10%, #14233e 0, transparent 36%), linear-gradient(145deg, #070c16, #091120 58%, #07101b); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; pointer-events: none; border-radius: 999px; filter: blur(10px); opacity: .44; }
.ambient-one { width: 38vw; height: 38vw; left: -18vw; bottom: -16vw; background: radial-gradient(circle, rgba(36, 143, 196, .36), transparent 68%); }
.ambient-two { width: 34vw; height: 34vw; right: -12vw; top: -12vw; background: radial-gradient(circle, rgba(87, 96, 223, .24), transparent 70%); }
.eyebrow { margin: 0 0 14px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.brand-lockup { display: flex; align-items: center; gap: 13px; font-size: 15px; font-weight: 760; letter-spacing: .02em; }
.brand-mark { position: relative; display: grid; grid-template-columns: repeat(3, 6px); align-items: end; gap: 3px; width: 28px; height: 25px; padding: 4px; border: 1px solid rgba(110, 221, 247, .26); border-radius: 8px; background: rgba(29, 49, 77, .7); box-shadow: inset 0 0 18px rgba(99, 220, 247, .08); }
.brand-mark span { display: block; border-radius: 3px; background: linear-gradient(180deg, var(--cyan), var(--blue)); }
.brand-mark span:nth-child(1) { height: 8px; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:nth-child(3) { height: 11px; }

/* Login */
.login-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(360px, 1.08fr) minmax(420px, .92fr); min-height: 100vh; }
.login-intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px, 5vw, 76px); border-right: 1px solid var(--line); overflow: hidden; }
.login-intro::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(121, 177, 232, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(121, 177, 232, .12) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, black, transparent 88%); }
.login-intro::after { content: ""; position: absolute; width: 360px; height: 360px; right: -130px; top: 50%; transform: translateY(-50%) rotate(45deg); border: 1px solid rgba(99, 220, 247, .11); box-shadow: 0 0 0 60px rgba(75, 106, 174, .025), 0 0 0 120px rgba(75, 106, 174, .018); }
.login-intro > * { position: relative; z-index: 1; }
.intro-copy { max-width: 680px; }
.intro-copy h1 { margin: 0; font-size: clamp(42px, 5.1vw, 76px); line-height: 1.12; letter-spacing: -.055em; font-weight: 660; }
.intro-copy h1 em { color: transparent; font-style: normal; background: linear-gradient(90deg, #95edff, #758aff 78%); -webkit-background-clip: text; background-clip: text; }
.intro-description { max-width: 530px; margin: 28px 0 0; color: #98a7bc; font-size: 17px; line-height: 1.85; }
.intro-status { display: flex; align-items: center; gap: 10px; color: #9eacc0; font-size: 13px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(82, 224, 164, .1), 0 0 15px rgba(82, 224, 164, .7); animation: breathe 2s infinite; }
@keyframes breathe { 50% { opacity: .55; box-shadow: 0 0 0 8px rgba(82, 224, 164, .04); } }
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 36px; }
.login-card { width: min(440px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(155deg, rgba(20, 31, 52, .93), rgba(11, 18, 31, .9)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(24px); }
.mobile-brand { display: none; }
.login-card h2 { margin: 0; font-size: 36px; letter-spacing: -.04em; }
.login-subtitle { margin: 10px 0 34px; color: var(--muted); font-size: 14px; }
.field-label { display: block; margin: 20px 0 9px; color: #bac5d5; font-size: 13px; font-weight: 650; }
.input-wrap { display: flex; align-items: center; height: 52px; padding: 0 15px; border: 1px solid rgba(146, 179, 222, .18); border-radius: 13px; background: rgba(7, 13, 24, .68); transition: border-color .2s, box-shadow .2s, transform .2s; }
.input-wrap:focus-within { border-color: rgba(99, 220, 247, .65); box-shadow: 0 0 0 4px rgba(99, 220, 247, .08), 0 10px 30px rgba(0,0,0,.18); transform: translateY(-1px); }
.input-wrap > svg { width: 20px; fill: none; stroke: #65758d; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.input-wrap input { min-width: 0; flex: 1; height: 100%; padding: 0 12px; border: 0; outline: 0; color: var(--text); background: transparent; }
.input-wrap input::placeholder { color: #526075; }
.password-toggle { border: 0; padding: 7px 0 7px 10px; color: #7f91aa; background: transparent; cursor: pointer; font-size: 12px; }
.password-toggle:hover { color: var(--cyan); }
.form-message { min-height: 21px; margin: 13px 0 3px; color: #ff8c9a; font-size: 13px; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border: 0; border-radius: 13px; color: #06111e; background: linear-gradient(95deg, #83eaff, #7d91ff); box-shadow: 0 12px 35px rgba(81, 155, 229, .23); cursor: pointer; font-weight: 800; transition: transform .2s, filter .2s; }
.primary-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.primary-button:disabled { cursor: wait; opacity: .7; }
.primary-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.primary-button.loading svg { animation: nudge 1s infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: #64738a; font-size: 11px; }
.secure-note svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-footer { color: #526075; font-size: 11px; letter-spacing: .08em; }

/* Dashboard */
.dashboard-page { background: #08101d; }
.dashboard-ambient-one { width: 560px; height: 560px; right: -180px; top: -220px; background: radial-gradient(circle, rgba(73, 103, 219, .2), transparent 68%); }
.dashboard-ambient-two { width: 500px; height: 500px; left: 150px; bottom: -300px; background: radial-gradient(circle, rgba(31, 155, 191, .13), transparent 68%); }
.app-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 32px 22px 24px; border-right: 1px solid var(--line); background: rgba(7, 13, 24, .72); backdrop-filter: blur(24px); }
.sidebar-brand { padding: 0 10px 28px; }
.main-nav { display: grid; gap: 7px; margin-top: 18px; }
.nav-item { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; color: #738198; background: transparent; text-align: left; }
.nav-item svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active { color: #d9f8ff; border-color: rgba(99, 220, 247, .14); background: linear-gradient(90deg, rgba(65, 173, 212, .15), rgba(85, 100, 199, .08)); box-shadow: inset 3px 0 var(--cyan); }
.nav-item small { font-size: 8px; color: #4f5c70; }
.nav-item:disabled { opacity: 1; }
.sidebar-spacer { flex: 1; }
.home-health { display: flex; align-items: center; gap: 11px; margin: 0 3px 16px; padding: 13px; border: 1px solid rgba(82,224,164,.12); border-radius: 13px; background: rgba(82,224,164,.04); }
.health-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: rgba(82,224,164,.1); }
.health-icon span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(82,224,164,.7); }
.home-health strong, .home-health small { display: block; }.home-health strong { font-size: 12px; }.home-health small { margin-top: 3px; color: #617168; font-size: 9px; }
.logout-button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 0; color: #68768b; background: transparent; cursor: pointer; font-size: 12px; }
.logout-button:hover { color: #dfe8f7; }.logout-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-main { min-width: 0; padding: 36px clamp(24px, 4vw, 62px) 20px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar h1 { margin: 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; }.topbar h1 span { color: #9ae9f8; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }.live-pill { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(82,224,164,.14); border-radius: 999px; color: #8ca99e; background: rgba(82,224,164,.04); font-size: 11px; }
.live-pill.offline { color: #b6a083; border-color: rgba(255,190,105,.14); background: rgba(255,190,105,.04); }.live-pill.offline .pulse-dot { background: var(--amber); box-shadow: 0 0 12px rgba(255,190,105,.5); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(133, 213, 244, .22); border-radius: 12px; color: #9bedff; background: linear-gradient(145deg, rgba(52, 108, 139, .35), rgba(70, 80, 166, .28)); font-weight: 700; }
.menu-button { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }.menu-button span { display: block; width: 17px; height: 1px; margin: 4px auto; background: #9babc0; }
.summary-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: 38px; }
.summary-card { min-height: 102px; display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(150deg, rgba(19,30,50,.78), rgba(10,17,29,.68)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.primary-summary { border-color: rgba(99,220,247,.18); background: linear-gradient(130deg, rgba(35, 90, 116, .2), rgba(21, 29, 55, .72)); }
.summary-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; }.summary-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-icon { color: var(--cyan); background: rgba(99,220,247,.1); }.device-icon { color: #a7b0ff; background: rgba(104,120,255,.1); }.scene-icon { color: var(--amber); background: rgba(255,190,105,.09); }
.summary-card div:nth-child(2) span, .summary-card small { display: block; color: #6d7b91; font-size: 10px; }.summary-card strong { display: block; margin-top: 5px; font-size: 20px; }
.summary-tag { margin-left: auto; align-self: flex-start; padding: 5px 7px; border-radius: 6px; color: var(--green); background: rgba(82,224,164,.08); font-size: 8px; letter-spacing: .12em; }
.modules-section { margin-top: 48px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.section-heading h2 { margin: 0; font-size: 25px; }.add-module { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; color: #65738a; background: rgba(15,24,42,.55); }.add-module span { font-size: 18px; }
.module-grid { display: grid; grid-template-columns: minmax(380px, 1.5fr) minmax(260px, .72fr); gap: 18px; }
.device-card { position: relative; min-height: 410px; padding: 27px; border: 1px solid rgba(105, 205, 241, .19); border-radius: 22px; background: linear-gradient(145deg, rgba(20, 35, 58, .92), rgba(10, 17, 30, .91)); box-shadow: 0 26px 70px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035); overflow: hidden; }
.card-glow { position: absolute; width: 280px; height: 280px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(81,130,231,.22), transparent 67%); }
.device-card-header, .device-title-row, .device-footer { position: relative; display: flex; align-items: center; justify-content: space-between; }
.chip-icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(99,220,247,.25); border-radius: 16px; background: linear-gradient(145deg, rgba(38, 98, 126, .34), rgba(39, 49, 112, .28)); box-shadow: inset 0 0 22px rgba(99,220,247,.07); }
.chip-core { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(126,225,255,.3); border-radius: 7px; color: #a9efff; font-size: 11px; font-weight: 800; }
.pin { position: absolute; width: 7px; height: 2px; background: #6e829f; }.p1,.p2,.p3,.p4 { left: -4px; }.p5,.p6,.p7,.p8 { right: -4px; }.p1,.p5 { top: 15px; }.p2,.p6 { top: 26px; }.p3,.p7 { top: 37px; }.p4,.p8 { top: 48px; }
.device-state { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; font-size: 10px; }.device-state span { width: 6px; height: 6px; border-radius: 50%; }.device-state.pending { color: var(--amber); background: rgba(255,190,105,.08); }.device-state.pending span { background: var(--amber); box-shadow: 0 0 8px rgba(255,190,105,.6); }
.device-state b { font-weight: 650; }.device-state.online { color: var(--green); background: rgba(82,224,164,.08); }.device-state.online span { background: var(--green); box-shadow: 0 0 8px rgba(82,224,164,.65); }
.device-title-row { margin-top: 25px; }.device-kind { margin: 0 0 7px; color: #62738c; font-size: 9px; letter-spacing: .18em; }.device-title-row h3 { margin: 0; font-size: 29px; letter-spacing: -.035em; }.more-button { border: 0; color: #65738b; background: transparent; letter-spacing: 3px; }
.device-description { position: relative; max-width: 650px; margin: 16px 0 23px; color: #7f8da3; line-height: 1.75; font-size: 13px; }
.device-metrics { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 15px; border: 1px solid rgba(147,180,222,.1); border-radius: 14px; background: rgba(5,10,19,.32); }
.device-metrics > div { display: grid; grid-template-columns: 8px 1fr; align-items: center; column-gap: 8px; padding: 3px 8px; border-right: 1px solid rgba(147,180,222,.08); }.device-metrics > div:last-child { border-right: 0; }
.metric-dot { width: 6px; height: 6px; border-radius: 50%; background: #526075; }.device-metrics small { color: #65748b; font-size: 9px; }.device-metrics strong { grid-column: 2; margin-top: 4px; color: #aab5c6; font-size: 14px; }
.device-footer { margin-top: 22px; }.last-seen { display: flex; align-items: center; gap: 7px; color: #56657b; font-size: 10px; }.last-seen span { width: 6px; height: 6px; border: 1px solid #59677b; border-radius: 50%; }
.module-preview-button { padding: 9px 13px; border: 1px solid rgba(116,150,198,.22); border-radius: 9px; color: #a9eaff; background: rgba(31,75,101,.25); text-decoration: none; transition: border-color .2s, transform .2s; }.module-preview-button:hover { border-color: rgba(99,220,247,.48); transform: translateY(-1px); }.module-preview-button.disabled-link { color: #536177; background: rgba(15,23,38,.58); pointer-events: none; }
.empty-module-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 410px; padding: 34px; border: 1px dashed rgba(139,170,210,.14); border-radius: 22px; color: #536177; background: rgba(10,17,29,.3); text-align: center; }
.empty-plus { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border: 1px solid rgba(139,170,210,.14); border-radius: 15px; font-size: 24px; }.empty-module-card strong { color: #78869a; font-size: 15px; }.empty-module-card p { max-width: 260px; color: #4f5c6f; line-height: 1.7; font-size: 11px; }.empty-module-card > span { margin-top: 10px; color: #3f4d60; font-size: 8px; letter-spacing: .2em; }
.dashboard-footer { display: flex; justify-content: space-between; margin-top: 45px; padding: 18px 2px 0; border-top: 1px solid rgba(140,170,210,.07); color: #3f4d60; font-size: 9px; letter-spacing: .08em; }
.sidebar-backdrop { display: none; }

/* Read-only device detail */
.device-shell { position: relative; z-index: 1; width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 24px; }
.device-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }.back-link { color: #8fa1ba; text-decoration: none; font-size: 13px; }.back-link:hover { color: var(--cyan); }.device-topbar-actions { display: flex; align-items: center; gap: 14px; }.logout-button.compact { width: auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; }.device-live-badge { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; font-size: 10px; }.device-live-badge i { width: 7px; height: 7px; border-radius: 50%; }.device-live-badge.pending { color: var(--amber); background: rgba(255,190,105,.08); }.device-live-badge.pending i { background: var(--amber); }.device-live-badge.online { color: var(--green); background: rgba(82,224,164,.08); }.device-live-badge.online i { background: var(--green); box-shadow: 0 0 10px rgba(82,224,164,.7); }
.device-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 54px 0 30px; }.device-hero h1 { margin: 0; font-size: clamp(38px, 6vw, 66px); letter-spacing: -.055em; }.device-hero > div > p:last-child { margin: 13px 0 0; color: var(--muted); }.freshness-panel { min-width: 220px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14,23,40,.65); }.freshness-panel span,.freshness-panel small { display: block; color: #68778e; font-size: 10px; }.freshness-panel strong { display: block; margin: 8px 0 5px; font-size: 14px; }
.environment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.environment-card { min-height: 178px; padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(21,34,56,.88), rgba(10,17,29,.86)); box-shadow: inset 0 1px rgba(255,255,255,.025); }.temperature-card { border-color: rgba(255,140,105,.2); background: radial-gradient(circle at 100% 0, rgba(255,120,85,.12), transparent 45%), linear-gradient(145deg, rgba(34,34,50,.9), rgba(12,17,28,.9)); }.humidity-card { border-color: rgba(86,200,255,.2); background: radial-gradient(circle at 100% 0, rgba(62,171,255,.14), transparent 45%), linear-gradient(145deg, rgba(20,37,57,.9), rgba(10,17,29,.9)); }.environment-label { color: #78879d; font-size: 11px; }.environment-card > strong { display: block; margin-top: 25px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }.temperature-card > strong { color: #ffa184; }.humidity-card > strong { color: #70d5ff; }.environment-card > strong small { margin-left: 6px; color: #8291a6; font-size: 15px; }.environment-card p { margin: 18px 0 0; color: #65758b; font-size: 11px; line-height: 1.5; }.status-card > strong { font-size: 25px; color: #dce9f8; }
.history-panel { margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(150deg, rgba(16,27,46,.82), rgba(8,14,25,.8)); }.history-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }.history-heading h2 { margin: 0; font-size: 25px; }.range-switch { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,10,18,.5); }.range-switch button { padding: 8px 13px; border: 0; border-radius: 8px; color: #6e7e95; background: transparent; cursor: pointer; font-size: 11px; }.range-switch button.active { color: #dffaff; background: rgba(76,171,211,.17); box-shadow: inset 0 0 0 1px rgba(99,220,247,.12); }.chart-legend { display: flex; align-items: center; gap: 18px; margin: 23px 0 12px; color: #8392a8; font-size: 10px; }.chart-legend span { display: flex; align-items: center; gap: 7px; }.chart-legend i { width: 18px; height: 2px; border-radius: 2px; }.temperature-line { background: #ff8c69; }.humidity-line { background: #56c8ff; }.chart-legend small { margin-left: auto; color: #5d6b7f; }.chart-wrap { position: relative; width: 100%; height: 310px; }.chart-wrap canvas { width: 100%; height: 100%; }.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #56657a; font-size: 12px; }.chart-empty[hidden] { display: none; }
.diagnostic-panel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--line); }.diagnostic-panel > div { min-width: 0; padding: 17px; background: rgba(11,19,32,.95); }.diagnostic-panel span,.diagnostic-panel strong { display: block; }.diagnostic-panel span { color: #5f6e84; font-size: 9px; }.diagnostic-panel strong { margin-top: 7px; overflow: hidden; color: #aebaca; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 960px) {
  .login-shell { grid-template-columns: 1fr; }.login-intro { display: none; }.login-panel { min-height: 100vh; }.mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; font-weight: 700; }
  .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; z-index: 20; left: 0; transform: translateX(-102%); width: 250px; transition: transform .25s ease; }.sidebar.open { transform: none; }.sidebar-backdrop.visible { display: block; position: fixed; z-index: 19; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
  .menu-button { display: block; }.topbar { justify-content: flex-start; }.topbar-actions { margin-left: auto; }.summary-grid { grid-template-columns: 1fr 1fr; }.primary-summary { grid-column: 1 / -1; }.module-grid { grid-template-columns: 1fr; }.empty-module-card { min-height: 240px; }
  .environment-grid { grid-template-columns: 1fr 1fr; }.diagnostic-panel { grid-template-columns: repeat(3, 1fr); }.diagnostic-panel > div:last-child { grid-column: span 2; }
}

@media (max-width: 620px) {
  .login-panel { padding: 18px; }.login-card { padding: 30px 24px; border-radius: 21px; }.login-card h2 { font-size: 31px; }
  .dashboard-main { padding: 24px 16px 16px; }.topbar .eyebrow { display: none; }.topbar h1 { font-size: 24px; }.live-pill { display: none; }.summary-grid { grid-template-columns: 1fr; margin-top: 27px; }.primary-summary { grid-column: auto; }.modules-section { margin-top: 34px; }.section-heading { align-items: center; }.add-module { display: none; }.module-grid { grid-template-columns: minmax(0,1fr); }.device-card { min-height: 0; padding: 21px; }.device-metrics { grid-template-columns: 1fr; }.device-metrics > div { grid-template-columns: 8px 1fr auto; border-right: 0; border-bottom: 1px solid rgba(147,180,222,.08); padding: 8px; }.device-metrics > div:last-child { border-bottom: 0; }.device-metrics strong { grid-column: 3; grid-row: 1; margin: 0; }.device-footer { align-items: flex-start; gap: 14px; flex-direction: column; }.empty-module-card { min-height: 210px; }
  .device-shell { width: calc(100% - 28px); padding-top: 18px; }.device-topbar-actions .logout-button { display: none; }.device-hero { align-items: stretch; flex-direction: column; margin-top: 36px; }.freshness-panel { min-width: 0; }.environment-grid { grid-template-columns: 1fr; }.environment-card { min-height: 150px; }.history-panel { padding: 18px 12px; }.history-heading { align-items: stretch; flex-direction: column; }.range-switch { width: 100%; }.range-switch button { flex: 1; }.chart-legend { flex-wrap: wrap; }.chart-legend small { width: 100%; margin-left: 0; }.chart-wrap { height: 280px; }.diagnostic-panel { grid-template-columns: 1fr 1fr; }.diagnostic-panel > div:last-child { grid-column: auto; }
}