/* Ember v2: motion, mascot art, profile customisation and personal appearance options.
   Loaded after app.css. Everything here respects reduced motion (see the end of the file). */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms;
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 8px 28px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------- logo + wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: .32em; font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.wordmark svg { flex: none; height: 1.1em; width: auto; }
.rail-logo svg { width: 30px; height: 30px; transition: transform var(--dur-2) var(--ease-spring); }
.rail-item:hover .rail-logo svg { transform: rotate(-8deg) scale(1.08); }

/* ---------- mascot ---------- */
.cinder { overflow: visible; }
.cinder .cinder-flame { animation: flicker 2.6s ease-in-out infinite; }
.cinder .cinder-glow { animation: glow-pulse 3.2s ease-in-out infinite; transform-origin: 100px 118px; }
.mascot-float { animation: float 4.5s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(var(--fs, 1)) skewX(0) } 25% { transform: scale(var(--fs, 1)) skewX(-3deg) translateY(-1px) } 60% { transform: scale(var(--fs, 1)) skewX(2deg) } }
@keyframes glow-pulse { 0%, 100% { opacity: .8; transform: scale(1) } 50% { opacity: 1; transform: scale(1.06) } }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

.empty { animation: rise var(--dur-3) var(--ease-out) both; }
.empty .cinder { width: 132px; height: 132px; margin-bottom: 4px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .25)); }
.empty h3 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.02em; }

