:root{color-scheme:light;--ink:#283b39;--muted:#687b74;--line:#edf0f1;--green:#368671;--canvas:#f7f8fa}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.shell{max-width:1080px;margin:auto;padding:28px 28px max(28px,env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand>div{min-width:0}
.brand strong{display:block;font-size:15px;font-weight:650;overflow-wrap:anywhere}
.brand small{display:block;margin-top:1px;color:var(--muted);font-size:11px}
.mark{display:grid;place-items:center;flex:none;border-radius:15px;width:44px;height:44px;background:#e5f0eb;color:var(--green)}
.mark svg{width:24px;height:24px}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,summary:focus-visible{outline:3px solid #6dab98;outline-offset:3px}
button:disabled{opacity:.55;cursor:wait}
#refresh{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #e9eeee;border-radius:15px;background:#fff;color:#7a918a}
#refresh svg{width:21px;height:21px}
#refresh:disabled svg{animation:spin 1.4s linear infinite}
button:hover{filter:brightness(.98)}
h1,h2,p{margin:0}
h1{font-size:28px;line-height:1.25;letter-spacing:-.8px;font-weight:700}
h2{font-size:16px;letter-spacing:-.2px;font-weight:650}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px}
.eyebrow{color:var(--green);font-size:11px;font-weight:600;margin-bottom:6px}
.date-range{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin-top:9px}
.date-range svg{width:14px;height:14px;flex:none}
.period-control{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.periods{display:flex;gap:3px;padding:4px;border:1px solid #e9eeee;background:#edf1f0;border-radius:14px}
.periods button{border:0;background:transparent;color:#6b8076;border-radius:10px;padding:8px 16px;font-size:12px;min-height:36px;white-space:nowrap}
.periods button[aria-pressed="true"]{color:#32785f;background:#fff;box-shadow:0 2px 5px #24483a08;font-weight:650}
.updated{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.updated i{width:5px;height:5px;background:#8bb69f;border-radius:50%}
.back{display:flex;align-items:center;gap:6px;min-height:44px;padding:10px 14px;background:#fff;border:1px solid #e8eeee;border-radius:12px;color:var(--green);font-size:12px}
.back svg{width:16px;height:16px}
.hero{position:relative;overflow:hidden;border:1px solid #dcebe2;border-radius:24px;padding:24px 26px;background:linear-gradient(125deg,#e5f2e9,#eff7f1);margin-bottom:14px}
.hero::after{content:"";position:absolute;right:-36px;top:-75px;width:220px;height:220px;border:35px solid #ffffff35;border-radius:50%;pointer-events:none}
.hero-head{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:1}
.result-label{font-size:13px;color:#5c7f6e;font-weight:550}
.result-type{font-size:10px;color:#6e9380;background:#ffffff80;border:1px solid #d8e8dc;border-radius:8px;padding:5px 8px}
.result-value{position:relative;z-index:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:10px 0 8px;color:#2f6f55;overflow-wrap:anywhere}
.result-value strong{font-size:38px;line-height:1.15;letter-spacing:-1.1px;font-weight:700;font-variant-numeric:tabular-nums;max-width:100%}
.result-value span{font-size:14px;font-weight:500;color:#769482}
.result-note{position:relative;z-index:1;font-size:11px;color:#657e6d}
.hero.negative{background:linear-gradient(125deg,#fbece8,#fff5ee);border-color:#f0ddd3}
.hero.negative .result-value{color:#9b6251}
.hero.negative .result-label,.hero.negative .result-note{color:#9a7f71}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}
.metric{min-width:0;border:1px solid #e7ede9;border-radius:20px;padding:17px;background:#fff;box-shadow:0 4px 12px #253d3203}
.metric-head{display:flex;align-items:center;gap:8px;font-size:11px;color:#63796e}
.metric-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;flex:none;color:#629780;background:#e9f4ed}
.metric-icon svg{width:16px;height:16px}
.metric strong{display:block;line-height:1.2;margin:14px 0 3px;font-size:22px;font-weight:650;letter-spacing:-.5px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.metric-unit{display:block;font-size:10px;color:#71847a}
.metric small{display:block;margin-top:12px;font-size:10px;color:#75877c}
.metric.cost{background:#f4f7fc;border-color:#e6ecf6}
.metric.cost .metric-head{color:#63758e}
.metric.cost .metric-icon{color:#819bc3;background:#e7edf7}
.metric.margin{background:#f8f5fc;border-color:#eee8f5}
.metric.margin .metric-head{color:#7c6b8f}
.metric.margin .metric-icon{color:#a290ba;background:#efe8f7}
.metric.expense{background:#fdf7f0;border-color:#f3eadd}
.metric.expense .metric-head{color:#8b7559}
.metric.expense .metric-icon{color:#b59a71;background:#f7eddc}
.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start;margin-bottom:18px}
.panel{background:#fff;border:1px solid #e9eeee;border-radius:22px;padding:22px;box-shadow:0 4px 20px #273f3303;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.section-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#f2f6f4;color:#8ca99a;flex:none}
.section-icon svg{width:17px;height:17px}
.muted{font-size:11px;color:var(--muted);line-height:1.65}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding:12px 0}
.row:last-child{border-bottom:0}
.row span{font-size:12px;color:#687d70;min-width:0}
.row strong{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:60%}
.row.total{border:0;margin-top:8px;background:#f0f6f2;border-radius:12px;padding:12px}
.row.total span{color:#688776}
.row.total strong{color:#39785b}
.row.unavailable strong{color:#99a39e;font-size:11px;font-weight:500}
.cash-chart{padding:14px 0 8px}
.legend{display:flex;gap:15px;margin:5px 0 8px;font-size:10px;color:#8b9992}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:7px;height:7px;border-radius:3px;background:#83b59c}
.legend .expense{background:#dfbf90}
.chart{width:100%;height:auto;display:block}
.chart text{font-family:system-ui;font-size:10px;fill:#748c7d}
.calculation-note{font-size:10px;line-height:1.7;color:#a0aaa4;margin-top:14px}
.analysis-panel{margin-bottom:18px}
.analysis-heading{display:flex;align-items:center;gap:9px}
.analysis-heading .section-icon{background:#f3eefb;color:#a698bc}
.analysis{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.85;color:#65756e;margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}
.archive-panel{padding:0}
.archive-panel summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;-webkit-tap-highlight-color:transparent}
.archive-panel summary::-webkit-details-marker{display:none}
.archive-title{display:flex;align-items:center;gap:10px}
.archive-title strong{display:block;font-size:15px;font-weight:650}
.archive-title small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.archive-count{display:flex;align-items:center;gap:10px;color:#94a39c;font-size:11px}
.archive-count svg{width:16px;height:16px;transition:transform .2s}
.archive-panel[open] .archive-count svg{transform:rotate(180deg)}
.archive{display:grid;gap:8px;padding:0 22px 20px}
.archive button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:14px;border:1px solid #edf0ef;border-radius:14px;background:#fafcfb;min-height:60px}
.archive small{display:block;color:#97a59e;font-size:10px;margin-top:3px}
.archive b{font-size:12px;font-weight:550}
.archive svg{width:16px;height:16px;color:#90a298;flex:none}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:80px 20px;color:var(--muted);font-size:13px}
.loading-dot{width:9px;height:9px;border-radius:50%;background:#91bba5;animation:pulse 1.2s ease-in-out infinite}
.error{border:1px solid #f1dfcd;background:#fff5eb;border-radius:16px;padding:15px;color:#987b60;font-size:12px;margin-bottom:18px}
footer{text-align:center;font-size:10px;color:#a4b0aa;padding-top:24px}
.empty{font-size:12px;color:#98a69e;padding:18px 0}
[hidden]{display:none!important}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.4}}
@media(max-width:700px){
  .shell{padding:20px 16px max(24px,env(safe-area-inset-bottom))}
  .top{margin-bottom:26px}
  .intro{display:block;margin-bottom:18px}
  h1{font-size:25px;letter-spacing:-.65px}
  .period-control{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}
  .periods button{padding:7px 14px}
  .updated{font-size:10px;gap:4px}
  .hero{border-radius:22px;padding:20px;margin-bottom:12px}
  .result-value strong{font-size:clamp(25px,8vw,36px)}
  .result-value{margin:12px 0 9px;gap:6px}
  .result-value span{font-size:12px}
  .result-note{font-size:10px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
  .metric{padding:15px;border-radius:19px}
  .metric-head{font-size:11px;gap:6px}
  .metric-icon{width:25px;height:25px;border-radius:9px}
  .metric strong{font-size:clamp(16px,4.5vw,22px);margin-top:14px}
  .metric small{margin-top:10px;font-size:10px}
  .grid{grid-template-columns:1fr;gap:16px;margin-bottom:16px}
  .panel{padding:19px;border-radius:20px}
  .row{gap:10px}
  .row span{font-size:11px}
  .row strong{font-size:12px}
  .analysis-panel{margin-bottom:16px}
  .archive-panel{padding:0}
  .archive-panel summary{padding:19px}
  .archive{padding:0 19px 19px}
}
@media(max-width:360px){
  .shell{padding-left:12px;padding-right:12px}
  .periods button{padding:7px 11px}
  .metric{padding:13px}
  .metric-head{gap:5px;font-size:10px}
  .row strong{font-size:11px}
  .panel{padding:17px}
  .archive-panel{padding:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}