/* 8-Bit Game Studio shared stylesheet.
   This file is self-contained: tokens, universal app bar, page chrome, route
   surfaces, editor, administration, and catalog styling all live here. */

/* ------------------------------------------------------------------ tokens */
.studio-shell {
	--st-bg: #0a1220;
	--st-bg-2: #0d1627;
	--st-surface: #111c2d;
	--st-surface-2: #172438;
	--st-surface-3: #1c2c44;
	--st-line: #263a54;
	--st-line-2: #34506f;
	--st-ink: #eef4ff;
	--st-muted: #a6b7cc;
	--st-dim: #7a8ea6;
	--st-cyan: #68d5ff;
	--st-cyan-ink: #061b25;
	--st-mint: #75e8c0;
	--st-mint-ink: #05251b;
	--st-gold: #ffd166;
	--st-gold-ink: #2a1d00;
	--st-rose: #ff8fa3;
	--st-violet: #b39dff;
	--st-radius: 12px;
	--st-radius-sm: 8px;
	--st-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
	--st-mono: "Courier New", Courier, monospace;
	/* Legacy aliases still used by the editor rules below. */
	--studio-ink: var(--st-ink);
	--studio-muted: var(--st-muted);
	--studio-panel: var(--st-surface);
	--studio-panel-2: var(--st-surface-2);
	--studio-accent: var(--st-gold);
	--studio-line: var(--st-line);
	--studio-radius: var(--st-radius);
	--studio-focus: 2px solid var(--st-gold);
	box-sizing: border-box;
	position: relative;
	width: 100%;
	/* Wide enough to use a large display, capped so a line of prose on an
	   ultra-wide monitor never runs the whole desk. */
	max-width: 1840px;
	margin-inline: auto;
	min-height: 360px;
	padding: 12px clamp(12px, 1.8vw, 22px) 16px;
	overflow-x: clip;
	color: var(--st-ink);
	background:
		radial-gradient(circle at 18% -12%, rgba(104, 213, 255, .11), transparent 34rem),
		radial-gradient(circle at 92% 2%, rgba(117, 232, 192, .07), transparent 26rem),
		linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
		var(--st-bg);
	background-size: auto, auto, 16px 16px, 16px 16px, auto;
	font-family: var(--st-font);
	font-size: 13px;
	line-height: 1.5;
}
.studio-shell * { box-sizing: border-box; }
/* The legacy site renders headings inline and underlined; the Studio does not. */
.studio-shell h1, .studio-shell h2, .studio-shell h3, .studio-shell h4, .studio-shell h5, .studio-shell h6 { display: block; padding: 0; text-decoration: none; }
.studio-shell [hidden] { display: none !important; }
.studio-shell a { color: var(--st-cyan); }
.studio-shell :focus-visible { outline: 2px solid var(--st-gold); outline-offset: 2px; }
.studio-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.studio-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; shape-rendering: crispEdges; vertical-align: -.12em; }

