:root { --brand:#f3bb4a; --brand-strong:#bd8121; --brand-wash:#fff6df; --brand-rgb:243,187,74; --ink:#1a2942; --muted:#8794a9; --line:#e9eef5; --canvas:#102136; --good:#64d2b5; --warn:#f3bb4a; --bad:#ee8b79; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#e7edf5; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:.14rem solid color-mix(in srgb,var(--brand) 60%,#fff); outline-offset:.15rem; }
.phone-shell { display:flex; flex-direction:column; position:relative; width:min(100%,30rem); height:100dvh; min-height:35rem; margin:auto; overflow:hidden; background:var(--canvas); }
.topbar { display:flex; align-items:center; gap:.6rem; flex:0 0 auto; padding:.82rem 1rem .6rem; background:#f9fbff; }
.brand-mark { display:grid; place-items:center; flex:none; width:2.35rem; height:2.35rem; color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 68%,#8bc5ff),var(--brand-strong)); border-radius:.78rem; box-shadow:0 .35rem .8rem rgba(var(--brand-rgb),.24); font-size:1.08rem; }
.brand-copy { display:grid; flex:1; gap:.16rem; }
.brand-copy strong { font-size:.92rem; font-weight:750; }
.brand-copy small { color:var(--muted); font-size:.52rem; letter-spacing:.045rem; }
.header-action,.user-avatar { position:relative; display:grid; place-items:center; flex:none; width:2rem; height:2rem; color:#70809a; font-size:1.03rem; }
.header-action>b { position:absolute; top:.26rem; right:.3rem; width:.37rem; height:.37rem; border:1px solid #fff; border-radius:50%; background:#ee7168; }
.user-avatar { width:1.8rem; height:1.8rem; border-radius:50%; color:var(--brand-strong); background:var(--brand-wash); font-size:.7rem; font-weight:750; }
#appBody { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:.15rem 1rem 1rem; scrollbar-width:none; }
#appBody::-webkit-scrollbar { display:none; }
.screen[hidden] { display:none!important; }
.screen { display:none; animation:rise .2s ease-out; }
.screen.active { display:block; }
@keyframes rise { from { opacity:.65; transform:translateY(.2rem); } to { opacity:1; transform:none; } }
.welcome { display:flex; justify-content:space-between; align-items:center; margin:.8rem 0 .75rem; }
.welcome p { margin:0 0 .24rem; color:var(--muted); font-size:.56rem; }
.welcome h1 { margin:0; font-size:1.18rem; font-weight:740; letter-spacing:-.035rem; }
.shift-pill { display:flex; align-items:center; gap:.24rem; padding:.3rem .45rem; border-radius:2rem; color:var(--good); background:#e9f6f0; font-size:.5rem; white-space:nowrap; }
.hero-panel { position:relative; isolation:isolate; height:13.25rem; overflow:hidden; border-radius:1rem; color:white; background:var(--brand) url('assets/energy-operations.webp') center/cover; box-shadow:0 .55rem 1.1rem rgba(var(--brand-rgb),.17); }
.hero-photo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero-overlay { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#102841dc 0%,#142d4170 62%,#1a3b5109),linear-gradient(0deg,#1028417a,transparent 42%); }
.hero-top { position:absolute; top:.74rem; left:.8rem; right:.8rem; display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.hero-top span { max-width:72%; padding:.28rem .42rem; border:1px solid #ffffff35; border-radius:2rem; color:#f3f8ff; background:#152d3f38; backdrop-filter:blur(8px); font-size:.49rem; white-space:nowrap; }
.hero-top span:last-child { max-width:none; }
.hero-copy { position:absolute; left:.9rem; bottom:2.1rem; }
.hero-kicker { color:#d8e6f3; font-size:.44rem; letter-spacing:.11rem; }
.hero-copy h2 { margin:.38rem 0 .34rem; font-size:1.12rem; line-height:1.35; font-weight:740; letter-spacing:-.02rem; }
.hero-copy p { margin:0; color:#e1eaf2; font-size:.53rem; }
.hero-cta { position:absolute; right:.8rem; bottom:.78rem; padding:.4rem .58rem; border:1px solid #ffffff4a; border-radius:.52rem; color:white; background:#ffffff20; backdrop-filter:blur(8px); font-size:.5rem; }
.hero-caption { position:absolute; right:.8rem; top:3rem; color:#ffffffb8; font-size:.43rem; writing-mode:vertical-rl; }
.metrics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.48rem; margin-top:.68rem; }
.metric-card { min-width:0; padding:.62rem .56rem .55rem; border:1px solid var(--line); border-radius:.78rem; background:white; box-shadow:0 .18rem .7rem #1d36500b; }
.metric-card>span { display:block; color:#77859b; font-size:.5rem; white-space:nowrap; }
.metric-card>strong { display:block; margin:.36rem 0 .23rem; color:var(--ink); font-size:clamp(.96rem,4.6vw,1.26rem); font-weight:760; line-height:1.08; letter-spacing:-.035rem; white-space:nowrap; }
.metric-card>strong small { margin-left:.12rem; font-size:.49rem; font-weight:550; letter-spacing:0; }
.metric-card>em { display:flex; align-items:center; gap:.17rem; color:var(--good); font-size:.48rem; font-style:normal; white-space:nowrap; }
.metric-card>em.warning { color:var(--warn); }
.metric-card>em.bad { color:var(--bad); }
.section-block { margin-top:1.12rem; scroll-margin-top:.7rem; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:.4rem; margin-bottom:.58rem; }
.eyebrow { color:#9aa6b8; font-size:.46rem; font-weight:740; letter-spacing:.12rem; }
.section-head h2,.page-heading h1 { margin:.17rem 0 0; font-size:.83rem; font-weight:730; }
.text-link { padding:.25rem 0; color:var(--brand-strong); font-size:.52rem; white-space:nowrap; }
.period-toggle { padding:.3rem .43rem; border:1px solid var(--line); border-radius:.4rem; color:#75839a; background:white; font-size:.5rem; }
.trend-section { padding:.76rem .78rem .65rem; border:1px solid var(--line); border-radius:.84rem; background:white; box-shadow:0 .18rem .7rem #1d36500b; }
.trend-section .section-head { margin-bottom:.35rem; }
.trend-total { display:flex; justify-content:space-between; align-items:center; gap:.3rem; }
.trend-total>strong { font-size:1.14rem; letter-spacing:-.035rem; }
.trend-total>strong small { color:#8492a7; font-size:.51rem; font-weight:500; }
.trend-total>span { color:var(--good); font-size:.49rem; }
.chart-wrap { margin-top:.4rem; }
#trendChart { display:block; width:100%; height:4.6rem; overflow:visible; }
.chart-gridline { stroke:#edf1f6; stroke-width:1; stroke-dasharray:3 4; }
.chart-area { fill:rgba(var(--brand-rgb),.09); }
.chart-line { fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.chart-dot { fill:white; stroke:var(--brand); stroke-width:2.2; }
.chart-labels { display:flex; justify-content:space-between; color:#9aa6b6; font-size:.43rem; }
.asset-preview,.asset-full-list,.task-list,.focus-list,.alert-list { display:grid; gap:.48rem; }
.asset-card { display:flex; align-items:center; gap:.52rem; width:100%; padding:.62rem .67rem; border:1px solid var(--line); border-radius:.76rem; background:white; text-align:left; box-shadow:0 .16rem .6rem #1d365007; }
.asset-icon { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:.62rem; color:var(--brand); background:var(--brand-wash); font-size:.93rem; }
.asset-card.warning .asset-icon { color:#d48b39; background:#fff2df; }
.asset-copy { flex:1; min-width:0; }
.asset-copy strong { display:block; font-size:.59rem; font-weight:680; }
.asset-copy small { display:block; margin-top:.18rem; color:#8794a8; font-size:.48rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asset-reading { text-align:right; white-space:nowrap; }
.asset-reading strong { display:block; font-size:.68rem; color:var(--ink); }
.asset-reading small { display:block; margin-top:.12rem; color:var(--good); font-size:.45rem; }
.asset-reading small.warning { color:var(--warn); }
.focus-card { display:flex; align-items:center; gap:.52rem; width:100%; padding:.65rem .7rem; border:1px solid #f1e5d2; border-radius:.75rem; color:var(--ink); background:linear-gradient(105deg,#fffaf3,#fff); text-align:left; }
.focus-card.high { border-color:#f1d9d5; background:linear-gradient(105deg,#fff7f5,#fff); }
.focus-icon { display:grid; place-items:center; flex:none; width:1.9rem; height:1.9rem; border-radius:.62rem; color:#d39142; background:#fff0db; }
.focus-card.high .focus-icon { color:#cf6b5e; background:#ffebe7; }
.focus-copy { flex:1; min-width:0; }
.focus-copy strong { display:block; font-size:.56rem; }
.focus-copy small { display:block; margin-top:.18rem; color:#998870; font-size:.47rem; }
.focus-card>i:last-child { color:#9ca8b8; font-size:.57rem; }
.pill-count { padding:.18rem .34rem; border-radius:2rem; color:#bf8240; background:#fff3e1; font-size:.47rem; white-space:nowrap; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; }
.quick-action { display:grid; justify-items:center; gap:.34rem; padding:.55rem .3rem; border:1px solid var(--line); border-radius:.72rem; background:white; color:#64748a; font-size:.51rem; }
.quick-action>i { color:var(--brand); font-size:1.05rem; }
.demo-note { display:flex; align-items:flex-start; gap:.34rem; padding:.7rem .1rem .35rem; color:#95a0b1; font-size:.45rem; line-height:1.55; }
.demo-note>i { margin-top:.03rem; color:#718dbc; }
.bottom-nav { display:grid; grid-template-columns:repeat(5,1fr); flex:none; z-index:3; padding:.48rem .25rem calc(.48rem + env(safe-area-inset-bottom)); border-top:1px solid #e8edf4; background:#ffffffed; backdrop-filter:blur(16px); }
.bottom-nav button { position:relative; display:grid; justify-items:center; align-content:center; gap:.15rem; min-height:2.2rem; padding:0; color:#98a4b6; font-size:.48rem; }
.bottom-nav button>i { font-size:1rem; }
.bottom-nav button.active { color:var(--brand); }
.bottom-nav button>b { position:absolute; top:-.05rem; left:calc(50% + .35rem); min-width:.75rem; height:.75rem; padding:0 .15rem; display:grid; place-items:center; border-radius:1rem; color:white; background:#ee756a; font-size:.41rem; }
.bottom-nav button>b[hidden] { display:none; }
.page-heading { padding:.85rem 0 .75rem; }
.page-heading h1 { margin:.26rem 0 .26rem; font-size:1.17rem; }
.page-heading p { margin:0; color:var(--muted); font-size:.55rem; }
.filter-row,.task-tabs { display:flex; gap:.4rem; margin:.2rem 0 .72rem; overflow:auto; scrollbar-width:none; }
.filter-row button,.task-tabs button { flex:none; padding:.37rem .58rem; border:1px solid var(--line); border-radius:2rem; color:#728098; background:white; font-size:.5rem; }
.filter-row button.selected,.task-tabs button.selected { color:var(--brand-strong); border-color:color-mix(in srgb,var(--brand) 28%,white); background:var(--brand-wash); }
.task-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding:.7rem; border:1px solid var(--line); border-radius:.8rem; background:white; }
.task-stats article { display:grid; justify-items:center; gap:.16rem; border-right:1px solid var(--line); }
.task-stats article:last-child { border:0; }
.task-stats strong { font-size:.87rem; }
.task-stats span { color:var(--muted); font-size:.46rem; }
.task-tabs { margin-top:.78rem; }
.task-tabs b { margin-left:.12rem; }
.task-card { display:flex; align-items:flex-start; gap:.52rem; padding:.65rem; border:1px solid var(--line); border-radius:.76rem; background:white; }
.task-symbol { display:grid; place-items:center; flex:none; width:1.9rem; height:1.9rem; border-radius:.6rem; color:var(--brand); background:var(--brand-wash); }
.task-copy { flex:1; min-width:0; }
.task-copy strong { display:block; font-size:.55rem; }
.task-copy p { margin:.2rem 0; color:#748198; font-size:.48rem; line-height:1.45; }
.task-copy small { color:#99a4b4; font-size:.44rem; }
.task-card>button { padding:.28rem .38rem; border-radius:.4rem; color:var(--brand-strong); background:var(--brand-wash); font-size:.47rem; white-space:nowrap; }
.task-card>button:disabled { color:var(--good); background:#e9f6f0; }
.alert-summary { display:flex; justify-content:space-between; padding:.68rem .75rem; margin:.15rem 0 .72rem; border:1px solid var(--line); border-radius:.75rem; background:white; color:#75839a; font-size:.52rem; }
.alert-summary strong { color:var(--bad); }
.alert-row { display:flex; align-items:flex-start; gap:.5rem; padding:.65rem .68rem; border:1px solid #f0e2d4; border-radius:.75rem; background:white; }
.alert-row.medium { border-color:var(--line); }
.alert-severity { display:grid; place-items:center; flex:none; width:1.8rem; height:1.8rem; border-radius:.58rem; color:#cb675a; background:#fff0ec; }
.alert-row.medium .alert-severity { color:#cc8b3c; background:#fff3e4; }
.alert-copy { flex:1; min-width:0; }
.alert-copy strong { display:block; font-size:.54rem; }
.alert-copy p { margin:.2rem 0; color:#718097; font-size:.47rem; line-height:1.5; }
.alert-copy small { color:#98a3b3; font-size:.43rem; }
.alert-row>button { padding:.3rem .4rem; border-radius:.4rem; color:var(--brand-strong); background:var(--brand-wash); font-size:.46rem; white-space:nowrap; }
.empty-state { padding:1.8rem 1rem; color:#929eb0; text-align:center; font-size:.55rem; }
.empty-state i { color:#55ae89; font-size:1.4rem; }
.profile-banner { display:flex; align-items:center; gap:.6rem; padding:.82rem; margin:.82rem 0 .65rem; border-radius:.85rem; color:white; background:linear-gradient(110deg,var(--brand-strong),var(--brand)); }
.profile-initial { display:grid; place-items:center; width:2.45rem; height:2.45rem; border:1px solid #ffffff65; border-radius:50%; background:#ffffff24; font-weight:750; }
.profile-banner>div { display:grid; flex:1; gap:.16rem; }
.profile-banner>div strong { font-size:.73rem; }
.profile-banner>div small { color:#d9e7ff; font-size:.47rem; }
.staff-online { color:#e3f7ef; font-size:.46rem; }
.staff-online i { display:inline-block; width:.32rem; height:.32rem; border-radius:50%; background:#8fe4be; }
.profile-kpis { display:grid; grid-template-columns:repeat(3,1fr); padding:.65rem .25rem; border:1px solid var(--line); border-radius:.72rem; background:white; }
.profile-kpis article { display:grid; justify-items:center; gap:.15rem; border-right:1px solid var(--line); }
.profile-kpis article:last-child { border:0; }
.profile-kpis strong { font-size:.87rem; }
.profile-kpis small { color:#8c98aa; font-size:.46rem; }
.settings-list { margin-top:.72rem; padding:0 .7rem; border:1px solid var(--line); border-radius:.76rem; background:white; }
.settings-list button { display:flex; align-items:center; gap:.52rem; width:100%; padding:.65rem 0; border-bottom:1px solid var(--line); text-align:left; }
.settings-list button:last-child { border:0; }
.settings-list button>i:first-child { color:var(--brand); }
.settings-list button>span { display:grid; flex:1; gap:.16rem; font-size:.53rem; }
.settings-list button>span small { color:var(--muted); font-size:.45rem; }
.settings-list button>i:last-child { color:#9ba6b6; font-size:.5rem; }
.reset-button { width:100%; margin-top:.75rem; padding:.55rem; border:1px solid var(--line); border-radius:.65rem; background:white; color:#758198; font-size:.53rem; }
.profile-footnote { margin:.58rem .1rem; color:#9aa5b4; font-size:.44rem; line-height:1.55; text-align:center; }
.app-dialog { width:min(calc(100% - 1.8rem),26rem); max-height:86dvh; overflow-y:auto; padding:1rem; border:0; border-radius:.95rem; color:var(--ink); box-shadow:0 1rem 3rem #18263d40; }
.app-dialog::backdrop { background:#11213baa; backdrop-filter:blur(5px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; }
.dialog-head h2 { margin:.18rem 0 0; font-size:.86rem; font-weight:730; }
.close-dialog { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; color:#7e8ba0; background:#f1f3f7; font-size:.65rem; }
.dialog-body { color:#708097; font-size:.56rem; line-height:1.8; white-space:pre-line; }
.dialog-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:.42rem; margin:.65rem 0; }
.dialog-metrics article { padding:.52rem; border:1px solid var(--line); border-radius:.56rem; background:#fafbfd; }
.dialog-metrics small { display:block; color:var(--muted); font-size:.44rem; }
.dialog-metrics strong { display:block; margin-top:.2rem; font-size:.65rem; }
.dialog-action-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.dialog-action-row button { flex:1; min-width:5rem; padding:.48rem .4rem; border:1px solid var(--line); border-radius:.5rem; color:var(--brand-strong); background:var(--brand-wash); font-size:.5rem; }
.entry-form label { display:block; margin:.58rem 0 .24rem; color:#63728a; font-size:.51rem; }
.entry-form input,.entry-form select { width:100%; min-height:2.25rem; padding:.42rem .52rem; border:1px solid #e1e8f0; border-radius:.52rem; color:var(--ink); background:white; font-size:.56rem; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; min-height:2.35rem; margin-top:.72rem; border-radius:.58rem; color:white; background:linear-gradient(100deg,var(--brand-strong),var(--brand)); font-size:.56rem; font-weight:650; }
.toast-area { position:fixed; z-index:9; bottom:calc(4.3rem + env(safe-area-inset-bottom)); left:50%; display:grid; gap:.35rem; width:max-content; max-width:calc(100% - 2rem); transform:translateX(-50%); pointer-events:none; }
.toast-message { padding:.48rem .75rem; border-radius:.58rem; color:white; background:#17263ceF; box-shadow:0 .35rem .8rem #15223b29; text-align:center; font-size:.53rem; animation:rise .18s ease-out; }

/* Energy dispatch: midnight blue, solar amber, compact operational panels. */
.energy-app { --ink:#edf3fc; --line:#2b4059; --muted:#9badc5; color:var(--ink); background:#102136; }
.topbar { padding-top:1rem; background:#102136; }
.brand-mark { color:#15293d; background:linear-gradient(145deg,#ffe4a0,#f3bb4a); box-shadow:0 .25rem .7rem #f3bb4a26; }
.brand-copy strong { font-size:1rem; }.brand-copy small { color:#97abc5; font-size:.6rem; }
.header-action { color:#c6d4e6; }.user-avatar { color:#ffdf94; background:#f3bb4a1a; }
.welcome { margin:.8rem 0 1rem; }.welcome p { color:#93a6c0; font-size:.65rem; }.welcome h1 { font-size:1.35rem; }
.shift-pill { color:#83dfbc; background:#1c3b3b; font-size:.55rem; }
.hero-panel { height:15rem; border:1px solid #364d65; border-radius:.8rem; box-shadow:none; }
.hero-photo { animation:solar-pan 24s ease-in-out infinite alternate; }
.hero-overlay { background:linear-gradient(90deg,#10253de8,#12375180 70%,#12375120),linear-gradient(0deg,#09192ddb,transparent 65%); }
.hero-top span { font-size:.58rem; }.hero-copy { bottom:3.45rem; }.hero-kicker { color:#f9d896; font-size:.52rem; letter-spacing:.13rem; }
.hero-copy h2 { font-size:1.55rem; line-height:1.38; }.hero-copy p { font-size:.65rem; color:#c4d6e6; }
.hero-caption { display:none; }.hero-cta { right:.85rem; bottom:.9rem; padding:.48rem .65rem; color:#ffe7af; border-color:#f4ce743b; background:#f3bb4a1a; font-size:.62rem; }
.hero-motion-toggle { position:absolute; left:.9rem; bottom:.9rem; width:1.85rem; height:1.85rem; display:grid; place-items:center; border:1px solid #ffffff4a; border-radius:50%; color:#fff; background:#ffffff18; }
.hero-paused .hero-photo { animation-play-state:paused; }
.metrics-grid { margin-top:.75rem; gap:.45rem; }
.energy-app :is(.metric-card,.asset-card,.task-card,.task-stats,.settings-list,.profile-kpis,.alert-summary,.alert-row,.filter-row button,.task-tabs button,.reset-button,.quick-action) { color:#d7e2f1; border-color:#2b4059; background:#192f47; box-shadow:none; }
.metric-card { padding:.72rem .55rem; border-radius:.65rem; }.metric-card>span { color:#9eafc6; font-size:.58rem; }.metric-card>strong { margin:.5rem 0 .35rem; font-size:1.3rem; }.metric-card>strong small { font-size:.51rem; }.metric-card>em { font-size:.51rem; }
.section-block { margin-top:1.5rem; }.eyebrow { color:#8b9fb9; font-size:.52rem; letter-spacing:.13rem; }.section-head h2 { margin-top:.3rem; font-size:.95rem; }.text-link { color:#f6cb70; font-size:.63rem; }
.quick-block { margin-top:1rem; }.quick-block .section-head { display:none; }.quick-grid { gap:.45rem; }.quick-action { padding:.72rem .2rem; border-radius:.6rem; font-size:.61rem; }.quick-action>i { color:#f6c86b; font-size:1.16rem; }
.trend-section { padding:.95rem .8rem .75rem; border-color:#2b4059; border-radius:.75rem; background:linear-gradient(145deg,#192f47,#14293f); box-shadow:none; }.trend-total { margin-top:.75rem; }.trend-total>strong { font-size:1.5rem; }.trend-total>strong small { color:#a0b1c8; font-size:.6rem; }.trend-total>span { font-size:.55rem; }.period-toggle { color:#bbc9dc; border-color:#3c5068; background:#213951; font-size:.6rem; }
.chart-caption { margin:.6rem 0 .2rem; color:#94a8c1; font-size:.58rem; }.chart-gridline { stroke:#31445b; }.chart-line { stroke:#f3bb4a; }.chart-dot { fill:#1b3047; }.chart-labels { margin-top:.3rem; color:#8fa3be; font-size:.53rem; }#trendChart { height:5.5rem; }
.module-live { display:flex; align-items:center; gap:.3rem; color:#9db8c5; font-size:.55rem; white-space:nowrap; }.module-live i { width:.35rem; height:.35rem; border-radius:50%; background:#72dcb9; }
.dispatch-board { padding:.85rem; overflow:hidden; border:1px solid #2b4059; border-radius:.75rem; background:radial-gradient(ellipse at 95% 10%,#31425b 0,transparent 55%),#192f47; }
.mix-summary { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-bottom:.8rem; }.mix-summary>div:first-child { display:grid; gap:.35rem; }.mix-summary span { color:#9bb0c9; font-size:.63rem; }.mix-summary strong { font-size:1.5rem; }.mix-summary strong small { color:#a8bad0; font-size:.65rem; font-weight:500; }.mix-summary em { color:#7edaba; font-size:.58rem; font-style:normal; }
.mix-donut { display:grid; place-items:center; flex:none; width:4.7rem; height:4.7rem; border-radius:50%; background:conic-gradient(#f5c866 0 49.3%,#60b3d9 49.3% 81.8%,#91a3fb 81.8%); }.mix-donut>span { display:grid; gap:.2rem; place-content:center; width:3.55rem; height:3.55rem; border-radius:50%; color:#9fb1ca; background:#20344e; text-align:center; font-size:.5rem; }.mix-donut strong { color:#fff; font-size:.9rem; }
.mix-legend { display:grid; gap:.65rem; padding:.85rem 0; border-top:1px solid #31465d; }.mix-row { display:grid; grid-template-columns:6rem 2.3rem 1fr; align-items:center; gap:.45rem; font-size:.65rem; }.mix-row>span:first-child { display:flex; align-items:center; gap:.35rem; color:#c4d1e3; }.mix-row i { color:#f0c05e; }.mix-row strong { font-size:.66rem; text-align:right; }.mix-track { display:block; height:.3rem; border-radius:1rem; background:#32475e; }.mix-track i { display:block; width:var(--mix); height:100%; border-radius:inherit; background:linear-gradient(90deg,#f7d687,#f2b348); }
.storage-state { display:flex; align-items:center; gap:.6rem; width:100%; padding:.7rem 0 0; border-top:1px solid #31465d; text-align:left; }.storage-state>i:first-child { font-size:1.5rem; color:#8ae3ca; }.storage-state>span { flex:1; font-size:.7rem; }.storage-state small { display:block; margin-top:.25rem; color:#95abc5; font-size:.55rem; font-weight:400; }.storage-state>strong { font-size:1.05rem; text-align:right; }.storage-state>i:last-child { color:#859cb8; font-size:.6rem; }
.dispatch-plan { padding:.9rem .8rem .5rem; border:1px solid #2b4059; border-radius:.75rem; background:#172d44; }.schedule-date { color:#9eb1ca; font-size:.6rem; }.dispatch-tabs { display:flex; gap:.3rem; padding:.25rem; margin:.8rem 0 .5rem; border-radius:.5rem; background:#0e2238; }.dispatch-tabs button { flex:1; padding:.45rem; border-radius:.35rem; color:#93a9c5; font-size:.68rem; }.dispatch-tabs button.selected { color:#ffdf94; background:#304053; }.schedule-row { display:flex; align-items:center; gap:.55rem; width:100%; padding:.7rem 0; text-align:left; }.schedule-row time { color:#d9b974; font-size:.65rem; }.schedule-node { display:grid; place-items:center; flex:none; width:1.75rem; height:1.75rem; border:1px solid #43516a; border-radius:50%; color:#e1bb63; background:#273b53; }.schedule-row>span:last-of-type { flex:1; }.schedule-row strong { display:block; font-size:.7rem; }.schedule-row small { display:block; margin-top:.25rem; color:#96aac4; font-size:.6rem; line-height:1.5; }.schedule-row>i { color:#7e92ae; font-size:.6rem; }
.energy-goal { display:flex; align-items:center; gap:.6rem; padding:1rem .85rem; border:1px solid #7f693c; border-radius:.75rem; background:linear-gradient(120deg,#3d392d,#273342); }.energy-goal>div { flex:1; }.energy-goal h2 { margin:.35rem 0 .7rem; color:#ffe4a8; font-size:.85rem; }.energy-goal p { margin:0; color:#bcb29e; font-size:.65rem; }.energy-goal p strong { color:#ffe0a0; font-size:1.5rem; }.goal-track { height:.3rem; margin:.65rem 0 .45rem; border-radius:1rem; background:#ffffff1a; }.goal-track i { display:block; width:86.4%; height:100%; border-radius:inherit; background:#f3c46a; }.energy-goal small { color:#b5b4ae; font-size:.55rem; }.goal-sun { color:#f0c26d; font-size:2.5rem; opacity:.8; }
.asset-card { padding:.8rem .65rem; border-radius:.65rem; }.asset-copy strong { font-size:.73rem; }.asset-copy small { margin-top:.3rem; color:#94a8c0; font-size:.57rem; }.asset-reading strong { font-size:.85rem; }.asset-reading small { font-size:.52rem; }.asset-icon { color:#f1c66c; background:#3e403b; }.asset-card.warning .asset-icon { color:#edb861; background:#463d32; }
.focus-card,.focus-card.high { padding:.8rem .65rem; border-color:#725142; background:#382e2d; }.focus-copy strong { color:#f2d6c6; font-size:.7rem; }.focus-copy small { color:#bfa99e; font-size:.59rem; line-height:1.6; }.focus-icon { color:#edc07b; background:#584031; }.focus-card.high .focus-icon { color:#f3957e; background:#603b32; }.pill-count { color:#e9c180; background:#483d2c; font-size:.58rem; }
.safety-tag { color:#9ebcaf; font-size:.55rem; }.safety-card { display:flex; align-items:center; gap:.55rem; width:100%; padding:.8rem; border:1px solid #3c504e; border-radius:.65rem; background:#1b333b; text-align:left; }.safety-card>i:first-child { color:#ecc77b; font-size:1.2rem; }.safety-card>span { flex:1; }.safety-card strong { display:block; font-size:.68rem; }.safety-card small { display:block; margin-top:.3rem; color:#99b4ae; font-size:.57rem; }.safety-card>i:last-child { color:#b0c2be; }.demo-note { color:#899fb9; font-size:.55rem; }
.bottom-nav { border-color:#2a4058; background:#15283feF; }.bottom-nav button { color:#90a4c0; font-size:.6rem; }.bottom-nav button.active { color:#ffcf70; }.bottom-nav button>i { font-size:1.15rem; }
.page-heading h1 { color:#edf3fc; }.page-heading p { font-size:.7rem; }.task-copy strong,.alert-copy strong { font-size:.73rem; }.task-copy p,.alert-copy p { color:#a5b6cd; font-size:.65rem; }.task-copy small,.alert-copy small { color:#93a8c2; font-size:.56rem; }.task-card>button,.alert-row>button { color:#ffdd99; background:#4d4435; font-size:.6rem; }.energy-app .selected { border-color:#ac8540; }.settings-list button>span { font-size:.75rem; }.settings-list button>span small,.profile-kpis small { font-size:.6rem; }
.app-dialog { font-size:.85rem; }.dialog-head h2 { font-size:1.05rem; }.dialog-body { font-size:.8rem; }.entry-form label { font-size:.75rem; }.entry-form input,.entry-form select { min-height:2.8rem; font-size:1rem; }.field-hint { color:#76849a; font-size:.68rem; }.primary-button { min-height:2.8rem; color:#1c3044; font-size:.8rem; }.toast-message { font-size:.75rem; }
@keyframes solar-pan { from { transform:scale(1.01) translateX(-.1rem); } to { transform:scale(1.09) translateX(.2rem); } }
@media (min-width:600px) { body { display:grid; min-height:100dvh; place-items:center; padding:1.1rem; } .phone-shell { width:26rem; height:min(56rem,calc(100dvh - 2.2rem)); border:.58rem solid #151b26; border-radius:2.1rem; box-shadow:0 1.6rem 3.5rem #1b335234; } #appBody { padding-right:.95rem; padding-left:.95rem; } .bottom-nav { border-radius:0 0 1.43rem 1.43rem; } }
@media (max-width:350px) { .topbar { padding-right:.75rem; padding-left:.75rem; } #appBody { padding-right:.75rem; padding-left:.75rem; } .hero-panel { height:12rem; } .hero-copy h2 { font-size:1rem; } .metric-card { padding-right:.4rem; padding-left:.4rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
/* Head B + KPI-first layout 1: energy operations */
:root{--brand:#69d0dc;--brand-strong:#359eb3;--brand-wash:#173c50;--brand-rgb:83,193,209}
.energy-app .topbar{background:linear-gradient(105deg,#0d2a45,#125168 58%,#14717a);padding-top:.75rem;padding-bottom:.65rem}.energy-app .brand-mark{color:#09263b;background:linear-gradient(145deg,#a8f1ea,#51c5d4);box-shadow:0 .25rem .7rem #51c5d426}.energy-app .brand-copy strong{color:#f1fbff;font-size:.83rem}.energy-app .brand-copy small{color:#b7dbe0}.energy-app .user-avatar{color:#baf3ee;background:#ffffff20}.energy-app .header-action{color:#e0f5f6}.header-tabs{display:flex;align-items:center;gap:.17rem;margin-left:auto}.header-tabs button{padding:.33rem .34rem;border-radius:.38rem;color:#c4e2e7;font-size:.48rem;white-space:nowrap}.header-tabs button.active{color:#fff;background:#ffffff20}.energy-app #screen-home>.welcome{display:none}.energy-app .metrics-grid{margin-top:.45rem}.energy-app .hero-panel{height:7.3rem;margin-top:.62rem;border:1px solid #2e7180;border-radius:.75rem;box-shadow:none}.energy-app .hero-photo{object-position:center 48%}.energy-app .hero-overlay{background:linear-gradient(90deg,#0b2945ec,#0b5364a6 72%,#0c657636)}.energy-app .hero-top{top:.45rem;left:.58rem;right:.58rem}.energy-app .hero-top span{padding:.2rem .35rem;font-size:.43rem}.energy-app .hero-copy{left:.68rem;bottom:1.04rem}.energy-app .hero-kicker{font-size:.39rem;letter-spacing:.09rem}.energy-app .hero-copy h2{margin:.2rem 0;font-size:.9rem;line-height:1.2}.energy-app .hero-copy p{font-size:.43rem}.energy-app .hero-cta{right:.55rem;bottom:.48rem;padding:.34rem .45rem;font-size:.48rem}.energy-app .hero-motion-toggle{left:auto;right:.55rem;top:.45rem;width:1.35rem;height:1.35rem;font-size:.7rem}.energy-app .hero-caption{display:none}

/* Narrow device preview: keep the brand row readable and move quick tabs to their own line. */
.energy-app .topbar{flex-wrap:wrap;gap:.45rem}
.energy-app .brand-copy{flex:1 1 7rem;min-width:0}
.energy-app .brand-copy strong,.energy-app .brand-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.energy-app .header-tabs{order:5;flex:1 0 100%;justify-content:space-around;margin:0;padding-left:2.8rem}
.energy-app .header-tabs button{flex:none;padding:.28rem .42rem}

/* Usable navigation sizing and viewport-contained mockup preview. */
.phone-shell,.app-shell{min-height:0!important}
.bottom-nav,.app-nav{box-sizing:border-box;min-height:4.2rem;padding-block:.42rem max(.48rem,env(safe-area-inset-bottom))}
.bottom-nav button,.bottom-nav a,.app-nav button,.app-nav a{box-sizing:border-box;min-width:2.75rem;min-height:2.85rem;padding:.22rem .12rem;gap:.24rem;font-size:.68rem;line-height:1.15;touch-action:manipulation}
.bottom-nav button>i,.bottom-nav a>i,.app-nav button>i,.app-nav a>i{font-size:1.3rem;line-height:1}
.bottom-nav button.scan,.bottom-nav button.nav-center{min-width:2.9rem;min-height:2.9rem}
.bottom-nav button.scan>i,.bottom-nav button.nav-center>i{font-size:1.35rem}.bottom-nav button.scan>span,.bottom-nav button.nav-center>span{font-size:.58rem}