/* [CSS:AIBIO-THEME] owner #270 #271 (TASK-121) — pages built on brand.css (Studio, product pages /a/) use the same AiBio style as
   room & landing (DESIGN_SYSTEM / css/mine.css): navy + soft glow, dark blue cards, gold/cyan accents, Lilita One headings, Nunito body,
   3D orange primary button. Loaded AFTER brand.css -> only overrides tokens; page layout stays unchanged. */
:root {
	--brand: #ff9a1f;
	--brand2: #ffc933;
	--bg: #0b1024;
	--panel: #121a3a;
	--card: #151d42;
	--card2: #1b2450;
	--line: #26315e;
	--line2: #34427a;
	--txt: #eef3ff;
	--mut: #b4c2e6;
	--on-brand: #1b1300;
	--good: #86e85c;
	--info: #5ef0ff;
	--brand-rgb: 63, 115, 192; /* card tint = game blue (text contrast stays high) */
	--brand2-rgb: 255, 201, 51;
	--bg-rgb: 11, 16, 36;
	--panel-rgb: 18, 26, 58;
	--card-rgb: 21, 29, 66;
	--card2-rgb: 27, 36, 80;
	--line-rgb: 38, 49, 94;
	--line2-rgb: 52, 66, 122;
	--txt-rgb: 238, 243, 255;
	--mut-rgb: 180, 194, 230;
	--on-brand-rgb: 27, 19, 0;
	--good-rgb: 134, 232, 92;
	--info-rgb: 94, 240, 255;
	--font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-title: "Lilita One", "Arial Rounded MT Bold", "Nunito", sans-serif;
	--font-data: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--surface-card-bg: linear-gradient(160deg, rgba(38, 49, 94, .96), rgba(21, 29, 66, .98));
	--surface-btn-primary: linear-gradient(#ffc04d, #ff9a1f 55%, #f07800);
	color-scheme: dark;
}
html, body {
	background:
		radial-gradient(60% 40% at 50% 0%, rgba(94, 240, 255, .10), transparent 70%),
		radial-gradient(40% 30% at 0% 60%, rgba(167, 139, 250, .14), transparent 70%),
		radial-gradient(40% 30% at 100% 90%, rgba(255, 201, 51, .08), transparent 70%),
		#0b1024;
	background-attachment: fixed;
	color: var(--txt);
	font-family: var(--font-ui);
}
body { font-weight: 600; }
/* TASK-117 M4 paid quest card (studio-quests.js) */
.sd-quests .sd-q-h { margin: 0 0 8px; font-family: var(--font-title); font-size: 20px; }
.sd-qf { display: grid; gap: 12px; margin-top: 12px; }
.sd-qf label { display: grid; gap: 4px; font-size: 14px; color: var(--mut); }
.sd-qf input, .sd-qf select, .sd-qf textarea { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line2); background: var(--bg); color: var(--txt); font: inherit; }
.sd-qf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sd-qf-msg { min-height: 20px; margin: 0; color: var(--brand2); }
.sd-ql { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.sd-ql li { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(var(--bg-rgb), .5); }
/* owner #291 (TASK-127): Studio bottom nav = room dock look (css/room.css .rm-nav) */
.mnav { left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: auto !important; max-width: 560px; margin: 0 auto; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px !important;
	border: 3px solid #34427a !important; border-radius: 24px !important; background: linear-gradient(#1b2450, #0d1330) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important; }
.mnav-i { display: grid !important; justify-items: center; align-content: center; gap: 4px; min-height: 56px; padding: 0 !important; border-radius: 16px; color: #b4c2e6 !important; font: 900 12px/16px var(--font-ui) !important; text-decoration: none; position: relative; }
.mnav-i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mnav-i::before { display: none !important; }
.mnav-i.on { background: linear-gradient(#34427a, #26315e) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(94, 240, 255, .25); }
.mnav-i.on::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 16px; height: 3px; margin-left: -8px; border-radius: 999px; background: #5ef0ff; box-shadow: 0 0 8px #5ef0ff; }
.mnav-i[data-mnav="room"] { color: #ffc933 !important; }
.mnav-i span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* owner #292 (TASK-127): Studio header = room header (brand wordmark, pill balance chip, square icon buttons) */
.sd-head { background: rgba(11, 16, 36, .92) !important; border-bottom: 0 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.sd-brand { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; text-decoration: none; }
.sd-word { font: 400 20px/1 var(--font-title); letter-spacing: .02em; white-space: nowrap; }
.sd-word span { background: linear-gradient(90deg, #5ef0ff, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-word i { font-style: normal; font-size: 12px; color: #c4b5fd; margin-left: 2px; }
.sd-title { display: none !important; }
.sd-top-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sd-bal { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 8px; border: 3px solid #26315e; border-radius: 999px; background: linear-gradient(#1b2446, #0d1330); color: #ffc933; font: 900 16px/1 var(--font-ui); text-decoration: none; white-space: nowrap; }
.sd-bal img { width: 24px; height: 24px; }
.sd-acc-btn, .sd-open { min-width: 44px; min-height: 44px; border: 3px solid #26315e !important; border-radius: 12px !important; background: linear-gradient(#26315e, #1b2450) !important; color: #eef3ff !important; }
@media (max-width: 419px) { .sd-word i { display: none; } .sd-open { display: none !important; } .sd-bal { font-size: 14px; } }
@media (max-width: 339px) { .sd-word { display: none; } }
.sd-bal { order: -1; }