:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f7fb;
  background: #080c14;
  font-synthesis: none;
  --panel: rgba(18, 25, 39, 0.92);
  --panel2: rgba(25, 35, 54, 0.92);
  --border: rgba(151, 170, 203, 0.18);
  --accent: #ff8b3d;
  --accent2: #ffcf5c;
  --good: #53d69d;
  --danger: #ff6868;
  --muted: #97a6bd;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1180px; min-height: 100vh; overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
.shell { height: 100vh; display: grid; grid-template-rows: 72px 1fr 72px; background: radial-gradient(circle at 50% 0%, #1a263a 0%, #080c14 48%); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--border); background: rgba(8, 12, 20, 0.86); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 13px; }
.logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), #d94a2f); box-shadow: 0 8px 25px rgba(255, 107, 44, .26); font-weight: 900; }
.brand h1 { margin: 0; font-size: 21px; letter-spacing: .5px; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.status-pill { display:flex; gap:8px; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 14px var(--good); }
.workspace { display: grid; grid-template-columns: 292px 1fr 340px; min-height: 0; }
.panel { background: var(--panel); border-right: 1px solid var(--border); padding: 18px; overflow-y: auto; }
.panel.right { border-right:0; border-left:1px solid var(--border); }
.section { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.section:last-child { border:0; }
.eyebrow { color:var(--accent2); text-transform:uppercase; letter-spacing:1.5px; font-size:10px; font-weight:800; }
h2 { margin:7px 0 12px; font-size:16px; }
.help { color:var(--muted); font-size:12px; line-height:1.55; }
.dropzone { border:1px dashed rgba(255,139,61,.55); border-radius:16px; padding:20px 14px; text-align:center; background:rgba(255,139,61,.045); cursor:pointer; transition:.2s; }
.dropzone:hover, .dropzone.drag { border-color:var(--accent); background:rgba(255,139,61,.09); }
.drop-icon { font-size:30px; margin-bottom:8px; }
.dropzone strong { display:block; font-size:13px; }
.dropzone span { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.file-input { display:none; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat { padding:10px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--border); }
.stat label { display:block; color:var(--muted); font-size:10px; }
.stat strong { display:block; margin-top:4px; font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.control { margin:12px 0; }
.control label { display:flex; justify-content:space-between; color:#d6deeb; font-size:12px; margin-bottom:7px; }
select, input[type="number"], input[type="text"] { width:100%; background:#0d1421; color:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 11px; outline:none; }
select:focus, input:focus { border-color:var(--accent); }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tool { padding:10px 8px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.025); cursor:pointer; font-size:11px; }
.tool.active { border-color:var(--accent); background:rgba(255,139,61,.12); }
.viewer { position:relative; min-width:0; background: radial-gradient(circle at 50% 35%, rgba(44,63,91,.4), rgba(8,12,20,0) 58%); }
canvas { display:block; width:100%; height:100%; }
.viewer-hud { position:absolute; top:16px; left:16px; display:flex; gap:8px; pointer-events:none; }
.hud-chip { padding:8px 10px; border-radius:9px; background:rgba(8,12,20,.72); border:1px solid var(--border); color:var(--muted); font-size:11px; backdrop-filter:blur(8px); }
.empty-state { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; text-align:center; }
.empty-state.hidden { display:none; }
.empty-card { max-width:410px; padding:28px; border-radius:20px; border:1px solid var(--border); background:rgba(11,17,28,.70); backdrop-filter:blur(12px); }
.empty-card .giant { font-size:52px; }
.empty-card h3 { margin:8px 0; font-size:20px; }
.empty-card p { color:var(--muted); line-height:1.55; font-size:13px; }
.candidate { border:1px solid var(--border); border-radius:14px; padding:13px; margin:10px 0; background:rgba(255,255,255,.025); cursor:pointer; transition:.15s; }
.candidate:hover { transform:translateY(-1px); border-color:rgba(255,139,61,.55); }
.candidate.selected { border-color:var(--accent); background:rgba(255,139,61,.085); box-shadow:inset 3px 0 0 var(--accent); }
.candidate-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.candidate h3 { margin:0; font-size:13px; }
.score { color:var(--good); font-weight:900; font-size:13px; }
.candidate p { color:var(--muted); font-size:11px; line-height:1.45; margin:7px 0 0; }
.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.tag { padding:4px 6px; border-radius:6px; background:rgba(255,255,255,.05); color:#c7d1df; font-size:9px; }
.notice { padding:11px; border-radius:10px; border:1px solid rgba(255,207,92,.25); background:rgba(255,207,92,.06); color:#e9d59f; font-size:11px; line-height:1.5; }
.marker-card { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:10px; margin-top:8px; }
.marker-dot { width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(255,139,61,.6); }
.marker-card small { color:var(--muted); }
.bottom { display:flex; align-items:center; gap:10px; padding:12px 24px; border-top:1px solid var(--border); background:rgba(8,12,20,.9); }
.btn { border:1px solid var(--border); background:rgba(255,255,255,.035); border-radius:11px; padding:11px 16px; cursor:pointer; font-weight:750; font-size:12px; }
.btn:hover { border-color:rgba(255,139,61,.65); }
.btn:disabled { opacity:.38; cursor:not-allowed; }
.btn.primary { margin-left:auto; min-width:180px; border-color:transparent; color:#160b04; background:linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow:0 8px 24px rgba(255,139,61,.22); font-weight:950; }
.btn.danger { color:#ffc3c3; }
.progress { position:fixed; inset:0; display:none; place-items:center; background:rgba(4,7,12,.73); z-index:30; backdrop-filter:blur(8px); }
.progress.show { display:grid; }
.progress-card { width:380px; padding:26px; border-radius:18px; background:#111a29; border:1px solid var(--border); text-align:center; box-shadow:0 25px 90px rgba(0,0,0,.5); }
.spinner { width:45px; height:45px; margin:0 auto 15px; border-radius:50%; border:4px solid rgba(255,255,255,.1); border-top-color:var(--accent); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; right:22px; bottom:88px; max-width:390px; padding:13px 15px; border-radius:11px; background:#152033; border:1px solid var(--border); box-shadow:0 15px 45px rgba(0,0,0,.4); font-size:12px; transform:translateY(18px); opacity:0; pointer-events:none; transition:.2s; z-index:40; }
.toast.show { transform:none; opacity:1; }
.toast.error { border-color:rgba(255,104,104,.55); }
.download-card { padding:14px; border-radius:12px; border:1px solid rgba(83,214,157,.35); background:rgba(83,214,157,.07); }
.download-card a { color:#7ff1bb; font-weight:850; text-decoration:none; }
textarea { width:100%; resize:vertical; background:#0d1421; color:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 11px; outline:none; font:inherit; font-size:12px; line-height:1.4; }
textarea:focus { border-color:var(--accent); }
.shire-section { background:linear-gradient(145deg, rgba(255,139,61,.05), rgba(83,214,157,.025)); margin-left:-8px; margin-right:-8px; padding:12px 8px 18px; border-radius:14px; }
.shire-wide { width:100%; border-color:rgba(255,139,61,.5); background:rgba(255,139,61,.1); }
.shire-suggestion { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding:10px; text-align:left; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.025); cursor:pointer; }
.shire-suggestion:hover { border-color:var(--accent); background:rgba(255,139,61,.08); }
.shire-suggestion span { min-width:0; }
.shire-suggestion strong, .shire-suggestion small { display:block; }
.shire-suggestion small { color:var(--muted); margin-top:3px; font-size:9px; overflow:hidden; text-overflow:ellipsis; }
.shire-suggestion b { color:var(--good); }
.shire-status { display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:11px; border-bottom:1px solid rgba(151,170,203,.09); }
.shire-status span { color:var(--muted); }
.shire-status strong { text-align:right; font-size:10px; overflow-wrap:anywhere; }
.shire-actions { display:grid; gap:7px; margin-top:10px; }
.shire-actions .btn { width:100%; text-align:left; padding:9px 11px; }
.shire-actions .approve { border-color:rgba(83,214,157,.42); background:rgba(83,214,157,.07); color:#aaf5d2; }
.shire-actions .vault { border-color:rgba(255,207,92,.45); background:rgba(255,207,92,.08); color:#ffe8a3; }
.approval-token { display:block; padding:9px; border-radius:8px; background:#080d16; border:1px dashed var(--border); color:#d9e3f1; font-size:9px; overflow-wrap:anywhere; }
