/* Studio additions on top of the kit's tokens.css and components.css. */
.sidebar { min-height: 100vh; overflow-y: auto; }
.nav-group { margin: 14px 16px 4px; font-size: 11px; letter-spacing: 1px; color: #a090c4; text-transform: uppercase; }
.sidebar nav { gap: 2px; }
.nav-item { height: 38px; font-size: 13px; }
.nav-item.disabled { opacity: .45; }
.topbar .select { height: 38px; }
.game-icon { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #eee3ff; }
.game-card { display: grid; gap: 14px; cursor: pointer; }
.game-card:hover { box-shadow: 0 6px 18px #31107712; }
.game-card .kv { grid-template-columns: 1fr auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.metric small { color: var(--muted); }
.placeholder { display: grid; gap: 12px; justify-items: start; }
.secret { font: 15px/1.6 monospace; letter-spacing: 2px; word-break: break-all; background: #f8f5ff; border: 1px solid #e4d8fa; border-radius: 10px; padding: 12px; }
.auth-card .tabs { justify-content: center; }
.auth-card form { display: grid; gap: 14px; }
.error-banner { color: #cc3153; min-height: 18px; text-align: center; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.inline-form .field { min-width: 180px; flex: 1; }
.inline-form .input-wrap input, .inline-form select { width: 100%; }
.link-out { word-break: break-all; }
.lang { display: inline-flex; gap: 4px; }
.lang button { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.lang button[aria-pressed=true] { background: var(--purple); color: white; border-color: transparent; }
.login-lang { position: absolute; top: 20px; right: 24px; }
.auth-zone { position: relative; }
.chart-empty { color: var(--muted); padding: 40px 0; text-align: center; }
.right { text-align: right; }
td.wrap { white-space: normal; max-width: 420px; }
.cards { align-items: start; }
td .select { height: 34px; font-size: 12px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #f6f0ff; }
.textarea { width: 100%; border: 1px solid #d8caff; border-radius: 9px; padding: 10px 12px; font: 12px/1.5 monospace; color: var(--ink); background: #fff; resize: vertical; }
.inline-form .field.wide { flex-basis: 100%; }
.field.actions { flex: 0 0 auto; min-width: 0; }
form.stack .field.actions { justify-self: start; }
.heatmap td { min-width: 52px; }
.avatar { width: 48px; height: 48px; }
pre.code { max-height: 420px; overflow: auto; }
.grow { flex: 1; min-width: 200px; }
ul.tree { margin: 4px 0 4px 18px; padding: 0; }
ul.tree li { margin: 4px 0; }
a.panel.game-card { color: var(--ink); }
form.stack { display: grid; gap: 14px; }