@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#17211d; --muted:#69736e; --paper:#f7f6f1; --line:#d9ddd4; --cream:#f3e7c9; --green:#2f654f; --orange:#da6b3c; --red:#b63c35; --white:#fffefa; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; }
.minimal-home { background:#151515; }
a { color:inherit; text-decoration:none; }
.shell { position:relative; max-width:1120px; min-height:100vh; margin:auto; padding:clamp(2rem,7vw,6rem) 1.5rem 2rem; }
.minimal-home { position:relative; display:grid; min-height:100vh; padding:1rem; background:#27302b; }.home-stage { align-self:start; width:min(100%,760px); margin:clamp(3.5rem,8vh,6rem) auto 0; }.home-logo { display:flex; align-items:center; justify-content:center; gap:.7rem; margin:0 0 1.8rem; color:#f8f7f0; font:700 clamp(2rem,4.5vw,3.35rem)/1 Manrope,sans-serif; letter-spacing:.08em; text-align:center; }.home-logo b { color:#8ee0af; }.logo-mark { display:grid; width:2.05rem; aspect-ratio:1; place-items:center; border:2px solid #8ee0af; border-radius:50%; color:#8ee0af; font:600 1rem Fraunces,Georgia,serif; }.home-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; width:100%; }.home-buttons a { display:grid; min-height:clamp(145px,25vh,230px); place-items:center; padding:1.25rem; border:1px solid #ffffff18; color:#f8f7f0; font:600 clamp(1.25rem,2.3vw,1.9rem)/1.1 Fraunces,Georgia,serif; letter-spacing:-.03em; text-align:center; transition:transform .2s,box-shadow .2s,background .2s; }.home-buttons .subscriptions { background:#1e342b; }.home-buttons .home { background:#3a3020; }.home-buttons .vehicles { background:#3b2829; }.home-buttons .vault { background:#29283a; }.home-buttons a:hover { transform:translateY(-5px) scale(1.015); box-shadow:0 18px 38px #000000aa; color:#fff; }.home-buttons .subscriptions:hover { background:#00b86b; }.home-buttons .home:hover { background:#ff9d00; }.home-buttons .vehicles:hover { background:#ff2952; }.home-buttons .vault:hover { background:#8857ff; }
.hero { max-width:740px; margin-bottom:3rem; }
.security-settings { display:inline-flex; align-items:center; justify-content:center; width:auto; min-height:36px; padding:.55rem .75rem; background:var(--green); color:#fff; border:1px solid var(--green); font-size:.72rem; font-weight:700; letter-spacing:.03em; white-space:nowrap; transition:background .2s,border-color .2s,box-shadow .2s,transform .2s; }.security-settings:hover { background:#00c975; border-color:#00c975; box-shadow:0 8px 22px #00c97566; transform:translateY(-2px); }.home-utilities { position:absolute; top:clamp(.85rem,2vw,1.5rem); right:1.5rem; display:grid; justify-items:end; gap:.7rem; }.home-security-settings { position:static; }.live-clock { display:grid; justify-items:end; gap:.2rem; color:#b9f1cf; font:600 clamp(1rem,1.35vw,1.25rem)/1.1 Fraunces,Georgia,serif; letter-spacing:.025em; text-shadow:0 2px 16px #00000080; }.live-clock b { color:#f8f7f0; font-size:1.18em; letter-spacing:.055em; }
.eyebrow { color:var(--green); font:500 .72rem/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.11em; }
h1,h2 { font-family:Fraunces,Georgia,serif; margin:.35rem 0; letter-spacing:-.035em; }
h1 { max-width:750px; font-size:clamp(2.65rem,7vw,5.7rem); line-height:.98; }
h2 { font-size:1.55rem; }
.intro,.page-head > p:not(.eyebrow) { color:var(--muted); font-size:1.05rem; max-width:590px; line-height:1.65; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.card { min-height:300px; padding:1.5rem; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.card:hover { transform:translateY(-5px); box-shadow:0 12px 28px #17211d16; }
.card span { font:500 .72rem "DM Mono",monospace; opacity:.7; }.card p { line-height:1.6; flex:1; }.card b { font-size:.85rem; }.subscriptions { background:#e5eee7; }.home { background:var(--cream); }.vehicles { background:#f1ddda; }.vault { background:#e4e3f0; }
footer { margin-top:4rem; color:var(--muted); font: .75rem "DM Mono",monospace; }
.app-shell { max-width:980px; margin:auto; padding:1.5rem 1.25rem 4rem; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:#e5eee7; }
.login-card { width:min(100%, 430px); padding:2.3rem; background:var(--white); border:1px solid var(--line); box-shadow:0 18px 40px #17211d16; }
.login-card h1 { font-size:3rem; }.login-form { display:grid; gap:1rem; margin-top:1.8rem; }.login-form label { display:grid; gap:.4rem; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.login-error { margin:1.2rem 0 0; padding:.75rem; color:#8e241f; background:#f9e7e5; font-size:.85rem; }
.vault-message { min-height:1.2rem; color:var(--muted); font-size:.85rem; }.settings-message { margin:1rem 0 0; padding:.75rem; font-size:.85rem; }.settings-message.success { color:var(--green); background:#e5eee7; }.settings-message.error { color:#8e241f; background:#f9e7e5; }.vault-actions { display:flex; gap:.5rem; align-items:center; }.vault-copy { width:auto; min-height:auto; padding:.45rem .6rem; font-size:.73rem; }.vault-password { font-family:"DM Mono",monospace; font-size:.85rem; overflow-wrap:anywhere; }
nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.4rem; padding:0 0 1.5rem; border-bottom:1px solid var(--line); font-size:.78rem; } .brand { margin-right:auto; font-size:1.7rem; font-weight:700; letter-spacing:.06em; line-height:1; }.brand span { color:var(--green); } nav > a:not(.brand) { padding:.45rem .58rem; border:1px solid var(--line); border-radius:999px; background:#fdfcf7; transition:background .2s,border-color .2s,transform .2s; } nav > a:not(.brand):hover { background:#e1f1e7; border-color:#9fc8ad; transform:translateY(-1px); }
.page-head { padding:3.8rem 0 2.2rem; }.page-head h1 { font-size:clamp(2.4rem,6vw,4.5rem); }
.vehicle-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1.7rem 0 1rem; }.vehicle-head h1 { font-size:clamp(1.8rem,4vw,2.8rem); }.page-button { display:inline-flex; align-items:center; justify-content:center; width:auto; min-height:42px; padding:.65rem .85rem; background:var(--ink); color:#fff; font-size:.78rem; font-weight:700; white-space:nowrap; }
.subscriptions-head { padding:1.7rem 0 1rem; }.subscriptions-head h1 { font-size:clamp(1.8rem,4vw,2.8rem); }
.total { display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .85rem; width:fit-content; max-width:100%; padding:1rem 1.2rem; background:var(--green); color:#f8faed; margin-bottom:1rem; }.total p,.total span { margin:0; font-size:.75rem; }.total strong { font:600 clamp(2rem,4vw,2.9rem) Fraunces,serif; letter-spacing:-.04em; }.total span { opacity:.75; }
.panel { background:var(--white); border:1px solid var(--line); padding:1.45rem; margin-top:1rem; }.panel-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; }.panel-heading p { margin:0; color:var(--muted); font-size:.8rem; }
.form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; margin-top:1.3rem; align-items:end; }.form-grid label { display:grid; gap:.4rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } input,select,button { width:100%; min-height:43px; padding:.65rem .75rem; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; border-radius:0; } button { background:var(--ink); color:white; border-color:var(--ink); font-weight:700; cursor:pointer; }.list { margin-top:1rem; }.item { display:grid; grid-template-columns:1.4fr 1fr 1fr auto; align-items:center; gap:1rem; border-top:1px solid var(--line); padding:1rem .1rem; }.item strong { display:block; }.item small { color:var(--muted); }.tag { width:max-content; padding:.25rem .45rem; font:.65rem "DM Mono",monospace; background:#e5eee7; color:var(--green); }.tag.due { background:var(--cream); color:#7d4b00; }.tag.overdue { background:#f1ddda; color:var(--red); }.delete { width:auto; min-height:auto; padding:.45rem .6rem; background:transparent; color:var(--red); border-color:#e8c8c5; font-size:.73rem; }.empty { color:var(--muted); padding:1rem 0; }.alerts:empty { display:none; }.alert { margin:0 0 1rem; padding:1rem 1.2rem; border-left:4px solid var(--orange); background:#fff3dc; font-size:.88rem; }.alert.overdue { border-color:var(--red); background:#f9e7e5; }
.form-grid[data-category="home"] { grid-template-columns:minmax(150px,1.6fr) minmax(130px,1.1fr) minmax(100px,.8fr) minmax(110px,.9fr) minmax(120px,.9fr); gap:.65rem; }.form-grid[data-category="home"] input,.form-grid[data-category="home"] select,.form-grid[data-category="home"] button { min-height:40px; padding:.55rem .6rem; }
.form-grid#subscription-form { grid-template-columns:minmax(150px,1.45fr) minmax(105px,.9fr) minmax(115px,.95fr) minmax(135px,1.05fr) minmax(135px,1fr); gap:.65rem; }.form-grid#subscription-form input,.form-grid#subscription-form select,.form-grid#subscription-form button { min-height:40px; padding:.55rem .6rem; }
.form-grid#bookmarks-form { grid-template-columns:minmax(145px,1.2fr) minmax(210px,1.8fr) minmax(145px,1.2fr) minmax(130px,1fr); gap:.65rem; }.form-grid#bookmarks-form input,.form-grid#bookmarks-form button { min-height:40px; padding:.55rem .6rem; }
.form-grid#vault-draft-form { grid-template-columns:minmax(160px,1.4fr) minmax(180px,1.5fr) minmax(160px,1.4fr) minmax(130px,1fr); gap:.65rem; }.form-grid#vault-draft-form input,.form-grid#vault-draft-form button { min-height:40px; padding:.55rem .6rem; }
.form-grid[data-category="vehicle"] { grid-template-columns:minmax(105px,.9fr) minmax(145px,1.3fr) minmax(110px,1fr) minmax(130px,1.1fr) minmax(105px,.9fr) minmax(105px,.9fr) minmax(120px,1fr); gap:.55rem; }.form-grid[data-category="vehicle"] input,.form-grid[data-category="vehicle"] select,.form-grid[data-category="vehicle"] button { min-height:40px; padding:.55rem .6rem; }
.home-buttons .notes { background:#29343a; }.home-buttons .notes:hover { background:#00a8d8; }.notes-form { display:grid; gap:.85rem; margin-top:1.3rem; }.notes-form label { display:grid; gap:.4rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }.notes-form textarea { width:100%; min-height:150px; padding:.75rem; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; resize:vertical; }.notes-form button { width:auto; min-width:130px; }.notes-list { margin-top:1.4rem; }.note-item { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }.note-item strong { display:block; }.note-item p { margin:.45rem 0 0; color:var(--muted); line-height:1.55; white-space:normal; }
.notes-workspace { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:560px; margin-top:.2rem; background:var(--white); border:1px solid var(--line); }.notes-sidebar { display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line); background:#f1f3ee; }.new-note-button { width:auto; margin:1rem; padding:.6rem .75rem; background:var(--green); border-color:var(--green); text-align:left; }.notes-workspace .notes-list { flex:1; margin:0; overflow:auto; }.notes-workspace .note-item { display:flex; align-items:stretch; gap:0; padding:0; border-top:1px solid var(--line); }.note-select { min-width:0; flex:1; padding:.9rem 1rem; border:0; background:transparent; color:var(--ink); text-align:left; font-weight:400; }.note-select:hover,.note-item.active .note-select { background:#dce9e1; color:var(--ink); }.note-select strong,.note-select span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.note-select strong { font-size:.85rem; }.note-select span { margin-top:.25rem; color:var(--muted); font-size:.72rem; }.note-remove { width:34px; min-height:0; padding:0; border:0; background:transparent; color:var(--muted); font-size:1.3rem; font-weight:400; }.note-remove:hover { color:var(--red); background:#f7e6e3; }.notes-editor { display:flex; min-width:0; flex-direction:column; padding:2rem; }.notes-editor .note-title { min-height:auto; padding:0 0 .7rem; border:0; border-bottom:1px solid var(--line); background:transparent; font:600 clamp(1.6rem,3vw,2.3rem)/1.12 Fraunces,Georgia,serif; outline:none; }.notes-editor textarea { flex:1; width:100%; min-height:330px; padding:1.2rem 0; border:0; background:transparent; color:var(--ink); font:400 1rem/1.75 Manrope,sans-serif; outline:none; resize:none; }.notes-status { min-height:1.1rem; margin:0; color:var(--muted); font:.7rem "DM Mono",monospace; }
.home-buttons .bookmarks { background:#30342a; }.home-buttons .bookmarks:hover { background:#b7d500; }.vault-actions a.vault-copy { display:inline-flex; align-items:center; }
.remove-dialog[hidden] { display:none; }.remove-dialog { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:1.5rem; background:#17211d88; }.remove-dialog-card { width:min(100%,390px); padding:1.5rem; background:var(--white); border:1px solid var(--line); box-shadow:0 18px 45px #00000040; }.remove-dialog-card p { margin:0; font-size:1rem; line-height:1.5; }.remove-dialog-actions { display:flex; gap:.65rem; margin-top:1.25rem; }.remove-dialog-actions button { width:auto; min-width:90px; }.remove-dialog-actions .delete { color:var(--ink); border-color:var(--line); }
.vault-search { display:flex; gap:.65rem; margin:1rem 0 .35rem; }.vault-search input { flex:1; }.vault-search button { width:auto; min-width:100px; }
#bookmarks-list { display:grid; gap:.35rem; }.bookmark-category + .bookmark-category { margin-top:0; }.bookmark-category h2 { margin:0; padding:.4rem 0 .3rem; color:var(--green); font-size:1.15rem; border-bottom:1px solid var(--line); }.bookmark-category .item { padding:.65rem .1rem; }
.bookmark-link { display:grid; gap:.2rem; }.bookmark-link:hover strong { color:var(--green); text-decoration:underline; }.bookmark-link small { color:var(--muted); overflow-wrap:anywhere; }
nav > a.nav-subscriptions:hover { background:#00b86b; border-color:#00b86b; color:#fff; } nav > a.nav-home:hover { background:#ff9d00; border-color:#ff9d00; color:#17211d; } nav > a.nav-vehicles:hover { background:#ff2952; border-color:#ff2952; color:#fff; } nav > a.nav-vault:hover { background:#8857ff; border-color:#8857ff; color:#fff; } nav > a.nav-notes:hover { background:#00a8d8; border-color:#00a8d8; color:#fff; } nav > a.nav-bookmarks:hover { background:#b7d500; border-color:#b7d500; color:#17211d; }
.home-buttons { padding-bottom:2.5rem; }.home-buttons a { min-height:clamp(125px,21vh,195px); }.home-credit { position:absolute; right:1.5rem; bottom:1.15rem; left:1.5rem; color:#f8f7f0a8; font:.68rem "DM Mono",monospace; letter-spacing:.03em; text-align:center; }
.tag.upcoming { background:#dcecff; color:#165da8; }.tag.due { background:#fff0d5; color:#a65a00; }.tag.overdue { background:#fde0df; color:#bd3029; }
@media (max-width:720px) { .form-grid[data-category="home"] { grid-template-columns:1fr; } }
@media (max-width:720px) { .form-grid#subscription-form,.form-grid#bookmarks-form,.form-grid#vault-draft-form,.form-grid[data-category="vehicle"] { grid-template-columns:1fr; } }
@media (max-width:720px) { .note-item { flex-direction:column; } }
@media (max-width:720px) { .notes-workspace { grid-template-columns:1fr; }.notes-sidebar { border-right:0; border-bottom:1px solid var(--line); }.notes-workspace .notes-list { max-height:210px; }.notes-workspace .note-item { flex-direction:row; }.notes-editor { min-height:420px; padding:1.25rem; } }
@media (max-width:720px) { .vault-search { flex-direction:column; } .vault-search button { width:100%; } }
@media (max-width:720px) { .cards,.form-grid,.home-buttons { grid-template-columns:1fr; }.card { min-height:210px; }.home-buttons { width:min(100%,440px); }.home-buttons a { min-height:18vh; }.item { grid-template-columns:1fr auto; }.item > :nth-child(2),.item > :nth-child(3) { grid-column:1; }.app-shell { padding-top:1rem; } nav .brand { width:100%; }.home-utilities { position:static; justify-items:start; margin:0 0 1.5rem; }.home-security-settings { margin:0; } }

/* Premium smart-home dashboard */
.smart-dashboard { height:100vh; overflow:hidden; display:grid; grid-template-columns:224px minmax(0,1fr); background:#070d13; color:#edf3f7; font-family:Manrope,sans-serif; }
.dashboard-sidebar { display:flex; flex-direction:column; height:100vh; padding:1.15rem .8rem .85rem; border-right:1px solid #25313c; background:linear-gradient(180deg,#0d1721,#0a121b 70%,#101924); }
.smart-brand { display:flex; align-items:center; gap:.55rem; padding:.25rem .75rem 1.6rem; color:#f5f8fb; font-size:1.35rem; font-weight:700; letter-spacing:-.04em; }.smart-brand i { display:grid; width:1.75rem; height:1.75rem; place-items:center; color:#41a0ff; border:1px solid #2182e4; border-radius:6px; font-style:normal; }.smart-brand span { color:#50c99e; }
.sidebar-nav { display:grid; gap:.18rem; }.sidebar-nav a { display:flex; align-items:center; gap:.75rem; min-height:37px; padding:.5rem .75rem; border-radius:8px; color:#b7c3ce; font-size:.76rem; transition:.18s ease; }.sidebar-nav a i { width:1.1rem; color:#8b9ba9; font-size:1rem; font-style:normal; text-align:center; }.sidebar-nav a:hover,.sidebar-nav a.active { color:#eff7ff; background:linear-gradient(100deg,#164f85,#12355d); }.sidebar-nav a.active i { color:#53a8ff; }
.sidebar-footer { display:grid; grid-template-columns:10px 1fr; column-gap:.55rem; margin-top:auto; padding:1rem .75rem; border:1px solid #2d3945; border-radius:10px; background:#111c26; }.status-dot { width:8px; height:8px; margin-top:.33rem; border-radius:50%; background:#49d988; box-shadow:0 0 12px #49d988; }.sidebar-footer strong { font-size:.72rem; }.sidebar-footer small { grid-column:2; margin-top:.18rem; color:#61d796; font-size:.64rem; }
.dashboard-main { min-width:0; height:100vh; padding:1rem clamp(1.25rem,2.4vw,2.25rem) .65rem; background:radial-gradient(circle at 70% -10%,#173552 0,transparent 30%),linear-gradient(135deg,#071019,#0b151e 62%,#071019); }.smart-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.1rem 0 .55rem; }.welcome-kicker,.panel-title span,.overview-card small { margin:0 0 .25rem; color:#8498a9; font:.55rem/1.1 "DM Mono",monospace; letter-spacing:.1em; }.smart-topbar h1 { margin:0; color:#f4f7fa; font:600 clamp(1.3rem,1.8vw,1.7rem)/1.15 Manrope,sans-serif; letter-spacing:-.05em; }.welcome-copy { margin:.2rem 0 0; color:#97a8b6; font-size:.68rem; }.smart-top-actions { display:flex; align-items:center; gap:.42rem; }.dashboard-clock { display:grid; min-width:140px; justify-items:end; color:#9ab0c1; font:.58rem/1.25 "DM Mono",monospace; text-align:right; }.dashboard-clock b { color:#f1f7fc; font-weight:500; }.smart-dashboard .security-settings,.smart-signout { min-height:28px; padding:.35rem .5rem; border:1px solid #304759; border-radius:7px; background:#122333; color:#dcebf5; font-size:.55rem; font-weight:700; letter-spacing:.06em; transition:.18s ease; }.smart-dashboard .security-settings:hover { background:#0874ce; border-color:#2b9df2; color:#fff; box-shadow:0 0 16px #168bf466; }.smart-signout:hover { color:#fff; background:#5c2531; border-color:#c35263; }.dashboard-status { display:none; }
.status-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin-bottom:.55rem; }.overview-card,.dashboard-panel { border:1px solid #273746; border-radius:10px; background:linear-gradient(135deg,#121e29,#101922); box-shadow:0 13px 30px #00000026; }.overview-card { display:flex; align-items:center; gap:.55rem; min-height:69px; padding:.65rem; }.overview-icon { display:grid; flex:0 0 auto; width:29px; height:29px; place-items:center; border-radius:8px; background:#1c6e45; color:#7ff3ae; font-weight:800; }.climate-icon { background:#123a5a; color:#59b9ff; }.weather-icon { background:#463a13; color:#ffd248; }.tesla-icon { background:#173c30; color:#5ce6ab; }.overview-card strong { display:block; color:#f2f7fb; font-size:.86rem; letter-spacing:-.04em; }.overview-card em { display:block; margin-top:.1rem; color:#8ba0af; font-size:.55rem; font-style:normal; }
.dashboard-layout { display:grid; height:calc(100vh - 175px); grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:minmax(210px,1fr) minmax(118px,.58fr); gap:.55rem; }.dashboard-panel { position:relative; min-width:0; min-height:0; overflow:hidden; padding:.8rem; }.panel-title { display:flex; align-items:center; justify-content:space-between; gap:.7rem; }.panel-title span { margin:0; color:#b8c7d3; }.panel-title b { color:#718899; font-size:.54rem; font-weight:500; }.card-note { margin:.7rem 0 0; color:#859baa; font-size:.6rem; }.battery-meter { width:100%; height:.42rem; margin-top:.85rem; padding:1px; border:1px solid #425b63; border-radius:999px; }.battery-meter i { display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#1fcf87,#73e9b2); box-shadow:0 0 8px #43dd9a8c; transition:width .4s ease; }
.camera-card { padding:0; background:#0b141c; }.camera-card img { display:block; width:100%; height:100%; min-height:0; object-fit:cover; }.camera-empty { display:grid; height:100%; min-height:0; place-content:center; gap:.25rem; background:radial-gradient(circle at 35% 20%,#243d50,#131d27 58%,#0b141c); color:#e7f0f6; font:600 .88rem/1.1 Manrope,sans-serif; text-align:center; }.camera-empty small { color:#89a0b0; font:.54rem "DM Mono",monospace; }.camera-icon { display:grid; width:33px; height:33px; margin:auto; place-items:center; border:1px solid #3e6a84; border-radius:50%; color:#62b8ed; font-size:1.1rem; }.camera-name { position:absolute; right:.7rem; bottom:.55rem; left:.7rem; display:flex; justify-content:space-between; color:#f4f8fb; font-size:.63rem; font-weight:700; text-shadow:0 2px 10px #000; }.camera-name span { color:#5ceca0; font:.52rem "DM Mono",monospace; letter-spacing:.08em; }.lights-card { grid-column:span 3; }.light-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin-top:.7rem; }.light-controls button { display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; min-height:54px; padding:.5rem; border:1px solid #304454; border-radius:8px; background:#142330; color:#dceaf2; font-size:.61rem; text-align:left; transition:.18s ease; }.light-controls button i { grid-row:span 2; align-self:center; color:#69c5ff; font-size:1rem; font-style:normal; }.light-controls button span { margin-top:.1rem; color:#8298a7; font:.53rem "DM Mono",monospace; }.light-controls button.is-on { border-color:#48c58c; background:#1c4b3a; color:#fff; box-shadow:inset 0 0 18px #3bc77a17; }.light-controls button.is-on i,.light-controls button.is-on span { color:#88f5ba; }.light-controls button:disabled { opacity:.58; cursor:not-allowed; }
.hub-actions { min-height:0; }.hub-action-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.42rem; margin-top:.65rem; }.hub-action-grid a { display:flex; align-items:center; justify-content:space-between; min-height:36px; padding:.45rem .55rem; border:1px solid #2c3f4e; border-radius:7px; background:#13212d; color:#c3d2dc; font-size:.58rem; transition:.18s ease; }.hub-action-grid a:hover { border-color:#258ee8; background:#164168; color:#fff; }.hub-action-grid i { color:#56abef; font-size:.85rem; font-style:normal; }.dashboard-panel.is-unavailable { filter:saturate(.45); }.dashboard-credit { display:none; }.dashboard-offline .camera-name span { color:#a6b3bc; }
@media (max-width:1100px) { .smart-dashboard { grid-template-columns:190px minmax(0,1fr); }.dashboard-layout { grid-template-columns:repeat(2,1fr); }.hub-actions { grid-column:span 2; }.status-strip { grid-template-columns:repeat(2,1fr); }.lights-card { grid-column:span 2; } }
@media (max-width:760px) { .smart-dashboard { display:block; height:auto; overflow:visible; }.dashboard-sidebar { display:none; }.dashboard-main { height:auto; padding:1rem; }.smart-topbar { flex-wrap:wrap; }.smart-top-actions { width:100%; justify-content:flex-end; }.dashboard-clock { margin-right:auto; justify-items:start; text-align:left; }.dashboard-layout { height:auto; grid-template-columns:1fr; grid-template-rows:none; }.status-strip,.light-controls,.hub-action-grid { grid-template-columns:repeat(2,1fr); }.lights-card,.hub-actions { grid-column:auto; }.camera-card,.camera-card img,.camera-empty { min-height:200px; } }
@media (max-width:440px) { .status-strip,.light-controls,.hub-action-grid { grid-template-columns:1fr; }.smart-top-actions { align-items:flex-start; flex-wrap:wrap; }.dashboard-clock { width:100%; }.overview-card { min-height:72px; } }

/* Full MainHUB dashboard layout */
.smart-dashboard { height:auto; min-height:100vh; grid-template-columns:224px minmax(0,1fr); overflow:visible; }.dashboard-sidebar { position:sticky; top:0; height:100vh; overflow:hidden; padding:1rem .55rem .8rem; }.smart-brand { padding:.25rem .7rem 1rem; font-size:1.25rem; }.sidebar-nav { gap:.08rem; }.sidebar-nav a { min-height:31px; padding:.38rem .7rem; font-size:.72rem; }.sidebar-footer { padding:.8rem .7rem; }.dashboard-main { height:auto; min-height:100vh; padding:1rem 1.1rem .75rem; }.smart-topbar { padding:.25rem .1rem .7rem; }.smart-topbar h1 { font-size:1.45rem; }.smart-topbar h1 span { font-size:1.2rem; }.welcome-copy { font-size:.69rem; }.top-widgets { display:flex; align-items:stretch; gap:.5rem; }.sun-times,.mini-weather,.date-widget { display:flex; align-items:center; gap:.35rem; min-height:48px; padding:.45rem .6rem; border:1px solid #273746; border-radius:10px; background:#121e29; color:#dce7ef; font-size:.6rem; }.sun-times { gap:0; }.sun-times span { display:grid; grid-template-columns:auto 1fr; column-gap:.28rem; padding:0 .55rem; }.sun-times span + span { border-left:1px solid #2b3c4a; }.sun-times b { color:#a6b8c6; font-size:.52rem; font-weight:500; }.sun-times strong { grid-column:2; font-size:.63rem; }.mini-weather { min-width:110px; }.mini-weather strong { font-size:.9rem; }.mini-weather span { color:#91a4b3; }.date-widget { display:grid; grid-template-columns:auto 1fr; min-width:120px; }.date-widget b { grid-row:span 2; color:#7fa3bd; }.date-widget span { font-size:.63rem; }.date-widget small { color:#91a4b3; font-size:.5rem; }.dashboard-status { display:block; min-height:0; margin:0 0 .35rem; font-size:.49rem; opacity:.7; }.status-strip { grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; margin-bottom:.55rem; }.overview-card { min-height:90px; padding:.62rem; }.overview-card strong { font-size:.88rem; }.overview-card em { font-size:.52rem; }.overview-icon { width:31px; height:31px; }.energy-icon { background:#433613; color:#fbc83f; }.internet-icon { background:#163d42; color:#58ebca; }.water-icon { background:#113c66; color:#55aaff; }
.dashboard-layout { height:auto; display:grid; grid-template-columns:1.05fr 1.4fr 1.25fr; grid-template-rows:325px 310px; gap:.55rem; }.dashboard-panel { min-height:0; padding:.85rem; }.schedule-panel,.utilities-panel { grid-column:1; }.energy-panel,.attention-panel { grid-column:2; }.events-panel,.quick-panel { grid-column:3; }.panel-title { padding-bottom:.55rem; border-bottom:1px solid #263846; }.panel-title span { font-size:.62rem; }.panel-title a,.panel-link { color:#3ca5fc; font-size:.59rem; }.schedule-row { display:grid; grid-template-columns:50px 10px 1fr auto; align-items:center; gap:.35rem; min-height:45px; border-bottom:1px solid #22323f; color:#d6e0e7; font-size:.61rem; }.schedule-row b { color:#a4b3bf; font-size:.52rem; }.schedule-row em { color:#8fa1ae; font-size:.52rem; font-style:normal; }.schedule-row span,.event-dot { width:7px; height:7px; border-radius:50%; }.blue-dot { background:#40a8ff; }.purple-dot { background:#9871ff; }.orange-dot { background:#ffb348; }.panel-link { display:block; margin-top:.8rem; }.energy-number { margin:1rem 0 .1rem; color:#f3f7fa; font:500 1.7rem/.9 Fraunces,Georgia,serif; }.energy-number small { font:500 .75rem Manrope,sans-serif; }.energy-panel p { margin:.2rem 0 .4rem; color:#8497a5; font-size:.56rem; }.energy-panel mark { padding:.25rem .45rem; border-radius:10px; background:#233c4f; color:#fff; }.energy-chart { display:flex; align-items:end; gap:5px; height:99px; padding:.3rem 0; border-bottom:1px solid #2b3d4c; }.energy-chart i { width:7%; min-height:24%; border-radius:3px 3px 0 0; background:linear-gradient(#4aa8ff,#1668c4); }.energy-chart i:nth-child(2n){height:55%}.energy-chart i:nth-child(3n){height:77%}.energy-chart i:nth-child(4n){height:42%}.energy-chart i:nth-child(5n){height:64%}.energy-chart i:nth-child(6n){height:33%}.events-panel { padding:.85rem; }.event-row { display:grid; grid-template-columns:7px 70px 1fr auto; align-items:center; gap:.55rem; min-height:70px; border-bottom:1px solid #22323f; }.event-dot { background:#4add90; }.event-thumb { display:grid; width:70px; height:45px; place-items:center; overflow:hidden; border-radius:5px; background:#1c2b38; color:#5e7f94; font-size:1.1rem; }.event-thumb .camera-empty { min-height:0; width:100%; height:100%; font-size:.48rem; background:linear-gradient(135deg,#2b4558,#17222d); }.event-thumb img { width:100%; height:100%; object-fit:cover; }.event-row p { margin:0; display:grid; gap:.15rem; font-size:.61rem; }.event-row small { color:#91a2ae; font-size:.5rem; }.event-row time { color:#9eacb7; font-size:.52rem; }.muted-event { opacity:.68; }.utility-row { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:.35rem; min-height:57px; border-bottom:1px solid #233440; }.utility-row i { color:#55b5ff; font-size:1rem; font-style:normal; }.utility-row:first-of-type i { color:#ffd149; }.utility-row b { font-size:.63rem; }.utility-row span { color:#e2ebf1; font-size:.67rem; }.utility-row small { grid-column:2 / 4; color:#8ca0ae; font-size:.5rem; }.attention-row { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:.5rem; min-height:68px; border-bottom:1px solid #22323f; }.attention-row i { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; background:#6b2631; color:#ff8798; font-style:normal; }.attention-row:nth-of-type(3) i { background:#604d15; color:#ffd649; }.attention-row.good i { background:#1b573a; color:#61e99c; }.attention-row p { display:grid; gap:.12rem; margin:0; }.attention-row b { font-size:.61rem; }.attention-row small { color:#92a3af; font-size:.5rem; }.attention-row button { min-width:48px; padding:.4rem; border:1px solid #314554; border-radius:7px; background:#1c2b37; color:#cbd9e3; font-size:.55rem; }.quick-panel .light-controls { grid-template-columns:repeat(3,1fr); gap:.42rem; margin-top:.7rem; }.quick-panel .light-controls button,.quick-panel .light-controls a { display:grid; min-height:91px; place-content:center; gap:.38rem; padding:.55rem .3rem; border:1px solid #2b3f4e; border-radius:9px; background:#172633; color:#d9e5ed; font-size:.58rem; text-align:center; }.quick-panel .light-controls i { color:#62c3ff; font-size:1.35rem; font-style:normal; }.quick-panel .light-controls button span { color:#8ba0af; font-size:.49rem; }.quick-panel .light-controls button.is-on { background:#1c4b3a; }.quick-panel .light-controls button.is-on i,.quick-panel .light-controls button.is-on span { color:#86f4b9; }.dashboard-bottom { display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; margin-top:.55rem; padding:.65rem 1rem; border:1px solid #273746; border-radius:10px; background:#111d28; }.dashboard-bottom span { display:grid; grid-template-columns:25px 1fr; column-gap:.35rem; color:#4ab3f9; font-size:1rem; }.dashboard-bottom b { align-self:end; color:#b7c6d0; font-size:.52rem; }.dashboard-bottom em { grid-column:2; color:#f0f6f9; font-size:.61rem; font-style:normal; }
@media (max-width:1300px) { .smart-dashboard { grid-template-columns:190px minmax(0,1fr); }.dashboard-sidebar { overflow:auto; }.top-widgets .sun-times,.date-widget { display:none; }.dashboard-layout { grid-template-columns:1fr 1.25fr 1.1fr; }.sidebar-nav a { min-height:29px; } }
@media (max-width:950px) { .smart-dashboard { display:block; height:auto; }.dashboard-sidebar { display:none; }.dashboard-main { height:auto; }.top-widgets { display:none; }.status-strip { grid-template-columns:repeat(3,1fr); }.dashboard-layout { grid-template-columns:1fr 1fr; grid-template-rows:auto; }.schedule-panel,.utilities-panel { grid-column:1; }.energy-panel,.attention-panel { grid-column:2; }.events-panel,.quick-panel { grid-column:span 2; }.dashboard-bottom { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) { .status-strip,.dashboard-layout,.dashboard-bottom { grid-template-columns:1fr; }.dashboard-layout { gap:.7rem; }.schedule-panel,.utilities-panel,.energy-panel,.attention-panel,.events-panel,.quick-panel { grid-column:auto; }.dashboard-bottom span { min-height:38px; }.quick-panel .light-controls { grid-template-columns:repeat(2,1fr); } }

/* Reference-style desktop composition: deliberately compact, one dashboard view. */
@media (min-width:951px) {
  .premium-dashboard { height:100vh; min-height:760px; overflow:hidden; grid-template-columns:223px minmax(0,1fr); background:#070d13; }
  .premium-dashboard .dashboard-sidebar { position:static; height:100vh; overflow:hidden; padding:1rem .55rem .8rem; border-color:#24313c; background:linear-gradient(180deg,#0d1720 0%,#0a121a 72%,#101a24 100%); }
  .premium-dashboard .smart-brand { gap:.7rem; padding:.18rem .65rem 1rem; color:#f8fbff; font-size:1.3rem; font-weight:600; letter-spacing:-.04em; }
  .premium-dashboard .smart-brand i { width:1.62rem; height:1.62rem; border-color:#2e9afd; color:#2d9cff; border-radius:4px; }
  .premium-dashboard .sidebar-nav { gap:.1rem; }
  .premium-dashboard .sidebar-nav a { min-height:31px; padding:.33rem .68rem; border-radius:7px; color:#c3ccd4; font-size:.72rem; }
  .premium-dashboard .sidebar-nav a i { color:#aab6c0; font-size:.9rem; }
  .premium-dashboard .sidebar-nav a.active { background:linear-gradient(105deg,#19578f,#123a65); color:#63b4ff; }
  .premium-dashboard .sidebar-nav a.active i { color:#6db9ff; }
  .premium-dashboard .sidebar-footer { margin: auto .15rem 0; padding:.85rem .65rem; border-color:#2a3945; background:#111b25; }
  .premium-dashboard .dashboard-main { height:100vh; min-height:0; padding:1.28rem 1.05rem .65rem; overflow:hidden; background:radial-gradient(circle at 66% -18%,#152d43 0,transparent 34%),#081119; }
  .premium-dashboard .smart-topbar { height:76px; padding:0 .05rem .55rem; align-items:start; }
  .premium-dashboard .smart-topbar h1 { font-size:1.55rem; font-weight:600; letter-spacing:-.06em; }
  .premium-dashboard .welcome-copy { margin-top:.22rem; font-size:.69rem; }
  .premium-dashboard .top-widgets { gap:.48rem; }
  .premium-dashboard .sun-times,.premium-dashboard .mini-weather,.premium-dashboard .date-widget { min-height:53px; border-color:#263541; border-radius:10px; background:linear-gradient(145deg,#13202b,#111b25); }
  .premium-dashboard .sun-times { min-width:224px; }.premium-dashboard .mini-weather { min-width:132px; }.premium-dashboard .date-widget { min-width:156px; }
  .premium-dashboard .dashboard-status { display:none; }
  .premium-dashboard .status-strip { height:121px; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.62rem; margin:0 0 .62rem; }
  .premium-dashboard .overview-card { min-height:0; padding:.85rem .75rem; border-radius:11px; border-color:#273746; background:linear-gradient(135deg,#14212c,#111b24); }
  .premium-dashboard .overview-icon { width:36px; height:36px; border-radius:9px; font-size:1.05rem; }
  .premium-dashboard .overview-card small { margin-bottom:.33rem; font-size:.56rem; letter-spacing:0; text-transform:none; }
  .premium-dashboard .overview-card strong { font-size:.95rem; }.premium-dashboard .overview-card em { margin-top:.3rem; font-size:.56rem; }
  .premium-dashboard .dashboard-layout { height:calc(100vh - 280px); min-height:548px; display:grid; grid-template-columns:1fr 1.34fr 1.18fr; grid-template-rows:1fr 1.06fr; gap:.62rem; }
  .premium-dashboard .dashboard-panel { padding:.9rem .85rem; border-radius:10px; border-color:#283845; background:linear-gradient(145deg,#14212c,#101a23); box-shadow:0 10px 24px #00000020; }
  .premium-dashboard .panel-title { min-height:30px; padding-bottom:.52rem; }.premium-dashboard .panel-title span { font-size:.61rem; letter-spacing:.02em; }.premium-dashboard .panel-title b { font-size:.55rem; }
  .premium-dashboard .schedule-row { grid-template-columns:54px 8px 1fr auto; min-height:44px; font-size:.63rem; }.premium-dashboard .schedule-row b { font-size:.53rem; }.premium-dashboard .schedule-row em { font-size:.52rem; }
  .premium-dashboard .energy-number { margin:.8rem 0 .08rem; font-size:1.7rem; }.premium-dashboard .energy-chart { height:94px; margin-top:.15rem; }.premium-dashboard .energy-panel p { font-size:.55rem; }.premium-dashboard .panel-link { margin-top:.65rem; font-size:.58rem; }
  .premium-dashboard .event-row { grid-template-columns:7px 73px 1fr auto; min-height:68px; gap:.48rem; }.premium-dashboard .event-thumb { width:73px; height:45px; }.premium-dashboard .event-row p { font-size:.61rem; }.premium-dashboard .event-row small,.premium-dashboard .event-row time { font-size:.5rem; }
  .premium-dashboard .utility-row { min-height:54px; }.premium-dashboard .utility-row b { font-size:.62rem; }.premium-dashboard .utility-row small { font-size:.49rem; }
  .premium-dashboard .attention-row { min-height:65px; }.premium-dashboard .attention-row b { font-size:.61rem; }.premium-dashboard .attention-row small { font-size:.5rem; }
  .premium-dashboard .quick-panel .light-controls { grid-template-columns:repeat(3,1fr); gap:.45rem; margin-top:.7rem; }.premium-dashboard .quick-panel .light-controls button,.premium-dashboard .quick-panel .light-controls a { min-height:88px; border-radius:9px; font-size:.57rem; }.premium-dashboard .quick-panel .light-controls i { font-size:1.4rem; }
  .premium-dashboard .dashboard-bottom { height:54px; grid-template-columns:repeat(5,1fr); margin-top:.62rem; padding:.45rem .9rem; border-radius:10px; }.premium-dashboard .dashboard-bottom span { font-size:.9rem; }.premium-dashboard .dashboard-bottom b { font-size:.49rem; }.premium-dashboard .dashboard-bottom em { font-size:.57rem; }
}