/* Studio page — compact center card flow (original; layout feel similar to contemporary patcher UIs) */
.tool-page{min-height:100vh}
.tool-shell{padding:28px 0 80px}
.tool-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.tool-stage{max-width:560px;margin:0 auto}
.drop-card{position:relative;display:block;border:1px dashed rgba(255,255,255,.16);border-radius:28px;padding:56px 24px 40px;text-align:center;cursor:pointer;background:radial-gradient(80% 70% at 50% 0%,rgba(78,161,255,.1),rgba(255,255,255,.02));overflow:hidden;transition:border-color .25s,transform .25s var(--ease)}
.drop-card:hover,.drop-card.over{border-color:rgba(78,161,255,.55);transform:scale(1.01)}
.drop-glow{position:absolute;inset:-40%;background:radial-gradient(circle at 50% 30%,rgba(78,161,255,.18),transparent 55%);pointer-events:none}
.drop-icon{position:relative;z-index:1;width:56px;height:56px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:1.4rem}
.drop-card h2{position:relative;z-index:1;margin:0;font-size:1.45rem}
.drop-card p{position:relative;z-index:1}
.accent-link{color:var(--a1);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(78,161,255,.35)}
.panel{border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.03);padding:22px}
.mode-tabs{display:flex;gap:6px;padding:5px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:14px}
.mode-tabs button{flex:1;border:0;background:none;color:var(--mut);padding:10px 8px;border-radius:10px;font:650 .88rem inherit;cursor:pointer}
.mode-tabs button.on{background:var(--grad);color:#06121f}
.prepare-btn{width:100%;margin-top:18px;padding:14px 20px;font-size:1.02rem;border-radius:16px}
.prog.big{height:10px;border-radius:99px}
.stage-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.stage-list li{display:flex;align-items:center;gap:10px;color:var(--mut2);font-size:.88rem}
.stage-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15)}
.stage-list li.on{color:var(--txt)}.stage-list li.on::before{background:var(--a1);box-shadow:0 0 10px var(--a1)}
.stage-list li.done{color:var(--ok)}.stage-list li.done::before{background:var(--ok)}
.result-hero{text-align:center;padding:10px 0 6px}
.ok-orb{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:rgba(74,222,128,.15);color:var(--ok);font-size:1.4rem;font-weight:800;border:1px solid rgba(74,222,128,.35)}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:16px 0;text-align:center}
.result-grid small{display:block;color:var(--mut);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
.result-grid b{font-size:.95rem}
.drag-overlay{position:fixed;inset:0;z-index:80;background:rgba(7,9,13,.82);backdrop-filter:blur(10px);display:grid;place-items:center;text-align:center;border:2px dashed rgba(78,161,255,.5)}
.drag-overlay h2{font-size:2rem;margin:0 0 8px}
@media(max-width:600px){.result-grid{grid-template-columns:repeat(2,1fr)}.tool-stage{padding:0 4px}}

/* license gate */
.tool-stage{position:relative}
.lock{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(7,9,13,.55);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px);border-radius:28px}
.studio-locked #drop{pointer-events:none;filter:saturate(.6) brightness(.8)}
.lock-card{max-width:440px;text-align:center;padding:32px 28px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -30px rgba(124,92,255,.5)}
.lock-card h2{margin:12px 0 6px;font-size:1.5rem}.lock-card p{margin:0 0 20px}.lock-note{font-size:.85rem;margin:16px 0 0!important}
.lock-ic{width:56px;height:56px;margin:0 auto;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 12px 40px -10px rgba(124,92,255,.7)}
.keybtn{gap:7px}.btn.ghost{background:transparent}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;background:rgba(4,6,10,.7);backdrop-filter:blur(8px);animation:mfade .25s ease}
.modal-card{position:relative;width:100%;max-width:440px;padding:28px;border-radius:22px;background:#0d121b;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(124,92,255,.15);animation:mpop .3s var(--ease)}
.modal-card h3{margin:0 0 6px;font-size:1.25rem}.modal-card .keyin{width:100%;margin:14px 0 6px;text-align:center}
.modal-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--mut);font-size:1.5rem;cursor:pointer}
.kmsg{min-height:1.2em;margin:0 0 12px;color:#ff7a90;font-size:.88rem;text-align:center}
@keyframes mfade{from{opacity:0}}@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@media(max-width:560px){.tool-top .row{flex-wrap:wrap;justify-content:flex-start}.lock{border-radius:20px}.lock-card{padding:26px 20px}}
.studio-locked #stagewrap{min-height:440px}