/* ---------- avatars: default art, decorations ---------- */
.avatar { position: relative; overflow: visible; }
.avatar > img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.deco::after { content: ''; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; z-index: 1; }
.avatar .status-dot { z-index: 2; }
.deco-ember-ring::after { background: conic-gradient(from 0deg, #ffd08a, #ff7a3d, #e8461e, #ff7a3d, #ffd08a); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 6s linear infinite; filter: drop-shadow(0 0 4px #ff7a3d); }
.deco-frost::after { background: conic-gradient(#e3f6ff, #7fd0ff, #ffffff, #4fb3f6, #e3f6ff); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 9s linear infinite reverse; filter: drop-shadow(0 0 5px #7fd0ff); }
.deco-aurora::after { background: conic-gradient(#2fd6b0, #7fd4ff, #b27bf2, #ff7fb0, #2fd6b0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); animation: spin 5s linear infinite; filter: blur(.3px) drop-shadow(0 0 6px #b27bf2); }
.deco-sparkle::after { inset: -22%; background: radial-gradient(circle at 18% 22%, #fff 0 2px, transparent 3px), radial-gradient(circle at 84% 30%, #ffd08a 0 2px, transparent 3px), radial-gradient(circle at 70% 86%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 12% 76%, #ffe27a 0 1.5px, transparent 2.5px); animation: twinkle 2.2s ease-in-out infinite; }
.deco-halo::after { inset: -30% 10% auto; height: 26%; border-radius: 50%; border: 2.5px solid #ffe27a; box-shadow: 0 0 8px #ffe27a; animation: float 3s ease-in-out infinite; }
.deco-crown::after { inset: -38% 18% auto; height: 34%; border-radius: 2px; background: linear-gradient(#ffe27a, #f7c534); clip-path: polygon(0 100%, 0 30%, 22% 62%, 50% 0, 78% 62%, 100% 30%, 100% 100%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.deco-leaf::after { inset: -10%; background: radial-gradient(ellipse 22% 12% at 85% 12%, #7ccb5a 0 98%, transparent), radial-gradient(ellipse 16% 9% at 12% 88%, #2f8f46 0 98%, transparent); }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.96) } 50% { opacity: 1; transform: scale(1.04) } }

/* ---------- name styles ---------- */
[class*="name-"] { background-size: 200% 100%; }
.name-fire, .name-ocean, .name-aurora, .name-gold, .name-candy { -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: name-shift 6s linear infinite; }
.name-fire { background-image: linear-gradient(90deg, #ffd08a, #ff7a3d, #e8461e, #ff7a3d, #ffd08a); }
.name-ocean { background-image: linear-gradient(90deg, #b8e6ff, #4fb3f6, #2563d6, #4fb3f6, #b8e6ff); }
.name-aurora { background-image: linear-gradient(90deg, #2fd6b0, #7fd4ff, #b27bf2, #ff7fb0, #2fd6b0); }
.name-gold { background-image: linear-gradient(90deg, #fff0a8, #f7c534, #c98912, #f7c534, #fff0a8); }
.name-candy { background-image: linear-gradient(90deg, #ff7fb0, #ffd1e4, #b27bf2, #ffd1e4, #ff7fb0); }
.name-neon { color: #9ff7ff !important; text-shadow: 0 0 6px #2fd6ff, 0 0 14px #2fd6ff99; }
@keyframes name-shift { to { background-position: -200% 0 } }

/* ---------- messages ---------- */
.msg.fresh { animation: msg-in var(--dur-2) var(--ease-out) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(.995) } }
.msg { transition: background-color var(--dur-1); }
.reaction { transition: transform var(--dur-1) var(--ease-spring), background-color var(--dur-1), border-color var(--dur-1); }
.reaction:hover { transform: translateY(-1px); }
.reaction.pop { animation: pop 380ms var(--ease-spring); }
@keyframes pop { 0% { transform: scale(.6) } 60% { transform: scale(1.22) } 100% { transform: scale(1) } }
.msg-body.blurred { position: relative; cursor: pointer; }
.msg-body.blurred > :not(.blur-note) { filter: blur(7px); user-select: none; }
.blur-note { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--warning); margin-bottom: 2px; }
.locked-note { display: inline-flex; gap: 6px; align-items: center; color: var(--text-faint); font-style: italic; font-size: .92rem; }
.locked-note.locked { color: var(--accent); cursor: pointer; font-style: normal; }
.locked-note.bad_signature { color: var(--danger); }
.att-file.busy { opacity: .6; pointer-events: none; }
button.att-file { text-align: left; }

/* send button burst */
.send-btn { transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-2); }
.send-btn:hover { transform: scale(1.06); box-shadow: var(--glow); }
.send-btn.burst { animation: burst 420ms var(--ease-out); }
@keyframes burst { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent) } 100% { box-shadow: 0 0 0 16px transparent } }

/* ---------- rail ---------- */
.rail-item .server-icon, .rail-item > .rail-logo { transition: border-radius var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring), background-color var(--dur-2), box-shadow var(--dur-2); }
.rail-item:hover .server-icon { border-radius: 16px; transform: translateY(-1px); }
.rail-item.active .server-icon { box-shadow: var(--glow); }

/* ---------- modals, menus, toasts ---------- */
.modal-back { animation: fade-in var(--dur-2) ease both; backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
.modal { animation: modal-in var(--dur-3) var(--ease-spring) both; }
.menu { animation: menu-in var(--dur-2) var(--ease-out) both; transform-origin: top left; }
.toast { animation: toast-in var(--dur-3) var(--ease-spring) both; }
@keyframes fade-in { from { opacity: 0 } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.96) } }
@keyframes menu-in { from { opacity: 0; transform: scale(.95) translateY(-4px) } }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px) scale(.96) } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } }

/* view switch (browsers with View Transitions) */
::view-transition-old(main), ::view-transition-new(main) { animation-duration: 180ms; }
.main { view-transition-name: main; }

/* ---------- buttons & switches ---------- */
.btn { transition: transform var(--dur-1) var(--ease-spring), background-color var(--dur-1), box-shadow var(--dur-2), filter var(--dur-1); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.primary { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 30%, var(--accent)), var(--accent)); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 18px -8px var(--accent); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, var(--glow); }
.btn.link { background: none; padding: 4px 0; color: var(--link); }
.btn.link.danger-text, .danger-text { color: var(--danger); }
.switch { transition: background-color var(--dur-2); }

/* ---------- auth + boot ---------- */
.auth { position: relative; isolation: isolate; }
.auth-sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.auth-side { background: radial-gradient(120% 90% at 20% 110%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%), radial-gradient(80% 60% at 90% 0%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%), var(--bg-0) !important; }
.auth-mascot { width: min(300px, 70%); height: auto; margin: 10px auto 0; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.auth-card { animation: modal-in 600ms var(--ease-spring) both; background: color-mix(in srgb, var(--bg-2) 88%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px var(--border); }
.auth-brand .wordmark { font-size: 2.6rem; }
.boot { display: grid; place-items: center; align-content: center; gap: 14px; height: 100dvh; background: radial-gradient(60% 50% at 50% 55%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--bg-0); }
.boot .cinder { width: 150px; height: 150px; animation: boot-bounce 1.2s var(--ease-spring) infinite alternate; }
.boot p { color: var(--text-dim); font-weight: 600; letter-spacing: .01em; }
@keyframes boot-bounce { from { transform: translateY(0) scale(1, 1) } to { transform: translateY(-14px) scale(.98, 1.02) } }

/* ---------- chat backdrops (Settings > Appearance) ---------- */
[data-backdrop="dots"] .main-body { background-image: radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; }
[data-backdrop="grid"] .main-body { background-image: linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
[data-backdrop="aurora"] .main-body { background: radial-gradient(70% 50% at 10% 0%, color-mix(in srgb, #2fd6b0 14%, transparent), transparent 70%), radial-gradient(60% 50% at 100% 20%, color-mix(in srgb, #b27bf2 14%, transparent), transparent 70%), var(--bg-2); }
[data-backdrop="dusk"] .main-body { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg-2)), var(--bg-2) 45%); }
[data-backdrop="embers"] .main-body { background: radial-gradient(90% 60% at 50% 120%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg-2); }
.backdrop-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .7; }
.main-body { position: relative; }
.main-body:has(> .backdrop-sparks) > :not(.backdrop-sparks) { position: relative; z-index: 1; }

/* glass panels */
[data-glass="true"] .sidebar, [data-glass="true"] .members, [data-glass="true"] .topbar { background: color-mix(in srgb, var(--bg-1) 72%, transparent) !important; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
[data-glass="true"] .app { background: radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%), var(--bg-0); }

/* density */
[data-density="roomy"] .msg { padding-top: 6px; padding-bottom: 6px; }
[data-density="roomy"] .msg-body { line-height: 1.6; }
[data-density="compact"] .msg { padding-top: 0; padding-bottom: 0; }

/* ---------- profile effects ---------- */
.profile-card, .profile-modal .modal-body { position: relative; }
.fx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; z-index: 0; }
.fx-layer i { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; animation: fx-up linear infinite; opacity: 0; }
.fx-embers i { background: radial-gradient(circle, #ffe27a, #ff7a3d 60%, transparent 70%); box-shadow: 0 0 6px #ff7a3d; }
.fx-snow i { background: #fff; width: 5px; height: 5px; animation-name: fx-down; top: -10px; bottom: auto; }
.fx-stars i { background: radial-gradient(circle, #fff, #ffd08a 50%, transparent 70%); animation-name: fx-twinkle; bottom: auto; }
.fx-bubbles i { width: 10px; height: 10px; border: 1.5px solid #9fe8ff; background: transparent; }
.fx-confetti i { width: 7px; height: 4px; border-radius: 1px; animation-name: fx-down; top: -10px; bottom: auto; }
@keyframes fx-up { 0% { transform: translateY(0) translateX(0); opacity: 0 } 15% { opacity: 1 } 100% { transform: translateY(-260px) translateX(20px); opacity: 0 } }
@keyframes fx-down { 0% { transform: translateY(0) rotate(0); opacity: 0 } 15% { opacity: 1 } 100% { transform: translateY(300px) rotate(260deg); opacity: 0 } }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) } 50% { opacity: 1; transform: scale(1.2) } }

/* ---------- appearance pickers ---------- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pick-tile { display: grid; justify-items: center; gap: 8px; padding: 12px 8px; border-radius: 14px; background: var(--bg-3); border: 2px solid transparent; transition: border-color var(--dur-1), transform var(--dur-1) var(--ease-spring), background-color var(--dur-1); font-size: .85rem; font-weight: 600; }
.pick-tile:hover { transform: translateY(-2px); background: var(--bg-4); }
.pick-tile.on { border-color: var(--accent); box-shadow: var(--glow); }
.pick-tile .swatch { width: 54px; height: 36px; border-radius: 9px; border: 1px solid var(--border); }
.accent-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.accent-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; transition: transform var(--dur-1) var(--ease-spring); }
.accent-dot:hover { transform: scale(1.12); }
.accent-dot.on { border-color: var(--text); }
.preview-card { border-radius: 16px; overflow: hidden; background: var(--bg-3); border: 1px solid var(--border); }

/* ---------- encryption UI ---------- */
.crypto-hero { display: grid; place-items: center; width: 72px; height: 72px; margin: 4px auto 12px; border-radius: 22px; color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.security-card .sec-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.sec-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-text); flex: none; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0 12px; }
.kv dt { color: var(--text-faint); font-size: .85rem; } .kv dd { margin: 0; }
.kv.small code { font-size: .74rem; word-break: break-all; }
code.fp { letter-spacing: .06em; }
.recovery-code { font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: .08em; text-align: center; padding: 16px; margin-top: 12px; border-radius: 12px; background: var(--bg-0); border: 1px dashed var(--accent); user-select: all; }
.safety-code { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 2.1rem; text-align: center; margin: 6px 0 14px; }
.safety-code span { padding: 10px 0; border-radius: 14px; background: var(--bg-3); animation: pop 420ms var(--ease-spring) both; }
.safety-code span:nth-child(2) { animation-delay: 40ms } .safety-code span:nth-child(3) { animation-delay: 80ms } .safety-code span:nth-child(4) { animation-delay: 120ms }
.safety-code span:nth-child(5) { animation-delay: 160ms } .safety-code span:nth-child(6) { animation-delay: 200ms } .safety-code span:nth-child(7) { animation-delay: 240ms } .safety-code span:nth-child(8) { animation-delay: 280ms }
.warn-box { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--text); margin-bottom: 12px; font-size: .92rem; }
.link-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.form-error { color: var(--danger); font-size: .9rem; margin-top: 8px; }
.e2e-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }

/* ---------- calls ---------- */
.ring { animation: fade-in var(--dur-2) both; }
.ring-body { position: relative; }
.ring-pulse { position: relative; display: grid; place-items: center; margin: 10px auto 18px; width: 120px; height: 120px; }
.ring-pulse::before, .ring-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ripple 1.8s var(--ease-out) infinite; }
.ring-pulse::after { animation-delay: .9s; }
@keyframes ripple { from { transform: scale(.85); opacity: .9 } to { transform: scale(1.7); opacity: 0 } }
.tile.speaking, .voice-user.speaking .avatar { box-shadow: 0 0 0 2px var(--success), 0 0 22px -2px var(--success); transition: box-shadow 120ms; }
.tile { transition: transform var(--dur-2) var(--ease-out), box-shadow 120ms; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

/* ---------- admin panel ---------- */
.admin-tabs { position: sticky; top: 0; z-index: 3; padding: 6px 0 10px; margin-bottom: 8px; background: linear-gradient(var(--bg-2) 70%, transparent); }
.admin-tabs .tab.active { background: var(--accent-soft); color: var(--accent); }
.admin-tab-pane { animation: rise var(--dur-2) var(--ease-out) both; }
.cfg-row code { opacity: 0; transition: opacity var(--dur-1); }
.cfg-row:hover code { opacity: .55; }
.cfg-row { transition: background-color var(--dur-1); border-radius: 10px; }
.cfg-row.dirty { box-shadow: inset 3px 0 0 var(--accent); }
.set-nav button { transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-spring); }
.set-nav button:active { transform: scale(.98); }

/* ---------- perks ---------- */
.perk-tag { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; color: #f7c534; background: #f7c53422; letter-spacing: .02em; }
.pick-tile.locked { opacity: .55; }
.pick-tile.locked:hover { opacity: .8; }
.theme-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 12px; }
.theme-slot { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 12px; background: var(--bg-3); font-size: .85rem; font-weight: 600; }
.theme-slot .color { width: 46px; height: 46px; border-radius: 50%; }
.layout-prev { display: grid !important; gap: 2px; padding: 3px; background: var(--bg-0) !important; }
.layout-prev.classic { grid-template-columns: 6px 12px 1fr; } .layout-prev.classic i { background: var(--bg-3); }
.layout-prev.studio { grid-template-columns: 6px 12px 1fr; gap: 3px; background: radial-gradient(circle at 20% 0, var(--accent-soft), var(--bg-0)) !important; } .layout-prev.studio i { background: var(--bg-3); border-radius: 4px; }
.perk-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.perk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--bg-3); border: 1.5px solid transparent; font-weight: 600; font-size: .88rem; transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-1), background-color var(--dur-1); }
.perk-chip:hover { transform: translateY(-1px); }
.perk-chip.on { border-color: #f7c534; background: #f7c53418; color: #f7e3a0; }
.perk-chip.on::before { content: '✦'; color: #f7c534; }

/* ---------- Studio look (perk; the owner's default) ---------- */
@media (min-width: 900px) {
  [data-layout="studio"] .app { background: radial-gradient(60% 50% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), radial-gradient(50% 50% at 100% 100%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%), var(--bg-0); }
  [data-layout="studio"] .app-cols { gap: 10px; padding: 10px 10px 10px 0; }
  [data-layout="studio"] .rail { background: transparent; }
  [data-layout="studio"] .sidebar, [data-layout="studio"] .main, [data-layout="studio"] .members { border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .7); }
  [data-layout="studio"] .sidebar { background: color-mix(in srgb, var(--bg-1) 92%, transparent); }
  [data-layout="studio"] .user-panel { margin: 8px; border-radius: 14px; background: var(--bg-2); }
  [data-layout="studio"] .topbar { border-bottom: 0; height: 58px; }
  [data-layout="studio"] .composer { border-radius: 18px; box-shadow: 0 8px 30px -14px rgba(0, 0, 0, .6); }
  [data-layout="studio"] .side-row.channel { border-radius: 10px; }
  [data-layout="studio"] .side-row.channel.active { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 3px 0 0 var(--accent); }
  [data-layout="studio"] .msg { border-radius: 12px; margin: 0 8px; }
}

/* ---------- Owner HQ ---------- */
.hq { height: 100%; overflow: auto; padding: clamp(16px, 2.4vw, 32px); display: grid; gap: 16px; align-content: start; grid-auto-rows: max-content; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hq > * { animation: rise 520ms var(--ease-out) both; }
.hq > *:nth-child(2) { animation-delay: 50ms } .hq > *:nth-child(3) { animation-delay: 100ms } .hq > *:nth-child(4) { animation-delay: 150ms } .hq > *:nth-child(5) { animation-delay: 200ms } .hq > *:nth-child(6) { animation-delay: 250ms } .hq > *:nth-child(7) { animation-delay: 300ms }
.hq-hero { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding: 22px 26px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%), var(--bg-3); border: 1px solid var(--border); position: relative; overflow: hidden; }
.hq-hero .cinder { width: 120px; height: 120px; flex: none; }
.hq-hero h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.035em; line-height: 1.05; }
.hq-hero p { color: var(--text-dim); margin-top: 6px; }
.hq-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hq-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--bg-2); font-size: .85rem; font-weight: 700; }
.hq-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
.hq-pill.warn i { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.hq-tile { grid-column: span 3; padding: 16px 18px; border-radius: 20px; background: var(--bg-3); border: 1px solid var(--border); display: grid; gap: 2px; transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2); text-align: left; }
.hq-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -22px var(--accent); }
.hq-tile span { color: var(--text-faint); font-weight: 700; font-size: .85rem; }
.hq-tile b { font-family: var(--font-display); font-size: 2.3rem; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hq-tile small { color: var(--text-dim); }
.hq-tile.alert b { color: var(--warning); }
.hq-card { grid-column: span 6; padding: 18px 20px; border-radius: 22px; background: var(--bg-3); border: 1px solid var(--border); min-width: 0; }
.hq-card.wide { grid-column: span 8; } .hq-card.narrow { grid-column: span 4; }
.hq-card h2 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.hq-card canvas { width: 100%; height: 150px; display: block; }
.hq-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.hq-switch:first-of-type { border-top: 0; }
.hq-switch div { display: grid; } .hq-switch small { color: var(--text-faint); }
.seg { display: inline-flex; background: var(--bg-1); border-radius: 99px; padding: 3px; gap: 2px; }
.seg button { padding: 5px 12px; border-radius: 99px; font-weight: 700; font-size: .82rem; color: var(--text-dim); transition: background-color var(--dur-1), color var(--dur-1); }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.hq-person { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.hq-person:first-of-type { border-top: 0; }
.hq-person .who { display: grid; min-width: 0; } .hq-person small { color: var(--text-faint); }
.hq-feed { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.hq-feed li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: .92rem; }
.hq-feed li:first-child { border-top: 0; } .hq-feed small { color: var(--text-faint); }
.hq-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hq-action { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font-weight: 700; transition: transform var(--dur-1) var(--ease-spring), background-color var(--dur-1); }
.hq-action:hover { transform: translateY(-2px); background: var(--bg-4); }
.hq-action .icon { color: var(--accent); }
.rail-item.hq-btn .rail-crown { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #ffe27a, #f7c534 50%, #c98912); color: #3a2a08; font-size: 22px; transition: border-radius var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); box-shadow: 0 6px 20px -8px #f7c534; }
.rail-item.hq-btn:hover .rail-crown, .rail-item.hq-btn.active .rail-crown { border-radius: 16px; }
@media (max-width: 1000px) { .hq-tile { grid-column: span 6; } .hq-card, .hq-card.wide, .hq-card.narrow { grid-column: 1 / -1; } }

/* ---------- your own pictures ---------- */
[data-backdrop="image"] .main-body { background: linear-gradient(color-mix(in srgb, var(--bg-2) 72%, transparent), color-mix(in srgb, var(--bg-2) 86%, transparent)), var(--wallpaper) center / cover no-repeat, var(--bg-2); }
.wallpaper-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.wallpaper-row .pick-tile { width: 110px; }
.crop-stage { display: grid; place-items: center; background: repeating-conic-gradient(#ffffff08 0 25%, transparent 0 50%) 0 0 / 18px 18px; border-radius: 14px; padding: 10px; }
.crop-canvas { cursor: grab; touch-action: none; border-radius: 10px; }
.crop-canvas:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; gap: 10px; margin: 12px 4px 4px; color: var(--text-faint); }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
.ch-icon { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; flex: none; }
.role-icon { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; vertical-align: -3px; margin-left: 4px; }
.pic-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pic-prev { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--border); }
.pic-prev.wide { width: 180px; height: 64px; }
.auth.has-art .auth-side { background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--bg-0) 85%, transparent)), var(--login-art) center / cover no-repeat !important; }
.site-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rail-logo .site-logo-img { width: 32px; height: 32px; border-radius: 10px; }