:root{
  --bg:#050b14;
  --panel: rgba(15,23,42,.6);
  --line: rgba(56,189,248,.14);
  --text:#e2e8f0;
  --muted:#94a3b8;
  --sky:#38bdf8;
  --pink:#f472b6;
}

*{ box-sizing:border-box; }

.page{
  min-height:100vh;
  margin:0;
  background: radial-gradient(circle at 50% 0%, #172033 0%, #050b14 80%);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  padding: 18px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.wrap{ width:min(1100px, 100%); }

.top{ text-align:center; margin-bottom: 14px; }
.logo{ font-weight: 900; letter-spacing: -0.02em; font-size: clamp(24px, 5vw, 40px); margin:0; }
.accent{ color: var(--sky); }
.tag{ margin: 6px 0 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(226,232,240,.75); }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 980px){
  .grid{ grid-template-columns: 1.2fr .8fr; }
}

.panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 50px rgba(0,0,0,.55);
  overflow: hidden;
  position: relative;
}

.screen{ height: 340px; position: relative; background: #000; }
@media (min-width: 980px){ .screen{ height: 380px; } }

.viz{ width:100%; height:100%; display:block; }

.drop{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  background: rgba(15, 24, 44, .9);
  cursor: pointer;
  text-align:center;
  padding: 14px;
}

.dropIcon{ width: 64px; height: 64px; border-radius: 999px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(56,189,248,.95), rgba(99,102,241,.9));
  box-shadow: 0 16px 60px rgba(56,189,248,.22);
}
.ico{ width: 30px; height: 30px; color: #fff; }

.dropTitle{ font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.dropHint{ font-size: 12px; color: rgba(226,232,240,.65); }

.serverRow{ width:min(520px, 94%); display:flex; gap: 8px; justify-content:center; margin-top: 8px; }

.mini{
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.32);
  background: rgba(15, 23, 42, .7);
  color: var(--text);
  font-size: 12px;
}

.btn{ border: 1px solid rgba(56,189,248,.35); background: rgba(56,189,248,.14); color: #eaf9ff; border-radius: 12px; padding: 8px 10px; font-weight: 700; font-size: 12px; cursor:pointer; }
.btn:hover{ background: rgba(56,189,248,.24); }

.overlay{ position:absolute; inset:0; display:flex; flex-direction: column; gap: 10px; align-items:center; justify-content:center; background: rgba(5,11,20,.92); }
.hidden{ display:none !important; }

.spinner{ width: 32px; height: 32px; border: 3px solid rgba(30,41,59,.9); border-top-color: var(--sky); border-radius: 999px; animation: spin 1s linear infinite; }
@keyframes spin{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }

.controls{ display:flex; justify-content: space-between; align-items:center; padding: 10px 12px; gap: 10px; }

.meta{ min-width: 200px; }
.title{ font-weight: 900; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time{ font-size: 12px; color: rgba(226,232,240,.55); margin-top: 2px; }

.transport{ display:flex; gap: 10px; align-items:center; }

.round{ border-radius: 999px; border: 1px solid rgba(148,163,184,.2); background: rgba(15,23,42,.7); width: 54px; height: 54px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.round.primary{ background: #fff; color: #0b1020; border-color: transparent; box-shadow: 0 18px 60px rgba(255,255,255,.18); }
.round:disabled{ opacity: .55; cursor: not-allowed; }

.badge{ position:absolute; top: 10px; right: 10px; padding: 4px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(56,189,248,.22); background: rgba(56,189,248,.10); }

.section{ padding: 14px; border-top: 1px solid rgba(148,163,184,.12); }
.section:first-of-type{ border-top: none; }

.row{ display:flex; gap: 10px; align-items:center; justify-content: space-between; flex-wrap: wrap; }

.label .name{ font-weight: 900; letter-spacing: .01em; }
.label .sub{ font-size: 11px; color: rgba(226,232,240,.6); margin-top: 2px; }

.slider{ width: min(380px, 100%); }

.btnWide{ width: 100%; border-radius: 12px; padding: 10px 12px; font-weight: 900; letter-spacing: .02em; border: 1px solid rgba(56,189,248,.28); background: rgba(56,189,248,.14); color: #eaf9ff; cursor:pointer; }
.btnWide:disabled{ opacity: .55; cursor: not-allowed; }

.exportList{ padding-top: 10px; display:flex; flex-direction: column; gap: 8px; }
.exportLink{ display:inline-flex; gap: 8px; align-items:center; justify-content: space-between; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.55); font-size: 12px; }