@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#0F1520;
  --panel:#16212E;
  --panel2:#1D2B3A;
  --line:#28364A;
  --turf:#4C6F8A;
  --turf-bright:#7CA8CE;
  --chalk:#EDEAE0;
  --muted:#8B95A0;
  --gold:#C9A24B;
  --rust:#B65C4A;
}
*{box-sizing:border-box;}
.tte{
  background:var(--bg);
  color:var(--chalk);
  font-family:'Inter',sans-serif;
  padding:28px 20px 60px;
  border-radius:14px;
  max-width:980px;
  margin:0 auto;
}
.tte h1,.tte h2,.tte h3{font-family:'Oswald',sans-serif;letter-spacing:.02em;margin:0;}
.tte .mono{font-family:'JetBrains Mono',monospace;}

/* HERO */
.hero{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
  align-items:center;
}
@media(max-width:720px){.hero{grid-template-columns:1fr;}}
.hero .eyebrow{
  color:var(--turf-bright);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.hero h1{font-size:34px;font-weight:700;color:var(--chalk);line-height:1.05;}
.hero h1 span{color:var(--turf-bright);}
.hero p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:10px;max-width:46ch;}

.dial-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dial-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px;}
.dial-value{font-family:'Oswald',sans-serif;font-size:26px;color:var(--gold);font-weight:600;margin-top:-6px;}
.dial-tag{font-size:12px;color:var(--turf-bright);margin-top:2px;}

/* TOOLBAR */
.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:22px;
}
.toolbar .grow{flex:1;min-width:180px;font-size:13px;color:var(--muted);}
.btn{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--chalk);cursor:pointer;
  transition:.15s border-color,.15s background;
}
.btn:hover{border-color:var(--turf-bright);}
.btn.primary{background:var(--turf);border-color:var(--turf);color:#0F1520;font-weight:700;}
.btn.primary:hover{background:var(--turf-bright);}
.switch-row{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap;max-width:100%;}
.tte select{max-width:100%;min-width:0;box-sizing:border-box;text-overflow:ellipsis;}
.switch{
  width:38px;height:21px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);
  position:relative;cursor:pointer;flex-shrink:0;
}
.switch.on{background:var(--turf);border-color:var(--turf);}
.switch .knob{
  width:15px;height:15px;border-radius:50%;background:var(--chalk);
  position:absolute;top:2px;left:2px;transition:.15s left;
}
.switch.on .knob{left:19px;}

/* GROUPS */
.group{margin-bottom:22px;}
.group-head{
  display:flex;align-items:baseline;gap:10px;margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--line);
}
.group-head h2{font-size:15px;color:var(--turf-bright);text-transform:uppercase;letter-spacing:.08em;}
.group-head .idx{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);}

.row{
  display:grid;grid-template-columns:150px 1fr 1fr;gap:14px;
  padding:9px 0;border-bottom:1px dashed var(--line);align-items:center;
  border-left:3px solid transparent;transition:.2s border-left-color,.2s background;
}
.row.preset-changed{
  border-left-color:var(--gold);background:rgba(201,162,75,0.07);padding-left:8px;
}
.row.single{grid-template-columns:150px 1fr;}
@media(max-width:640px){.row,.row.single{grid-template-columns:1fr;gap:6px;}}
.row .lbl{font-size:13px;color:var(--chalk);display:flex;align-items:center;gap:6px;}
.watch{
  font-size:10px;color:var(--rust);border:1px solid var(--rust);border-radius:4px;
  padding:1px 5px;font-family:'JetBrains Mono',monospace;cursor:help;
}
.watch.conf-high{color:var(--turf-bright);border-color:var(--turf-bright);}
.watch.conf-medium{color:var(--gold);border-color:var(--gold);}
.watch.conf-low{color:var(--rust);border-color:var(--rust);border-style:dashed;}
.watch.tradeoff-badge{color:var(--gold);border-color:var(--gold);background:rgba(201,162,75,0.1);cursor:pointer;}
.tradeoff-popup{
  display:block;font-size:11.5px;color:var(--chalk);background:var(--panel2);
  border:1px solid var(--gold);border-radius:6px;padding:6px 10px;margin:4px 0 2px;
  max-width:340px;line-height:1.5;
}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--muted);margin-bottom:18px;align-items:center;}
.legend .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle;}
.slider-cell{display:flex;align-items:center;gap:10px;}
.slider-cell .tag{font-size:10px;color:var(--muted);width:26px;font-family:'JetBrains Mono',monospace;}
input[type=range]{
  flex:1;-webkit-appearance:none;height:4px;background:var(--line);border-radius:3px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--gold);
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid var(--bg);
}
.val{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--gold);width:28px;text-align:right;}
.row.pulse .val{animation:pulse .5s ease;}
@keyframes pulse{0%{color:var(--turf-bright);}100%{color:var(--gold);}}
.val-num{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--chalk);
  width:38px;text-align:center;background:var(--panel2);border:1px solid var(--line);
  border-radius:5px;padding:3px 2px;-moz-appearance:textfield;
}
.val-num:focus{outline:none;border-color:var(--turf-bright);}
.val-num::-webkit-outer-spin-button,.val-num::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

