:root{
  --bg:#0b0f17;
  --card:#12192a;
  --text:#f6f8ff;
  --muted:#c9d2ea;
  --line: rgba(255,255,255,0.18);
  --btn:#3b82f6;

  --pill: rgba(255,255,255,0.06);
  --pillLine: rgba(255,255,255,0.18);
  --shadow: 0 12px 36px rgba(0,0,0,0.35);
}

*{ box-sizing:border-box; }

html, body{
  width:100%;
  height:100%;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

/* Restores side margins / breathing room */
.container{
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 24px;
}

@media (max-width: 600px){
  .container{ padding:22px 16px; }
}

header h1{
  margin:0 0 6px;
  font-size:28px;
  letter-spacing:-0.02em;
}

.sub{
  margin:0;
  color:var(--muted);
}

/* Top bar header layout (buttons on the right) */
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 4px 0 16px;
}

.tabBtn{
  width:auto;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight:700;
}
.tabBtn.is-active{
  background: var(--btn);
  border-color: transparent;
  color:#fff;
}

.tabPanel{ display:none; }
.tabPanel.is-active{ display:block; }

.headerActions{
  display:flex;
  align-items:center;
  gap:12px;              /* space between buttons */
  padding-top:4px;
  white-space: nowrap;
}

.headerActions button{
  width:auto;
  padding:10px 14px;
}

.headerActions #copyLinkStatus{
  margin:0;
}

.grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:16px;
}
.true-tax-grid{
  grid-template-columns:360px 1fr;
}
.true-tax-side{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
}

.card.full{ grid-column:1 / -1; }

h2{
  margin:0 0 8px;
  font-size:16px;
  color:var(--text);
}

.form label{
  display:grid;
  gap:6px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:13px;
}

input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color:var(--text);
  outline:none;
}
input[disabled]{
  opacity:0.6;
  cursor:not-allowed;
}

/* Dropdown matches dark UI; OS dropdown list is usually light */
select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline:none;
  cursor:pointer;
  color-scheme: dark;
}
option{
  color: var(--text);
  background-color: var(--bg);
}

hr{
  border:none;
  border-top:1px solid var(--line);
  margin:14px 0;
}

button{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:none;
  background: var(--btn);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
button:hover{ filter:brightness(1.05); }

.btnSecondary{
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--line);
  color: var(--text);
}
.btnSecondary:hover{
  filter: brightness(1.08);
}

/* Borrow APR slider row */
.aprRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.aprRow input[type="range"]{
  flex: 1;
}

/* Number input with % suffix */
.suffixWrap{
  position: relative;
  width: 120px;
  flex: 0 0 auto;
}
.suffixWrap input{
  width: 100%;
  padding-right: 30px; /* room for % */
}
.suffix{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 800;
  pointer-events: none;
  font-size: 12px;
}

/* Hide number input spinners (up/down arrows) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{
  -moz-appearance: textfield;
}

.chart{ width:100%; height:460px; }
.chart.heat{ height:520px; }

.note{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.tax-summary{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--pill);
  color:var(--muted);
  font-size:12px;
  margin:6px 0 12px;
  line-height:1.35;
}

.details summary{
  cursor:pointer;
  color:var(--text);
  margin:8px 0 10px;
}

.mini{
  color:var(--muted);
  font-size:12px;
  margin:2px 0 10px;
  line-height:1.35;
}
.is-hidden{ display:none; }

/* Summary box under chart 1 */
.summary{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--pill);
}

.summary h3{
  margin:0 0 10px;
  font-size:13px;
  color:var(--text);
}
.bestStrategyTitle{
  margin:0 0 10px;
  font-size:16px;
  color:var(--text);
}
.bestStrategyBox{
  margin-bottom:14px;
}

.summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.tax-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:10px;
}

.kpi{
  padding:10px;
  border-radius:12px;
  border:1px solid var(--pillLine);
  background: rgba(255,255,255,0.03);
}

.kpi .label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}

.kpi .value{
  font-size:16px;
  font-weight:800;
  color:var(--text);
}

.kpi .subvalue{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.35;
}

/* Compact KPI style for Net value walk */
.kpi.compact .subvalue{
  font-size: 12px;
  line-height: 1.25;
}

.kpi.compact .walk-block{
  border: 1px solid var(--pillLine);
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 8px;
}

.kpi.compact .walk-title{
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 12px;
}

.kpi.compact .walk-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  margin:2px 0;
}

.kpi.compact .walk-row b{
  color:var(--text);
  font-weight:800;
}

.kpi.compact .walk-net{
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed var(--pillLine);
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
}

.kpi.compact .walk-net b{
  color:var(--text);
  font-weight:900;
}

@media (max-width:980px){
  .grid{ grid-template-columns:1fr; }
  .chart{ height:420px; }
  .chart.heat{ height:480px; }
  .summary-grid{ grid-template-columns:1fr; }
  .tax-grid{ grid-template-columns:1fr; }
  .true-tax-side{ grid-template-columns:1fr; }
}