:root{
  --ink:#20241F;
  --rust:#A8451F;
  --rust-dark:#7d3417;
  --paper:#F6F3EC;
  --paper-2:#EFEAE0;
  --paper-3:#FBF9F4;
  --time-bar:#7FA8B0;
  --line:#DAD5C8;
  --muted:#54584F;
  --muted-2:#6B6F65;
  --muted-3:#8C9086;
  --amber:#E8A54B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.heading{font-family:'Space Grotesk',system-ui,sans-serif;}
.num{font-family:'DM Mono',monospace;}
a{color:var(--rust);text-decoration:none;}
a:hover{color:var(--rust-dark);}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}

#app{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  position:relative;
  padding-bottom:24px;
}

.screen{display:none;padding:20px;flex-direction:column;gap:16px;min-height:100vh;}
.screen.active{display:flex;}

/* Header */
.app-header{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand .household{font-size:15px;font-weight:600;letter-spacing:0.2px;}
.icon-btn{width:38px;height:38px;border-radius:19px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;border:none;flex-shrink:0;}
.icon-btn:active{background:var(--line);}
.back-row{display:flex;align-items:center;gap:10px;}
.back-btn{background:none;border:none;padding:4px;display:flex;align-items:center;color:var(--ink);}

/* Sample data banner */
.sample-banner{
  display:flex;align-items:center;gap:8px;
  background:var(--paper-3);border:1px dashed #C7A98F;border-radius:12px;
  padding:9px 12px;font-size:11.5px;color:var(--muted);line-height:1.4;
}

/* Latest reading strip */
.latest-strip{background:var(--ink);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;}
.latest-strip.single{padding:20px;border-radius:18px;}
.latest-top{display:flex;align-items:baseline;justify-content:space-between;}
.latest-label{color:#9AA096;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.6px;}
.latest-value-row{display:flex;align-items:baseline;gap:6px;}
.latest-value{color:var(--paper);font-weight:500;}
.latest-sub{color:#C9CDC5;font-size:12px;}
.strip-divider{height:1px;background:#3A3F35;}
.fuel-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.fuel-mini{display:flex;align-items:center;gap:8px;}
.fuel-dot{width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fuel-dot.elec{background:var(--rust);}
.fuel-dot.gas{background:var(--time-bar);}
.fuel-mini-text .name{color:#E4E6E0;font-size:11.5px;}
.fuel-mini-text .val{color:#C9CDC5;font-size:11px;}

/* Period cards */
.period-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.period-card{background:var(--paper-2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;border:none;text-align:left;width:100%;}
.period-card:active{background:var(--line);}
.period-card .heading{font-size:12.5px;font-weight:600;}
.period-card .value{font-size:19px;font-weight:500;}
.period-card .value .unit{font-size:11px;font-family:'Inter';font-weight:400;color:var(--muted);}
.period-card .cost{font-size:12px;color:var(--muted);}
.bar{height:5px;border-radius:3px;background:var(--rust);margin-top:2px;overflow:hidden;display:flex;}
.bar span.elec{background:var(--rust);}
.bar span.gas{background:var(--time-bar);}
.split-detail{display:flex;flex-direction:column;gap:2px;font-size:10.5px;color:var(--muted);}

/* Custom period link/button */
.cta-outline{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;border-radius:14px;border:1px solid var(--line);font-size:13.5px;font-weight:500;margin-top:2px;background:none;color:var(--ink);width:100%;}
.cta-outline:active{background:var(--paper-2);}
.cta-solid{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 22px;border-radius:12px;background:var(--rust);border:none;color:white;font-size:13.5px;font-weight:600;width:100%;}
.cta-solid:active{background:var(--rust-dark);}
.cta-solid:disabled{background:#C7A98F;cursor:not-allowed;}

/* Onboarding */
.progress-row{display:flex;gap:6px;}
.progress-seg{flex:1;height:4px;border-radius:2px;background:var(--line);}
.progress-seg.done{background:var(--ink);}
.onb-title{font-size:21px;font-weight:600;margin-bottom:6px;}
.onb-sub{font-size:13.5px;color:var(--muted);line-height:1.5;}
.section-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:10px;}
.fuel-toggle-row{display:flex;gap:10px;}
.fuel-chip{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:14px;border:1.5px solid var(--line);background:none;}
.fuel-chip.active{background:var(--ink);border-color:var(--ink);}
.fuel-chip .label{color:var(--muted-3);font-size:13.5px;font-weight:600;}
.fuel-chip.active .label{color:var(--paper);}
.hint{font-size:11.5px;color:var(--muted-3);margin-top:8px;}

.capture-card{border:1.5px dashed #C7A98F;border-radius:18px;padding:26px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--paper-3);}
.capture-icon{width:56px;height:56px;border-radius:28px;background:var(--rust);display:flex;align-items:center;justify-content:center;}
.capture-title{font-size:15px;font-weight:600;margin-bottom:4px;}
.capture-desc{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:260px;text-align:center;}

.or-divider{display:flex;align-items:center;gap:12px;}
.or-divider .line{flex:1;height:1px;background:var(--line);}
.or-divider span{font-size:11.5px;color:var(--muted-3);}

.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.3px;}
.form-field input,.form-field select{
  padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper-3);
  font-size:14px;color:var(--ink);
}
.form-field input:focus,.form-field select:focus{outline:none;border-color:var(--rust);}

.confirm-card{background:var(--paper-2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.confirm-row{display:flex;justify-content:space-between;font-size:13px;}
.confirm-row .k{color:var(--muted);}
.confirm-row .v{font-weight:500;}
.consent-row{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--muted);line-height:1.5;}
.consent-row input{margin-top:2px;flex-shrink:0;}

/* Custom period screen */
.chart-card{background:var(--paper-2);border-radius:16px;padding:16px 16px 12px;display:flex;flex-direction:column;gap:4px;}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;}
.legend-dot{display:flex;align-items:center;gap:6px;}
.legend-dot .sw{width:9px;height:9px;border-radius:2px;}
.legend-dot span{font-size:11px;color:var(--muted);}
.chart-total{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;}
.chart-total .n{font-size:20px;font-weight:500;}
.chart-total .u{font-size:12.5px;color:var(--muted);}

.range-card{background:var(--paper-2);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;}
.date-row{display:flex;gap:10px;}
.date-box{flex:1;background:var(--paper);border-radius:10px;padding:10px 12px;border:none;text-align:left;}
.date-box .lbl{font-size:10.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:3px;}
.date-box .val{font-size:14px;font-weight:500;}
.date-box input[type=date]{border:none;background:none;font-family:'DM Mono',monospace;font-size:14px;color:var(--ink);width:100%;padding:0;}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:7px 13px;border-radius:20px;background:var(--paper);font-size:12px;color:var(--muted);border:none;}
.chip.active{background:var(--ink);color:var(--paper);font-weight:600;}

.compare-row{display:flex;align-items:center;justify-content:space-between;padding:2px 2px;}
.compare-title{font-size:13.5px;font-weight:500;}
.compare-sub{font-size:11.5px;color:var(--muted-2);margin-top:2px;}
.switch{width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;flex-shrink:0;border:none;padding:0;}
.switch.on{background:var(--rust);}
.switch .knob{width:18px;height:18px;border-radius:9px;background:white;position:absolute;top:3px;left:3px;transition:left .15s;}
.switch.on .knob{left:21px;}

.delta-banner{background:var(--ink);border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;}
.delta-banner .lbl{color:#E4E6E0;font-size:13px;}
.delta-banner .val{display:flex;align-items:baseline;gap:6px;}
.delta-banner .pct{color:var(--amber);font-size:16px;font-weight:500;}
.delta-banner .abs{color:#9AA096;font-size:12px;}

.result-card{background:var(--paper-2);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;}
.result-card.prev{background:transparent;border:1px solid var(--line);}
.result-head{display:flex;align-items:baseline;justify-content:space-between;}
.result-head .heading{font-size:14px;font-weight:600;}
.result-head .tag{font-size:11px;color:var(--muted-2);}
.result-value{display:flex;align-items:baseline;gap:8px;}
.result-value .n{font-size:22px;font-weight:500;}
.result-value .u{font-size:13px;color:var(--muted);}

/* Settings */
.settings-group{background:var(--paper-2);border-radius:14px;padding:6px 16px;display:flex;flex-direction:column;}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);gap:12px;}
.settings-row:last-child{border-bottom:none;}
.settings-row .lbl{font-size:13.5px;}
.settings-row .sub{font-size:11.5px;color:var(--muted-2);margin-top:2px;}
.settings-row input[type=number]{width:80px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);text-align:right;font-family:'DM Mono',monospace;}
.settings-row input[type=text]{padding:8px 10px;border-radius:8px;border:1px solid var(--line);text-align:right;font-family:inherit;flex:1;max-width:180px;}
.danger-btn{padding:12px;border-radius:12px;border:1px solid #C77;background:none;color:#A8331F;font-size:13px;font-weight:600;width:100%;}
.danger-btn:active{background:#F6E4E0;}

.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);border-top-color:white;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.tag-note{font-size:11px;color:var(--muted-3);text-align:center;line-height:1.5;}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}