/* OUTPUT */
.output{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px;margin-top:26px;
}
.output h2{font-size:15px;color:var(--turf-bright);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}

.guide{margin-top:26px;}
.guide-head{margin-bottom:16px;}
.guide-head h2{font-size:15px;color:var(--turf-bright);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.guide-head p{font-size:13px;color:var(--muted);line-height:1.5;max-width:70ch;}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:720px){.guide-grid{grid-template-columns:1fr;}}
.guide-card{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
}
.guide-card h3{font-size:13.5px;color:var(--chalk);margin-bottom:8px;line-height:1.3;}
.guide-card h3 .symptom-icon{color:var(--rust);margin-right:6px;}
.guide-card ul{margin:0;padding-left:18px;}
.guide-card li{font-size:12.5px;color:var(--chalk);line-height:1.65;margin-bottom:3px;}
.guide-card li b{color:var(--gold);font-family:'JetBrains Mono',monospace;font-weight:600;}
.guide-card .note{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.5;font-style:italic;}
.guide-suggest{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  background:var(--panel2);border:1px solid var(--gold);color:var(--gold);
  border-radius:5px;padding:1px 7px;margin-left:6px;white-space:nowrap;
}
.guide-card.accordion{padding:0;overflow:hidden;}
.guide-toggle{
  cursor:pointer;padding:14px 16px;margin:0;display:flex;align-items:center;justify-content:space-between;
  transition:.15s background;
}
.guide-toggle:hover{background:var(--panel2);}
.guide-chevron{color:var(--muted);font-size:12px;transition:.2s transform;flex-shrink:0;margin-left:10px;}
.guide-chevron.open{transform:rotate(180deg);}
.guide-body{padding:0 16px 14px;}

