:root{
  --bg:#07040c; --panel:rgba(18,10,30,.78); --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.65);
  --gold:#ffcc66; --violet:#b28cff; --bad:#fb7185; --ok:#6ee7b7; --warn:#fbbf24;
  --shadow:0 24px 80px rgba(0,0,0,.55); --r:18px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(178,140,255,.16), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(255,204,102,.10), transparent 50%),
    radial-gradient(900px 700px at 10% 90%, rgba(255,122,217,.10), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}
.shell{max-width:1200px; margin:0 auto; padding:22px 18px 28px}
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 14px;
  background:linear-gradient(180deg, rgba(18,10,30,.82), rgba(18,10,30,.62));
  border:1px solid var(--stroke); border-radius:var(--r); box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.brand{display:flex; align-items:center; gap:12px}
.brandLogo{width:44px; height:44px; border-radius:14px; object-fit:contain; filter:drop-shadow(0 0 18px rgba(178,140,255,.55))}
.brandTitle{font-weight:900; letter-spacing:.3px; font-size:18px}
.brandSub{font-size:12.8px; color:var(--muted); margin-top:2px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
@media (max-width:980px){.grid{grid-template-columns:1fr}.span2{grid-column:auto}}
.card{
  background:linear-gradient(180deg, var(--panel), rgba(12,6,22,.64));
  border:1px solid var(--stroke); border-radius:var(--r); padding:16px;
  box-shadow:var(--shadow); backdrop-filter:blur(14px);
}
.span2{grid-column:1 / span 2}
h2{margin:0 0 10px 0; font-size:16px}
.muted{color:var(--muted)} .small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.hidden{display:none !important}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}
.label{font-size:12px; color:var(--muted)}
.input,.select{
  flex:1 1 260px; min-width:220px;
  padding:11px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25); color:var(--text); outline:none;
}
.btn{
  padding:11px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:var(--text);
  cursor:pointer; font-weight:800;
}
.btn:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22)}
.btnPrimary{border-color:rgba(178,140,255,.45); background:linear-gradient(180deg, rgba(178,140,255,.26), rgba(178,140,255,.14))}
.btnGold{border-color:rgba(255,204,102,.55); background:linear-gradient(180deg, rgba(255,204,102,.22), rgba(255,204,102,.10))}
.btnGhost{background:rgba(0,0,0,.10)}
.dropZone{
  margin-top:10px; border-radius:var(--r);
  border:1px dashed rgba(255,255,255,.20);
  background:rgba(0,0,0,.14);
  padding:18px 14px; cursor:pointer; outline:none;
}
.dropZone.dragover{border-color:rgba(255,204,102,.60); background:rgba(255,204,102,.08)}
.meta{
  margin-top:12px; padding:10px 12px; border-radius:14px;
  background:rgba(0,0,0,.20); border:1px dashed rgba(255,255,255,.16);
  font-size:12px; color:var(--muted); white-space:pre-wrap;
}
.hint{
  margin-top:12px; padding:10px 12px; border-radius:14px;
  border:1px solid rgba(251,191,36,.35); background:rgba(251,191,36,.08);
  color:rgba(255,235,205,.92); font-size:12px; line-height:1.45;
}
.consoleWrap{
  margin-top:12px; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18);
  overflow:hidden;
}
.consoleHeader{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); font-weight:900;
}
.console{
  margin:0; padding:12px; max-height:380px; overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12.5px; line-height:1.45;
}
.kv{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.kv .pill{
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  font-size:12px; color:var(--muted);
}
.pill.ok{border-color: rgba(110,231,183,.45); color: rgba(110,231,183,.95)}
.pill.bad{border-color: rgba(251,113,133,.55); color: rgba(251,113,133,.95)}
.pill.warn{border-color: rgba(251,191,36,.55); color: rgba(251,191,36,.95)}
.tree{
  margin-top:10px; padding:12px; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18);
  max-height:360px; overflow:auto; white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}