/* A deliberate, responsive dashboard layout layered over the existing features. */
:root{--surface:#10131a;--surface-raised:#151922;--line:#272d38;--text-soft:#b9c1cf;--accent:#9dddc3;--danger:#ff777c}
body{background:radial-gradient(ellipse at 12% -28rem,#192434 0,transparent 44rem),radial-gradient(ellipse at 94% 12rem,#14201d 0,transparent 38rem),#07090d;color:#f4f6fa}
main{max-width:1640px;padding:0 clamp(18px,3.6vw,60px)}
header{height:78px;border-color:#242a33}
.page-heading{margin:34px 0 22px;display:grid;grid-template-columns:minmax(230px,.9fr) minmax(300px,1.3fr) auto;align-items:center;gap:24px}
.page-heading h1{font-size:clamp(1.65rem,2.6vw,2.15rem);font-weight:620;letter-spacing:-.05em}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:20px;align-items:start}
.dashboard-main{min-width:0}
#dashboard-companion-slot{position:sticky;top:18px;min-width:0;max-height:calc(100dvh - 36px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#354151 transparent;margin-top:0}
.presence{margin:0;max-width:none;min-width:0;padding:12px 15px;border:1px solid #252d37;border-radius:15px;background:linear-gradient(140deg,#121720,#0e1218);box-shadow:0 10px 32px #0002}
.presence-heading{justify-content:space-between;font-size:.7rem;color:#c6cfdb;margin-bottom:8px}
#presence-history-button,#presence-settings{display:grid;place-items:center;width:23px;height:23px;padding:0;border:0;background:transparent;color:#c6cfdb;font-size:.95rem;line-height:1}
#presence-history-button:hover,#presence-settings:hover{color:var(--dashboard-accent,#9dddc3);background:#ffffff0b}
#presence-history-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#presence-history-button{margin-left:0}
.presence-heading{gap:8px}
.presence-person.is-new-device{border-color:#a74751;background:#351c22;color:#ffdce0}
.presence-person.is-new-device::before{color:#ff6473}
#presence-history-dialog{width:min(760px,calc(100vw - 28px));max-height:min(86dvh,820px);overflow:auto}
#presence-history-dialog h3{margin:18px 0 8px;font-size:.9rem}
.presence-history-retention{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#c6cfdb;font-size:.8rem}
.presence-history-retention select{min-width:118px;padding:8px 10px;border:1px solid #35404d;border-radius:10px;background:#111820;color:#f0f3f7}
#presence-history-devices{display:grid;gap:5px;max-height:220px;overflow:auto;padding:2px}
.presence-history-choice{display:grid;grid-template-columns:18px minmax(100px,1fr) minmax(90px,auto);align-items:center;gap:8px;padding:8px 10px;border:1px solid #252e38;border-radius:10px;background:#0c1117;color:#e7ebf1;font-size:.76rem}
.presence-history-choice input{accent-color:var(--dashboard-accent,#9dddc3)}
.presence-history-choice-name{min-width:0;overflow-wrap:anywhere}
.presence-history-choice small{color:#9eaaba;text-align:right}
#presence-history-error{color:#ff9da7;font-size:.8rem}
#presence-history-log{display:grid;gap:8px;margin-top:14px}
.presence-history-card{padding:10px 12px;border:1px solid #28323d;border-radius:12px;background:#10161d}
.presence-history-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.presence-history-summary strong{overflow-wrap:anywhere}
.presence-history-state,.presence-history-new{flex:0 0 auto;padding:4px 7px;border:1px solid #34404d;border-radius:999px;color:#c4d0dc;font-size:.61rem;letter-spacing:.04em}
.presence-history-new{border-color:#a74751;background:#351c22;color:#ffdce0}
.presence-history-card>.presence-help{margin:8px 0}
.presence-history-days{display:grid;gap:4px}
.presence-history-day{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(120px,1fr) minmax(140px,1.4fr);align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#0b1016;font-size:.69rem}
.presence-history-day>span{color:#d8e0ea}
.presence-history-day>small{color:#9eaaba;overflow-wrap:anywhere}
@media(max-width:600px){.presence-history-choice{grid-template-columns:18px minmax(0,1fr);gap:5px}.presence-history-choice small{grid-column:2;text-align:left}.presence-history-day{grid-template-columns:1fr auto}.presence-history-day small{grid-column:1/-1}.presence-history-retention{align-items:flex-start;flex-direction:column}}
#presence-people{gap:6px 7px;max-height:52px;overflow:auto;scrollbar-width:thin}
.presence-person{padding:4px 7px;border:1px solid #29313d;border-radius:999px;background:#0b0e13;color:#d7dce5;font-size:.65rem;line-height:1.2}
.presence-person::before{margin-right:5px}
.presence-status{font-size:.64rem;flex-basis:auto;align-self:center}
.weather-card{grid-template-columns:minmax(0,1.2fr) auto minmax(220px,.9fr);gap:16px 22px;min-height:176px;padding:24px 25px 15px;border-radius:20px;border-color:#303846;background:radial-gradient(ellipse at 84% 0,#98c7b617,transparent 37%),linear-gradient(130deg,#131922,#0c0f14 78%);box-shadow:0 20px 48px #0002}
.weather-copy h2{font-size:clamp(1.45rem,2.3vw,1.9rem)}
.weather-current{gap:9px}.weather-icon{width:50px;height:54px;font-size:2.3rem}
#weather-temperature{font-size:clamp(2.8rem,4vw,3.8rem)}
.weather-facts{gap:8px}.weather-facts>div{padding:12px 11px;border-color:#2a313b;border-radius:12px;background:#ffffff04}
.weather-facts>div>span{display:block;margin:0 0 8px;color:#aeb9c8;font-size:.72rem}
.weather-facts strong{display:flex;align-items:center;gap:1px;color:#f2f4f7;font-size:1.05rem;letter-spacing:-.025em}
.weather-facts strong>span{display:inline!important;margin:0!important;color:inherit!important;font-size:inherit!important}
.weather-facts .weather-divider{margin:0 3px!important;color:#737d8a!important}
.weather-credit{color:#8f9bac}
.overview{gap:10px;border:0;border-radius:0;background:transparent;padding:0;margin:18px 0 24px;grid-template-columns:repeat(4,minmax(0,1fr))}
.system-stat{min-height:116px;padding:15px 16px;border:1px solid #252b34;border-radius:15px;background:linear-gradient(145deg,#11151b,#0d1015);gap:11px;transition:transform .2s,border-color .2s,background .2s}
.system-stat:hover{transform:translateY(-2px);border-color:#394454;background:linear-gradient(145deg,#151a22,#0e1217)}
.system-stat .stat-heading{display:flex;align-items:center;justify-content:space-between;color:#aeb8c8;font-size:.62rem;letter-spacing:.1em}
.system-stat .stat-icon{width:26px;height:26px;display:grid;place-items:center;border:1px solid #303946;border-radius:8px;color:#b5d4ca;font-size:.8rem}
.system-stat strong{font-size:1.08rem;letter-spacing:-.03em}
.meter{height:5px;background:#252b33;border-radius:999px;overflow:hidden}
.meter i{background:linear-gradient(90deg,#72d9ad,#c4df8c);transition:width .55s cubic-bezier(.2,.8,.2,1),background .25s}
.status-stat{grid-column:1/-1;justify-content:flex-start;padding:12px 16px;border:1px solid #252b34;border-radius:13px;background:#10141a;gap:12px}
.status-stat>div{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px}
.status-stat strong{font-size:.78rem;color:#e6ebf2}.status-stat div>span{font-size:.7rem}
.section-heading{margin:28px 0 13px}.section-heading h2{font-size:1.05rem;font-weight:610}.section-heading>span{color:#99a4b4;font-size:.68rem}
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.app-tile>.card{min-height:176px;border-radius:17px;box-shadow:0 12px 32px #0002}
.app-tile>.card:hover{transform:translateY(-3px);box-shadow:0 18px 38px #0004}
.theme-mint{--card:#23372f;--edge:#3c604e;--tone:#b2e3c3;--icon:#365b48;--glow:#6fc58d28}
.theme-peach{--card:#392a21;--edge:#6b4c34;--tone:#f1c79e;--icon:#6a4b32;--glow:#d68c4f22}
.theme-sky{--card:#24354b;--edge:#425d7d;--tone:#b1cbf5;--icon:#3b5678;--glow:#75a7e533}
.theme-rose{--card:#392933;--edge:#65465b;--tone:#efbedb;--icon:#68445b;--glow:#ca7eb12a}
.theme-lavender{--card:#2e2d45;--edge:#535173;--tone:#cac4ff;--icon:#4e4a75;--glow:#8f81dc2c}
.theme-amber{--card:#353321;--edge:#66603a;--tone:#e1d79d;--icon:#635b32;--glow:#b4a64a26}
.infra-app,.infra-power{background:#11151b;border-color:#2a313c;color:#d1d8e3;transition:background .18s,border-color .18s,transform .18s}
.infra-app:hover,.infra-power:hover{background:#191f28;border-color:#465263;transform:translateY(-1px)}
footer{margin-top:26px;color:#919baa}
dialog{background:linear-gradient(145deg,#171c25,#0f1218);border-color:#343e4b;box-shadow:0 32px 110px #000b}
button{transition:background .16s,border-color .16s,transform .16s}
button:hover{border-color:#4b5768}
@media(max-width:1120px){.dashboard-grid{grid-template-columns:minmax(0,1fr) 260px;gap:14px}.page-heading{grid-template-columns:minmax(190px,.8fr) minmax(250px,1.2fr) auto}.weather-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy current" "facts facts" "credit credit"}.weather-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:840px){.dashboard-grid{grid-template-columns:1fr}.page-heading{grid-template-columns:1fr auto;gap:13px}.page-heading>div:first-child{grid-column:1}.page-heading .presence{grid-column:1/-1;grid-row:2}.page-heading>.refresh{grid-column:2;grid-row:1}#dashboard-companion-slot{position:static;max-height:none;overflow:visible}.overview{grid-template-columns:repeat(2,minmax(0,1fr))}.status-stat{grid-column:1/-1}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){main{padding:0 15px}header{height:68px}.header-actions{gap:9px;font-size:.74rem}.header-actions .casa-link{padding:8px 10px}.dashboard-grid{gap:12px}.page-heading{margin:24px 0 15px}.page-heading h1{font-size:1.7rem}.weather-card{padding:18px 15px 12px;gap:13px 7px}.weather-facts{gap:6px}.weather-facts>div{padding:9px 7px}.weather-facts>div>span{font-size:.64rem}.weather-facts strong{font-size:.84rem}.overview{gap:8px;margin:13px 0 19px}.system-stat{min-height:104px;padding:12px 10px}.system-stat .stat-heading{font-size:.55rem}.system-stat .stat-icon{width:22px;height:22px}.system-stat strong{font-size:.89rem}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.app-tile>.card{min-height:152px;padding:15px}.section-heading{margin-top:23px}.infrastructure{gap:7px}.infra-row{min-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Flexible dashboard canvas: four columns by default, with each module independently movable and resizable. */
.dashboard-grid{display:grid;grid-template-columns:repeat(var(--dashboard-effective-columns,4),minmax(0,1fr));grid-auto-rows:minmax(132px,auto);grid-auto-flow:row;gap:14px;align-items:stretch}
.dashboard-main,.dashboard-companion-slot,.overview{display:contents}
#dashboard-grid>.dashboard-companion-slot{display:contents!important}
.dashboard-widget{position:relative;grid-column:span var(--widget-cols,1);grid-row:span var(--widget-rows,1);align-self:start;min-width:0;min-height:var(--widget-min-height,132px);margin:0}
.dashboard-widget>.widget-tools{position:absolute;z-index:7;top:7px;right:7px;display:none;gap:5px;align-items:center}
.dashboard-layout-editing .dashboard-widget>.widget-tools{display:flex}
.widget-drag-handle,.widget-resize-grip{display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid #586777;border-radius:9px;background:#111923ed;color:#e7f2f0;font-size:17px;line-height:1;box-shadow:0 3px 14px #0006;touch-action:none;cursor:grab}
.widget-resize-grip{position:absolute;top:auto;right:2px;bottom:2px;width:30px;height:30px;cursor:nwse-resize;font-size:19px}
.dashboard-layout-editing .dashboard-widget{outline:1px dashed #9dddc366;outline-offset:2px}
.dashboard-layout-editing .dashboard-widget:hover{outline-color:#9dddc3}
.dashboard-widget.is-widget-dragging{z-index:20;opacity:.4;transform:scale(.97)}
.dashboard-widget.is-widget-resizing{z-index:10;outline:2px solid var(--dashboard-accent)}
.dashboard-drag-preview{box-sizing:border-box;opacity:.96;filter:drop-shadow(0 16px 28px #0009);will-change:left,top;contain:paint}
.dashboard-widget-placeholder,.app-tile-placeholder{box-sizing:border-box;min-width:0;min-height:96px;border:2px dashed #9dddc3a8;border-radius:15px;background:#9dddc31c;box-shadow:inset 0 0 26px #9dddc314;pointer-events:none}
.dashboard-widget-placeholder{align-self:stretch;min-height:132px}
.app-tile-placeholder[data-size="small"]{grid-column:span 1}
.app-tile-placeholder[data-size="medium"]{grid-column:span 2}
.app-tile-placeholder[data-size="large"]{grid-column:1/-1}
.dashboard-layout-editing #apps .app-tile>.card{cursor:grab;touch-action:none}
.dashboard-layout-editing #apps .app-tile.is-app-dragging>.card{cursor:grabbing}
.dashboard-layout-editing #apps .app-tile.is-app-dragging{opacity:.68;z-index:100}
.dashboard-layout-editing .dashboard-grid{min-height:55vh;align-items:stretch}
.dashboard-layout-editing .dashboard-widget:not([hidden]){min-height:132px}
.widget-dragging,.widget-resizing{user-select:none}
.widget-dragging *{cursor:grabbing!important}
#weather-card{grid-template-columns:minmax(0,1.2fr) auto minmax(220px,.9fr)}
.overview.dashboard-widget{margin:0;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.system-stat.dashboard-widget{grid-column:span var(--widget-cols,1);margin:0}
.status-stat.dashboard-widget{grid-column:span var(--widget-cols,4)}
#apps-widget,#infrastructure-widget{display:block;min-width:0}
#apps-widget>.section-heading,#infrastructure-widget>.section-heading{margin-top:2px}
#apps{grid-template-columns:repeat(var(--app-columns,4),minmax(0,1fr))}
#layout-edit-bar{position:fixed;z-index:80;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:min(720px,calc(100vw - 24px));padding:10px 12px 10px 16px;border:1px solid #3a4b54;border-radius:15px;background:#111820f4;color:#dfe9e8;box-shadow:0 12px 40px #0009;backdrop-filter:blur(14px);font-size:.76rem}
#layout-edit-bar span{flex:1;line-height:1.4}
#layout-edit-bar button{min-height:38px;padding:7px 15px;background:#20372f;border-color:#4a7665;color:#e4f6ee}
#layout-edit-bar .layout-reset-button{background:#151c23;border-color:#3a4b54;color:#dfe9e8}
@media(max-width:840px){.dashboard-grid{grid-template-columns:repeat(var(--dashboard-effective-columns,2),minmax(0,1fr));gap:11px}.dashboard-widget{grid-column:span var(--widget-cols,1)}.overview.dashboard-widget{grid-template-columns:repeat(2,minmax(0,1fr))}.status-stat.dashboard-widget{grid-column:span var(--widget-cols,2)}#weather-card{grid-template-columns:minmax(0,1fr) auto}.dashboard-widget>.widget-tools{top:5px;right:5px}}
@media(max-width:600px){.dashboard-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(108px,auto);gap:10px}.dashboard-widget{grid-column:span 1!important;grid-row:span var(--widget-rows,1)}.overview.dashboard-widget{grid-template-columns:1fr;gap:8px}.system-stat.dashboard-widget{grid-column:span 1!important}.status-stat.dashboard-widget{grid-column:span 1!important}#apps-widget,#infrastructure-widget{grid-column:span 1!important}.widget-drag-handle,.widget-resize-grip{width:36px;height:36px}.dashboard-layout-editing .dashboard-widget{padding-top:34px}#layout-edit-bar{font-size:.7rem}}


/* User-owned dashboard layout and theme controls. */
:root{--dashboard-accent:#9dddc3}

/* Fine-grained, persisted widget sizing: 96 horizontal steps and 12px vertical steps. */
#dashboard-grid.dashboard-grid{grid-template-columns:repeat(96,minmax(0,1fr))!important;grid-auto-rows:1px!important;column-gap:0!important;row-gap:11px!important;grid-auto-flow:row!important;align-items:start!important}
#dashboard-grid>.dashboard-widget{grid-column:span var(--widget-cols,24)!important;grid-row:span var(--widget-height-units,14)!important;box-sizing:border-box;height:calc(var(--widget-height-units,14)*12px - 11px)!important;min-height:0!important;max-height:none!important;align-self:start!important;overflow:hidden!important;margin-inline:7px!important}
#dashboard-grid>.dashboard-widget>.widget-tools{overflow:visible!important}
#dashboard-grid>.dashboard-widget.is-widget-dragging{height:var(--drag-height)!important}
#dashboard-grid>.dashboard-widget-placeholder{grid-column:span var(--widget-cols,24)!important;grid-row:span var(--widget-height-units,14)!important;height:calc(var(--widget-height-units,14)*12px - 11px)!important;min-height:0!important;margin-inline:7px!important}
#dashboard-grid>#pet-bottom-host.dashboard-widget,#dashboard-grid>#remote-companions.dashboard-widget{grid-column:span var(--widget-cols,48)!important;grid-row:span var(--widget-height-units,24)!important;height:calc(var(--widget-height-units,24)*12px - 11px)!important;min-height:0!important;overflow:hidden!important}
.widget-resize-grip[hidden]{display:none!important}
.widget-setting-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(180px,2fr) minmax(180px,2fr);gap:12px;align-items:center}
.widget-setting-row label{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.widget-setting-row label input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--dashboard-accent)}
.widget-setting-row output,.widget-fixed-size{color:#aebbc9;font-size:.76rem;white-space:nowrap}
#apps{grid-template-columns:repeat(96,minmax(0,1fr))!important;grid-auto-rows:1px!important;column-gap:0!important;row-gap:11px!important;grid-auto-flow:row!important}
#apps>.app-tile{position:relative;grid-column:span var(--tile-cols,24)!important;grid-row:span var(--tile-height-units,14)!important;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;height:calc(var(--tile-height-units,14)*12px - 11px)!important;min-width:0;min-height:0!important;overflow:hidden;margin-inline:7px!important}
#apps>.app-tile>.card{flex:1 1 auto;width:100%;height:auto!important;min-height:0!important;overflow:hidden}
#apps>.app-tile>.app-controls{flex:0 0 auto;min-height:27px}
#apps>.app-tile-placeholder{grid-column:span var(--tile-cols,24)!important;grid-row:span var(--tile-height-units,14)!important;height:calc(var(--tile-height-units,14)*12px - 11px)!important;min-height:0!important;margin-inline:7px!important}
.app-resize-grip{position:absolute;z-index:8;right:4px;bottom:31px;display:none;place-items:center;width:30px;height:30px;padding:0;border:1px solid #586777;border-radius:9px;background:#111923ed;color:#e7f2f0;font-size:19px;line-height:1;touch-action:none;cursor:nwse-resize}
.dashboard-layout-editing #apps>.app-tile>.app-resize-grip{display:grid}
.dashboard-layout-editing #apps>.app-tile>.app-controls{position:relative;z-index:9}
@media(max-width:600px){#dashboard-grid.dashboard-grid{grid-template-columns:repeat(96,minmax(0,1fr))!important;grid-auto-rows:1px!important;column-gap:0!important;row-gap:11px!important}#dashboard-grid>.dashboard-widget,#dashboard-grid>#pet-bottom-host.dashboard-widget,#dashboard-grid>#remote-companions.dashboard-widget{grid-column:1/-1!important}#apps{grid-template-columns:repeat(96,minmax(0,1fr))!important}#apps>.app-tile{grid-column:1/-1!important}.widget-setting-row{grid-template-columns:1fr}.widget-setting-row label{grid-template-columns:1fr auto}}
body[data-dashboard-theme="midnight"]{background:#000}
body[data-dashboard-theme="graphite"]{background:radial-gradient(ellipse at 15% -25rem,#303440 0,transparent 44rem),#17191f}
body[data-dashboard-theme="forest"]{background:radial-gradient(ellipse at 12% -22rem,#244b3b 0,transparent 42rem),radial-gradient(ellipse at 95% 18rem,#192c29 0,transparent 35rem),#0b1711}
.heading-dot{color:var(--dashboard-accent)}
#dashboard-settings-button{padding:8px 11px;color:#d5e5dc;border-color:#2e3a38;white-space:nowrap}
#dashboard-settings-button:hover{background:#18231f;border-color:var(--dashboard-accent)}
#apps{grid-template-columns:repeat(var(--app-columns,3),minmax(0,1fr))}
#apps .app-tile{min-width:0;transition:transform .2s,opacity .2s,filter .2s}
#apps .app-tile[data-size="small"]{grid-column:span 1}
#apps .app-tile[data-size="medium"]{grid-column:span 2}
#apps .app-tile[data-size="large"]{grid-column:1/-1}
#apps .app-tile[data-size="small"]>.card{min-height:144px;padding:17px 18px 14px}
#apps .app-tile[data-size="medium"]>.card{min-height:178px}
#apps .app-tile[data-size="large"]>.card{min-height:214px}
#apps .app-tile.is-dragging{opacity:.38;filter:saturate(.7)}
#apps .app-tile[draggable="true"]>.card{cursor:grab;touch-action:pan-y}
#apps .app-tile.is-dragging>.card{cursor:grabbing}
.dashboard-settings-dialog{width:min(720px,calc(100vw - 26px));max-height:min(88dvh,900px);overflow:auto;padding:clamp(18px,3vw,28px);border-color:#34404d;border-radius:22px}
.dashboard-settings-dialog .dialog-head{margin-bottom:11px}
.dashboard-settings-dialog .dialog-head h2{font-size:1.45rem;font-weight:630}
.settings-intro{margin:0 0 18px;color:#aeb9c7;font-size:.8rem;line-height:1.55}
.dashboard-settings-section{margin-top:13px;padding:14px;border:1px solid #293440;border-radius:16px;background:#0e1319}
.dashboard-settings-section h3{margin:0;color:#e7edf4;font-size:.82rem}
.status-text-setting{display:grid;gap:8px;color:#9eabb9;font-size:.68rem}
.status-text-setting input{width:100%;min-height:40px;padding:9px 11px;border:1px solid #303b47;border-radius:10px;background:#151c24;color:#eef3f8;font:inherit}
.widget-settings-list{display:grid;gap:6px;margin-top:11px}
.widget-setting-row{display:grid;grid-template-columns:minmax(0,1fr) 94px 112px;gap:9px;align-items:center;padding:8px 10px;border:1px solid #222d37;border-radius:12px;background:#111820}
.widget-setting-row>b{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#e6edf4;font-size:.72rem;font-weight:580}
.widget-setting-row label{display:grid;gap:4px;color:#9eabb9;font-size:.6rem}
.widget-setting-row select{width:100%;min-height:32px;padding:5px 7px;border:1px solid #303b47;border-radius:9px;background:#151c24;color:#eef3f8;font-size:.67rem}
.dashboard-setting-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:12px}
.dashboard-setting-controls label,.app-setting-row label{display:grid;gap:6px;color:#9eabb9;font-size:.66rem}
.dashboard-setting-controls select,.app-setting-row select{width:100%;min-height:36px;padding:7px 9px;border:1px solid #303b47;border-radius:10px;background:#151c24;color:#eef3f8;font-size:.73rem}
.dashboard-setting-controls input[type="color"],.app-setting-row input[type="color"]{width:100%;height:36px;padding:4px;border:1px solid #303b47;border-radius:10px;background:#151c24}
.settings-section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.settings-section-heading>span{color:#8d9aaa;font-size:.63rem}
.app-settings-list{display:grid;gap:6px;margin-top:11px}
.app-setting-row{display:grid;grid-template-columns:34px minmax(90px,1fr) minmax(100px,.8fr) 64px 42px;gap:9px;align-items:center;padding:8px;border:1px solid #222d37;border-radius:12px;background:#111820}
.app-setting-icon{display:grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:9px;background:color-mix(in srgb,var(--row-accent) 24%,#111820);color:var(--row-accent)}
.app-setting-icon img{width:24px;height:24px;object-fit:contain}
.app-setting-row>b{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#e6edf4;font-size:.72rem;font-weight:580}
.app-setting-row label{gap:4px;font-size:.6rem}
.app-setting-row select{min-height:32px;padding:5px 7px;font-size:.67rem}
.app-setting-row input[type="color"]{height:32px}
.app-order-controls{display:grid;grid-template-columns:repeat(2,20px);gap:2px}
.app-order-controls button{display:grid;place-items:center;width:20px;height:25px;padding:0;border-radius:7px;background:#171f28;color:#d8e4ee;font-size:.68rem}
.app-order-controls button:disabled{opacity:.28;cursor:not-allowed}
.app-order-controls button:not(:disabled):hover{border-color:var(--dashboard-accent);color:#fff}
.settings-empty{padding:12px;color:#9eabb9;font-size:.72rem}
.settings-footer{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.settings-footer .primary{width:auto;justify-content:center}
@media(max-width:840px){#apps{grid-template-columns:repeat(2,minmax(0,1fr))}#apps .app-tile[data-size="medium"]{grid-column:span 2}}
@media(max-width:600px){#dashboard-settings-button{padding:8px 9px}.settings-label{display:none}.dashboard-setting-controls{grid-template-columns:1fr 1fr}.dashboard-setting-controls label:first-child{grid-column:1/-1}.app-setting-row{grid-template-columns:28px minmax(48px,1fr) minmax(70px,.8fr) 43px 38px;gap:4px;padding:6px}.app-setting-icon{width:27px;height:27px}.app-setting-row>b{font-size:.61rem}.app-setting-row label{font-size:.52rem}.app-setting-row select{font-size:.58rem;padding:5px 3px}.app-setting-row input[type="color"]{height:27px}.app-order-controls{grid-template-columns:repeat(2,18px);gap:2px}.app-order-controls button{width:18px;height:23px}#apps{grid-template-columns:1fr}#apps .app-tile[data-size="small"],#apps .app-tile[data-size="medium"],#apps .app-tile[data-size="large"]{grid-column:1/-1}#apps .app-tile[data-size="small"]>.card{min-height:132px}}
@media(prefers-reduced-motion:reduce){#apps .app-tile{transition:none!important}}

/* A near-black canvas with one restrained, scroll-linked light behind the content. */
:root{background:#000}
body{min-height:100vh;background:#000;color:#f4f6fa;isolation:isolate}
body::before{content:"";position:fixed;z-index:0;pointer-events:none;--orb-size:min(88vw,88vh,1040px);width:var(--orb-size);height:var(--orb-size);right:calc(var(--orb-size) * -.42);top:calc(var(--orb-size) * -.42);border-radius:50%;background:radial-gradient(circle at 48% 48%,rgba(157,112,255,.29) 0,rgba(132,91,225,.21) 25%,rgba(82,115,225,.14) 44%,rgba(56,80,165,.06) 58%,transparent 72%);filter:brightness(var(--ambient-brightness,1)) saturate(1.35) hue-rotate(-12deg);opacity:var(--ambient-opacity,.65);transform:scale(var(--ambient-scale,.75));transform-origin:center;will-change:transform,opacity,filter;transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .42s ease;animation:ambient-orb-color 18s ease-in-out infinite alternate}
@keyframes ambient-orb-color{from{filter:brightness(var(--ambient-brightness,1)) saturate(1.35) hue-rotate(-14deg)}to{filter:brightness(var(--ambient-brightness,1)) saturate(1.55) hue-rotate(25deg)}}
body>main{position:relative;z-index:1}
.refresh-actions{display:grid;gap:7px;justify-items:stretch;min-width:134px}
.refresh-actions>.refresh{white-space:nowrap;padding:8px 11px}
.refresh-actions>.reload-page{font-size:.72rem;color:#cbd5df;border-color:#303a46;background:#10151b}
.refresh-actions>.reload-page:hover{background:#1a2630;border-color:#567362}
#pet-bottom-host.dashboard-widget{align-self:stretch;min-height:0;height:100%}
#pet-bottom-host #pet-lane.bottom-mode{min-height:0;padding:5px 4px 3px}
@media(min-width:601px) and (max-width:840px){#pet-bottom-host.dashboard-widget,#remote-companions.dashboard-widget{grid-column:span 1}}
.weather-card,.status-stat,#remote-companions,#pet-bottom-host{transition:border-color .24s ease,box-shadow .24s ease}
.weather-card:hover,.status-stat:hover,#remote-companions:hover,#pet-bottom-host:hover{border-color:#41554c;box-shadow:0 15px 38px #0005}
button:active{transform:scale(.985)}
@media(max-width:600px){body::before{--orb-size:90vw}}
@media(max-width:600px){.refresh-actions{min-width:114px}.refresh-actions>.refresh{padding:7px 8px;font-size:.7rem}.refresh-actions>.reload-page{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){body::before{transform:none;will-change:auto}#dashboard .dashboard-widget:not([hidden]){animation:none}}
.network-stat{grid-column:span var(--widget-cols,24)!important;padding:10px;min-width:0}
.network-stat .network-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;height:100%}
.network-stat .network-rate{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;padding:9px 11px;border:1px solid #28333e;border-radius:12px;background:linear-gradient(145deg,#151c24,#10151b)}
.network-stat .network-rate>span{color:#aeb8c8;font-size:.68rem;letter-spacing:.02em}
.network-stat .network-rate strong{font-size:clamp(.78rem,1.05vw,1rem);white-space:nowrap;font-variant-numeric:tabular-nums}
.network-stat .network-interface{display:none}
@media(max-width:600px){.network-stat{padding:8px}.network-stat .network-rates{gap:6px}.network-stat .network-rate{padding:8px}.network-stat .network-rate strong{font-size:.82rem}}
dialog.minecraft-details{width:min(550px,calc(100vw - 26px));max-height:min(82dvh,700px);overflow:auto;padding:20px 22px;background:linear-gradient(145deg,#20291d,#131912);border:2px solid #526542;border-radius:4px;box-shadow:0 8px 0 #090c08;color:#e5eadb}dialog.minecraft-details::backdrop{background:#070a08b8;backdrop-filter:blur(3px)}.minecraft-details .dialog-head{margin-bottom:15px;border-bottom:1px solid #3c4933;padding-bottom:11px}.minecraft-details .dialog-head .eyebrow{color:#a4d175;font:9px ui-monospace,monospace;letter-spacing:.15em}.minecraft-details .dialog-head h2{color:#eff4e8}.mc-modal-summary{display:flex;align-items:center;gap:12px;margin:3px 0 18px}.mc-modal-block{display:grid;place-items:center;width:42px;height:42px;border:2px solid #536644;background:#293520;color:#c0e39a;font-size:23px}.mc-modal-summary strong,.mc-modal-summary span{display:block}.mc-modal-summary strong{font-size:14px}.mc-modal-summary div span{color:#a4af99;font-size:11px}.mc-modal-select-label{display:grid;gap:6px;color:#bbc6b0;font-size:11px}.minecraft-details #minecraft-modal-server{width:100%;min-height:42px;padding:8px;border:2px solid #49583f;border-radius:3px;background:#10160f;color:#edf2e5}.mc-modal-server-state{display:grid;gap:7px;margin:14px 0;padding:11px;background:#141a12;border:1px solid #3a4632}.mc-modal-server-state>span:last-child{color:#a4af99;font-size:10px;overflow-wrap:anywhere}.mc-modal-status{width:max-content;padding:4px 7px;border:1px solid #545b4b;background:#1b2118;color:#c1c6bb;font:9px ui-monospace,monospace;text-transform:uppercase}.mc-modal-status.online{border-color:#668a45;background:#25341c;color:#c7ef9d}.minecraft-details .mc-modal-actions{display:flex;gap:7px}.minecraft-details .mc-modal-actions button{border:2px solid #526345;border-radius:3px;background:#293421;color:#edf3e7;padding:9px 11px;font-size:11px}.minecraft-details .mc-modal-note{color:#e4c587;font-size:10px}.mc-modal-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px;padding-top:11px;border-top:1px solid #3a4632}.mc-modal-footer a{color:#c3e299;font-size:11px;text-decoration:none}.mc-modal-footer span{color:#9ba792;font:9px ui-monospace,monospace}/* Minecraft controller dialog: preserve the user's tile colour as an accent only. */
#details.minecraft-details{width:min(560px,calc(100vw - 28px));max-height:min(86dvh,720px);overflow:auto;padding:clamp(18px,3vw,26px);border:1px solid #3b4939!important;border-top:2px solid var(--app-accent,#87b95a)!important;border-radius:20px!important;background:linear-gradient(155deg,#19211c,#111713 72%)!important;color:#e7ede5!important;box-shadow:0 28px 90px #000b!important}
#details.minecraft-details::backdrop{background:#080b09b8!important;backdrop-filter:blur(7px)}
#details.minecraft-details .dialog-head{display:flex;align-items:center;margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid #334033}
#details.minecraft-details .dialog-head .eyebrow{color:#a9c78d!important;font:9px ui-monospace,monospace;letter-spacing:.16em}
#details.minecraft-details .dialog-head h2{margin:3px 0 0;color:#edf3eb!important;font-size:1.42rem;font-weight:680;letter-spacing:-.025em}
#details.minecraft-details #close-details{width:38px;height:38px;border:1px solid #3c493d;border-radius:11px;background:#202820;color:#ecf2e8}
.mc-modal-summary{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.mc-modal-block{display:grid;place-items:center;width:46px;height:46px;border:1px solid #465542;border-radius:12px;background:#232d20;color:#c7e6a4;font-size:22px}
.mc-modal-block img{width:36px;height:36px;image-rendering:pixelated}
.mc-modal-summary strong{color:#eef3e9;font-size:14px;font-weight:650}.mc-modal-summary div span{color:#a5b19f;font-size:11px}
.mc-modal-select-label{gap:7px;color:#c0cbbd;font-size:11px;font-weight:600}
#details.minecraft-details #minecraft-modal-server{min-height:44px;padding:9px 12px;border:1px solid #435141;border-radius:10px;background:#111811;color:#eff3ec;font-size:13px}
.mc-modal-server-state{gap:9px;margin:13px 0 15px;padding:13px 14px;border:1px solid #344132;border-radius:12px;background:linear-gradient(140deg,#1c251c,#151c16)}
.mc-modal-status{padding:4px 8px;border-radius:999px;font:9px ui-monospace,monospace;letter-spacing:.06em}
.mc-modal-status.online{border-color:#557a3b;background:#26391d;color:#c8ecaa}
.mc-modal-server-state>span:last-child{color:#abb7a7;font-size:11px;line-height:1.5}
#details.minecraft-details .mc-modal-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0}
#details.minecraft-details .mc-modal-actions button{min-height:42px;border:1px solid #465343;border-radius:10px;background:#242e23;color:#e8eee4;font-size:12px;font-weight:650}
#details.minecraft-details .mc-modal-actions button:first-child:not(:disabled){border-color:#83ad5b;background:linear-gradient(180deg,#84ad5d,#6e914d);color:#11190c}
#details.minecraft-details .mc-modal-actions button:disabled{opacity:.43}
#details.minecraft-details .mc-modal-note{margin:12px 0 0;padding:10px 11px;border:1px solid #5a4b30;border-radius:9px;background:#272218;color:#ddc58f;font-size:10px;line-height:1.5}
.mc-modal-footer{margin-top:17px;padding-top:13px;border-top:1px solid #303b30}
.mc-modal-footer a{display:inline-flex;align-items:center;gap:7px;color:#c9e7ad;font-size:11px;font-weight:650}
.mc-modal-footer span{color:#92a08f;font-size:9px}
/* Minecraft quick controls use the dashboard's neutral dialog; app colour is a small accent only. */
#details.minecraft-details[open]{width:min(560px,calc(100vw - 28px));max-height:min(86dvh,720px);padding:clamp(18px,3vw,26px);overflow:auto;border:1px solid #303c47!important;border-top:3px solid var(--dashboard-accent,#8bcf9f)!important;border-radius:20px!important;background:#11171e!important;color:#edf2f7!important;box-shadow:0 28px 90px #000c!important}
#details.minecraft-details[open]::backdrop{background:#05080bb8!important;backdrop-filter:blur(8px)}
#details.minecraft-details .dialog-head{display:flex;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #27323d}
#details.minecraft-details .dialog-head .eyebrow{color:#94a5b6!important;font:10px/1.2 system-ui,sans-serif;letter-spacing:.14em}
#details.minecraft-details .dialog-head h2{margin:4px 0 0;color:#f4f7fa!important;font-size:1.55rem;font-weight:680;letter-spacing:-.03em}
#details.minecraft-details #close-details{width:38px;height:38px;border:1px solid #34414d;border-radius:12px;background:#1a232d;color:#e8eef4}
#details.minecraft-details .mc-modal-summary{display:flex;align-items:center;gap:12px;margin:0 0 20px}
#details.minecraft-details .mc-modal-block{display:grid;place-items:center;width:46px;height:46px;border:1px solid #344658;border-radius:13px;background:#17232e;color:#b6d2ed}
#details.minecraft-details .mc-modal-block img{width:34px;height:34px;image-rendering:pixelated}
#details.minecraft-details .mc-modal-summary strong{color:#edf3f8;font-size:14px;font-weight:650}
#details.minecraft-details .mc-modal-summary div span{color:#9eacb9;font-size:11px}
#details.minecraft-details .mc-modal-select-label{display:grid;gap:7px;color:#aebbc7;font-size:11px;font-weight:600}
#details.minecraft-details #minecraft-modal-server{min-height:44px;padding:9px 12px;border:1px solid #354451;border-radius:11px;background:#0d131a;color:#f0f4f7;font-size:13px}
#details.minecraft-details .mc-modal-server-state{display:grid;gap:9px;margin:13px 0 15px;padding:13px 14px;border:1px solid #2b3945;border-radius:13px;background:#151e27}
#details.minecraft-details .mc-modal-status{width:max-content;padding:4px 9px;border:1px solid #465360;border-radius:999px;background:#202a34;color:#c3cdd7;font:10px system-ui,sans-serif;font-weight:650}
#details.minecraft-details .mc-modal-status.online{border-color:#396b50;background:#173126;color:#a8e1bc}
#details.minecraft-details .mc-modal-server-state>span:last-child{color:#aab7c3;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
#details.minecraft-details .mc-modal-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0}
#details.minecraft-details .mc-modal-actions button{min-height:42px;border:1px solid #3a4855;border-radius:11px;background:#202b35;color:#e8eef4;font-size:12px;font-weight:650;transition:background .16s,border-color .16s,transform .16s}
#details.minecraft-details .mc-modal-actions button:hover:not(:disabled){border-color:#607384;background:#293744;transform:translateY(-1px)}
#details.minecraft-details .mc-modal-actions button:first-child:not(:disabled){border-color:var(--dashboard-accent,#8bcf9f);background:var(--dashboard-accent,#8bcf9f);color:#102019}
#details.minecraft-details .mc-modal-actions button:disabled{opacity:.42}
#details.minecraft-details .mc-modal-note{margin:13px 0 0;padding:10px 12px;border:1px solid #665638;border-radius:10px;background:#292316;color:#e6c98d;font-size:11px;line-height:1.5}
#details.minecraft-details .mc-modal-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid #27323d}
#details.minecraft-details .mc-modal-footer a{color:#b9d6f0;font-size:11px;font-weight:650;text-decoration:none}
#details.minecraft-details .mc-modal-footer a:hover{color:#fff;text-decoration:underline}
#details.minecraft-details .mc-modal-footer span{color:#91a0ae;font:10px system-ui,sans-serif}
@media(max-width:520px){#details.minecraft-details[open]{padding:17px;border-radius:17px!important}#details.minecraft-details .mc-modal-actions{grid-template-columns:1fr}#details.minecraft-details .mc-modal-footer{align-items:flex-start;flex-direction:column}}

/* Keep Minecraft's saved tile colour, while using it as a coherent modal theme. */
#details.minecraft-details[open]{border-color:color-mix(in srgb,var(--app-accent,#299448) 65%,#111820)!important;border-top:2px solid var(--app-accent,#299448)!important;background:linear-gradient(148deg,color-mix(in srgb,var(--app-accent,#299448) 94%,#fff 6%),color-mix(in srgb,var(--app-accent,#299448) 82%,#000 18%))!important;color:var(--app-fg,#f5f7f8)!important}
#details.minecraft-details .dialog-head{border-color:color-mix(in srgb,var(--app-fg,#fff) 25%,transparent)}
#details.minecraft-details .dialog-head .eyebrow,#details.minecraft-details .dialog-head h2,#details.minecraft-details .mc-modal-summary strong,#details.minecraft-details .mc-modal-summary div span,#details.minecraft-details .mc-modal-select-label,#details.minecraft-details .mc-modal-server-state>span:last-child,#details.minecraft-details .mc-modal-footer span{color:var(--app-fg,#f5f7f8)!important}
#details.minecraft-details .mc-modal-block{border-color:color-mix(in srgb,var(--app-fg,#fff) 25%,transparent);background:color-mix(in srgb,var(--app-accent,#299448) 55%,#10161b);color:var(--app-fg,#f5f7f8)}
#details.minecraft-details #minecraft-modal-server,#details.minecraft-details .mc-modal-server-state{border-color:color-mix(in srgb,var(--app-fg,#fff) 24%,transparent);background:color-mix(in srgb,var(--app-accent,#299448) 70%,#10161b);color:var(--app-fg,#f5f7f8)}
#details.minecraft-details .mc-modal-status{border-color:color-mix(in srgb,var(--app-fg,#fff) 30%,transparent);background:color-mix(in srgb,var(--app-accent,#299448) 58%,#10161b);color:var(--app-fg,#f5f7f8)}
#details.minecraft-details .mc-modal-status.online{border-color:#b6e4c0;background:#173126;color:#b6e4c0!important}
#details.minecraft-details .mc-modal-actions button{border-color:color-mix(in srgb,var(--app-fg,#fff) 27%,transparent);background:color-mix(in srgb,var(--app-accent,#299448) 60%,#111820);color:var(--app-fg,#f5f7f8)}
#details.minecraft-details .mc-modal-actions button:first-child:not(:disabled){border-color:color-mix(in srgb,var(--app-fg,#fff) 55%,transparent);background:color-mix(in srgb,var(--app-accent,#299448) 75%,#111820);color:var(--app-fg,#f5f7f8)}
#details.minecraft-details .mc-modal-note{border-color:color-mix(in srgb,var(--app-fg,#fff) 28%,transparent);background:color-mix(in srgb,var(--app-accent,#299448) 62%,#111820);color:var(--app-fg,#f5f7f8)}
#details.minecraft-details .mc-modal-footer{border-color:color-mix(in srgb,var(--app-fg,#fff) 25%,transparent)}
#details.minecraft-details .mc-modal-footer a{color:var(--app-fg,#f5f7f8)}

/* Keep the move and resize handles anchored to opposite corners of each dashboard card. */
.dashboard-layout-editing .dashboard-widget>.widget-tools{display:contents}
.dashboard-layout-editing .dashboard-widget>.widget-tools>.widget-drag-handle{position:absolute;z-index:8;top:7px;right:7px}
.dashboard-layout-editing .dashboard-widget>.widget-tools>.widget-resize-grip{position:absolute;z-index:8;top:auto;right:2px;bottom:2px}
@media(max-width:840px){.dashboard-layout-editing .dashboard-widget>.widget-tools>.widget-drag-handle{top:5px;right:5px}}


@media(max-width:600px){.widget-setting-row{grid-template-columns:minmax(0,1fr) 72px 92px;gap:6px;padding:7px}.widget-setting-row select{padding:5px 4px;font-size:.63rem}}

/* Smooth scene expansion uses the same measured card aspect and animates both ways. */
#pet-bottom-host.dashboard-widget.pet-scene-expanded{top:var(--pet-fullscreen-top,0px)!important;left:var(--pet-fullscreen-left,0px)!important;right:auto!important;bottom:auto!important;width:var(--pet-fullscreen-width,100vw)!important;height:var(--pet-fullscreen-height,100dvh)!important;transform-origin:top left!important;will-change:transform;border-radius:22px!important;transition:border-radius .58s ease!important}
body.pet-scene-expanded-open #pet-bottom-host.dashboard-widget.pet-scene-expanded{border-radius:0!important}
.pet-scene-expand-placeholder{box-sizing:border-box;grid-column:span var(--widget-cols,48)!important;grid-row:span var(--widget-height-units,24)!important;height:calc(var(--widget-height-units,24)*12px - 11px);min-width:0;min-height:0;margin-inline:7px;visibility:hidden;pointer-events:none}
body.pet-scene-expanded-open::after{opacity:1;transition:opacity .42s ease}
body::after{opacity:0;transition:opacity .42s ease}
@media(prefers-reduced-motion:reduce){#pet-bottom-host.dashboard-widget.pet-scene-expanded{transition-duration:.01ms!important}body::after,body.pet-scene-expanded-open::after{transition-duration:.01ms!important}}

/* Keep hover motion inside the visible app grid instead of clipping the moving card. */
#apps>.app-tile{overflow:visible!important;z-index:0}
#apps>.app-tile:hover,#apps>.app-tile:focus-within{z-index:4}
#apps>.app-tile>.card{overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#apps>.app-tile[data-tile-app="jellyfin"] .app-icon{isolation:isolate;contain:paint;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#apps>.app-tile[data-tile-app="jellyfin"]:hover .app-icon{transform:scale(1.04)!important}

/* Weather facts shrink with their card, so wind and temperature never escape the frame. */
#weather-card{min-width:0;container-type:inline-size;grid-template-columns:minmax(0,1.2fr) auto minmax(0,.9fr)}
#weather-card>.weather-copy,#weather-card>.weather-current,#weather-card>.weather-facts{min-width:0}
#weather-card>.weather-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
#weather-card>.weather-facts>div{min-width:0;padding-inline:clamp(7px,1vw,12px)}
#weather-card>.weather-facts strong{min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:clamp(.72rem,1.05vw,1.02rem)}
#weather-card #weather-temperature{font-size:clamp(2.25rem,4vw,3.75rem)}
@container (max-width:700px){#weather-card>.weather-copy{grid-area:auto;grid-column:1;grid-row:1}#weather-card>.weather-current{grid-area:auto;grid-column:2;grid-row:1}#weather-card>.weather-facts{grid-area:auto;grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr))}#weather-card>.weather-credit{grid-area:auto;grid-column:1/-1;grid-row:3}}

/* The title stays visually unchanged; clicking it enables direct inline editing. */
#home-status{cursor:text;outline:none;border-radius:5px;transition:color .18s ease,box-shadow .18s ease}
#home-status:hover{box-shadow:0 1px 0 color-mix(in srgb,var(--dashboard-accent) 55%,transparent)}
#home-status[contenteditable="true"]{box-shadow:0 2px 0 var(--dashboard-accent);caret-color:var(--dashboard-accent)}
#home-status[contenteditable="true"]:focus-visible{outline:2px solid color-mix(in srgb,var(--dashboard-accent) 70%,transparent);outline-offset:5px}
#pet-constellation-layer .pet-constellation{transform:translateY(3px);transition:opacity .76s ease,transform .76s ease,filter .76s ease}
#pet-constellation-layer.is-visible .pet-constellation{transform:none}

/* Keep module contents visible. Each widget sizes itself; tall content cannot stretch its neighbors. */
.dashboard-grid>.dashboard-widget{box-sizing:border-box;height:auto;max-height:none;overflow:visible;align-self:start!important;min-height:var(--widget-min-height,132px)}
#pet-bottom-host.dashboard-widget{height:auto!important;min-height:var(--widget-min-height,132px)!important;overflow:hidden!important;border-radius:22px!important}
@media(max-width:1400px){#weather-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy current" "facts facts" "credit credit"}.weather-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Keep the device chips readable without a nested scrollbar; only the document itself scrolls. */
.page-heading #presence-people{max-height:none!important;overflow:visible!important;overscroll-behavior:initial;scrollbar-width:none}
#pet-bottom-host.dashboard-widget{min-height:max(278px,var(--widget-min-height,132px))!important}
#pet-bottom-host.dashboard-widget,#remote-companions.dashboard-widget{min-height:max(288px,var(--widget-min-height,132px))!important}


/* Let hover shadows and the full app card render outside their grid cell. */
#dashboard-grid>.dashboard-widget:not(#pet-bottom-host):not(#remote-companions){overflow:visible!important}
#dashboard-grid>#weather-card.dashboard-widget#weather-card{overflow:hidden!important}
#dashboard-grid>#apps-widget.dashboard-widget,#apps{overflow:visible!important}
#apps>.app-tile{overflow:visible!important}
#apps>.app-tile:hover,#apps>.app-tile:focus-within{z-index:12}

/* Final tablet override: appears after the desktop clipping rule above. */
@media(max-width:840px){
  #dashboard-grid>#weather-card.dashboard-widget#weather-card{
    grid-column:1/-1!important;
    grid-row:span 28!important;
    height:calc(28*12px - 11px)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
}
#apps>.app-tile:hover>.card,#apps>.app-tile:focus-within>.card{transform:translateY(-2px) scale(1.005);box-shadow:0 16px 34px #0006}
#home-status{max-width:100%;overflow-wrap:anywhere}

/* Tablet-safe weather layout: allocate a dedicated row for all three facts. */
@media(max-width:840px){
  #dashboard-grid>#weather-card.dashboard-widget#weather-card{
    grid-column:1/-1!important;
    grid-row:span 26!important;
    height:calc(26*12px - 11px)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:minmax(0,1fr) auto auto!important;
    grid-template-areas:"copy current" "facts facts" "credit credit"!important;
    align-content:start!important;
    gap:10px clamp(10px,2vw,22px)!important;
    padding:20px clamp(16px,2vw,25px) 14px!important;
  }
  #dashboard-grid>#weather-card>.weather-copy{grid-area:copy!important;grid-column:1!important;grid-row:1!important;min-width:0!important;align-self:start!important}
  #dashboard-grid>#weather-card>.weather-current{grid-area:current!important;grid-column:2!important;grid-row:1!important;min-width:0!important;align-self:center!important}
  #dashboard-grid>#weather-card>.weather-facts{
    grid-area:facts!important;grid-column:1/-1!important;grid-row:2!important;
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;align-self:stretch!important;min-width:0!important;
    visibility:visible!important;opacity:1!important;
  }
  #dashboard-grid>#weather-card>.weather-facts>div{min-width:0!important;min-height:66px!important}
  #dashboard-grid>#weather-card>.weather-facts strong{white-space:normal!important;overflow-wrap:anywhere!important;font-size:clamp(.82rem,1.4vw,1.02rem)!important}
  #dashboard-grid>#weather-card>.weather-credit{grid-area:credit!important;grid-column:1/-1!important;grid-row:3!important;position:static!important;text-align:right!important;min-width:0!important}
}
@media(max-width:600px){
  #dashboard-grid>#weather-card.dashboard-widget#weather-card{
    grid-row:span 26!important;height:calc(26*12px - 11px)!important;min-height:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto auto auto!important;
    grid-template-areas:"copy" "current" "facts" "credit"!important;
    gap:8px!important;padding:17px 14px 12px!important;
  }
  #dashboard-grid>#weather-card>.weather-copy{grid-area:copy!important;grid-column:1!important;grid-row:1!important}
  #dashboard-grid>#weather-card>.weather-current{grid-area:current!important;grid-column:2!important;grid-row:1!important;justify-self:end!important;align-self:center!important}
  #dashboard-grid>#weather-card>.weather-facts{grid-area:facts!important;grid-column:1/-1!important;grid-row:2!important;align-self:stretch!important}
  #dashboard-grid>#weather-card>.weather-credit{grid-area:credit!important;grid-column:1/-1!important;grid-row:3!important;text-align:left!important}
  #dashboard-grid>#weather-card>.weather-facts>div{min-height:56px!important;padding:8px 7px!important}
  #dashboard-grid>#weather-card>.weather-facts>div>span{font-size:.67rem!important}
  #dashboard-grid>#weather-card>.weather-facts strong{font-size:clamp(.73rem,3.4vw,.9rem)!important}
}

/* URLs are stored per app; the inline note explains that DNS/ports remain network settings. */
.app-setting-row{grid-template-columns:34px minmax(90px,1fr) minmax(100px,.8fr) 64px 42px;grid-template-rows:auto auto}
@media(max-width:600px){
  html,body{max-width:100%;overflow-x:clip}
  main{width:100%;max-width:100%;padding-inline:12px}
  #dashboard-grid,#apps{width:100%;min-width:0}
  #dashboard-grid>.dashboard-widget,#apps>.app-tile{min-width:0}
  #dashboard-grid>#pet-bottom-host.dashboard-widget,#dashboard-grid>#remote-companions.dashboard-widget{grid-row:span var(--widget-height-units,25)!important;height:calc(var(--widget-height-units,25)*12px - 11px)!important;min-height:0!important;max-height:none!important;overflow:hidden!important;margin-inline:4px!important}
  #pet-bottom-host #pet-lane.bottom-mode{overflow:hidden!important}
  .app-setting-row{grid-template-columns:28px minmax(0,1fr) 92px 38px;grid-template-rows:auto auto;gap:6px;padding:7px}
  .app-setting-row>b{grid-column:2;grid-row:1}
  .app-setting-row>label{grid-row:2}
  .app-setting-row>label:nth-of-type(1){grid-column:2}
  .app-setting-row>label:nth-of-type(2){grid-column:3}
    .app-order-controls{grid-column:4;grid-row:1;justify-self:end}
}

/* One shared left edge: page title, dashboard modules, app section and app tiles. */
#dashboard>.page-heading>div:first-child{padding-inline-start:7px}
#dashboard-grid>#apps-widget.dashboard-widget{margin-inline:0!important}
#dashboard-grid>#apps-widget>.section-heading{margin-inline:7px}


/* Integrated document/link/file views and consistent modal controls. */
.dialog-head .close{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;line-height:1;font:22px/1 Arial,sans-serif;text-align:center;align-self:center}
.stat-files-open{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:1px solid #35404d;border-radius:9px;background:#111820;color:#dce8e3;cursor:pointer}
.home-tool-intro,.home-tool-form,.home-tool-search{display:grid;gap:12px;margin:12px 0}
.home-tool-form label,.home-tool-search label{display:grid;gap:6px;color:#aeb9c7;font-size:.82rem}
.home-tool-form input,.home-tool-search input{box-sizing:border-box;width:100%;min-height:42px;padding:10px 12px;border:1px solid #35404d;border-radius:11px;background:#0b1016;color:#f1f4f8}
.home-document-list,.home-links-list,.home-file-list{display:grid;gap:8px;margin-top:12px;max-height:none;overflow:visible;overscroll-behavior:auto}
#details.links-details{width:min(720px,calc(100vw - 32px));max-height:min(84dvh,760px);display:flex;flex-direction:column;overflow:hidden;padding:clamp(18px,3vw,26px);border:1px solid #303b48!important;border-radius:20px!important;background:#11171e!important;color:#edf2f7!important;box-shadow:0 28px 90px #000c!important}#details.links-details::backdrop{background:#05080bb8!important;backdrop-filter:blur(8px)}#details.links-details .dialog-head{flex:0 0 auto;margin-bottom:12px;padding-bottom:13px;border-bottom:1px solid #293440}#details.links-details .dialog-head .eyebrow{color:#91a2b5!important}#details.links-details .dialog-head h2{color:#f3f6f9!important;font-size:1.5rem;font-weight:680}#details.links-details #close-details{flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid #354351;border-radius:12px;background:#1a232d;color:#eef3f8;line-height:1}#details.links-details #detail-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 7px 3px 0;overscroll-behavior:contain;scrollbar-gutter:stable}#details.links-details #detail-body>p{color:#9eacbb!important}#details.links-details .home-tool-form{gap:9px;margin:2px 0 16px}#details.links-details .home-tool-form h3{margin:0 0 3px;color:#e6edf5!important;font-size:.9rem;font-weight:620}#details.links-details .home-tool-form label{gap:5px;color:#b5c1cf!important;font-size:.75rem}#details.links-details .home-tool-form input{min-height:42px;padding:9px 12px;border:1px solid #354351;border-radius:11px;background:#0b1016;color:#f1f4f8}#details.links-details .home-tool-form input::placeholder{color:#758394;opacity:1}#details.links-details #links-add-form button{width:auto;min-width:132px;justify-self:start;padding:10px 16px;border:1px solid #42634f;border-radius:11px;background:#1d3328;color:#d9f1e3}#details.links-details .home-links-list{display:grid;gap:8px;margin:0;max-height:none!important;overflow:visible!important;overscroll-behavior:auto!important}#details.links-details .home-link-row{align-items:center;padding:11px 13px;border:1px solid #2b3744;border-radius:12px;background:#151c24}#details.links-details .home-link-row>a{display:grid;gap:4px;min-width:0;color:#e8eef5}#details.links-details .home-link-row>a strong{font-size:.86rem;font-weight:650}#details.links-details .home-link-row>a span{color:#9eacbb;font-size:.7rem}#details.links-details .home-link-row details{flex:0 0 auto;color:#dfe7ef}#details.links-details .home-link-row summary{cursor:pointer;color:#bdc9d6;font-size:.76rem}#details.links-details .home-link-row details form{display:grid;gap:8px;width:min(350px,calc(100vw - 90px));padding:10px 0 2px}#details.links-details .home-link-row details label{display:grid;gap:4px;color:#aebac7;font-size:.7rem}#details.links-details .home-link-row details input{min-height:38px;padding:8px 10px;border:1px solid #354351;border-radius:9px;background:#0b1016;color:#f1f4f8}#details.links-details .home-link-row details button{min-height:36px;padding:7px 10px;border:1px solid #354351;border-radius:9px;background:#202a35;color:#e8eef5;font-size:.73rem}#details.links-details .home-link-row details button[data-link-delete]{border-color:#684448;background:#302024;color:#f0c9c8}
.home-document-row,.home-link-row,.home-file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:11px 13px;border:1px solid #273340;border-radius:12px;background:#10161d}
.home-document-open,.home-link-row>a,.home-file-name{display:grid;gap:4px;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;text-decoration:none;cursor:pointer;overflow-wrap:anywhere}
.home-document-open span,.home-link-row>a span,.home-file-meta{color:#9aa8b8;font-size:.74rem;overflow-wrap:anywhere}
.home-document-row>a,.home-file-row>a{flex:0 0 auto;color:#bcebd7;font-size:.8rem}
.document-preview-toolbar,.file-manager-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0}
.document-preview{width:100%;height:min(66vh,720px);border:1px solid #2a3542;border-radius:12px;background:#080b10}
.file-manager-toolbar nav{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px;color:#8391a1}
.file-manager-toolbar nav button,.file-upload-button,.file-manager-toolbar>button{padding:8px 10px;border:1px solid #303d4b;border-radius:9px;background:#131a22;color:#edf2f7;cursor:pointer}
.file-upload-button{display:inline-flex;align-items:center}.home-file-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto}.home-file-name{display:flex;align-items:center;gap:10px}.home-file-name:disabled{opacity:1;cursor:default}.home-file-name>span{color:#a6d8bf}
@media(max-width:600px){.home-document-row,.home-link-row,.home-file-row{gap:8px;padding:9px}.home-file-row{grid-template-columns:minmax(0,1fr) auto}.home-file-row>a{grid-column:1/-1;justify-self:end}.home-file-meta{font-size:.65rem}}

/* Keep resizing responsive by limiting repaint work to the module being resized. */
#dashboard-grid>.dashboard-widget.is-widget-resizing{will-change:width,height;contain:layout paint}
#apps>.app-tile.is-widget-resizing{will-change:width,height;contain:layout paint}

/* Make appearance controls visibly affect the live dashboard. */
.meter i{background:linear-gradient(90deg,color-mix(in srgb,var(--dashboard-accent,#9dddc3) 72%,white),var(--dashboard-accent,#9dddc3))!important}
.dashboard-layout-editing .dashboard-widget{outline-color:color-mix(in srgb,var(--dashboard-accent,#9dddc3) 58%,transparent)}
.dashboard-layout-editing .dashboard-widget:hover{outline-color:var(--dashboard-accent,#9dddc3)}
.dashboard-widget-placeholder,.app-tile-placeholder{border-color:color-mix(in srgb,var(--dashboard-accent,#9dddc3) 72%,transparent);background:color-mix(in srgb,var(--dashboard-accent,#9dddc3) 10%,transparent);box-shadow:inset 0 0 26px color-mix(in srgb,var(--dashboard-accent,#9dddc3) 8%,transparent)}
.dashboard-settings-dialog input:focus-visible,.dashboard-settings-dialog select:focus-visible,.dashboard-settings-dialog button:focus-visible{outline-color:var(--dashboard-accent,#9dddc3)}
#dashboard-grid .system-stat .stat-icon{color:var(--dashboard-accent,#9dddc3)}
#dashboard-grid .system-stat:hover,.weather-card:hover{border-color:color-mix(in srgb,var(--dashboard-accent,#9dddc3) 38%,#303846)}
#pet-bottom-host #pet-scene-expand{box-sizing:border-box;flex:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}

/* Compact arrival estimate beside the device controls. */
.presence-prediction{display:flex;align-items:center;gap:6px;min-width:0;max-width:min(260px,48vw);margin-left:auto;padding:4px 9px;border:1px solid #293441;border-radius:999px;background:#0b1016;color:#aeb9c7;font-size:.6rem;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums;transition:border-color .2s ease,background-color .2s ease}
.presence-prediction strong{color:#f1f5fa;font-size:.68rem;font-weight:600}
.presence-prediction small{max-width:92px;overflow:hidden;text-overflow:ellipsis;color:#aeb9c7;font-size:.58rem}
.presence-prediction[data-ready="true"]{border-color:color-mix(in srgb,var(--dashboard-accent,#9dddc3) 38%,#293441);background:color-mix(in srgb,var(--dashboard-accent,#9dddc3) 7%,#0b1016)}
@media(max-width:600px){.presence-prediction{max-width:min(190px,44vw);gap:4px;padding:4px 7px;font-size:.55rem}.presence-prediction small{max-width:58px}.presence-heading{gap:5px}}

.presence-forecast-choice{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;color:#b9c4d2;font-size:.62rem;white-space:nowrap;cursor:pointer}
.presence-forecast-choice input{width:13px;height:13px;margin:0;accent-color:var(--dashboard-accent,#9dddc3)}
@media(max-width:600px){.presence-history-summary{flex-wrap:wrap}.presence-forecast-choice{font-size:.58rem}.presence-forecast-choice input{width:15px;height:15px}}