/* MATCH FEEDBACK */
.mf-section{margin-top:26px;}
.mf-head{margin-bottom:16px;}
.mf-head h2{font-size:15px;color:var(--turf-bright);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.mf-head p{font-size:13px;color:var(--muted);line-height:1.5;max-width:70ch;}
.mf-form{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px;}
.mf-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:10px;align-items:center;margin-bottom:9px;}
.mf-row.mf-toprow{grid-template-columns:150px 1fr 1fr;}
@media(max-width:640px){.mf-row{grid-template-columns:1fr;gap:4px;margin-bottom:12px;}}
.mf-row label{font-size:12.5px;color:var(--chalk);}
.mf-row input{
  background:var(--panel2);color:var(--chalk);border:1px solid var(--line);border-radius:6px;
  padding:7px 9px;font-family:'JetBrains Mono',monospace;font-size:12.5px;width:100%;
}
.mf-col-labels{display:grid;grid-template-columns:150px 1fr 1fr;gap:10px;margin-bottom:6px;}
.mf-col-labels span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
@media(max-width:640px){.mf-col-labels{display:none;}}
.mf-optional-toggle{
  background:none;border:none;color:var(--turf-bright);font-size:12px;cursor:pointer;
  padding:4px 0;margin:6px 0 2px;text-decoration:underline;
}
.mf-optional{display:none;}
.mf-optional.open{display:block;}
.mf-actions{display:flex;gap:10px;margin-top:14px;align-items:center;}
.mf-result{
  background:var(--panel2);border:1px solid var(--gold);border-radius:10px;
  padding:14px 16px;margin-bottom:16px;display:none;
}
.mf-result.show{display:block;}
.mf-result h4{font-size:13px;color:var(--gold);margin-bottom:8px;}
.mf-result .mf-note{font-size:12.5px;color:var(--chalk);line-height:1.6;margin-bottom:6px;}
.mf-result ul{margin:8px 0 0;padding-left:18px;}
.mf-result li{font-size:12.5px;color:var(--chalk);line-height:1.65;margin-bottom:3px;}
.mf-result li b{color:var(--gold);font-family:'JetBrains Mono',monospace;font-weight:600;}
.mf-empty{font-size:12.5px;color:var(--muted);font-style:italic;}
.identity-info-toggle{
  background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer;
  margin-left:8px;line-height:1;vertical-align:middle;
}
.identity-info-toggle:hover{color:var(--turf-bright);border-color:var(--turf-bright);}
.identity-info-panel{
  display:none;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin-top:8px;font-size:12px;line-height:1.7;color:var(--chalk);
}
.identity-info-panel.open{display:block;}
.identity-info-panel b{color:var(--turf-bright);}
.row.mf-applied-flash{
  outline:2px solid var(--turf-bright);
  outline-offset:3px;
  border-radius:8px;
}
.mf-jump{
  background:none;border:none;color:var(--turf-bright);cursor:pointer;
  font-size:11px;margin-left:6px;text-decoration:underline;padding:0;
}
.output pre{
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.6;color:var(--chalk);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px;
  white-space:pre-wrap;max-height:340px;overflow:auto;
}
.footnote{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5;}

/* MODE SWITCH */
.mode-switch{display:flex;gap:10px;margin-bottom:22px;}
.mode-btn{
  flex:1;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  padding:12px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);cursor:pointer;transition:.15s;
}
.mode-btn:hover{border-color:var(--turf-bright);color:var(--chalk);}
.mode-btn.active{background:var(--turf);border-color:var(--turf);color:#0F1520;}

/* SIMPLE MODE — IDENTITY PICKER */
.identity-group{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;margin-bottom:14px;
}
.identity-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.identity-head h3{font-size:14.5px;color:var(--chalk);}
.identity-sub{font-size:12px;color:var(--muted);}
.identity-options{display:flex;gap:8px;flex-wrap:wrap;}
.id-btn{
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;
  padding:8px 16px;border-radius:20px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);cursor:pointer;transition:.15s;
}
.id-btn:hover{border-color:var(--turf-bright);color:var(--chalk);}
.id-btn.active{background:var(--gold);border-color:var(--gold);color:#0F1520;font-weight:700;}
.id-btn.locked{
  opacity:.5;cursor:not-allowed;border-style:dashed;
}
.id-btn.locked.active{
  background:transparent;border-color:var(--rust);color:var(--rust);opacity:1;
  font-weight:700;border-style:solid;
}

.impact-panel{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;margin:18px 0 6px;
}
.impact-panel h3{font-size:13px;color:var(--turf-bright);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
#impactText{font-size:12.5px;color:var(--chalk);line-height:1.7;}
#impactText b{color:var(--gold);}

.conflict-banner{
  background:rgba(182,92,74,0.1);border:1px solid var(--rust);border-radius:10px;
  padding:12px 16px;margin-bottom:18px;font-size:12.5px;color:var(--chalk);line-height:1.6;
}
.conflict-banner b{color:var(--rust);}
.conflict-banner ul{margin:8px 0;padding-left:20px;}
.conflict-banner li{margin-bottom:4px;}