/* 4xStudio — "Premium" interface: fresh, sleek and calm (body.modern.premium).
   One clean mint accent, frosted-glass panels, quiet typography.
   The loud MTV look is an easter egg (body.premium.mtv): Konami code, or click the 4X logo 5 times. */

body.modern.premium {
  --fresh: #5eead4; --fresh2: #38bdf8; --freshRGB: 94, 234, 212; --fresh2RGB: 56, 189, 248;
  --accent: var(--fresh); --accentText: #04201b;
  --bg0: #07080b; --bg1: #0b0c11; --bg2: #101218; --bg3: #15171f; --bg4: #1b1e28;
  --line: rgba(255, 255, 255, .06); --line2: rgba(255, 255, 255, .1);
  --text: #f1f4f7; --muted: #8b94a3; --selText: #fff;
  --glass: rgba(15, 17, 23, .74);
  --tl: #090a0e; --tlRow: #0d0f14; --tlRow2: #0b0c11; --tlGrid: rgba(255, 255, 255, .045); --ruler1: #0b0c11; --ruler2: #0b0c11;
  font: 12px 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif; letter-spacing: -.005em;
  background: radial-gradient(1100px 560px at 88% -12%, rgba(var(--freshRGB), .07), transparent 60%),
              radial-gradient(900px 500px at -10% 112%, rgba(var(--fresh2RGB), .05), transparent 60%), #07080b;
}
body.modern.premium #win { background: transparent; }

/* ---- floating glass panels with breathing room ---- */
body.modern.premium .main { gap: 8px; padding: 8px 8px 0; }
body.modern.premium .panel.left, body.modern.premium .panel.right, body.modern.premium .center {
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px rgba(0, 0, 0, .35);
}
body.modern.premium .stage-wrap { background: #050608 radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.3px) 0 0/24px 24px; }
body.modern.premium #stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 70px rgba(0, 0, 0, .6); border-radius: 4px; }
body.modern.premium .timeline { margin: 8px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--glass); backdrop-filter: blur(18px); }
body.modern.premium .hsplit { background: transparent; border: 0; height: 2px; }
body.modern.premium .statusbar { background: transparent; border-top: 0; }
body.modern.premium .titlebar, body.modern.premium .toolbar { background: transparent; border-bottom: 1px solid var(--line); }

body.modern.premium .grp .gh { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
body.modern.premium .grp { border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }

body.modern.premium input[type=text], body.modern.premium input[type=number], body.modern.premium select, body.modern.premium textarea {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line2); border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
body.modern.premium input:focus, body.modern.premium select:focus, body.modern.premium textarea:focus { border-color: rgba(var(--freshRGB), .6); box-shadow: 0 0 0 3px rgba(var(--freshRGB), .14); }
body.modern.premium input[type=range] { accent-color: var(--fresh); }

/* ---- clean, fresh accents ---- */
body.modern.premium .export-btn {
  background: var(--fresh); color: var(--accentText) !important; border: 0 !important; border-radius: 11px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(var(--freshRGB), .22); text-shadow: none; transition: transform .15s ease, box-shadow .2s, filter .2s;
}
body.modern.premium .export-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--freshRGB), .3); filter: brightness(1.05); }
body.modern.premium .export-btn:active { transform: translateY(0); }
body.modern.premium .pbtn.play { background: var(--fresh); color: var(--accentText); box-shadow: 0 8px 22px rgba(var(--freshRGB), .25); transition: transform .15s ease; }
body.modern.premium .pbtn.play:hover { transform: scale(1.05); filter: none; }

body.modern.premium .tbtn { border-radius: 10px; transition: background .15s, transform .15s; }
body.modern.premium .tbtn:hover { background: rgba(255, 255, 255, .06); transform: translateY(-1px); }

body.modern.premium .tab { transition: background .15s, color .15s; }
body.modern.premium .tab.on { background: rgba(255, 255, 255, .06); position: relative; }
body.modern.premium .tab.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--fresh); }
body.modern.premium .tab.on .ti { color: var(--fresh); }

/* BETA: a slim outlined pill */
body.modern.premium .beta-badge { color: var(--fresh); border: 1px solid rgba(var(--freshRGB), .45); background: rgba(var(--freshRGB), .08); opacity: 1; font-weight: 700; }

