/* ===== RESET & VARS ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b1420;--card:#141e2e;--card2:#1a2a3c;
  --accent:#00d4aa;--accent-dim:rgba(0,212,170,.15);
  --txt:#dce6f0;--dim:#6b7f94;
  --red:#ff4d5e;--yellow:#f5c542;--green:#00d4aa;--blue:#3d8bfd;
  --bdr:#22334a;--radius:10px;
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6}
a{color:var(--accent)}

/* ===== HEADER ===== */
header{background:linear-gradient(135deg,#081828,#142e48);border-bottom:2px solid var(--accent);padding:2.2rem 1rem;text-align:center}
header h1{font-size:2.1rem;color:var(--accent);letter-spacing:.5px}
header .subtitle{color:var(--dim);margin-top:.4rem;font-size:.92rem}

/* ===== LAYOUT ===== */
main{max-width:1120px;margin:1.8rem auto;padding:0 1rem;display:flex;flex-direction:column;gap:1.4rem}

.card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--radius);padding:1.5rem}
.card h2{color:var(--accent);font-size:1.15rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--bdr)}
.card h3{color:var(--txt);font-size:.95rem;margin-bottom:.6rem}
.hidden{display:none!important}

/* ===== PIPELINE ===== */
#pipeline{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.4rem}
.step{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;background:var(--card2);border-radius:5px;font-size:.88rem;border-left:3px solid var(--bdr);transition:all .3s}
.step .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--dim);flex-shrink:0;transition:all .3s}
.step.pending{color:var(--dim)}
.step.running{border-left-color:var(--yellow);color:var(--yellow)}
.step.running .dot{border-color:var(--yellow);background:var(--yellow);animation:pulse .9s infinite alternate}
.step.done{border-left-color:var(--green);color:var(--green)}
.step.done .dot{border-color:var(--green);background:var(--green)}
.step.error{border-left-color:var(--red);color:var(--red)}
.step.error .dot{border-color:var(--red);background:var(--red)}
@keyframes pulse{0%{opacity:1;transform:scale(1)}100%{opacity:.4;transform:scale(.7)}}

#btn-start{width:100%;padding:.85rem;font-size:1rem;font-weight:700;background:var(--accent);color:var(--bg);border:none;border-radius:var(--radius);cursor:pointer;transition:background .2s}
#btn-start:hover{background:#00eebb}
#btn-start:disabled{background:var(--dim);cursor:not-allowed}

/* ===== MAP ===== */
.map-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
@media(max-width:820px){.map-top{flex-direction:column;align-items:stretch}}
.map-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;flex:1}
.mkpi{background:var(--card2);border:1px solid var(--bdr);border-radius:var(--radius);padding:.7rem .8rem}
.mkpi-val{display:block;font-size:1.1rem;font-weight:800;color:var(--accent)}
.mkpi-val-sm{font-size:.78rem;color:var(--txt);word-break:break-all}
.mkpi-lbl{display:block;font-size:.66rem;color:var(--dim);text-transform:uppercase;letter-spacing:.35px;margin-top:.2rem}
.map-actions{display:flex;gap:.55rem;flex-wrap:wrap}
.btn-ghost{background:rgba(0,212,170,.08);border:1px solid rgba(0,212,170,.25);color:var(--txt);padding:.55rem .8rem;border-radius:10px;font-weight:700;font-size:.82rem;cursor:pointer;transition:transform .08s, background .2s, border-color .2s}
.btn-ghost:hover{background:rgba(0,212,170,.14);border-color:rgba(0,212,170,.45)}
.btn-ghost:active{transform:translateY(1px)}
.map{height:420px;border-radius:var(--radius);border:1px solid var(--bdr);overflow:hidden;background:#06101a}
@media(max-width:700px){.map{height:380px}}
.map-hint{margin-top:.7rem;color:var(--dim);font-size:.82rem}

/* ===== KPI CARDS ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.9rem}
.kpi{background:var(--card2);border:1px solid var(--bdr);border-radius:var(--radius);padding:.9rem;text-align:center}
.kpi-val{display:block;font-size:1.7rem;font-weight:700;color:var(--accent)}
.kpi-val-sm{font-size:.82rem;word-break:break-all}
.kpi-lbl{display:block;font-size:.72rem;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-top:.2rem}

/* ===== TABLES ===== */
.tbl{width:100%;border-collapse:collapse;font-size:.83rem}
.tbl th,.tbl td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--bdr)}
.tbl th{background:var(--card2);color:var(--accent);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.3px}
.tbl tr:hover td{background:rgba(0,212,170,.03)}
.tbl .hl td{background:var(--accent-dim)!important;font-weight:600}
.elev-bar{height:12px;border-radius:3px;display:inline-block;min-width:4px}

