/* ===== office-controlled parts (all platforms) ===== */
.cfg-no-dj [data-nav="dj"], .cfg-no-shop #bagBtn, .cfg-no-lyrics [data-fsm="lyrics"] { display: none !important; }
.cfg-banner { position: fixed; left: 50%; bottom: 104px; z-index: 900; display: flex; align-items: center; gap: 12px; max-width: min(720px, calc(100vw - 32px));
  padding: 9px 10px 9px 16px; border-radius: 999px; background: rgba(18,19,28,.82); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 18px 50px rgba(0,0,0,.45);
  color: #fff; font-size: 13.5px; font-weight: 600; transform: translate(-50%, 14px); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.cfg-banner.in { transform: translate(-50%, 0); opacity: 1; } .cfg-banner.out { transform: translate(-50%, 14px); opacity: 0; }
@media (max-width: 760px) { .cfg-banner { bottom: 150px; } }
.cfg-banner em { font-style: normal; color: rgba(255,255,255,.6); font-weight: 500; }
.cfg-banner button { height: 30px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: #0B0B10; font: inherit; font-weight: 800; cursor: pointer; }
.cfg-banner button.x { width: 30px; padding: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 17px; }
.cfg-dot { width: 8px; height: 8px; border-radius: 50%; background: #8B7CFF; box-shadow: 0 0 12px #8B7CFF; flex: none; animation: cfgPulse 2.4s ease-in-out infinite; }
.cfg-banner.tone-warn .cfg-dot { background: #F4D35E; box-shadow: 0 0 12px #F4D35E; } .cfg-banner.tone-good .cfg-dot { background: #6EE7B7; box-shadow: 0 0 12px #6EE7B7; }
.cfg-banner.tone-update .cfg-dot { background: #FF5FA2; box-shadow: 0 0 12px #FF5FA2; }
@keyframes cfgPulse { 50% { opacity: .45; transform: scale(.8); } }
.cfg-maint { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px;
  background: radial-gradient(60% 50% at 50% 40%, rgba(123,92,255,.22), transparent 70%), #05060B; color: #fff; }
.cfg-maint h2 { font-size: 34px; letter-spacing: -.03em; } .cfg-maint p { color: rgba(255,255,255,.6); max-width: 420px; line-height: 1.6; }
.cfg-orb { position: relative; width: 120px; height: 120px; margin-bottom: 18px; transform-style: preserve-3d; perspective: 600px; }
.cfg-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(139,124,255,.6); animation: dkSpin 9s linear infinite; }
.cfg-orb i:nth-child(2) { inset: 14px; border-color: rgba(255,95,162,.55); animation-duration: 12s; animation-direction: reverse; }
.cfg-orb i:nth-child(3) { inset: 34px; border: 0; background: radial-gradient(circle at 35% 30%, #fff, #8B7CFF 45%, #2A1E66 80%); box-shadow: 0 0 40px rgba(139,124,255,.6); animation: none; }

/* ===== the Mac and Windows app ===== */
.is-desktop body { -webkit-user-select: none; user-select: none; cursor: default; }
.is-desktop input, .is-desktop textarea, .is-desktop .lyr, .is-desktop [contenteditable] { -webkit-user-select: text; user-select: text; }
.dk-drag { position: fixed; top: 0; left: 0; right: 0; height: 10px; z-index: 950; }
.os-mac .nav-panel { padding-top: 40px; }            /* room for the traffic lights */
.is-desktop .topbar { -webkit-app-region: drag; }
.is-desktop .topbar > * { -webkit-app-region: no-drag; }
.is-desktop ::-webkit-scrollbar { width: 10px; height: 10px; } .is-desktop ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.is-desktop ::-webkit-scrollbar-track { background: transparent; }

/* intro: the VYBE mark on three orbits, then the app rises in */
.dk-intro { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: radial-gradient(55% 55% at 50% 45%, #15112E 0%, #05060B 70%); transition: opacity .8s ease, visibility .8s; }
.dk-intro.out { opacity: 0; visibility: hidden; }
.dk-scene { position: relative; width: 260px; height: 260px; display: grid; place-items: center; perspective: 900px; }
.dk-scene img { width: 96px; height: 96px; border-radius: 26px; filter: drop-shadow(0 22px 40px rgba(123,92,255,.5)); animation: dkMark 1.6s cubic-bezier(.2,.8,.2,1) both; }
.dk-scene b { position: absolute; bottom: -10px; font-size: 15px; letter-spacing: .5em; text-indent: .5em; color: rgba(255,255,255,.75); animation: dkWord 1.4s .35s cubic-bezier(.2,.8,.2,1) both; }
.dk-scene em { position: absolute; bottom: -40px; white-space: nowrap; font-style: normal; font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.45); animation: dkWord 1.4s .7s cubic-bezier(.2,.8,.2,1) both; }
.dk-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); transform-style: preserve-3d; }
.dk-orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; }
.dk-orbit.o1 { transform: rotateX(72deg); animation: dkOrbit1 3.2s linear infinite; border-color: rgba(139,124,255,.5); } .dk-orbit.o1 i { background: #8B7CFF; box-shadow: 0 0 16px #8B7CFF; }
.dk-orbit.o2 { inset: 22px; transform: rotateX(72deg) rotateY(58deg); animation: dkOrbit2 4.4s linear infinite; border-color: rgba(255,95,162,.45); } .dk-orbit.o2 i { background: #FF5FA2; box-shadow: 0 0 16px #FF5FA2; }
.dk-orbit.o3 { inset: 46px; transform: rotateX(72deg) rotateY(-58deg); animation: dkOrbit3 5.6s linear infinite; border-color: rgba(110,231,183,.4); } .dk-orbit.o3 i { background: #6EE7B7; box-shadow: 0 0 16px #6EE7B7; }
@keyframes dkOrbit1 { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes dkOrbit2 { to { transform: rotateX(72deg) rotateY(58deg) rotateZ(360deg); } }
@keyframes dkOrbit3 { to { transform: rotateX(72deg) rotateY(-58deg) rotateZ(-360deg); } }
@keyframes dkMark { from { opacity: 0; transform: translateZ(-180px) rotateY(-30deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes dkWord { from { opacity: 0; transform: translateY(10px); letter-spacing: .9em; } to { opacity: 1; transform: none; } }
@keyframes dkFloat { from { transform: scale(.94); } to { transform: none; } }
@keyframes dkSpin { to { transform: rotate(360deg); } }
.dk-booting .shell { opacity: 0; transform: scale(.985) translateY(10px); }
.is-desktop .shell { transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }

/* page transitions */
.dk-enter { animation: dkPage .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dkPage { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* soft 3D tilt on cards, with a moving light */
.is-desktop .card2, .is-desktop .fcard, .is-desktop .qt { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-style: preserve-3d; will-change: transform; }
.is-desktop .dk-tilt { transition: transform .12s ease-out, box-shadow .3s; box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.is-desktop .card2, .is-desktop .fcard { position: relative; }
.is-desktop .card2::after, .is-desktop .fcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.12), transparent 60%); }
.is-desktop .dk-tilt::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .dk-enter, .dk-scene, .dk-scene img, .dk-scene b, .dk-orbit, .cfg-dot, .cfg-orb i { animation: none !important; } }