:root{
  --navy:#0f2a4a; --navy2:#143a63; --amber:#e8a33d; --amber-d:#c9821f;
  --bg:#eef1f5; --card:#ffffff; --ink:#1c2733; --muted:#5d6b7c;
  --line:#d7dee7; --pass:#1d7a3a; --fail:#b3271e; --warn:#a86a00;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --input-bg:#ffffff; --row-alt:#f6f8fb;
}
[data-theme="dark"]{
  --navy:#1a3a5c; --navy2:#234a73; --amber:#e8a33d; --amber-d:#d1922f;
  --bg:#0f1722; --card:#1a2433; --ink:#e2e8f0; --muted:#94a3b8;
  --line:#2d3a4d; --pass:#3fae6a; --fail:#e86a6a; --warn:#d19a2a;
  --input-bg:#0f1722; --row-alt:#141d2b;
}
[data-theme="dark"] .card h3,[data-theme="dark"] .card h4{color:#e2e8f0}
[data-theme="dark"] .field input,[data-theme="dark"] .field select{background:var(--input-bg);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] table.grid tr:nth-child(even) td{background:var(--row-alt)}
[data-theme="dark"] table.grid input,[data-theme="dark"] table.grid select{color:var(--ink)}
[data-theme="dark"] table.grid input:focus,[data-theme="dark"] table.grid select:focus{background:var(--input-bg)}
[data-theme="dark"] .btn.ghost.dark{color:var(--ink);border-color:var(--line)}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
.app-header{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border-radius:8px;background:var(--amber);color:var(--navy);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px}
.brand-name{font-size:18px;font-weight:700}.brand-name span{font-weight:400;color:#cfe0f2;font-size:14px}
.brand-sub{font-size:12px;color:#a9c2dd}
.header-right{display:flex;align-items:center;gap:8px}
.design-name{background:#ffffff22;border:1px solid #ffffff44;color:#fff;border-radius:6px;padding:6px 10px;font-size:13px;min-width:220px}
.design-name::placeholder{color:#b9cde4}
.btn{background:var(--amber);border:none;color:var(--navy);font-weight:700;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px}
.btn:hover{background:var(--amber-d)}
.btn.ghost{background:transparent;color:#fff;border:1px solid #ffffff66}
.btn.ghost:hover{border-color:#fff}
.btn.small{padding:5px 12px;font-size:12px}
.save-state{font-size:12px;color:#a9c2dd;min-width:70px}
.tabs{display:flex;gap:2px;background:var(--navy);padding:0 12px;position:sticky;top:62px;z-index:40;overflow-x:auto}
.tabs button{background:transparent;border:none;color:#cfe0f2;padding:11px 14px;font-size:13px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button:hover{color:#fff}
.tabs button.active{color:#fff;border-bottom-color:var(--amber);font-weight:600}
main{max-width:1380px;margin:0 auto;padding:18px}
.tab-page{display:none}.tab-page.active{display:block}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1000px){.two-col{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px;box-shadow:0 1px 3px #0f2a4a11}
.card h3{margin:0 0 10px;font-size:15px;color:var(--navy)}
.card h4{margin:6px 0 8px;font-size:13.5px;color:var(--navy2)}
.hint{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px 14px}
.field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px;font-weight:600}
.field input,.field select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:#fff}
.field input:focus,.field select:focus{outline:2px solid var(--amber);border-color:var(--amber)}
.unit{font-size:11px;color:var(--muted);font-weight:400}
table.grid{border-collapse:collapse;width:100%;font-size:12.5px}
table.grid th{background:var(--navy);color:#fff;padding:7px 8px;text-align:left;font-weight:600;position:sticky;top:0}
table.grid td{border:1px solid var(--line);padding:5px 8px}
table.grid tr:nth-child(even) td{background:#f6f8fb}
table.grid input,table.grid select{width:100%;border:1px solid transparent;background:transparent;padding:4px;font-size:12.5px}
table.grid input:focus,table.grid select:focus{border-color:var(--amber);outline:none;background:#fff}
.table-wrap{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:8px}
.table-wrap.wide{max-height:640px}
.kv{display:grid;grid-template-columns:minmax(300px,42%) 1fr;gap:4px 12px;font-size:13px}
@media(max-width:640px){.kv{grid-template-columns:1fr}.kv dd{text-align:left}}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-family:var(--mono);text-align:right;font-weight:600}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11.5px;font-weight:800;letter-spacing:.4px}
.badge.pass{background:#dff0e3;color:var(--pass)}
.badge.fail{background:#fbe3e1;color:var(--fail)}
.badge.revise{background:#fdf0d7;color:var(--warn)}
.badge.off{background:#e8ecf1;color:var(--muted)}
.status-line{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.status-line:last-child{border-bottom:none}
ol.seq{margin:6px 0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--ink)}
canvas{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.lib-tabs{display:flex;gap:6px;flex-wrap:wrap}
.lib-tabs button{border:1px solid var(--line);background:#f4f6f9;border-radius:20px;padding:5px 14px;font-size:12.5px;cursor:pointer}
.lib-tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.modal-back{display:none;position:fixed;inset:0;background:#0f2a4a88;z-index:100;align-items:center;justify-content:center}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:20px;min-width:340px;max-width:520px;max-height:70vh;overflow:auto}
.modal h3{margin-top:0;color:var(--navy)}
.design-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.design-row .acts{display:flex;gap:6px}
.app-footer{text-align:center;color:var(--muted);font-size:11.5px;padding:18px}
.opt-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:#f8fafc}
.opt-card.rec{border-color:var(--amber);background:#fffaf0}
.num{font-family:var(--mono)}
.chart-wrap{position:relative;display:block}
.chart-tip{position:absolute;pointer-events:none;background:#0f2a4af2;color:#fff;border-radius:6px;padding:8px 10px;font-size:11.5px;z-index:20;box-shadow:0 2px 8px #0004;min-width:170px;line-height:1.5}
.chart-tip .tt-d{font-weight:700;margin-bottom:4px;color:var(--amber)}
.chart-tip .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.chart-actions{margin-top:8px;display:flex;gap:8px}
#xsection svg,.rep-xs svg{cursor:pointer}
.btn.ghost.dark{color:var(--navy);border-color:#9fb0c3}
.btn.ghost.dark:hover{border-color:var(--navy)}
.details-cell .ditem{display:inline-flex;align-items:center;gap:5px;margin:3px 10px 3px 0;white-space:nowrap}
.details-cell .ditem label{font-size:11px;color:var(--muted);font-weight:600}
.details-cell .ditem input,.details-cell .ditem select{padding:4px 6px;font-size:12px;border:1px solid var(--line);border-radius:5px;background:#fff}
.details-cell .ditem input[type=number]{width:66px}
.lib-in{width:100%;padding:4px 6px;font-size:12px;border:1px solid var(--line);border-radius:4px;background:#fff}
.lib-in[type=number]{text-align:right;font-family:var(--mono)}
.calc-step{margin:0 0 20px}
.eq{background:#f6f8fb;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:6px;padding:10px 14px;margin:8px 0;font-size:13px;line-height:1.6}
.eq-f{font-weight:600;color:var(--navy)}
.eq-s{color:var(--muted);margin-top:4px}
.eq-r{margin-top:4px;font-weight:700;color:var(--ink)}
@media print{
  .app-header,.tabs,.app-footer,.no-print,.modal-back{display:none!important}
  body{background:#fff} main{max-width:none;padding:0}
  .card{box-shadow:none;break-inside:avoid}
  #tab-report{display:block!important}
  .tab-page{display:none!important}
  #tab-report.tab-page.active{display:block!important}
}
.overlay-toggles{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px;font-size:13px;color:var(--muted)}
.overlay-toggles span{font-weight:600;color:var(--ink)}
.overlay-toggles label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}
.overlay-toggles input[type=checkbox]{width:15px;height:15px;accent-color:#0f2a4a}
.overlay-legend{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 0;font-size:12px;color:var(--muted)}
.overlay-legend .sw{display:inline-block;width:22px;height:3px;vertical-align:middle;margin-right:6px}
.info-tip{position:relative;display:inline-block;width:18px;height:18px;border-radius:50%;background:#0f2a4a;color:#fff;font-size:12px;font-style:normal;font-weight:700;text-align:center;line-height:18px;cursor:help;margin-left:8px;vertical-align:middle}
.info-tip .tip-text{visibility:hidden;opacity:0;position:absolute;z-index:50;left:26px;top:-8px;width:340px;max-width:calc(100vw - 60px);background:#0f1722;color:#e8edf3;font-weight:400;font-size:12.5px;line-height:1.65;padding:12px 14px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.35);text-align:left;transition:opacity .15s}
.info-tip:hover .tip-text,.info-tip:focus .tip-text,.info-tip.open .tip-text{visibility:visible;opacity:1}
.info-tip .tip-text b{color:#f5b942}
.sup-schedule{margin:10px 0 4px;overflow-x:auto}
.sup-schedule table{width:100%;border-collapse:collapse;font-size:12.5px}
.sup-schedule th{background:#0f2a4a;color:#fff;text-align:left;padding:7px 10px;font-weight:600;white-space:nowrap}
.sup-schedule td{padding:7px 10px;border-bottom:1px solid #e5e9f0;white-space:nowrap}
.sup-schedule td.num{text-align:right;font-variant-numeric:tabular-nums}
.cmp-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;margin-left:4px}
.cmp-toggle input{width:14px;height:14px;accent-color:#0f2a4a}

/* compact live-results table */
table.grid.compact { font-size: 13px; }
table.grid.compact td { padding: 4px 8px; }
table.grid.compact td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- mobile ---------- */
@media(max-width:700px){
  body{font-size:13px;overflow-x:hidden}
  main{padding:10px}
  .app-header{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .brand-sub{display:none}
  .brand-name{font-size:15px}
  .header-right{flex-wrap:wrap;width:100%;gap:6px}
  .design-name{min-width:0;flex:1}
  .tabs{top:0;padding:0 6px}
  .tabs button{padding:9px 10px;font-size:12px}
  .card{padding:12px;margin-bottom:12px}
  .form-grid{grid-template-columns:1fr 1fr;gap:8px}
  .two-col{grid-template-columns:1fr}
  /* tooltip becomes a centered fixed popup on phones, no viewport overflow */
  .info-tip .tip-text{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 40px));max-height:70vh;overflow:auto}
  table.grid{font-size:11.5px}
  table.grid td,table.grid th{padding:4px 5px}
  .modal{width:calc(100vw - 24px);margin:12px;max-height:calc(100vh - 24px);overflow:auto}
  .btn{padding:7px 12px;font-size:12px}
}
@media(max-width:420px){
  .form-grid{grid-template-columns:1fr}
}

/* CiviLanso Web Apps hub banner (v1.9.1): locked-product / demo notice */
.cwa-banner{margin-top:8px;padding:8px 12px;border-radius:8px;background:#e2ecf7;color:#0f2a4a;font-size:13.5px;border:1px solid #bcd3e8}
.cwa-banner a{font-weight:700}