/* new features: a tiny mint dot */
body.modern.premium [data-new] { position: relative; }
body.modern.premium [data-new]::before { content: ''; position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--fresh);
  box-shadow: 0 0 0 2px var(--bg1), 0 0 8px rgba(var(--freshRGB), .6); pointer-events: none; z-index: 2; }

/* dialogs: glass, clean titles */
body.modern.premium .xwin { background: rgba(13, 15, 20, .9); backdrop-filter: blur(24px); border: 1px solid var(--line2); border-radius: 20px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03) inset; }
body.modern.premium .xwin > .titlebar .tt { font-weight: 600; letter-spacing: .01em; }
body.modern.premium .xbtn.primary { background: var(--fresh); color: var(--accentText); border: 0; font-weight: 700; border-radius: 10px; }
body.modern.premium .xbtn { border-radius: 10px; }
body.modern.premium #modalBg { background: rgba(4, 5, 8, .55); backdrop-filter: blur(4px); }

body.modern.premium .wl-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
body.modern.premium .wl-card { border-radius: 14px; transition: transform .15s ease, border-color .2s; }
body.modern.premium .wl-card:hover { transform: translateY(-2px); border-color: rgba(var(--freshRGB), .55); }
body.modern.premium .lb-card:hover { transform: translateY(-2px); }
body.modern.premium .lb-card.cur, body.modern.premium .lb-card:hover { border-color: rgba(var(--freshRGB), .55); }

body.modern.premium .toast { background: rgba(15, 17, 23, .92); backdrop-filter: blur(14px); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); padding-left: 16px; overflow: hidden; }
body.modern.premium .toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fresh); }

body.modern.premium ::selection { background: rgba(var(--freshRGB), .35); }
body.modern.premium ::-webkit-scrollbar { width: 9px; height: 9px; }
body.modern.premium ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
body.modern.premium ::-webkit-scrollbar-thumb:hover { background: rgba(var(--freshRGB), .4); background-clip: padding-box; }
body.modern.premium ::-webkit-scrollbar-track { background: transparent; }

body.modern.premium.mobile .main { padding: 0; gap: 0; }
body.modern.premium.mobile .center, body.modern.premium.mobile .timeline { border-radius: 0; margin: 0; border-left: 0; border-right: 0; }
body.modern.premium.mobile .m-export { background: var(--fresh); color: var(--accentText); font-weight: 700; }
body.modern.premium.mobile .panel.left, body.modern.premium.mobile .panel.right { border-radius: 20px 20px 0 0; }

