/* =====================================================================
   Inside the display: a real-looking macOS desktop. Every size is in
   cqw (1cqw = 1% of the screen width) so the whole UI scales together.
   Proportions are macOS Sequoia at ~1.2× for legibility.
   ===================================================================== */

.screen {
  position: relative;
  aspect-ratio: 1512 / 982;
  overflow: hidden;
  container-type: inline-size;
  border-radius: .7cqw .7cqw .3cqw .3cqw;
  background: #000;
  font-family: var(--font-sf);
  letter-spacing: 0;
  color: #1d1d1f;
  user-select: none; -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
}
.wallpaper { position: absolute; inset: 0; background: #6a7bd8 url("../img/wallpaper.jpg") center/cover no-repeat; }

/* ---------- Menu bar ---------- */
.mb {
  position: absolute; inset: 0 0 auto 0; z-index: 26;
  height: 2.05cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25cqw 0 1.45cqw;
  font-size: .98cqw; color: #fff;
  background: linear-gradient(rgba(20, 20, 60, .18), rgba(20,20,60,.04));
  backdrop-filter: blur(1.5cqw) saturate(160%); -webkit-backdrop-filter: blur(1.5cqw) saturate(160%);
  text-shadow: 0 0 .5cqw rgba(0, 0, 40, .25);
}
.mb-l, .mb-r { display: flex; align-items: center; }
.mb-apple { width: 1.12cqw; height: 1.12cqw; margin-right: 1.55cqw; margin-top: -.12cqw; }
.mb-app { font-weight: 700; margin-right: 1.55cqw; }
.mb-menus { display: flex; gap: 1.55cqw; font-weight: 450; }
.mb-r { gap: 1.2cqw; }
.mb-r svg { width: 1.12cqw; height: 1.12cqw; }
.mb-r .mb-batt { width: 1.9cqw; }
.mb-swaey { width: 1.5cqw; height: 1.5cqw; border-radius: .35cqw; background: rgba(0,0,0,.35); }
.mb-swaey .face-svg { width: 100%; height: 100%; }
.mb-focus { display: none; }
.screen.dnd .mb-focus { display: block; }
.mb-clock { font-variant-numeric: tabular-nums; font-weight: 450; }

.scr-notch {
  position: absolute; z-index: 40; top: 0; left: 50%; transform: translateX(-50%);
  width: 12.4cqw; height: 2.05cqw;
  background: #000; border-radius: 0 0 .75cqw .75cqw;
}
.scr-notch::before, .scr-notch::after { content: ""; position: absolute; top: 0; width: .45cqw; height: .45cqw; }
.scr-notch::before { left: -.45cqw; background: radial-gradient(circle at 0 100%, transparent .43cqw, #000 .45cqw); }
.scr-notch::after { right: -.45cqw; background: radial-gradient(circle at 100% 100%, transparent .43cqw, #000 .45cqw); }
.scr-notch i { position: absolute; left: 50%; top: 50%; width: .5cqw; height: .5cqw; margin: -.25cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2b3552, #07080c 70%); }

.island-host--screen { left: 50%; top: 0; width: 0; height: 0; font-size: 1.16cqw; z-index: 45; }
.island-host--screen .island { --w-closed: 10.7em; --h-closed: 1.77em; }

/* ---------- Desktop icons ---------- */
.scr-icons { position: absolute; z-index: 5; right: 1.6cqw; top: 3.6cqw; display: flex; flex-direction: column; gap: 1.5cqw; align-items: center; }
.scr-icons span { display: flex; flex-direction: column; align-items: center; gap: .35cqw; width: 8cqw; font-size: .82cqw; font-weight: 500; color: #fff; text-align: center; text-shadow: 0 .08cqw .25cqw rgba(0,0,0,.6); line-height: 1.2; }
.scr-icons img { width: 4.4cqw; height: 4.4cqw; filter: drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.25)); }

.scr-desktop { position: absolute; inset: 2.05cqw 0 0 0; z-index: 10; }

/* ---------- Dock ---------- */
.dock-s {
  position: absolute; z-index: 30; left: 50%; bottom: .55cqw; transform: translateX(-50%);
  display: flex; align-items: center; gap: .28cqw;
  padding: .38cqw .45cqw;
  border-radius: 1.55cqw;
  background: rgba(255,255,255,.26);
  backdrop-filter: blur(1.6cqw) saturate(180%); -webkit-backdrop-filter: blur(1.6cqw) saturate(180%);
  box-shadow: inset 0 0 0 .07cqw rgba(255,255,255,.45), 0 .6cqw 2cqw -0.6cqw rgba(0, 10, 50, .4);
}
.dock-s .dk { position: relative; display: block; }
.dock-s img { width: 3.75cqw; height: 3.75cqw; display: block; }
.dock-s .dk.bounce { animation: dk-bounce .62s var(--ease-out) 2; }
@keyframes dk-bounce { 45% { transform: translateY(-1.6cqw); } }
.dock-s .dk.running::after { content: ""; position: absolute; left: 50%; bottom: -.32cqw; width: .3cqw; height: .3cqw; margin-left: -.15cqw; border-radius: 50%; background: rgba(0,0,0,.6); }
.dock-s .dock-sep { width: .07cqw; height: 3.2cqw; margin: 0 .3cqw; background: rgba(255,255,255,.45); }

/* ---------- Cursor / caption / power ---------- */
.scr-cursor {
  position: absolute; z-index: 60; left: 70%; top: 68%;
  width: 1.9cqw; height: 1.9cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v17.2l4.3-4.1 2.7 6.2 2.9-1.3-2.7-6.1h6z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  filter: drop-shadow(0 .1cqw .25cqw rgba(0,0,0,.35));
  transition: left .9s var(--ease-out), top .9s var(--ease-out), opacity .3s, transform .15s;
  opacity: 0;
}
.scr-cursor.show { opacity: 1; }
.scr-cursor.click { transform: scale(.82); }
.scr-speech {
  position: absolute; z-index: 50; left: 50%; bottom: 6.6cqw; transform: translate(-50%, .6cqw);
  padding: .65cqw 1.2cqw; border-radius: 2cqw;
  font-size: 1.05cqw; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(1.4cqw); -webkit-backdrop-filter: blur(1.4cqw);
  opacity: 0; transition: opacity .35s, transform .45s var(--ease-out);
  white-space: nowrap; display: flex; align-items: center; gap: .6cqw;
}
.scr-speech.show { opacity: 1; transform: translate(-50%, 0); }
.scr-speech svg { width: 1.05cqw; height: 1.05cqw; color: #6bb3ff; }
.scr-speech kbd { font: 600 .9cqw/1 var(--font-sf); padding: .2cqw .45cqw; border-radius: .3cqw; background: #fff; color: #000; }
.scr-off { position: absolute; inset: 0; z-index: 80; background: #000; opacity: calc(1 - var(--on, 0)); pointer-events: none; }

/* ---------- Notifications ---------- */
.scr-notifs { position: absolute; z-index: 35; right: 1cqw; top: 2.7cqw; display: flex; flex-direction: column; gap: .6cqw; width: 25cqw; }
.notif {
  display: grid; grid-template-columns: 2.7cqw 1fr auto; gap: .2cqw .8cqw; align-items: center;
  padding: .85cqw 1cqw; border-radius: 1.5cqw;
  background: rgba(246,246,248,.82);
  backdrop-filter: blur(2cqw) saturate(180%); -webkit-backdrop-filter: blur(2cqw) saturate(180%);
  box-shadow: inset 0 0 0 .06cqw rgba(255,255,255,.6), 0 .8cqw 2.2cqw -0.8cqw rgba(0,0,0,.35);
  font-size: .92cqw; line-height: 1.3;
  animation: notif-in .55s var(--ease-spring);
}
.notif.out { animation: notif-out .4s var(--ease-out) forwards; }
.notif > img, .notif > .n-ico { grid-row: span 2; width: 2.7cqw; height: 2.7cqw; }
.notif .n-ico { border-radius: .6cqw; display: grid; place-items: center; color: #fff; background: #5e5ce6; }
.notif .n-ico svg { width: 1.5cqw; height: 1.5cqw; }
.notif b { font-weight: 650; }
.notif time { color: #8e8e93; font-size: .82cqw; }
.notif span { grid-column: 2 / 4; color: #3a3a3c; }
@keyframes notif-in { from { opacity: 0; transform: translateX(6cqw); } }
@keyframes notif-out { to { opacity: 0; transform: translateX(6cqw); } }

/* ---------- Window base ---------- */
.sw {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  background: #fff;
  border-radius: 1cqw;
  box-shadow: 0 0 0 .07cqw rgba(0,0,0,.25), 0 1.4cqw 4cqw -1cqw rgba(0, 0, 30, .5), 0 .2cqw .6cqw rgba(0,0,0,.08);
  overflow: hidden;
  font-size: 1cqw; line-height: 1.35;
  transform-origin: 50% 100%;
  animation: sw-in .5s var(--ease-out);
}
.sw.closing { animation: sw-out .45s cubic-bezier(.6,0,.8,.3) forwards; }
.sw.flyaway { animation: sw-fly .75s cubic-bezier(.55,0,.75,.2) forwards; }
.sw.minimize { animation: sw-min .6s cubic-bezier(.55,0,.6,.3) forwards; }
@keyframes sw-in { from { opacity: 0; transform: translateY(1cqw) scale(.96); } }
@keyframes sw-out { to { opacity: 0; transform: scale(.92); } }
@keyframes sw-min { to { opacity: 0; transform: translateY(30cqw) scale(.08); } }
@keyframes sw-fly { 30% { transform: translate(-.8cqw, .5cqw) scale(.99); } to { opacity: 0; transform: translate(36cqw, -26cqw) scale(.3) rotate(6deg); } }
.tl { display: flex; gap: .6cqw; }
.tl i { width: .95cqw; height: .95cqw; border-radius: 50%; background: var(--tl-red); box-shadow: inset 0 0 0 .05cqw rgba(0,0,0,.18); }
.tl i:nth-child(2) { background: var(--tl-yellow); } .tl i:nth-child(3) { background: var(--tl-green); }
.tb {
  position: relative;
  display: flex; align-items: center; gap: 1.1cqw;
  height: 3.5cqw; padding: 0 1.2cqw;
  background: #f6f6f6;
  border-bottom: .07cqw solid rgba(0,0,0,.1);
  color: #6e6e73;
}
.tb svg { width: 1.3cqw; height: 1.3cqw; flex: none; }
.tb-title { font-weight: 700; color: #1d1d1f; font-size: 1.02cqw; }
.tb-sub { font-size: .85cqw; color: #8e8e93; font-weight: 450; display: block; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 1.3cqw; }
.tb-sep { width: .07cqw; height: 1.6cqw; background: rgba(0,0,0,.12); }

/* ---------- Mail ---------- */
.mail-tb { gap: 1.2cqw; }
.mail-send { color: #b0b0b5; transition: color .3s; }
.mail-send.ready { color: var(--sys-blue); }
.tb-dim { color: #aeaeb2; }
.mail-hdr { padding: 0 1.6cqw; }
.mrow { display: flex; align-items: center; gap: .6cqw; min-height: 2.5cqw; border-bottom: .07cqw solid rgba(0,0,0,.08); font-size: 1cqw; color: #1d1d1f; }
.mrow label { color: #8e8e93; min-width: 4.4cqw; text-align: right; padding-right: .3cqw; }
.token { display: inline-flex; align-items: center; height: 1.6cqw; padding: 0 .65cqw; border-radius: .8cqw; background: #d9e8ff; color: #0a5fd8; font-weight: 500; }
.from-pop { display: inline-flex; align-items: center; gap: .4cqw; padding: .15cqw .55cqw; border-radius: .4cqw; box-shadow: 0 0 0 .07cqw rgba(0,0,0,.14), 0 .07cqw .1cqw rgba(0,0,0,.08); background: #fff; font-size: .92cqw; }
.from-pop svg { width: .8cqw; height: .8cqw; color: #8e8e93; }
.mail-body { min-height: 11cqw; padding: 1.4cqw 1.6cqw 1.8cqw; font: 1.06cqw/1.55 "Helvetica Neue", Helvetica, var(--font-sf); white-space: pre-wrap; color: #1d1d1f; }

/* contact avatars (Apple Contacts monogram style) */
.cav { display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-weight: 600; color: #fff; background: linear-gradient(180deg, #a5aab5, #848995); letter-spacing: -0.02em; }
.cav--b { background: linear-gradient(180deg, #8fb4ff, #4c7cf0); }
.cav--g { background: linear-gradient(180deg, #8de0a6, #34b46a); }
.cav--o { background: linear-gradient(180deg, #ffc38a, #f08a3c); }
.cav--p { background: linear-gradient(180deg, #d6a3ff, #9c5ef0); }

/* ---------- Safari (Sequoia toolbar) ---------- */
.sf .tb { gap: 1cqw; height: 3.3cqw; background: #f5f5f5; }
.sf-side, .sf-nav { display: flex; align-items: center; gap: .55cqw; color: #6e6e73; }
.sf-side .sf-dd { width: .8cqw !important; height: .8cqw !important; }
.sf-nav .dim, .dim { color: #c7c7cc; }
.sf-url {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 38%; height: 2.15cqw; border-radius: .65cqw;
  background: #e6e6e8;
  display: flex; align-items: center; justify-content: center; gap: .45cqw;
  font-size: .98cqw; color: #1d1d1f; font-weight: 450;
}
.sf-url .sf-pm { position: absolute; left: .6cqw; width: 1cqw !important; height: 1cqw !important; color: #8e8e93; }
.sf-url .sf-rl { position: absolute; right: .6cqw; width: .95cqw !important; height: .95cqw !important; color: #8e8e93; }

/* ---------- YouTube (desktop watch page) ---------- */
.yt { background: #fff; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; color: #0f0f0f; letter-spacing: 0; }
.yt-top { display: flex; align-items: center; gap: 1.3cqw; height: 3.9cqw; padding: 0 1.6cqw; }
.yt-burger { width: 1.5cqw; height: 1.5cqw; }
.yt-logo { display: flex; align-items: center; gap: .2cqw; }
.yt-logo svg { width: 2.1cqw; height: 1.5cqw; }
.yt-logo b { font-size: 1.35cqw; font-weight: 700; letter-spacing: -0.08cqw; font-family: "Roboto", Arial, sans-serif; }
.yt-mid { flex: 1; display: flex; justify-content: center; align-items: center; gap: 1cqw; padding-left: 3cqw; }
.yt-search { display: flex; width: 62%; height: 2.6cqw; border-radius: 1.3cqw; box-shadow: inset 0 0 0 .07cqw #d3d3d3; overflow: hidden; }
.yt-search span { flex: 1; display: flex; align-items: center; padding: 0 1.1cqw; font-size: 1cqw; }
.yt-search i { width: 4.6cqw; display: grid; place-items: center; background: #f8f8f8; border-left: .07cqw solid #d3d3d3; }
.yt-search i svg { width: 1.25cqw; height: 1.25cqw; }
.yt-micb { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #f2f2f2; display: grid; place-items: center; }
.yt-micb svg { width: 1.15cqw; height: 1.15cqw; }
.yt-tr { display: flex; align-items: center; gap: 1.4cqw; }
.yt-tr svg { width: 1.5cqw; height: 1.5cqw; }
.yt-create { display: flex; align-items: center; gap: .35cqw; height: 2.5cqw; padding: 0 1cqw 0 .7cqw; border-radius: 1.25cqw; background: #f2f2f2; font-size: .95cqw; font-weight: 500; }
.yt-create svg { width: 1.2cqw !important; height: 1.2cqw !important; }
.yt-bell { position: relative; }
.yt-bell em { position: absolute; top: -.45cqw; right: -.75cqw; font-style: normal; font-size: .62cqw; font-weight: 600; color: #fff; background: #cc0000; border-radius: .6cqw; padding: .05cqw .3cqw; }
.yt-av { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; display: grid; place-items: center; font-size: .95cqw; font-weight: 500; color: #fff; background: #0b8043; }
.yt-body { display: grid; grid-template-columns: 1fr 30%; gap: 1.7cqw; padding: .5cqw 1.8cqw 1.5cqw; }
.yt-player { position: relative; aspect-ratio: 16/9; border-radius: .95cqw; overflow: hidden; background: #000; }
.yt-player img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.08) translate(-1.5%, 1%); } }
.yt-ctrl { position: absolute; left: 0; right: 0; bottom: 0; padding: 3cqw 1cqw .55cqw; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.yt-prog { --p: 1%; position: relative; height: .28cqw; background: rgba(255,255,255,.28); margin-bottom: .75cqw; }
.yt-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: #f00; transition: width 1s linear; }
.yt-prog b { position: absolute; left: var(--p); top: 50%; width: .95cqw; height: .95cqw; margin: -.475cqw 0 0 -.475cqw; border-radius: 50%; background: #f00; transition: left 1s linear; }
.yt-row { display: flex; align-items: center; gap: 1.25cqw; font-size: .9cqw; }
.yt-row svg { width: 1.45cqw; height: 1.45cqw; }
.yt-chapter { opacity: .85; margin-left: -.5cqw; }
.yt-row .sp { flex: 1; }
.yt-auto { width: 2.4cqw; height: 1cqw; border-radius: .5cqw; background: rgba(255,255,255,.4); position: relative; }
.yt-auto i { position: absolute; right: -.1cqw; top: -.15cqw; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #fff; }
.yt-cc { font-size: .7cqw; font-weight: 700; border: .12cqw solid #fff; border-radius: .2cqw; padding: 0 .2cqw; }
.yt-title { margin: 1cqw 0 0; font-size: 1.4cqw; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.yt-ch { display: flex; align-items: center; gap: .9cqw; margin-top: .9cqw; }
.yt-chav { width: 2.9cqw; height: 2.9cqw; border-radius: 50%; object-fit: cover; }
.yt-ch b { display: flex; align-items: center; gap: .3cqw; font-size: 1.1cqw; font-weight: 500; white-space: nowrap; }
.yt-ch > div { flex: none; }
.yt-ch b svg { width: .95cqw; height: .95cqw; color: #606060; }
.yt-ch small { display: block; font-size: .82cqw; color: #606060; }
.yt-sub { flex: none; margin-left: 1.2cqw; height: 2.6cqw; padding: 0 1.3cqw; border-radius: 1.3cqw; display: grid; place-items: center; background: #0f0f0f; color: #fff; font-size: .98cqw; font-weight: 500; }
.yt-act { margin-left: auto; display: flex; gap: .6cqw; }
.yt-act > span { display: flex; align-items: center; gap: .45cqw; height: 2.6cqw; padding: 0 1.1cqw; border-radius: 1.3cqw; background: #f2f2f2; font-size: .92cqw; font-weight: 500; white-space: nowrap; }
.yt-act svg { width: 1.3cqw; height: 1.3cqw; }
.yt-act .flip { transform: rotate(180deg); }
.yt-like { padding: 0 !important; }
.yt-like > span { display: flex; align-items: center; gap: .45cqw; padding: 0 1cqw; }
.yt-like > i { width: .07cqw; height: 1.7cqw; background: #ccc; }
.yt-more { padding: 0 .65cqw !important; }
.yt-desc { margin-top: 1cqw; padding: .9cqw 1cqw; border-radius: .9cqw; background: #f2f2f2; font-size: .9cqw; line-height: 1.45; }
.yt-desc b { display: block; font-weight: 500; }
.yt-desc u { color: #065fd4; text-decoration: none; }
.yt-desc em { font-style: normal; font-weight: 500; }
.yt-side { display: flex; flex-direction: column; gap: .75cqw; }
.yt-chips { display: flex; gap: .55cqw; margin-bottom: .2cqw; overflow: hidden; }
.yt-chips span { height: 2.25cqw; padding: 0 .9cqw; border-radius: .6cqw; background: #f2f2f2; font-size: .88cqw; font-weight: 500; display: grid; place-items: center; white-space: nowrap; }
.yt-chips .on { background: #0f0f0f; color: #fff; }
.yt-rec { display: grid; grid-template-columns: 44% 1fr; gap: .75cqw; }
.yt-th { position: relative; display: block; }
.yt-th img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: .6cqw; }
.yt-th em { position: absolute; right: .35cqw; bottom: .35cqw; font-style: normal; font-size: .7cqw; font-weight: 500; color: #fff; background: rgba(0,0,0,.8); border-radius: .25cqw; padding: .05cqw .3cqw; }
.yt-rec b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9cqw; line-height: 1.35; font-weight: 500; }
.yt-rec small { display: flex; align-items: center; gap: .25cqw; font-size: .78cqw; color: #606060; margin-top: .3cqw; }
.yt-rec small svg { width: .75cqw; height: .75cqw; }

/* ---------- Messages ---------- */
.ms { display: grid; grid-template-columns: 31% 1fr; grid-template-rows: 100%; height: 31cqw; }
.ms-side { background: #ececee; border-right: .07cqw solid rgba(0,0,0,.08); padding: 1cqw .8cqw; display: flex; flex-direction: column; gap: .2cqw; overflow: hidden; min-height: 0; }
.ms-tbar { display: flex; align-items: center; justify-content: space-between; margin: 0 .4cqw 1cqw; color: #6e6e73; }
.ms-tbar svg { width: 1.25cqw; height: 1.25cqw; }
.ms-search { display: flex; align-items: center; gap: .4cqw; height: 2.1cqw; padding: 0 .7cqw; margin-bottom: .6cqw; border-radius: .6cqw; background: rgba(0,0,0,.06); color: #8e8e93; font-size: .92cqw; }
.ms-search svg { width: .95cqw; height: .95cqw; }
.ms-row { display: grid; grid-template-columns: 3.1cqw 1fr auto; gap: .15cqw .7cqw; align-items: center; padding: .7cqw .6cqw; border-radius: .7cqw; }
.ms-row .cav { width: 3.1cqw; height: 3.1cqw; font-size: 1.05cqw; grid-row: span 2; }
.ms-row b { font-size: .98cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row small { grid-column: 2 / 4; font-size: .86cqw; color: #8e8e93; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-row time { font-size: .78cqw; color: #8e8e93; }
.ms-row.on { background: #0a84ff; }
.ms-row.on b, .ms-row.on small, .ms-row.on time { color: #fff; }
.ms-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.ms-head { display: flex; flex-direction: column; align-items: center; gap: .35cqw; padding: .9cqw 0 .7cqw; border-bottom: .07cqw solid rgba(0,0,0,.07); font-size: .85cqw; color: #1d1d1f; background: rgba(250,250,250,.9); }
.ms-head .cav { width: 2.9cqw; height: 2.9cqw; font-size: 1cqw; }
.ms-head span:last-child { display: flex; align-items: center; gap: .2cqw; }
.ms-head svg { width: .7cqw; height: .7cqw; color: #8e8e93; }
.ms-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .35cqw; padding: 1.1cqw 1.6cqw; overflow: hidden; }
.ms-ts { align-self: center; text-align: center; font-size: .75cqw; color: #8e8e93; margin-bottom: .5cqw; line-height: 1.35; }
.bubble { position: relative; max-width: 68%; padding: .55cqw .95cqw; border-radius: 1.3cqw; font-size: 1cqw; line-height: 1.35; }
.bubble.in { align-self: flex-start; background: #e9e9eb; color: #000; margin-left: .3cqw; }
.bubble.out { align-self: flex-end; background: #0a84ff; color: #fff; margin-right: .3cqw; animation: bub-in .4s var(--ease-spring); }
.bubble::before, .bubble::after { content: ""; position: absolute; bottom: 0; height: 1.3cqw; }
.bubble.in::before { left: -.5cqw; width: 1.3cqw; background: #e9e9eb; border-bottom-right-radius: 1cqw 0.9cqw; }
.bubble.in::after { left: -1.3cqw; width: 1.3cqw; background: #fff; border-bottom-right-radius: .7cqw; }
.bubble.out::before { right: -.5cqw; width: 1.3cqw; background: #0a84ff; border-bottom-left-radius: 1cqw 0.9cqw; }
.bubble.out::after { right: -1.3cqw; width: 1.3cqw; background: #fff; border-bottom-left-radius: .7cqw; }
@keyframes bub-in { from { opacity: 0; transform: translateY(.8cqw) scale(.9); } }
.ms-delivered { align-self: flex-end; font-size: .75cqw; color: #8e8e93; margin-right: .3cqw; }
.ms-compose { display: flex; align-items: center; gap: .7cqw; margin: .8cqw 1.2cqw 1.1cqw; }
.ms-plus { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: #e9e9eb; display: grid; place-items: center; color: #6e6e73; flex: none; }
.ms-plus svg { width: 1cqw; height: 1cqw; }
.ms-field { flex: 1; min-height: 2.3cqw; display: flex; align-items: center; padding: .3cqw .5cqw .3cqw 1cqw; border-radius: 1.2cqw; box-shadow: inset 0 0 0 .07cqw rgba(0,0,0,.18); font-size: 1cqw; }
.ms-field .ph { color: #a1a1a6; flex: 1; }
.ms-field .caret-after { flex: 1; }
.ms-wave { width: 1.2cqw; height: 1.2cqw; color: #8e8e93; flex: none; margin-left: auto; }
.caret-after::after { content: ""; display: inline-block; width: .1cqw; height: 1.1em; margin-left: .05cqw; vertical-align: -.18em; background: #0a84ff; animation: caret 1s steps(1) infinite; }

/* ---------- Slack ---------- */
.sl { background: #1a1d21; font-family: "Lato", var(--font-sf); }
.sl-top { position: relative; display: flex; align-items: center; gap: 1cqw; height: 3cqw; padding: 0 1cqw; background: #3a0d3c; color: #d1c4d2; }
.sl-nav { display: flex; gap: .8cqw; margin-left: 3cqw; }
.sl-nav svg, .sl-help { width: 1.1cqw; height: 1.1cqw; }
.sl-search { position: absolute; left: 50%; transform: translateX(-50%); width: 46%; height: 1.9cqw; border-radius: .45cqw; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; gap: .5cqw; font-size: .88cqw; color: rgba(255,255,255,.75); }
.sl-search svg { width: .9cqw; height: .9cqw; }
.sl-help { margin-left: auto; }
.sl-body { display: grid; grid-template-columns: 5cqw 25% 1fr; height: 26cqw; background: #3a0d3c; }
.sl-rail { display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding-top: .8cqw; }
.sl-ws { width: 2.6cqw; height: 2.6cqw; border-radius: .6cqw; background: #fff; color: #3a0d3c; display: grid; place-items: center; font-weight: 800; font-size: 1.1cqw; margin-bottom: .4cqw; }
.sl-ri { display: flex; flex-direction: column; align-items: center; gap: .2cqw; color: rgba(255,255,255,.8); font-size: .62cqw; }
.sl-ri svg { width: 2.4cqw; height: 2.4cqw; padding: .55cqw; border-radius: .6cqw; }
.sl-ri.on svg { background: rgba(255,255,255,.2); }
.sl-side { background: #4a154b; background: linear-gradient(180deg, #5a1d5b, #4a154b); border-radius: .8cqw 0 0 0; padding: 1cqw .8cqw; display: flex; flex-direction: column; gap: .15cqw; font-size: .92cqw; color: rgba(255,255,255,.72); }
.sl-wsn { display: flex; align-items: center; gap: .3cqw; color: #fff; font-size: 1.15cqw; font-weight: 800; margin: 0 .4cqw .8cqw; }
.sl-wsn svg { width: .8cqw; height: .8cqw; }
.sl-sec { margin: .7cqw .4cqw .25cqw; font-size: .85cqw; color: rgba(255,255,255,.6); }
.sl-side > span:not(.sl-sec) { display: flex; align-items: center; gap: .45cqw; padding: .3cqw .6cqw; border-radius: .4cqw; }
.sl-side .on { background: #fff; color: #3a0d3c !important; font-weight: 700; }
.sl-side .bold { color: #fff; font-weight: 800; }
.sl-side em { margin-left: auto; font-style: normal; font-size: .72cqw; font-weight: 700; background: #cd2553; color: #fff; border-radius: .5cqw; padding: 0 .4cqw; }
.sl-dot { width: .65cqw; height: .65cqw; border-radius: 50%; box-shadow: inset 0 0 0 .12cqw rgba(255,255,255,.6); }
.sl-dot.g { background: #2bac76; box-shadow: none; }
.sl-main { background: #fff; display: flex; flex-direction: column; min-width: 0; }
.sl-chan { display: flex; align-items: center; justify-content: space-between; height: 3cqw; padding: 0 1.3cqw; border-bottom: .07cqw solid #e8e8e8; font-size: 1.1cqw; color: #1d1c1d; }
.sl-chan span { font-size: .85cqw; color: #616061; border: .07cqw solid #ddd; border-radius: .4cqw; padding: .1cqw .5cqw; }
.sl-msgs { flex: 1; padding: .9cqw 1.3cqw; display: flex; flex-direction: column; gap: 1cqw; }
.sl-msg { display: flex; gap: .7cqw; font-size: .98cqw; color: #1d1c1d; line-height: 1.4; }
.sl-msg .cav { width: 2.6cqw; height: 2.6cqw; border-radius: .5cqw; font-size: .85cqw; }
.sl-msg b { font-weight: 800; }
.sl-msg time { font-weight: 400; font-size: .78cqw; color: #616061; margin-left: .3cqw; }
.sl-msg p { margin: .1cqw 0 0; }
.sl-compose { margin: 0 1.3cqw 1.2cqw; border: .07cqw solid #bbb; border-radius: .6cqw; padding: .7cqw .9cqw .5cqw; font-size: .95cqw; color: #868686; }
.sl-ctools { display: flex; gap: .8cqw; margin-top: .6cqw; color: #616061; }
.sl-ctools svg { width: 1.05cqw; height: 1.05cqw; }
.sl-send { margin-left: auto; color: #bbb; }

/* ---------- Spotify ---------- */
.sp-app { background: #000; color: #fff; font-family: "Figtree", "Helvetica Neue", var(--font-sf); letter-spacing: 0; }
.sp-top { position: relative; display: flex; align-items: center; gap: 1cqw; height: 4cqw; padding: 0 1.1cqw; }
.sp-nav { display: flex; gap: .6cqw; margin-left: 2.4cqw; color: #b3b3b3; }
.sp-nav svg { width: 1.2cqw; height: 1.2cqw; }
.sp-home { position: absolute; left: 50%; margin-left: -18.5cqw; width: 2.9cqw; height: 2.9cqw; border-radius: 50%; background: #1f1f1f; display: grid; place-items: center; color: #fff; }
.sp-home svg { width: 1.3cqw; height: 1.3cqw; }
.sp-search { position: absolute; left: 50%; margin-left: -15cqw; width: 30cqw; height: 2.9cqw; border-radius: 1.45cqw; background: #1f1f1f; display: flex; align-items: center; gap: .7cqw; padding: 0 1cqw; font-size: .95cqw; color: #b3b3b3; }
.sp-search svg { width: 1.2cqw; height: 1.2cqw; }
.sp-tr { margin-left: auto; display: flex; align-items: center; gap: 1cqw; color: #b3b3b3; }
.sp-tr svg { width: 1.2cqw; height: 1.2cqw; }
.sp-av { width: 2.3cqw; height: 2.3cqw; border-radius: 50%; display: grid; place-items: center; background: #e91429; color: #000; font-weight: 700; font-size: .95cqw; box-shadow: 0 0 0 .35cqw #1f1f1f; }
.sp-grid { display: grid; grid-template-columns: 25% 1fr; gap: .55cqw; padding: 0 .55cqw; height: 31cqw; }
.sp-lib { background: #121212; border-radius: .6cqw; padding: 1cqw .7cqw; display: flex; flex-direction: column; gap: .5cqw; overflow: hidden; }
.sp-lh { display: flex; justify-content: space-between; align-items: center; padding: 0 .4cqw; }
.sp-lh b { font-size: 1cqw; font-weight: 700; }
.sp-lh svg { width: 1.1cqw; height: 1.1cqw; color: #b3b3b3; }
.sp-chips { display: flex; gap: .45cqw; padding: .3cqw .4cqw .5cqw; }
.sp-chips span { height: 2cqw; padding: 0 .8cqw; border-radius: 1cqw; background: #2a2a2a; font-size: .82cqw; display: grid; place-items: center; }
.sp-li { display: flex; gap: .75cqw; align-items: center; padding: .4cqw; border-radius: .4cqw; }
.sp-li img, .sp-li i { width: 3.3cqw; height: 3.3cqw; border-radius: .3cqw; object-fit: cover; flex: none; }
.sp-li i { display: grid; place-items: center; background: linear-gradient(135deg, #450af5, #c4efd9); }
.sp-li i svg { width: 1.3cqw; height: 1.3cqw; }
.sp-li b { display: block; font-size: .95cqw; font-weight: 600; }
.sp-li small { display: block; font-size: .8cqw; color: #b3b3b3; margin-top: .1cqw; }
.sp-li.on { background: #232323; }
.sp-li.on b { color: #1ed760; }
.sp-main { border-radius: .6cqw; overflow: hidden; background: linear-gradient(180deg, #8c4466 0%, #4a2537 30%, #121212 52%); }
.sp-hero { display: flex; align-items: flex-end; gap: 1.7cqw; padding: 1.8cqw 1.9cqw 1.3cqw; }
.sp-hero img { width: 10cqw; height: 10cqw; object-fit: cover; border-radius: .45cqw; box-shadow: 0 .6cqw 2.6cqw rgba(0,0,0,.55); }
.sp-hero small { font-size: .85cqw; font-weight: 600; }
.sp-hero h5 { margin: .25cqw 0 .6cqw; font-size: 4.2cqw; line-height: 1; font-weight: 800; letter-spacing: -.05em; }
.sp-hero p { margin: 0; font-size: .85cqw; color: rgba(255,255,255,.72); }
.sp-hero .sp-by { margin-top: .35cqw; color: rgba(255,255,255,.85); }
.sp-hero .sp-by b { color: #fff; }
.sp-actions { display: flex; align-items: center; gap: 1.4cqw; padding: .3cqw 1.9cqw .9cqw; color: #b3b3b3; }
.sp-play { width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #1ed760; color: #000; display: grid; place-items: center; }
.sp-play svg { width: 1.5cqw; height: 1.5cqw; }
.sp-actions > svg { width: 1.6cqw; height: 1.6cqw; }
.sp-list { margin-left: auto; display: flex; align-items: center; gap: .4cqw; font-size: .85cqw; }
.sp-list svg { width: 1cqw; height: 1cqw; }
.sp-th, .sp-tr { display: grid; grid-template-columns: 2cqw 1.6fr 1fr .9fr 3cqw; gap: 1cqw; align-items: center; }
.sp-th { margin: 0 1.9cqw .4cqw; padding: 0 .5cqw .45cqw; border-bottom: .07cqw solid rgba(255,255,255,.1); font-size: .8cqw; color: #b3b3b3; }
.sp-th svg { width: .9cqw; height: .9cqw; }
.sp-tracks { padding: 0 1.9cqw; }
.sp-tr { padding: .35cqw .5cqw; border-radius: .35cqw; font-size: .85cqw; color: #b3b3b3; }
.sp-tt { display: flex; align-items: center; gap: .7cqw; min-width: 0; }
.sp-tt img { width: 2.4cqw; height: 2.4cqw; border-radius: .2cqw; flex: none; }
.sp-tt span { display: flex; flex-direction: column; min-width: 0; }
.sp-tt b { color: #fff; font-weight: 500; font-size: .95cqw; }
.sp-tr.on { background: rgba(255,255,255,.1); }
.sp-tr.on b { color: #1ed760; }
.eq-g { display: inline-flex; align-items: flex-end; gap: .1cqw; height: .9cqw; }
.eq-g i { width: .17cqw; height: 100%; background: #1ed760; transform-origin: bottom; animation: eq-bar .8s ease-in-out infinite; }
.eq-g i:nth-child(2) { animation-delay: .2s; } .eq-g i:nth-child(3) { animation-delay: .4s; } .eq-g i:nth-child(4) { animation-delay: .1s; }
.sp-bar { display: grid; grid-template-columns: 28% 1fr 24%; align-items: center; height: 5.2cqw; padding: 0 1.2cqw; }
.sp-now { display: flex; align-items: center; gap: .8cqw; }
.sp-now img { width: 3.6cqw; height: 3.6cqw; border-radius: .3cqw; object-fit: cover; }
.sp-now b { display: block; font-size: .92cqw; font-weight: 600; }
.sp-now small { font-size: .78cqw; color: #b3b3b3; }
.sp-ok { width: 1.1cqw; height: 1.1cqw; color: #1ed760; margin-left: .4cqw; }
.sp-ctrls { display: flex; flex-direction: column; align-items: center; gap: .55cqw; }
.sp-btns { display: flex; align-items: center; gap: 1.7cqw; color: #b3b3b3; }
.sp-btns svg { width: 1.2cqw; height: 1.2cqw; }
.sp-btns .pp { width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; }
.sp-btns .pp svg { width: 1.1cqw; height: 1.1cqw; }
.sp-btns .g { color: #1ed760; }
.sp-prog { display: flex; align-items: center; gap: .7cqw; width: 84%; font-size: .74cqw; color: #b3b3b3; }
.sp-prog div { flex: 1; height: .3cqw; border-radius: .2cqw; background: #4d4d4d; overflow: hidden; }
.sp-prog i { display: block; height: 100%; width: 4%; background: #fff; animation: sp-prog 109s linear forwards; }
@keyframes sp-prog { to { width: 100%; } }
.sp-vol { justify-self: end; display: flex; align-items: center; gap: .8cqw; color: #b3b3b3; }
.sp-vol svg { width: 1.15cqw; height: 1.15cqw; }
.sp-vol div { width: 6cqw; height: .3cqw; border-radius: .2cqw; background: #4d4d4d; }
.sp-vol i { display: block; width: 30%; height: 100%; background: #fff; border-radius: .2cqw; }

/* ---------- Finder ---------- */
.fd-seg { display: flex; gap: .2cqw; padding: .15cqw; border-radius: .45cqw; background: rgba(0,0,0,.05); }
.fd-seg svg { width: 1.6cqw !important; height: 1.4cqw !important; padding: .2cqw .25cqw; border-radius: .3cqw; }
.fd-seg .on { background: #fff; box-shadow: 0 .05cqw .15cqw rgba(0,0,0,.15); }

/* ---------- Finder ---------- */
.fd { display: grid; grid-template-columns: 22% 1fr; height: 26cqw; }
.fd-side { background: rgba(236,236,240,.96); padding: 1.1cqw .9cqw; font-size: .9cqw; color: #1d1d1f; display: flex; flex-direction: column; gap: .15cqw; border-right: .07cqw solid rgba(0,0,0,.08); }
.fd-side .tl { margin: 0 .3cqw 1.3cqw; }
.fd-side small { font-size: .75cqw; font-weight: 700; color: #8e8e93; margin: .7cqw .4cqw .3cqw; }
.fd-side span { display: flex; align-items: center; gap: .6cqw; padding: .35cqw .45cqw; border-radius: .45cqw; }
.fd-side span svg { width: 1.15cqw; height: 1.15cqw; color: #0a84ff; }
.fd-side span.on { background: rgba(0,0,0,.08); }
.fd-side .tagc { width: .8cqw; height: .8cqw; border-radius: 50%; }
.fd-main { display: flex; flex-direction: column; min-width: 0; }
.fd-main .tb { background: #fff; }
.fd-search { margin-left: auto; display: flex; align-items: center; gap: .4cqw; width: 13cqw; white-space: nowrap; height: 2.1cqw; padding: 0 .7cqw; border-radius: .6cqw; background: #ececee; color: #1d1d1f; font-size: .92cqw; }
.fd-search svg { width: .95cqw; height: .95cqw; color: #8e8e93; }
.fd-scope { display: flex; align-items: center; gap: .6cqw; padding: .55cqw 1.2cqw; font-size: .85cqw; color: #6e6e73; border-bottom: .07cqw solid rgba(0,0,0,.06); }
.fd-scope b { padding: .15cqw .6cqw; border-radius: .4cqw; background: #e1e1e6; color: #1d1d1f; font-weight: 500; }
.fd-cols, .fd-row { display: grid; grid-template-columns: 1fr 20% 24%; gap: 1cqw; align-items: center; padding: 0 1.2cqw; }
.fd-cols { height: 2cqw; font-size: .8cqw; color: #6e6e73; border-bottom: .07cqw solid rgba(0,0,0,.06); }
.fd-row { height: 2.4cqw; font-size: .92cqw; margin: .15cqw .6cqw; padding: 0 .6cqw; border-radius: .45cqw; animation: sw-in .35s var(--ease-out); }
.fd-row:nth-child(even) { background: #f5f5f7; }
.fd-row span { display: flex; align-items: center; gap: .6cqw; }
.fd-row img { width: 1.6cqw; height: 1.6cqw; }
.fd-row small { color: #6e6e73; font-size: .85cqw; }
.fd-row.sel { background: #0a64d6 !important; color: #fff; }
.fd-row.sel small { color: rgba(255,255,255,.8); }

/* ---------- Preview ---------- */
.pv-body { background: #e3e3e6; padding: 1.8cqw 2.6cqw 2.4cqw; height: 29cqw; overflow: hidden; }
.pv-page { background: #fff; box-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.18); padding: 2.4cqw 2.6cqw; font-size: .82cqw; color: #333; aspect-ratio: 1/1.2; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pv-logo { display: flex; align-items: center; gap: .5cqw; font-weight: 800; font-size: 1.15cqw; letter-spacing: -.02em; color: #111; }
.pv-logo i { width: 1.6cqw; height: 1.6cqw; border-radius: .35cqw; background: linear-gradient(135deg, #ff7a18, #ff2d55); }
.pv-head h6 { margin: 0; font-size: 1.9cqw; letter-spacing: .08em; color: #111; font-weight: 300; }
.pv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin-top: 1.6cqw; line-height: 1.5; }
.pv-meta b { display: block; color: #111; font-size: .78cqw; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2cqw; }
.pv-table { margin-top: 1.6cqw; border-top: .1cqw solid #111; }
.pv-table div { display: grid; grid-template-columns: 1fr auto; padding: .55cqw 0; border-bottom: .07cqw solid #e5e5e5; }
.pv-total { display: flex; justify-content: space-between; margin-top: 1.1cqw; font-size: 1.15cqw; font-weight: 700; color: #111; }
.pv-due { margin-top: .4cqw; color: #ff3b30; font-weight: 600; text-align: right; }

/* ---------- small screens: give the island room ---------- */
@media (max-width: 760px) {
  .island-host--screen { font-size: 1.9cqw; }
  .scr-icons { display: none; }
}