:root { --brand:#159477; --brand-strong:#08795f; --brand-wash:#e8f6f1; --brand-rgb:21,148,119; --ink:#25463f; --muted:#869c93; --line:#deebe4; --canvas:#f1f7f3; --good:#269774; --warn:#c48a35; --bad:#d2705c; }
* { 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/environmental-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; }

/* Environmental stewardship: paper white, forest green, soft circular surfaces. */
body { background:#e7f0e9; }.eco-app { background:radial-gradient(ellipse at 100% 0,#dceee1,transparent 45%),#f1f7f3; }
.topbar { padding-top:1rem; background:#f7fbf7; }.brand-mark { border-radius:.85rem .85rem .85rem .25rem; background:linear-gradient(135deg,#69bb95,#198669); box-shadow:0 .3rem .7rem #1e8c6926; }.brand-copy strong { font-size:1rem; }.brand-copy small { color:#88a092; font-size:.6rem; }
.welcome { margin:.85rem 0 1rem; }.welcome p { font-size:.65rem; }.welcome h1 { font-size:1.35rem; }.shift-pill { color:#377b61; background:#deeee1; font-size:.55rem; }
.hero-panel { height:14.75rem; border-radius:1.25rem 1.25rem 1.25rem .35rem; box-shadow:0 .6rem 1.2rem #22684b1c; }.hero-photo { object-position:60% center; animation:water-pan 28s ease-in-out infinite alternate; }.hero-overlay { background:linear-gradient(90deg,#0b4338ef,#0a594da0 65%,#1a776a24),linear-gradient(0deg,#0b403ce0,transparent 65%); }
.hero-top span { font-size:.58rem; }.hero-copy { bottom:3.35rem; }.hero-kicker { font-size:.51rem; letter-spacing:.13rem; color:#bde4c6; }.hero-copy h2 { font-size:1.5rem; line-height:1.4; }.hero-copy p { font-size:.65rem; color:#c5e2d5; }.hero-caption { display:none; }.hero-cta { right:.85rem; bottom:.85rem; padding:.48rem .65rem; border-color:#c6edcb54; background:#c6edcb21; font-size:.62rem; }.hero-motion-toggle { position:absolute; left:.9rem; bottom:.85rem; display:grid; place-items:center; width:1.85rem; height:1.85rem; border:1px solid #ffffff4a; border-radius:50%; color:#fff; background:#ffffff18; }.hero-paused .hero-photo { animation-play-state:paused; }
.metrics-grid { gap:.45rem; margin-top:.75rem; }.metric-card { padding:.75rem .5rem; border-color:#deece2; border-radius:.9rem; box-shadow:0 .2rem .7rem #24734d07; }.metric-card>span { color:#799586; font-size:.57rem; }.metric-card>strong { margin:.5rem 0 .35rem; color:#294c3d; font-size:1.3rem; }.metric-card>strong small { font-size:.5rem; }.metric-card>em { font-size:.51rem; }
.section-block { margin-top:1.6rem; }.eyebrow { color:#88a28e; font-size:.51rem; letter-spacing:.12rem; }.section-head { margin-bottom:.7rem; }.section-head h2 { margin-top:.3rem; font-size:.95rem; }.text-link { color:#27856a; font-size:.62rem; }.module-live { display:flex; align-items:center; gap:.3rem; color:#479578; font-size:.55rem; white-space:nowrap; }.module-live i { width:.35rem; height:.35rem; border-radius:50%; background:#4bad7c; }
.compliance-board { overflow:hidden; border:1px solid #dcebe0; border-radius:1rem; background:#fff; box-shadow:0 .3rem 1rem #195b3407; }.compliance-banner { display:flex; align-items:center; gap:.5rem; padding:.8rem .7rem; background:linear-gradient(110deg,#e5f3e9,#f3f8ec); }.compliance-banner>i { color:#288b67; font-size:1.25rem; }.compliance-banner>div { flex:1; }.compliance-banner strong { display:block; color:#3c7054; font-size:.72rem; }.compliance-banner small { display:block; margin-top:.25rem; color:#82a08b; font-size:.55rem; }.compliance-banner button { color:#4c825d; font-size:.59rem; }
.compliance-row { display:flex; align-items:center; gap:.55rem; width:100%; padding:.85rem .7rem; border-bottom:1px solid #ecf3ee; text-align:left; }.compliance-row:last-child { border-bottom:0; }.compliance-icon { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:.7rem; color:#328d75; background:#edf7f2; font-size:.9rem; }.compliance-copy { flex:1; min-width:0; }.compliance-copy strong { display:block; color:#3a5c4c; font-size:.7rem; }.compliance-copy>small { display:block; margin-top:.35rem; color:#91a497; font-size:.55rem; }.compliance-value { text-align:right; }.compliance-value strong { display:block; color:#2c705a; font-size:1.08rem; }.compliance-value strong small { margin-left:.15rem; color:#7d9b8b; font-size:.49rem; font-weight:500; }.compliance-value em { display:block; margin-top:.25rem; color:#439b75; font-size:.53rem; font-style:normal; }.needs-review { background:#fffcf5; }.needs-review .compliance-value em { color:#b98638; }
.trend-section { padding:.95rem .8rem .8rem; border-color:#dfebe1; border-radius:1rem; background:#fff; box-shadow:0 .3rem 1rem #195b3405; }.trend-total { margin-top:.6rem; }.trend-total>strong { color:#315d49; font-size:1.5rem; }.trend-total>strong small { font-size:.6rem; color:#8aa390; }.trend-total>span { font-size:.56rem; }.period-toggle { border-color:#dfece4; border-radius:1rem; color:#72907e; background:#f7fbf8; font-size:.6rem; }.chart-caption { margin:.65rem 0 .2rem; color:#8ca491; font-size:.58rem; }.chart-gridline { stroke:#e7f0e9; }.chart-labels { margin-top:.3rem; color:#91a995; font-size:.53rem; }#trendChart { height:5rem; }
.eco-savings { padding:.95rem .8rem .7rem; border:1px solid #dce9d5; border-radius:1rem; background:linear-gradient(140deg,#f4f7e8,#edf5e8); }.eco-savings .section-head h2 { color:#53744c; font-size:.85rem; }.saving-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1rem; }.saving-grid button { display:grid; gap:.3rem; padding:.7rem .5rem; border:1px solid #e0eacf; border-radius:.8rem; background:#ffffff91; text-align:left; }.saving-grid button>i { color:#699a60; font-size:1.1rem; }.saving-grid strong { color:#456f3c; font-size:1.5rem; letter-spacing:-.04rem; }.saving-grid strong small { margin-left:.16rem; font-size:.55rem; font-weight:500; letter-spacing:0; }.saving-grid span { color:#78926b; font-size:.65rem; }.saving-grid em { color:#7ca270; font-size:.55rem; font-style:normal; }.circular-note { display:flex; align-items:center; gap:.3rem; margin-top:.8rem; color:#8a9e75; font-size:.55rem; }.circular-note>span { flex:1; }.circular-note strong { color:#6d8a58; font-size:.55rem; font-weight:500; }
.governance { padding:.95rem .8rem .7rem; border:1px solid #deebe2; border-radius:1rem; background:#fff; }.governance .section-head h2 { font-size:.85rem; }.governance-summary { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.8rem 0 1rem; }.governance-summary>div>strong { display:block; color:#345e49; font-size:1.6rem; }.governance-summary small { color:#8ca491; font-size:.65rem; font-weight:500; }.governance-summary>div>span { display:block; margin-top:.2rem; color:#95a79a; font-size:.62rem; }.completion-ring { display:grid; place-items:center; width:3.7rem; height:3.7rem; border-radius:50%; background:conic-gradient(#3b9c76 0 var(--completion),#edf4ee var(--completion) 100%); }.completion-ring>b { display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:50%; color:#4b8061; background:#fff; font-size:.75rem; }
.trace-steps { display:flex; align-items:center; justify-content:space-between; gap:.2rem; padding:.75rem .3rem; border-radius:.7rem; background:#f4f8f4; }.trace-steps>span { display:grid; justify-items:center; gap:.3rem; color:#6e927b; font-size:.59rem; }.trace-steps>span i { color:#50a17a; font-size:.95rem; }.trace-steps>i { color:#b6ccbc; font-size:.55rem; }.ledger-button { display:flex; align-items:center; gap:.4rem; width:100%; margin-top:.65rem; padding:.6rem .1rem; color:#6a947d; font-size:.63rem; }.ledger-button>span { flex:1; text-align:left; }
.asset-card { padding:.8rem .7rem; border-color:#deebe2; border-radius:.85rem; box-shadow:none; }.asset-copy strong { color:#3a5d4b; font-size:.73rem; }.asset-copy small { margin-top:.3rem; color:#94a697; font-size:.57rem; }.asset-reading strong { color:#3d6c55; font-size:.85rem; }.asset-reading small { font-size:.52rem; }.asset-icon { border-radius:.75rem; color:#509d79; background:#eef7f0; }
.focus-card { padding:.8rem .7rem; border-radius:.9rem; }.focus-copy strong { font-size:.7rem; }.focus-copy small { font-size:.59rem; line-height:1.6; }.pill-count { font-size:.57rem; }.quick-action { gap:.5rem; padding:.9rem .2rem; border-color:#dfebe3; border-radius:.85rem; font-size:.6rem; }.quick-action>i { color:#479b79; font-size:1.2rem; }.demo-note { font-size:.55rem; color:#93a69b; }
.bottom-nav { border-color:#dce9e0; background:#fcfefbed; }.bottom-nav button { color:#96ad9d; font-size:.6rem; }.bottom-nav button.active { color:#278968; }.bottom-nav button>i { font-size:1.15rem; }.page-heading p { font-size:.7rem; }.task-copy strong,.alert-copy strong { font-size:.73rem; }.task-copy p,.alert-copy p { font-size:.65rem; }.task-copy small,.alert-copy small { font-size:.56rem; }.task-card>button,.alert-row>button { font-size:.6rem; }.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:#829a8d; font-size:.68rem; }.primary-button { min-height:2.8rem; font-size:.8rem; }.toast-message { font-size:.75rem; }
@keyframes water-pan { from { transform:scale(1.01) translateX(.1rem); } to { transform:scale(1.08) translateX(-.18rem); } }
@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 D + image-free gradient layout 8: eco governance */
.eco-app .topbar{margin:.48rem .65rem 0;padding:.52rem .65rem;border:1px solid #e2eee5;border-radius:1rem;background:#fff;box-shadow:0 .35rem 1rem #245b390b}.eco-app .brand-mark{width:2.05rem;height:2.05rem}.eco-app .brand-copy strong{font-size:.8rem}.eco-app .brand-copy small{font-size:.47rem}.eco-app .search-shortcut{width:1.7rem;height:1.7rem;color:#568b72;font-size:.82rem}.eco-app .screen[data-screen=home]>.welcome{display:none}.eco-app .hero-panel{height:10.25rem;border:1px solid #2f876d;border-radius:1rem;background:radial-gradient(ellipse at 85% 5%,#8dc9a43d,transparent 44%),linear-gradient(135deg,#0e6558,#16866e 53%,#72ad7a);box-shadow:0 .55rem 1.3rem #12654f25}.eco-app .hero-photo{display:none}.eco-app .hero-overlay{background:linear-gradient(115deg,#0b534d2b,#fff0 65%),radial-gradient(circle at 20% 100%,#a8d8a333,transparent 45%)}.eco-app .hero-top span{border-color:#ffffff42;background:#ffffff18;color:#eaf8ee}.eco-app .hero-copy{left:50%;top:50%;bottom:auto;width:86%;transform:translate(-50%,-48%);text-align:center}.eco-app .hero-kicker{color:#cdebd6;font-size:.45rem;letter-spacing:.12rem}.eco-app .hero-copy h2{margin:.43rem 0;font-size:1.23rem;line-height:1.35}.eco-app .hero-copy p{color:#e0f1e5;font-size:.57rem}.eco-app .hero-cta{right:.62rem;bottom:.55rem;padding:.38rem .5rem;border-color:#ffffff54;background:#ffffff20;color:white;font-size:.5rem}.eco-app .hero-motion-toggle{left:.62rem;bottom:.55rem;width:1.45rem;height:1.45rem;font-size:.75rem}.eco-app .hero-caption{display:none}.eco-app .metrics-grid{margin-top:.72rem}

/* Preserve the floating-card header hierarchy inside narrow phone-shell previews. */
.eco-app .topbar{display:grid;grid-template-columns:2.05rem minmax(0,1fr) 1.7rem 1.7rem 1.7rem;gap:.42rem}
.eco-app .brand-copy{min-width:0}
.eco-app .brand-copy strong,.eco-app .brand-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eco-app .header-action,.eco-app .user-avatar{flex:none;width:1.7rem;height:1.7rem}

/* 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}