:root {
  --gold: #BEAF87;
  --dark-gold: #A19276;
  --obsessed-grey: #252526;
  --medium-grey: #808285;
  --light-grey: #E6E7E8;
  --ink: #252526;
  --muted: #6f7072;
  --line: #E6E7E8;
  --bg: #f7f7f6;
  --card: #ffffff;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--obsessed-grey) 0 190px, var(--bg) 190px 100%);
  min-height: 100vh;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 620px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom)); }
.app-header { display:flex; align-items:center; justify-content:space-between; padding: 8px 4px 18px; }
.brand-wrap { min-width: 0; }
.brand-wordmark { display:block; width:min(260px, 63vw); height:auto; }
.subbrand { color:var(--light-grey); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-top:7px; opacity:.78; }
.install-btn { border: 1px solid rgba(190,175,135,.6); background:var(--gold); color:var(--obsessed-grey); border-radius:999px; padding:10px 14px; font-weight:800; }
.tabs { display:grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(255,255,255,.12); padding: 5px; border-radius: 999px; backdrop-filter: blur(10px); margin-bottom: 26px; border:1px solid rgba(255,255,255,.08); }
.tab, .segment { border: 0; background: transparent; padding: 12px 10px; border-radius:999px; font-weight: 700; color:#666; }
.tab { color:var(--light-grey); }
.tab.active { background:var(--gold); color:var(--obsessed-grey); box-shadow: 0 1px 5px rgba(0,0,0,.16); }
.segment.active { background:#fff; color:var(--obsessed-grey); box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.panel { display:none; }
.panel.active {
  display:block;
  padding-top:26px;
}
.card, .result-card { background: var(--card); border:1px solid rgba(37,37,38,.05); border-radius: var(--radius); padding:18px; box-shadow: 0 10px 30px rgba(37,37,38,.055); margin-bottom: 14px; }
.compact { padding:16px 18px; }
.label { display:block; font-size:.84rem; color:var(--obsessed-grey); font-weight:700; margin: 4px 0 7px; }
.input, .money-input { width:100%; border:1px solid var(--line); border-radius:14px; background:#fafafa; min-height:52px; margin-bottom:16px; }
.input { padding: 0 14px; }
.input:focus, .money-input:focus-within { outline:2px solid rgba(190,175,135,.42); border-color:var(--gold); }
.money-input { display:flex; align-items:center; gap:8px; padding: 0 14px; }
.money-input span { font-size:1.12rem; font-weight:800; color:var(--dark-gold); }
.money-input input { min-width:0; width:100%; border:0; outline:0; background:transparent; font-size:1.08rem; color:var(--ink); }
.money-input.small { margin-bottom:16px; }
.input-with-suffix { display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; }
.input-with-suffix .input { margin-bottom:16px; }
.input-with-suffix span { color:var(--muted); margin-bottom:16px; }
.toggle-row { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; line-height:1.35; color:#444; }
.toggle-row input { margin-top:3px; width:18px; height:18px; accent-color:var(--dark-gold); }
.result-card { background:var(--obsessed-grey); color:#fff; border-color:transparent; }
.result-label, .total-caption { text-transform:uppercase; letter-spacing:.11em; font-size:.72rem; font-weight:800; color:var(--gold); }
.result-main { font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight:800; line-height:1.12; margin-top:8px; }
.total-pair { display:grid; gap:16px; margin-top:10px; }
.inclusive-total { border-top:1px solid rgba(230,231,232,.18); padding-top:15px; }
.secondary-total { color:var(--gold); }
.result-sub { margin-top:10px; color:#d3d3d3; font-size:.92rem; }
.section-title { font-weight:800; margin-bottom:8px; color:var(--obsessed-grey); }
.card p { color:#666; margin:0; line-height:1.5; font-size:.9rem; }
.breakdown { color:#555; font-size:.86rem; margin-top:8px; }
.mini-result { font-weight:800; font-size:1.15rem; margin-top:2px; }
.segmented { display:grid; grid-template-columns: 1fr 1fr; background:rgba(190,175,135,.38); padding:5px; border-radius:999px; margin:0 auto 14px; width:min(330px, 100%); }
.grid-2 { display:grid; grid-template-columns:1fr 1.3fr; gap:10px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:0; }
.total-row strong { color:var(--dark-gold); }
footer { padding:10px 5px 0; color:#666; font-size:.8rem; display:grid; gap:6px; }
footer small { line-height:1.4; }
@media (min-width:500px) {
  .total-pair { grid-template-columns:1fr 1fr; }
  .inclusive-total { border-top:0; border-left:1px solid rgba(230,231,232,.18); padding-top:0; padding-left:18px; }
}
@media (max-width:420px) {
  .grid-2 { grid-template-columns:1fr; gap:0; }
}
select.input { appearance:auto; }
.option-divider { border-top:1px solid var(--line); padding-top:14px; margin:0 0 14px; }
.toggle-row small { color:var(--muted); }
.excluded-list { margin-top:10px; display:grid; gap:5px; font-size:.8rem; color:#666; }
.notice { margin:14px 2px; border-radius:14px; padding:14px 16px; background:#f2eee4; border:1px solid rgba(161,146,118,.55); display:grid; gap:5px; font-size:.84rem; line-height:1.4; }
.notice[hidden] { display:none; }

#workingPanel > .segmented,
#commissionPanel > .segmented {
  margin-top: 0;
  margin-bottom: 14px;
}