/* ===== STATS TABLE ===== */
.stbl{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:.5rem}
.stbl th,.stbl td{padding:.45rem .6rem;text-align:left;border-bottom:1px solid var(--bdr)}
.stbl th{background:rgba(0,212,170,.04);color:var(--accent);font-size:.72rem;text-transform:uppercase}

/* ===== HIGHLIGHT BOX ===== */
.highlight-box{padding:.7rem 1rem;background:var(--accent-dim);border:1px solid rgba(0,212,170,.25);border-radius:var(--radius);font-size:.88rem;margin-bottom:1rem}

/* ===== SCENE TOOLS ===== */
.scene-tools{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;gap:.6rem;align-items:center;margin-bottom:1rem}
@media(max-width:900px){.scene-tools{grid-template-columns:1fr;align-items:stretch}}
.lbl{color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.35px;font-weight:700}
.sel{background:#0a1420;border:1px solid var(--bdr);color:var(--txt);border-radius:10px;padding:.55rem .7rem;font-weight:700;font-size:.82rem;outline:none}
.sel:focus{border-color:rgba(0,212,170,.55);box-shadow:0 0 0 2px rgba(0,212,170,.12)}
.rng{width:100%}

/* ===== FINAL IMAGE ===== */
.image-actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.image-meta{color:var(--dim);font-size:.82rem}
.image-preview{border:1px solid var(--bdr);border-radius:var(--radius);background:#06101a;overflow:hidden}
.image-preview img{width:100%;height:auto;display:block}

/* ===== INFO BOX ===== */
.info-box{padding:.6rem 1rem;background:var(--card2);border-radius:6px;font-size:.88rem;margin-bottom:1rem}

/* ===== REQUEST / RESPONSE PANELS ===== */
.req-res-panel{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
@media(max-width:700px){.req-res-panel{grid-template-columns:1fr}}
.panel{background:#0a1420;border-radius:6px;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:.4rem .7rem;background:rgba(0,212,170,.06)}
.panel-head span{font-size:.78rem;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.panel pre,.curl-wrap pre{background:#0a1420;margin:0;padding:.7rem;font-size:.73rem;color:var(--dim);overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:350px;overflow-y:auto}

/* ===== CURL WRAP ===== */
.curl-wrap{background:#0a1420;border-radius:6px;overflow:hidden;margin-top:.6rem}

/* ===== COPY BUTTON ===== */
.btn-sm{background:var(--bdr);color:var(--txt);border:none;padding:.2rem .55rem;font-size:.68rem;border-radius:3px;cursor:pointer;transition:background .15s}
.btn-sm:hover{background:var(--accent);color:var(--bg)}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:.25rem .7rem;border-radius:4px;font-size:.8rem;font-weight:600;margin-bottom:.7rem}
.badge.b-wait{background:rgba(107,127,148,.15);color:var(--dim)}
.badge.b-created{background:rgba(61,139,253,.15);color:var(--blue)}
.badge.b-running{background:rgba(245,197,66,.15);color:var(--yellow)}
.badge.b-done{background:rgba(0,212,170,.15);color:var(--green)}
.badge.b-failed{background:rgba(255,77,94,.15);color:var(--red)}

/* ===== ANALYSIS BLOCKS ===== */
.analysis-block{background:var(--card2);border:1px solid var(--bdr);border-radius:var(--radius);padding:1.1rem;margin-bottom:1rem}

/* ===== RAW DATA ===== */
.raw{margin-top:.8rem}
.raw summary{cursor:pointer;color:var(--dim);font-size:.82rem;padding:.3rem 0}
.raw summary:hover{color:var(--accent)}
.raw pre{background:#0a1420;padding:.8rem;border-radius:5px;font-size:.72rem;overflow-x:auto;max-height:380px;overflow-y:auto;color:var(--dim);margin-top:.4rem;white-space:pre-wrap;word-break:break-all}

/* ===== LOG ===== */
#log{background:#070f18;border-radius:5px;padding:.8rem;max-height:320px;overflow-y:auto;font-family:'Courier New',monospace;font-size:.78rem;line-height:1.55}
.le{margin-bottom:.15rem}
.le .lt{color:var(--dim)}
.le.l-info .lm{color:var(--blue)}
.le.l-success .lm{color:var(--green)}
.le.l-error .lm{color:var(--red)}
.le.l-warn .lm{color:var(--yellow)}

/* ===== SVG CONTAINER ===== */
#svg-wrap{display:flex;justify-content:center;padding:.5rem}
#svg-wrap svg{max-width:100%;height:auto}

/* ===== FOOTER ===== */
footer{text-align:center;padding:2rem 1rem;color:var(--dim);font-size:.82rem;border-top:1px solid var(--bdr);margin-top:1.5rem}

/* ===== RESPONSIVE ===== */
@media(max-width:700px){
  header h1{font-size:1.4rem}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .tbl,.stbl{font-size:.72rem}
  .tbl th,.tbl td,.stbl th,.stbl td{padding:.35rem .45rem}
}