:root {
  color-scheme: dark;
  --bg: #08080c; --panel: #111118; --panel-2: #181822; --line: #26263280; --line-2: #33334a;
  --ink: #f2f2f7; --silver: #b4b6c4; --muted: #8a8c9e;
  --zx: #8b5cf6; --zx-2: #a78bfa; --zx-dim: #8b5cf624; --zx-glow: 0 0 24px #8b5cf63a;
  --ok: #5ad19a; --part: #e8b95a; --prep: #8fb4ff; --block: #f07a7a;
  --r: 12px; --r-s: 8px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
#app { height: 100%; display: flex; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font: 650 21px/1.2 var(--display); letter-spacing: -.01em; }
h2 { font: 600 17px var(--display); }
h3 { font: 600 14px var(--display); color: var(--silver); }
h4 { font: 600 14px var(--display); }
a { color: var(--zx-2); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: 12px; color: var(--muted); }
.block { display: block; }
.muted { color: var(--muted); }
.err { color: var(--block); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.grow { flex: 1 1 auto; }
:focus-visible { outline: 2px solid var(--zx-2); outline-offset: 2px; }

/* Controlos */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px var(--font); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 8px 14px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .08s; white-space: nowrap; }
button:hover, .btn:hover { border-color: var(--zx); text-decoration: none; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary, .btn.primary { background: var(--zx); border-color: var(--zx); color: #fff; }
button.primary:hover, .btn.primary:hover { background: #7c4df0; box-shadow: var(--zx-glow); }
button.ghost { background: transparent; border-color: transparent; color: var(--silver); }
button.ghost:hover { background: var(--panel-2); border-color: var(--line-2); }
button.danger { background: #f07a7a1f; border-color: #f07a7a66; color: var(--block); }
button.danger-t { color: var(--block); }
button.sm, .btn.sm { padding: 5px 10px; font-size: 12px; }
button.icon { padding: 4px 9px; }
button.link { background: none; border: none; padding: 0; color: var(--ink); font-weight: 500; white-space: normal; text-align: left; justify-content: flex-start; }
button.link:hover { color: var(--zx-2); }
input, select, textarea { width: 100%; min-width: 0; background: #0c0c12; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 8px 10px; font: 14px var(--font); transition: border-color .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--zx); outline: none; box-shadow: 0 0 0 3px var(--zx-dim); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--zx); flex: none; }
input[type=color] { padding: 2px; height: 36px; }
input.big { font-size: 16px; padding: 12px 14px; }
textarea { resize: vertical; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 8px; }
.row > .field { flex: 1; }

/* Estrutura */
.rail { width: 208px; flex: none; background: #0c0c12; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand b { font: 800 22px var(--display); letter-spacing: -.04em; background: linear-gradient(135deg, #fff 20%, var(--zx-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand span { font-size: 10.5px; line-height: 1.15; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-s); color: var(--silver); font-weight: 500; position: relative; transition: background .15s, color .15s; }
.nav a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.nav a.on { background: var(--zx-dim); color: #fff; }
.nav a.on::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--zx); box-shadow: var(--zx-glow); }
.nav i { font-style: normal; width: 18px; text-align: center; color: var(--zx-2); }
.nav em { font-style: normal; margin-left: auto; font-size: 10px; color: var(--block); }
.nav-sep { height: 1px; background: var(--line); margin: 8px 6px; }
.body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.title p { font-size: 13px; color: var(--muted); }
main { flex: 1; overflow-y: auto; padding: 20px 24px 40px; outline: none; }
.view { display: flex; flex-direction: column; gap: 16px; animation: fade .22s ease-out; max-width: 1500px; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.note { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.gs { position: relative; width: 280px; }
.gs-results { position: absolute; top: 42px; right: 0; width: 360px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px; z-index: 30; box-shadow: 0 16px 40px #000a; }
.gs-results button { width: 100%; background: none; border: none; justify-content: space-between; padding: 8px; white-space: normal; text-align: left; }
.gs-results button:hover { background: var(--zx-dim); }
.gs-results p { padding: 8px; }

/* Blocos */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
a.tile:hover { border-color: var(--zx); box-shadow: var(--zx-glow); text-decoration: none; }
.tile b { font: 650 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.tile span { color: var(--silver); font-size: 13px; margin-top: 4px; }
.sec { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.apps.compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.app { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; color: var(--ink); text-align: left; white-space: normal; font-weight: 400; transition: border-color .15s, box-shadow .15s, transform .15s; }
.app:hover { border-color: var(--zx); box-shadow: var(--zx-glow); transform: translateY(-1px); text-decoration: none; }
.app.pri { background: linear-gradient(145deg, #1d1630, var(--panel) 65%); border-color: #8b5cf666; }
.app p { font-size: 12.5px; color: var(--muted); flex: 1; }
.app-top { display: flex; justify-content: space-between; width: 100%; }
.app-top i { font-style: normal; color: var(--zx-2); font-size: 16px; }
.n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.state { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 99px; white-space: nowrap; border: 1px solid currentColor; }
.state.ok { color: var(--ok); } .state.part { color: var(--part); } .state.prep { color: var(--prep); } .state.block { color: var(--block); }
.pill { font-size: 11.5px; padding: 2px 9px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--silver); white-space: nowrap; }
.empty { text-align: center; padding: 28px 16px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty strong { color: var(--silver); }
.banner { padding: 10px 14px; border-radius: var(--r-s); font-size: 13px; border: 1px solid; }
.banner.warn { color: var(--part); border-color: #e8b95a55; background: #e8b95a14; }
.banner.err { color: var(--block); border-color: #f07a7a55; background: #f07a7a14; }
.banner.ok { color: var(--ok); border-color: #5ad19a55; background: #5ad19a12; }
.banner.flat { border-radius: 0; border-width: 0 0 1px; }
.okline { color: var(--ok); }
.onboarding { background: linear-gradient(120deg, #1d1630, var(--panel) 70%); border-color: #8b5cf655; }

/* Listas */
.feed, .tasks, .ints, .results, .checks, .plain { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child, .tasks li:last-child, .ints li:last-child { border: none; }
.feed li > div { flex: 1; min-width: 0; }
.feed p { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.feed time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.feed .lvl { color: var(--muted); width: 12px; text-align: center; }
.feed .error .lvl { color: var(--block); } .feed .warn .lvl { color: var(--part); }
.tasks li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tasks time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ints li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ints small { display: block; }
.results li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.results p { color: var(--silver); font-size: 13px; }
.results small { margin-left: 10px; }
.checks li { display: flex; gap: 10px; padding: 7px 0; }
.checks b { width: 16px; } .checks .pass b { color: var(--ok); } .checks .fail b { color: var(--block); }
.checks small { display: block; }
.plain li { font-size: 13px; color: var(--silver); padding: 2px 0; overflow-wrap: anywhere; }
.toggle { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.toggle input { margin-top: 3px; } .toggle small { display: block; }
dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
dt { color: var(--muted); } dd { margin: 0; color: var(--silver); min-width: 0; }

/* Tabelas e coleções */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tabs a, .tabs button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); padding: 8px 12px; font: 500 13.5px var(--font); white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--ink); text-decoration: none; }
.tabs a.on, .tabs button.on { color: #fff; border-bottom-color: var(--zx); }
.toolbar { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.toolbar input { max-width: 300px; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 2px; align-self: flex-start; }
.seg button { background: none; border: none; padding: 5px 12px; border-radius: 6px; color: var(--muted); }
.seg button.on { background: var(--zx-dim); color: #fff; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
.data th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.data td { padding: 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
.data tbody tr { cursor: pointer; transition: background .12s; }
.data tbody tr:hover { background: var(--panel-2); }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.column { background: #0d0d14; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; min-height: 240px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s; }
.column.over { border-color: var(--zx); }
.column header { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--silver); font-weight: 600; }
.column b { color: var(--muted); font-weight: 500; }
.kcard { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 10px; cursor: grab; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s; }
.kcard:hover { border-color: var(--zx); }
.cal-head { justify-content: center; margin-bottom: 8px; text-transform: capitalize; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-d { text-align: center; color: var(--muted); font-size: 12px; padding: 4px; }
.cal-c { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; min-height: 84px; padding: 5px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.cal-c.off { background: none; border: none; cursor: default; }
.cal-c:not(.off):hover { border-color: var(--line-2); }
.cal-i { background: var(--zx-dim); border: none; padding: 2px 6px; font-size: 11.5px; font-weight: 500; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; text-align: left; }

/* Modal e avisos */
dialog.modal { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 80px #000c; }
dialog.modal.wide { width: min(720px, calc(100vw - 32px)); }
dialog::backdrop { background: #0009; backdrop-filter: blur(3px); }
dialog header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.modal-body { padding: 16px 18px; }
.modal-body p { margin-bottom: 10px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: 12.5px; color: var(--silver); font-weight: 500; }
.version { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.version span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details summary { cursor: pointer; color: var(--silver); font-size: 13px; }
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--ok); padding: 10px 14px; border-radius: var(--r-s); max-width: 380px; box-shadow: 0 10px 30px #0008; animation: fade .2s; }
.toast.err { border-left-color: var(--block); }

/* Gráficos: série única, marcas finas */
.chart-wrap { position: relative; }
svg.chart { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--zx-2); }
.chart .axis { stroke: var(--line-2); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .tick.mid { text-anchor: middle; }
.chart-tip { position: absolute; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line-2); padding: 4px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.chart-table table { margin-top: 6px; font-size: 12.5px; }
.chart-table td { padding: 1px 16px 1px 0; color: var(--silver); }
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: 120px 1fr 62px; gap: 10px; align-items: center; font-size: 13px; }
.hbar-l { color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-t { height: 10px; }
.hbar-t i { display: block; height: 100%; background: var(--zx-2); border-radius: 0 4px 4px 0; transition: width .35s ease-out; }
.hbar-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Open Source Hub, automações */
.oss { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.oss-item header { display: flex; justify-content: space-between; gap: 12px; }
.oss-item header select { width: auto; flex: none; }
.oss-item a { font-size: 12.5px; overflow-wrap: anywhere; }
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { display: flex; gap: 8px; align-items: center; }
.step select:first-child { max-width: 170px; }
.step select { max-width: 170px; }
.run { border-top: 1px solid var(--line); padding: 8px 0; }
.run summary { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.run b { font-size: 12px; } .run.success b { color: var(--ok); } .run.failed b { color: var(--block); } .run.blocked b { color: var(--part); }
pre { background: #0a0a10; border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px; font: 12px Consolas, monospace; overflow: auto; max-height: 260px; color: var(--silver); white-space: pre-wrap; margin: 8px 0 0; }

/* VIDZX Studio */
.studio { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 12px; min-height: calc(100vh - 150px); }
.lib, .side, .stage, .tl-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.lib, .side { display: flex; flex-direction: column; gap: 10px; }
.side { max-height: calc(100vh - 150px); overflow-y: auto; }
.center { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stage { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 340px; }
.stage video { width: 100%; max-height: 52vh; background: #000; border-radius: var(--r-s); }
.trim { flex-wrap: wrap; }
.trim input[aria-label="Pasta do ficheiro"] { width: 130px; }
.stage-img { max-width: 100%; max-height: 52vh; object-fit: contain; align-self: center; border-radius: var(--r-s); }
.clip.on { border-color: var(--zx-2); box-shadow: var(--zx-glow); }
pre.readme { max-height: 65vh; }
.trim input { width: 88px; flex: none; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-y: auto; align-content: start; flex: 1; min-height: 100px; }
.media-grid .empty { grid-column: span 2; }
.thumb { position: relative; display: block; padding: 0; overflow: hidden; background: #000; white-space: normal; text-align: left; }
.thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--panel-2); }
.thumb small { display: block; padding: 3px 6px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--panel-2); color: var(--silver); }
.thumb .d { position: absolute; top: 4px; right: 4px; background: #000b; padding: 0 5px; border-radius: 4px; font-size: 11px; }
.thumb.on { border-color: var(--zx); box-shadow: var(--zx-glow); }
.tl-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.tl { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.tl-empty { color: var(--muted); text-align: center; padding: 18px; }
.clip { flex-basis: 110px; min-width: 110px; background: linear-gradient(180deg, #2a1f4a, #1b1630); border: 1px solid #8b5cf666; border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.clip-b { background: none; border: none; display: block; text-align: left; padding: 7px 8px; width: 100%; overflow: hidden; }
.clip-b strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-c { display: flex; justify-content: flex-end; gap: 1px; padding: 0 2px 2px; }
.clip-c button { background: none; border: none; padding: 1px 7px; font-size: 12px; color: var(--silver); }
.clip-c button:hover { color: #fff; background: #ffffff1a; }
.sub { display: grid; grid-template-columns: 56px 56px 1fr auto; gap: 4px; margin-bottom: 4px; }
.sub input { padding: 5px 6px; font-size: 12.5px; }
.actions { margin-top: 4px; }
.job { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.job .row { width: 100%; } .job.failed small:first-of-type { color: var(--block); } .job.done .row small { color: var(--ok); }
.progress { height: 5px; width: 100%; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--zx); box-shadow: var(--zx-glow); transition: width .3s; }
.audio-list { display: flex; flex-direction: column; }
.audio-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 6px; }
.audio-row:hover { background: var(--panel-2); } .audio-row.on { background: var(--zx-dim); }
.audio-row audio { height: 34px; width: 230px; }

/* Design */
.grid-side.wide-l { grid-template-columns: minmax(0, 1fr) 340px; }
.canvas-wrap { background: repeating-conic-gradient(#14141c 0 25%, #101018 0 50%) 0 0 / 22px 22px; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 480px; }
.design-canvas { max-width: 100%; max-height: 68vh; box-shadow: 0 16px 50px #000a; border-radius: 4px; }
.slides { display: flex; flex-wrap: wrap; gap: 4px; }

/* Autenticação */
.auth { flex: 1; display: grid; place-items: center; background: radial-gradient(800px 500px at 50% 20%, #1e1538 0, var(--bg) 70%); padding: 16px; }
.auth-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px #0009; }
.auth-mark { font: 800 34px var(--display); letter-spacing: -.05em; background: linear-gradient(135deg, #fff 20%, var(--zx-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 1180px) {
  .studio { grid-template-columns: 1fr; min-height: 0; }
  .side { max-height: none; }
  .grid-side, .grid-side.wide-l { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  #app { flex-direction: column; height: auto; min-height: 100%; }
  .rail { width: 100%; padding: 8px 10px; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; }
  .brand { padding: 0 6px 0 0; } .brand span { display: none; }
  .nav { flex-direction: row; } .nav a { white-space: nowrap; } .nav a.on::before, .nav-sep { display: none; }
  .top { flex-wrap: wrap; padding: 12px 16px; } .gs { width: 100%; } .gs-results { width: 100%; }
  main { padding: 16px; overflow: visible; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .oss { grid-template-columns: 1fr; }
  .row:not(.actions):not(.end):not(.trim) { flex-wrap: wrap; }
  .toolbar { flex-wrap: wrap; }
  .audio-row { flex-wrap: wrap; }
}