:root {
  --bg: #0a0509;
  --bg-soft: #140a13;
  --panel: rgba(24, 11, 22, 0.78);
  --panel-solid: #170c16;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 190, 235, 0.16);
  --text: #f8e8f4;
  --muted: #ab8fa7;
  --accent: #ff3df0;
  --accent-dark: #c014b0;
  --accent-soft: #ff8ef7;
  --peach: #ffd9a8;
  --peach-dark: #e0a86a;
  --plum: #8b137a;
  --violet: #cf9dff;
  --danger: #ff5d6e;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(8, 2, 7, 0.6);
  --speed: 180ms;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 17px; margin: 0; letter-spacing: 0.2px; }
h2 { font-size: 15px; margin: 0 0 6px; }
p { margin: 0; }
.muted { color: var(--muted); font-size: 12.5px; }
.spacer { flex: 1 1 auto; }
.hidden { display: none !important; }

.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.backdrop .grid {
  position: absolute; inset: -2px;
  background-image: linear-gradient(rgba(255, 61, 240, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 217, 168, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,0.9), transparent 78%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.orb-one { width: 46vw; height: 46vw; left: -8vw; top: -14vw; background: radial-gradient(circle, rgba(255, 61, 240, 0.5), transparent 70%); animation: drift 26s ease-in-out infinite; }
.orb-two { width: 38vw; height: 38vw; right: -6vw; top: 18vh; background: radial-gradient(circle, rgba(255, 217, 168, 0.38), transparent 70%); animation: drift 32s ease-in-out infinite reverse; }
.orb-three { width: 34vw; height: 34vw; left: 32vw; bottom: -16vw; background: radial-gradient(circle, rgba(139, 19, 122, 0.55), transparent 70%); animation: drift 38s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, 3vh, 0) scale(1.12); }
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.btn {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 15px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform var(--speed) ease, background var(--speed) ease, border-color var(--speed) ease, box-shadow var(--speed) ease, opacity var(--speed) ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.small { padding: 6px 11px; font-size: 12.5px; }
.btn.wide { width: 100%; padding: 11px 16px; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255, 61, 240, 0.1); border-color: rgba(255, 61, 240, 0.35); }
.btn.primary { background: linear-gradient(140deg, var(--accent), var(--accent-dark)); border-color: transparent; color: #21041d; box-shadow: 0 8px 22px rgba(255, 61, 240, 0.28); }
.btn.primary:hover { box-shadow: 0 12px 30px rgba(255, 61, 240, 0.45); }
.btn.success { background: linear-gradient(140deg, #45e08a, #12a25c); border-color: transparent; color: #05200f; }
.btn.success:hover { box-shadow: 0 10px 26px rgba(69, 224, 138, 0.35); }
.btn.neutral { background: rgba(139, 19, 122, 0.28); border-color: rgba(255, 142, 247, 0.3); }
.btn.warn { background: linear-gradient(140deg, #ffd452, #e0a017); border-color: transparent; color: #2a1c02; }
.btn.warn:hover { box-shadow: 0 10px 26px rgba(255, 212, 82, 0.35); }
.btn.danger { background: linear-gradient(140deg, #ff5d6e, #c11f34); border-color: transparent; color: #fff1f2; }
.btn.danger:hover { box-shadow: 0 10px 26px rgba(255, 93, 110, 0.38); }
.btn.settings { background: linear-gradient(140deg, rgba(255, 61, 240, 0.22), rgba(139, 19, 122, 0.35)); border-color: rgba(255, 142, 247, 0.4); }

input, textarea {
  font: inherit;
  color: var(--text);
  background: rgba(10, 3, 9, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease, background var(--speed) ease;
  width: 100%;
}
input:focus, textarea:focus { border-color: rgba(255, 61, 240, 0.6); box-shadow: 0 0 0 3px rgba(255, 61, 240, 0.14); background: rgba(10, 3, 9, 0.8); }
::placeholder { color: rgba(171, 143, 167, 0.7); }

.switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.switch .slider { width: 34px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); position: relative; transition: background var(--speed) ease; border: 1px solid var(--line-strong); }
.switch .slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform var(--speed) ease, background var(--speed) ease; }
.switch input:checked + .slider { background: rgba(255, 61, 240, 0.3); border-color: rgba(255, 61, 240, 0.55); }
.switch input:checked + .slider::after { transform: translateX(15px); background: var(--accent); }

.login { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 22px; }
.login-card { width: min(410px, 100%); padding: 30px 28px; display: grid; gap: 14px; text-align: center; animation: rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.login-card.shake { animation: shake 380ms ease; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes shake { 10%, 90% { transform: translateX(-3px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.halo { display: grid; place-items: center; }
.logo-large { width: 108px; height: 108px; border-radius: 26px; object-fit: cover; box-shadow: 0 18px 42px rgba(8, 2, 7, 0.7), 0 0 0 1px rgba(255, 142, 247, 0.35); animation: float 6s ease-in-out infinite; }
.logo-small { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 142, 247, 0.35); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.field { display: grid; gap: 6px; text-align: left; }
.field span { font-size: 12px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); }
.error-line { min-height: 18px; color: var(--danger); font-size: 12.5px; }

.app { position: relative; z-index: 2; height: 100%; padding: 14px; display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 12px; animation: rise 380ms ease both; }
.main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.sidebar { padding: 16px 14px; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.sidebar .brand { align-items: center; }
.sidebar .logo-small { width: 46px; height: 46px; border-radius: 14px; }
.sidenav { display: flex; flex-direction: column; gap: 6px; }
.sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.topbar { padding: 12px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-text { min-width: 0; }
.brand-text h1 { font-size: 15px; }
.brand-text p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-cluster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.04); transition: all var(--speed) ease; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.on { border-color: rgba(69, 224, 138, 0.45); background: rgba(69, 224, 138, 0.13); color: #b9ffd9; }
.pill.on .dot { background: #45e08a; box-shadow: 0 0 0 0 rgba(69, 224, 138, 0.7); animation: pulse-green 2s infinite; }
.pill.off { border-color: rgba(255, 93, 110, 0.4); background: rgba(255, 93, 110, 0.1); color: #ffc6cd; }
.pill.off .dot { background: var(--danger); }
.pill.busy { border-color: rgba(255, 61, 240, 0.45); background: rgba(255, 61, 240, 0.13); color: #ffd0fa; }
.pill.busy .dot { background: var(--accent); animation: pulse-magenta 1.2s infinite; }
@keyframes pulse-magenta { 0% { box-shadow: 0 0 0 0 rgba(255, 61, 240, 0.65); } 70% { box-shadow: 0 0 0 9px rgba(255, 61, 240, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 61, 240, 0); } }
.controls { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.tab { position: relative; appearance: none; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-weight: 600; text-align: left; width: 100%; padding: 11px 14px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 11px; transition: all var(--speed) ease; }
.tab .tab-icon { width: 18px; text-align: center; font-size: 14px; opacity: 0.85; }
.tab:hover { color: var(--text); background: rgba(255, 61, 240, 0.09); }
.tab.active { color: var(--text); background: linear-gradient(90deg, rgba(255, 61, 240, 0.22), rgba(255, 61, 240, 0.03)); border-color: rgba(255, 61, 240, 0.32); }
.tab.active .tab-icon { opacity: 1; color: var(--accent-soft); }
.tab.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px rgba(255, 61, 240, 0.8); }
.connection { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.connection::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--peach); }
.connection.live::before { background: var(--accent); }
.connection.dead::before { background: var(--danger); }

.view { display: none; min-height: 0; }
.view.active { display: block; animation: fade 240ms ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#view-console.active, #view-files.active { height: 100%; }

.console-card, .files-card, .settings-card { height: 100%; padding: 12px; display: grid; gap: 10px; }
.console-card { grid-template-rows: auto 1fr auto auto; }
.files-card { grid-template-rows: auto auto 1fr auto; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .search { width: 240px; }

.console {
  position: relative;
  background: linear-gradient(180deg, rgba(12, 3, 11, 0.94), rgba(16, 5, 15, 0.97));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  overflow: auto;
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.console .line { white-space: pre-wrap; word-break: break-word; padding: 1px 0; animation: line-in 220ms ease both; }
.console.nowrap .line { white-space: pre; word-break: normal; }
.console .line.filtered { display: none; }
.console .line .txt { color: #e9d6e4; }
.lv-info .txt { color: #e9d6e4; }
.lv-warn .txt { color: #ffd48f; }
.lv-error .txt { color: #ff8a99; }
.lv-panel .txt { color: var(--accent-soft); }
.lv-join .txt { color: var(--peach); }
.lv-input .txt { color: var(--violet); }
.console .line mark { background: rgba(255, 61, 240, 0.3); color: #ffe9fb; border-radius: 3px; padding: 0 2px; }
@keyframes line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.command { display: flex; align-items: center; gap: 10px; background: rgba(10, 3, 9, 0.6); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 6px 4px 14px; transition: border-color var(--speed) ease, box-shadow var(--speed) ease; }
.command:focus-within { border-color: rgba(255, 61, 240, 0.55); box-shadow: 0 0 0 3px rgba(255, 61, 240, 0.13); }
.command .prompt { color: var(--accent); font-weight: 700; font-family: monospace; }
.command input { border: none; background: transparent; padding: 7px 0; }
.command input:focus { box-shadow: none; }
.quick { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-strong); background: rgba(255,255,255,0.04); color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; transition: all var(--speed) ease; }
.chip:hover { color: var(--text); border-color: rgba(255, 61, 240, 0.55); background: rgba(255, 61, 240, 0.12); }

.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; }
.crumbs button { appearance: none; background: transparent; border: none; color: var(--muted); font: inherit; cursor: pointer; padding: 3px 6px; border-radius: 7px; transition: all var(--speed) ease; }
.crumbs button:hover { color: var(--text); background: rgba(255, 61, 240, 0.12); }
.crumbs button.current { color: var(--accent-soft); font-weight: 600; }
.crumbs .sep { color: rgba(171, 143, 167, 0.5); }

.bulk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(255, 61, 240, 0.1); border: 1px solid rgba(255, 61, 240, 0.32); animation: fade 200ms ease both; }

.file-area { position: relative; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 3, 9, 0.4); scrollbar-width: thin; }
.file-head, .row { display: grid; grid-template-columns: 34px 1fr 110px 170px 190px; align-items: center; gap: 8px; padding: 0 12px; }
.file-head { position: sticky; top: 0; z-index: 2; height: 38px; background: rgba(19, 8, 18, 0.95); border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); backdrop-filter: blur(10px); }
.row { min-height: 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.035); transition: background var(--speed) ease; cursor: pointer; }
.row:hover { background: rgba(255, 255, 255, 0.045); }
.row.selected { background: rgba(255, 61, 240, 0.1); }
.row .name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row .name .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: rgba(255,255,255,0.06); flex: 0 0 auto; }
.row.entry-dir .icon { background: rgba(255, 217, 168, 0.18); }
.row .cell { color: var(--muted); font-size: 12.5px; }
.row .actions { display: flex; gap: 5px; justify-content: flex-end; opacity: 0.25; transition: opacity var(--speed) ease; }
.row:hover .actions, .row.selected .actions { opacity: 1; }
.icon-btn { appearance: none; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.05); color: var(--text); border-radius: 8px; width: 30px; height: 28px; display: grid; place-items: center; cursor: pointer; font-size: 13px; transition: all var(--speed) ease; }
.icon-btn:hover { background: rgba(255, 61, 240, 0.2); border-color: rgba(255, 61, 240, 0.5); transform: translateY(-1px); }
.icon-btn.danger:hover { background: rgba(255, 93, 110, 0.22); border-color: rgba(255, 93, 110, 0.55); }
.check { width: 17px; height: 17px; border-radius: 5px; border: 1px solid var(--line-strong); background: rgba(0,0,0,0.35); display: grid; place-items: center; transition: all var(--speed) ease; }
.row.selected .check { background: var(--accent); border-color: var(--accent); color: #21041d; }
.row.selected .check::after { content: "✓"; font-size: 11px; font-weight: 700; }
.empty { padding: 30px; text-align: center; color: var(--muted); }

.overlay { position: absolute; inset: 0; display: none; place-items: center; background: rgba(255, 61, 240, 0.12); backdrop-filter: blur(4px); border: 2px dashed rgba(255, 61, 240, 0.6); border-radius: var(--radius-sm); z-index: 4; pointer-events: none; }
.overlay.show { display: grid; animation: fade 160ms ease both; }
.overlay-inner { background: rgba(18, 6, 17, 0.88); padding: 14px 22px; border-radius: var(--radius-sm); font-weight: 600; }

.upload { display: grid; gap: 6px; }
.upload-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.upload-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--peach), var(--accent)); transition: width 140ms linear; }

.dash { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; height: 100%; min-height: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(120%); }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 700; margin-top: 4px; }
.stat .s { color: var(--muted); font-size: 12px; margin-top: 2px; }
.stat.hot .v { color: var(--accent-soft); }
.stat.warm .v { color: var(--peach); }
.dash-card { padding: 14px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.player-list { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 3, 9, 0.4); }
.player-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 150px 130px 130px; align-items: center; gap: 10px; min-height: 58px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.035); cursor: pointer; transition: background var(--speed) ease; }
.player-row:hover { background: rgba(255, 61, 240, 0.08); }
.player-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: linear-gradient(140deg, rgba(255, 61, 240, 0.3), rgba(139, 19, 122, 0.45)); color: var(--text); }
.player-row .name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.player-row .name .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-row .cell { color: var(--muted); font-size: 12.5px; }
.state-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); }
.state-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.state-badge.on { color: #b9ffd9; border-color: rgba(69, 224, 138, 0.45); background: rgba(69, 224, 138, 0.12); }
.state-badge.on .dot { background: #45e08a; animation: pulse-green 2s infinite; }
.state-badge.off { color: #ffd7db; border-color: rgba(255, 93, 110, 0.35); background: rgba(255, 93, 110, 0.1); }
.state-badge.off .dot { background: var(--danger); }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(69, 224, 138, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(69, 224, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(69, 224, 138, 0); } }
.player-card { height: 100%; padding: 14px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.player-body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.player-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; min-height: 0; }
.panel-block { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; }
.panel-block h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; }
.panel-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 3, 9, 0.45); padding: 8px 10px; font-size: 12.5px; }
#player-sessions.panel-scroll { max-height: 150px; }
.entry { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.entry:last-child { border-bottom: none; }
.entry .time { color: var(--muted); font-family: monospace; font-size: 12px; }
.entry .text { word-break: break-word; }
.entry.msg .text { color: #ffe0fb; }
.entry.session-open .text { color: #b9ffd9; }
.entry.empty { grid-template-columns: 1fr; color: var(--muted); text-align: center; padding: 14px 0; }

.settings-card { overflow: auto; align-content: start; }
.setting-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.setting { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: rgba(255,255,255,0.025); }
.setting .k { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.setting .v { font-family: monospace; font-size: 13px; word-break: break-all; margin-top: 3px; }
.note { border-left: 3px solid var(--accent); padding: 10px 14px; background: rgba(255, 61, 240, 0.09); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.settings-form { display: grid; gap: 14px; }
.settings-form .hint { color: var(--muted); font-size: 12px; }

#modal-root { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; background: rgba(6, 1, 5, 0.7); backdrop-filter: blur(6px); padding: 20px; }
#modal-root.open { display: grid; animation: fade 180ms ease both; }
.modal { width: min(560px, 100%); padding: 20px; display: grid; gap: 14px; animation: rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; max-height: 86vh; }
.modal.wide { width: min(900px, 100%); }
.modal .modal-body { display: grid; gap: 10px; overflow: auto; min-height: 0; }
.modal textarea { min-height: 380px; font-family: monospace; font-size: 12.5px; resize: vertical; white-space: pre; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal .error-line { color: var(--danger); font-size: 12.5px; min-height: 16px; }

#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; gap: 10px; justify-items: end; }
.toast { background: var(--panel-solid); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 11px 16px; box-shadow: var(--shadow); font-size: 13px; max-width: 380px; animation: slide-in 240ms ease both; }
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--peach); }
.toast.out { animation: slide-out 240ms ease both; }
@keyframes slide-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes slide-out { to { opacity: 0; transform: translateX(30px); } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 142, 247, 0.18); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 142, 247, 0.32); background-clip: content-box; }

@media (max-width: 1000px) {
  .app { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .player-row { grid-template-columns: 40px minmax(0, 1fr) 170px 130px; }
  .player-row .cell.optional { display: none; }
}
@media (max-width: 900px) {
  .player-lower { grid-template-columns: minmax(0, 1fr); }
  .player-row { grid-template-columns: 36px minmax(0, 1fr) 150px; }
  .player-row .cell.sessions { display: none; }
  .file-head, .row { grid-template-columns: 30px 1fr 90px 170px; }
  .file-head .col-size, .row .cell.size { display: none; }
  .controls { margin-left: 0; width: 100%; }
  .status-cluster { width: 100%; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { gap: 12px; }
  .sidebar .brand { display: flex; }
  .sidenav { flex-direction: row; flex-wrap: wrap; }
  .tab { width: auto; }
  .tab.active::before { top: auto; bottom: 4px; left: 14px; right: 14px; width: auto; height: 2px; }
  .sidebar-foot { margin-top: 0; }
}
@media (max-width: 640px) {
  body { overflow: auto; }
  .file-head, .row { grid-template-columns: 28px 1fr 150px; }
  .file-head .col-time, .row .cell.time { display: none; }
  .app { height: auto; }
  .console { min-height: 320px; }
}