:root{
  --bg:#100c12;
  --bg2:#1a131d;
  --panel:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.1);
  --text:#f8f3f7;
  --muted:#b8adb8;
  --accent:#f4c342;
  --accent2:#ff7a59;
  --shadow:0 22px 60px rgba(0,0,0,.35);
  --radius:26px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(244,195,66,.12), transparent 26rem),
    radial-gradient(circle at 88% 18%, rgba(255,122,89,.10), transparent 26rem),
    linear-gradient(180deg,#120d14,#0c0910);
}
img{max-width:100%;display:block}
a{color:inherit}
.topbar,.wrap,.footer{width:min(1180px, calc(100% - 26px));margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 0 12px;gap:14px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.08em}
.brand strong{color:var(--accent)}
.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.tag{font-size:.75rem;color:var(--muted);text-align:right}
.wrap{padding-bottom:26px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hidden{display:none!important}
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;overflow:hidden}
.hero-copy{padding:clamp(24px,4vw,56px);min-width:0}
.hero-art{min-height:420px;display:flex;align-items:flex-end;justify-content:center;padding:12px 22px 0}
.hero-art img{width:min(100%,620px);max-height:470px;object-fit:contain}
.eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:900}
.hero h1{font-size:clamp(2.9rem,7vw,6.2rem);line-height:.88;letter-spacing:-.07em;margin:14px 0 18px}
.hero h1 span{color:var(--accent)}
.hero p{font-size:1.03rem;line-height:1.65;color:var(--muted);max-width:680px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chips span{padding:9px 12px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;font-size:.78rem;color:#dfd7dd}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:start}
.form-panel,.result-panel,.info-panel{padding:22px}
.result-panel{min-width:0;overflow:hidden}
.results{display:block}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.section-head h2,.info-panel h2{margin:6px 0 0;font-size:clamp(1.6rem,2.6vw,2.35rem);letter-spacing:-.04em}
.head-art{width:100px;height:90px;object-fit:contain}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:flex;flex-direction:column;gap:8px;font-weight:700;color:#efe8ed;font-size:.92rem}
label.wide{grid-column:1/-1}
input,select,button{font:inherit}
input,select{width:100%;padding:14px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.12);background:#110d13;color:var(--text);outline:none}
input:focus,select:focus{border-color:rgba(244,195,66,.75);box-shadow:0 0 0 4px rgba(244,195,66,.08)}
.combo{display:grid;grid-template-columns:1fr 120px;gap:8px}
.salary-combo{grid-template-columns:1fr 120px}
.suffix{position:relative}
.suffix input{padding-right:45px}
.suffix em{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-weight:900}
.slider-box{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:18px;background:#120e14}
.slider-top{display:flex;justify-content:space-between;gap:14px;align-items:center;font-weight:800}
.slider-top strong{font-size:1.16rem;color:var(--accent)}
input[type=range]{padding:0;margin:14px 0 4px;accent-color:var(--accent)}
.slider-legend{display:flex;justify-content:space-between;gap:12px;color:#8e8590;font-size:.68rem}
.actions-stack{display:flex;flex-direction:column;gap:10px}
.btn{border:0;border-radius:15px;padding:14px 16px;background:#efe5ec;color:#1b1419;font-weight:900;letter-spacing:.03em;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ffd970);color:#241903}
.btn:hover{filter:brightness(1.04)}
.tiny{margin:0;text-align:center;font-size:.74rem;color:#8e8590;line-height:1.4}
.placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:540px;color:var(--muted)}
.placeholder img{width:min(90%,420px);max-height:320px;object-fit:contain;margin-bottom:10px}
.placeholder h2{margin:10px 0 6px;font-size:1.75rem;color:var(--text)}
.results.hidden{display:none}
.verdict-box h2{font-size:clamp(1.8rem,2.8vw,2.5rem);margin:6px 0 8px;letter-spacing:-.05em}
.verdict-box p{margin:0;color:var(--muted);line-height:1.55}
.result-highlight{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.result-highlight span{display:block;color:#d8cfd7;font-weight:700;font-size:.85rem;margin-bottom:7px}
.result-highlight strong{font-size:clamp(2rem,4vw,3.8rem);letter-spacing:-.05em;color:var(--accent);overflow-wrap:anywhere}
.result-highlight img{width:136px;height:136px;object-fit:contain;flex:0 0 auto}
.result-highlight.alt strong{font-size:clamp(1.5rem,3vw,2.4rem);color:var(--accent2)}
.result-highlight.alt{display:block}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.mini-grid article,.equiv-grid article{background:#110d12;border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.mini-grid span{display:block;color:#948995;font-size:.72rem;margin-bottom:6px}
.mini-grid strong{font-size:1.05rem;overflow-wrap:anywhere}
.equiv-block h3{margin:4px 0 12px;font-size:1rem}
.equiv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.equiv-grid b{display:block;font-size:1.35rem;color:var(--accent)}
.equiv-grid span{display:block;margin-top:4px;color:#9f93a0;font-size:.74rem;line-height:1.25}
.quote{margin:16px 0 0;padding:16px 18px;border-left:4px solid var(--accent);background:#110d12;border-radius:0 16px 16px 0;color:#f1eaee;font-style:italic;line-height:1.55}
.result-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.info-panel{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center;margin-top:24px}
.info-panel img{width:100%;max-height:170px;object-fit:contain}
.info-panel p{color:var(--muted);line-height:1.6;margin:8px 0 0}
.footer{padding:0 0 32px;text-align:center;color:#887f89;font-size:.78rem}
.footer p{margin:5px 0}
.footer a{text-decoration:none;color:#c7bbc5}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero-art{min-height:270px}
  .grid{grid-template-columns:1fr}
  .placeholder{min-height:0}
}
@media (max-width: 620px){
  .topbar,.wrap,.footer{width:min(100% - 18px, 1180px)}
  .topbar{padding-top:12px}
  .tag{display:none}
  .hero-copy{padding:22px 16px 0}
  .hero h1{font-size:clamp(2.45rem,14vw,4.2rem)}
  .hero p{font-size:.98rem}
  .hero-art{padding:6px 10px 0;min-height:220px}
  .form-panel,.result-panel,.info-panel{padding:16px}
  .fields{grid-template-columns:1fr}
  label.wide{grid-column:auto}
  .mini-grid{grid-template-columns:1fr 1fr}
  .mini-grid article:last-child{grid-column:1/-1}
  .equiv-grid{grid-template-columns:1fr 1fr}
  .result-buttons{grid-template-columns:1fr}
  .result-highlight{flex-direction:column;align-items:flex-start}
  .result-highlight img{width:120px;height:120px}
  .info-panel{grid-template-columns:1fr;text-align:center}
}
@media print{
  body{background:#fff;color:#111}
  .topbar,.form-panel,.info-panel,.footer,.hero,.result-buttons{display:none !important}
  .wrap,.grid{width:100%;margin:0;display:block}
  .panel{background:#fff;border:0;box-shadow:none}
  .result-panel{padding:0}
  .results.hidden{display:block}
  .result-highlight img{display:none}
  .mini-grid article,.equiv-grid article,.quote{border:1px solid #ddd;background:#fff}
  .result-highlight strong,.result-highlight.alt strong,.equiv-grid b,.eyebrow{color:#111 !important}
}