/* Dedicated cache-safe premium emblems for the homepage 3D modes. */
.studio-preview__topbar{position:absolute;z-index:8;top:16px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}
.studio-modes{position:relative;isolation:isolate;display:flex;gap:8px;margin:0;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(145deg,rgba(15,20,27,.97),rgba(3,6,10,.96));box-shadow:0 22px 65px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.1),0 0 36px rgba(255,20,55,.045);backdrop-filter:blur(18px);pointer-events:auto}
.studio-modes::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 32%,transparent 68%,rgba(255,34,64,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.studio-modes::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(90deg,#000,transparent 44%,#000);pointer-events:none}
.studio-modes button{position:relative;isolation:isolate;display:grid;grid-template-columns:58px minmax(62px,1fr) 7px;align-items:center;gap:9px;min-width:166px;min-height:78px;padding:9px 12px 9px 9px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.055),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008));color:#7f8996;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.06);cursor:pointer;overflow:hidden;transition:color .25s,border-color .25s,background .25s,transform .25s,box-shadow .25s}
.studio-modes button::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.12) 43%,transparent 70%);transform:translateX(-125%);opacity:0;pointer-events:none}
.studio-modes button::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#ff1739 25%,#ff6077 50%,#ff1739 75%,transparent);box-shadow:0 0 14px rgba(255,25,58,.9);opacity:0;transform:scaleX(.35);transition:opacity .25s,transform .25s}
.studio-modes button:hover{color:#fff;transform:translateY(-2px);border-color:rgba(255,87,111,.3)}
.studio-modes button.is-active{border-color:rgba(255,50,82,.62);background:radial-gradient(circle at 21% 28%,rgba(255,83,108,.3),transparent 36%),linear-gradient(145deg,rgba(119,7,29,.82),rgba(25,4,10,.9));color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 0 38px rgba(255,21,57,.11),0 14px 38px rgba(175,0,27,.33),0 0 32px rgba(255,19,55,.1)}
.studio-modes button.is-active::before{opacity:1;animation:studioEmblemScan 3.6s ease-in-out infinite}
.studio-modes button.is-active::after{opacity:1;transform:scaleX(1)}
.studio-modes .studio-mode__index{position:absolute;z-index:4;left:7px;top:7px;display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(255,81,106,.2);border-radius:8px;background:#12161d;color:#ff5a72;font-size:6px;font-style:normal;font-weight:900;letter-spacing:.07em;box-shadow:0 5px 12px rgba(0,0,0,.45)}
.studio-modes button.is-active .studio-mode__index{border-color:rgba(255,99,120,.58);background:linear-gradient(145deg,#c9193a,#5a0716);color:#fff;box-shadow:0 0 14px rgba(255,35,68,.5)}
.studio-mode__visual{grid-column:1;position:relative;display:grid;place-items:center;width:58px;height:50px;border:0;border-radius:0;background:none;box-shadow:none;color:#909ba8;transition:color .25s,transform .25s}
.studio-mode__visual::before{display:none}
.studio-mode__visual::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.42;filter:blur(.2px)}
.studio-mode__visual svg{width:54px;height:36px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.studio-mode__visual .mode-icon-fill{fill:rgba(255,255,255,.025);stroke-width:1.1}.studio-mode__visual .mode-icon-light{stroke:#ff4966;stroke-width:2;filter:drop-shadow(0 0 4px rgba(255,42,74,.75))}
.studio-modes button:hover .studio-mode__visual{color:#d8dee6;transform:translateY(-1px) scale(1.035)}
.studio-modes button.is-active .studio-mode__visual{color:#f6f8fb;filter:drop-shadow(0 0 8px rgba(255,35,68,.32));transform:translateY(-1px) scale(1.05)}
.studio-modes .studio-mode__copy{grid-column:2;display:grid;padding:0;border:0;border-radius:0;text-align:left;line-height:1}.studio-modes .studio-mode__copy strong{color:inherit;font-size:12px;font-weight:900;letter-spacing:.075em;text-transform:uppercase}.studio-modes .studio-mode__copy small{margin-top:7px;color:#717c89;font-size:6.5px;font-weight:750;letter-spacing:.15em;text-transform:uppercase}.studio-modes button.is-active .studio-mode__copy small{color:#d3d7dd}
.studio-mode__signal{grid-column:3;width:6px;height:6px;border:1px solid #5d6875;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.02)}.studio-modes button.is-active .studio-mode__signal{border-color:#ff536d;background:#ff2d4d;box-shadow:0 0 0 4px rgba(255,45,77,.1),0 0 13px rgba(255,45,77,.9);animation:studioEmblemPulse 1.9s ease-in-out infinite}
@keyframes studioEmblemScan{0%,35%{transform:translateX(-125%)}70%,100%{transform:translateX(125%)}}@keyframes studioEmblemPulse{50%{opacity:.45;transform:scale(.72)}}
@media(max-width:1180px){.studio-modes button{grid-template-columns:49px minmax(50px,1fr) 6px;min-width:142px;min-height:70px;padding:7px}.studio-mode__visual{width:48px;height:48px}.studio-mode__visual svg{width:40px;height:31px}}
@media(max-width:700px){.studio-preview__topbar{top:12px;left:10px;right:10px}.studio-modes{width:100%;gap:5px;padding:5px;border-radius:16px}.studio-modes button{grid-template-columns:1fr 6px;grid-template-rows:44px auto;min-width:0;min-height:78px;padding:6px 5px;gap:2px 5px}.studio-modes .studio-mode__index{left:5px;top:5px;width:18px;height:18px;font-size:5px}.studio-mode__visual{grid-column:1;grid-row:1;width:43px;height:43px;margin:auto}.studio-mode__visual svg{width:36px;height:28px}.studio-modes .studio-mode__copy{grid-column:1;grid-row:2;text-align:center}.studio-modes .studio-mode__copy strong{font-size:9px}.studio-modes .studio-mode__copy small{display:none}.studio-mode__signal{grid-column:2;grid-row:1/3;align-self:center}.studio-preview__live{display:none}}
@media(prefers-reduced-motion:reduce){.studio-modes button.is-active::before,.studio-modes button.is-active .studio-mode__signal{animation:none!important}}

/* Text-only mode selector: no pictograms, number badges or status dots. */
.studio-modes button{display:flex;align-items:center;justify-content:center;min-width:132px;min-height:66px;padding:10px 18px;text-align:center}
.studio-modes .studio-mode__index,.studio-modes .studio-mode__visual,.studio-modes .studio-mode__signal{display:none!important}
.studio-modes .studio-mode__copy{display:grid!important;grid-column:auto;text-align:center!important}
.studio-modes .studio-mode__copy strong{font-size:12px;letter-spacing:.08em}
.studio-modes .studio-mode__copy small{margin-top:6px;font-size:7px;letter-spacing:.14em}