*{box-sizing:border-box}
:root{--bg:#0a0b0d;--panel:#111217;--panel2:#14161b;--muted:#a9afbb;--line:#1e2128}
html,body{height:100%}
body{margin:0;background:var(--bg);color:#eef1f6;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.topbar{position:sticky;top:0;display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(180deg,#0e1015,#0a0b0d);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.3px}
.tabs{margin-left:auto;display:flex;gap:8px}
.tab{background:var(--panel2);color:#dfe3ea;border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer}
.tab.active{outline:1px solid #2a2f3a;background:#171a20}
main{padding:18px}
.page{display:none}
.page.visible{display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:16px 0 24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.form h2{margin:0 0 12px 0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px}
input[type=number],input[type=date]{background:#0b0d12;color:#f4f6fb;border:1px solid #222835;border-radius:10px;padding:12px}
.subsection{grid-column:1/-1;margin-top:8px;padding:12px;border:1px dashed #2a2f3a;border-radius:12px;background:#0d0f14}
h3{margin-top:0}
.big{font-size:30px;font-weight:800;margin:8px 0}
.med{font-size:18px;font-weight:700;margin:6px 0}
.muted{color:var(--muted);font-size:13px}
.row.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row.metrics.small2{grid-template-columns:repeat(2,1fr)}
.row.metrics.small3{grid-template-columns:repeat(3,1fr)}
.metric{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.metric .label{min-height:18px}
.metric .value{min-height:34px}
.hide{display:none}
.sliders .slider-col{display:flex;gap:28px;justify-content:space-evenly}
.slider-block{display:flex;flex-direction:column;align-items:center;gap:8px}
.slider-label{font-size:13px;color:var(--muted);text-align:center;max-width:120px}
.slider-value{font-weight:700}
.slider-vertical{writing-mode:bt-lr;-webkit-appearance:slider-vertical;width:22px;height:220px;background:transparent;border-radius:10px}
input[type=range]{accent-color:#2e6bff}
.foot{padding:16px;border-top:1px solid var(--line);color:#99a2b2;text-align:center}

/* VS bullets */
.vs-inline{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.9em;color:#c4cada}
.vs-inline .vs-title{color:#dbe2ef;margin-bottom:6px}
.vs-inline ul{margin:6px 0 0 0;line-height:1.6;padding:0;list-style:none}
.vs-inline li{margin:8px 0}
.vs-sub{color:#97a0af;font-size:.9em;margin-left:0.5rem}
.vs-line-strong{font-weight:700}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.btn-export{background:#1f6d3a;color:#e9ffee;border:1px solid #2a8b4b;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer}
.btn-export:hover{filter:brightness(1.1)}

/* Visualization section */
#goal-viz-section{margin-top:8px}
.viz-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
#goal-chart{max-width:100%;height:auto;background:transparent}
.viz-legend{display:grid;grid-template-columns:1fr;gap:6px;width:100%;max-width:640px}
.viz-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#0d1016;border:1px solid #1f2430;border-radius:10px}
.viz-row .name{display:flex;align-items:center;gap:8px}
.viz-dot{width:12px;height:12px;border-radius:50%}
.viz-bars{width:100%;max-width:640px;margin:4px auto 0 auto;padding:6px 10px}
.viz-bar-wrap{position:relative;height:16px;background:#0e1511;border:1px solid #1f2a22;border-radius:10px;overflow:hidden}
.viz-bar-target{position:absolute;left:0;top:0;bottom:0;background:#064E3B;opacity:0.45;width:100%}
.viz-bar-current{position:absolute;left:0;top:0;bottom:0;background:#34D399}
.viz-bars-caption{display:flex;justify-content:space-between;font-size:12px;color:#9aa3b3;margin-top:6px}

/* Print to PDF */
#print-root{display:none}
@media print{
  body{background:#0a0b0d !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topbar,.tabs,.foot,.btn-export{display:none !important}
  main > *{display:none !important}
  #print-root{display:block !important}
  .print-page{width:8.5in;height:11in;background:#0a0b0d;margin:0 auto;page-break-after:always;display:flex;align-items:center;justify-content:center;padding:0.25in}
  .print-page:last-child{page-break-after:auto}
  .print-img{width:100%;height:100%;object-fit:contain;background:#0a0b0d}
}

@media (max-width: 640px){
  main{padding:12px}
  .cards{grid-template-columns:1fr;gap:12px}
  .row.metrics{grid-template-columns:1fr}
  .row.metrics.small2{grid-template-columns:1fr}
  .row.metrics.small3{grid-template-columns:1fr}
  .big{font-size:26px}
  .slider-vertical{height:180px;width:18px}
  #goal-viz-section{margin-top:12px}
}
@media (min-width: 1200px){main{max-width:1200px;margin:0 auto}}