.premium-prev { background: #07080b radial-gradient(120px 60px at 85% 0, rgba(var(--freshRGB), .3), transparent 70%); border: 1px solid rgba(255, 255, 255, .1); }
.premium-prev i { left: 0; right: 0; top: 0; height: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.premium-prev b { top: 18px; bottom: 18px; width: 22%; background: rgba(255, 255, 255, .06); border-radius: 6px; left: 6px; }
.premium-prev b + b { left: auto; right: 6px; }
.premium-prev span { left: 34%; right: 34%; top: 22px; height: 8px; border-radius: 4px; background: var(--fresh, #5eead4); }


/* ---- premium palettes (Settings → Palette). Each: accent, a second tint for the background glow, text-on-accent ---- */
body.modern.premium.pal-ice    { --fresh: #7dd3fc; --fresh2: #818cf8; --freshRGB: 125, 211, 252; --fresh2RGB: 129, 140, 248; --accentText: #04131d; }
body.modern.premium.pal-iris   { --fresh: #a78bfa; --fresh2: #f0abfc; --freshRGB: 167, 139, 250; --fresh2RGB: 240, 171, 252; --accentText: #12082b; }
body.modern.premium.pal-rose   { --fresh: #fda4af; --fresh2: #fdba74; --freshRGB: 253, 164, 175; --fresh2RGB: 253, 186, 116; --accentText: #2a0a10; }
body.modern.premium.pal-gold   { --fresh: #e8c27a; --fresh2: #f5e6c4; --freshRGB: 232, 194, 122; --fresh2RGB: 245, 230, 196; --accentText: #1e1606; }
body.modern.premium.pal-lime   { --fresh: #bef264; --fresh2: #5eead4; --freshRGB: 190, 242, 100; --fresh2RGB: 94, 234, 212; --accentText: #142002; }
body.modern.premium.pal-silver { --fresh: #e5e7eb; --fresh2: #94a3b8; --freshRGB: 229, 231, 235; --fresh2RGB: 148, 163, 184; --accentText: #0b0c10; }

/* =====================================================================
   📺 MTV MODE — easter egg (Konami code, or click the 4X logo 5 times)
   ===================================================================== */
body.modern.premium.mtv {
  --mtv: linear-gradient(100deg, #ff2e88 0%, #ff7a3d 32%, #ffd400 58%, #22e4ff 100%);
  --pink: #ff2e88; --yellow: #ffd400; --cyan: #22e4ff;
  --accent: #ff2e88; --accentText: #ffffff; --fresh: #ff2e88; --freshRGB: 255, 46, 136; --fresh2RGB: 34, 228, 255;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(255, 46, 136, .14), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(34, 228, 255, .1), transparent 60%), #060609;
}
body.modern.premium.mtv .export-btn { background: var(--mtv) 0 0/200% 100%; color: #0a0a0f !important; font-weight: 800; box-shadow: 0 6px 22px rgba(255, 46, 136, .4);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background-position .6s; }
body.modern.premium.mtv .export-btn:hover { background-position: 100% 0; transform: rotate(-2deg) scale(1.05); }
body.modern.premium.mtv .pbtn.play { background: var(--mtv); color: #0a0a0f; box-shadow: 0 8px 24px rgba(255, 46, 136, .4); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
body.modern.premium.mtv .pbtn.play:hover { transform: scale(1.08) rotate(-6deg); }
@keyframes x4wobble { 0% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.08); } 55% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
body.modern.premium.mtv .tbtn:hover .ic, body.modern.premium.mtv .tab:hover .ti { animation: x4wobble .45s ease; }
body.modern.premium.mtv .tab.on::after { left: 22%; right: 22%; height: 3px; background: var(--mtv); }
body.modern.premium.mtv .tab.on .ti { color: var(--yellow); }
body.modern.premium.mtv .beta-badge { background: var(--yellow); color: #0a0a0f; border: 0; font-weight: 900; transform: rotate(-8deg); box-shadow: 2px 2px 0 var(--pink); padding: 2px 7px; border-radius: 4px; }
body.modern.premium.mtv #mainLogo svg { filter: drop-shadow(0 0 10px rgba(255, 46, 136, .5)); }
body.modern.premium.mtv [data-new]::before { content: attr(data-new); width: auto; height: auto; top: -3px; right: -2px; font: 900 7.5px 'Segoe UI', sans-serif; letter-spacing: .06em;
  background: var(--yellow); color: #0a0a0f; padding: 1px 4px; border-radius: 3px; transform: rotate(10deg); box-shadow: 1px 1px 0 var(--pink); }
body.modern.premium.mtv .xwin > .titlebar .tt { font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px;
  text-shadow: 2px 2px 0 rgba(255, 46, 136, .55), -1px -1px 0 rgba(34, 228, 255, .45); }
body.modern.premium.mtv .xbtn.primary { background: var(--mtv); color: #0a0a0f; font-weight: 800; }
body.modern.premium.mtv .wl-title::after { content: ' ✦'; background: var(--mtv); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.modern.premium.mtv .wl-card:hover { transform: translateY(-3px) rotate(-.6deg); border-color: var(--pink); }
body.modern.premium.mtv .lb-open { background: var(--yellow); color: #0a0a0f; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--pink); font-weight: 900; }
body.modern.premium.mtv .toast::before { width: 4px; background: var(--mtv); }
body.modern.premium.mtv ::selection { background: rgba(255, 46, 136, .45); }
body.modern.premium.mtv input:focus, body.modern.premium.mtv select:focus { border-color: rgba(255, 46, 136, .6); box-shadow: 0 0 0 3px rgba(255, 46, 136, .15); }
body.modern.premium.mtv input[type=range] { accent-color: var(--pink); }
body.modern.premium.mtv.mobile .m-export { background: var(--mtv); color: #0a0a0f; }
/* the moment you switch it on */
@keyframes x4mtvIn { 0% { filter: hue-rotate(0) saturate(1); } 30% { filter: hue-rotate(90deg) saturate(2); } 60% { filter: hue-rotate(-60deg) saturate(1.6); } 100% { filter: none; } }
body.mtv-flash #win { animation: x4mtvIn .7s ease; }
@keyframes x4spin { to { transform: rotate(360deg); } }
#mainLogo.spin svg { animation: x4spin .6s cubic-bezier(.3, 1.4, .5, 1); }

@media (prefers-reduced-motion: reduce) { body.modern.premium * { animation: none !important; transition: none !important; } }