:root {
    --mix-pink: #ec4899;
    --mix-purple: #8b5cf6;
    --mix-cyan: #22d3ee;
    --mix-ink: #050816;
}

body.mix-page {
    background: #070a18;
    color: #fff;
    overflow-x: hidden;
}

.mix-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(circle at 12% 12%, rgba(236, 72, 153, .15), transparent 28%),
        radial-gradient(circle at 86% 28%, rgba(34, 211, 238, .12), transparent 30%),
        radial-gradient(circle at 48% 92%, rgba(139, 92, 246, .16), transparent 33%),
        #070a18;
}

.mix-shell { width: min(1480px, calc(100% - 2rem)); margin: 0 auto; }
.mix-glass {
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 24px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mix-hero {
    min-height: 430px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mix-hero-art { position: absolute; inset: 0; z-index: -2; }
.mix-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .76; transform: scale(1.02); animation: hero-drift 16s ease-in-out infinite alternate; }
.mix-hero-art::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg,#070a18 3%,rgba(7,10,24,.92) 31%,rgba(7,10,24,.2) 70%), linear-gradient(0deg,#070a18 0%,transparent 42%); }
@keyframes hero-drift { to { transform: scale(1.07) translate3d(-1%, -.5%, 0); } }
.mix-kicker { display:inline-flex; align-items:center; gap:.55rem; padding:.48rem .8rem; border-radius:999px; background:rgba(236,72,153,.12); border:1px solid rgba(244,114,182,.35); color:#f9a8d4; font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.mix-title { font-size:clamp(3.3rem,9vw,7.6rem); line-height:.82; letter-spacing:-.065em; font-weight:950; }
.mix-gradient-text { background:linear-gradient(90deg,#fff 0%,#f9a8d4 34%,#c4b5fd 67%,#67e8f9 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mix-eq { display:flex; align-items:flex-end; gap:4px; height:28px; }
.mix-eq i { display:block; width:4px; border-radius:4px; background:linear-gradient(#67e8f9,#ec4899); animation:eq 1.05s ease-in-out infinite alternate; }
.mix-eq i:nth-child(1){height:35%}.mix-eq i:nth-child(2){height:85%;animation-delay:.15s}.mix-eq i:nth-child(3){height:55%;animation-delay:.3s}.mix-eq i:nth-child(4){height:100%;animation-delay:.45s}.mix-eq i:nth-child(5){height:45%;animation-delay:.6s}
@keyframes eq { to { height:18%; filter:hue-rotate(45deg); } }

.mix-layout { display:grid; grid-template-columns:minmax(290px, .82fr) minmax(0, 1.45fr); gap:1.25rem; align-items:start; padding-bottom:7rem; }
.mix-panel-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; font-weight:900; color:#94a3b8; }
.mix-source-list { max-height:690px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(236,72,153,.5) transparent; }
.mix-source-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:.8rem; align-items:center; padding:.78rem; border-radius:1rem; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); transition:.25s ease; }
.mix-source-card:hover { transform:translateY(-2px); border-color:rgba(236,72,153,.38); background:rgba(255,255,255,.065); }
.mix-source-card.is-added { opacity:.52; }
.mix-cover { width:58px; height:58px; object-fit:cover; border-radius:.78rem; background:linear-gradient(135deg,#7c3aed,#ec4899); box-shadow:0 8px 25px rgba(0,0,0,.28); }
.mix-source-meta { min-width:0; }
.mix-source-meta h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:850; }
.mix-mini-era { height:4px; display:flex; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }

.mix-btn { display:inline-flex; align-items:center; justify-content:center; gap:.48rem; border-radius:.85rem; font-weight:850; transition:.22s ease; border:1px solid rgba(255,255,255,.1); }
.mix-btn:hover { transform:translateY(-2px); filter:brightness(1.12); }
.mix-btn:active { transform:translateY(0) scale(.98); }
.mix-btn-primary { color:#fff; background:linear-gradient(120deg,#ec4899,#8b5cf6); box-shadow:0 12px 30px rgba(168,85,247,.24); }
.mix-btn-cyan { color:#03131a; background:linear-gradient(120deg,#67e8f9,#22d3ee); box-shadow:0 12px 30px rgba(34,211,238,.18); }
.mix-btn-ghost { color:#e2e8f0; background:rgba(255,255,255,.055); }

.mix-ai-composer { position:relative; overflow:hidden; }
.mix-ai-composer::after { content:""; position:absolute; width:170px; height:170px; right:-70px; top:-90px; border-radius:50%; background:#ec4899; filter:blur(70px); opacity:.28; pointer-events:none; }
.mix-ai-mascot { width:86px; height:86px; object-fit:contain; animation:mascot-float 4s ease-in-out infinite; filter:drop-shadow(0 12px 25px rgba(236,72,153,.28)); }
@keyframes mascot-float { 50% { transform:translateY(-7px) rotate(2deg); } }
.mix-ai-mascot-wrap { width:86px; height:86px; flex:none; position:relative; display:grid; place-items:center; }
.mix-ai-aura { position:absolute; inset:10px; border-radius:50%; background:linear-gradient(135deg,#ec4899,#8b5cf6,#22d3ee); filter:blur(18px); opacity:.3; animation:ai-aura 2.8s ease-in-out infinite; }
@keyframes ai-aura { 50% { opacity:.65; transform:scale(1.25) rotate(30deg); } }
.mix-ai-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.mix-ai-stars i { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 10px #f0abfc; opacity:0; animation:ai-star 4s ease-in-out infinite; }
.mix-ai-stars i:nth-child(1){left:9%;top:15%}.mix-ai-stars i:nth-child(2){left:78%;top:8%;animation-delay:.8s}.mix-ai-stars i:nth-child(3){left:91%;top:48%;animation-delay:1.6s}.mix-ai-stars i:nth-child(4){left:12%;top:72%;animation-delay:2.4s}.mix-ai-stars i:nth-child(5){left:68%;top:88%;animation-delay:3.2s}
@keyframes ai-star { 0%,100%{opacity:0;transform:scale(.2) rotate(0)} 45%{opacity:1;transform:scale(2) rotate(90deg)} }
.mix-ai-progress { display:flex; align-items:center; }
.mix-ai-progress span { width:25px; height:25px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.13); color:#64748b; background:#0b1022; font:900 .67rem/1 monospace; transition:.35s ease; }
.mix-ai-progress span.active { color:#fff; border-color:#ec4899; background:linear-gradient(135deg,#ec4899,#8b5cf6); box-shadow:0 0 0 4px rgba(236,72,153,.1),0 0 18px rgba(236,72,153,.35); transform:scale(1.08); }
.mix-ai-progress span.done { color:#04151c; border-color:#67e8f9; background:#67e8f9; }
.mix-ai-progress i { height:2px; flex:1; background:rgba(255,255,255,.08); position:relative; overflow:hidden; }
.mix-ai-progress i::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#ec4899,#22d3ee); transform:translateX(-105%); transition:transform .5s ease; }
.mix-ai-progress i.done::after { transform:translateX(0); }
.mix-ai-step { display:none; }
.mix-ai-step.active { display:block; animation:ai-step-in .42s cubic-bezier(.2,.8,.2,1); }
@keyframes ai-step-in { from{opacity:0;transform:translateX(18px) scale(.98);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }
.mix-ai-question { display:flex; align-items:center; gap:.55rem; margin-bottom:.75rem; font-size:.86rem; font-weight:900; color:#f8fafc; }
.mix-ai-question svg { width:17px; height:17px; color:#f472b6; }
.mix-ai-textarea { width:100%; padding:.85rem; color:#fff; font-size:.86rem; resize:none; outline:none; border-radius:.9rem; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.34); transition:.25s; }
.mix-ai-textarea:focus { border-color:rgba(236,72,153,.65); box-shadow:0 0 0 3px rgba(236,72,153,.09),inset 0 0 30px rgba(139,92,246,.05); }
.mix-ai-textarea.mix-ai-pulse { animation:ai-input-pulse .55s ease; }
@keyframes ai-input-pulse { 50%{transform:scale(1.015);box-shadow:0 0 0 4px rgba(236,72,153,.14),0 0 28px rgba(236,72,153,.16)} }
.mix-ai-chip { padding:.38rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045); color:#cbd5e1; font-size:.65rem; font-weight:750; transition:.2s; }
.mix-ai-chip:hover { color:#fff; border-color:rgba(236,72,153,.45); transform:translateY(-1px); background:rgba(236,72,153,.1); }
.mix-ai-field-label { margin-bottom:.4rem; color:#64748b; font-size:.62rem; line-height:1; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.mix-ai-year-control { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; padding:.7rem; border-radius:.85rem; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.07); }
.mix-ai-option-grid { display:grid; gap:.45rem; }
.mix-ai-option-grid.three { grid-template-columns:repeat(3,1fr); }
.mix-ai-option { min-width:0; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem; padding:.55rem .3rem; border-radius:.75rem; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:#94a3b8; transition:.22s ease; }
.mix-ai-option svg { width:18px; height:18px; margin-bottom:.15rem; }
.mix-ai-option b { font-size:.7rem; color:#e2e8f0; }
.mix-ai-option small { font-size:.56rem; line-height:1.2; }
.mix-ai-option:hover,.mix-ai-option.selected { transform:translateY(-2px); border-color:rgba(236,72,153,.5); background:linear-gradient(135deg,rgba(236,72,153,.14),rgba(139,92,246,.12)); color:#f9a8d4; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.mix-ai-option.selected { box-shadow:inset 0 0 0 1px rgba(244,114,182,.18),0 8px 22px rgba(0,0,0,.2); }
.mix-ai-option-grid.compact .mix-ai-option { min-height:45px; }
.mix-ai-role-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem; }
.mix-ai-role { padding:.55rem; border:1px solid rgba(255,255,255,.075); border-radius:.7rem; background:rgba(255,255,255,.03); color:#94a3b8; font-size:.68rem; font-weight:800; transition:.2s; }
.mix-ai-role:hover,.mix-ai-role.selected { color:#fff; border-color:rgba(34,211,238,.42); background:rgba(34,211,238,.09); transform:translateY(-1px); }
.mix-ai-toggle { display:grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:.65rem; border:1px solid rgba(255,255,255,.075); background:rgba(0,0,0,.24); }
.mix-ai-toggle button { padding:.48rem .2rem; border-radius:.48rem; color:#64748b; font-size:.62rem; font-weight:850; transition:.2s; }
.mix-ai-toggle button.selected { color:#fff; background:linear-gradient(135deg,rgba(236,72,153,.32),rgba(139,92,246,.3)); }
.mix-ai-summary { padding:.7rem; border-radius:.8rem; background:linear-gradient(120deg,rgba(34,211,238,.07),rgba(139,92,246,.08)); border:1px solid rgba(34,211,238,.15); color:#cbd5e1; font-size:.67rem; line-height:1.55; }
.mix-ai-summary strong { color:#67e8f9; }
.mix-ai-record { width:78px; height:78px; border-radius:50%; position:relative; background:repeating-radial-gradient(circle,#0b1022 0 7px,#202541 8px 10px); box-shadow:0 0 0 5px rgba(236,72,153,.1),0 0 35px rgba(236,72,153,.28); animation:disc-spin 1.7s linear infinite; }
.mix-ai-record::after { content:""; position:absolute; inset:29px; border-radius:50%; background:linear-gradient(135deg,#ec4899,#8b5cf6); box-shadow:0 0 10px #ec4899; }
.mix-ai-record span { position:absolute; width:42px; height:3px; right:-28px; top:17px; z-index:2; border-radius:4px; background:#94a3b8; transform:rotate(28deg); transform-origin:right center; }
.mix-ai-loading-bar { height:5px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); }
.mix-ai-loading-bar i { display:block; width:45%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ec4899,#8b5cf6,#22d3ee); animation:ai-loading 1.4s ease-in-out infinite alternate; }
@keyframes ai-loading { from{transform:translateX(-30%)} to{transform:translateX(150%)} }
.mix-ai-success,.mix-ai-error { width:64px;height:64px;display:grid;place-items:center;border-radius:50%; }
.mix-ai-success { color:#022c22;background:#6ee7b7;box-shadow:0 0 0 8px rgba(16,185,129,.09),0 0 30px rgba(16,185,129,.28);animation:ai-success .55s cubic-bezier(.2,1.7,.4,1); }
.mix-ai-error { color:#fff;background:linear-gradient(135deg,#f43f5e,#8b5cf6);box-shadow:0 0 30px rgba(244,63,94,.3);animation:ai-error 1.1s ease-in-out infinite; }
.mix-ai-success svg,.mix-ai-error svg { width:28px;height:28px; }
@keyframes ai-success { from{transform:scale(0) rotate(-90deg)} }
@keyframes ai-error { 50%{transform:translateX(3px) rotate(3deg)} }
.mix-game-tag { display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .42rem;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#94a3b8;font-size:.57rem;font-weight:800;text-transform:capitalize; }
.mix-game-tag svg { width:10px;height:10px;color:#c4b5fd; }
.mix-game-tag.verified { color:#6ee7b7;border-color:rgba(16,185,129,.22);background:rgba(16,185,129,.08); }

.mix-deck { min-height:420px; border:1px dashed rgba(168,85,247,.32); border-radius:1.35rem; padding:.75rem; background:rgba(4,7,20,.42); }
.mix-deck.drag-over { border-color:#22d3ee; background:rgba(34,211,238,.06); box-shadow:inset 0 0 35px rgba(34,211,238,.08); }
.mix-empty { min-height:370px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; color:#64748b; }
.mix-empty-disc { width:92px; height:92px; border-radius:50%; background:radial-gradient(circle,#070a18 0 10%,#c026d3 11% 15%,#14172b 16% 35%,#8b5cf6 36% 38%,#101426 39%); box-shadow:0 0 45px rgba(168,85,247,.25); animation:disc-spin 8s linear infinite; }
@keyframes disc-spin { to { transform:rotate(360deg); } }

.mix-block { position:relative; display:grid; grid-template-columns:36px 64px minmax(0,1fr) auto; gap:.85rem; align-items:center; padding:1rem; border-radius:1.1rem; border:1px solid rgba(255,255,255,.095); background:linear-gradient(120deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); margin-bottom:.65rem; transition:transform .22s ease,border-color .22s ease,opacity .22s ease; animation:block-in .36s cubic-bezier(.2,.8,.2,1); }
.mix-block:last-child { margin-bottom:0; }
.mix-block:hover { border-color:rgba(196,181,253,.38); }
.mix-block.dragging { opacity:.42; transform:scale(.98); }
.mix-block.is-ai { background:linear-gradient(120deg,rgba(236,72,153,.13),rgba(124,58,237,.09),rgba(34,211,238,.05)); border-color:rgba(236,72,153,.23); }
.mix-block.is-ai.is-loading { overflow:hidden; animation:ai-card-breathe 1.8s ease-in-out infinite; }
.mix-block.is-ai.is-loading::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.13) 45%,transparent 70%); transform:translateX(-120%); animation:ai-card-scan 1.7s ease-in-out infinite; }
@keyframes ai-card-breathe { 50%{border-color:rgba(34,211,238,.52);box-shadow:0 16px 40px rgba(124,58,237,.2),0 0 24px rgba(34,211,238,.09)} }
@keyframes ai-card-scan { to{transform:translateX(120%)} }
@keyframes block-in { from { opacity:0; transform:translateY(15px) scale(.98); } }
.mix-drag { cursor:grab; color:#64748b; padding:.6rem .2rem; }
.mix-drag:active { cursor:grabbing; }
.mix-block-controls { display:grid; grid-template-columns:minmax(125px,.7fr) minmax(180px,1fr); gap:1rem; margin-top:.8rem; }
.mix-control-label { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:#94a3b8; margin-bottom:.45rem; }
.mix-range { width:100%; accent-color:#ec4899; cursor:pointer; }
.mix-year-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.mix-year-pill { padding:.42rem .55rem; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.07); border-radius:.65rem; font:700 .72rem/1 monospace; color:#c4b5fd; text-align:center; }
.mix-block-actions { display:flex; align-items:center; gap:.35rem; }
.mix-icon-btn { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:.7rem; color:#94a3b8; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); transition:.2s; }
.mix-icon-btn:hover { color:#fff; background:rgba(255,255,255,.1); transform:translateY(-1px); }
.mix-icon-btn.danger:hover { color:#fda4af; background:rgba(244,63,94,.1); }

.mix-timeline { display:flex; height:12px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 4px rgba(0,0,0,.45); }
.mix-timeline span { min-width:5px; position:relative; transition:flex .35s ease; }
.mix-timeline span::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:translateX(-100%); animation:timeline-shine 4s linear infinite; }
@keyframes timeline-shine { to { transform:translateX(100%); } }

.mix-segmented { display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border-radius:.9rem; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.08); }
.mix-segmented button { padding:.62rem .55rem; border-radius:.68rem; color:#94a3b8; font-size:.74rem; font-weight:850; transition:.2s; }
.mix-segmented button.active { background:linear-gradient(120deg,rgba(236,72,153,.28),rgba(139,92,246,.28)); color:#fff; box-shadow:0 5px 15px rgba(0,0,0,.25); }
.mix-check { display:flex; align-items:center; gap:.7rem; padding:.7rem .75rem; border:1px solid rgba(255,255,255,.075); border-radius:.8rem; background:rgba(255,255,255,.03); cursor:pointer; }
.mix-check input { width:1.05rem; height:1.05rem; accent-color:#ec4899; }
.mix-sticky-actions { position:sticky; bottom:1rem; z-index:15; }
.mix-destination { min-height:76px; flex:1; }
.mix-destination img { max-width:110px; max-height:30px; object-fit:contain; }
.mix-toast { position:fixed; left:50%; bottom:1.5rem; z-index:100; transform:translate(-50%,130%); opacity:0; padding:.82rem 1rem; border-radius:.9rem; background:rgba(15,23,42,.96); border:1px solid rgba(255,255,255,.13); box-shadow:0 18px 50px rgba(0,0,0,.45); font-weight:750; transition:.3s ease; max-width:min(92vw,520px); }
.mix-toast.show { transform:translate(-50%,0); opacity:1; }
.mix-toast.error { border-color:rgba(244,63,94,.45); color:#fecdd3; }
.mix-loader { width:16px; height:16px; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:loader .7s linear infinite; }
@keyframes loader { to { transform:rotate(360deg); } }

@media (max-width: 1023px) {
    .mix-layout { grid-template-columns:1fr; }
    .mix-source-list { max-height:430px; }
    .mix-hero { min-height:390px; }
}
@media (max-width: 700px) {
    .mix-shell { width:min(100% - 1rem,1480px); }
    .mix-hero { min-height:480px; }
    .mix-hero-art::after { background:linear-gradient(0deg,#070a18 2%,rgba(7,10,24,.7) 52%,rgba(7,10,24,.45)); }
    .mix-hero-art img { object-position:68% center; opacity:.52; }
    .mix-block { grid-template-columns:28px 52px minmax(0,1fr); padding:.8rem; gap:.6rem; }
    .mix-block > .mix-cover { width:52px; height:52px; }
    .mix-block-actions { grid-column:2 / -1; justify-content:flex-end; }
    .mix-block-controls { grid-template-columns:1fr; }
    .mix-sticky-actions { position:relative; bottom:auto; }
    .mix-destinations { flex-direction:column; }
    .mix-destination { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }
}