/* ROAS target tool, refined screens (v2). Built from the original v1 idiom:
   same blue primary, hairlines, 4px radii, notched fields, status palette, IBM Plex type.
   Every value is a variable so the file doubles as a spec for Figma. */
:root{
  --blue:#1A56A8; --blue-dark:#1A3C82; --blue-tint:#F0F5FC; --blue-line:#C3D5EF;
  --ink:#1A2027; --ink-2:#3A3839; --muted:#717182; --muted-2:#5A6472;
  --line:#DDDDDD; --line-2:#E4E7EC; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EDEFF3;
  --warn:#8A5300; --warn-bg:#FFF9E8; --warn-line:#F0DCA8;
  --ok:#1E7D50; --ok-bg:#E6F4EC; --danger:#C03030;
  --r:4px; --pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --t-title:20px/28px; --t-body:14px/20px; --t-small:12.5px/18px; --t-micro:11.5px/16px;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;padding:0;background:#fff;color:var(--ink);font:400 var(--t-body) var(--sans);-webkit-font-smoothing:antialiased}
.frame{display:block;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font:var(--t-small) var(--sans)} .micro{font:var(--t-micro) var(--sans)}
.mono{font-family:var(--mono)}

/* ---------- modal ---------- */
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.modal__head h1{margin:0;font:600 var(--t-title) var(--sans)}
.modal__body{padding:var(--s5);display:grid;gap:var(--s5)}
.modal__foot{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--surface-2)}
.modal__foot .spacer{flex:1}
.modal__foot .hint{color:var(--muted);font:var(--t-small) var(--sans)}

/* stepper */
.steps{display:flex;align-items:center;gap:var(--s3);font:var(--t-small) var(--sans);color:var(--muted)}
.steps b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--pill);border:1px solid var(--line);font:600 11px var(--sans);margin-right:6px;color:var(--muted)}
.steps .on{color:var(--ink);font-weight:600} .steps .on b{background:var(--blue);border-color:var(--blue);color:#fff}
.steps .done b{background:var(--ok);border-color:var(--ok);color:#fff}
.steps i{width:24px;height:1px;background:var(--line);display:block}

/* context line */
.ctx{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s3) var(--s4);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r)}
.ctx__k{font:600 var(--t-small) var(--sans);color:var(--muted-2)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--pill);background:#fff;border:1px solid var(--line);font:var(--t-small) var(--sans);color:var(--ink-2)}
.chip--blue{background:var(--blue-tint);border-color:var(--blue-line);color:var(--blue)}
.chip--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn);font-weight:600}
.chip--ok{background:var(--ok-bg);border-color:#BFE3CE;color:var(--ok);font-weight:600}
.link{color:var(--blue);font-weight:600;text-decoration:none;font-size:13px}
.ctx .link{margin-left:auto}

/* fields */
.row{display:flex;gap:var(--s4);align-items:flex-start;flex-wrap:wrap}
.field{position:relative;min-width:0}
.field>label{position:absolute;top:-8px;left:10px;padding:0 4px;background:var(--surface);font:var(--t-micro) var(--sans);color:var(--muted)}
.field>label .req{color:var(--danger)}
.field>.box{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:40px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r);font:var(--t-body) var(--sans)}
.field--focus>.box{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-tint)}
.field .ph{color:var(--muted)}
.help{margin:6px 0 0;font:var(--t-small) var(--sans);color:var(--muted)}

/* option cards (radio) */
.opts{display:grid;gap:var(--s2)}
.opt{display:grid;grid-template-columns:20px 1fr auto;gap:var(--s3);align-items:start;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.opt .radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #A9B4C4;margin-top:2px;position:relative}
.opt.is-on{border-color:var(--blue);background:var(--blue-tint)}
.opt.is-on .radio{border-color:var(--blue)} .opt.is-on .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue)}
.opt h3{margin:0;font:600 15px/22px var(--sans)} .opt p{margin:0;color:var(--muted-2);font:var(--t-small) var(--sans)}
.opt .asks{margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--muted);font:var(--t-micro) var(--sans)}
.opt .asks .chip{padding:1px 8px;font-size:11.5px}
.info{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid #A9B4C4;color:var(--muted);font:600 11px var(--sans)}
.reveal{grid-column:2/4;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--blue-line);display:flex;gap:var(--s4);flex-wrap:wrap}
.reveal .field>label{background:var(--blue-tint)}
.reveal .field>.box{background:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 var(--s4);border-radius:var(--r);border:1px solid var(--blue);background:#fff;color:var(--blue);font:600 14px var(--sans)}
.btn--primary{background:var(--blue);color:#fff}
.btn--text{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn--sm{min-height:32px;padding:0 var(--s3);font-size:13px}
.btn[disabled],.btn--disabled{background:var(--surface-3);border-color:var(--surface-3);color:#8A909C}

/* alerts */
.note{display:grid;grid-template-columns:20px 1fr auto;gap:var(--s3);align-items:start;padding:var(--s3) var(--s4);border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r);color:#5E4300;font:var(--t-body) var(--sans)}
.note b{color:var(--warn)} .note .ico{width:18px;height:18px;border-radius:50%;background:var(--warn);color:#fff;display:grid;place-items:center;font:700 12px var(--sans);margin-top:1px}
.note--quiet{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)} .note--quiet .ico{background:var(--muted)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font:var(--t-body) var(--sans)}
.tbl th{padding:10px var(--s3);text-align:left;font:600 var(--t-small) var(--sans);color:var(--muted-2);background:var(--surface-2);border-bottom:1px solid var(--line)}
.tbl td{padding:12px var(--s3);border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl .r{text-align:right}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--pill);font:600 12px var(--sans);border:1px solid transparent}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.pill--ok{background:var(--ok-bg);color:var(--ok)} .pill--warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} .pill--neutral{background:var(--surface-3);color:var(--muted-2)} .pill--blue{background:var(--blue-tint);color:var(--blue)}
.bar{height:6px;border-radius:var(--pill);background:var(--surface-3);overflow:hidden;min-width:96px} .bar>i{display:block;height:100%;background:var(--blue)}

/* app shell */
.app{display:grid;grid-template-columns:132px 1fr}
.side{background:#EAF0FA;padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);min-height:100%}
.side .logo{width:36px;height:36px;border-radius:8px;background:var(--blue-dark);color:#fff;display:grid;place-items:center;font:700 13px var(--sans);margin-bottom:var(--s3)}
.side .k{font:600 11px var(--sans);color:var(--muted-2);margin-top:var(--s2)}
.side a{display:block;padding:6px 10px;border-radius:var(--r);font:600 13px var(--sans);color:var(--muted-2);text-decoration:none}
.side a.on{background:var(--blue-dark);color:#fff}
.main{padding:var(--s4) var(--s5) var(--s5);display:grid;gap:var(--s4);align-content:start}
.topbar{display:flex;align-items:center;gap:var(--s4);justify-content:space-between}
.search{display:flex;align-items:center;min-height:36px;width:280px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font:var(--t-small) var(--sans)}
.tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--line)}
.tabs a{padding:8px 2px 10px;margin-bottom:-1px;font:600 14px var(--sans);color:var(--muted-2);text-decoration:none;border-bottom:2px solid transparent} .tabs a.on{color:var(--blue);border-color:var(--blue)}
.kpis{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.kpi{font:var(--t-small) var(--sans);color:var(--muted)} .kpi b{display:block;color:var(--ink);font:600 16px var(--sans)}