/* The existing navigation and record layouts are shared by both design styles. */
.auth-color-filters{position:absolute;pointer-events:none}
.opora-brand,.overview-hero,.metric-emblem,.metric-chart{display:none}
.appearance-styles{display:flex;gap:14px;margin:0 0 24px;max-width:700px}
.style-option{display:flex;align-items:center;gap:14px;flex:1;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--panel);text-align:left;font-size:14px;font-weight:600}
.style-option[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.style-check{color:var(--accent-ink);margin-left:auto;min-width:16px}.style-swatch{display:grid;grid-template-columns:12px 1fr;gap:3px;width:52px;height:37px;padding:5px;border-radius:6px;border:1px solid var(--border)}
.style-swatch i{border-radius:2px;background:currentColor;opacity:.5}.style-swatch i:first-child{grid-row:span 2}.style-swatch-standard{background:linear-gradient(130deg,#061a21,#108b93);color:#70ebe1}.style-swatch-minimal{background:#eeeee9;color:#929781}
.glass-controls{display:grid;gap:18px}.glass-controls label>span{display:flex;justify-content:space-between;gap:15px}.glass-controls output{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}.glass-controls input[type=range]{padding:0;min-height:20px;accent-color:var(--accent);border:0;background:transparent;cursor:pointer;width:100%}
.metric-note{font-size:10px;color:var(--muted);margin-top:5px}.fund-explanation{font-size:10px;margin:5px 0 0;position:relative;text-align:center;z-index:3}.fund-explanation summary{color:var(--accent-ink);cursor:pointer;list-style:none}.fund-explanation summary::after{content:' ⌄'}.fund-breakdown{position:absolute;top:calc(100% + 10px);left:0;width:max(100%,270px);max-width:calc(100vw - 40px);padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 12px 35px #0004;text-align:left;z-index:30}.fund-breakdown dl{margin:0}.fund-breakdown dl>div{display:flex;justify-content:space-between;gap:18px;margin-bottom:8px}.fund-breakdown dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}.fund-breakdown dl>div:last-child{border-top:1px solid var(--border);padding-top:8px;font-weight:600}.fund-breakdown p{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 0}
/* Standard: the dimensional teal-glass material from the supplied OPORA reference. */
.fund-coins,.overview-shortcuts{display:none}
html[data-design=standard]{
 --opora-cyan:#008c98;--opora-cyan-bright:#06b7c1;--opora-highlight:#fff9e5;--opora-shadow:#0c53602b;
 --opora-depth:color-mix(in srgb,var(--panel) 72%,white);--opora-surface:color-mix(in srgb,var(--panel) calc(var(--glass-cards)*100%),transparent);
 --opora-button:color-mix(in srgb,var(--input) calc(var(--glass-buttons)*100%),transparent);
 --opora-edge:color-mix(in srgb,var(--opora-cyan) 30%,var(--border));
 --opora-sheen:color-mix(in srgb,#fff calc(var(--glass-glow)*52%),transparent);
 --opora-aura:color-mix(in srgb,var(--opora-cyan) calc(var(--glass-glow)*34%),transparent);
 --nav-glass-top:#37636b;--nav-glass-middle:#028b95;--nav-glass-bottom:#17474e;
}
html[data-theme=dark][data-design=standard]{
 --opora-cyan:#08c8d5;--opora-cyan-bright:#28edf0;--opora-highlight:#fff5d8;--opora-shadow:#000a;
 --opora-depth:color-mix(in srgb,var(--panel) 27%,#000b0d);
 --opora-sheen:color-mix(in srgb,#c0f9f0 calc(var(--glass-glow)*29%),transparent);
 --nav-glass-top:#fbfffa;--nav-glass-middle:#91c7c8;--nav-glass-bottom:#397782;
}
html[data-design=standard] .workspace{--sidebar-width:236px;background:radial-gradient(ellipse at 90% 28%,color-mix(in srgb,var(--opora-cyan) 8%,transparent),transparent 57%),var(--bg);color:var(--text)}
html[data-design=standard] .workspace.collapsed{--sidebar-width:76px}
html[data-design=standard] .main-wrap{position:relative;isolation:isolate}
html[data-design=standard] .workspace[data-view=overview] .main-wrap::before{content:'';position:absolute;inset:0 0 auto;height:380px;z-index:-1;background:linear-gradient(0deg,var(--bg),transparent 46%),linear-gradient(90deg,var(--bg),color-mix(in srgb,var(--bg) 10%,transparent) 50%,color-mix(in srgb,var(--bg) 58%,transparent)),var(--scene-image,url('/static/brand/opora-overview-panorama.webp')) center 39%/cover no-repeat;pointer-events:none}
html[data-design=standard] .sidebar{padding:110px 10px 14px;background:linear-gradient(180deg,color-mix(in srgb,var(--sidebar) 94%,transparent),var(--sidebar));border-right:1px solid color-mix(in srgb,var(--border) 75%,transparent)}
html[data-design=standard] .sidebar::after{top:87px}
html[data-design=standard] .sidebar>.brand{position:absolute;top:0;left:0;width:334px;height:88px;margin:0;padding:12px 20px;transform:none;overflow:visible;background:linear-gradient(90deg,var(--sidebar),color-mix(in srgb,var(--sidebar) 83%,transparent));border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
html[data-design=standard] .opora-brand{display:flex;align-items:center;gap:14px;width:100%;height:100%;min-width:0}
html[data-design=standard] .opora-brand>img{width:53px;height:62px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px #fff2) drop-shadow(0 3px 9px #06c1c721)}
html[data-design=standard] .opora-brand>span{font-size:40px;letter-spacing:4px;font-weight:500;line-height:1.05;color:var(--text)}
html[data-design=standard] .opora-brand small{display:block;margin-top:5px;font-size:7px;font-weight:400;letter-spacing:1.55px;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
html[data-design=standard] .brand-image,html[data-design=standard] .brand-compact{display:none!important}
html[data-design=standard] .collapsed .brand{width:76px;padding:16px 15px}
html[data-design=standard] .collapsed .opora-brand{justify-content:center}
html[data-design=standard] .collapsed .opora-brand>span{display:none}
html[data-design=standard] .collapsed .opora-brand>img{width:40px;height:48px}
html[data-design=standard] .topbar{height:88px;padding:0 24px 0 154px;background:color-mix(in srgb,var(--sidebar) 47%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);backdrop-filter:blur(5px)}
html[data-design=standard] .collapsed .topbar{padding-left:24px}
html[data-design=standard] .header-search{max-width:560px;border-radius:14px!important;min-height:46px}
html[data-design=standard] .header-actions{margin-left:auto;gap:22px}
html[data-design=standard] .avatar{width:48px;height:48px;font-size:24px;color:var(--accent);border-color:var(--accent);background:radial-gradient(ellipse at 25% 15%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 75%),var(--opora-depth);box-shadow:inset 0 1px 1px var(--opora-sheen),0 4px 12px #0002}
html[data-design=standard] .notification-button>svg{width:25px;height:25px;color:var(--accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 25%,transparent))}
html[data-design=standard] .nav-link{padding:13px 12px;min-height:48px;border:1px solid transparent;border-radius:10px;color:var(--text);font-size:14px;gap:14px;margin-bottom:5px}
html[data-design=standard] .workspace :is(.nav-link,.overview-shortcut,.hub-illustration)>svg{width:24px;height:24px;stroke:url(#opora-nav-glass);stroke-width:1.9;fill:color-mix(in srgb,var(--opora-cyan) 8%,transparent);filter:drop-shadow(0 1px 0 #002a35) drop-shadow(0 -1px 0 color-mix(in srgb,#fff calc(var(--glass-glow)*50%),transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--opora-cyan) calc(var(--glass-glow)*34%),transparent))}
html[data-design=standard] .nav-link.active{--nav-glass-top:#e2fffa;--nav-glass-middle:#42f0eb;--nav-glass-bottom:#03a4b4;color:var(--text);border-color:var(--opora-edge);background:radial-gradient(ellipse at 90% 0%,var(--opora-aura),transparent 72%),linear-gradient(115deg,color-mix(in srgb,var(--opora-cyan) 70%,var(--panel)),color-mix(in srgb,var(--opora-cyan) 15%,var(--opora-depth)));box-shadow:inset 0 1px 1px var(--opora-sheen),inset 1px 0 2px var(--opora-sheen),inset 0 -2px 9px var(--opora-aura),0 5px 18px #0002}
html[data-design=standard] .nav-children{border-color:color-mix(in srgb,var(--opora-cyan) 32%,var(--border));margin-left:25px;padding-left:16px}
html[data-design=standard] main{padding:24px 22px 40px}
html[data-design=standard] .workspace :is(.panel,.metric,.editor-section,.preview-panel,.hub-card,.role-card,.comm-card){
 background:radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--opora-cyan) 9%,transparent),transparent 63%),radial-gradient(ellipse at 3% 0%,var(--opora-sheen),transparent 24%),linear-gradient(125deg,var(--opora-surface),var(--opora-depth) 57%,var(--opora-surface));
 border:1px solid var(--opora-edge);border-radius:14px;
 box-shadow:inset 0 1px 1px var(--opora-sheen),inset 1px 0 1px var(--opora-sheen),inset 0 -1px 3px var(--opora-aura),0 8px 24px var(--opora-shadow);
 backdrop-filter:blur(var(--glass-blur)) saturate(145%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(145%);
}
html[data-design=standard] .workspace :is(.metric,.hub-card,.overview-shortcut){background:radial-gradient(ellipse at 105% -10%,var(--opora-aura),transparent 68%),radial-gradient(ellipse at -5% 0%,var(--opora-sheen),transparent 32%),radial-gradient(ellipse at 95% 108%,var(--opora-aura),transparent 58%),linear-gradient(135deg,var(--opora-surface),var(--opora-depth) 57%,var(--opora-surface))}
html[data-design=standard] .workspace :is(.primary,.secondary,.header-search,.style-option,.view-switch,.requests-mode,.icon-button,.chat-tool){border:1px solid var(--opora-edge);background:radial-gradient(ellipse at 12% -15%,var(--opora-sheen),transparent 62%),linear-gradient(150deg,var(--opora-button),var(--opora-depth));box-shadow:inset 0 1px 1px var(--opora-sheen),inset 0 -1px 4px var(--opora-aura),0 3px 11px #00151920;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
html[data-design=standard] .workspace .primary{background:radial-gradient(ellipse at 15% 0%,#fff9,transparent 65%),linear-gradient(125deg,color-mix(in srgb,var(--accent) 80%,#fff7dc),var(--accent));border-color:color-mix(in srgb,var(--accent) 65%,white);color:var(--accent-button-ink);box-shadow:inset 0 1px 2px #fff9,inset 0 -2px 4px #b5833424,0 4px 18px color-mix(in srgb,var(--accent) 20%,transparent)}
html[data-design=standard] .workspace :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){background:color-mix(in srgb,var(--input) 70%,transparent);border-color:var(--opora-edge);box-shadow:inset 0 1px 5px #0001}
html[data-design=standard] .workspace .header-search input{background:transparent;border:0;box-shadow:none;color:var(--opora-cyan)}
html[data-design=standard] .workspace .header-search input::placeholder{color:color-mix(in srgb,var(--opora-cyan) 75%,var(--muted))}
html[data-design=standard] .workspace :is(th,.panel-heading,.record-section-heading,.preview-panel-heading,.calendar-toolbar){background:transparent;border-color:color-mix(in srgb,var(--border) 70%,transparent)}
html[data-design=standard] .workspace :is(.section-search-results,.account-popover,.control-options,.controls-popover,.weather-popover,.fund-breakdown){background:var(--panel);border-color:var(--opora-edge)}
html[data-design=standard] .workspace :is(.record-section-heading svg,.preview-panel-heading svg){color:var(--accent);filter:drop-shadow(0 1px 0 #00323e) drop-shadow(0 0 4px var(--opora-aura))}
html[data-design=standard] .quick-access{background:color-mix(in srgb,var(--sidebar) 52%,transparent);border-color:color-mix(in srgb,var(--border) 65%,transparent);padding-inline:22px}
html[data-design=standard] .workspace[data-view=overview] #quick-access{display:none}
html[data-design=standard] .overview-hero{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:flex-start;gap:28px;min-height:127px;margin:-2px 0 20px;padding:0;overflow:visible}
html[data-design=standard] .overview-hero::before,html[data-design=standard] .overview-hero::after{display:none}
.overview-welcome{max-width:65%;align-self:flex-start}.overview-welcome h1{font-size:clamp(28px,2.7vw,42px);font-weight:650;line-height:1.18;letter-spacing:-.8px;text-wrap:balance;margin:0 0 10px}.hero-name{color:var(--accent-ink)}.overview-welcome p{font-size:clamp(13px,1.24vw,19px);font-weight:400;color:var(--muted);margin:0}.overview-context{display:flex;align-items:flex-end;gap:28px;padding-top:4px;min-width:250px;flex-direction:column}.overview-quote{color:var(--accent-ink);font-size:15px;line-height:1.45;margin:0;text-align:left;align-self:flex-start}.overview-today{display:flex;align-items:center;gap:18px}#overview-date{display:flex;flex-direction:column;gap:3px;white-space:nowrap;font-size:10px}#overview-date strong{font-size:11px;font-weight:550}
.weather-status{font-size:11px;color:var(--muted)}.weather-details{position:relative}.weather-details summary{display:flex;gap:8px;align-items:center;cursor:pointer;list-style:none}.weather-details summary::-webkit-details-marker{display:none}.weather-symbol{display:flex}.weather-symbol svg{width:27px;height:27px;color:var(--accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 25%,transparent))}.weather-details summary strong{font-size:19px;font-weight:500;line-height:1.2}.weather-details summary small{display:block;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--muted)}.weather-popover{position:absolute;z-index:40;right:0;top:calc(100% + 12px);width:270px;background:var(--panel);border:1px solid var(--border);box-shadow:0 12px 30px #0004;padding:18px;border-radius:12px;font-size:13px}.weather-popover p{font-size:11px;color:var(--muted);margin:10px 0}.weather-attribution a{text-decoration:underline}.weather-popover .row-action{display:block;margin-top:10px;font-size:11px}
html[data-design=standard] .overview-shortcuts{display:flex;align-items:stretch;gap:16px;margin:0 0 20px;flex-wrap:wrap}
html[data-design=standard] .overview-shortcut{--nav-glass-top:#b4ffff;--nav-glass-middle:#02e0e6;--nav-glass-bottom:#029fac;flex:1;display:flex;align-items:center;gap:16px;padding:15px 20px;min-height:68px;border:1px solid var(--opora-edge);border-radius:12px;box-shadow:inset 0 1px 1px var(--opora-sheen),inset 1px 0 1px var(--opora-sheen),inset 0 -2px 8px var(--opora-aura),0 5px 16px #0003;min-width:170px;transition:box-shadow .18s,transform .18s}
html[data-design=standard] .overview-shortcut:hover{transform:translateY(-2px);box-shadow:inset 0 1px 2px var(--opora-sheen),0 3px 24px var(--opora-aura)}
html[data-design=standard] .overview-shortcut svg{width:31px;height:31px;flex:none;stroke-width:2}
.overview-shortcut span{min-width:0}.overview-shortcut strong{display:block;font-size:14px;font-weight:600;white-space:nowrap}.overview-shortcut small{display:block;color:var(--opora-cyan);font-size:11px;margin-top:5px;white-space:nowrap}
html[data-design=standard] .overview-shortcuts .shortcut-toggle{width:30px;flex:none;align-self:center;height:34px;color:var(--accent);border:1px solid var(--border);border-radius:9px;font-size:19px}.overview-shortcuts .shortcut-toggle span{display:none}
html[data-design=standard] .overview-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px;align-items:stretch}
html[data-design=standard] .overview-metrics .metric{display:block;position:relative;min-height:158px;padding:16px 18px 13px;text-align:left;overflow:visible;border-radius:14px;isolation:isolate}
html[data-design=standard] .overview-metrics .metric-label{margin:0 0 15px 54px;min-height:40px;font-size:14px;font-weight:400;color:var(--text);line-height:1.42;max-width:185px}
html[data-design=standard] .metric-emblem{display:flex;align-items:center;position:absolute;left:16px;top:12px;width:42px;height:44px;color:var(--opora-cyan-bright)}
html[data-design=standard] .metric-emblem img{width:100%;height:100%;object-fit:contain}.metric-emblem svg{width:32px;height:32px}
html[data-design=standard] .sculpted-icon{mix-blend-mode:multiply;filter:url(#opora-icon-light)}
html[data-theme=dark][data-design=standard] .sculpted-icon{mix-blend-mode:screen;filter:url(#opora-icon-cutout)}
html[data-design=standard] .overview-metrics .metric-value{font-size:clamp(26px,2.38vw,37px);letter-spacing:-.9px;font-weight:650;line-height:1.13;position:relative;z-index:2;white-space:nowrap;pointer-events:none}
html[data-design=standard] .overview-metrics .metric-note{font-size:11px;line-height:1.4;max-width:58%;margin-top:12px;position:relative;z-index:2}
html[data-design=standard] .metric-chart{display:block;position:absolute;width:46%;height:99px;right:12px;bottom:8px;overflow:visible;color:var(--opora-cyan);z-index:1}
.chart-line{fill:none;stroke:var(--opora-cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.chart-line-glow{fill:none;stroke:var(--opora-cyan);stroke-width:5;filter:blur(4px);opacity:.4}.chart-dot{fill:var(--opora-cyan-bright);stroke:none}.chart-dot:hover,.chart-dot:focus{r:3.6;fill:var(--accent);outline:0}.chart-stop-light{stop-color:#d5fff8}.chart-stop-cyan{stop-color:var(--opora-cyan)}.chart-stop-deep{stop-color:var(--opora-depth);stop-opacity:.3}.chart-bar-highlight{fill:none;stroke:#cafff0;stroke-width:.75;opacity:.7}.chart-bar:hover,.chart-bar:focus{filter:brightness(1.25);outline:0}.chart-empty{border-bottom:1px solid color-mix(in srgb,var(--opora-cyan) 30%,transparent);text-align:right;align-content:end;padding-bottom:5px}.chart-empty span{font-size:9px;color:var(--muted)}
html[data-design=standard] .metric-fund .metric-chart{left:16px;bottom:0;width:62%;height:42px;opacity:.7}
html[data-design=standard] .fund-coins{display:block;position:absolute;right:0;bottom:6px;width:113px;height:112px;object-fit:contain;pointer-events:none;z-index:1}
html[data-design=standard] .metric-fund .metric-note{margin-top:8px}
html[data-design=standard] .metric:has(.fund-explanation[open]){z-index:10}
html[data-design=standard] .fund-explanation{text-align:left;position:static;max-width:62%;font-size:10px;margin-top:5px;z-index:3}
html[data-design=standard] .fund-breakdown{left:0;top:calc(100% + 8px);width:310px}
html[data-design=standard] .calendar-layout{align-items:stretch;grid-template-columns:minmax(380px,1.15fr) minmax(330px,1fr);gap:18px}
html[data-design=standard] .day-panel{display:flex;flex-direction:column}
html[data-design=standard] .day-body{min-height:240px;flex:1}
html[data-design=standard] .calendar-toolbar{padding:18px 20px;border:0}
html[data-design=standard] .month-picker{gap:10px}
html[data-design=standard] .month-picker h2{font-size:20px;min-width:0;order:-1;margin-right:8px;text-transform:none}
html[data-design=standard] .month-picker::before{content:'';width:28px;height:28px;flex:none;order:-2;background:var(--accent);mask:url('/static/brand/opora-calendar.svg') center/contain no-repeat}
html[data-design=standard] .calendar-day{height:57px;position:relative;background:transparent;border:1px solid transparent;border-radius:8px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px;padding:5px 3px;flex-wrap:wrap;align-content:center}
html[data-design=standard] .calendar-day:hover{background:color-mix(in srgb,var(--opora-cyan) 10%,transparent)}
html[data-design=standard] .calendar-day .day-number{flex:none;width:100%;height:20px;font-size:12px;line-height:20px;color:inherit;background:none}
html[data-design=standard] .calendar-day .calendar-mark{font-size:0;line-height:0;display:block;padding:0;width:6px;height:6px;min-height:6px;border-radius:50%;overflow:hidden;background:var(--opora-cyan);box-shadow:0 0 6px color-mix(in srgb,var(--opora-cyan) 48%,transparent);flex:none}
html[data-design=standard] .calendar-day .calendar-mark.task-mark{background:var(--accent);box-shadow:0 0 5px color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-design=standard] .calendar-day .mark-label{display:none}
html[data-design=standard] .calendar-day.today .day-number{font-weight:650}
html[data-design=standard] .calendar-day.selected{background:radial-gradient(ellipse at 4% 0%,var(--opora-sheen),transparent 72%),linear-gradient(135deg,color-mix(in srgb,var(--opora-cyan) 53%,var(--panel)),var(--opora-depth));border-color:var(--opora-edge);box-shadow:inset 0 1px 1px var(--opora-sheen),inset 1px 0 1px var(--opora-sheen),0 0 12px color-mix(in srgb,var(--opora-cyan) 13%,transparent)}
html[data-design=standard] .calendar-legend{border:0;padding:15px 20px}
html[data-design=standard] .shift-dot{background:var(--opora-cyan);box-shadow:0 0 6px var(--opora-aura)}
html[data-design=standard] .day-panel .panel-heading{padding:22px}
html[data-design=standard] .day-panel .panel-heading h2{font-size:18px}
html[data-design=standard] .workspace .palette-preview{min-height:360px;background-image:linear-gradient(135deg,var(--opora-sheen),transparent),linear-gradient(145deg,color-mix(in srgb,var(--panel) 65%,transparent),var(--opora-surface)),var(--scene-image,url('/static/brand/opora-overview-panorama.webp'));background-size:cover;background-position:center}
@media(max-width:1250px){html[data-design=standard] .sidebar>.brand{width:286px;padding-inline:17px}html[data-design=standard] .opora-brand{gap:10px}html[data-design=standard] .opora-brand>img{width:45px;height:54px}html[data-design=standard] .opora-brand>span{font-size:34px;letter-spacing:3px}html[data-design=standard] .opora-brand small{font-size:6px;letter-spacing:1.2px}html[data-design=standard] .topbar{padding-left:104px}html[data-design=standard] .collapsed .brand{width:76px}html[data-design=standard] .overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-welcome{max-width:60%}.overview-welcome h1{font-size:32px}.overview-quote{font-size:13px}.overview-context{min-width:230px;gap:18px}html[data-design=standard] .overview-shortcuts{gap:12px}html[data-design=standard] .overview-shortcut{padding:13px;min-width:140px;gap:9px}.overview-shortcut small{font-size:10px}html[data-design=standard] .overview-metrics .metric-value{font-size:34px}html[data-design=standard] .calendar-layout{grid-template-columns:1fr}html[data-design=standard] .calendar-day{height:52px}}
@media(max-width:900px){html[data-design=standard] .sidebar>.brand{width:202px;padding-inline:13px}html[data-design=standard] .opora-brand>img{width:34px;height:42px}html[data-design=standard] .opora-brand>span{font-size:25px;letter-spacing:1px}html[data-design=standard] .opora-brand small{font-size:4.5px;letter-spacing:.7px}html[data-design=standard] .topbar{padding-left:22px}.overview-welcome{max-width:100%}.overview-context{min-width:0;flex-direction:row;gap:14px;align-items:center}.overview-quote{display:none}html[data-design=standard] .overview-hero{flex-direction:column;gap:20px;min-height:160px}.overview-welcome h1{font-size:32px}html[data-design=standard] .collapsed .brand{width:76px}}
@media(max-width:720px){html[data-design=standard] .workspace,html[data-design=standard] .workspace.collapsed{--sidebar-width:64px}html[data-design=standard] .sidebar{padding:82px 8px 12px}html[data-design=standard] .sidebar>.brand,html[data-design=standard] .collapsed .brand{width:64px;height:64px;padding:10px}html[data-design=standard] .sidebar::after{top:63px}html[data-design=standard] .opora-brand{justify-content:center}html[data-design=standard] .opora-brand>span{display:none}html[data-design=standard] .opora-brand>img{width:35px;height:42px}html[data-design=standard] .nav-link{padding:10px 0;min-height:44px}html[data-design=standard] .nav-link>svg{width:22px;height:22px}html[data-design=standard] .topbar,html[data-design=standard] .collapsed .topbar{height:64px;padding:0 15px}html[data-design=standard] .header-actions{gap:8px}html[data-design=standard] .avatar{width:32px;height:32px;font-size:15px}html[data-design=standard] .header-search{min-height:36px;border-radius:9px!important}html[data-design=standard] main{padding:22px 15px 32px}html[data-design=standard] .overview-hero{min-height:170px;gap:16px;margin-bottom:20px}.overview-welcome h1{font-size:29px}.overview-welcome p{font-size:13px}.overview-context{align-items:stretch;width:100%}.overview-today{gap:12px;justify-content:space-between;width:100%}.weather-popover{width:240px}html[data-design=standard] .overview-shortcuts{gap:10px}html[data-design=standard] .overview-shortcut{min-width:120px;padding:12px;min-height:70px}html[data-design=standard] .overview-shortcut>svg{width:25px;height:25px}.overview-shortcut strong{font-size:12px}.overview-shortcut small{white-space:normal;font-size:10px}html[data-design=standard] .overview-metrics{gap:12px}html[data-design=standard] .calendar-toolbar{padding:16px 12px;flex-wrap:wrap;gap:10px}html[data-design=standard] .month-picker h2{font-size:16px;margin-right:0}html[data-design=standard] .month-picker::before{width:23px;height:23px}html[data-design=standard] .calendar-toolbar #today{margin-left:auto}html[data-design=standard] .calendar-day{height:48px}html[data-design=standard] .calendar-legend{padding:12px;gap:12px}html[data-design=standard] .fund-breakdown{width:260px;max-width:calc(100vw - 100px);left:auto;right:0}.fund-breakdown dl>div{gap:10px;font-size:10px}.appearance-styles{gap:9px}.style-option{padding:10px;gap:8px;font-size:12px}.style-swatch{width:34px;height:30px;grid-template-columns:7px 1fr}.appearance-toolbar .toolbar-actions{flex-wrap:wrap}}
@media(max-width:560px){html[data-design=standard] .overview-metrics{grid-template-columns:minmax(0,1fr)}html[data-design=standard] .overview-shortcut{flex-basis:40%;min-width:0}.overview-shortcut small{display:none}html[data-design=standard] .overview-shortcut>svg{width:21px;height:21px}html[data-design=standard] .overview-shortcut{gap:8px;padding:10px;min-height:50px}.overview-shortcut strong{font-size:11px;white-space:normal}html[data-design=standard] .overview-shortcuts .shortcut-toggle{height:26px;font-size:16px}.overview-welcome h1{font-size:27px}html[data-design=standard] .overview-metrics .metric-value{font-size:33px}html[data-design=standard] .overview-metrics .metric-label{font-size:13px}html[data-design=standard] .metric-chart{width:44%}html[data-design=standard] .fund-coins{width:100px;height:105px}}
@media(max-width:460px){#appearance-form .color-grid{grid-template-columns:minmax(0,1fr)}.style-option{flex-direction:column;position:relative;text-align:center}.style-check{position:absolute;right:9px;top:8px}html[data-design=standard] .month-picker{gap:6px}html[data-design=standard] .month-picker h2{font-size:14px}html[data-design=standard] .month-picker::before{width:20px;height:20px}html[data-design=standard] .calendar-toolbar .icon-button{width:24px;height:25px}html[data-design=standard] .overview-metrics .metric-value{font-size:31px}}
@media(prefers-reduced-motion:reduce){html[data-design=standard] .overview-shortcut{transition:none}}
@media(prefers-reduced-transparency:reduce){html[data-design=standard]{--opora-surface:var(--panel);--opora-button:var(--input);--glass-blur:0px!important}}

html[data-design=standard] .overview-shortcut>svg{stroke:var(--opora-cyan-bright)}

.chart-area,.chart-line,.chart-line-glow{pointer-events:none}html[data-design=standard] .fund-explanation summary{position:relative;z-index:3}html[data-design=standard] .metric-fund .metric-chart{pointer-events:none}

html[data-design=standard] .workspace .nav-link>svg{filter:drop-shadow(0 1px 0 #002a35) drop-shadow(0 -0.5px 0 color-mix(in srgb,#fff calc(var(--glass-glow)*36%),transparent)) drop-shadow(0 0 3px color-mix(in srgb,var(--opora-cyan) calc(var(--glass-glow)*22%),transparent))}
html[data-design=standard] .calendar-day .calendar-mark{min-width:6px}
html[data-design=standard] .month-picker h2{text-transform:capitalize;white-space:nowrap}
@media(max-width:560px){html[data-design=standard] .overview-metrics .metric{min-height:172px}html[data-design=standard] .metric-chart{width:38%;height:60px;bottom:8px;right:9px}html[data-design=standard] .metric-fund .metric-chart{height:30px;bottom:0;width:54%}html[data-design=standard] .fund-coins{width:80px;height:70px;bottom:6px;right:5px}html[data-design=standard] .month-picker{gap:5px}html[data-design=standard] .month-picker h2{font-size:13px}}
/* One continuous scene and header material, including the area behind the brand. */
html[data-design=standard] .workspace{position:relative;--header-height:88px;--scene-width:clamp(960px,86vw,1660px);--scene-offset:-64px}
html[data-design=standard] .main-wrap{isolation:auto}
html[data-design=standard] .workspace[data-view=overview] .main-wrap::before{display:none}
html[data-design=standard] .workspace[data-scene=panorama]::before{content:'';position:absolute;inset:0 0 auto;height:320px;pointer-events:none;background:linear-gradient(180deg,transparent 170px,var(--bg) 310px),linear-gradient(90deg,var(--bg) 12%,color-mix(in srgb,var(--bg) 58%,transparent) 34%,transparent 52%,transparent 68%,color-mix(in srgb,var(--bg) 94%,transparent) 81%,var(--bg) 100%),var(--scene-image,url('/static/brand/opora-overview-panorama.webp')) calc(50% + var(--scene-offset)) -80px/var(--scene-width) auto no-repeat;z-index:0;
 /* Fade at the actual picture edges, including on wide screens. */
 --scene-fade:linear-gradient(90deg,transparent calc(50% - var(--scene-width)/2 + var(--scene-offset)),#000 calc(50% - var(--scene-width)/2 + var(--scene-offset) + 160px),#000 calc(50% + var(--scene-width)/2 + var(--scene-offset) - 160px),transparent calc(50% + var(--scene-width)/2 + var(--scene-offset)));
 mask-image:var(--scene-fade);-webkit-mask-image:var(--scene-fade)}
html[data-design=standard] .workspace::after{content:'';position:fixed;inset:0 0 auto;height:var(--header-height);background:color-mix(in srgb,var(--sidebar) 85%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);z-index:14;pointer-events:none}
html[data-design=standard] .workspace[data-scene=panorama]:not(.page-scrolled)::after{background:linear-gradient(90deg,color-mix(in srgb,var(--sidebar) 18%,transparent),transparent 45%,transparent 68%,color-mix(in srgb,var(--sidebar) 12%,transparent));border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design=standard] .sidebar{background:linear-gradient(180deg,transparent var(--header-height),var(--sidebar) var(--header-height));border-right:0}
html[data-design=standard] .sidebar::before{content:'';position:absolute;inset:var(--header-height) 0 0 auto;width:1px;background:color-mix(in srgb,var(--border) 75%,transparent);pointer-events:none}
html[data-design=standard] .sidebar::after{display:none}
html[data-design=standard] .sidebar>.brand{background:transparent;border:0}
html[data-design=standard] .topbar{position:fixed;top:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design=standard] main{position:relative;z-index:1}
html[data-design=standard] .workspace #quick-access{background:color-mix(in srgb,var(--sidebar) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-design=standard] .workspace[data-scene=panorama]:not(.page-scrolled) #quick-access{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design=standard] .workspace[data-scene=panorama] .quick-access-links>a{background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-design=standard] .navigation-hub{padding-top:80px}
@media(max-width:900px){html[data-design=standard] .navigation-hub{padding-top:48px}}
@media(max-width:720px){html[data-design=standard] .navigation-hub{padding-top:36px}}
html[data-design=standard] .workspace.page-scrolled::after{background:var(--sidebar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 3px 14px #00000014}
html[data-design=standard] .overview-hero{min-height:88px;margin-bottom:20px;gap:24px}
html[data-design=standard] .overview-context{width:260px;min-width:250px;gap:8px;padding:4px 0 0;align-items:stretch}
html[data-design=standard] .overview-quote{max-width:none;width:100%;font-size:14px;line-height:1.48;text-wrap:nowrap;text-align:center}
html[data-design=standard] .overview-today{justify-content:space-between;align-items:flex-start;gap:18px;width:100%}
html[data-design=standard] #overview-date>span{text-transform:capitalize}
html[data-design=standard] .overview-welcome{max-width:calc(100% - 284px)}
html[data-design=standard] .overview-welcome h1{font-size:clamp(26px,2.25vw,36px);font-weight:600;margin-bottom:8px}
html[data-design=standard] .overview-welcome p{font-size:clamp(12px,1.05vw,16px)}
html[data-design=standard] .overview-shortcut{min-height:68px;padding-block:12px}
/* Reference illustrations stay fixed; only real totals and comparisons change. */
.metric-art,.metric-number .metric-change,.month-icon{display:none}
html[data-design=standard] .overview-metrics .metric{min-height:156px;padding:14px 18px 12px}
html[data-design=standard] .overview-metrics .metric-label{margin-bottom:10px;min-height:40px;max-width:166px;font-size:14px}
html[data-design=standard] .metric-number{position:relative;z-index:2;display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 10px;max-width:100%;pointer-events:none}
html[data-design=standard] .overview-metrics .metric-value{font-size:clamp(27px,2.2vw,36px);font-weight:600;letter-spacing:-.65px}
html[data-design=standard] .metric-art{display:block;position:absolute;right:12px;bottom:0;width:48%;height:110px;pointer-events:none;z-index:0;opacity:.9;overflow:visible}
html[data-design=standard] .metric-art-paid,html[data-design=standard] .metric-art-bill{width:40%;height:96px;bottom:14px;opacity:.88}
html[data-design=standard] .metric-art-fund{right:auto;left:16px;bottom:0;width:66%;height:42px;opacity:.75}
html[data-design=standard] .fund-coins{right:5px;bottom:5px;width:110px;height:115px;z-index:0}
.chart-grid{fill:none;stroke:var(--opora-cyan);stroke-opacity:.12;stroke-width:.65}
.chart-line{stroke-width:1.65}.chart-line-glow{stroke-width:4;filter:blur(3px);opacity:.35}
.chart-bar-side{fill:none;stroke:#002d3580;stroke-width:2}.chart-bar-highlight{stroke:#ccfff8;stroke-opacity:.8;stroke-width:.6}
html[data-design=standard] .metric-change{display:inline-flex;position:relative;align-items:center;font-size:11px;font-weight:650;gap:3px;white-space:nowrap;pointer-events:auto;outline-offset:4px}
.metric-change.positive{color:#0b805d}.metric-change.negative{color:var(--danger)}
html[data-theme=dark] .metric-change.positive{color:#24e2ae}
.metric-change svg{width:12px;height:14px;flex:none}
.metric-comparison{display:none;position:absolute;left:0;top:calc(100% + 10px);padding:12px 14px;width:230px;max-width:65vw;white-space:normal;background:var(--panel);border:1px solid var(--border);border-radius:10px;font-size:11px;font-weight:400;line-height:1.5;color:var(--text);box-shadow:0 8px 24px #0003;z-index:20}
.metric-change:is(:hover,:focus) .metric-comparison{display:block}
.metric:has(.metric-change:is(:hover,:focus)){z-index:11}
.metric-paid .metric-comparison,.metric-bill .metric-comparison{left:auto;right:0}
.metric-period{position:relative;margin-top:9px;max-width:75%;width:max-content;z-index:3;font-size:11px}
.metric-period summary{display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;color:var(--text);line-height:1.5;min-height:20px}
.metric-period summary::-webkit-details-marker{display:none}
.metric-period summary>span{min-width:0}.metric-period summary>svg{width:14px;height:14px;flex:none;color:var(--accent-ink);transition:transform .15s}
.metric-period[open] summary>svg{transform:rotate(180deg)}
.metric-period-popover{position:absolute;top:calc(100% + 10px);left:-6px;width:304px;max-width:calc(100vw - 102px);padding:10px;background:var(--panel);border:1px solid var(--opora-edge,var(--border));border-radius:14px;box-shadow:0 12px 34px #0005;z-index:30;line-height:1.4}
.metric-bill .metric-period-popover,.metric-paid .metric-period-popover{left:auto;right:-8px}
.metric-presets{display:grid;gap:4px}
.metric-presets button{display:flex;align-items:center;justify-content:space-between;border-radius:7px;min-height:34px;padding:8px 10px;text-align:left;font-size:12px}
.metric-presets button:hover,.metric-presets button[aria-pressed=true]{background:color-mix(in srgb,var(--opora-cyan) 13%,transparent);color:var(--text)}
.metric-presets svg{width:16px;height:16px;color:var(--opora-cyan)}
.metric-period-form{padding:14px 4px 4px;margin-top:8px;border-top:1px solid var(--border)}
.metric-date-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric-date-fields label{display:block;min-width:0;font-size:11px}.metric-date-fields input{margin-top:5px;width:100%}
.metric-date-fields .field-control{margin-top:5px}.metric-date-fields .control-trigger{font-size:11px;min-height:38px;padding:8px;gap:4px}
.metric-date-fields .control-trigger svg{width:15px;height:15px}.metric-date-fields .control-trigger span{white-space:nowrap}
.metric-period-form>.primary{display:flex;margin-left:auto;min-height:34px;margin-top:10px}
.metric-period-error:empty{display:none}.metric-period-error{font-size:11px;margin:10px 0 0}
html[data-design=standard] .metric:has(.metric-period[open]),html[data-design=standard] .metric:has(.fund-explanation[open]){z-index:12}
html[data-design=standard] .fund-explanation{margin-top:1px;font-size:9px;max-width:65%}
.fund-breakdown>strong{display:block;font-size:12px;margin-bottom:14px}
html[data-design=standard] .month-picker::before{display:none}
html[data-design=standard] .month-picker h2{display:flex;align-items:center;gap:12px}
html[data-design=standard] .month-icon{display:inline-flex;align-items:center;flex:none;color:var(--accent-ink)}
html[data-design=standard] .month-icon svg{width:28px;height:28px}
.month-picker .icon-button svg,.picker-arrow svg{display:block;width:17px;height:17px;margin:auto}
/* A shared bevel and highlights apply to all UI symbols, preserving status colours. */
html[data-design=standard] svg[stroke="currentColor"]{filter:url(#opora-glass-material) drop-shadow(0 1px .6px color-mix(in srgb,var(--opora-depth) 70%,transparent)) drop-shadow(0 0 3px color-mix(in srgb,currentColor calc(var(--glass-glow)*18%),transparent));stroke:currentColor}
html[data-design=standard] svg[fill="currentColor"]{filter:url(#opora-glass-material)}
html[data-design=standard] .workspace :is(.nav-link,.overview-shortcut,.hub-illustration)>svg{stroke:currentColor;filter:url(#opora-glass-material) drop-shadow(0 1px .6px #002d3555) drop-shadow(0 0 4px color-mix(in srgb,currentColor calc(var(--glass-glow)*24%),transparent));fill:color-mix(in srgb,currentColor 7%,transparent)}
html[data-design=standard] .workspace .nav-link>svg{color:var(--text);stroke-width:1.7}
html[data-design=standard] .workspace .nav-link.active>svg{color:var(--opora-highlight)}
html[data-design=standard] .overview-shortcut>svg{color:var(--opora-cyan-bright);stroke-width:1.8}
html[data-design=standard] .workspace .hub-illustration{background:none;overflow:visible;color:var(--opora-cyan);width:76px;height:76px}
html[data-design=standard] .workspace .hub-illustration>svg{width:48px;height:48px;stroke-width:1.9;fill:color-mix(in srgb,var(--opora-cyan) 15%,transparent);filter:url(#opora-glass-material) drop-shadow(0 2px 1px #003d4566) drop-shadow(0 0 7px var(--opora-aura))}
html[data-design=standard] .workspace .empty>svg{width:52px;height:52px;fill:color-mix(in srgb,var(--opora-cyan) 12%,transparent);stroke-width:1.8;color:var(--opora-cyan);filter:url(#opora-glass-material) drop-shadow(0 2px 1px #003d4555) drop-shadow(0 0 7px var(--opora-aura));margin-bottom:18px}
html[data-design=standard] .workspace :is(.record-section-heading,.preview-panel-heading) svg{filter:url(#opora-glass-material) drop-shadow(0 1px 1px #00323e66) drop-shadow(0 0 4px var(--opora-aura))}
html[data-design=standard] :is(.control-popover,.metric-period-popover){background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 93%,var(--opora-cyan)),var(--panel));border-color:var(--opora-edge);box-shadow:inset 0 1px 1px var(--opora-sheen),0 14px 36px #0004}
html[data-design=standard] .picker-day.selected{background:linear-gradient(140deg,var(--opora-cyan),var(--opora-depth));color:var(--opora-highlight);box-shadow:inset 0 1px 1px var(--opora-sheen)}
.hub-star{padding:0;line-height:1;display:flex;align-items:center;justify-content:center}.hub-star svg,.shortcut-toggle>svg{width:18px;height:18px;display:block;flex:none;margin:0;fill:none}
.hub-star[aria-pressed=true] svg,.shortcut-toggle[aria-pressed=true]>svg{fill:color-mix(in srgb,currentColor 24%,transparent)}
html[data-design=standard] .hub-star,html[data-design=standard] .overview-shortcuts .shortcut-toggle{display:flex;align-items:center;justify-content:center;padding:0;aspect-ratio:1;line-height:1;background:linear-gradient(135deg,var(--opora-button),var(--opora-depth));box-shadow:inset 0 1px 1px var(--opora-sheen);color:var(--accent-ink);border-color:var(--opora-edge)}
html[data-design=standard] .hub-star{width:32px;height:32px}
html[data-design=standard] .overview-shortcuts .shortcut-toggle{width:30px;height:30px}
@media(min-width:1700px){html[data-design=standard] .overview-hero{min-height:114px}}
@media(max-width:1250px){html[data-design=standard] .overview-welcome{max-width:58%}html[data-design=standard] .overview-context{width:270px;min-width:250px}html[data-design=standard] .overview-quote{font-size:12px}html[data-design=standard] .overview-metrics .metric-value{font-size:34px}.metric-paid .metric-period-popover{left:-6px;right:auto}}
@media(max-width:900px){html[data-design=standard] .overview-hero{min-height:148px;gap:18px}html[data-design=standard] .overview-welcome{max-width:100%}html[data-design=standard] .overview-welcome h1{font-size:26px}html[data-design=standard] .overview-context{width:100%;padding:0;min-width:0}html[data-design=standard] .overview-today{width:100%;justify-content:flex-start}html[data-design=standard] .workspace[data-scene=panorama]{--scene-width:1100px;--scene-offset:30px}html[data-design=standard] .workspace[data-scene=panorama]::before{background-position:0 0,0 0,calc(50% + var(--scene-offset)) -20px}}
@media(max-width:720px){html[data-design=standard] .workspace{--header-height:64px}html[data-design=standard] .overview-hero{min-height:157px}.metric-period{max-width:82%}html[data-design=standard] .overview-metrics .metric-value{font-size:30px}html[data-design=standard] .month-icon svg{width:23px;height:23px}html[data-design=standard] .workspace .hub-illustration{width:54px;height:58px}html[data-design=standard] .workspace .hub-illustration>svg{width:39px;height:39px}}
@media(max-width:560px){html[data-design=standard] .overview-metrics .metric{min-height:178px}html[data-design=standard] .metric-art{width:45%;height:87px}html[data-design=standard] .metric-art-fund{width:63%;height:40px}html[data-design=standard] .fund-coins{width:87px;height:88px}html[data-design=standard] .metric-number{gap:6px}html[data-design=standard] .metric-change{font-size:10px}.metric-period{margin-top:18px;font-size:11px}.metric-period-popover,.metric-bill .metric-period-popover,.metric-paid .metric-period-popover{left:-6px;right:auto}.metric-change .metric-comparison{left:auto;right:-20px}.metric-date-fields{gap:5px}html[data-design=standard] .month-picker h2{gap:8px}html[data-design=standard] .month-icon svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.metric-period summary>svg{transition:none}}

.metric-period-hint{font-size:10px;line-height:1.5;color:var(--muted);margin:10px 6px 0}

@media(max-width:400px){.metric-date-fields{grid-template-columns:1fr;gap:9px}.metric-period-form{padding-top:10px}.metric-date-fields .control-trigger{min-height:36px}}

/* The city remains selectable when the device cannot provide a location. */
.weather-widget{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:90px}
.weather-city-picker>summary{font-size:10px;color:var(--muted);cursor:pointer;list-style:none;border-bottom:1px dotted color-mix(in srgb,var(--muted) 50%,transparent);width:max-content}
.weather-city-picker>summary::-webkit-details-marker{display:none}
.weather-city-picker[open]>summary,.weather-city-picker>summary:hover{color:var(--accent-ink)}
.weather-widget-empty{min-width:0;flex:none}
.weather-city-picker-empty>summary{display:flex;align-items:center;gap:7px;min-height:34px;font-size:11px;line-height:1.4;white-space:nowrap;border:0;border-radius:6px}
.weather-city-picker-empty>summary>span:last-child{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.weather-city-picker-empty>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.weather-location-symbol{display:grid;place-items:center;width:20px;height:20px;flex:none;color:var(--accent-ink)}
.weather-location-symbol svg{width:18px;height:18px}
.weather-location-symbol.is-loading{border:1.5px solid color-mix(in srgb,var(--accent-ink) 20%,transparent);border-top-color:var(--accent-ink);border-radius:50%;animation:startup-turn 1s linear infinite}
.weather-location-symbol.is-loading svg{visibility:hidden}
.weather-popover .weather-location-note{margin:0 0 14px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.weather-location-symbol.is-loading{animation:none}}
.weather-city-picker .weather-popover{top:calc(100% + 10px);width:290px;max-width:calc(100vw - 90px)}
.weather-city-label{font-size:12px;display:block}.weather-city-label input{margin-top:8px;width:100%;font-size:13px}
.weather-city-results{max-height:240px;overflow-y:auto;margin-top:8px;overscroll-behavior:contain}
.weather-city-results>button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:9px 8px;text-align:left;font-size:12px;border-radius:6px}
.weather-city-results>button:hover,.weather-city-results>button:focus-visible{background:var(--soft)}
.weather-city-results small{color:var(--muted);font-size:10px}.weather-city-results>p{margin:10px 0}
html[data-design=standard] .overview-hero:has(.weather-city-picker[open],.weather-details[open]){z-index:25}
@media(max-width:720px){.overview-today{position:relative}html[data-design=standard] .overview-today{column-gap:12px;row-gap:8px;flex-wrap:wrap}.weather-widget,.weather-details{position:static}.weather-widget .weather-popover{right:0;max-width:calc(100vw - var(--sidebar-width) - 30px)}}

/* Theme-specific panorama stays in the existing shared scene frame. */
.appearance-background{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:center;margin:0 0 24px;padding:18px;max-width:1100px}
.appearance-background-image{position:relative;aspect-ratio:3;min-width:0;border-radius:10px;overflow:hidden;background:var(--bg);border:1px solid var(--border)}
.appearance-background-image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,var(--bg)),linear-gradient(90deg,color-mix(in srgb,var(--bg) 65%,transparent),transparent 40%,transparent 65%,color-mix(in srgb,var(--bg) 80%,transparent)),var(--scene-image) center/cover no-repeat}
.appearance-background h2{font-size:15px;margin:0 0 8px}.appearance-background .hint{margin:6px 0 10px;line-height:1.6}
.appearance-background-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.appearance-background-actions button{display:inline-flex;align-items:center;gap:8px;font-size:12px;min-height:36px}.appearance-background-actions svg{width:17px;height:17px;flex:none}
#scene-upload{display:none}#scene-progress:empty{display:none}#scene-progress{font-size:12px;color:var(--muted)}
#appearance-form[aria-busy=true]{cursor:progress}
@media(max-width:900px){.appearance-background{grid-template-columns:1fr}.appearance-background-image{max-width:420px;width:100%}}

/* Form surfaces retain glass highlights without Safari backdrop clipping in fieldsets. */
html[data-design=standard] .workspace .editor-section{backdrop-filter:none;-webkit-backdrop-filter:none}