/* SEHL Forge Installer — Official SEHL-DB Studio palette: Dark + Glass + Gold */
:root{
  --bg-main:#0f0f12; --bg-panel:#141417; --bg-elevated:#1a1a1e; --bg-deep:#09090b;
  --text-main:#f5f1e8; --text-soft:#d8d1c2; --text-muted:#a7a29a; --text-disabled:#6f6a63;
  --accent-gold:#c9a84c; --accent-gold-bright:#ddb85e;
  --accent-gold-soft:rgba(201,168,76,.16); --accent-gold-border:rgba(201,168,76,.38); --accent-gold-glow:rgba(201,168,76,.28);
  --glass-bg:rgba(20,20,23,.72); --glass-bg-strong:rgba(20,20,23,.88); --glass-border:rgba(201,168,76,.22); --glass-shadow:rgba(0,0,0,.35); --glass-blur:18px;
  --status-ok:#5fd38d; --status-ok-soft:rgba(95,211,141,.14);
  --status-warning:#e6b95c; --status-warning-soft:rgba(230,185,92,.14);
  --status-danger:#ef6b6b; --status-danger-soft:rgba(239,107,107,.14);
  --status-info:#6aa8ff; --status-info-soft:rgba(106,168,255,.14);
  --border-subtle:rgba(245,241,232,.08); --border-normal:rgba(245,241,232,.14); --border-strong:rgba(201,168,76,.34);
  --shadow-soft:0 12px 30px rgba(0,0,0,.28); --shadow-strong:0 22px 60px rgba(0,0,0,.45); --glow-gold:0 0 28px rgba(201,168,76,.22);
  --gradient-panel:linear-gradient(145deg,rgba(26,26,30,.96),rgba(15,15,18,.92));
  --gradient-gold:linear-gradient(135deg,#c9a84c,#ddb85e);
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(circle at top left,rgba(201,168,76,.10),transparent 34%),var(--bg-main);
  color:var(--text-soft); font:14px/1.5 var(--font-ui);
}
#app{max-width:900px;margin:0 auto;padding:0 20px 60px}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 4px 18px;position:sticky;top:0;z-index:5;background:linear-gradient(180deg,rgba(15,15,18,.92),rgba(15,15,18,0));backdrop-filter:blur(10px)}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:.5px;color:#15120a;background:var(--gradient-gold);box-shadow:var(--glow-gold)}
.brand-title{font-weight:700;font-size:17px;letter-spacing:.2px;color:var(--text-main)}
.brand-sub{color:var(--text-muted);font-size:12px}
.topbar-right{display:flex;gap:12px;align-items:center}
.ai-pill{font-size:12px;color:var(--text-muted)}
.ai-pill.on{color:var(--status-ok)}
.lang{background:var(--bg-elevated);color:var(--text-soft);border:1px solid var(--border-normal);border-radius:var(--radius-sm);padding:6px 8px;font-family:var(--font-ui)}

.card{background:var(--glass-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px 20px;margin:16px 0;box-shadow:var(--shadow-soft);backdrop-filter:blur(var(--glass-blur))}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-head h2{font-size:15px;margin:0;font-weight:650;color:var(--text-main)}
.card-head .tiny{margin-left:auto}
.step{width:26px;height:26px;border-radius:var(--radius-sm);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--accent-gold-bright);background:var(--accent-gold-soft);border:1px solid var(--accent-gold-border)}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end;margin-top:14px}
.input{flex:1;min-width:200px;background:var(--bg-deep);border:1px solid var(--border-normal);color:var(--text-main);border-radius:var(--radius-md);padding:11px 13px;font-size:14px;outline:none;font-family:var(--font-mono)}
.input:focus{border-color:var(--accent-gold-border);box-shadow:0 0 0 2px var(--accent-gold-soft)}
.input.small{flex:none;width:160px;min-width:120px;font-family:var(--font-ui)}

.btn{border:1px solid var(--border-normal);background:rgba(245,241,232,.06);color:var(--text-main);border-radius:var(--radius-md);padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--font-ui)}
.btn:hover{border-color:var(--accent-gold-border)}
.btn.primary{background:var(--gradient-gold);color:#15120a;border:1px solid var(--accent-gold-border);box-shadow:var(--glow-gold);font-weight:700}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.tiny{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.hidden{display:none!important}

.detect{margin-top:16px;border-top:1px solid var(--border-subtle);padding-top:16px}
.detect .big{font-size:18px;font-weight:700;color:var(--text-main)}
.detect .tag{display:inline-block;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--text-muted);margin:3px 6px 3px 0;font-family:var(--font-mono)}
.detect .conf{color:var(--status-ok)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;margin-top:10px;color:var(--text-muted)}
.kv b{color:var(--text-soft);font-weight:600}

.targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.target{display:flex;gap:10px;align-items:flex-start;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px;cursor:pointer;transition:.15s}
.target.sel{border-color:var(--accent-gold-border);background:var(--accent-gold-soft);box-shadow:var(--glow-gold)}
.target input{margin-top:3px;accent-color:var(--accent-gold)}
.target .t-name{font-weight:600;color:var(--text-main);font-family:var(--font-mono);font-size:13px}
.target .t-desc{color:var(--text-muted);font-size:12px}
.options{margin-top:16px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.opt{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-muted)}
.opt.check{flex-direction:row;align-items:center;gap:8px;color:var(--text-soft)}
.opt.check input{accent-color:var(--accent-gold)}

.plan{margin-top:14px;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px}
.plan .stat{display:inline-block;margin-right:22px}
.plan .stat b{font-size:18px;color:var(--text-main)}

.result{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:13px 15px;margin:10px 0;background:var(--bg-deep);display:flex;align-items:center;gap:12px}
.result .mark{font-size:18px;width:22px;text-align:center}
.result.passed{border-color:var(--status-ok-soft);box-shadow:var(--glow-ok)}
.result.passed .mark{color:var(--status-ok)} .result.warn .mark{color:var(--status-warning)} .result.failed .mark{color:var(--status-danger)}
.result.warn{border-color:var(--status-warning-soft)} .result.failed{border-color:var(--status-danger-soft)}
.result .meta{flex:1;min-width:0}
.result .fname{font-weight:650;color:var(--text-main);font-family:var(--font-mono);font-size:13px}
.result .sub{color:var(--text-muted);font-size:12px;word-break:break-all;font-family:var(--font-mono)}

.ledger .lrow{display:grid;grid-template-columns:1fr 80px 130px 110px;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border-subtle);font-size:13px}
.ledger .lrow.head{color:var(--text-muted);font-weight:600}
.ledger .lrow b{color:var(--text-main);font-family:var(--font-mono)}
.badge{font-size:11px;padding:3px 10px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--status-ok-soft);color:var(--status-ok)}
.badge.warn{background:var(--status-warning-soft);color:var(--status-warning);border-color:var(--accent-gold-border)}

.overlay{position:fixed;inset:0;background:rgba(9,9,11,.82);display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(6px)}
.spinner{width:42px;height:42px;border:4px solid rgba(201,168,76,.18);border-top-color:var(--accent-gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#overlayMsg{color:var(--text-muted)}
.muted{color:var(--text-muted)}
code{font-family:var(--font-mono)}

.icon-btn{background:transparent;border:1px solid var(--border-normal);color:var(--text-soft);width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{border-color:var(--accent-gold-border);color:var(--accent-gold-bright)}
.small{font-size:12px}

.modal-overlay{position:fixed;inset:0;background:rgba(9,9,11,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal{background:var(--glass-bg-strong);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-strong);backdrop-filter:blur(22px);width:480px;max-width:100%;display:flex;flex-direction:column}
.modal.wide{width:620px;max-height:80vh}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}
.modal-head h3{margin:0;font-size:15px;font-weight:650;color:var(--text-main)}
.modal-body{padding:18px 20px}
.modal-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border-subtle)}
.field-label{display:block;font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px}
.key-row{display:flex;gap:8px;align-items:center}

.browse-bar{display:flex;flex-direction:column;gap:8px;padding:12px 20px;border-bottom:1px solid var(--border-subtle)}
.shortcuts{display:flex;gap:8px;flex-wrap:wrap}
.shortcuts .sc{background:var(--bg-deep);border:1px solid var(--border-normal);color:var(--text-soft);border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer;font-family:var(--font-mono)}
.shortcuts .sc:hover{border-color:var(--accent-gold-border);color:var(--accent-gold-bright)}
.crumb{font-family:var(--font-mono);font-size:12px;color:var(--accent-gold-bright);word-break:break-all}
.browse-list{overflow:auto;max-height:46vh;padding:6px 12px}
.browse-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--text-soft)}
.browse-item:hover{background:var(--accent-gold-soft)}
.browse-item .ic{color:var(--accent-gold);width:16px;text-align:center}
.browse-item.up .ic{color:var(--text-muted)}
.browse-item .nm{flex:1;font-family:var(--font-mono)}
.browse-item .proj-tag{font-size:10px;color:var(--status-ok);background:var(--status-ok-soft);border-radius:999px;padding:2px 8px}
.browse-empty{color:var(--text-muted);font-size:13px;padding:14px 10px}