/* Phase 12 private report workflow. Native dialog supplies focus trapping. */
.studio-report-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-sizing: border-box; padding: 1.1rem; color: #edf1fb; border: 1px solid #4b5f7d; border-radius: 12px; background: #141c2c; box-shadow: 0 26px 80px rgba(0, 0, 0, .6); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; }
.studio-report-dialog::backdrop { background: rgba(4, 6, 13, .74); }
.studio-report-dialog form { display: grid; gap: .85rem; }
.studio-report-dialog h3 { margin: 0; color: #fff; font-size: 18px; }
.studio-report-dialog p { margin: 0; color: #b8c2d6; font-size: 12px; line-height: 1.5; }
.studio-report-dialog label { display: grid; gap: .3rem; font-size: 12px; font-weight: 700; }
.studio-report-dialog select, .studio-report-dialog textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; color: #f5f8ff; border: 1px solid #4b5f7d; border-radius: 8px; background: #0b1220; font: 12px/1.45 inherit; font-family: inherit; }

/* ----------------------------------------------------------------- buttons */
.studio-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 36px; padding: 8px 14px;
	color: var(--st-cyan-ink) !important; background: var(--st-cyan);
	border: 1px solid #a5e6ff; border-radius: var(--st-radius-sm);
	box-shadow: 0 2px 0 #2b6d8c, 0 8px 18px rgba(104, 213, 255, .14);
	font: 700 12px/1.2 var(--st-font); text-decoration: none !important; white-space: nowrap; cursor: pointer;
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.studio-button:hover, .studio-button:focus-visible { transform: translateY(-1px); filter: brightness(1.06); }
.studio-button-small { min-height: 30px; padding: 5px 10px; font-size: 11px; box-shadow: 0 2px 0 #2b6d8c; }
.studio-button-secondary { color: #dbe8f6 !important; background: #1b2a40; border-color: #3a5271; box-shadow: 0 2px 0 #0d1522; }
.studio-button-play { color: var(--st-mint-ink) !important; background: var(--st-mint); border-color: #b1f4dc; box-shadow: 0 2px 0 #2c7a60, 0 8px 18px rgba(117, 232, 192, .14); }
.studio-button-danger { color: #2a0f14 !important; background: #ff9e9e; border-color: #ffd2d2; box-shadow: 0 2px 0 #7d2f36; }
.studio-button:disabled, .studio-editor button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .55; transform: none; }
.studio-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

/* ------------------------------------------------------------------ fields */
.studio-field { display: block; min-width: 0; margin: 0 0 9px; }
.studio-field > span { display: block; margin-bottom: 4px; color: var(--st-dim); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.studio-field input, .studio-field textarea, .studio-field select { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 36px; padding: 7px 10px; color: var(--st-ink); background: #0b1422; border: 1px solid var(--st-line-2); border-radius: var(--st-radius-sm); font: 12px/1.4 var(--st-font); }
.studio-field input::placeholder, .studio-field textarea::placeholder { color: #5f7390; }
.studio-field textarea { min-height: 74px; resize: vertical; }
.studio-field input:disabled, .studio-field textarea:disabled, .studio-field select:disabled { color: #7b8aa0; background: #0a0f19; }
.studio-field-group { margin: 0 0 16px; }
.studio-field-group h4 { margin: 0 0 8px; color: #cfd9e8; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* Beginner creation route: one decision, then the graphical builder. */
.studio-create-start { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr);
	gap: 14px; max-width: 1120px; margin: 0 auto; }
.studio-create-lead, .studio-create-account, .studio-create-definition, .studio-advanced-editor {
	border: 1px solid var(--studio-line); border-radius: var(--studio-radius);
	background: linear-gradient(155deg, var(--studio-panel-2), var(--studio-panel));
	box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.studio-create-lead { padding: clamp(20px, 3.2vw, 36px); }
.studio-create-lead h3 { margin: 3px 0 9px; color: #fff; font-size: clamp(25px, 3.3vw, 40px); line-height: 1.06; letter-spacing: -.035em; }
.studio-create-lead > p:not(.studio-kicker) { max-width: 650px; margin: 0; color: var(--studio-muted); font-size: 14px; line-height: 1.55; }
.studio-create-primary-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 20px; }
.studio-create-blank { font-size: 13px; font-weight: 900; }
.studio-create-continue { padding: 8px 3px; color: #aeeaff; font-size: 12px; font-weight: 700; text-underline-offset: 3px; }
.studio-create-account { align-self: stretch; padding: 20px; border-color: #5b4d24; background: linear-gradient(155deg, #2a2515, #171712); }
.studio-create-account[data-state='account'] { border-color: #275744; background: linear-gradient(155deg, #142a22, #101a17); }
.studio-create-account strong { display: block; margin-bottom: 8px; color: #ffe17c; font-size: 14px; }
.studio-create-account[data-state='account'] strong { color: #8de4bc; }
.studio-create-account p { margin: 0; color: #c8c3a9; font-size: 12px; line-height: 1.6; }
.studio-create-account[data-state='account'] p { color: #acd0c0; }
.studio-create-template-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.studio-create-template { position: relative; display: grid; min-width: 0; overflow: hidden; color: #fff;
	border: 1px solid #344b63; border-radius: var(--studio-radius); background: #0d1827;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28); text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.studio-create-template:hover { transform: translateY(-3px); border-color: var(--studio-accent); box-shadow: 0 16px 30px rgba(0, 0, 0, .4); }
.studio-create-template:focus-visible { outline: var(--studio-focus); outline-offset: 3px; }
.studio-create-template img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; background: #05080d; image-rendering: pixelated; }
.studio-create-template > span { display: grid; gap: 4px; padding: 12px; }
.studio-create-template strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.studio-create-template small { min-height: 28px; color: var(--studio-muted); font-size: 10px; line-height: 1.4; }
.studio-create-template b { color: var(--studio-accent); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.studio-create-definition { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 10px 18px; align-items: center; padding: 16px 18px; }
.studio-create-definition h4 { margin: 0; color: #fff; font-size: 14px; }
.studio-create-definition p { margin: 0; color: var(--studio-muted); font-size: 11px; line-height: 1.5; }
.studio-create-definition strong { color: #e9f6ff; }
.studio-create-advanced-link { color: #a9dff2; font-size: 10px; font-weight: 700; text-underline-offset: 3px; }
.studio-advanced-editor { max-width: 1120px; margin: 18px auto 0; padding: 16px; }
.studio-advanced-editor > header { margin-bottom: 12px; }
.studio-advanced-editor h3 { margin: 2px 0 5px; color: #fff; }
.studio-advanced-editor > header > p:last-child { margin: 0; color: var(--studio-muted); font-size: 11px; line-height: 1.5; }


/* ----------------------------------------------------------------- app bar */
.studio-appbar {
	position: relative; z-index: 30;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
	min-height: 54px; margin: 0 0 10px; padding: 6px 8px;
	border: 1px solid var(--st-line); border-radius: var(--st-radius);
	background: linear-gradient(180deg, #101b2d, #0c1524);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.studio-brand { display: inline-flex; gap: 8px; align-items: center; min-width: 0; padding: 2px 4px; color: #f7fbff; text-decoration: none !important; }
.studio-brand svg { width: 30px; height: 30px; flex: 0 0 30px; fill: #102b3f; stroke: var(--st-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.studio-brand span, .studio-brand strong, .studio-brand small { display: block; }
.studio-brand strong { color: #fff; font: 800 13px/1 var(--st-mono); letter-spacing: .08em; }
.studio-brand small { margin-top: 2px; color: #8fa6bc; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.studio-nav { display: flex; flex-wrap: nowrap; justify-content: center; gap: 2px; min-width: 0; margin: 0; padding: 0; }
.studio-appbar .studio-nav a { padding: 8px 9px; color: var(--st-muted); border-radius: 7px; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.studio-appbar .studio-nav a:hover, .studio-appbar .studio-nav a:focus-visible { color: #fff; background: #162638; }
.studio-appbar .studio-nav a[aria-current='page'] { color: #fff; background: #1b344d; box-shadow: inset 0 -2px 0 var(--st-cyan); }
.studio-appbar-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.studio-appbar-user { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: 190px; padding: 3px 9px 3px 3px; color: var(--st-ink); border: 1px solid var(--st-line); border-radius: 999px; background: rgba(255, 255, 255, .03); text-decoration: none !important; }
.studio-appbar-user:hover, .studio-appbar-user:focus-visible { border-color: var(--st-cyan); background: #142338; }
.studio-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; color: #061b25; border-radius: 50%; background: linear-gradient(135deg, var(--st-cyan), var(--st-mint)); font: 800 12px/1 var(--st-mono); }
.studio-appbar-user-copy { min-width: 0; }
.studio-appbar-user-copy strong { display: block; overflow: hidden; color: #fff; font-size: 11px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.studio-appbar-user-copy small { display: block; color: var(--st-dim); font-size: 9px; line-height: 1.1; text-transform: capitalize; }
.studio-appbar-login { padding: 0 12px; color: #dbe8f6; font-size: 11px; font-weight: 700; }
.studio-appbar-cta { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; color: var(--st-cyan-ink) !important; border: 1px solid #93e4ff; border-radius: var(--st-radius-sm); background: var(--st-cyan); box-shadow: 0 2px 0 #2b6d8c; font-size: 11px; font-weight: 900; text-decoration: none !important; white-space: nowrap; }
.studio-appbar-cta:hover, .studio-appbar-cta:focus-visible { background: #a8edff; }
.studio-nav-menu { display: none; position: relative; min-width: 0; }
.studio-nav-menu > summary { display: none; }
/* Links inside a hidden menu are display:none themselves, so nothing hidden is ever a focus target. */
.studio-nav-menu > .studio-nav a { display: none; }
.studio-appbar-dense .studio-nav a { padding: 8px 6px; font-size: 10.5px; }
.studio-appbar-dense .studio-appbar-user-copy { display: none; }
.studio-appbar-dense .studio-appbar-user { padding-right: 3px; }
.studio-nav-login { display: block; margin-top: 4px; padding: 10px 12px; color: var(--st-mint) !important; border-top: 1px solid var(--st-line); font-size: 12px; font-weight: 800; text-decoration: none; }

/* --------------------------------------------------------- page header */
.studio-masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 18px; margin: 0 0 12px; padding: 0 4px; }
.studio-masthead-copy { min-width: 0; }
.studio-kicker { margin: 0 0 3px; color: var(--st-cyan); font: 800 10px/1.3 var(--st-mono); letter-spacing: .16em; text-transform: uppercase; }
.studio-kicker-sep { margin: 0 6px; color: var(--st-dim); }
.studio-kicker-section { color: var(--st-mint); }
.studio-masthead-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.studio-masthead h2 { margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; letter-spacing: -.02em; }
.studio-masthead p { margin: 0; color: var(--st-muted); font-size: 12px; line-height: 1.45; }
.studio-masthead-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* ------------------------------------------------------- footer strip */
.studio-beta-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; padding: 8px 12px; color: var(--st-muted); border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); background: rgba(8, 14, 26, .7); font-size: 11px; line-height: 1.4; }
.studio-beta-badge { display: inline-block; flex: 0 0 auto; padding: 4px 7px 3px; color: var(--st-gold-ink); border: 1px solid #fff0a7; border-radius: 4px; background: var(--st-gold); box-shadow: 2px 2px 0 #7f6510; font: 800 9px/1 var(--st-mono); letter-spacing: .12em; }
.studio-beta-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; }
.studio-beta-links a { color: #bfe9ff; text-underline-offset: 3px; }
.studio-beta-session { color: var(--st-dim); }
.studio-beta-session strong { color: var(--st-ink); }
.studio-session, .studio-foundation-note { margin: 0; color: var(--st-dim); font-size: 11px; }

/* ------------------------------------------------------------ home hub */
.studio-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); gap: 14px 22px; margin: 0 0 12px; padding: 18px 20px; overflow: hidden; border: 1px solid var(--st-line-2); border-radius: 14px; background: linear-gradient(120deg, rgba(104, 213, 255, .14), transparent 46%), linear-gradient(160deg, #142640, #0f1a2c 60%, #101d31); box-shadow: 0 16px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05); }
.studio-hero::before { content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border: 26px solid rgba(117, 232, 192, .07); border-radius: 50%; pointer-events: none; }
.studio-hero::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 6px; background: repeating-linear-gradient(90deg, #2c7a60 0 12px, #75e8c0 12px 16px, #3b9c78 16px 28px); opacity: .55; pointer-events: none; }
.studio-hero-copy { position: relative; z-index: 1; min-width: 0; }
.studio-hero h3 { margin: 6px 0 8px; color: #fff; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.studio-hero-copy > p { max-width: 54ch; margin: 0; color: var(--st-muted); font-size: 13px; line-height: 1.55; }
.studio-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.studio-hero-steps { position: relative; z-index: 1; display: grid; gap: 9px; align-self: center; margin: 0; padding: 12px 14px; list-style: none; border: 1px solid var(--st-line); border-radius: 12px; background: rgba(8, 14, 26, .58); }
.studio-hero-steps li { display: flex; gap: 10px; align-items: flex-start; }
.studio-hero-steps li > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; color: var(--st-gold-ink); border-radius: 6px; background: var(--st-gold); box-shadow: 1px 1px 0 #7f6510; font: 800 11px/1 var(--st-mono); }
.studio-hero-steps strong { display: block; color: #fff; font-size: 12px; }
.studio-hero-steps small { display: block; color: var(--st-muted); font-size: 11px; line-height: 1.4; }

/* Fill the row the shell is given rather than a fixed count. */
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.studio-home-grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; }
.studio-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 72px; padding: 9px 11px; color: var(--st-ink); border: 1px solid var(--st-line); border-radius: 12px; background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface)); text-decoration: none !important; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.studio-tile:hover, .studio-tile:focus-visible { transform: translateY(-2px); border-color: var(--st-cyan); box-shadow: 0 12px 26px rgba(0, 0, 0, .32); }
.studio-tile-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--st-cyan); border-radius: 10px; background: rgba(104, 213, 255, .12); }
.studio-tile-icon .studio-icon { width: 20px; height: 20px; }
.studio-tile-mint .studio-tile-icon { color: var(--st-mint); background: rgba(117, 232, 192, .13); }
.studio-tile-gold .studio-tile-icon { color: var(--st-gold); background: rgba(255, 209, 102, .13); }
.studio-tile-copy { min-width: 0; }
.studio-tile-copy strong { display: block; color: #fff; font-size: 13px; line-height: 1.2; }
.studio-tile-copy small { display: block; margin-top: 2px; color: var(--st-muted); font-size: 11px; line-height: 1.35; }
.studio-tile-arrow { color: var(--st-dim); transition: color .14s ease, transform .14s ease; }
.studio-tile-arrow .studio-icon { width: 14px; height: 14px; }
.studio-tile:hover .studio-tile-arrow { color: var(--st-cyan); transform: translateX(2px); }

/* --------------------------------------------------------- cards + panels */
.studio-card, .studio-placeholder { padding: 14px 16px; border: 1px solid var(--st-line); border-radius: 12px; background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface)); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
.studio-card h3, .studio-card h4, .studio-placeholder h3 { margin: 0 0 6px; color: #fff; font-size: 14px; line-height: 1.25; }
.studio-card p, .studio-placeholder p { margin: 0; color: var(--st-muted); font-size: 12px; line-height: 1.5; }
.studio-card > .studio-button { margin-top: 12px; }
.studio-card-icon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.studio-card-icon > .studio-icon { width: 22px; height: 22px; margin-top: 1px; color: var(--st-cyan); }
.studio-placeholder { min-height: 190px; text-align: center; display: grid; align-content: center; justify-items: center; }
.studio-editor-placeholder { min-height: 320px; border-style: dashed; }
.studio-player-placeholder { aspect-ratio: 16 / 7; min-height: 240px; background: #080711; }
.studio-pixel-icon { margin-bottom: 12px; color: var(--st-gold); font-size: 42px; text-shadow: 3px 3px 0 #7f6510; }
.studio-denied { min-height: 300px; }
.studio-denied-card { display: flex; gap: 18px; align-items: flex-start; max-width: 620px; margin: 24px auto 30px; padding: 20px 22px; border: 1px solid var(--st-line-2); border-radius: 14px; background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface)); }
.studio-denied-card h2 { margin: 2px 0 8px; color: #fff; font-size: 24px; }
.studio-denied-card p { margin: 0 0 6px; color: var(--st-muted); }

.studio-panel { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--st-line); border-radius: 12px; background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface)); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.studio-panel h3 { margin: 0 0 6px; color: #fff; font-size: 15px; }
.studio-panel-note { margin: 0 0 10px; color: var(--st-muted); font-size: 11px; line-height: 1.5; }
.studio-empty { margin: 0; color: var(--st-muted); font-size: 12px; }


.studio-table-scroll { max-width: 100%; overflow-x: auto; }
.studio-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.studio-table th, .studio-table td { padding: 7px 9px; border-bottom: 1px solid var(--st-line); text-align: left; vertical-align: top; }
.studio-table th { color: #cfd9e8; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.studio-table td { color: var(--st-muted); }
.studio-table code { color: var(--st-cyan); font-size: 11px; }

.studio-list { margin: 0; padding-left: 18px; color: var(--st-muted); font-size: 12px; line-height: 1.7; }
.studio-definition { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 4px 12px; margin: 0 0 12px; font-size: 12px; }
.studio-definition dt { color: #cfd9e8; }
.studio-definition dd { margin: 0; color: var(--st-muted); }
.studio-steps { margin: 0 0 14px; padding-left: 18px; color: var(--st-muted); }
.studio-steps li { margin-bottom: 6px; line-height: 1.45; }
.studio-steps strong { color: #fff; }

/* ---------------------------------------------------------- help page */
.studio-limitations-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 2px 0 10px; }
.studio-limitations-head h3 { margin: 0 0 3px; color: #fff; font-size: 16px; }
.studio-limitations-head p { max-width: 80ch; margin: 0; color: var(--st-muted); font-size: 12px; }
.studio-limitations .studio-grid + .studio-limitations-head { margin-top: 18px; }

/* ------------------------------------------------------------ feedback */
.studio-feedback-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .8fr); gap: 12px; align-items: start; }
.studio-feedback-form, .studio-feedback-aside { padding: 16px 18px; border: 1px solid var(--st-line); border-radius: 12px; background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface)); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
.studio-feedback-form header h3 { margin: 0 0 4px; color: #fff; font-size: 16px; }
.studio-feedback-form header p { margin: 0 0 12px; color: var(--st-muted); font-size: 12px; line-height: 1.5; }
.studio-feedback-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.studio-feedback textarea { min-height: 150px; resize: vertical; }
.studio-feedback-privacy { margin: 2px 0 10px; color: var(--st-gold); font-size: 11px; }
.studio-feedback-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.studio-feedback [data-beta-feedback-state] { margin: 0; color: var(--st-muted); font-size: 11px; }
.studio-feedback [data-beta-feedback-state][data-state='error'] { color: var(--st-rose); }
.studio-feedback-aside { font-size: 12px; color: var(--st-muted); }
.studio-feedback-aside h4 { margin: 0 0 8px; color: var(--st-cyan); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.studio-feedback-aside p { margin: 0 0 12px; line-height: 1.5; }
.studio-feedback-tip { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 10px; color: #bff5dc; border-radius: 8px; background: rgba(117, 232, 192, .1); }
.studio-feedback-tip .studio-icon { color: var(--st-mint); }

/* ------------------------------------------------- games page extras */
.studio-page-jumps { display: inline-flex; gap: 4px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--st-line); border-radius: 10px; background: rgba(8, 14, 26, .7); }
.studio-page-jumps a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; color: var(--st-muted); border-radius: 7px; font-size: 12px; font-weight: 700; text-decoration: none; }
.studio-page-jumps a:hover, .studio-page-jumps a:focus-visible { color: #fff; background: #17263a; }
.studio-games-template-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; padding: 12px 16px; border: 1px solid var(--st-line-2); border-radius: 12px; background: linear-gradient(120deg, rgba(117, 232, 192, .12), transparent 55%), var(--st-surface); }
.studio-games-template-heading h3 { margin: 1px 0 2px; color: #fff; font-size: 18px; }
.studio-games-template-heading p { margin: 0; color: var(--st-muted); font-size: 12px; }

/* ------------------------------------------------------- admin shell */
.studio-subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--st-line); border-radius: 10px; background: rgba(8, 14, 26, .7); }
.studio-subnav a { padding: 8px 13px; color: var(--st-muted); border-radius: 7px; font-size: 12px; font-weight: 700; text-decoration: none; }
.studio-subnav a:hover, .studio-subnav a:focus-visible { color: #fff; background: #17263a; }
.studio-subnav a[aria-current='page'] { color: var(--st-cyan-ink); background: var(--st-cyan); }
.studio-button-small.studio-button-secondary { box-shadow: 0 2px 0 #0d1522; }

.studio-admin-filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)); gap: 10px; align-items: end; margin: 10px 0 14px; padding: 12px; border: 1px solid var(--st-line); border-radius: 10px; background: rgba(8, 14, 26, .55); }
.studio-admin-filters .studio-field { margin: 0; }
.studio-admin-search { grid-column: span 2; }
.studio-admin-check { display: flex; align-items: center; gap: 7px; min-height: 36px; color: #d8dbea; font-size: 12px; }
.studio-admin-check input { width: auto; min-height: auto; }
.studio-admin-filter-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 36px; grid-column: span 2; }
.studio-list-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.studio-list-chips li { padding: 5px 9px; color: #cde9ff; border: 1px solid #3d5970; border-radius: 999px; background: #102432; font: 600 11px/1.2 var(--st-mono); }
.studio-admin-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.studio-admin-quick-link { display: grid; gap: 4px; min-height: 66px; padding: 12px; color: #eef3ff; border: 1px solid var(--st-line); border-radius: 10px; background: rgba(8, 14, 26, .5); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.studio-admin-quick-link:hover, .studio-admin-quick-link:focus-visible { border-color: var(--st-cyan); background: #172439; transform: translateY(-1px); }
.studio-admin-quick-link strong { color: #fff; font-size: 13px; }
.studio-admin-quick-link span { color: var(--st-muted); font-size: 11px; line-height: 1.45; }
.studio-admin-quick-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
.studio-admin-quick-filters span { color: var(--st-dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.studio-admin-quick-filters a { padding: 5px 9px; color: #ccefff; border: 1px solid #3d5970; border-radius: 999px; background: #102432; font-size: 11px; text-decoration: none; }
.studio-admin-quick-filters a:hover, .studio-admin-quick-filters a:focus-visible { color: #07151b; border-color: var(--st-cyan); background: var(--st-cyan); }
.studio-admin-breadcrumbs { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; color: var(--st-dim); font-size: 11px; }
.studio-admin-breadcrumbs a { color: #bdeeff; }
.studio-admin-resource-tabs { display: flex; gap: 4px; margin: 0 0 10px; padding: 4px; border: 1px solid var(--st-line); border-radius: 10px; background: rgba(8, 14, 26, .7); }
.studio-admin-resource-tabs a { padding: 7px 12px; color: var(--st-muted); border-radius: 7px; font-size: 12px; text-decoration: none; }
.studio-admin-resource-tabs a[aria-current='page'] { color: var(--st-cyan-ink); background: var(--st-cyan); font-weight: 800; }
.studio-admin-edit-form { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(150px, .35fr); gap: 12px; align-items: end; }
.studio-admin-edit-form .studio-field { margin: 0; }
.studio-admin-edit-form input, .studio-admin-edit-form textarea, .studio-admin-edit-form select { box-sizing: border-box; width: 100%; }
.studio-admin-edit-form textarea { resize: vertical; }
.studio-admin-edit-description { grid-column: 1 / -1; }
.studio-admin-edit-form > .studio-actions { margin: 0; }

.studio-admin-table thead th { position: sticky; top: 0; z-index: 2; background: #151f31; }
.studio-admin-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }
.studio-admin-table tbody tr:hover { background: rgba(104, 213, 255, .06); }
.studio-admin-table td { line-height: 1.45; }
.studio-admin-status { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid #4a4f68; border-radius: 999px; color: #d9dbea; background: #272b3e; font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; }
.studio-admin-status-live, .studio-admin-status-approved, .studio-admin-status-published { color: #a8f1d4; border-color: #347b68; background: #12362e; }
.studio-admin-status-public, .studio-admin-status-default-asset, .studio-admin-status-default-audio, .studio-admin-status-default-template { color: #bdeeff; border-color: #386d84; background: #142f3c; }
.studio-admin-status-unreviewed, .studio-admin-status-draft, .studio-admin-status-triaged { color: #ffe7a3; border-color: #806d35; background: #3b3216; }
.studio-admin-status-restricted, .studio-admin-status-rejected, .studio-admin-status-archived, .studio-admin-status-redacted { color: #ffc0c0; border-color: #8b464d; background: #401f25; }
.studio-admin-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-top: 12px; color: var(--st-muted); font-size: 11px; }
.studio-admin-pager > div { display: flex; gap: 7px; }
.studio-admin-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.studio-admin-summary > span { padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 8px; color: var(--st-muted); background: rgba(8, 14, 26, .5); font-size: 11px; }
.studio-admin-summary strong { color: #fff; font-size: 13px; }
.studio-mine-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.studio-mine-intro > .studio-actions { margin: 0; }
.studio-editor-note { margin: 8px 0 0; color: var(--st-gold); font-size: 12px; line-height: 1.5; }
.studio-editor-note[data-tone='success'] { color: #9cf0cf; }
.studio-editor-note[data-tone='error'] { color: #ffb3b3; }

.studio-admin-dialog { width: min(520px, calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; color: #edf1fb; border: 1px solid #59617d; border-radius: 12px; background: #171b2a; box-shadow: 0 26px 80px rgba(0, 0, 0, .65); }
.studio-admin-dialog::backdrop { background: rgba(4, 6, 13, .78); backdrop-filter: blur(3px); }
.studio-admin-dialog form { display: grid; gap: 13px; padding: 22px; }
.studio-admin-dialog h3 { margin: 0; color: #fff; font-size: 20px; }
.studio-admin-dialog p { margin: 0; color: #b8bfd0; line-height: 1.5; }
.studio-admin-dialog label span { display: block; margin-bottom: 6px; color: #d9deeb; font-size: 12px; font-weight: 700; }
.studio-admin-dialog textarea { box-sizing: border-box; width: 100%; min-height: 120px; padding: 10px; resize: vertical; color: #f7f8fc; border: 1px solid #4b536d; border-radius: 7px; background: #0d111c; font: 13px/1.5 Verdana, Arial, sans-serif; }
.studio-admin-dialog textarea:focus { outline: 2px solid #7ee7ff; outline-offset: 2px; }
.studio-admin-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------------- editor */
.studio-editor { border: 1px solid var(--st-line); border-radius: 12px; background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface)); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.studio-editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--st-line); border-radius: 12px 12px 0 0; background: rgba(8, 14, 26, .5); }
.studio-editor-bar h3 { margin: 0 0 2px; color: var(--st-cyan); font: 800 10px/1.3 var(--st-mono); letter-spacing: .14em; text-transform: uppercase; }
.studio-editor-status { margin: 0; color: var(--st-muted); font-size: 12px; line-height: 1.45; }
.studio-editor-status[data-tone='error'] { color: #ffb3b3; }
.studio-editor-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; }
.studio-editor-inspector { min-width: 0; padding: 14px; }
.studio-editor-side { min-width: 0; padding: 14px; border-left: 1px solid var(--st-line); }
.studio-editor-panel { margin: 0 0 14px; }
.studio-editor-panel h4 { margin: 0 0 6px; color: #cfd9e8; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.studio-editor-panel p { margin: 0 0 8px; color: var(--st-muted); font-size: 12px; line-height: 1.5; }
.studio-editor-admin { padding-top: 12px; border-top: 1px dashed var(--st-line-2); }
.studio-editor-noscript { margin: 0; padding: 12px 14px; color: var(--st-muted); font-size: 12px; }
.studio-editor-phase7 { max-width: none; }
.studio-editor-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.studio-editor-state span { padding: 5px 8px; color: #cfd9e8; border: 1px solid var(--st-line-2); border-radius: 999px; background: #0b1422; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.studio-editor-state [data-state='pending'], .studio-editor-state [data-state='saving'] { color: var(--st-gold-ink); border-color: #fff0a7; background: var(--st-gold); }
.studio-editor-state [data-state='failed'], .studio-editor-state [data-state='conflict'] { color: #2a0f14; border-color: #ffd2d2; background: #ff9e9e; }
.studio-editor-state [data-state='offline-recoverable'] { color: #17120a; border-color: #ffd395; background: #ffb95f; }
.studio-editor-state [data-state='saved'] { color: #a8f1d4; border-color: #347b68; background: #12362e; }
.studio-editor-recovery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; color: #fff1bd; border-bottom: 1px solid #705e25; background: #2d2714; font-size: 12px; }
.studio-editor-recovery[hidden] { display: none; }
.studio-editor-recovery button, .studio-library-pagination button, .studio-library-card button, .studio-editor-history button, .studio-list button {
	padding: 5px 9px; color: #eefbff; border: 1px solid #4c7390; border-radius: 6px; background: #173247; font: bold 11px/1.2 var(--st-font); cursor: pointer;
}
.studio-editor-recovery button:focus, .studio-library-pagination button:focus, .studio-library-card button:focus, .studio-editor-history button:focus, .studio-list button:focus { outline: 2px solid var(--st-gold); outline-offset: 2px; }
.studio-editor-layout { display: grid; grid-template-columns: minmax(220px, 260px) minmax(300px, 1fr) minmax(220px, 260px); min-height: 460px; }
.studio-editor-library, .studio-editor-workspace, .studio-editor-phase7 .studio-editor-side { min-width: 0; padding: 12px; }
.studio-editor-library { border-right: 1px solid var(--st-line); background: rgba(8, 14, 26, .4); }
.studio-editor-phase7 .studio-editor-side { border-left: 1px solid var(--st-line); }
.studio-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.studio-library-heading h4, .studio-editor-history h4 { margin: 0; color: #fff; font-size: 13px; }
.studio-editor-library select { box-sizing: border-box; width: 100%; max-width: 100%; }
.studio-library-state { min-height: 28px; margin: 4px 0 8px; color: var(--st-muted); font-size: 11px; line-height: 1.45; }
.studio-library-results { display: grid; gap: 7px; max-height: 470px; overflow-y: auto; overscroll-behavior: contain; }
.studio-library-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 7px; border: 1px solid var(--st-line); border-radius: 8px; background: #0e1828; }
.studio-library-card img { display: block; width: 64px; height: 48px; object-fit: contain; color: #9d9aae; border: 1px solid var(--st-line-2); border-radius: 5px; background: repeating-linear-gradient(45deg, #17233a, #17233a 6px, #1d2b44 6px, #1d2b44 12px); font-size: 9px; }
.studio-library-card img[data-state='failed'] { border-color: #9b5258; cursor: pointer; }
.studio-library-card div { min-width: 0; }
.studio-library-card strong, .studio-library-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-library-card strong { color: var(--st-ink); font-size: 11px; }
.studio-library-card span { margin-top: 3px; color: var(--st-muted); font-size: 9px; }
.studio-library-card[data-type='game-template'] { border-color: #356f68; background: linear-gradient(135deg, #102520, #121a29); }
.studio-library-card .studio-library-use-template { color: #07221b; border-color: #72e1bd; background: #72e1bd; font-weight: 800; }
.studio-library-card .studio-library-use-template:hover { border-color: #a7f2da; background: #a7f2da; }
.studio-library-card-error { grid-template-columns: 1fr auto; border-color: #7d3b43; }
.studio-library-pagination { display: flex; justify-content: flex-end; gap: 6px; min-height: 28px; margin-top: 9px; }
.studio-library-pagination [hidden] { display: none; }
.studio-editor-workspace .studio-editor-inspector { padding: 0; }
.studio-editor-history { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--st-line); }
.studio-editor-history .studio-list { max-height: 190px; overflow-y: auto; padding-left: 18px; }
.studio-editor-history li { margin-bottom: 7px; }
.studio-list img, .studio-list video { display: block; max-width: 100%; margin-top: 7px; border: 1px solid var(--st-line-2); background: #090812; }
.studio-list audio { display: block; width: 100%; max-width: 230px; margin-top: 7px; }

.studio-readonly-fields { display: grid; grid-template-columns: minmax(112px, .65fr) minmax(0, 1fr); gap: 5px 10px; margin: 0; padding: 10px; border: 1px solid var(--st-line); border-radius: 8px; background: rgba(7, 13, 23, .48); font-size: 10px; line-height: 1.45; }
.studio-readonly-fields dt, .studio-readonly-fields dd { min-width: 0; margin: 0; }
.studio-readonly-fields dt { color: var(--st-dim); font-weight: 700; }
.studio-readonly-fields dd { overflow-wrap: anywhere; color: #cbd8e8; font-family: var(--st-mono); }
.studio-attribute-intro { margin: -2px 0 10px !important; color: var(--st-muted) !important; }
.studio-attribute-group { min-width: 0; margin: 0 0 10px; padding: 9px 9px 3px; border: 1px solid #33465d; border-radius: 8px; background: rgba(7, 14, 25, .52); }
.studio-attribute-group .studio-attribute-group { margin-left: 7px; border-color: #293d53; background: rgba(12, 23, 38, .62); }
.studio-attribute-group legend { max-width: 100%; padding: 0 5px; color: #dbe8f6; font-size: 11px; font-weight: 800; }
.studio-attribute-group legend span, .studio-attribute-group legend small { display: block; overflow-wrap: anywhere; }
.studio-attribute-group legend small { margin-top: 2px; color: var(--st-muted); font-size: 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* The JSON path is developer reference, not the label. It stays in the page
   for anyone who needs it, but it no longer competes with the field's own
   name for attention. */
.studio-attribute-path { display: block; margin: 0 0 5px; overflow-wrap: anywhere; color: #5c7d92; font: 9px/1.35 var(--st-mono); opacity: .5; transition: opacity .14s ease, color .14s ease; }
.studio-attribute-field:hover > .studio-attribute-path,
.studio-attribute-field:focus-within > .studio-attribute-path,
.studio-attribute-group:focus-within > .studio-attribute-path { color: #77cde9; opacity: 1; }
.studio-attribute-field > .studio-attribute-path { margin-top: -2px; text-transform: none; letter-spacing: 0; }
/* Read-only provenance folds away between the two editable sections. */
.studio-system-facts > summary { padding: 2px 0 6px; color: #dbe8f6; font: 800 11px/1.3 var(--st-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; }
.studio-system-facts > summary::-webkit-details-marker { display: none; }
.studio-system-facts > summary::after { content: ' +'; color: var(--st-cyan); }
.studio-system-facts[open] > summary::after { content: ' \2212'; }
/* Adding an attribute is an inline row, not two blocking prompts. */
.studio-attribute-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; margin: 8px 0 2px; padding: 10px; border: 1px solid var(--st-line-2); border-radius: 9px; background: rgba(10, 20, 34, .7); }
.studio-attribute-new .studio-actions { grid-column: 1 / -1; display: flex; gap: 6px; margin: 0; }
.studio-attribute-empty { margin: 0 0 8px; color: var(--st-muted); font-size: 10px; }
.studio-attribute-collapsed .studio-json-editor { min-height: 120px; max-height: 360px; }
.studio-attribute-actions { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 8px; }
.studio-attribute-actions .studio-button { min-height: 28px; padding: 4px 8px; font-size: 8px; }
.studio-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.studio-section-heading h4 { margin: 0 !important; }
.studio-actions-compact { margin: 0; justify-content: flex-end; }
.studio-game-level-editor { min-width: 0; margin: 0 0 14px; padding: 10px; border: 1px solid var(--st-line-2); border-radius: 10px; background: rgba(7, 14, 25, .62); }
.studio-game-level-editor > .studio-attribute-editor { margin-bottom: 0; }
.studio-json-value { min-height: 38px !important; font-family: var(--st-mono) !important; }
.studio-raw-json { margin-top: 8px; padding: 8px 10px; border: 1px dashed #40536a; border-radius: 8px; background: #0a1422; }
.studio-raw-json summary { color: #9edfff; font-size: 10px; font-weight: 800; cursor: pointer; }
.studio-raw-json summary:focus { outline: 2px solid var(--st-gold); outline-offset: 3px; }
.studio-raw-json p { margin: 8px 0 !important; color: var(--st-muted) !important; font-size: 10px !important; }
.studio-raw-json .studio-json-editor { min-height: 180px; max-height: 520px; }

.studio-media-entry { margin-bottom: 10px; overflow-wrap: anywhere; }
.studio-media-actions { margin-top: 5px; }
.studio-media-upload { position: relative; display: inline-flex; align-items: center; overflow: hidden; cursor: pointer; }
.studio-media-upload input[type='file'] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.studio-media-upload:focus-within { outline: 2px solid var(--st-gold); outline-offset: 2px; }
.studio-media-panel[aria-busy] .studio-media-upload { cursor: wait; filter: grayscale(.65); opacity: .58; }
.studio-media-additional { margin-top: 4px; }
.studio-media-status { min-height: 18px; margin-top: 8px !important; }
.studio-media-status:empty { min-height: 0; margin: 0 !important; }
.studio-media-status[data-tone='error'] { color: #ffb3b3; }
.studio-media-panel[aria-busy] { opacity: .82; }
.studio-media-pending-preview { display: block; width: 100%; max-height: 220px; margin: 8px 0; object-fit: contain; border: 1px solid #45647d; border-radius: 6px; background: #090812; image-rendering: pixelated; }

/* Discovery mode gives the full editor surface to the catalog until a project is opened. */
.studio-editor-catalog-mode { border-color: #36536b; background: linear-gradient(160deg, #1a2740, #111a2b 58%, #131c2f); }
.studio-editor-catalog-mode .studio-editor-bar { padding: 12px 16px; background: linear-gradient(90deg, rgba(117, 232, 192, .08), rgba(104, 213, 255, .035) 58%, transparent); }
.studio-editor-catalog-mode .studio-editor-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.studio-editor-catalog-mode .studio-editor-workspace,
.studio-editor-catalog-mode .studio-editor-side { display: none; }
.studio-editor-catalog-mode .studio-editor-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px 12px; padding: 14px 16px 16px; border-right: 0; background: transparent; }
.studio-editor-catalog-mode .studio-library-heading,
.studio-editor-catalog-mode .studio-library-state,
.studio-editor-catalog-mode .studio-library-results,
.studio-editor-catalog-mode .studio-library-pagination { grid-column: 1 / -1; }
.studio-editor-catalog-mode .studio-library-heading { margin-bottom: 2px; padding-bottom: 11px; border-bottom: 1px solid var(--st-line); }
.studio-editor-catalog-mode .studio-library-heading h4 { font-size: 15px; letter-spacing: .01em; }
.studio-editor-catalog-mode .studio-actions { margin: 0; }
.studio-editor-catalog-mode .studio-field { margin: 0; }
.studio-editor-catalog-mode .studio-library-state { min-height: 20px; margin: 1px 0 0; }
.studio-editor-catalog-mode .studio-library-results { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 11px; max-height: none; overflow: visible; }
.studio-editor-catalog-mode .studio-library-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(44px, 1fr) auto; gap: 8px; align-items: stretch; min-height: 196px; padding: 8px; overflow: hidden; border-color: #33475d; border-radius: 10px; background: linear-gradient(160deg, #172434, #101724); box-shadow: 0 8px 20px rgba(0, 0, 0, .24); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.studio-editor-catalog-mode .studio-library-card:hover { transform: translateY(-2px); border-color: #527da0; box-shadow: 0 12px 24px rgba(0, 0, 0, .3); }
.studio-editor-catalog-mode .studio-library-card img { width: 100%; height: 104px; border: 0; border-radius: 7px; object-fit: cover; background: #0c1420; }
.studio-editor-catalog-mode .studio-library-card strong { overflow: visible; color: #fff; font-size: 13px; line-height: 1.3; text-overflow: clip; white-space: normal; }
.studio-editor-catalog-mode .studio-library-card span { margin-top: 4px; color: #9eb0c7; font-size: 9px; letter-spacing: .035em; text-transform: uppercase; }
.studio-editor-catalog-mode .studio-library-card > button { width: 100%; min-height: 32px; border-radius: 6px; }
.studio-editor-catalog-mode .studio-library-card[data-type='game-template'] { border-color: #3f796e; background: linear-gradient(160deg, #17352e, #101c20); }
.studio-editor-catalog-mode .studio-library-pagination { justify-content: center; margin-top: 3px; padding-top: 11px; border-top: 1px solid var(--st-line); }

/* Phase 9 standalone-level editing and immutable publication lifecycle. */
.studio-level-objects { display: grid; gap: 10px; }
.studio-level-object { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--st-line-2); border-radius: 8px; background: #0b1422; }
.studio-level-object legend { max-width: 100%; padding: 0 5px; overflow-wrap: anywhere; color: var(--st-cyan); font: bold 11px/1.3 var(--st-font); }
.studio-level-object .studio-field { display: inline-block; box-sizing: border-box; width: calc(50% - 5px); padding-right: 5px; vertical-align: top; }
.studio-level-layout { position: relative; width: 100%; min-height: 180px; overflow: hidden; border: 1px solid #4a4668; background: repeating-linear-gradient(0deg, transparent, transparent 15px, #ffffff0b 15px, #ffffff0b 16px), repeating-linear-gradient(90deg, #121a33, #121a33 15px, #ffffff0b 15px, #ffffff0b 16px); }
.studio-level-marker { position: absolute; display: grid; width: 20px; height: 20px; translate: -50% -50%; place-items: center; color: #0b1124; border: 1px solid #e8fbff; background: var(--st-cyan); font: bold 10px/1 monospace; }
.studio-level-spawn { color: #281d00; border-color: #fff0a7; background: var(--st-gold); }
.studio-level-lifecycle { padding-top: 12px; border-top: 1px dashed var(--st-line-2); overflow-wrap: anywhere; }
.studio-game-lifecycle { padding-top: 12px; border-top: 1px dashed var(--st-line-2); overflow-wrap: anywhere; }
.studio-runtime-ready { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0; padding: 7px 10px; color: #a9f3d6; border: 1px solid rgba(68, 213, 160, .34); border-radius: 999px; background: rgba(24, 122, 92, .14); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.studio-runtime-ready::before { content: '✓'; color: #66e0b5; }
.studio-json-editor { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 150px; resize: vertical; tab-size: 2; font: 11px/1.45 Consolas, "Courier New", monospace; overflow-wrap: normal; white-space: pre; }
.studio-verification { max-width: 100%; margin-top: 12px; overflow: hidden; }
.studio-verification canvas { display: block; width: 100%; max-width: 384px; height: auto; margin: 8px auto; border: 2px solid #4c7390; background: #090812; image-rendering: pixelated; }
.studio-verification-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.studio-verification-status { color: var(--st-muted); font-size: 11px; line-height: 1.45; }

/* ------------------------------------------------------------- Create page
   The visual builder keeps its own chrome and its own 1280px working width;
   the Studio only supplies the app bar, the page header, the background, and
   the rollout strip, so Create reads as the same product as every other page. */
.studio-shell-maker { max-width: 1680px; }
.studio-shell-maker .studio-masthead { margin-bottom: 10px; }
.studio-maker-frame { min-width: 0; margin: 0 0 4px; }
.studio-maker-frame #pm-root { max-width: none; }

/* One primary action on an item page; the version table is a disclosure. */
.studio-version-history > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 11px; color: #dbe8f6; border: 1px solid var(--st-line-2); border-radius: 8px; background: #12233a; font-size: 11px; font-weight: 800; list-style: none; cursor: pointer; }
.studio-version-history > summary::-webkit-details-marker { display: none; }
.studio-version-history > summary::after { content: '+'; color: var(--st-cyan); }
.studio-version-history[open] > summary::after { content: '\2212'; }
.studio-version-history > summary:hover { border-color: var(--st-cyan); }
.studio-version-history > .studio-table-scroll { margin-top: 10px; }

/* --------------------------------------------- legacy content row claims */
/* Studio fills the legacy content row while preserving the outer Vizzed
   container width. Border-box sizing keeps borders and padding inside that
   row, including the comments below the app. */

html.studio-assets-active #content-left,
html.studio-assets-active #content-right,
html.studio-assets-active #primary,
html.studio-assets-active #secondary { display: none !important; }
html.studio-assets-active #content,
html.studio-assets-active #content-row,
html.studio-assets-active #content-center,
html.studio-assets-active .content-flex,
html.studio-assets-active .box1,
html.studio-assets-active .contentbox1 { box-sizing: border-box; width: 100% !important; max-width: none !important; min-width: 0; }
html.studio-assets-active #content-center,
html.studio-assets-active .content-flex,
html.studio-assets-active .box1,
html.studio-assets-active .contentbox1 { display: block !important; }

/* Administration is a working surface, so it also owns the full legacy
   content row instead of squeezing data tables between obsolete side rails. */
html.studio-admin-active #content-left,
html.studio-admin-active #content-right,
html.studio-admin-active #primary,
html.studio-admin-active #secondary { display: none !important; }
html.studio-admin-active #content,
html.studio-admin-active #content-row,
html.studio-admin-active #content-center,
html.studio-admin-active .content-flex,
html.studio-admin-active .box1,
html.studio-admin-active .contentbox1 { box-sizing: border-box; width: 100% !important; max-width: none !important; min-width: 0; }
html.studio-admin-active #content-center,
html.studio-admin-active .content-flex,
html.studio-admin-active .box1,
html.studio-admin-active .contentbox1 { display: block !important; }

/* The same claim for every other Studio page, without waiting for a script. */
body:has(.studio-shell) #content-left,
body:has(.studio-shell) #content-right,
body:has(.studio-shell) #primary,
body:has(.studio-shell) #secondary { display: none !important; }
body:has(.studio-shell) #content,
body:has(.studio-shell) #content-row,
body:has(.studio-shell) #content-center,
body:has(.studio-shell) .content-flex,
body:has(.studio-shell) .box1,
body:has(.studio-shell) .contentbox1 { box-sizing: border-box; width: 100% !important; max-width: none !important; min-width: 0; }
body:has(.studio-shell) #content,
body:has(.studio-shell) #content-row,
body:has(.studio-shell) #content-center,
body:has(.studio-shell) .content-flex,
body:has(.studio-shell) .box1,
body:has(.studio-shell) .contentbox1 { display: block !important; }

/* The legacy box header repeats the page title the Studio masthead already
   states, one line below it. Reclaim that row for content. */
body:has(.studio-shell) .box1 > .headerbox1 { display: none !important; }

.studio-shell[data-studio-page='admin'],
.studio-shell[data-studio-page^='admin-'],
.studio-shell[data-studio-page='my-content'] { width: 100%; max-width: none; }

/* Responsive layouts follow the available content column, including on
   wide monitors where Vizzed still uses its normal page width. */
.contentbox1:has(> .studio-shell) { container: studio-page / inline-size; }

/* -------------------------------------------------------- responsive */
@media (max-width: 1100px) {
	.studio-appbar-user-copy { display: none; }
	.studio-appbar-user { padding-right: 3px; }
}


@media (max-width: 900px) {
	.studio-appbar { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
	.studio-appbar > .studio-nav-desktop, .studio-appbar > .studio-nav-desktop a { display: none; }
	.studio-appbar-end { grid-column: 2; }
	.studio-nav-menu { position: static; display: block; }
	.studio-nav-menu[open] > .studio-nav a { display: block; }
	.studio-nav-menu > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 11px; color: #e8f4ff; border: 1px solid #39526b; border-radius: 8px; background: #132438; cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
	.studio-nav-menu > summary::-webkit-details-marker { display: none; }
	.studio-nav-menu-icon { display: block; width: 14px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
	.studio-nav-menu:not([open]) > .studio-nav { display: none !important; }
	.studio-nav-menu[open] > .studio-nav { position: absolute; top: calc(100% + 8px); right: 6px; left: 6px; z-index: 40; display: grid !important; width: auto; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; border: 1px solid #3b536d; border-radius: 10px; background: #0b1624; box-shadow: 0 20px 55px rgba(0, 0, 0, .62); }
	.studio-nav-menu .studio-nav a { min-height: 42px; padding: 12px 10px; text-align: left; }
	.studio-nav-menu .studio-nav-login { grid-column: 1 / -1; }
	.studio-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.studio-hero { grid-template-columns: minmax(0, 1fr); }
	.studio-hero-steps { align-self: stretch; }
	.studio-masthead { flex-direction: column; align-items: flex-start; }
	.studio-masthead-actions { justify-content: flex-start; }
	.studio-feedback-layout { grid-template-columns: minmax(0, 1fr); }
	.studio-limitations-head { flex-direction: column; align-items: flex-start; }
	.studio-games-template-heading { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
	.studio-grid { grid-template-columns: 1fr; }
	.studio-card p { min-height: 0; }
	.studio-player-placeholder { aspect-ratio: auto; }
	.studio-subnav a { flex: 1 1 auto; text-align: center; }
	.studio-editor-body { grid-template-columns: 1fr; }
	.studio-editor-side { border-top: 1px solid var(--st-line); border-left: 0; }
	.studio-definition { grid-template-columns: 1fr; }
	.studio-table { font-size: 11px; }
	.studio-beta-status { align-items: flex-start; }
	.studio-beta-links { flex: 1 1 100%; margin-left: 0; }
	.studio-feedback-row { grid-template-columns: minmax(0, 1fr); }
	.studio-editor-phase7 .studio-editor-bar { align-items: flex-start; flex-direction: column; }
	.studio-editor-state { justify-content: flex-start; }
	.studio-editor-layout { grid-template-columns: minmax(0, 1fr); }
	.studio-editor-library { border-right: 0; border-bottom: 1px solid var(--st-line); }
	.studio-editor-phase7 .studio-editor-side { grid-column: auto; }
	.studio-library-results { max-height: 330px; }
	.studio-library-card { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.studio-library-card img { width: 56px; height: 44px; }
	.studio-editor-catalog-mode .studio-editor-library { display: grid; grid-template-columns: minmax(0, 1fr); }
	.studio-editor-catalog-mode .studio-library-results { grid-template-columns: minmax(0, 1fr); }
	.studio-editor-catalog-mode .studio-library-card { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; }
	.studio-editor-catalog-mode .studio-library-card img { grid-row: 1 / 3; width: 104px; height: 86px; }
	.studio-editor-catalog-mode .studio-library-card > button { grid-column: 2; }
	.studio-level-object .studio-field { display: block; width: 100%; padding-right: 0; }
	.studio-section-heading { align-items: flex-start; flex-direction: column; }
	.studio-actions-compact { justify-content: flex-start; }
	.studio-page-jumps { display: flex; }
	.studio-page-jumps a { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 940px) {
	.studio-editor-layout { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); }
	.studio-editor-phase7 .studio-editor-side { grid-column: 1 / -1; border-top: 1px solid var(--st-line); border-left: 0; }
	.studio-editor-catalog-mode .studio-editor-layout { grid-template-columns: minmax(0, 1fr); }
	.studio-editor-catalog-mode .studio-editor-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.studio-editor-catalog-mode .studio-library-heading,
	.studio-editor-catalog-mode .studio-library-state,
	.studio-editor-catalog-mode .studio-library-results,
	.studio-editor-catalog-mode .studio-library-pagination { grid-column: 1 / -1; }
	.studio-editor-catalog-mode .studio-library-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.studio-admin-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.studio-admin-search { grid-column: 1 / -1; }
	.studio-admin-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.studio-editor-layout { grid-template-columns: minmax(0, 1fr); }
	.studio-editor-phase7 .studio-editor-side { grid-column: auto; }
	.studio-admin-filters { grid-template-columns: minmax(0, 1fr); padding: 11px; }
	.studio-admin-edit-form { grid-template-columns: minmax(0, 1fr); }
	.studio-admin-search { grid-column: auto; }
	.studio-admin-filter-actions .studio-button { flex: 1 1 auto; text-align: center; }
	.studio-admin-pager { align-items: stretch; flex-direction: column; }
	.studio-admin-pager > div .studio-button { flex: 1 1 auto; text-align: center; }
	.studio-admin-quick-grid { grid-template-columns: minmax(0, 1fr); }
	.studio-admin-resource-tabs { flex-wrap: wrap; }
}

@media (max-width: 560px) {
	.studio-shell { padding: 8px 10px 12px; }
	.studio-appbar { padding: 5px 6px; }
	.studio-brand { gap: 6px; }
	.studio-brand svg { width: 27px; height: 27px; flex-basis: 27px; }
	.studio-brand small { letter-spacing: .08em; }
	.studio-appbar-cta { min-height: 40px; padding: 10px 9px; }
	.studio-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.studio-tile { grid-template-columns: auto minmax(0, 1fr); gap: 8px; min-height: 0; padding: 9px; }
	.studio-tile-arrow { display: none; }
	.studio-tile-icon { width: 32px; height: 32px; }
	.studio-tile-icon .studio-icon { width: 16px; height: 16px; }
	.studio-tile-copy strong { font-size: 12px; }
	.studio-tile-copy small { font-size: 10px; }
	.studio-hero { padding: 14px; }
	.studio-hero-steps { padding: 10px; }
	.studio-masthead-actions, .studio-masthead-actions a { display: none; }
	.studio-masthead { margin-bottom: 8px; }
	.studio-masthead-title { gap: 0; }
	.studio-hero-actions .studio-button { flex: 1 1 auto; }
	.studio-denied-card { flex-direction: column; }

}

@media (max-width: 360px) {
	/* Preserve three distinct controls without letting the legacy content
	   column force the brand, CTA, and menu through one another. */
	.studio-brand > span, .studio-appbar-login { display: none; }
	.studio-appbar-end { flex-wrap: wrap; gap: 4px; }
	.studio-appbar-cta { min-height: 38px; padding: 8px 7px; font-size: 10px; }
	.studio-nav-menu > summary { min-height: 38px; gap: 5px; padding: 0 8px; }
}

@media (max-width: 640px) {
	.studio-tile { min-height: 60px; }
}

@media (max-height: 460px) and (orientation: landscape) {
	.studio-editor-layout { min-height: 0; }
	.studio-editor-library, .studio-editor-workspace, .studio-editor-phase7 .studio-editor-side { padding: 10px; }
	.studio-library-results { max-height: 210px; }
	.studio-level-layout { min-height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
	.studio-button, .studio-tile, .studio-tile-arrow, .studio-admin-quick-link { transition: none; }
	.studio-button:hover, .studio-tile:hover { transform: none; }
}

/* Compact catalog: dense browsing with a bounded, in-context asset inspector.
   This section styles the shared Asset Library and Template catalog on the
   Assets, Templates, and Games pages. */
.studio-shell[data-studio-page='assets'],
.studio-shell[data-studio-page='templates'] {
	position: relative;
	left: auto;
	width: 100%;
	max-width: none;
	transform: none;

}
.studio-assets { position: relative; z-index: 4; max-width: none; overflow-anchor: none; color: #edf5ff; }
.studio-assets button, .studio-assets input, .studio-assets select { font: inherit; }
.studio-assets button { cursor: pointer; }
.studio-assets [hidden] { display: none !important; }
.studio-assets-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 5px; border: 1px solid var(--st-line); border-radius: 11px 11px 0 0; background: #0c1725; scrollbar-width: none; }
.studio-assets-sources::-webkit-scrollbar { display: none; }
.studio-assets-sources button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 7px 11px; color: #aebfd3; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 11px; font-weight: 700; text-align: left; }
.studio-assets-sources button:hover { color: #fff; background: #17263a; }
.studio-assets-sources button[aria-pressed='true'] { color: #f8fbff; border-color: #4c89bd; background: #19334d; }
.studio-assets-sources strong { min-width: 30px; padding: 3px 6px; color: #a9d9ff; border-radius: 999px; background: rgba(83, 159, 228, .14); font-size: 9px; text-align: center; }
.studio-assets-filters { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(190px, 1.45fr) repeat(4, minmax(122px, .78fr)) auto auto; gap: 7px; align-items: end; margin: 0 0 10px; padding: 9px; border: 1px solid var(--st-line); border-top: 0; border-radius: 0 0 11px 11px; background: #0d1928; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.studio-assets-filters .studio-field { min-width: 0; margin: 0; }
.studio-assets-filters .studio-field > span { margin-bottom: 3px; font-size: 8px; }
.studio-assets-filters input, .studio-assets-filters select, .studio-asset-rating select { width: 100%; min-width: 0; min-height: 38px; padding: 7px 9px; color: #eef6ff; border: 1px solid #354b66; border-radius: 7px; background: #0a1523; font-size: 11px; }
.studio-assets-filters input::placeholder { color: #6f8299; }
.studio-assets-check { display: flex; align-items: center; min-height: 36px; color: var(--st-muted); font-size: 11px; }
.studio-assets-check input { width: auto; min-height: auto; margin-right: 5px; }
.studio-assets-advanced { position: relative; align-self: end; }
.studio-assets-advanced summary { min-height: 38px; padding: 10px 11px; color: #c8d6e7; border: 1px solid #354b66; border-radius: 7px; background: #17263a; font-size: 11px; font-weight: 700; list-style: none; white-space: nowrap; }
.studio-assets-advanced summary::-webkit-details-marker { display: none; }
.studio-assets-advanced summary::after { content: ' +'; color: #6fcfff; }
.studio-assets-advanced[open] summary::after { content: ' −'; }
.studio-assets-advanced > div { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: min(560px, calc(100vw - 70px)); grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; padding: 14px; border: 1px solid #405674; border-radius: 12px; background: #111f31; box-shadow: 0 18px 50px rgba(0, 0, 0, .58); }
.studio-assets-advanced .studio-assets-check { align-self: end; padding: 9px; }
.studio-assets-clear { align-self: end; min-height: 38px; padding: 10px 11px; border-radius: 7px; box-shadow: none; }
.studio-assets-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.studio-assets.has-open-detail .studio-assets-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); }
.studio-assets-results { min-width: 0; padding: 12px; border: 1px solid #243a52; border-radius: 11px; background: #0d1927; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.studio-assets-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-assets-results-eyebrow { margin: 0 0 3px !important; color: #67c9ff !important; font-size: 9px !important; font-weight: 800; letter-spacing: .14em; }
.studio-assets-results h4 { margin: 0 0 3px; color: #fff; font-size: 17px; letter-spacing: -.02em; }
.studio-assets-results-head p { min-height: 17px; margin: 0 0 9px; color: #91a5bd; font-size: 11px; line-height: 1.45; }
.studio-assets-results-head p[data-tone='error'] { color: #ffb3b3; }
.studio-assets-results-head p[data-tone='warning'] { color: #ffd395; }
/* Poster cards fill the row the shell now actually gets, so a wide display
   shows six or seven templates at once instead of three. */
.studio-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; }
.studio-assets.has-open-detail .studio-assets-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.studio-assets-empty { grid-column: 1 / -1; min-height: 200px; padding: 30px; display: grid; place-content: center; text-align: center; border: 1px dashed #3b5270; border-radius: 11px; background: rgba(12, 22, 35, .48); }
.studio-assets-empty h5 { margin: 0 0 8px; color: #fff; font-size: 15px; }
.studio-assets-empty p { margin: 0; color: var(--st-muted); font-size: 12px; }
.studio-assets-pages { display: flex; justify-content: center; gap: 8px; min-height: 34px; margin-top: 12px; }
.studio-assets-pages button { min-width: 92px; padding: 7px 12px; color: #eefbff; border: 1px solid #3b6386; border-radius: 8px; background: #19334c; font-size: 11px; }
.studio-assets-pages button[hidden] { display: none; }

.studio-asset-card {
	position: relative; display: flex; flex-direction: column; min-height: 208px; overflow: hidden;
	border: 1px solid #29425d; border-radius: 11px; background: #0c1826; box-shadow: 0 7px 20px rgba(1, 7, 15, .2);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.studio-asset-card:hover { z-index: 1; transform: translateY(-2px); border-color: #5b95c8; box-shadow: 0 12px 27px rgba(1, 7, 15, .33); }
.studio-asset-card:focus-within { border-color: var(--st-cyan); }
.studio-asset-card.is-selected { border-color: #65baff; box-shadow: 0 0 0 1px #65baff, 0 15px 40px rgba(38, 126, 204, .2); }
.studio-asset-card-visual {
	/* Every built-in title screen is 320x240, so a 4:3 window shows the whole
	   screen: no crop through the logo, no letterbox. */
	position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; flex: 0 0 auto; padding: 0; overflow: hidden;
	color: inherit; border: 0; border-bottom: 1px solid #29405a; border-radius: 0; background: #08131f; text-align: left;
	text-decoration: none !important;
}
.studio-asset-card-visual:hover .studio-asset-catalog-art,
.studio-asset-card-visual:hover .studio-asset-catalog-canvas,
.studio-asset-card-visual:hover > img { filter: brightness(1.08); }
.studio-asset-card-visual:focus-visible { z-index: 3; outline: 3px solid #ffd166; outline-offset: -3px; }
.studio-asset-catalog-art,
.studio-asset-catalog-canvas,
.studio-asset-card-visual > img,
.studio-asset-detail-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: filter .18s ease; }
.studio-asset-catalog-canvas { position: absolute; inset: 0; z-index: 1; }
.studio-asset-catalog-canvas.is-pending { opacity: .82; }
.studio-asset-detail-visual .studio-asset-catalog-canvas { z-index: 1; }
.studio-asset-card-visual > img,
.studio-asset-detail-visual > img { position: absolute; inset: 0; z-index: 2; color: transparent; background: #0b1422; }
.studio-asset-card-visual img[data-state='failed'], .studio-asset-detail-visual img[data-state='failed'] { z-index: 0; opacity: 0; }
.studio-asset-card-visual::after,
.studio-asset-detail-visual::after {
	content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0, rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 4px);
}
.studio-asset-art-status {
	/* Top-right: the badges own the top-left, and the bottom of a title screen
	   is where its copyright line sits. */
	position: absolute; top: 7px; right: 7px; z-index: 5; max-width: calc(100% - 14px); padding: 4px 7px;
	overflow: hidden; color: #d8e8f7; border: 1px solid rgba(185, 215, 241, .32); border-radius: 999px;
	background: rgba(5, 13, 23, .84); font-size: 6.5px; font-weight: 900; letter-spacing: .04em; text-overflow: ellipsis;
	text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(7px);
}
/* On a wall of cards the same provenance line repeats on every one. It stays
   in the page for assistive technology and appears on hover or keyboard
   focus, so the artwork itself is what the eye reads first. */
.studio-asset-card-visual .studio-asset-art-status { opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.studio-asset-card:hover .studio-asset-art-status,
.studio-asset-card:focus-within .studio-asset-art-status { opacity: 1; }
.studio-asset-detail-visual .studio-asset-art-status { top: auto; bottom: 7px; }
.studio-asset-art-status[data-tone='exact'] { color: #a9f5dc; border-color: rgba(113, 232, 194, .55); background: rgba(8, 51, 45, .88); }
.studio-asset-badges { position: absolute; top: 7px; left: 7px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 14px); }
.studio-asset-badges span { padding: 3px 5px; color: #d9e9f8; border: 1px solid rgba(190, 219, 245, .27); border-radius: 999px; background: rgba(6, 17, 29, .82); font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(5px); }
.studio-asset-badges span[data-tone='default'] { color: #9deed3; border-color: rgba(104, 228, 188, .45); background: rgba(13, 60, 54, .85); }
.studio-asset-badges span[data-tone='owned'] { color: #c2d7ff; border-color: rgba(123, 165, 241, .5); background: rgba(24, 51, 94, .88); }
.studio-asset-badges span[data-tone='added'] { color: #ffe0a1; border-color: rgba(255, 196, 91, .5); background: rgba(75, 50, 15, .88); }
.studio-asset-badges span[data-tone='featured'] { color: #ffe08a; border-color: rgba(255, 209, 102, .5); background: rgba(70, 48, 8, .88); }
.studio-asset-card-body { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; align-items: flex-start; padding: 9px 10px 10px; overflow: hidden; }
.studio-asset-card-type { margin-bottom: 2px; color: #69caff; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.studio-asset-card h5 { width: 100%; margin: 0 0 1px; overflow: hidden; color: #fff; font-size: 13px; line-height: 1.18; text-overflow: ellipsis; white-space: nowrap; }
.studio-asset-card-title-link { color: inherit; text-decoration: none; }
.studio-asset-card:hover .studio-asset-card-title-link, .studio-asset-card-title-link:focus-visible { color: #b6ecff; text-decoration: underline; text-underline-offset: 2px; }
.studio-template-catalog .studio-asset-card h5 { overflow: visible; line-height: 1.3; text-overflow: clip; white-space: normal; }
.studio-asset-card p { display: -webkit-box; max-width: 100%; margin: 7px 0; overflow: hidden; color: #8fa2ba; font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.studio-asset-card .studio-asset-creator { max-width: 100%; padding: 0; overflow: hidden; color: #93bdda; border: 0; background: transparent; font-size: 9px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.studio-asset-card .studio-asset-creator:hover { color: #d7eeff; text-decoration: underline; }
.studio-asset-creator { max-width: 100%; padding: 0; overflow: hidden; color: var(--st-cyan); border: 0; background: transparent; font-size: 10px; text-decoration: underline; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.studio-asset-source-games { margin: 13px 0; padding: 11px; border: 1px solid #2d4561; border-radius: 9px; background: #0c1725; }
.studio-asset-source-games h5, .studio-asset-source-games h3 { margin: 0 0 8px; color: #dcecff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.studio-asset-source-game-list { display: grid; gap: 7px; }
.studio-asset-source-game-list a { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 6px; color: #edf6ff; border: 1px solid #2b415a; border-radius: 7px; background: #122239; text-decoration: none; }
.studio-asset-source-game-list a:hover { border-color: #61b7f4; background: #172e49; }
.studio-asset-source-game-list img { display: block; width: 80px; height: 45px; object-fit: cover; image-rendering: pixelated; border-radius: 4px; background: #060b12; }
.studio-asset-source-game-list span, .studio-asset-source-game-list strong, .studio-asset-source-game-list small { display: block; min-width: 0; }
.studio-asset-source-game-list strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.studio-asset-source-game-list small { margin-top: 3px; color: #8faccc; font-size: 9px; }
.studio-asset-source-more { display: inline-flex; width: fit-content; margin-top: 7px; padding: 3px 7px; color: #b9cee3; border: 1px solid #36506a; border-radius: 999px; background: #14253a; font: 700 9px/1.2 "Courier New", monospace; }
.studio-asset-source-games.is-compact { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 27px; margin: 5px 0 2px; padding: 0; border: 0; background: transparent; }
.studio-asset-source-heading { margin: 0; color: #77d7ff; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.studio-asset-source-games.is-compact .studio-asset-source-game-list { min-width: 0; flex: 1; }
.studio-asset-source-games.is-compact .studio-asset-source-game-list a { grid-template-columns: 34px minmax(0, 1fr); gap: 5px; min-height: 27px; padding: 2px; border: 0; background: #102237; }
.studio-asset-source-games.is-compact .studio-asset-source-game-list a:nth-child(n+2) { display: none; }
.studio-asset-source-games.is-compact .studio-asset-source-game-list img,
.studio-asset-source-games.is-compact .studio-source-game-mark { width: 34px; height: 21px; border-radius: 3px; }
.studio-asset-source-games.is-compact .studio-asset-source-game-list strong { font-size: 9px; }
.studio-asset-source-games.is-compact .studio-asset-source-game-list small { display: none; }
.studio-asset-source-games.is-compact .studio-asset-source-more { flex: 0 0 auto; margin: 0; padding: 2px 5px; white-space: nowrap; }
.studio-source-game-mark { display: grid !important; width: 80px; height: 45px; place-items: center; color: #9fe7ff; border: 1px solid #31516e; border-radius: 4px; background: #0b1a2a; font: 800 10px/1 "Courier New", monospace; }
.studio-asset-source-unknown { margin: 6px 0 2px !important; color: #7f93aa !important; font-size: 9px !important; font-style: italic; }
.studio-asset-card .studio-asset-compatibility { margin: 4px 0 2px; overflow: hidden; color: #9eb4ca; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.studio-asset-card .studio-asset-metrics { display: flex; width: 100%; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 5px; color: #93a8bf; font-size: 8px; }
.studio-asset-card .studio-asset-metrics span:first-child { color: #ffd76b; }
.studio-asset-card-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 5px; width: 100%; margin-top: auto; padding-top: 7px; }
.studio-asset-card-manage { grid-column: 1 / -1; }
.studio-asset-card-actions .studio-button { width: 100%; box-sizing: border-box; text-align: center; }
.studio-asset-card-open,
.studio-asset-card-use,
.studio-asset-card-play { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 7px 8px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.studio-asset-card-open { width: 100%; color: #e5f4ff; border: 1px solid #39597a; background: #1a3048; }
.studio-asset-card-open:hover { border-color: #65baff; background: #214260; }
.studio-template-catalog .studio-asset-card-open { color: #dceeff; border-color: #405d78; background: #14263a; }
.studio-template-catalog .studio-asset-card-open:hover { border-color: #70cfff; background: #19344e; }
.studio-asset-card-use { color: #061b25 !important; border: 1px solid #90e6ff; background: #68d5ff; box-shadow: none; }
.studio-asset-card-play { color: #06251d !important; border: 1px solid #75e8c0; background: #75e8c0; box-shadow: none; text-decoration: none; }
.studio-asset-card-play:hover { color: #031912 !important; border-color: #a8f5dc; background: #a8f5dc; }
.studio-asset-card-manage { min-height: 32px; padding: 6px 8px; font-size: 9px; box-shadow: none; }
.studio-asset-card-outcome { width: 100%; min-height: 0; margin: 0 !important; color: #9edfbf !important; -webkit-line-clamp: unset !important; }
.studio-asset-card-outcome:not(:empty) { margin-top: 4px !important; padding: 4px 5px; border: 1px solid #315c55; border-radius: 6px; background: #102722; font-size: 8px; }
.studio-asset-back-results { display: none; padding: 8px 0; color: #a9e8ff; border: 0; background: transparent; font-size: 11px; font-weight: 800; }

.studio-asset-detail-dialog {
	position: sticky; top: 12px; align-self: start; width: 100%; max-width: 390px; max-height: calc(100dvh - 24px); margin: 0; padding: 0;
	overflow: auto; color: #edf5ff; border: 1px solid #355371; border-radius: 13px; background: #0a1624;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .38); scrollbar-color: #3d6485 #0a1624; scroll-margin-top: 10px;
}
.studio-asset-detail-dialog:not([open]) { display: none; }
.studio-asset-detail-dialog[open] { display: block; animation: studio-inspector-in .2s ease-out; }
.studio-asset-detail-shell { width: 100%; min-height: 0; margin: 0; padding: 0 14px 18px; }
.studio-asset-detail-toolbar {
	position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 52px;
	margin: 0 -14px 13px; padding: 6px 10px; border-bottom: 1px solid #29425d; background: rgba(10, 22, 36, .96); backdrop-filter: blur(14px);
}
.studio-asset-detail-back,
.studio-asset-detail-close { color: #dceeff; border: 1px solid #34516d; border-radius: 8px; background: #102238; font-weight: 800; }
.studio-asset-detail-back { min-height: 36px; padding: 7px 10px; font-size: 10px; }
.studio-asset-detail-close { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; font-size: 22px; line-height: 1; }
.studio-asset-detail-back:hover,
.studio-asset-detail-close:hover { color: #06141e; border-color: #9beaff; background: #72d9ff; }
.studio-asset-detail { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.studio-asset-detail[data-state='loading'] { display: block; min-height: 220px; padding-top: 80px; color: #9cb0c6; text-align: center; }
.studio-asset-detail > p, .studio-asset-detail-empty p, .studio-asset-detail a { color: var(--st-muted); font-size: 12px; line-height: 1.55; }
.studio-asset-detail-media-column,
.studio-asset-detail-content { min-width: 0; }
.studio-asset-detail-visual { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin: 0 0 11px; border: 1px solid #355675; border-radius: 10px; background: #0b1422; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.studio-asset-detail-content { align-self: start; padding-top: 6px; }
.studio-asset-detail-eyebrow { margin: 0 0 3px !important; color: #6fcfff !important; font-size: 9px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.studio-asset-detail-content h2,
.studio-asset-detail > h2 { margin: 2px 0 5px; color: #fff; font-size: clamp(23px, 2.4vw, 31px); line-height: 1.05; letter-spacing: -.025em; }
.studio-asset-detail-content h2:focus,
.studio-asset-detail > h2:focus { outline: 0; }
.studio-asset-detail-content > p { color: #aebed0; font-size: 12px; line-height: 1.6; }
.studio-asset-detail h4 { margin: 0 0 9px; color: #fff; font-size: 15px; }
.studio-asset-detail h4:focus { outline: 2px solid #ffd166; outline-offset: 3px; }
.studio-asset-detail .studio-asset-creator { margin-bottom: 9px; padding: 0; color: #73d9ff; border: 0; background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.studio-asset-detail .studio-asset-source-games { margin: 12px 0; padding: 10px; }
.studio-asset-source-note { margin: 8px 0 10px; padding: 8px 9px; color: #a9bad0; border-left: 3px solid #557b9c; background: #0c1928; font-size: 9px; line-height: 1.45; }
.studio-asset-detail .studio-asset-source-heading { margin: 0 0 8px; color: #dcecff; font-size: 10px; }
.studio-asset-facts { display: grid; grid-template-columns: minmax(115px, .75fr) 1.25fr; gap: 6px 12px; margin: 16px 0; padding: 13px; border: 1px solid #2d415a; border-radius: 9px; background: #0b1623; font-size: 10px; }
.studio-asset-facts dt,
.studio-asset-facts dd { margin: 0; min-width: 0; }
.studio-asset-facts dt { color: #91a6bd; }
.studio-asset-facts dd { overflow-wrap: anywhere; color: #e5f0fb; }
.studio-asset-tags { overflow-wrap: anywhere; }
.studio-asset-preview { margin: 14px 0; padding: 13px; border: 1px solid #2d415a; border-radius: 9px; background: #0b1623; }
.studio-asset-preview h5 { margin: 0 0 7px; color: #fff; font-size: 12px; }
.studio-asset-preview img, .studio-asset-preview video { display: block; width: 100%; max-height: 280px; margin-top: 10px; object-fit: contain; border: 1px solid #413d5f; background: #080711; }
.studio-asset-preview audio { display: block; width: 100%; margin-top: 10px; }
.studio-asset-preview-state { display: block; margin-top: 7px; color: var(--st-muted); font-size: 10px; line-height: 1.45; }
.studio-asset-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid #30445d; }
.studio-asset-actions > p { flex: 1 0 100%; margin: 0; color: var(--st-muted); font-size: 11px; line-height: 1.5; }
.studio-asset-actions .studio-button { border-radius: 7px; box-shadow: none; }
.studio-asset-actions .studio-asset-play { color: #05251b !important; border-color: #75e8c0; background: linear-gradient(135deg, #75e8c0, #68d6ee); font-weight: 900; text-decoration: none; }
.studio-asset-actions .studio-asset-use-template { width: 100%; padding: 11px 13px; color: #06251d !important; border-color: #76e6c0; background: linear-gradient(135deg, #76e6c0, #5fcfee); font-weight: 900; }
.studio-asset-actions .studio-asset-use-template:hover { border-color: #b2f6df; background: linear-gradient(135deg, #9bf0d3, #89ddf4); }
.studio-asset-actions .studio-asset-rating { display: grid; grid-template-columns: 1fr auto; gap: 6px; width: 100%; align-items: center; }
.studio-asset-actions .studio-asset-rating > span { grid-column: 1 / -1; color: var(--st-muted); font-size: 10px; }
.studio-asset-rating select { min-height: 32px; }
.studio-asset-report { padding: 6px 0; color: #90a6be; border: 0; background: transparent; font-size: 10px; text-decoration: underline; }
.studio-asset-detail[data-view='creator'] { display: block; }
.studio-asset-creator-detail {
	display: grid; gap: 14px; width: 100%; margin: 6px auto 0; padding: 18px;
	border: 1px solid #294864; border-radius: 14px; background: #0d1b2a; box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
}
.studio-asset-creator-detail h2 { margin: 0; }
.studio-asset-creator-detail p { margin: 0; color: #afc2d6; line-height: 1.6; }
.studio-asset-creator-detail a { color: #78ddff; }
.studio-asset-creator-detail .studio-button { justify-self: start; }
.studio-template-type-fixed { display: none; }
.studio-template-catalog-embedded { padding: 0; }
.studio-assets button:focus, .studio-assets input:focus, .studio-assets select:focus, .studio-asset-detail a:focus, .studio-assets summary:focus { outline: 2px solid #ffd84a; outline-offset: 2px; }
.studio-assets button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .55; }

@keyframes studio-inspector-in {
	from { opacity: 0; transform: translateY(7px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
	.studio-assets-filters { grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, 1fr)); }
	.studio-assets-advanced, .studio-assets-clear { width: 100%; }
	.studio-assets-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media (max-width: 980px) {
	.studio-create-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.studio-create-definition { grid-template-columns: 1fr 1fr; }
	.studio-create-definition h4, .studio-create-advanced-link { grid-column: 1 / -1; }
	.studio-assets.has-open-detail .studio-assets-layout { grid-template-columns: minmax(0, 1fr); }
	.studio-asset-detail-dialog { position: static; order: -1; width: 100%; max-width: none; max-height: none; }
	.studio-asset-back-results { display: inline-block; }
}

@media (max-width: 760px) {
	.studio-create-start { grid-template-columns: minmax(0, 1fr); }
	.studio-create-account, .studio-create-template-grid, .studio-create-definition { grid-column: 1; }
	.studio-assets-sources { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.studio-assets-sources button { justify-content: center; min-width: 0; padding: 6px; }
	.studio-assets-sources button strong { display: none; }
	.studio-assets-filters { grid-template-columns: 1fr 1fr; }
	.studio-assets-search { grid-column: 1 / -1; }
	.studio-assets-advanced > div { position: static; top: auto; right: auto; left: auto; width: 100%; max-height: none; margin-top: 7px; grid-template-columns: minmax(0, 1fr); overflow: visible; box-shadow: none; }
	.studio-assets-grid { grid-template-columns: minmax(0, 1fr); }
	/* One column on a phone, so the poster lies down again rather than pushing
	   every other card a screen further away. */
	.studio-asset-card { flex-direction: row; min-height: 150px; }
	.studio-asset-card-visual { width: 38%; min-width: 118px; flex: 0 0 38%; align-self: stretch; aspect-ratio: auto; border-right: 1px solid #29405a; border-bottom: 0; }
	.studio-asset-detail-shell { padding: 0 14px 32px; }
	.studio-asset-detail-toolbar { min-height: 54px; margin-bottom: 14px; }
	.studio-asset-detail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.studio-asset-detail-content { padding-top: 4px; }
	.studio-asset-detail-content h2, .studio-asset-detail > h2 { font-size: clamp(25px, 9vw, 38px); }
}

@media (max-width: 420px) {
	.studio-create-template-grid, .studio-create-definition { grid-template-columns: minmax(0, 1fr); }
	.studio-create-primary-actions > * { width: 100%; justify-content: center; text-align: center; }
	.studio-assets-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.studio-assets-search { grid-column: 1 / -1; }
	.studio-assets-advanced[open] { grid-column: 1 / -1; }
	.studio-asset-card { grid-template-columns: 116px minmax(0, 1fr); }
	.studio-template-catalog .studio-asset-card-actions { grid-template-columns: minmax(0, 1fr); }
	.studio-template-catalog .studio-asset-card-actions button { min-height: 27px; padding-block: 4px; }
	.studio-asset-card .studio-asset-metrics span:last-child { display: none; }
	.studio-asset-detail-shell { padding-inline: 10px; }
	.studio-asset-detail-back { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.studio-asset-card, .studio-asset-catalog-art, .studio-asset-catalog-canvas, .studio-asset-card-visual > img { transition: none; }
	.studio-asset-card:hover { transform: none; }
	.studio-asset-detail-dialog[open] { animation: none; }
}

/* Compact controls also apply when the site column is narrower than the viewport. */
@container studio-page (max-width: 1100px) {
	.studio-appbar-user-copy { display: none; }
	.studio-appbar-user { padding-right: 3px; }
}

@container studio-page (max-width: 980px) {
	.studio-assets.has-open-detail .studio-assets-layout { grid-template-columns: minmax(0, 1fr); }
	.studio-asset-detail-dialog { position: static; order: -1; width: 100%; max-width: none; max-height: none; }
	.studio-asset-back-results { display: inline-block; }
}

@media (max-width: 1100px) {
	/* Anchor the filter popup to the whole filter bar when its button wraps. */
	.studio-assets-advanced { position: static; }
}

@media (min-width: 361px) and (max-width: 420px) {
	.studio-shell-maker .studio-brand > span, .studio-shell-maker .studio-appbar-login { display: none; }
}