:root {
  --bg: #000;
  --panel: #12121a;
  --panel-2: #1c1c28;
  --text: #f5f5f7;
  --muted: #9a9aab;
  --accent: #fe2c55;
  --live: #ff2d55;
  --ok: #25f4ee;
  --warn: #ffb020;
  --danger: #ff5c7a;
  --radius: 12px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
#app { height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: rgba(0,0,0,0.85);
  border-bottom: 1px solid #222; z-index: 20;
}
.brand { font-weight: 800; letter-spacing: 0.02em; }
.accent { color: var(--accent); }
.top-tabs { display: flex; gap: 18px; margin: 0 auto; font-weight: 600; color: var(--muted); }
.tab.active { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 2px; }
.icon-btn {
  background: var(--panel-2); color: var(--ok); border: 1px solid #333;
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600;
}
.layout { flex: 1; display: grid; grid-template-columns: 1fr minmax(320px, 420px); min-height: 0; }
.layout.xray-collapsed { grid-template-columns: 1fr 0fr; }
.feed {
  position: relative; overflow-y: scroll; scroll-snap-type: y mandatory;
  height: calc(100vh - 52px); background: #000; outline: none;
}
.feed::-webkit-scrollbar { width: 0; }
.card {
  position: relative; height: calc(100vh - 52px); scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center; background: #0a0a0a;
}
.card video, .card canvas.clip {
  width: 100%; height: 100%; object-fit: cover; background: #111;
  max-width: 520px; margin: 0 auto; display: block;
}
.card.live-card video, .card.live-card canvas.clip { outline: 2px solid var(--live); }
.badge-live {
  position: absolute; top: 18px; left: 18px; z-index: 5;
  background: var(--live); color: #fff; font-weight: 800; font-size: 12px;
  padding: 4px 8px; border-radius: 4px; letter-spacing: 0.06em;
}
.rail {
  position: absolute; right: max(12px, calc(50% - 240px)); bottom: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 5;
}
.rail .avatar {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff;
  background: #333; overflow: hidden;
}
.rail .avatar img { width: 100%; height: 100%; object-fit: cover; }
.rail button, .rail .stat {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12px; text-shadow: 0 1px 3px #000;
}
.rail .ico { font-size: 28px; line-height: 1; }
.rail button.liked .ico { filter: none; color: var(--accent); }
.caption {
  position: absolute; left: max(16px, calc(50% - 240px)); bottom: 48px;
  max-width: 280px; z-index: 5; text-shadow: 0 1px 4px #000;
}
.caption .author { font-weight: 700; margin-bottom: 6px; }
.caption .desc { font-size: 14px; opacity: 0.95; }
.caption .meta { font-size: 11px; color: var(--ok); margin-top: 6px; font-family: ui-monospace, monospace; }

.xray {
  background: var(--panel); border-left: 1px solid #2a2a38;
  overflow-y: auto; padding: 12px 14px 40px; min-width: 0;
}
.xray-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.xray-head h2 { margin: 0; font-size: 16px; }
.pill {
  font-size: 10px; background: #2a2040; color: #c9b6ff;
  padding: 2px 8px; border-radius: 999px;
}
.xray-section {
  margin-top: 14px; padding: 12px; background: var(--panel-2);
  border-radius: var(--radius); border: 1px solid #2e2e40;
}
.xray-section h3 { margin: 0 0 8px; font-size: 13px; color: var(--ok); }
.xray-section.privacy { border-color: var(--danger); }
.sim-note { font-size: 11px; color: var(--warn); margin-bottom: 8px; }
label {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center;
  font-size: 12px; color: var(--muted); margin: 4px 0;
}
label.check { grid-template-columns: 20px 1fr; }
input[type="range"] { width: 100%; }
input[type="number"], textarea {
  width: 100%; background: #0d0d14; color: var(--text);
  border: 1px solid #333; border-radius: 8px; padding: 6px 8px;
}
.btn {
  margin-top: 8px; background: #2a2a40; color: #fff; border: 1px solid #444;
  border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 12px;
}
.btn.warn { background: #3a2810; border-color: var(--warn); color: #ffd89a; }
.btn.ghost { background: transparent; }
.row { display: flex; flex-wrap: wrap; gap: 6px; }
.code {
  background: #0a0a10; border-radius: 8px; padding: 8px; font-size: 11px;
  overflow: auto; max-height: 220px; white-space: pre-wrap; word-break: break-word;
  border: 1px solid #2a2a35; color: #c8e6c9;
}
.code.danger { color: #ffb4c0; border-color: #5a2030; }
.models { font-size: 12px; line-height: 1.5; }
.models .on { color: var(--accent); font-weight: 700; }
.models .ok { color: var(--ok); }
.log { font-size: 11px; font-family: ui-monospace, monospace; max-height: 200px; overflow: auto; }
.log div { padding: 3px 0; border-bottom: 1px solid #222; color: var(--muted); }
.log .hi { color: #fff; }

.sheet {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
}
.sheet.hidden { display: none; }
.sheet-inner {
  width: min(480px, 100%); background: var(--panel); border-radius: 16px 16px 0 0;
  padding: 20px;
}
.muted { color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .xray {
    position: fixed; right: 0; top: 52px; bottom: 0; width: min(100%, 400px);
    z-index: 30; transform: translateX(100%); transition: transform 0.2s;
  }
  .xray.open { transform: translateX(0); }
  .rail { right: 12px; }
  .caption { left: 16px; }
}