:root {
  --glass: rgba(36, 36, 40, 0.62);
  --glass-soft: rgba(255, 255, 255, 0.06);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --blue: #0a84ff;
  --red: #ff5f57;
  --yellow: #febc2e;
  --green: #28c840;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Keep typing fields selectable like a real app */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
body { font-family: var(--font); background: #000; overflow: hidden; height: 100vh; color: var(--text); }

/* Full-bleed wallpaper (img layer — sharper than CSS background scaling) */
.wallpaper-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 0;
  /* Stable cover resize — avoid GPU layer thrash that glitches while dragging browser edges */
  image-rendering: auto;
  backface-visibility: hidden;
  /* Isolate paint from window reflow without zero-size contain:strict on imgs */
  contain: paint;
}

/* LOGIN — macOS-style lock screen */
#login {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Opacity-only hide — scale() was softening the wallpaper */
  transition: opacity 0.45s ease;
  color: #fff;
  overflow: hidden;
}
#login.hidden {
  opacity: 0;
  pointer-events: none;
}
.login-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Light vignette only — heavy scrims made the wallpaper look soft/blurry */
  background:
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}
.login-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -4vh;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(160deg, #5c5c64 0%, #3e3e46 48%, #2e2e34 100%);
  border: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  overflow: hidden; /* circular crop like macOS user picture */
  color: rgba(255, 255, 255, 0.52);
  flex-shrink: 0;
}
.avatar-silhouette {
  /* Fill the disc; geometry is already centered in the viewBox */
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  opacity: 0.92;
}
.login-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-bottom: 18px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.login-form {
  width: 220px;
}
.login-pass-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}
.login-pass-wrap:focus-within {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.32);
}
.login-pass {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 13.5px;
  font-family: inherit;
  padding: 9px 12px 9px 14px;
  -webkit-user-select: text;
  user-select: text;
}
.login-pass::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.login-go {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 6px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 0.15s, transform 0.12s;
}
.login-go:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1.05);
}
.login-go:active { transform: scale(0.96); }
.login-hint {
  margin-top: 14px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
}
.login-hint:hover { color: rgba(255, 255, 255, 0.7); }

.login-footer {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 36px;
  align-items: flex-start;
}
.login-footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.login-footer-item:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.login-footer-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.login-footer-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* DESKTOP */
#desktop {
  position: fixed;
  inset: 0;
  background: #12101f;
  overflow: hidden;
  /* Stable containing block for absolute windows + wallpaper */
  contain: layout style;
}
#desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Lighter overlay so wallpaper stays crisp */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22));
  pointer-events: none;
}
#desktop > .wallpaper-layer {
  z-index: 0;
  /* Fixed to viewport so browser resize doesn't reflow wallpaper with app chrome */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}
/* While the browser window is being dragged, skip expensive glass blurs (major glitch source) */
html.is-resizing-viewport .window {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}
html.is-resizing-viewport .wallpaper-layer {
  transition: none !important;
}
html.is-resizing-viewport #wins,
html.is-resizing-viewport .window {
  will-change: auto;
}

/* Desktop icons — free-form, draggable, selectable */
#desktop-icons {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none; /* icons re-enable themselves */
}
.desk-icon {
  position: absolute;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  padding: 6px 4px 5px;
  border-radius: 8px;
  pointer-events: auto;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  border: none;
  /* No hover “tile” — real macOS only highlights on selection */
  transition: none;
}
.desk-icon:hover:not(.selected) {
  background: transparent;
  box-shadow: none;
}
.desk-icon.selected {
  /* Soft selection wash like Finder desktop (not a hover glass box) */
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.desk-icon.dragging {
  opacity: 0.92;
  z-index: 80;
  cursor: default;
  transition: none;
}
.desk-icon .icon {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  overflow: visible;
}
.desk-app-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: 0 auto;
  /* Scale slightly so art with transparent padding still fills the icon slot */
  transform: scale(1.12);
  transform-origin: center center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  border-radius: 10px;
}
/* Beat Maker art has extra padding — size up and re-center in the icon slot */
.desk-app-img-beat {
  width: 56px;
  height: 56px;
  transform: scale(1.22);
  border-radius: 12px;
}
/* paint.png: transparent bg Tux character */
.desk-app-img-paint {
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center center;
  transform: scale(1.1);
  border-radius: 0;
  background: transparent;
}

/* Social icons — same box as other desktop apps; only mild optical tweaks */
.desk-icon-social .icon {
  width: 52px;
  height: 52px;
  overflow: visible;
}
.desk-app-img-social {
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center center;
  border-radius: 10px;
  transform: scale(1.12);
  transform-origin: center center;
}
/* TikTok logo sits small on a black canvas — slight zoom only */
.desk-app-img-tiktok {
  transform: scale(1.45);
}
/* Spotify already nearly fills the frame */
.desk-app-img-spotify {
  transform: scale(1.1);
}
.desk-app-img-applemusic {
  transform: scale(0.9);
  border-radius: 11px;
}
.desk-app-img-soundcloud {
  transform: scale(1.08);
  border-radius: 11px;
}
.desk-app-img-insta {
  transform: scale(1.42);
}
.desk-app-img-youtube {
  transform: scale(0.95);
  border-radius: 11px;
}
.desk-app-img-ipod {
  transform: scale(1.08);
  border-radius: 12px;
}
html.layout-compact .desk-app-img-ipod {
  transform: scale(1.05);
  border-radius: 10px;
}
.desk-icon .label {
  font-size: 11px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  max-width: 78px;
  line-height: 1.2;
  padding: 1px 4px;
  border-radius: 4px;
  pointer-events: none;
}
.desk-icon.selected .label {
  background: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  color: #fff;
}

/* Marquee selection rectangle — macOS-style blue wash + soft fade-out */
#desktop-marquee {
  position: absolute;
  z-index: 60;
  border: 1px solid rgba(64, 156, 255, 0.95);
  background: rgba(10, 132, 255, 0.32);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    0 0 0 0.5px rgba(0, 80, 180, 0.15);
  pointer-events: none;
  border-radius: 2px;
  opacity: 1;
  /* macOS-style soft dissolve on release */
  transition: opacity 0.18s ease-out;
  will-change: opacity;
  box-sizing: border-box;
}
#desktop-marquee.is-fading {
  opacity: 0 !important;
  transition: opacity 0.18s ease-out;
}
#desktop-marquee[hidden] {
  display: none !important;
  opacity: 0;
  /* No transition when fully hidden (after fade completes) */
  transition: none;
  visibility: hidden;
}

/* MENU BAR */
/*
  Crawlable SEO bio — available to bots & screen readers.
  Full-screen desktop UI sits above; this is not decorative keyword spam,
  it's the real page summary for engines that don't run the full app shell.
*/
.seo-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  pointer-events: none;
}
.seo-content a {
  color: inherit;
}

#menubar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 1000;
  background: rgba(22, 22, 24, 0.55);
  backdrop-filter: blur(48px) saturate(190%);
  -webkit-backdrop-filter: blur(48px) saturate(190%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 14px 0 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: -0.08px;
  color: var(--text);
  overflow: visible;
}
.menubar-left {
  display: flex;
  gap: 1px;
  flex: 1;
  align-items: center;
  height: 100%;
  min-width: 0;
  overflow: visible;
}
.menubar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  flex-shrink: 0;
  letter-spacing: -0.08px;
  height: 100%;
}
.status-item {
  opacity: 0.95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
  white-space: nowrap;
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 0 5px;
  border-radius: 5px;
  cursor: default;
  margin: 0;
  line-height: 1;
}
button.status-item:hover,
.status-item.status-cc:hover,
.status-item.status-wifi:hover,
.status-item.status-battery:hover {
  background: rgba(255, 255, 255, 0.12);
}
button.status-item:active,
.status-item.status-cc.open,
.status-wifi-wrap.open .status-wifi,
.status-battery-wrap.open .status-battery {
  background: rgba(255, 255, 255, 0.18);
}
.status-icon {
  display: block;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  pointer-events: none;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
/* Battery asset ~30×25 — keep compact in the menubar strip */
.battery-icon {
  width: 20px;
  height: 16px;
}
/* Wi‑Fi asset fills its frame more — keep smaller than battery optical mass */
.wifi-icon {
  width: 15px;
  height: 13px;
}
.status-battery {
  gap: 0;
  padding: 0 5px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-cc {
  padding: 0 5px;
}
#clock {
  padding: 0 2px 0 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.15px;
}

/* Battery status menu — match Wi‑Fi menu scale / rhythm */
.status-battery-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.status-battery-wrap .battery-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  width: 240px;
  min-width: 240px;
  max-width: min(280px, calc(100vw - 16px));
  z-index: 1200;
  /* Inherit .menu-dropdown padding (4px) — don't double pad */
}
.status-battery-wrap.open .battery-menu,
.status-battery-wrap .battery-menu:not([hidden]) {
  display: block;
}
.status-battery-wrap .battery-menu[hidden] {
  display: none !important;
}

/* Header: “Battery” … “87%” — same pattern as Wi‑Fi title + switch row */
.battery-menu .battery-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  min-height: 28px;
  padding: 0 10px 0 12px;
  pointer-events: none;
  gap: 8px;
}
.battery-menu .battery-menu-header:hover {
  background: transparent;
}
.battery-menu .battery-menu-header .menu-label {
  font-weight: 600;
  padding-right: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.battery-menu .battery-header-pct {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
  white-space: nowrap;
}

/* Secondary status lines — normal menu rows, muted */
.battery-menu .battery-meta-row {
  height: 20px;
  min-height: 20px;
  pointer-events: none;
  opacity: 0.72;
}
.battery-menu .battery-meta-row:hover {
  background: transparent;
}
.battery-menu .battery-meta-row .menu-label {
  font-size: 12px;
  font-weight: 400;
  padding-right: 8px;
  padding-left: 7px; /* align under title text (no check column) */
}
.battery-menu .battery-meta-time {
  opacity: 0.5;
  margin-bottom: 2px;
}

/* Section label — same as Wi‑Fi */
.battery-menu .battery-section-label {
  height: 18px;
  min-height: 18px;
  opacity: 0.45;
  pointer-events: none;
}
.battery-menu .battery-section-label:hover {
  background: transparent;
}
.battery-menu .battery-section-label .menu-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-right: 0;
}

/* Energy rows reuse standard menu-item height */
.battery-energy-list {
  display: flex;
  flex-direction: column;
}
.battery-menu .battery-energy-row {
  pointer-events: none;
}
.battery-menu .battery-energy-row:hover {
  background: transparent;
}
.battery-menu .battery-energy-ico {
  opacity: 1;
  color: #34c759;
  font-size: 8px;
  line-height: 1;
}
.battery-menu .battery-energy-row .menu-label {
  padding-right: 8px;
}
.battery-energy-empty {
  display: flex;
  align-items: center;
  min-height: 22px;
  height: 22px;
  padding: 0 12px 0 23px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* Low Power Mode — same header row as Wi‑Fi toggle */
.battery-menu .battery-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  min-height: 28px;
  padding: 0 10px 0 12px;
  pointer-events: auto;
}
.battery-menu .battery-toggle-row:hover {
  background: transparent;
}
.battery-menu .battery-toggle-row .menu-label {
  font-weight: 600;
  padding-right: 8px;
  flex: 1 1 auto;
}

.battery-menu button.menu-item {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
  padding: 0 12px 0 5px;
}
.battery-menu button.menu-item:hover {
  background: #0a84ff;
  color: #fff;
}

/* Yellow battery icon when Low Power Mode is on (macOS) */
.status-battery-wrap.is-low-power .battery-icon {
  filter: brightness(0) saturate(100%) invert(77%) sepia(58%) saturate(600%) hue-rotate(5deg) brightness(104%) contrast(102%);
  opacity: 1;
}

/* Wi‑Fi status menu (menubar-style dropdown) */
.status-wifi-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.status-wifi-wrap .wifi-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  width: 240px;
  min-width: 240px;
  max-width: min(280px, calc(100vw - 16px));
  z-index: 1200;
}
.status-wifi-wrap.open .wifi-menu,
.status-wifi-wrap .wifi-menu:not([hidden]) {
  display: block;
}
.status-wifi-wrap .wifi-menu[hidden] {
  display: none !important;
}
.wifi-menu .wifi-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  min-height: 28px;
  padding: 0 10px 0 12px;
  pointer-events: auto;
}
.wifi-menu .wifi-menu-header:hover {
  background: transparent;
}
.wifi-menu .wifi-menu-header .menu-label {
  font-weight: 600;
  padding-right: 8px;
}
.wifi-switch {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  cursor: default;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.wifi-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.wifi-switch.is-on {
  background: #34c759;
}
.wifi-switch.is-on::after {
  transform: translateX(14px);
}
.wifi-menu .wifi-section-label {
  height: 18px;
  min-height: 18px;
  opacity: 0.45;
  pointer-events: none;
}
.wifi-menu .wifi-section-label .menu-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-right: 0;
}
.wifi-menu .wifi-net {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
}
.wifi-menu .wifi-net:hover,
.wifi-menu .menu-item:hover:not(.wifi-section-label):not(.wifi-menu-header) {
  background: #0a84ff;
  color: #fff;
}
.wifi-menu .wifi-net .menu-check {
  color: inherit;
  opacity: 0;
}
.wifi-menu .wifi-net.is-connected .menu-check {
  opacity: 1;
}
.wifi-menu .wifi-lock {
  flex: 0 0 auto;
  font-size: 10px;
  opacity: 0.55;
  margin-left: auto;
  line-height: 1;
}
.wifi-menu .wifi-net:hover .wifi-lock {
  opacity: 0.85;
}
.wifi-menu button.menu-item {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
  padding: 0 12px 0 5px;
}
.wifi-menu button.menu-item:hover {
  background: #0a84ff;
  color: #fff;
}
.status-wifi-wrap.wifi-off .status-wifi {
  opacity: 0.4;
}
.cc-menubar-icon {
  width: 14px;
  height: 14px;
  display: block;
  opacity: 0.95;
  /* SVG uses currentColor — no invert filter */
  filter: none;
  color: #f5f5f7;
}

/* ===================== CONTROL CENTER ===================== */
#cc-brightness-veil {
  position: fixed;
  inset: 0;
  z-index: 850;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cc-panel {
  position: fixed;
  top: 34px;
  right: 10px;
  z-index: 1100;
  width: 320px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(42, 42, 46, 0.72);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.14);
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
.cc-panel[hidden] {
  display: none !important;
}
.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cc-module {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
.cc-connectivity {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 6px;
  min-height: 168px;
}
.cc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 6px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: default;
  text-align: center;
  min-height: 0;
  transition: background 0.12s ease;
}
.cc-tile:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cc-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  flex-shrink: 0;
  line-height: 0;
  overflow: hidden;
}
.cc-tile-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  /* Optical center — SVG paths often sit slightly high/right in the viewBox */
  transform: translate(-0.25px, 0.25px);
}
.cc-tile.is-on .cc-tile-icon {
  background: #0a84ff;
  color: #fff;
}
.cc-tile-wifi.is-on .cc-tile-icon { background: #0a84ff; }
.cc-tile-bt.is-on .cc-tile-icon { background: #0a84ff; }
.cc-tile-airdrop.is-on .cc-tile-icon { background: #0a84ff; }
.cc-tile-focus.is-on .cc-tile-icon { background: #bf5af2; }
.cc-tile-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  width: 100%;
}
.cc-tile-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  width: 100%;
}
.cc-tile-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: 100%;
  max-width: 100%;
}
.cc-tile:not(.is-on) .cc-tile-sub {
  color: rgba(255, 255, 255, 0.4);
}

.cc-toggles {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  min-height: 168px;
  justify-content: space-evenly;
}
.cc-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 8px 6px 6px;
  border-radius: 10px;
  cursor: default;
  text-align: left;
  box-sizing: border-box;
}
.cc-chip:hover {
  background: rgba(255, 255, 255, 0.07);
}
.cc-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  flex-shrink: 0;
  color: #fff;
  line-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  /* Unicode glyphs sit heavy on the right — optical nudge */
  text-indent: -0.5px;
  padding-bottom: 1px;
}
.cc-chip.is-on .cc-chip-icon {
  background: #0a84ff;
}
.cc-chip[data-cc-toggle="dnd"].is-on .cc-chip-icon {
  background: #5e5ce6;
}
.cc-chip > span:not(.cc-chip-icon) {
  min-width: 0;
  line-height: 1.2;
  text-align: left;
}

.cc-slider-mod {
  grid-column: 1 / -1;
  padding: 10px 12px 12px;
}
.cc-kb {
  grid-column: 1 / -1;
}
.cc-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.cc-slider-label {
  font-size: 11px;
  font-weight: 600;
}
.cc-slider-val {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
.cc-slider-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cc-slider-glyph {
  font-size: 13px;
  width: 18px;
  text-align: center;
  opacity: 0.85;
  flex-shrink: 0;
}
/* Shared slot so bright/vol/keyboard assets all read the same size */
.cc-slider-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  object-position: center center;
  flex: 0 0 18px;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}
.cc-slider-icon-kb {
  /* same slot as the rest — no separate sizing */
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.cc-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
  cursor: default;
}
.cc-slider::-webkit-slider-runnable-track {
  height: 22px;
  border-radius: 999px;
  background: transparent;
}
.cc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  border: none;
  cursor: default;
}
.cc-slider::-moz-range-track {
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: none;
}
.cc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: default;
}
/* Fill track via background linear-gradient set in JS */

.cc-media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.cc-media-art {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(145deg, #3a3a42, #1c1c1e);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  flex-shrink: 0;
}
.cc-media-art.has-art {
  background: #111;
  color: transparent;
}
.cc-media-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-media-meta {
  min-width: 0;
}
.cc-media-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-media-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-media-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.cc-media-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0;
  cursor: default;
  padding: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.cc-media-btn .cc-media-ico {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.cc-media-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.cc-media-btn:active {
  color: #fff;
  transform: scale(0.94);
}
.cc-media.is-playing .cc-media-art.has-art {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Menu roots */
.menu-root {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: visible;
}
.menu-trigger {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  height: 22px;
  padding: 0 11px;
  border-radius: 4px;
  cursor: default;
  line-height: 22px;
  white-space: nowrap;
}
.menu-trigger.apple {
  font-size: 16px;
  padding: 0 10px;
  font-weight: 400;
  line-height: 20px;
}
.menu-trigger.menu-app-name {
  font-weight: 700;
  letter-spacing: -0.2px;
}
.menu-root:hover .menu-trigger,
.menu-root.open .menu-trigger {
  background: rgba(255, 255, 255, 0.12);
}
.menu-root.open .menu-trigger {
  background: rgba(10, 132, 255, 0.85);
  color: #fff;
}

/*
  Dropdown panel — macOS menubar style:
  auto width from content so long labels + shortcuts never clip
*/
.menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: max-content;
  min-width: 200px;
  max-width: min(420px, calc(100vw - 16px));
  padding: 4px;
  border-radius: 6px;
  background: rgba(42, 42, 46, 0.94);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(0, 0, 0, 0.25);
  z-index: 1100;
  box-sizing: border-box;
}
.menu-root.open .menu-dropdown { display: block; }
.menu-dropdown.flip-left {
  left: auto;
  right: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  min-height: 22px;
  height: 22px;
  padding: 0 12px 0 5px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: -0.08px;
  color: rgba(255, 255, 255, 0.92);
  cursor: default;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
}
.menu-item .menu-check {
  width: 18px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.95;
  color: inherit;
}
.menu-item .menu-label {
  flex: 1 1 auto;
  white-space: nowrap;
  padding-right: 28px;
}
.menu-item .menu-shortcut {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.36);
  letter-spacing: 0.35px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.menu-item .menu-shortcut.is-submenu {
  letter-spacing: 0;
  font-size: 15px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.42);
  padding-left: 8px;
}
.menu-item:hover:not(.disabled):not(.menu-header) {
  background: var(--blue);
  color: #fff;
}
.menu-item:hover:not(.disabled) .menu-shortcut {
  color: rgba(255, 255, 255, 0.9);
}
.menu-item.disabled {
  color: rgba(255, 255, 255, 0.34);
  pointer-events: none;
}
.menu-item.disabled .menu-shortcut { color: rgba(255, 255, 255, 0.22); }
.menu-item.menu-header {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  height: auto;
  min-height: 20px;
  line-height: 1.2;
  padding-top: 4px;
  padding-bottom: 2px;
  pointer-events: none;
}
.menu-sep {
  height: 1px;
  margin: 4px 12px 4px 23px;
  background: rgba(255, 255, 255, 0.12);
}

/* Right-click context menu (macOS Finder-style) */
.ctx-menu {
  position: fixed;
  z-index: 2000;
  width: max-content;
  min-width: 180px;
  max-width: min(360px, calc(100vw - 12px));
  padding: 4px;
  border-radius: 6px;
  background: rgba(42, 42, 46, 0.94);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: -0.08px;
}
.ctx-menu[hidden] { display: none !important; }
.ctx-item {
  display: flex;
  align-items: center;
  min-height: 22px;
  height: 22px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.92);
  cursor: default;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
}
.ctx-item .ctx-label {
  flex: 1 1 auto;
  white-space: nowrap;
  padding-right: 28px;
}
.ctx-item .ctx-shortcut {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.36);
  letter-spacing: 0.35px;
  white-space: nowrap;
  text-align: right;
}
.ctx-item .ctx-shortcut.is-submenu {
  letter-spacing: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.42);
}
.ctx-item:hover:not(.disabled) {
  background: var(--blue);
  color: #fff;
}
.ctx-item:hover:not(.disabled) .ctx-shortcut {
  color: rgba(255, 255, 255, 0.85);
}
.ctx-item.disabled {
  color: rgba(255, 255, 255, 0.34);
  pointer-events: none;
}
.ctx-item.disabled .ctx-shortcut { color: rgba(255, 255, 255, 0.22); }
.ctx-sep {
  height: 1px;
  margin: 4px 12px;
  background: rgba(255, 255, 255, 0.12);
}

/* DOCK — stable icons, even spacing (modern macOS) */
#dock {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  height: 68px;
  z-index: 900;
  background: rgba(30, 30, 32, 0.58);
  backdrop-filter: blur(48px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  /* Fixed box so oversized/scaled icons never reflow the dock on hover */
  box-sizing: border-box;
  overflow: visible;
}
.dock-item {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: default;
  position: relative;
  /* Icons sit bare on the dock glass — no per-app tile or hover box */
  background: transparent;
  border: none;
  box-shadow: none;
  /* Gentle macOS press — short ease, transform on the slot only */
  transition: transform 0.12s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform: scale(1);
  transform-origin: center center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dock-item:hover {
  background: transparent;
  border: none;
  margin: 0;
}
/*
  Real macOS dock press is very subtle (~2–3% contract + light dim),
  not a deep squash. Keep layout-stable flex slots.
*/
.dock-item:active,
.dock-item.pressed {
  transform: scale(0.97);
  transition-duration: 0.08s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Soft dim on the glyph — keep drop-shadow */
.dock-item:active .dock-icon-img,
.dock-item.pressed .dock-icon-img {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.32))
    brightness(0.9);
}
/* Very light squircle shade (macOS-like ink, not a heavy plate) */
.dock-item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.1s ease;
  z-index: 2;
}
.dock-item:active::after,
.dock-item.pressed::after {
  background: rgba(0, 0, 0, 0.1);
}
/* Circular shade for Safari compass */
.dock-item:has(.dock-icon-img-safari)::after {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
/* Trash: no square shade plate — only the bin art dims + contracts */
.dock-item-trash::after {
  display: none;
}
.dock-icon {
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
.dock-icon-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  border-radius: 10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transform-origin: center center;
  transition: filter 0.1s ease;
}
/*
  Per-asset optical scale so every icon fills the dock slot like Finder.
  notes ~11% margin; safari/settings ~12–18%; trash has black padding.
*/
.dock-icon-img-notes {
  transform: scale(1.12);
  border-radius: 10px;
}
/*
  Circular compass reads smaller than squircle icons.
  Use a larger intrinsic size (not transform: scale) so it stays sharp.
*/
.dock-icon-img-safari {
  width: 50px;
  height: 50px;
  transform: none;
  border-radius: 50%;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.dock-icon-img-settings {
  transform: scale(1.18);
}
/*
  Trash: larger optically, shifted left for center between sep & dock edge.
  Absolutely positioned so scale never changes flex layout (was expanding the dock on hover).
*/
.dock-item-trash {
  width: 48px;
  flex: 0 0 48px;
  margin: 0;
  /* Extra hit area without changing flex gap */
  overflow: visible;
}
.dock-icon-img-trash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: 0;
  /* -3px left nudge + scale — pure transform, zero layout impact */
  transform: translate(calc(-50% - 3px), -50%) scale(1.26);
  transform-origin: center center;
  border-radius: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(40, 40, 44, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f5f5f7;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 20;
}
/* small caret under tooltip */
.dock-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(40, 40, 44, 0.92);
}
.dock-item:hover .dock-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dock-item .dot {
  position: absolute;
  bottom: -6px;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  opacity: 0;
}
.dock-item.open .dot { opacity: 1; }
.sep {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 2px 0 4px;
  flex-shrink: 0;
}

/* WINDOWS — refined liquid glass (modern macOS) */
#wins {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none; /* windows re-enable themselves */
  overflow: hidden;
}
#wins .window {
  pointer-events: auto;
}
.window {
  position: absolute;
  min-width: 320px;
  min-height: 240px;
  background: var(--glass);
  backdrop-filter: blur(48px) saturate(190%);
  -webkit-backdrop-filter: blur(48px) saturate(190%);
  border: 0.5px solid var(--glass-edge);
  border-radius: 12px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(0, 0, 0, 0.25),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  -webkit-user-select: none;
  user-select: none;
  /* Avoid interpolating left/top/size on browser resize (feels like jitter) */
  transition: none;
}
.window.active {
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(0, 0, 0, 0.28),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.14);
}
.window.zoomed { border-radius: 10px; }
.window.resizing { user-select: none; }
body.win-resizing { cursor: default; user-select: none; }
body.win-resizing iframe { pointer-events: none; }

/* Slim titlebar — no thick glass slab */
.titlebar {
  position: relative;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
  cursor: default;
}
.titlebar:active { cursor: default; }

/*
  Unified liquid-glass windows (Finder, Notes, Contacts):
  traffic lights sit over the toolbar; window body is opaque dark night mode.
  Glass is used for chrome (toolbar / sidebar / pills), not the whole window.
*/
.window-unified {
  background: #1c1c1e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
}
/* Only cover the lights strip so the rest of the toolbar stays clickable/draggable */
.window-unified .titlebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 76px;
  height: 52px;
  z-index: 30;
  background: transparent;
  border-bottom: none;
  padding: 0 0 0 16px;
  pointer-events: none;
}
.window-unified .titlebar .lights {
  pointer-events: auto;
  margin-right: 0;
  height: 100%;
}
.window-unified .titlebar .title {
  display: none;
}
.window-unified .content {
  background: #1c1c1e;
}
.lights {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 11px;
  cursor: default;
  /* Isolate from app-specific fonts (Tux Paint, iTunes, etc.) */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  line-height: 0;
}
/* macOS traffic lights: default arrow, not hand */
.light {
  position: relative;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 0;
  overflow: hidden;
  vertical-align: middle;
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 0.5px 0.5px rgba(0, 0, 0, 0.12);
}
.light:focus { outline: none; }
.light.close { background: #ff5f57; }
.light.min { background: #febc2e; }
.light.max { background: #28c840; }
/* Slight dim when window not focused */
.window:not(.active) .light.close { background: #ff5f57; opacity: 0.55; }
.window:not(.active) .light.min { background: #febc2e; opacity: 0.55; }
.window:not(.active) .light.max { background: #28c840; opacity: 0.55; }

/*
  SVG glyphs — fixed geometry, same size, perfectly centered in every app.
  Shown only while the traffic-light group is hovered on the active window.
*/
.light-glyph {
  display: block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
  /* kill inherited transforms from parent apps */
  transform: none !important;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.light-glyph path {
  vector-effect: non-scaling-stroke;
}
/* Show only on group hover, and only on the active window */
.window.active .lights:hover .light-glyph {
  opacity: 1;
  visibility: visible;
}
/* Explicit hide otherwise */
.lights:not(:hover) .light-glyph,
.window:not(.active) .light-glyph {
  opacity: 0 !important;
  visibility: hidden !important;
}

.light:active {
  filter: brightness(0.92);
}

/* Never let app content styles restyle traffic lights */
.window .light,
.window .light * {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
}

/* Dragging windows / desktop icons — keep arrow cursor (never hand/grab) */
body.win-dragging,
body.win-dragging *,
body.desk-dragging,
body.desk-dragging *,
.window.dragging,
.window.dragging * {
  cursor: default !important;
}

/* True window-center (not flex-center past traffic lights) — macOS style */
.title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  pointer-events: none;
  cursor: default;
  padding: 0 72px; /* keep long titles clear of traffic lights */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titlebar .lights {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.content { flex: 1; overflow: auto; position: relative; min-height: 0; cursor: default; }

/* macOS-like: app chrome buttons keep the arrow cursor (links still use pointer) */
.window button,
.window .fn-side-item,
.window .fn-icon-item,
.window .fn-tb-btn,
.window .fn-view-btn,
.window .ct-tool-btn,
.window .ct-list-item,
.window .ct-group,
.window .bm-ctl,
.window .bm-pad,
.window .bm-step,
.window .lw-tb-btn,
.window .lw-big-btn,
.window .lw-ctrl-btn,
.window .lw-row,
.menu-trigger,
.menu-item,
.ctx-item,
.desk-icon,
.dock-item {
  cursor: default;
}
.window a,
.window a:hover,
.login-hint {
  cursor: pointer;
}

/* Resize handles — invisible hit targets around the window edges */
.resize-handle {
  position: absolute;
  z-index: 20;
  background: transparent;
}
.resize-handle.n  { top: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.resize-handle.s  { bottom: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.resize-handle.e  { right: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.resize-handle.w  { left: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.resize-handle.ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.resize-handle.nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.resize-handle.se { bottom: -3px; right: -3px; width: 16px; height: 16px; cursor: nwse-resize; }
.resize-handle.sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; }

/* Invisible hit targets only — no corner grip (matches modern macOS) */
.window:not(.resizable) .resize-handle { display: none; }

/* ===================== BEAT MAKER — HARDWARE UI ===================== */
.bm-wrap {
  --bm-metal: #1a1b22;
  --bm-metal-2: #101117;
  --bm-edge: rgba(255, 255, 255, 0.08);
  --bm-cyan: #3de0ff;
  --bm-pink: #ff3d9a;
  --bm-amber: #ffb020;
  /* Futuristic plastic UI stack — distinct from system UI fonts */
  --bm-font: "Outfit", "Segoe UI", system-ui, sans-serif;
  --bm-font-model: "Orbitron", "Arial Black", sans-serif; /* CNR plate only */
  --bm-font-digit: "Share Tech Mono", "SF Mono", ui-monospace, monospace;
  --c0: #ff4d6a;
  --c1: #3d9eff;
  --c2: #2ee6d6;
  --c3: #a78bfa;
  --c4: #ff9f43;
  --c5: #7c6cff;
  --c6: #ff6bb5;
  --c7: #2dd4a8;
  /* Content-sized chassis — window is locked to this height (no stretch warp) */
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: #f2f2f7;
  background:
    linear-gradient(165deg, #22232c 0%, #14151c 38%, #0c0d12 100%);
  font-family: var(--bm-font);
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* brushed chassis grain */
.bm-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 1px,
      rgba(255, 255, 255, 0.012) 1px,
      rgba(255, 255, 255, 0.012) 2px
    ),
    radial-gradient(ellipse at 50% -10%, rgba(61, 224, 255, 0.12), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(255, 61, 154, 0.08), transparent 45%);
  z-index: 0;
}

/* inner bezel */
.bm-wrap::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 40px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

.bm-chassis-shine {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
  z-index: 1;
}

.bm-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s;
  background:
    radial-gradient(circle at 30% 40%, rgba(61, 224, 255, 0.09), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255, 61, 154, 0.07), transparent 42%);
}
.bm-wrap.is-playing .bm-ambient {
  opacity: 1;
  animation: bm-pulse-ambient 1.2s ease-in-out infinite;
}
@keyframes bm-pulse-ambient {
  0%, 100% { opacity: 0.55; filter: hue-rotate(0deg); }
  50% { opacity: 1; filter: hue-rotate(12deg); }
}

/*
  Top bar: model · status · transport buttons · BPM
  Transport row: VOLUME | TEMPO sliders
*/
.bm-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 4px;
  flex-shrink: 0;
}
.bm-topbar .bm-ctl-row {
  margin-left: auto;
  flex-shrink: 0;
}
.bm-sliders,
.bm-slider-row {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
}
.bm-sliders .bm-tempo-wrap,
.bm-slider-row .bm-tempo-wrap {
  margin-left: 0;
  min-width: 110px;
  max-width: 200px;
  flex: 1 1 140px;
}

/* MPC-style silkscreened model plate */
.bm-model {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 2px 2px;
  min-width: 0;
}
/* Model plate — Orbitron only (reads as silkscreened chassis serial, not UI) */
.bm-model-num {
  font-family: var(--bm-font-model);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.15;
  color: #f0ece4;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 14px rgba(255, 200, 120, 0.12),
    0 0 1px rgba(255, 255, 255, 0.25);
  -webkit-text-stroke: 0.15px rgba(0, 0, 0, 0.4);
}
.bm-model-rule {
  display: block;
  width: 100%;
  max-width: 118px;
  height: 2px;
  margin-top: 3px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    rgba(255, 180, 60, 0.85) 0%,
    rgba(255, 120, 40, 0.55) 55%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(255, 150, 40, 0.35);
}

.bm-status {
  margin-left: 4px;
  margin-right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  align-self: center;
  flex-shrink: 0;
}
.bm-status-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3a42;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: 0.2s;
}
.bm-status-led.on {
  background: #2dff9a;
  box-shadow:
    0 0 10px #2dff9a,
    0 0 20px rgba(45, 255, 154, 0.45),
    inset 0 0 2px #fff;
  animation: bm-led-blink 0.9s ease-in-out infinite;
}
@keyframes bm-led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.bm-status-label {
  font-family: var(--bm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.bm-wrap.is-playing .bm-status-label {
  color: #7dffc0;
}

.bm-topbar .bm-bpm-display,
.bm-bpm-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  max-width: 88px;
  padding: 5px 12px 4px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #0a120f 0%, #050a08 100%);
  border: 1px solid rgba(45, 255, 154, 0.22);
  box-shadow:
    inset 0 0 18px rgba(45, 255, 154, 0.08),
    0 0 12px rgba(45, 255, 154, 0.08);
  box-sizing: border-box;
  margin-left: 6px;
}
.bm-bpm-label {
  font-family: var(--bm-font);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(45, 255, 154, 0.55);
  line-height: 1;
}
.bm-bpm {
  font-family: var(--bm-font-digit);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #5cffb0;
  text-shadow: 0 0 12px rgba(45, 255, 154, 0.55);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.bm-transport {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 6px 14px 10px;
  flex-shrink: 0;
}
.bm-transport .bm-sliders,
.bm-transport .bm-slider-row {
  margin-left: 0;
  max-width: none;
  flex: 1 1 auto;
}
.bm-ctl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  /* room for ring overflow so buttons stay equal visual size */
  padding: 4px;
}
.bm-row-label {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Shared circular control — Play / Clear / Undo / Download */
.bm-ctl {
  position: relative;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  max-width: 46px;
  max-height: 46px;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  overflow: visible;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, background 0.2s, opacity 0.15s;
}
.bm-ctl-icon {
  position: relative;
  z-index: 2;
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.bm-ctl-play .bm-ctl-icon { margin-left: 1px; }
.bm-ctl-play.playing .bm-ctl-icon { margin-left: 0; }

.bm-ctl-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(#14151c, #14151c) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08)) border-box;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 0;
}

.bm-ctl:hover {
  transform: scale(1.06);
}
.bm-ctl:active,
.bm-ctl.hit {
  transform: scale(0.94);
  filter: brightness(1.18);
}
.bm-ctl:hover .bm-ctl-ring { opacity: 0.85; }
.bm-ctl.hit .bm-ctl-ring { opacity: 1; }

.bm-ctl.is-disabled,
.bm-ctl:disabled {
  opacity: 0.38;
  cursor: default;
  filter: grayscale(0.35);
  transform: none !important;
  box-shadow: none !important;
}
.bm-ctl.is-disabled .bm-ctl-ring,
.bm-ctl:disabled .bm-ctl-ring { opacity: 0.25; }
.bm-ctl.is-busy { opacity: 0.65; pointer-events: none; }

/* Play — blue / red when playing */
.bm-ctl-play {
  background:
    radial-gradient(circle at 35% 30%, #5ab8ff, transparent 55%),
    linear-gradient(160deg, #1a8fff 0%, #0060d4 55%, #004aab 100%);
  box-shadow:
    0 6px 18px rgba(10, 120, 255, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.35) inset;
}
.bm-ctl-play .bm-ctl-ring {
  background:
    linear-gradient(#14151c, #14151c) padding-box,
    linear-gradient(135deg, rgba(61, 224, 255, 0.65), rgba(255, 61, 154, 0.4)) border-box;
}
.bm-ctl-play:hover {
  box-shadow:
    0 8px 24px rgba(10, 120, 255, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}
.bm-ctl-play.playing {
  background:
    radial-gradient(circle at 35% 30%, #ff7a72, transparent 55%),
    linear-gradient(160deg, #ff4d4d 0%, #d4182e 55%, #a00f1c 100%);
  box-shadow:
    0 6px 20px rgba(255, 50, 60, 0.5),
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.35) inset;
}
.bm-ctl-play.playing .bm-ctl-ring {
  opacity: 1;
  animation: bm-ring-spin 2.4s linear infinite;
}
@keyframes bm-ring-spin {
  to { transform: rotate(360deg); }
}

/* Clear — amber */
.bm-ctl-clear {
  background:
    radial-gradient(circle at 35% 30%, #ffb86b, transparent 55%),
    linear-gradient(160deg, #ff9f43 0%, #e67e22 55%, #c45f0a 100%);
  box-shadow:
    0 6px 18px rgba(230, 126, 34, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.35) inset;
}
.bm-ctl-clear .bm-ctl-ring {
  background:
    linear-gradient(#14151c, #14151c) padding-box,
    linear-gradient(135deg, rgba(255, 180, 80, 0.7), rgba(255, 80, 40, 0.45)) border-box;
}
.bm-ctl-clear:hover {
  box-shadow:
    0 8px 24px rgba(230, 126, 34, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}
.bm-ctl-clear.hit {
  box-shadow:
    0 0 22px rgba(255, 170, 60, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}

/* Undo — violet */
.bm-ctl-undo {
  background:
    radial-gradient(circle at 35% 30%, #c4b0ff, transparent 55%),
    linear-gradient(160deg, #9b8cff 0%, #6c5ce7 55%, #4b3fc4 100%);
  box-shadow:
    0 6px 18px rgba(108, 92, 231, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.35) inset;
}
.bm-ctl-undo .bm-ctl-ring {
  background:
    linear-gradient(#14151c, #14151c) padding-box,
    linear-gradient(135deg, rgba(180, 160, 255, 0.7), rgba(100, 80, 220, 0.45)) border-box;
}
.bm-ctl-undo:hover:not(:disabled):not(.is-disabled) {
  box-shadow:
    0 8px 24px rgba(108, 92, 231, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}
.bm-ctl-undo.hit {
  box-shadow:
    0 0 22px rgba(160, 140, 255, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}

/* Download — teal / cyan */
.bm-ctl-dl {
  background:
    radial-gradient(circle at 35% 30%, #6ef0ff, transparent 55%),
    linear-gradient(160deg, #3de0ff 0%, #12a8c4 55%, #0a7a90 100%);
  box-shadow:
    0 6px 18px rgba(18, 168, 196, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.35) inset;
}
.bm-ctl-dl .bm-ctl-ring {
  background:
    linear-gradient(#14151c, #14151c) padding-box,
    linear-gradient(135deg, rgba(100, 240, 255, 0.75), rgba(20, 140, 180, 0.45)) border-box;
}
.bm-ctl-dl:hover {
  box-shadow:
    0 8px 24px rgba(18, 168, 196, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}
.bm-ctl-dl.hit {
  box-shadow:
    0 0 22px rgba(80, 230, 255, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}

.bm-tempo-wrap {
  margin-left: 0;
  min-width: 110px;
  max-width: 200px;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 5px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.bm-volume-wrap {
  flex: 0 1 150px;
  max-width: 170px;
}
.bm-volume-wrap label span {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 180, 80, 0.75);
  letter-spacing: 0;
  margin-left: 2px;
}
.bm-volume-fill {
  background: linear-gradient(90deg, #ffb020, #ff6b3d 70%, #ff3d9a) !important;
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.4) !important;
}
.bm-tempo-wrap label {
  font-family: var(--bm-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.bm-tempo-track {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}
.bm-tempo-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: 55%;
  border-radius: 4px;
  background: linear-gradient(90deg, #3de0ff, #7c6cff 60%, #ff3d9a);
  box-shadow: 0 0 10px rgba(61, 224, 255, 0.45);
  pointer-events: none;
  z-index: 0;
}
.bm-tempo-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
}
.bm-tempo-wrap input[type="range"] {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
  cursor: pointer;
}
.bm-tempo-wrap input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.bm-tempo-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff, #d0d4e0);
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(61, 224, 255, 0.2);
}
.bm-tempo-wrap input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}
.bm-tempo-wrap input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff, #d0d4e0);
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.bm-tempo-hints {
  display: flex;
  justify-content: space-between;
  font-family: var(--bm-font-digit);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ---- section labels ---- */
.bm-section-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 14px 4px;
  flex-shrink: 0;
}
.bm-section-title {
  font-family: var(--bm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.bm-section-hint {
  font-family: var(--bm-font);
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.04em;
}

/* ---- rubber pads (6 pads · 3×2) — square toy plastic ---- */
.bm-pads {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 11px;
  padding: 10px 16px 12px;
  flex: 0 0 auto;
  height: 220px;
  max-height: 220px;
  min-height: 220px;
}
.bm-pad {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* Soft-square molded key */
  border-radius: 15px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
    justify-content: flex-start;
  padding: 12px 8px 10px;
  color: #fff;
  transform: translateZ(0);
  transition: transform 0.08s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.08s, filter 0.08s;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 3px 0 rgba(255, 255, 255, 0.08) inset,
    0 -5px 12px rgba(0, 0, 0, 0.4) inset,
    0 0 0 1px rgba(0, 0, 0, 0.4);
}
.bm-pad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.4;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 0.55px, transparent 0.7px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  z-index: 1;
}
.bm-pad::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 5%;
  height: 34%;
  border-radius: 40% 40% 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent);
  pointer-events: none;
  z-index: 1;
}
.bm-pad-glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 65%);
  transition: opacity 0.12s;
  z-index: 0;
}
.bm-pad-led {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 3;
  transition: 0.1s;
}
.bm-pad-cycle {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding: 3px 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 40, 48, 0.75), rgba(10, 10, 14, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.bm-pad-arr {
  width: 24px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, #ffffff 0%, #d8dce8 45%, #9aa3b5 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #1a1a22;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 #fff,
    inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}
.bm-pad-arr:hover {
  filter: brightness(1.08);
}
.bm-pad-arr:active {
  transform: translateY(1px) scale(0.94);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.bm-pad-dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
  min-width: 16px;
  padding: 0 2px;
}
.bm-pad-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}
.bm-pad-dot.on {
  background: #3de0ff;
  box-shadow: 0 0 6px rgba(61, 224, 255, 0.85);
}
.bm-pad-name {
  position: relative;
  z-index: 2;
  font-family: var(--bm-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(255, 255, 255, 0.08);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  margin-bottom: 4px;
  flex-shrink: 0;
  pointer-events: none;
}

/*
  Kick / 808 split pad
  — Left red Kick · right cyan 808
  — Big press zone = always plays that sound
  — LED = arms that sound for the sequencer row
*/
.bm-pad-split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  padding: 0 !important;
  gap: 0;
  background: #0c0c10 !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.bm-pad-split::before,
.bm-pad-split::after {
  display: none;
}
.bm-half {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  padding: 0;
  transition: filter 0.12s, opacity 0.12s;
}
.bm-half:not(.is-on) {
  opacity: 0.48;
  filter: saturate(0.65) brightness(0.78);
}
.bm-half.is-on {
  opacity: 1;
  filter: none;
}
.bm-half-kick {
  background: linear-gradient(160deg, #ff7a8e 0%, #e0314f 42%, #8c0e24 100%);
  border-radius: 15px 0 0 15px;
}
.bm-half-808 {
  background: linear-gradient(160deg, #6ef4ff 0%, #14b8d0 42%, #067a8c 100%);
  border-radius: 0 15px 15px 0;
}
.bm-half-seam {
  width: 2px;
  flex-shrink: 0;
  align-self: stretch;
  z-index: 3;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.12),
    rgba(0, 0, 0, 0.65) 50%,
    rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
/* Arm LED — top of each half */
.bm-arm {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.bm-arm.is-on {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 10px #fff,
    0 0 18px rgba(255, 255, 255, 0.55),
    inset 0 0 2px rgba(255, 255, 255, 0.9);
}
.bm-half-808 .bm-arm.is-on {
  background: #e8ffff;
  box-shadow:
    0 0 10px #7cf0ff,
    0 0 18px rgba(61, 224, 255, 0.7);
}
/* Main press surface */
.bm-half-body {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 22px 4px 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
  touch-action: manipulation;
}
.bm-half-title {
  font-family: var(--bm-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.bm-half-sub {
  font-family: var(--bm-font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.bm-half-cycle {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 0 4px 8px;
}
.bm-half-cycle .bm-pad-arr {
  width: 22px;
  height: 20px;
  font-size: 14px;
}
.bm-half.hit {
  filter: brightness(1.25) saturate(1.15) !important;
  opacity: 1 !important;
}
.bm-half-kick .bm-half-body {
  /* subtle inner plastic */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.08);
}
.bm-half-808 .bm-half-body {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.08);
}
.bm-pad[data-sound="1"] { background: linear-gradient(155deg, #5eb3ff 0%, #1a7de8 42%, #0a4fa0 100%); }
.bm-pad[data-sound="2"] { background: linear-gradient(155deg, #4ef0e4 0%, #12b8ae 42%, #067a74 100%); }
.bm-pad[data-sound="3"] { background: linear-gradient(155deg, #b8a0ff 0%, #7c5cff 42%, #4a2fc4 100%); }
.bm-pad[data-sound="4"] { background: linear-gradient(155deg, #ffb35c 0%, #f08c1a 42%, #b35a00 100%); }
.bm-pad[data-sound="5"] { background: linear-gradient(155deg, #5ff0c8 0%, #12c996 42%, #06855f 100%); }

.bm-pad:not(.bm-pad-split):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.bm-pad:not(.bm-pad-split):active,
.bm-pad:not(.bm-pad-split).hit {
  transform: scale(0.94) translateY(1px);
  filter: brightness(1.28) saturate(1.15);
}
.bm-pad.hit .bm-pad-glow { opacity: 1; }
.bm-pad.hit .bm-pad-led {
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 18px currentColor;
}
.bm-pad[data-sound="0"].hit { box-shadow: 0 0 28px rgba(255, 80, 100, 0.75), 0 4px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.3) inset !important; }
.bm-pad[data-sound="1"].hit { box-shadow: 0 0 28px rgba(80, 160, 255, 0.75), 0 4px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.3) inset !important; }
.bm-pad[data-sound="2"].hit { box-shadow: 0 0 28px rgba(50, 240, 220, 0.7), 0 4px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.3) inset !important; }
.bm-pad[data-sound="3"].hit { box-shadow: 0 0 28px rgba(160, 120, 255, 0.75), 0 4px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.3) inset !important; }
.bm-pad[data-sound="4"].hit { box-shadow: 0 0 28px rgba(255, 170, 50, 0.75), 0 4px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.3) inset !important; }
.bm-pad[data-sound="5"].hit { box-shadow: 0 0 28px rgba(50, 230, 170, 0.7), 0 4px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.3) inset !important; }

/* ---- sequencer (futuristic LED matrix) ---- */
.bm-seq-section {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 12px 14px;
  overflow: visible;
}
.bm-sequencer-shell {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 12px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(61, 224, 255, 0.07), transparent 55%),
    linear-gradient(165deg, #12141c 0%, #0a0b10 55%, #08090e 100%);
  border: 1px solid rgba(61, 224, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(61, 224, 255, 0.06),
    0 6px 20px rgba(0, 0, 0, 0.35);
  overflow: visible;
}
/* subtle scanline / circuit grid */
.bm-sequencer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(61, 224, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 224, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 12px, 12px 100%;
  z-index: 0;
}
.bm-seq-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(61, 224, 255, 0.04) 48%,
    rgba(255, 61, 154, 0.04) 52%,
    transparent 100%
  );
  background-size: 100% 200%;
  transition: opacity 0.3s;
}
.bm-wrap.is-playing .bm-seq-scan {
  opacity: 1;
  animation: bm-seq-scan 2.8s linear infinite;
}
@keyframes bm-seq-scan {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

.bm-playhead {
  position: relative;
  z-index: 1;
  display: grid;
  /* Label + 16 steps */
  grid-template-columns: 88px repeat(16, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 2px;
  align-items: center;
  flex-shrink: 0;
}
.bm-playhead-spacer { height: 1px; }
.bm-playhead-cell {
  display: flex;
  justify-content: center;
  height: 10px;
}
.bm-playhead-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: 0.1s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.bm-playhead-cell.active .bm-playhead-dot {
  width: 9px;
  height: 9px;
  background: #fff;
  border-color: #9ff;
  box-shadow:
    0 0 10px #fff,
    0 0 22px rgba(61, 224, 255, 0.95),
    0 0 36px rgba(61, 224, 255, 0.4);
}

.bm-step-numbers {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 88px repeat(16, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.bm-step-num {
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  font-family: var(--bm-font-digit);
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.02em;
}
.bm-step-num.accent {
  color: rgba(61, 224, 255, 0.78);
  text-shadow: 0 0 8px rgba(61, 224, 255, 0.4);
  font-weight: 400;
}
.bm-step-num-spacer { visibility: hidden; }

.bm-sequencer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
  justify-content: flex-start;
  touch-action: none;
}
.bm-row {
  display: grid;
  grid-template-columns: 88px repeat(16, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  transition: background 0.1s, box-shadow 0.1s, opacity 0.15s;
  border-radius: 10px;
  flex: 0 0 auto;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
}
.bm-row.flash {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.04);
}
.bm-row-label {
  display: flex;
  align-items: center;
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  flex-shrink: 0;
  padding-right: 0;
  overflow: visible;
}
.bm-row-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px 4px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.25);
}
.bm-row-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor, 0 0 2px #fff;
  opacity: 0.95;
}
.bm-row-text {
  font-family: var(--bm-font);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
}
.bm-row[data-sound="0"] .bm-row-dot { background: var(--c0); color: var(--c0); }
.bm-row[data-sound="1"] .bm-row-dot { background: var(--c1); color: var(--c1); }
.bm-row[data-sound="2"] .bm-row-dot { background: var(--c2); color: var(--c2); }
.bm-row[data-sound="3"] .bm-row-dot { background: var(--c3); color: var(--c3); }
.bm-row[data-sound="4"] .bm-row-dot { background: var(--c4); color: var(--c4); }
.bm-row[data-sound="5"] .bm-row-dot { background: var(--c7); color: var(--c7); }

/* LED step cells — rubberized mini-pads */
.bm-step {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.25) 100%);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s, box-shadow 0.12s, border-color 0.12s, filter 0.1s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.3);
  padding: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.bm-step-core {
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: background 0.12s, box-shadow 0.12s;
  pointer-events: none;
}
.bm-step-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 65%);
  transition: opacity 0.1s;
}
/* micro grain like pads */
.bm-step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.25;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 0.5px, transparent 0.6px);
  background-size: 2.5px 2.5px;
  z-index: 1;
}
/* top gloss */
.bm-step::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8%;
  height: 35%;
  border-radius: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
  z-index: 2;
}
.bm-step.beat {
  border-color: rgba(61, 224, 255, 0.14);
  background:
    linear-gradient(160deg, rgba(61, 224, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(0, 0, 0, 0.28) 100%);
}
.bm-step:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.06);
  filter: brightness(1.12);
}
.bm-step:hover .bm-step-core {
  background: rgba(255, 255, 255, 0.08);
}
/* Press feedback on the core only — outer cell size stays fixed */
.bm-step:active .bm-step-core { transform: scale(0.92); }

/* per-row neon when armed */
.bm-row[data-sound="0"] .bm-step.on {
  border-color: #ff8fa0;
  background: linear-gradient(155deg, #ff6b81 0%, #e0314f 50%, #9b1028 100%);
  box-shadow:
    0 0 14px rgba(224, 49, 79, 0.65),
    0 0 4px rgba(255, 120, 140, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.bm-row[data-sound="1"] .bm-step.on {
  border-color: #8ecaff;
  background: linear-gradient(155deg, #5eb3ff 0%, #1a7de8 50%, #0a4fa0 100%);
  box-shadow:
    0 0 14px rgba(26, 125, 232, 0.65),
    0 0 4px rgba(100, 180, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.bm-row[data-sound="2"] .bm-step.on {
  border-color: #8ffff6;
  background: linear-gradient(155deg, #4ef0e4 0%, #12b8ae 50%, #067a74 100%);
  box-shadow:
    0 0 14px rgba(18, 184, 174, 0.6),
    0 0 4px rgba(80, 240, 230, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.bm-row[data-sound="3"] .bm-step.on {
  border-color: #d4c6ff;
  background: linear-gradient(155deg, #b8a0ff 0%, #7c5cff 50%, #4a2fc4 100%);
  box-shadow:
    0 0 14px rgba(124, 92, 255, 0.65),
    0 0 4px rgba(180, 150, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.bm-row[data-sound="4"] .bm-step.on {
  border-color: #ffd08a;
  background: linear-gradient(155deg, #ffb35c 0%, #f08c1a 50%, #b35a00 100%);
  box-shadow:
    0 0 14px rgba(240, 140, 26, 0.65),
    0 0 4px rgba(255, 180, 80, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.bm-row[data-sound="5"] .bm-step.on {
  border-color: #9affdf;
  background: linear-gradient(155deg, #5ff0c8 0%, #12c996 50%, #06855f 100%);
  box-shadow:
    0 0 14px rgba(18, 201, 150, 0.6),
    0 0 4px rgba(80, 240, 190, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.bm-step.on .bm-step-core {
  background: transparent;
  box-shadow: none;
}
.bm-step.on .bm-step-glow { opacity: 0.35; }
.bm-step.on.pop {
  animation: bm-step-pop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.bm-step.on.pop .bm-step-glow { opacity: 0.85; }
/* Scale only the inner core — outer cell size stays fixed (no window reflow) */
@keyframes bm-step-pop {
  0% { filter: brightness(1.35); }
  40% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}
.bm-step.on.pop .bm-step-core {
  animation: bm-step-core-pop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes bm-step-core-pop {
  0% { transform: scale(0.86); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.bm-step.playing {
  z-index: 2;
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 1px;
  filter: brightness(1.15);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.bm-step.on.playing {
  filter: brightness(1.35) saturate(1.2);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.45),
    0 0 14px currentColor,
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.bm-step.on.playing .bm-step-glow { opacity: 0.75; }

#w-beatmaker .content {
  overflow: hidden;
  background: #0c0d12;
  display: block;
  scrollbar-gutter: stable;
}
#w-beatmaker .bm-wrap {
  height: auto;
  min-height: 0;
}
#w-beatmaker .bm-sequencer-shell {
  contain: layout style;
}
#w-beatmaker .bm-step {
  transform: translateZ(0);
}

/* ===================== REST OF THE STYLES (unchanged) ===================== */
/* ===================== MINESWEEPER — Windows Vista (ref: images/minesweeper.jpeg) ===================== */
/* macOS traffic lights stay; client area matches Vista Minesweeper */
#w-minesweeper {
  background: #d8dde4;
  border: 1px solid rgba(70, 80, 95, 0.55);
  border-radius: 7px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}
#w-minesweeper .titlebar {
  background: linear-gradient(180deg, #e8e8ec 0%, #c8c8d0 48%, #b8b8c2 100%);
  border-bottom: 1px solid #8e8e98;
}
#w-minesweeper .titlebar .title {
  color: #202028;
  font-weight: 600;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
#w-minesweeper .content {
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent;
  padding: 0;
}

.ms-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", Tahoma, "Lucida Grande", sans-serif;
  color: #1a1a1a;
  user-select: none;
  -webkit-user-select: none;
}

/* Thin Vista menu strip */
.ms-menubar {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  height: 22px;
  padding: 0 5px;
  background: linear-gradient(180deg, #f4f5f8 0%, #e6e8ee 100%);
  border-bottom: 1px solid #b4b8c0;
  box-shadow: inset 0 1px 0 #ffffff;
}
.ms-menu-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #111;
  font-size: 11.5px;
  font-family: inherit;
  padding: 1px 7px 2px;
  border-radius: 2px;
  cursor: default;
  line-height: 1.2;
}
.ms-menu-btn:hover {
  background: linear-gradient(180deg, #eaf3fc, #c9dff5);
  border-color: #7aa3cf;
}
.ms-game-menu {
  position: absolute;
  top: 20px;
  left: 3px;
  z-index: 20;
  min-width: 168px;
  padding: 3px;
  background: #f0f2f6;
  border: 1px solid #5a6a7a;
  border-radius: 2px;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ms-game-menu[hidden] { display: none !important; }
.ms-game-menu button {
  text-align: left;
  border: none;
  background: transparent;
  padding: 3px 12px;
  font-size: 11.5px;
  font-family: inherit;
  color: #111;
  border-radius: 1px;
  cursor: default;
}
.ms-game-menu button:hover {
  background: #316ac5;
  color: #fff;
}
.ms-menu-sep {
  height: 1px;
  margin: 3px 5px;
  background: #c4cad2;
}

/*
  Continuous silver-blue metal face
  Colors sampled from images/minesweeper.jpeg
*/
.ms-surface {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 18px 14px;
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg,
      #dce4f0 0%,
      #c8d4e4 22%,
      #b8c6d8 48%,
      #a8b8cc 72%,
      #98aac0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(60, 80, 110, 0.12);
}

/* Soft plate under the tile grid — not a heavy framed bevel */
.ms-board {
  padding: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #9aacc0 0%, #7a90a8 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 6px rgba(30, 50, 80, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.ms-grid {
  display: grid;
  gap: 2px;
  padding: 0;
  background: #2a4a78; /* dark channel between raised tiles */
  width: max-content;
  margin: 0 auto;
  box-shadow: inset 0 1px 3px rgba(0, 20, 50, 0.45);
}

/*
  Unopened tile — Vista glossy blue 3D buttons
  Palette from reference: body ~rgb(100,140,235), highlight lighter cyan-blue
*/
.ms-cell {
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 2px;
  background:
    linear-gradient(160deg,
      #9ec8ff 0%,
      #6aa8f0 18%,
      #4a88e0 40%,
      #3870d0 62%,
      #2f62c0 82%,
      #3a6ec8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(10, 40, 100, 0.45),
    inset -1px 0 0 rgba(10, 40, 100, 0.22),
    0 1px 1px rgba(10, 30, 70, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  position: relative;
  overflow: hidden;
}
/* top specular gloss cap */
.ms-cell::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 45%;
  border-radius: 1px 1px 40% 40%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 55%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
/* subtle left edge highlight */
.ms-cell::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  bottom: 3px;
  width: 35%;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ms-cell:hover:not(.revealed):not(.mine-hit) {
  filter: brightness(1.07);
}
.ms-cell:active:not(.revealed) {
  background: linear-gradient(180deg, #2858a8 0%, #3a78c8 100%);
  box-shadow: inset 0 2px 4px rgba(0, 25, 70, 0.55);
  filter: none;
}
.ms-cell:active:not(.revealed)::before,
.ms-cell:active:not(.revealed)::after {
  opacity: 0.2;
}

/* Opened — flat light field (classic minesweeper) */
.ms-cell.revealed {
  background: #d8e0ea;
  box-shadow: inset 0 0 0 1px #a8b4c4;
  color: inherit;
  filter: none;
}
.ms-cell.revealed::before,
.ms-cell.revealed::after {
  display: none;
}
.ms-cell.flagged {
  color: inherit;
}
.ms-cell.flagged::before {
  opacity: 0.4;
}
.ms-flag {
  font-size: 12px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
  position: relative;
  z-index: 1;
}
.ms-mine {
  font-size: 10px;
  color: #1a1a1a;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.ms-x {
  font-size: 11px;
  color: #c00;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.ms-num {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  position: relative;
  z-index: 1;
}
.ms-cell.mine {
  background: #c8d4e0;
  box-shadow: inset 0 0 0 1px #a0aebc;
}
.ms-cell.mine-hit {
  background: #e04040 !important;
  box-shadow: inset 0 0 0 1px #a01818 !important;
}
.ms-cell.flag-wrong {
  background: #e8d0d0;
}

/* Classic Minesweeper number colors */
.ms-cell.n1 .ms-num, .ms-cell.n1 { color: #0000ff; }
.ms-cell.n2 .ms-num, .ms-cell.n2 { color: #008200; }
.ms-cell.n3 .ms-num, .ms-cell.n3 { color: #ff0000; }
.ms-cell.n4 .ms-num, .ms-cell.n4 { color: #000080; }
.ms-cell.n5 .ms-num, .ms-cell.n5 { color: #800000; }
.ms-cell.n6 .ms-num, .ms-cell.n6 { color: #008080; }
.ms-cell.n7 .ms-num, .ms-cell.n7 { color: #000000; }
.ms-cell.n8 .ms-num, .ms-cell.n8 { color: #808080; }

/*
  Footer controls sit flush on the metal surface
  (clock | time LCD | mines LCD | gear) — no separate bar box
*/
.ms-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 0 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Chrome round buttons (clock / options) */
.ms-round-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #6a7a90;
  background:
    radial-gradient(circle at 35% 30%,
      #ffffff 0%,
      #eef2f8 38%,
      #c8d2e0 78%,
      #a8b6c8 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 1px rgba(40, 60, 90, 0.15),
    0 1px 2px rgba(20, 40, 70, 0.28);
  color: #3a4e66;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: default;
  flex-shrink: 0;
}
.ms-round-btn:hover {
  filter: brightness(1.06);
}
.ms-round-btn:active {
  background: radial-gradient(circle at 35% 30%, #d0d8e4 0%, #b0bcc8 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
  filter: none;
}
.ms-round-btn.ms-face-dead {
  color: #a02020;
  background: radial-gradient(circle at 35% 30%, #ffe8e8 0%, #e0a8a8 100%);
}
.ms-round-btn.ms-face-win {
  color: #206020;
  background: radial-gradient(circle at 35% 30%, #e8ffe8 0%, #a8d0a8 100%);
}
.ms-round-btn.ms-face-oh {
  color: #3050a0;
}
.ms-round-btn.ms-pulse {
  animation: ms-pulse 0.35s ease;
}
@keyframes ms-pulse {
  50% { transform: scale(1.1); }
}

/* Blue LCD glass counters (Vista) */
.ms-lcd {
  min-width: 36px;
  height: 22px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg,
      #1a3868 0%,
      #0e2448 40%,
      #0a1a38 100%);
  color: #6ec0ff;
  font-family: "Consolas", "Lucida Console", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #0a1830;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    inset 0 0 8px rgba(60, 140, 255, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 0 6px rgba(80, 170, 255, 0.85);
  line-height: 1;
}

/* ===================== TUX PAINT (classic 3-column) ===================== */
#w-paint {
  background: #3d8ec4;
  border: 2px solid #1e5a86;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
#w-paint .titlebar {
  background: linear-gradient(180deg, #7ec8f0 0%, #3d8ec4 100%);
  border-bottom: 2px solid #1e5a86;
  color: #0a3048;
}
#w-paint .titlebar .title {
  color: #0a3048;
  font-weight: 800;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;
  letter-spacing: -0.2px;
}
#w-paint .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #4a9fd4;
}

.tp {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Segoe UI", sans-serif;
  color: #123;
  user-select: none;
  -webkit-user-select: none;
}

/* Main row: tools | canvas | selector */
.tp-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 108px 1fr 148px;
  overflow: hidden;
}

.tp-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, #3d8ec4 0%, #2f7ab0 100%);
  overflow: hidden;
}
.tp-sidebar-left {
  border-right: 3px solid #1e5a86;
}
.tp-sidebar-right {
  border-left: 3px solid #1e5a86;
  background: linear-gradient(180deg, #4aa3d6 0%, #3486bc 100%);
}
.tp-side-head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 6px;
  border-bottom: 2px solid #1e5a86;
  background: linear-gradient(180deg, #6ec0ee, #3d8ec4);
}
.tp-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  object-position: 70% center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.tp-side-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.2px;
}

.tp-tools {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  min-height: 48px;
  padding: 4px 2px 3px;
  border: 2px solid #1e5a86;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff6d0 0%, #f0c86a 55%, #e0b040 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 0 #1a4a70;
  color: #1a3040;
  font-family: inherit;
  cursor: default;
  flex-shrink: 0;
}
.tp-tool:hover { filter: brightness(1.06); }
.tp-tool:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18);
}
.tp-tool.active {
  background: linear-gradient(180deg, #fff06a 0%, #ffb400 50%, #f09000 100%);
  border-color: #a05000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 2px #ffe066,
    0 2px 0 #804000;
}
.tp-tool-action {
  background: linear-gradient(180deg, #e8f4ff 0%, #a8d0f0 100%);
}
.tp-tool-ico {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
}
.tp-tool-lab {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

/* Canvas column */
.tp-center {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 6px;
  gap: 6px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(255, 255, 255, 0.22), transparent 65%),
    #4a9fd4;
}
.tp-canvas-frame {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #ffffff;
  border: 3px solid #1e5a86;
  border-radius: 4px;
  box-shadow:
    0 3px 0 #163d5c,
    0 8px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
#tp-canvas,
#tp-overlay {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  display: block;
  cursor: crosshair;
  background: #fff;
}
#tp-overlay {
  pointer-events: none;
  background: transparent;
}

.tp-speech {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  min-height: 28px;
}
.tp-speech-bubble {
  display: inline-block;
  max-width: 95%;
  padding: 5px 14px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #1e5a86;
  color: #0a3048;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 2px 0 #1e5a86;
  text-align: center;
}

/* Right selector panel */
.tp-selector {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-content: flex-start;
}
.tp-sel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 6px 4px;
  border: 2px solid #1e5a86;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #d0e8f8);
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  color: #123;
  cursor: default;
  flex-shrink: 0;
}
.tp-sel.active {
  background: linear-gradient(180deg, #fff06a, #ffb400);
  border-color: #a05000;
  box-shadow: 0 0 0 2px #ffe066;
}
.tp-sel-stamp {
  font-size: 26px;
  line-height: 1;
  min-height: 44px;
}
.tp-sel-emoji {
  font-size: 22px;
  line-height: 1;
}
.tp-sel-name {
  font-size: 9.5px;
  line-height: 1.1;
}
.tp-sel-dot {
  display: block;
  background: #222;
  flex-shrink: 0;
}
.tp-sel-shape {
  font-size: 22px;
  line-height: 1;
}
.tp-sel-hint {
  font-size: 11px;
  font-weight: 800;
  color: #0a3048;
  padding: 10px 6px;
  text-align: center;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  border: 2px dashed #1e5a86;
}
.tp-sel-preview {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  border: 2px solid #1e5a86;
}

/* Bottom color bar */
.tp-bottom {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #3d8ec4, #2f7ab0);
  border-top: 3px solid #1e5a86;
}
.tp-colors-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.5px;
}
.tp-colors {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  border: 2px solid #1e5a86;
  max-height: 78px;
  overflow-y: auto;
}
.tp-color {
  width: 100%;
  aspect-ratio: 1;
  min-height: 18px;
  border-radius: 3px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  padding: 0;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.tp-color.active {
  border-color: #fff;
  box-shadow:
    0 0 0 2px #ffdd00,
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 1;
}
.tp-swatch-wrap {
  flex-shrink: 0;
}
.tp-swatch {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #1e5a86, 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Prevent page/window scroll while finger-painting */
body.tp-drawing {
  touch-action: none;
  overscroll-behavior: none;
}
body.tp-drawing #w-paint,
body.tp-drawing #w-paint .content {
  touch-action: none;
  overscroll-behavior: none;
}

/* ===================== NOTES (complete macOS night + glass) ===================== */
.nt {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 13px;
  overflow: hidden;
  min-height: 0;
}
#w-notes .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #1c1c1e;
}
#w-notes .nt {
  flex: 1;
  min-height: 0;
}

/* Toolbar — glass chrome, room for traffic lights */
.nt-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 10px 78px;
  background: linear-gradient(
    180deg,
    rgba(52, 52, 56, 0.98) 0%,
    rgba(40, 40, 44, 0.96) 100%
  );
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  cursor: default;
}
.nt-tb-left,
.nt-tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nt-tb-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.nt-tb-group {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
.nt-tb-btn {
  width: 30px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: default;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
.nt-tb-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.nt-tb-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.nt-tb-btn-active {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nt-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(300px, 100%);
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.nt-search-ico {
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
.nt-search {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  -webkit-user-select: text;
  user-select: text;
}
.nt-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* 3-pane body */
.nt-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 188px 268px 1fr;
  overflow: hidden;
}

/* Folders sidebar */
.nt-sidebar {
  background: rgba(40, 40, 44, 0.96);
  border-right: 0.5px solid rgba(255, 255, 255, 0.08);
  padding: 10px 8px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: inset -0.5px 0 0 rgba(255, 255, 255, 0.04);
}
.nt-side-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  padding: 14px 8px 5px;
  letter-spacing: -0.1px;
}
.nt-side-label:first-child {
  padding-top: 2px;
}
.nt-folder {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #f5f5f7;
  font-size: 13px;
  font-family: inherit;
  cursor: default;
  text-align: left;
  margin-bottom: 1px;
}
.nt-folder:hover:not(.locked) {
  background: rgba(255, 255, 255, 0.07);
}
.nt-folder.active {
  background: rgba(10, 132, 255, 0.92);
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.nt-folder.locked {
  opacity: 0.42;
}
.nt-folder-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}
.nt-folder-yellow {
  color: #ffd60a;
}
.nt-folder-tag {
  color: #64d2ff;
}
.nt-folder-shared {
  color: rgba(255, 255, 255, 0.7);
}
.nt-folder.active .nt-folder-icon {
  color: #fff;
}
.nt-folder.active .nt-folder-yellow {
  color: #ffe566;
}
.nt-folder.active .nt-folder-tag {
  color: #c7f0ff;
}
.nt-folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.1px;
}
.nt-folder-count {
  font-size: 12px;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}
.nt-folder.active .nt-folder-count {
  opacity: 0.92;
}
.nt-side-footer {
  margin-top: auto;
  padding-top: 12px;
}
.nt-side-new {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-family: inherit;
  cursor: default;
}
.nt-side-new:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Mid column: header + list */
.nt-mid {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #161618;
  border-right: 0.5px solid rgba(255, 255, 255, 0.07);
}
.nt-list-header {
  flex-shrink: 0;
  padding: 12px 14px 10px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(32, 32, 34, 0.98), rgba(26, 26, 28, 0.96));
}
.nt-list-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nt-list-header-title {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #fff;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nt-list-sort {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
  cursor: default;
  flex-shrink: 0;
  padding: 0;
}
.nt-list-sort:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nt-list-header-count {
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
}
.nt-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #161618;
}
.nt-list-section {
  padding: 10px 14px 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: -0.1px;
  position: sticky;
  top: 0;
  background: #161618;
  z-index: 1;
}
.nt-list-item {
  width: 100%;
  display: block;
  padding: 11px 14px 12px;
  border: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  color: #f5f5f7;
  font-family: inherit;
  text-align: left;
  cursor: default;
}
.nt-list-item:hover {
  background: rgba(255, 255, 255, 0.045);
}
.nt-list-item.active {
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.95), rgba(10, 120, 235, 0.92));
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.nt-list-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.nt-list-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nt-list-pin {
  flex-shrink: 0;
  color: rgba(255, 214, 10, 0.95);
  display: grid;
  place-items: center;
  opacity: 0.95;
}
.nt-list-item.active .nt-list-pin {
  color: #ffe566;
}
.nt-list-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  opacity: 0.55;
  min-width: 0;
}
.nt-list-item.active .nt-list-meta {
  opacity: 0.92;
}
.nt-list-date {
  flex-shrink: 0;
  font-weight: 600;
}
.nt-list-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.nt-list-tags {
  margin-top: 5px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.nt-list-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(100, 210, 255, 0.14);
  color: #7dd7ff;
  border: 0.5px solid rgba(100, 210, 255, 0.22);
}
.nt-list-item.active .nt-list-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

/* Gallery view cards */
.nt-list-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  align-content: start;
}
.nt-list-gallery .nt-list-section {
  grid-column: 1 / -1;
  padding: 6px 4px 2px;
  background: transparent;
  position: static;
}
.nt-list-gallery .nt-list-item {
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.nt-list-gallery .nt-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nt-list-gallery .nt-list-item.active {
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.95), rgba(10, 120, 235, 0.92));
}
.nt-list-gallery .nt-list-meta {
  flex-direction: column;
  gap: 3px;
}
.nt-list-gallery .nt-list-preview {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}
.nt-list-gallery .nt-list-empty {
  grid-column: 1 / -1;
}

.nt-list-empty {
  padding: 48px 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nt-list-empty-pad,
.nt-editor-empty-pad {
  width: 52px;
  height: 60px;
  border-radius: 6px 6px 8px 8px;
  background: linear-gradient(180deg, #3a2f28 0 18%, #f5e6a8 18%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
  opacity: 0.85;
}
.nt-list-empty-pad-top,
.nt-editor-empty-pad-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(180deg, #5a4336, #3d3128);
}
.nt-list-empty-pad-lines,
.nt-editor-empty-pad-lines {
  position: absolute;
  left: 10px;
  right: 8px;
  top: 28%;
  bottom: 10%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 9px,
    rgba(120, 100, 40, 0.22) 9px 10px
  );
  border-left: 1.5px solid rgba(200, 90, 70, 0.35);
  margin-left: 6px;
}
.nt-editor-empty-pad {
  width: 78px;
  height: 90px;
  border-radius: 10px 10px 12px 12px;
  opacity: 0.9;
  margin-bottom: 10px;
}
.nt-list-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.nt-list-empty-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
  max-width: 180px;
  line-height: 1.35;
}

/* Editor */
.nt-editor {
  background: #1c1c1e;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.nt-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.35);
  padding: 24px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 42%, rgba(255, 214, 10, 0.05), transparent 70%),
    #1c1c1e;
}
.nt-editor-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.2px;
}
.nt-editor-empty-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.32);
  text-align: center;
  max-width: 260px;
  line-height: 1.4;
}
.nt-empty-cta {
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  background: rgba(10, 132, 255, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: default;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}
.nt-empty-cta:hover {
  background: #0a84ff;
}

.nt-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(44, 44, 48, 0.95), rgba(34, 34, 38, 0.95));
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
}
.nt-fmt-group {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.07);
}
.nt-fmt-spacer {
  flex: 1;
}
.nt-fmt {
  width: 28px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-family: inherit;
  cursor: default;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}
.nt-fmt:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.nt-fmt-aa {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.nt-fmt-restore {
  width: auto;
  padding: 0 10px;
  gap: 5px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #64d2ff;
  background: rgba(100, 210, 255, 0.1);
  border: 0.5px solid rgba(100, 210, 255, 0.22);
  border-radius: 6px;
}
.nt-fmt-restore:hover {
  background: rgba(100, 210, 255, 0.18);
  color: #9ae3ff;
}

.nt-editor-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 214, 10, 0.035), transparent 90px),
    #1c1c1e;
}
.nt-editor-date {
  padding: 18px 36px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  flex-shrink: 0;
  letter-spacing: -0.1px;
}
.nt-editor-title {
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding: 12px 36px 10px;
  font-family: inherit;
  width: 100%;
  flex-shrink: 0;
  -webkit-user-select: text;
  user-select: text;
  line-height: 1.2;
}
.nt-editor-title::placeholder {
  color: rgba(255, 255, 255, 0.22);
}
.nt-editor-title[readonly],
.nt-editor-body[readonly] {
  opacity: 0.72;
  cursor: default;
}
.nt-editor-body {
  flex: 1 1 auto;
  min-height: 220px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.58;
  font-family: inherit;
  padding: 4px 36px 28px;
  -webkit-user-select: text;
  user-select: text;
}
.nt-editor-body::placeholder {
  color: rgba(255, 255, 255, 0.26);
}
.nt-editor-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px 8px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  background: rgba(24, 24, 26, 0.92);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
}
.nt-editor-pinned-badge,
.nt-editor-deleted-badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 2px 8px;
  border-radius: 999px;
}
.nt-editor-pinned-badge {
  background: rgba(255, 214, 10, 0.14);
  color: #ffd60a;
  border: 0.5px solid rgba(255, 214, 10, 0.28);
}
.nt-editor-deleted-badge {
  background: rgba(255, 69, 58, 0.12);
  color: #ff6961;
  border: 0.5px solid rgba(255, 69, 58, 0.25);
}

.nt-statusbar {
  flex-shrink: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(36, 36, 40, 0.96);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}
.nt-status-left,
.nt-status-right {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nt-status-right {
  text-align: right;
  opacity: 0.85;
}

@media (max-width: 780px) {
  .nt-body {
    grid-template-columns: 0 220px 1fr;
  }
  .nt-sidebar { display: none; }
}

/* ===================== iTunes 9 (classic silver) ===================== */
#w-music {
  background: #d4d4d4;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
#w-music .titlebar {
  background: linear-gradient(180deg, #ececec 0%, #d0d0d0 45%, #c4c4c4 100%);
  border-bottom: 1px solid #9a9a9a;
  color: #222;
}
#w-music .titlebar .title {
  color: #2a2a2a;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
#w-music .content {
  background: #cfcfcf;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: #1a1a1a;
}

.it {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #1a1a1a;
  background: #c8c8c8;
  user-select: none;
  -webkit-user-select: none;
}

/* Top chrome — brushed metal (iTunes 9) */
.it-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px 8px;
  flex-shrink: 0;
  background:
    linear-gradient(180deg,
      #f4f4f4 0%,
      #e2e2e2 36%,
      #cfcfcf 50%,
      #dadada 100%);
  border-bottom: 1px solid #8a8a8a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  cursor: default;
}
.it-tb-transport {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.it-tb-btn {
  border: 1px solid #9a9a9a;
  background: linear-gradient(180deg, #fafafa 0%, #efefef 40%, #d8d8d8 55%, #e8e8e8 100%);
  color: #333;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 1px rgba(0, 0, 0, 0.12);
  cursor: default;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
}
.it-tb-btn:active {
  background: linear-gradient(180deg, #cfcfcf 0%, #e0e0e0 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.it-tb-prev,
.it-tb-next {
  width: 28px;
  height: 28px;
}
.it-tb-play {
  width: 36px;
  height: 36px;
  margin: 0 2px;
  border-color: #909090;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 38%, #dcdcdc 55%, #ececec 100%);
}
.it-tb-play svg {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

.it-tb-volume {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100px;
  flex-shrink: 0;
  color: #555;
}
.it-vol-ico { opacity: 0.65; flex-shrink: 0; }
.it-vol-slider {
  flex: 1;
  min-width: 0;
  height: 14px;
  cursor: default;
  accent-color: #7a7a7a;
}

/*
  iTunes 9 LCD — cream / soft green glass strip
  Idle: centered Apple logo (+ version). Playing: track metadata.
  Window titlebar already shows “iTunes” above this toolbar strip.
*/
.it-lcd-wrap {
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.it-lcd {
  width: 100%;
  min-width: 0;
  height: 46px;
  border-radius: 5px;
  /* Soft cream / warm ivory like iTunes 9 glass (ref screenshot) */
  border: 1px solid #a8a89a;
  background:
    linear-gradient(180deg,
      #fbfbf3 0%,
      #f4f4e8 18%,
      #ebebd8 42%,
      #e0e0cc 68%,
      #d6d6c4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.1);
  color: #4a4a42;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Idle: Apple mark only, centered */
.it-lcd-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.it-lcd-apple {
  display: block;
  width: 26px;
  height: 30px;
  color: #3d3d36;
  opacity: 0.82;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

/* Now playing — dark ink on cream glass */
.it-lcd-now {
  width: 100%;
  max-width: 480px;
  text-align: center;
  padding: 2px 0 1px;
}
.it-lcd-trackline {
  font-size: 11.5px;
  font-weight: 600;
  color: #33332c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.it-lcd-sep {
  opacity: 0.4;
  margin: 0 4px;
  font-weight: 400;
}
.it-lcd-album {
  font-size: 10px;
  color: rgba(55, 55, 48, 0.58);
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.it-lcd-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.it-lcd-time {
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(55, 55, 48, 0.6);
  min-width: 28px;
  flex-shrink: 0;
  text-shadow: none;
}
.it-lcd-time:last-child { text-align: right; }
.it-lcd-bar {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #c8c8b8 0%, #b4b4a4 100%);
  border: 1px solid rgba(90, 90, 75, 0.3);
  position: relative;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: default;
}
.it-lcd-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(180deg, #7ec8f8 0%, #3d9adf 45%, #2a78c0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.it-lcd-bar-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #d0d0d0 100%);
  border: 1px solid #6a6a6a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.it-lcd-bar:hover .it-lcd-bar-knob,
.it-lcd-bar.scrubbing .it-lcd-bar-knob {
  opacity: 1;
}

.it-tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.it-view-group {
  display: flex;
  border: 1px solid #7a7a7a;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(180deg, #efefef, #c8c8c8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.it-view-btn,
.it-browser-toggle {
  width: 28px;
  height: 22px;
  border: none;
  background: transparent;
  color: #3a3a3a;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: default;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.it-view-group .it-view-btn:last-child { border-right: none; }
.it-view-btn.active,
.it-browser-toggle.active {
  background: linear-gradient(180deg, #7eb6ef 0%, #3a86d0 100%);
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.it-browser-toggle {
  border: 1px solid #7a7a7a;
  border-radius: 5px;
  background: linear-gradient(180deg, #efefef, #c8c8c8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.it-search-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 150px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #8a8a8a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.it-search-ico { color: #888; flex-shrink: 0; }
.it-search {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: #111;
  padding: 0;
  -webkit-user-select: text;
  user-select: text;
}
.it-search::placeholder { color: #999; }

/* Body */
.it-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border-top: 1px solid #b0b0b0;
}

/* Source list */
.it-sources {
  width: 168px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #dfe8f3 0%, #d0dcea 100%);
  border-right: 1px solid #8fa0b5;
  overflow-y: auto;
  padding: 6px 0 12px;
}
.it-src-section {
  padding: 10px 12px 3px;
  font-size: 11px;
  font-weight: 700;
  color: #5a6a7a;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.it-src-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 14px;
  border: none;
  background: transparent;
  color: #1a1a1a;
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  cursor: default;
}
.it-src-item:hover:not(.locked):not(.active) {
  background: rgba(255, 255, 255, 0.35);
}
.it-src-item.active {
  background: linear-gradient(180deg, #6aa4e8 0%, #3078c8 100%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.it-src-item.locked {
  opacity: 0.42;
  cursor: default;
}
.it-src-ico {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #3a6aa0;
  flex-shrink: 0;
}
.it-src-item.active .it-src-ico { color: #fff; }
.it-src-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.it-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.it-main-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #f4f4f4, #e4e4e4);
  border-bottom: 1px solid #b8b8b8;
  flex-shrink: 0;
}
.it-main-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.1px;
}
.it-main-actions {
  display: flex;
  gap: 6px;
}
.it-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid #9a9a9a;
  background: linear-gradient(180deg, #fafafa, #d8d8d8);
  color: #333;
  font-size: 11px;
  font-family: inherit;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.it-chip.on {
  background: linear-gradient(180deg, #7eb6ef, #3a86d0);
  border-color: #2a6aaa;
  color: #fff;
}

/* Column browser */
.it-browser {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 140px;
  flex-shrink: 0;
  border-bottom: 1px solid #b0b0b0;
  background: #f7f7f7;
}
.it-bcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #c8c8c8;
}
.it-bcol:last-child { border-right: none; }
.it-bcol-head {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #444;
  background: linear-gradient(180deg, #ececec, #d8d8d8);
  border-bottom: 1px solid #b8b8b8;
  text-align: center;
}
.it-bcol-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}
.it-bitem {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 3px 10px;
  font-size: 12px;
  font-family: inherit;
  color: #1a1a1a;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.it-bitem:hover:not(.active) { background: #eef4fc; }
.it-bitem.active {
  background: linear-gradient(180deg, #6aa4e8, #3078c8);
  color: #fff;
}

.it-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* Track table */
.it-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.it-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}
.it-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 3px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: #333;
  background: linear-gradient(180deg, #f2f2f2 0%, #dcdcdc 100%);
  border-bottom: 1px solid #a8a8a8;
  border-right: 1px solid #c0c0c0;
  box-shadow: inset 0 1px 0 #fff;
  white-space: nowrap;
  cursor: default;
}
.it-table thead th.sortable:hover {
  background: linear-gradient(180deg, #e8eef8, #d0dcec);
}
.it-table tbody td {
  padding: 3px 8px;
  border-right: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1a1a1a;
}
.it-row { background: #fff; }
.it-row.alt { background: #f2f6fb; }
.it-row:hover:not(.selected) { background: #e6eef8; }
.it-row.selected,
.it-row.selected.alt {
  background: linear-gradient(180deg, #6aa4e8 0%, #3078c8 100%);
  color: #fff;
}
.it-row.selected td { color: #fff; }
.it-row.playing .it-c-name { font-weight: 700; }
.it-row.selected.playing .it-c-name { font-weight: 700; }
.it-c-num { width: 28px; text-align: center; color: #888; }
.it-row.selected .it-c-num { color: rgba(255, 255, 255, 0.85); }
.it-c-name { width: 28%; }
.it-c-time { width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.it-c-artist { width: 16%; }
.it-c-album { width: 16%; }
.it-c-genre { width: 12%; }
.it-c-rating {
  width: 72px;
  letter-spacing: -1px;
  color: #d4a017;
  font-size: 11px;
}
.it-row.selected .it-c-rating { color: #ffe566; }
.it-c-plays { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.it-playing-ico {
  color: #2a7ad4;
  font-size: 11px;
  font-weight: 700;
}
.it-row.selected .it-playing-ico { color: #fff; }
.it-track-num { font-size: 11px; }
.it-empty-row td {
  text-align: center;
  padding: 28px;
  color: #888;
}

/* Cover Flow + Grid */
.it-coverflow,
.it-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 14px;
  padding: 18px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(40, 80, 140, 0.12), transparent 60%),
    linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 100%);
}
.it-cf-card,
.it-grid-card {
  width: 120px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
  font-family: inherit;
  text-align: center;
  color: #222;
}
.it-cf-art,
.it-grid-art {
  width: 120px;
  height: 120px;
  border-radius: 6px;
  background: #111;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.it-cf-cover,
.it-cf-art img,
.it-grid-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.it-cf-card.active .it-cf-art,
.it-grid-card:hover .it-grid-art {
  outline: 2px solid #3a86d0;
  outline-offset: 2px;
}
.it-cf-title,
.it-grid-title {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.it-cf-sub,
.it-grid-sub {
  font-size: 10px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.it-cf-empty {
  width: 100%;
  text-align: center;
  padding: 40px;
  color: #666;
}

/* Status bar */
.it-statusbar {
  flex-shrink: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  font-size: 11px;
  color: #333;
  background: linear-gradient(180deg, #e8e8e8, #d0d0d0);
  border-top: 1px solid #9a9a9a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.it-status-mid {
  font-weight: 600;
  color: #2a5a90;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* YT "audio" hosts: iOS mutes 0×0 / fully-hidden iframes — keep a real
   non-zero player parked just off-viewport instead of opacity:0 + clip. */
.it-yt-offscreen,
.lw-yt-offscreen,
.ipod-yt-offscreen {
  position: fixed !important;
  left: -240px !important;
  top: 0 !important;
  width: 200px !important;
  height: 200px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  clip: auto !important;
  z-index: -1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.it-yt-offscreen iframe,
.lw-yt-offscreen iframe,
.ipod-yt-offscreen iframe,
#it-yt-player,
#lw-yt-audio,
#ipod-yt-player {
  width: 200px !important;
  height: 200px !important;
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===================== MESSAGE APP ===================== */
#w-message {
  background: #1c1c1e;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
}
#w-message .titlebar {
  background: linear-gradient(180deg, rgba(48, 48, 52, 0.98), rgba(38, 38, 42, 0.96));
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
#w-message .content {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(10, 132, 255, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(90, 200, 250, 0.06), transparent 50%),
    #1c1c1e;
}

.msg-app {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  letter-spacing: -0.1px;
}

.msg-compose {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 18px 14px;
  overflow: hidden;
  box-sizing: border-box;
}
.msg-app.is-sent .msg-compose { display: none; }
.msg-app:not(.is-sent) .msg-done { display: none; }

.msg-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.msg-avatar {
  filter: drop-shadow(0 10px 24px rgba(10, 132, 255, 0.4));
  line-height: 0;
  flex-shrink: 0;
}
.msg-avatar svg {
  width: 56px;
  height: 56px;
  display: block;
}
.msg-hero-text {
  text-align: center;
  min-width: 0;
  max-width: 100%;
}
.msg-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: #fff;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.msg-to {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}
.msg-to span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.msg-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
}
.msg-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.msg-card {
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(44, 44, 48, 0.92);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.msg-field {
  flex-shrink: 0;
}
.msg-field-sep {
  height: 0.5px;
  margin-left: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.msg-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 11px 14px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.msg-input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.msg-input:focus {
  background: rgba(255, 255, 255, 0.03);
}

/* Bubble grows into remaining height — never forces window scroll */
.msg-thread {
  flex: 1 1 auto;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2px 0 0;
  min-width: 0;
  overflow: hidden;
}
.msg-bubble-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  align-self: stretch;
}
.msg-bubble {
  width: 100%;
  height: 100%;
  min-height: 100px;
  max-height: 100%;
  box-sizing: border-box;
  resize: none;
  border: none;
  outline: none;
  border-radius: 18px 18px 6px 18px;
  padding: 11px 14px 12px;
  font-size: 15px;
  line-height: 1.36;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(180deg, #1a8fff 0%, #0a84ff 55%, #0077ed 100%);
  box-shadow:
    0 6px 20px rgba(10, 132, 255, 0.28),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
  -webkit-user-select: text;
  user-select: text;
  overflow-y: auto;
}
.msg-bubble::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.msg-bubble:focus {
  box-shadow:
    0 8px 26px rgba(10, 132, 255, 0.34),
    0 0 0 3px rgba(10, 132, 255, 0.18),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
}
.msg-bubble-tail {
  display: none;
}

.msg-error {
  min-height: 14px;
  max-height: 14px;
  font-size: 12px;
  line-height: 14px;
  color: #ff6961;
  text-align: center;
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  padding-top: 0;
}
.msg-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  height: 34px;
  padding: 0 16px 0 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a97ff 0%, #0a84ff 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.2px;
  cursor: default;
  box-shadow:
    0 3px 12px rgba(10, 132, 255, 0.38),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.12s, filter 0.12s, opacity 0.12s;
  flex-shrink: 0;
}
.msg-send:hover:not(:disabled) {
  filter: brightness(1.07);
}
.msg-send:active:not(:disabled) {
  transform: scale(0.97);
}
.msg-send:disabled {
  opacity: 0.45;
}
.msg-send-arrow {
  opacity: 0.95;
  margin-top: 0.5px;
}

.msg-done {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 20px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(48, 209, 88, 0.08), transparent 60%);
}
.msg-done-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(48, 209, 88, 0.1);
  box-shadow:
    0 0 0 1px rgba(48, 209, 88, 0.22),
    0 8px 28px rgba(48, 209, 88, 0.12);
  margin-bottom: 6px;
  flex-shrink: 0;
}
.msg-done-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #fff;
}
.msg-done-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.msg-again {
  margin-top: 2px;
  border: none;
  border-radius: 999px;
  height: 34px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: default;
  letter-spacing: -0.15px;
  flex-shrink: 0;
}
.msg-again:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Narrow but still above min width — keep type from wrapping awkwardly */
html.layout-compact #w-message .content {
  overflow: hidden !important;
}
html.layout-compact .msg-compose {
  padding: 14px 14px 12px;
  overflow: hidden;
}
html.layout-compact .msg-avatar svg {
  width: 48px;
  height: 48px;
}
html.layout-compact .msg-name {
  font-size: 17px;
}
html.layout-compact .msg-hero {
  margin-bottom: 10px;
  gap: 6px;
}
html.layout-compact .msg-form {
  gap: 10px;
}
html.layout-compact .msg-bubble {
  font-size: 14px;
  min-height: 88px;
}

.form-wrap { padding: 22px; }
.form-wrap input, .form-wrap textarea {
  width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 10px 12px; color: var(--text); margin-bottom: 12px; outline: none;
}
.form-wrap button { background: var(--blue); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; }

/* ===================== QUICKTIME PLAYER (videos.js) ===================== */
#w-videos {
  background: #2c2c2e;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}
#w-videos .titlebar {
  background: linear-gradient(180deg, #4e4e54 0%, #3a3a40 50%, #303034 100%);
  border-bottom: 1px solid #141416;
}
#w-videos .titlebar .title {
  color: #f2f2f4;
  font-weight: 600;
}
#w-videos .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: #000;
}

.qt-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #f5f5f7;
  user-select: none;
  -webkit-user-select: none;
  background: #0a0a0c;
}

/* Thin in-app chrome under traffic lights */
.qt-chrome-bar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  background: linear-gradient(180deg, #3a3a40, #2a2a30);
  border-bottom: 1px solid #121214;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.qt-menus {
  display: flex;
  gap: 12px;
  min-width: 0;
}
.qt-menu-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
}
.qt-doc-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  max-width: min(360px, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.qt-chrome-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.qt-icon-btn {
  width: 26px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: default;
}
.qt-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.qt-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #000;
  overflow: hidden;
  cursor: default;
}
.qt-stage.hud-visible {
  cursor: default;
}
.qt-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(ellipse at 50% 42%, #1c1c22 0%, #050506 72%);
  z-index: 2;
}
.qt-empty[hidden],
.qt-viewport[hidden],
.qt-hud[hidden] {
  display: none !important;
}
.qt-empty-badge {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
  border-radius: 18px;
}
.qt-empty-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.qt-empty-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  max-width: 280px;
  line-height: 1.35;
  padding: 0 16px;
}
.qt-empty-cta {
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #4a4a52, #323238);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.qt-empty-cta:hover {
  filter: brightness(1.08);
}

.qt-viewport {
  position: absolute;
  inset: 0;
  background: #000;
}
.qt-yt-host,
.qt-yt-host > div,
#qt-yt-mount {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.qt-yt-host iframe,
.qt-fallback-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Floating HUD transport (auto-hides while playing) */
.qt-hud {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.qt-hud.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.qt-hud-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(28, 28, 32, 0.78);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
/* Play / Pause — one circular control, one glyph at a time */
.qt-play-big {
  position: relative;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.qt-play-big:hover {
  background: rgba(255, 255, 255, 0.26);
}
.qt-play-big:active {
  transform: scale(0.94);
}
.qt-play-big .qt-ico {
  display: none;
  flex-shrink: 0;
  /* Optical: play triangle reads left-heavy; nudge slightly right */
  pointer-events: none;
}
.qt-play-big[data-state="paused"] .qt-ico-play,
.qt-play-big:not([data-state]) .qt-ico-play {
  display: block;
  margin-left: 2px; /* center the triangle visually */
}
.qt-play-big[data-state="playing"] .qt-ico-pause {
  display: block;
}
.qt-timeline {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qt-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
  min-width: 36px;
}
.qt-time-rem {
  text-align: right;
}
.qt-scrub {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  outline: none;
  min-width: 48px;
}
.qt-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.qt-vol-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
}
.qt-mute-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: default;
}
.qt-mute-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.qt-vol {
  width: 70px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}
.qt-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Open Recent filmstrip */
.qt-recent {
  flex-shrink: 0;
  background: linear-gradient(180deg, #2e2e34, #242428);
  border-top: 1px solid #121214;
  padding: 8px 12px 10px;
}
.qt-recent-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 6px;
}
.qt-filmstrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.qt-film {
  flex: 0 0 auto;
  width: 132px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 4px;
  border-radius: 8px;
  cursor: default;
  text-align: left;
}
.qt-film:hover {
  background: rgba(255, 255, 255, 0.06);
}
.qt-film.active {
  background: rgba(10, 132, 255, 0.22);
  border-color: rgba(10, 132, 255, 0.4);
}
.qt-film-thumb-wrap {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.qt-film-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qt-film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.qt-film:hover .qt-film-play {
  opacity: 1;
}
.qt-film-name {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}

/* Desktop icon */
.desk-app-img-videos {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  transform: scale(1.1);
  background: transparent;
}

.qt-stage:fullscreen,
.qt-stage:-webkit-full-screen {
  background: #000;
}
.qt-stage:fullscreen .qt-hud,
.qt-stage:-webkit-full-screen .qt-hud {
  bottom: 24px;
}

html.layout-compact #w-videos .qt-menu-label:nth-child(n+3) {
  display: none;
}
html.layout-compact #w-videos .qt-vol {
  width: 48px;
}
html.layout-compact #w-videos .qt-film {
  width: 112px;
}
html.layout-compact #w-videos .qt-empty-badge {
  width: 72px;
  height: 72px;
}

/* Desktop social icon cluster (right side) */
.desk-icon-social {
  z-index: 2;
}

/* Safari shell for external / social links */
#w-safari .content,
[id^="w-safari-"] .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #1c1c1e;
}
.sf {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #f5f5f7;
}
.sf-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 78px;
  background: linear-gradient(180deg, rgba(52, 52, 56, 0.98), rgba(40, 40, 44, 0.96));
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
[id^="w-safari-"]:not(.window-unified) .sf-toolbar,
#w-safari:not(.window-unified) .sf-toolbar {
  padding-left: 12px;
}
.sf-nav {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.sf-nav-btn {
  width: 28px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: default;
}
.sf-urlbar {
  flex: 1;
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.sf-lock {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}
.sf-url-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.1px;
}
.sf-share-btn {
  flex-shrink: 0;
  height: 26px;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: default;
}
.sf-share-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.sf-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(10, 132, 255, 0.08), transparent 65%),
    #1c1c1e;
}
.sf-card {
  width: min(340px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sf-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: contain;
  margin-bottom: 8px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}
.sf-card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #fff;
}
.sf-card-host {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.sf-card-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.sf-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  animation: sf-pulse 1.4s ease-in-out infinite;
}
@keyframes sf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.9); }
}
.sf-open-main {
  border: none;
  border-radius: 999px;
  height: 36px;
  padding: 0 22px;
  background: var(--sf-accent, #0a84ff);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: default;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--sf-accent, #0a84ff) 40%, transparent);
  margin-top: 4px;
}
.sf-open-main:hover {
  filter: brightness(1.06);
}
.sf-card-hint {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.32);
  max-width: 260px;
}

/* ===================== CONTACTS (macOS-style) ===================== */
.ct {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1c1c1e;
  color: #f2f2f7;
  font-size: 13px;
  overflow: hidden;
  min-height: 0;
}
#w-contacts .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #1c1c1e;
}
#w-contacts .ct {
  flex: 1;
  min-height: 0;
}

/* Toolbar */
.ct-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 78px;
  background: linear-gradient(180deg, rgba(50,50,54,0.95), rgba(38,38,42,0.92));
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  cursor: default;
}
.ct-toolbar-left,
.ct-toolbar-right {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ct-tool-btn {
  width: 28px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
.ct-tool-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}
.ct-tool-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.ct-search-wrap {
  flex: 1;
  max-width: 280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  height: 28px;
}
.ct-search-icon {
  opacity: 0.45;
  font-size: 13px;
  line-height: 1;
}
.ct-search {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  -webkit-user-select: text;
  user-select: text;
}
.ct-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* 3-column body */
.ct-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 168px 200px 1fr;
  overflow: hidden;
}

/* Sidebar groups */
.ct-sidebar {
  background: rgba(40, 40, 44, 0.94);
  border-right: 0.5px solid rgba(255, 255, 255, 0.08);
  padding: 10px 8px;
  overflow-y: auto;
}
.ct-sidebar-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  padding: 8px 8px 4px;
  letter-spacing: 0.2px;
}
.ct-group {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #f2f2f7;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.ct-group:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ct-group.active {
  background: rgba(10, 132, 255, 0.85);
  color: #fff;
}
.ct-group-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  opacity: 0.9;
}
.ct-group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-group-count {
  font-size: 12px;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.ct-group.active .ct-group-count {
  opacity: 0.85;
}

/* Contact list */
.ct-list {
  background: #161618;
  border-right: 0.5px solid rgba(255, 255, 255, 0.07);
  overflow-y: auto;
  min-height: 0;
}
.ct-section-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(35, 35, 40, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ct-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: #f2f2f7;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ct-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.ct-list-item.active {
  background: rgba(10, 132, 255, 0.9);
  color: #fff;
}
.ct-list-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ct-list-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.ct-list-empty {
  padding: 28px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
}

/* Detail pane */
.ct-detail {
  background: #1c1c1e;
  overflow-y: auto;
  min-height: 0;
  padding: 0 0 24px;
}
.ct-detail-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}
.ct-detail-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}
.ct-detail-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ct-detail-name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-align: center;
  line-height: 1.15;
}
.ct-detail-company {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}
.ct-detail-fields {
  padding: 8px 20px 0;
  max-width: 420px;
  margin: 0 auto;
}
.ct-field {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: start;
}
.ct-field-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  text-align: right;
  padding-top: 1px;
  text-transform: lowercase;
}
.ct-field-value {
  font-size: 13px;
  color: #f2f2f7;
  line-height: 1.4;
  word-break: break-word;
}
.ct-field-value a {
  color: #0a84ff;
  text-decoration: none;
}
.ct-field-value a:hover {
  text-decoration: underline;
}
.ct-field-value.ct-muted {
  color: rgba(255, 255, 255, 0.35);
}
.ct-field-note .ct-field-value {
  color: rgba(255, 255, 255, 0.75);
  white-space: pre-wrap;
}

/* Status bar */
.ct-statusbar {
  flex-shrink: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(36, 36, 40, 0.95);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 700px) {
  .ct-body {
    grid-template-columns: 0 180px 1fr;
  }
  .ct-sidebar { display: none; }
}

/* ===================== FINDER (opaque night + glass chrome) ===================== */
.fn {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 13px;
  overflow: hidden;
  min-height: 0;
}
#w-finder .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #1c1c1e;
}
#w-finder .fn {
  flex: 1;
  min-height: 0;
}

/* Toolbar — glass chrome on dark base; drag surface; room for traffic lights */
.fn-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 10px 78px;
  background: linear-gradient(
    180deg,
    rgba(50, 50, 54, 0.95) 0%,
    rgba(38, 38, 42, 0.92) 100%
  );
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  cursor: default;
}
.fn-tb-left,
.fn-tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fn-tb-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 2px;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
.fn-tb-center {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.fn-path-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(360px, 100%);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.fn-path-folder {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.fn-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fn-tb-btn,
.fn-view-btn {
  width: 30px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
.fn-tb-btn:hover:not(:disabled),
.fn-view-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.fn-tb-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.fn-view-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fn-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  height: 28px;
  width: 190px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.fn-search-ico {
  opacity: 0.5;
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}
.fn-search {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 12.5px;
  font-family: inherit;
  padding: 0;
  -webkit-user-select: text;
  user-select: text;
}
.fn-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Body */
.fn-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Sidebar — glass panel on opaque night */
.fn-sidebar {
  width: 188px;
  flex-shrink: 0;
  background: rgba(40, 40, 44, 0.94);
  border-right: 0.5px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  padding: 10px 10px 18px;
  box-shadow: inset -0.5px 0 0 rgba(255, 255, 255, 0.04);
}
.fn-side-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  padding: 12px 8px 5px;
  letter-spacing: -0.1px;
}
.fn-side-label:first-child {
  padding-top: 2px;
}
.fn-side-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  margin-bottom: 1px;
}
.fn-side-item:hover {
  background: rgba(255, 255, 255, 0.07);
}
.fn-side-item.active {
  background: rgba(10, 132, 255, 0.9);
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.fn-side-item.locked {
  opacity: 0.5;
  cursor: default;
}
.fn-side-item.locked:hover {
  background: transparent;
}
.fn-side-item.active.locked {
  opacity: 1;
}
.fn-side-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #0a84ff;
}
.fn-side-item.active .fn-side-icon {
  color: #fff;
}
.fn-side-svg {
  width: 15px;
  height: 15px;
  display: block;
}
.fn-side-folder {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  /* Keep folder blue even on blue selection */
  filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.25));
}
.fn-side-item.active .fn-side-folder {
  filter: brightness(1.15) drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.2));
}
.fn-side-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.1px;
}
.fn-tag {
  cursor: default;
  opacity: 0.85;
}
.fn-tag:hover {
  background: transparent;
}
.fn-tag-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

/* Main content area */
.fn-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #1a1a1c;
}
.fn-content {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
  padding: 16px 14px 20px;
}
.fn-content.icon-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px 8px;
  align-content: start;
}
.fn-content.list-mode {
  display: block;
  padding: 0;
}

.fn-empty {
  grid-column: 1 / -1;
  padding: 56px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.38);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fn-empty-folder {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.55;
}
.fn-empty-title {
  font-size: 13px;
  font-weight: 500;
}

/* Folder / file icons */
.fn-folder-img {
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.fn-folder-img.fn-size-lg {
  width: 64px;
  height: 52px;
}
.fn-folder-img.fn-size-sm {
  width: 18px;
  height: 15px;
  filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.3));
}

/* Document-style file icons (no emoji) */
.fn-doc {
  position: relative;
  display: block;
  pointer-events: none;
}
.fn-doc.fn-size-lg {
  width: 48px;
  height: 58px;
}
.fn-doc.fn-size-sm {
  width: 16px;
  height: 18px;
}
.fn-doc-page {
  position: absolute;
  inset: 0;
  border-radius: 3px 8px 3px 3px;
  background: linear-gradient(160deg, #f4f4f6 0%, #d8d8de 100%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.fn-doc-page::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 28%;
  background: linear-gradient(225deg, transparent 50%, rgba(0, 0, 0, 0.08) 50%);
  border-radius: 0 8px 0 0;
}
.fn-doc-badge {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
  background: #0a84ff;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.fn-doc.fn-size-sm .fn-doc-badge {
  font-size: 5px;
  bottom: 15%;
  padding: 0 2px;
  border-radius: 1px;
}
.fn-doc-pdf .fn-doc-badge { background: #ff3b30; }
.fn-doc-image .fn-doc-badge { background: #30d158; }
.fn-doc-audio .fn-doc-badge { background: #bf5af2; }
.fn-doc-video .fn-doc-badge { background: #ff9f0a; }
.fn-doc-archive .fn-doc-badge { background: #8e8e93; }
.fn-doc-app .fn-doc-badge { background: #64d2ff; color: #003; }
.fn-doc-text .fn-doc-badge { background: #636366; }

/* Icon view items */
.fn-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #f5f5f7;
  cursor: default;
  font-family: inherit;
  min-width: 0;
}
.fn-icon-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.fn-icon-item.locked {
  opacity: 0.55;
}
.fn-icon-item.locked .fn-icon-glyph {
  filter: grayscale(0.25);
}
.fn-icon-item.selected {
  background: rgba(10, 132, 255, 0.28);
}
.fn-icon-glyph {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.fn-icon-label {
  font-size: 11.5px;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  padding: 1px 5px 2px;
  border-radius: 4px;
  letter-spacing: -0.1px;
}
.fn-icon-item.selected .fn-icon-label {
  background: #0a84ff;
  color: #fff;
}

/* List view */
.fn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.fn-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(36, 36, 40, 0.96);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  padding: 7px 14px;
  cursor: default;
}
.fn-row {
  cursor: default;
}
.fn-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.fn-row.locked {
  opacity: 0.55;
}
.fn-row.selected {
  background: rgba(10, 132, 255, 0.9);
  color: #fff;
}
.fn-row td {
  padding: 4px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.fn-col-name { width: 44%; }
.fn-col-date { width: 22%; }
.fn-col-size { width: 12%; }
.fn-col-kind { width: 22%; }
.fn-row td.fn-col-name {
  max-width: 1px; /* allow ellipsis in table layout */
}
.fn-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  margin-right: 8px;
  vertical-align: middle;
}
.fn-row-name {
  vertical-align: middle;
}

/* Status bar */
.fn-statusbar {
  flex-shrink: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(36, 36, 40, 0.95);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

.placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 10px; }


/* ===================== CLASSIC LIMEWIRE (detailed) ===================== */
.lw {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #ece9d8;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 11px;
  color: #000;
  overflow: hidden;
  user-select: none;
  min-height: 0;
  /* Site is color-scheme:dark — force light XP form controls so text isn't white-on-beige */
  color-scheme: light;
  -webkit-text-fill-color: currentColor;
}
/* Classic LimeWire / WinXP chrome: always dark ink on light grey buttons */
.lw button,
.lw .lw-tb-btn,
.lw .lw-big-btn,
.lw .lw-junk-btn,
.lw .lw-ctrl-btn,
.lw .lw-back-btn,
.lw .lw-player-btn,
.lw .lw-lib-play-btn {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
/* Dark player strips keep light text */
.lw .lw-player-panel button,
.lw .lw-audio-btn,
.lw .lw-video-controls .lw-ctrl-btn {
  color: #e8f0e4;
  -webkit-text-fill-color: #e8f0e4;
}
.lw .lw-audio-btn-main {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#w-limewire .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#w-limewire .lw {
  flex: 1;
  min-height: 0;
}

/* Menu bar */
.lw-menubar {
  display: flex;
  gap: 12px;
  padding: 2px 8px;
  background: #ece9d8;
  border-bottom: 1px solid #aca899;
}
.lw-menubar span {
  padding: 2px 5px;
  cursor: default;
}
.lw-menubar span:hover {
  background: #316ac5;
  color: white;
}

/* Toolbar */
.lw-toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px 6px;
  background: linear-gradient(to bottom, #f8f7f0, #ece9d8);
  border-bottom: 1px solid #aca899;
  min-width: 0;
}
/* Scroll strip for nav buttons; logo stays outside it */
.lw-toolbar-scroll {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}
.lw-tb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  background: transparent;
  font-family: inherit;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}
.lw-tb-btn:hover {
  border-color: #aca899;
  background: #f5f4ea;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
.lw-tb-btn.active {
  border-color: #7a9ac5;
  background: #d6e3f4;
  color: #0a2a4a;
  -webkit-text-fill-color: #0a2a4a;
  font-weight: 600;
}
.lw-tb-icon {
  font-size: 18px;
  margin-bottom: 2px;
  line-height: 1;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lw-tb-logo-wrap {
  height: 20px;
}
.lw-tb-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.lw-logo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 14px;
  color: #228b22;
  padding-right: 8px;
  flex: 0 0 auto;
  flex-shrink: 0;
  max-height: 48px;
  white-space: nowrap;
}
.lw-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.lw-logo-text {
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

.lw-view-hidden { display: none !important; }

.lw-lib-hint {
  font-size: 10px;
  color: #555;
  padding: 6px 4px;
  line-height: 1.35;
}
.lw-lib-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(to bottom, #f8f7f0, #ece9d8);
  border-bottom: 1px solid #aca899;
}
.lw-lib-banner-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.lw-lib-banner-title {
  font-weight: bold;
  font-size: 13px;
  color: #1a5c1a;
}
.lw-lib-banner-sub {
  font-size: 10px;
  color: #555;
  margin-top: 1px;
}
.lw-lib-play-cell {
  width: 36px;
  text-align: center;
}
.lw-lib-play-btn {
  width: 22px;
  height: 20px;
  border: 1px solid #aca899;
  border-radius: 3px;
  background: linear-gradient(to bottom, #f8f7f0, #e8e6d9);
  color: #1a5c1a;
  -webkit-text-fill-color: #1a5c1a;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  padding: 0;
}
.lw-lib-play-btn:hover {
  background: #fff;
  border-color: #7a9ac5;
  color: #0d3d0d;
  -webkit-text-fill-color: #0d3d0d;
}
.lw-lib-row.playing {
  background: #e8f8e8;
}
.lw-lib-row.playing.selected {
  background: #316ac5 !important;
}
.lw-lib-status {
  color: #228b22;
  font-weight: 600;
}
.lw-empty-row {
  text-align: center;
  color: #888;
  padding: 18px !important;
}

/* Library media player — fixed footer; audio strip tall enough for full text */
.lw-player-panel {
  border-top: 1px solid #aca899;
  background: #111;
  display: flex;
  flex-direction: column;
  flex: 0 0 92px;
  height: 92px;
  max-height: 92px;
  min-height: 92px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.lw-player-panel[data-mode="audio"] {
  flex: 0 0 152px;
  height: 152px;
  max-height: 152px;
  min-height: 152px;
  overflow: visible;
}
.lw-player-panel[data-mode="video"] {
  flex-basis: 248px;
  height: 248px;
  max-height: 248px;
  min-height: 248px;
}

.lw-player-empty,
.lw-player-audio,
.lw-player-video {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
/* Ensure [hidden] always wins over display:flex rules below */
.lw-player-empty[hidden],
.lw-player-audio[hidden],
.lw-player-video[hidden] {
  display: none !important;
}

/* .lw-yt-offscreen shared with .it-yt-offscreen / .ipod-yt-offscreen above */

.lw-player-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: #aaa;
  font-size: 12px;
  line-height: 1.4;
  background: linear-gradient(180deg, #1c1c1c, #121212);
  padding: 10px 16px;
  text-align: left;
}
.lw-player-empty-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity: 0.9;
  flex-shrink: 0;
}
.lw-player-empty-hint {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  line-height: 1.35;
}

/* ---- AUDIO player chrome ---- */
.lw-player-audio {
  display: flex;
  align-items: stretch;
  height: 100%;
  background: linear-gradient(180deg, #2a2d28 0%, #1a1c18 100%);
  color: #e8f0e4;
  position: relative;
  overflow: hidden;
}
.lw-audio-art {
  width: 110px;
  flex: 0 0 110px;
  position: relative;
  border-right: 1px solid #3a4038;
  overflow: hidden;
  background: #0c100c;
  align-self: stretch;
}
.lw-audio-art-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: radial-gradient(circle at 40% 35%, #3a4a32, #141814 70%);
  pointer-events: none;
}
.lw-audio-art-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a6b3a, #1e2e18 65%);
  border: 2px solid rgba(120, 200, 80, 0.45);
  box-shadow:
    0 0 18px rgba(80, 180, 60, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.lw-audio-art-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.lw-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  opacity: 0.35;
  flex-shrink: 0;
}
.lw-eq.on { opacity: 1; }
.lw-eq span {
  width: 3px;
  height: 4px;
  background: #7dffa0;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(125, 255, 160, 0.5);
}
.lw-eq.on span {
  animation: lw-eq-bounce 0.55s ease-in-out infinite alternate;
}
.lw-eq.on span:nth-child(1) { animation-delay: 0s; height: 6px; }
.lw-eq.on span:nth-child(2) { animation-delay: 0.1s; height: 12px; }
.lw-eq.on span:nth-child(3) { animation-delay: 0.18s; height: 16px; }
.lw-eq.on span:nth-child(4) { animation-delay: 0.08s; height: 10px; }
.lw-eq.on span:nth-child(5) { animation-delay: 0.22s; height: 7px; }
@keyframes lw-eq-bounce {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

.lw-audio-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  overflow: visible;
  /* Don't inherit a collapsed line-height from anywhere */
  line-height: 1.35;
  font-size: 12px;
}
/* Never let flex crush text rows (was clipping to letter tops) */
.lw-audio-body > * {
  flex: 0 0 auto;
  min-height: 0;
}
.lw-audio-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #7dffa0;
  opacity: 0.9;
  line-height: 1.3;
  height: auto;
}
.lw-audio-title {
  font-size: 17px;
  font-weight: 700;
  color: #f2fff0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  height: auto;
  max-height: none;
}
.lw-audio-meta,
.lw-audio-artist {
  font-size: 12px;
  color: #a8b8a4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  height: auto;
}
.lw-audio-dot {
  opacity: 0.45;
  font-weight: 700;
}
#lw-audio-by {
  color: #c8dcc4;
  font-weight: 600;
}
#lw-audio-album {
  color: #9ecf96;
  font-weight: 600;
}
#lw-audio-rate {
  color: #8a9a86;
}
.lw-audio-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  height: auto;
}
.lw-audio-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #8a9a86;
  min-width: 36px;
  line-height: 1.3;
}
.lw-audio-time:last-child { text-align: right; }
.lw-audio-bar {
  flex: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: visible;
  position: relative;
  cursor: default;
  touch-action: none;
}
.lw-audio-bar:hover,
.lw-audio-bar.scrubbing {
  background: rgba(0, 0, 0, 0.45);
}
.lw-audio-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4caf50, #8dff9a);
  box-shadow: 0 0 8px rgba(100, 220, 100, 0.45);
  border-radius: 5px;
  transition: none; /* scrub feels instant */
  pointer-events: none;
}
.lw-audio-bar-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: #e8ffe8;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.lw-audio-bar:hover .lw-audio-bar-knob,
.lw-audio-bar.scrubbing .lw-audio-bar-knob {
  opacity: 1;
}
.lw-audio-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  height: auto;
}
.lw-audio-btn {
  width: 34px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #5a6558;
  background: linear-gradient(to bottom, #3a4038, #2a2e28);
  color: #e8f0e4;
  font-size: 12px;
  cursor: default;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: inherit;
  flex-shrink: 0;
  line-height: 1;
}
.lw-audio-btn:hover {
  background: linear-gradient(to bottom, #4a5048, #343830);
  border-color: #7a8a74;
}
.lw-audio-btn-main {
  width: 42px;
  height: 30px;
  font-size: 14px;
  background: linear-gradient(to bottom, #4caf50, #2e7d32);
  border-color: #66bb6a;
  color: #fff;
}
.lw-audio-btn-main:hover {
  background: linear-gradient(to bottom, #66bb6a, #388e3c);
}

/* ---- VIDEO player: letterboxed 16:9 (no crop, full YT chrome visible) ---- */
.lw-player-video {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.lw-video-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #000;
  overflow: hidden;
  /* Size queries so we can fit 16:9 without cropping */
  container-type: size;
}
.lw-video-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Contain 16:9 inside the stage — letterbox, never crop */
  width: min(100cqw, calc(100cqh * 16 / 9));
  height: min(100cqh, calc(100cqw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  background: #000;
  overflow: hidden;
}
/* Fallback when container queries aren't available */
@supports not (width: 1cqw) {
  .lw-video-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}
.lw-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  /* No scaling transforms — full player UI must fit inside the frame */
}
.lw-video-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: linear-gradient(to bottom, #2a2a2a, #1c1c1c);
  border-top: 1px solid #3a3a3a;
  color: #eee;
}
.lw-video-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.lw-video-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #c62828;
  color: #fff;
}
.lw-video-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lw-video-title {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f5f5f5;
  line-height: 1.2;
}
.lw-video-sub {
  font-size: 10px;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lw-video-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.lw-video-controls .lw-ctrl-btn {
  font-size: 10px;
  padding: 3px 8px;
}

/* Fake download rows */
.lw-dl-item {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 1.0fr 1.3fr 0.8fr 0.6fr;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
  font-size: 11px;
}
.lw-dl-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.lw-dl-ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.lw-dl-status.done { color: #228b22; font-weight: 600; }
.lw-dl-prog-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lw-dl-prog {
  flex: 1;
  height: 12px;
  background: #ddd;
  border: 1px solid #999;
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}
.lw-dl-prog-bar {
  display: block;
  height: 100%;
  background: linear-gradient(to bottom, #5a9ae8, #316ac5);
  transition: width 0.2s;
}
.lw-dl-pct {
  width: 32px;
  text-align: right;
  font-size: 10px;
  color: #444;
}

.lw-status-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

/* Main layout */
.lw-main {
  display: flex;
  flex: 1;
  min-height: 0;
  background: white;
}

/* Left sidebar */
.lw-left {
  width: 168px;
  background: #f0f0f0;
  border-right: 1px solid #aca899;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lw-filter-box {
  border: 1px solid #aca899;
  background: white;
}
.lw-filter-header {
  background: linear-gradient(to bottom, #f9d56e, #e8b923);
  padding: 3px 7px;
  font-weight: bold;
  border-bottom: 1px solid #c9a017;
}
.lw-filter-item {
  padding: 3px 8px 3px 16px;
  cursor: pointer;
}
.lw-filter-item:hover {
  background: #e8f0fe;
}
.lw-filter-item.active {
  background: #316ac5;
  color: white;
}
.lw-back-btn {
  margin-top: auto;
  background: linear-gradient(to bottom, #f5f4ea, #ece9d8);
  border: 1px solid #aca899;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 11px;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.lw-back-btn:hover {
  background: #fff;
  color: #000;
  -webkit-text-fill-color: #000;
}

/* Right side — table fills middle; player is a fixed footer strip */
.lw-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.lw-lib-banner,
.lw-warning,
.lw-action-bar {
  flex: 0 0 auto;
}

/* Yellow warning */
.lw-warning {
  background: #ffffcc;
  border-bottom: 1px solid #e0c000;
  padding: 4px 10px;
  font-size: 11px;
}
.lw-check {
  color: #228b22;
  font-weight: bold;
}
.lw-warning a {
  color: #0066cc;
  margin-left: 6px;
}

/* Results table — always owns the middle of the column */
.lw-table-wrap {
  flex: 1 1 0%;
  min-height: 120px;
  overflow: auto;
  background: #fff;
  position: relative;
  z-index: 1;
}
.lw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.lw-table th {
  background: linear-gradient(to bottom, #f5f4ea, #ece9d8);
  border: 1px solid #aca899;
  padding: 4px 6px;
  text-align: left;
  font-weight: normal;
  position: sticky;
  top: 0;
  z-index: 2;
}
.lw-table td {
  border-bottom: 1px solid #e8e8e8;
  padding: 3px 6px;
  white-space: nowrap;
}
.lw-row {
  cursor: pointer;
}
.lw-row:hover {
  background: #e8f0fe;
}
.lw-row.selected {
  background: #316ac5 !important;
  color: white;
}
.lw-stars {
  color: #d4a017;
  letter-spacing: -1px;
}
.lw-lic {
  color: #228b22;
  font-weight: bold;
  text-align: center;
}

/* Big action buttons under the table */
.lw-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #f0f0f0;
  border-top: 1px solid #aca899;
  flex: 0 0 auto;
}
.lw-big-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 46px;
  background: linear-gradient(to bottom, #f8f7f0, #e8e6d9);
  border: 1px solid #aca899;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  padding: 0;
}
.lw-big-btn:hover {
  background: linear-gradient(to bottom, #fff, #f0efe6);
  border-color: #7a9ac5;
  color: #000;
  -webkit-text-fill-color: #000;
}
.lw-big-icon {
  font-size: 18px;
  margin-bottom: 2px;
  line-height: 1;
  color: #1a5c1a;
  -webkit-text-fill-color: #1a5c1a;
}
.lw-junk {
  margin-left: auto;
}
.lw-junk-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 46px;
  background: linear-gradient(to bottom, #f8f7f0, #e8e6d9);
  border: 1px solid #aca899;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 10px;
  font-family: inherit;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  padding: 0;
}
.lw-junk-btn:hover {
  background: linear-gradient(to bottom, #fff, #f0efe6);
  border-color: #7a9ac5;
}
.lw-junk-btn .lw-big-icon {
  color: #555;
  -webkit-text-fill-color: #555;
}

/* Downloads section (search view; hidden on library so the list has room) */
.lw-downloads {
  flex: 0 0 110px;
  height: 110px;
  max-height: 110px;
  background: white;
  border-top: 1px solid #aca899;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lw-downloads.lw-view-hidden {
  display: none !important;
}
.lw-dl-header {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 1.4fr 1.1fr 0.8fr 0.7fr;
  background: linear-gradient(to bottom, #f5f4ea, #ece9d8);
  border-bottom: 1px solid #aca899;
  padding: 3px 8px;
  font-size: 11px;
}
.lw-dl-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}
.lw-dl-empty {
  color: #888;
  text-align: center;
  padding: 16px;
}

/* Bottom control buttons */
.lw-controls {
  display: flex;
  gap: 6px;
  padding: 5px 10px;
  background: #ece9d8;
  border-top: 1px solid #aca899;
  flex-wrap: wrap;
}
.lw-ctrl-btn {
  background: linear-gradient(to bottom, #f8f7f0, #e8e6d9);
  border: 1px solid #aca899;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  padding: 3px 10px;
  font-size: 11px;
  font-family: inherit;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  cursor: pointer;
}
.lw-ctrl-btn:hover {
  background: #fff;
  border-color: #7a9ac5;
  color: #000;
  -webkit-text-fill-color: #000;
}
/* Video stage controls sit on dark chrome — light labels */
.lw-video-controls .lw-ctrl-btn {
  background: linear-gradient(to bottom, #3a3a3a, #252525);
  border-color: #555;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f0f0f0;
  -webkit-text-fill-color: #f0f0f0;
}
.lw-video-controls .lw-ctrl-btn:hover {
  background: linear-gradient(to bottom, #4a4a4a, #303030);
  border-color: #7a9ac5;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Status bar */
.lw-status {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background: #ece9d8;
  border-top: 1px solid #aca899;
  font-size: 11px;
  gap: 12px;
}
.lw-status-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lw-status-icon {
  font-size: 13px;
}
.lw-sep {
  color: #999;
}
.lw-status-center {
  flex: 1;
  text-align: center;
}
.lw-status-center a {
  color: #0066cc;
  text-decoration: none;
}
.lw-status-center a:hover {
  text-decoration: underline;
}
.lw-status-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lw-player-label {
  margin-right: 6px;
  color: #444;
}
.lw-player-btn {
  background: linear-gradient(to bottom, #f8f7f0, #e8e6d9);
  border: 1px solid #aca899;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  width: 22px;
  height: 18px;
  font-size: 10px;
  font-family: inherit;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lw-player-btn:hover {
  background: #fff;
  border-color: #7a9ac5;
  color: #000;
  -webkit-text-fill-color: #000;
}
.lw-filter-header {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
.lw-filter-item {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
.lw-filter-item.active {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.lw-table th {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
.lw-table td {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
/* Re-assert classic LimeWire accents after the dark-scheme text fix */
.lw-stars {
  color: #d4a017 !important;
  -webkit-text-fill-color: #d4a017 !important;
}
.lw-lic {
  color: #228b22 !important;
  -webkit-text-fill-color: #228b22 !important;
}
.lw-lib-status {
  color: #228b22 !important;
  -webkit-text-fill-color: #228b22 !important;
}
.lw-logo-text {
  color: #228b22 !important;
  -webkit-text-fill-color: #228b22 !important;
}
.lw-lib-banner-title {
  color: #1a5c1a !important;
  -webkit-text-fill-color: #1a5c1a !important;
}
.lw-lib-banner-sub,
.lw-lib-hint {
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
}
.lw-row.selected,
.lw-row.selected td {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.lw-row.selected .lw-stars {
  color: #ffd54f !important;
  -webkit-text-fill-color: #ffd54f !important;
}
.lw-row.selected .lw-lic,
.lw-row.selected .lw-lib-status {
  color: #c8ffc8 !important;
  -webkit-text-fill-color: #c8ffc8 !important;
}
.lw-dl-header {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
.lw-status,
.lw-menubar,
.lw-menubar span {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
.lw-menubar span:hover {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.lw-status-center a {
  color: #0066cc;
  -webkit-text-fill-color: #0066cc;
}
.lw-player-label {
  color: #444;
  -webkit-text-fill-color: #444;
}
.lw-warning {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}
.lw-warning a {
  color: #0066cc;
  -webkit-text-fill-color: #0066cc;
}
.lw-empty-row,
.lw-dl-empty {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
}
/* ==========================================================================
   COMPACT / MOBILE LAYOUT
   Only active when <html> has .layout-compact (set in JS for narrow viewports).
   Desktop styling is untouched when that class is absent.
   ========================================================================== */

html.layout-compact,
html.layout-compact body {
  /* Use dynamic viewport where supported (mobile browser chrome) */
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

html.layout-compact body {
  /* Safer tap targets; avoid iOS text-size inflation breaking chrome */
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/*
  Menubar (compact): strict two-zone layout
  [   AppName… ]················[ battery | wifi | CC | time ]
  Left may truncate; right never overlaps and stays tappable.
*/
html.layout-compact #menubar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: calc(32px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 6px 0 4px;
  font-size: 12px;
  z-index: 1000;
  /* visible so Apple / app dropdowns are not clipped */
  overflow: visible;
  box-sizing: border-box;
}
/* LEFT: only Apple + app name; everything else hard-hidden */
html.layout-compact .menubar-left {
  flex: 1 1 auto;
  min-width: 0; /* critical — allows ellipsis inside flex */
  max-width: 100%;
  /* Do not clip dropdowns — only the label truncates */
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  pointer-events: auto;
  z-index: 3;
}
html.layout-compact .menu-root[data-menu="file"],
html.layout-compact .menu-root[data-menu="edit"],
html.layout-compact .menu-root[data-menu="view"],
html.layout-compact .menu-root[data-menu="go"],
html.layout-compact .menu-root[data-menu="window"],
html.layout-compact .menu-root[data-menu="help"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
html.layout-compact .menu-root[data-menu="apple"],
html.layout-compact .menu-root[data-menu="app"] {
  pointer-events: auto;
  position: relative;
  z-index: 4;
  height: 100%;
  overflow: visible;
}
html.layout-compact .menu-root[data-menu="apple"] {
  flex: 0 0 auto;
}
html.layout-compact .menu-root[data-menu="app"] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
html.layout-compact .menu-trigger {
  height: 28px;
  line-height: 28px;
  padding: 0 7px;
  font-size: 12px;
  max-width: 100%;
  /* Touch-friendly hit target */
  min-height: 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
}
html.layout-compact .menu-trigger.apple {
  font-size: 16px;
  padding: 0 8px;
  flex-shrink: 0;
}
html.layout-compact .menu-trigger.menu-app-name {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  padding-right: 4px;
  box-sizing: border-box;
  text-align: left;
}
html.layout-compact .menu-root.open {
  z-index: 20;
}
html.layout-compact .menu-root.open .menu-dropdown {
  display: block;
  z-index: 1300;
}
/* RIGHT: fixed cluster — never shrinks under the app name */
html.layout-compact .menubar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: 0;
  height: 100%;
  z-index: 2;
  position: relative;
}
html.layout-compact .status-item {
  height: 28px;
  padding: 0 5px;
  min-width: 0;
  flex-shrink: 0;
}
html.layout-compact .battery-icon {
  width: 17px;
  height: 14px;
}
html.layout-compact .wifi-icon {
  width: 14px;
  height: 12px;
}
html.layout-compact .cc-menubar-icon {
  width: 13px;
  height: 13px;
}
html.layout-compact #clock {
  font-size: 12px;
  font-weight: 500;
  padding: 0 4px 0 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  white-space: nowrap;
  max-width: none;
  overflow: visible;
}
html.layout-compact .status-wifi-wrap {
  flex-shrink: 0;
}
html.layout-compact .menu-dropdown {
  max-width: min(320px, calc(100vw - 12px));
  max-height: min(70vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Dropdowns from left menus shouldn't span under status icons awkwardly */
html.layout-compact .menubar-left .menu-dropdown {
  left: 0;
  right: auto;
}

/* ---- Dock: compact, scrollable if needed ---- */
html.layout-compact #dock {
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  height: 56px;
  max-width: calc(100vw - 12px);
  padding: 0 8px;
  gap: 4px;
  border-radius: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.layout-compact #dock::-webkit-scrollbar {
  display: none;
}
html.layout-compact .dock-item {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
html.layout-compact .dock-icon-img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
html.layout-compact .dock-icon-img-safari {
  width: 40px;
  height: 40px;
}
html.layout-compact .dock-icon-img-trash {
  width: 38px;
  height: 38px;
  transform: translate(calc(-50% - 2px), -50%) scale(1.15);
}
html.layout-compact .dock-item:active,
html.layout-compact .dock-item.pressed {
  transform: scale(0.97);
}
html.layout-compact .dock-tooltip {
  display: none; /* tooltips fight touch */
}
html.layout-compact .sep {
  height: 28px;
  margin: 0 1px 0 2px;
}

/*
  Desktop icons (compact): free absolute positioning — same drag + marquee as desktop.
  Initial left/right layout is applied in JS (ensureCompactDeskLayout).
*/
html.layout-compact #desktop {
  /* Empty wallpaper area can marquee / not scroll the document */
  touch-action: none;
}
html.layout-compact #desktop-icons {
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
  z-index: 50;
}
html.layout-compact .desk-icon {
  position: absolute !important;
  width: 76px;
  max-width: 84px;
  padding: 4px 2px 3px;
  gap: 2px;
  pointer-events: auto;
  /* Custom drag without the browser scrolling / selecting */
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
html.layout-compact .desk-icon .icon {
  width: 44px;
  height: 44px;
  font-size: 32px;
  pointer-events: none;
}
html.layout-compact .desk-app-img {
  width: 44px;
  height: 44px;
  transform: scale(1.08);
  pointer-events: none;
}
html.layout-compact .desk-app-img-beat {
  width: 48px;
  height: 48px;
  transform: scale(1.12);
}
html.layout-compact .desk-app-img-insta {
  transform: scale(1.28);
}
html.layout-compact .desk-app-img-youtube {
  transform: scale(0.92);
  border-radius: 9px;
}
html.layout-compact .desk-app-img-tiktok {
  transform: scale(1.32);
}
html.layout-compact .desk-app-img-applemusic {
  transform: scale(0.88);
  border-radius: 9px;
}
html.layout-compact .desk-app-img-soundcloud {
  transform: scale(1.05);
  border-radius: 9px;
}
html.layout-compact .desk-icon .label {
  font-size: 10px;
  max-width: 74px;
  pointer-events: none;
}
/*
  Marquee on mobile: fixed to the viewport so it paints ABOVE the fixed wallpaper.
  Do NOT force opacity:1 on :not([hidden]) — that killed the dissolve fade.
*/
html.layout-compact #desktop-marquee {
  position: fixed !important;
  z-index: 90; /* above wallpaper + icons, below menubar (~1000) / dock */
  pointer-events: none;
  border: 1.5px solid rgba(90, 170, 255, 1);
  background: rgba(10, 132, 255, 0.34);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(0, 60, 140, 0.2),
    0 0 12px rgba(10, 132, 255, 0.25);
  border-radius: 3px;
  display: none;
}
html.layout-compact #desktop-marquee:not([hidden]) {
  display: block !important;
  visibility: visible;
}
/* Visible + not fading → full opacity (specificity must lose to .is-fading) */
html.layout-compact #desktop-marquee:not([hidden]):not(.is-fading) {
  opacity: 1;
}
html.layout-compact #desktop-marquee.is-fading {
  opacity: 0 !important;
  transition: opacity 0.18s ease-out;
  /* Stay display:block while fading so the opacity transition can run */
  display: block !important;
  visibility: visible;
}
html.layout-compact #desktop-marquee[hidden] {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  transition: none;
}
html.layout-compact body.desk-dragging {
  cursor: default;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}
html.layout-compact body.desk-dragging #desktop,
html.layout-compact body.desk-dragging #desktop-icons {
  touch-action: none;
}

/* ---- Windows: edge-to-edge usable frame, larger chrome ---- */
html.layout-compact .window {
  border-radius: 12px;
  max-width: 100vw;
  /* Prefer touch-friendly dragging without accidental text select */
  touch-action: none;
}
html.layout-compact .window .content {
  touch-action: pan-y pan-x;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
html.layout-compact .window .titlebar {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
}
html.layout-compact .window .title {
  font-size: 13px;
}
html.layout-compact .window .lights {
  gap: 8px;
}
html.layout-compact .window .light {
  width: 14px;
  height: 14px;
}
html.layout-compact .window .light .light-glyph {
  width: 7px;
  height: 7px;
}
html.layout-compact .window .resize-handle {
  display: none !important;
}
/* Nested app UIs that assume wide desktops */
html.layout-compact .window .content {
  font-size: 14px;
}

/* ---- Control Center + Wi‑Fi menu ---- */
html.layout-compact .cc-panel {
  top: calc(36px + env(safe-area-inset-top, 0px));
  right: 6px;
  left: 6px;
  width: auto;
  max-width: none;
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}
html.layout-compact .status-wifi-wrap .wifi-menu {
  right: 0;
  width: min(260px, calc(100vw - 12px));
  min-width: 0;
  max-height: min(70vh, 400px);
  overflow-y: auto;
}

/* ---- Login ---- */
html.layout-compact .avatar {
  width: 96px;
  height: 96px;
}
html.layout-compact .login-name {
  font-size: 1.25rem;
}
html.layout-compact .login-footer {
  left: 50%;
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  gap: 22px;
  width: max-content;
  max-width: calc(100vw - 24px);
  justify-content: center;
  align-items: flex-start;
  /* Keep horizontal center — scale alone was wiping translateX(-50%) */
  transform: translateX(-50%) scale(0.94);
  transform-origin: center bottom;
}

/* App-specific overflow safety on small screens */
html.layout-compact #w-music,
html.layout-compact #w-paint,
html.layout-compact #w-limewire,
html.layout-compact #w-beatmaker,
html.layout-compact #w-finder,
html.layout-compact #w-notes,
html.layout-compact #w-contacts {
  /* Content should scroll inside; avoid body-level overflow */
}

/* ==========================================================================
   Notes — mobile / compact (iOS-style: Folders → List → Editor)
   ========================================================================== */
html.layout-compact #w-notes .content {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
html.layout-compact #w-notes .nt,
html.layout-compact .nt.nt-compact {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Toolbar: room for traffic lights, wrap search */
html.layout-compact .nt-toolbar {
  padding: 10px 10px 10px 72px;
  gap: 8px;
  flex-wrap: wrap;
}
html.layout-compact .nt-tb-center {
  order: 3;
  flex: 1 1 100%;
  justify-content: stretch;
}
html.layout-compact .nt-search-wrap {
  width: 100%;
  height: 34px;
  max-width: none;
}
html.layout-compact .nt-search {
  font-size: 16px; /* prevent iOS zoom on focus */
}
html.layout-compact .nt-tb-btn {
  width: 36px;
  height: 32px;
  min-width: 36px;
}

/* Single-pane body on phone */
html.layout-compact .nt-body {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: none;
}

/* Hide all three panes by default; show active via root class */
html.layout-compact .nt-compact .nt-sidebar,
html.layout-compact .nt-compact .nt-mid,
html.layout-compact .nt-compact .nt-editor {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  border: none;
}
html.layout-compact .nt-compact.nt-pane-folders .nt-sidebar {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #1c1c1e;
  padding: 8px 0 16px;
}
html.layout-compact .nt-compact.nt-pane-list .nt-mid {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1c1c1e;
}
html.layout-compact .nt-compact.nt-pane-editor .nt-editor {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1c1c1e;
}

/* Folders list — larger hit targets */
html.layout-compact .nt-folder {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  gap: 10px;
}
html.layout-compact .nt-side-label {
  padding: 14px 16px 6px;
  font-size: 12px;
}
html.layout-compact .nt-side-footer {
  padding: 12px 16px;
}

/* List header + Folders back control */
html.layout-compact .nt-mobile-folders-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: #0a84ff;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  padding: 4px 2px 4px 0;
  margin: 0;
  cursor: default;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
html.layout-compact .nt-mobile-folders-btn:active {
  opacity: 0.55;
}
html.layout-compact .nt-list-header {
  padding: 8px 12px 6px;
}
html.layout-compact .nt-list-header-top {
  gap: 8px;
  align-items: center;
}
html.layout-compact .nt-list-header-title {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-align: left;
}
html.layout-compact .nt-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.layout-compact .nt-list-item {
  padding: 12px 14px;
  min-height: 56px;
  gap: 4px;
}
html.layout-compact .nt-list-title {
  font-size: 16px;
}
html.layout-compact .nt-list-meta {
  font-size: 13px;
}

/* Editor mobile */
html.layout-compact .nt-mobile-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: #0a84ff;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  padding: 4px 8px 4px 0;
  margin: 0 4px 0 0;
  cursor: default;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
html.layout-compact .nt-mobile-back:active {
  opacity: 0.55;
}
html.layout-compact .nt-editor-toolbar {
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  align-items: center;
}
html.layout-compact .nt-fmt {
  width: 34px;
  height: 30px;
  min-width: 34px;
}
html.layout-compact .nt-editor-scroll {
  padding: 12px 16px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.layout-compact .nt-editor-title {
  font-size: 22px;
  padding: 8px 0;
}
html.layout-compact .nt-editor-body {
  font-size: 16px; /* avoid iOS focus zoom */
  line-height: 1.45;
  min-height: 40vh;
}
html.layout-compact .nt-statusbar {
  font-size: 11px;
  padding: 6px 12px;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}

/* Desktop: hide mobile-only chrome */
.nt-mobile-back,
.nt-mobile-folders-btn {
  display: none;
}
html.layout-compact .nt-mobile-back,
html.layout-compact .nt-mobile-folders-btn {
  display: inline-flex;
}
html.layout-compact .nt-mobile-back-empty {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
}
html.layout-compact .nt-editor-empty {
  position: relative;
}

/* ==========================================================================
   Beat Maker — mobile / compact redesign (phone drum machine)
   Desktop rules above stay unchanged.
   ========================================================================== */
/* Cover dock while open (same pattern as iPod) for full usable height */
html.beatmaker-open #wins,
html.paint-open #wins {
  z-index: 950;
}
html.beatmaker-open #dock,
html.paint-open #dock {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ==========================================================================
   Tux Paint — mobile / compact (phone-first drawing studio)
   ========================================================================== */
html.layout-compact #w-paint {
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
}
html.layout-compact #w-paint .titlebar {
  height: 34px;
  flex-shrink: 0;
}
html.layout-compact #w-paint .content {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}
html.layout-compact .tp,
html.layout-compact .tp.tp-compact {
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}

/* Stack: tools → canvas → options → colors */
html.layout-compact .tp-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  overflow: hidden;
}

/* Tools: horizontal chip strip */
html.layout-compact .tp-sidebar-left {
  order: 1;
  width: 100%;
  flex: 0 0 auto;
  border-right: none;
  border-bottom: 2px solid #1e5a86;
  max-height: none;
  overflow: visible;
}
html.layout-compact .tp-sidebar-left .tp-side-head {
  display: none; /* logo/title — reclaim vertical space */
}
html.layout-compact .tp-tools {
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px;
  padding: 8px 8px 8px;
  max-height: none;
}
html.layout-compact .tp-tools::-webkit-scrollbar {
  display: none;
}
html.layout-compact .tp-tool {
  flex: 0 0 auto;
  width: 58px;
  min-width: 58px;
  min-height: 52px;
  padding: 5px 3px 4px;
  border-radius: 12px;
  border-width: 2px;
}
html.layout-compact .tp-tool-ico {
  font-size: 18px;
}
html.layout-compact .tp-tool-lab {
  font-size: 9px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.layout-compact .tp-tool:active {
  transform: scale(0.96);
}

/* Canvas: hero — takes remaining height */
html.layout-compact .tp-center {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 8px 4px;
  gap: 4px;
}
html.layout-compact .tp-canvas-frame {
  flex: 1 1 auto;
  min-height: 140px;
  border-width: 2px;
  border-radius: 6px;
  touch-action: none;
}
html.layout-compact #tp-canvas,
html.layout-compact #tp-overlay {
  touch-action: none;
  cursor: crosshair;
}
html.layout-compact .tp-speech {
  min-height: 0;
  max-height: 26px;
}
html.layout-compact .tp-speech-bubble {
  font-size: 11px;
  padding: 3px 10px;
  border-width: 1.5px;
  box-shadow: 0 1px 0 #1e5a86;
  max-width: 98%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Options / brushes: horizontal strip under canvas */
html.layout-compact .tp-sidebar-right {
  order: 3;
  width: 100%;
  flex: 0 0 auto;
  border-left: none;
  border-top: 2px solid #1e5a86;
  max-height: 92px;
  overflow: hidden;
}
html.layout-compact .tp-sidebar-right .tp-side-head {
  flex-direction: row;
  justify-content: flex-start;
  padding: 4px 10px 2px;
  border-bottom: 1px solid rgba(30, 90, 134, 0.45);
}
html.layout-compact .tp-sidebar-right .tp-side-title {
  font-size: 11px;
}
html.layout-compact .tp-selector {
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px;
  padding: 6px 8px 8px;
  align-items: stretch;
}
html.layout-compact .tp-selector::-webkit-scrollbar {
  display: none;
}
html.layout-compact .tp-sel {
  flex: 0 0 auto;
  width: 64px;
  min-width: 64px;
  min-height: 48px;
  padding: 4px 3px;
  border-radius: 10px;
}
html.layout-compact .tp-sel-stamp {
  width: 52px;
  min-width: 52px;
  min-height: 48px;
  font-size: 24px;
}
html.layout-compact .tp-sel-name {
  font-size: 9px;
}
html.layout-compact .tp-sel-hint {
  min-width: 140px;
  font-size: 11px;
  padding: 8px;
}
html.layout-compact .tp-sel-preview {
  min-width: 64px;
  font-size: 22px;
  padding: 8px;
}

/* Colors: horizontal scroll row */
html.layout-compact .tp-bottom {
  order: 4;
  flex-shrink: 0;
  gap: 8px;
  padding: 6px 8px max(8px, env(safe-area-inset-bottom, 0px));
  border-top-width: 2px;
}
html.layout-compact .tp-colors-label {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 10px;
  letter-spacing: 0.04em;
}
html.layout-compact .tp-colors {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 5px;
  max-height: none;
  grid-template-columns: none;
}
html.layout-compact .tp-colors::-webkit-scrollbar {
  display: none;
}
html.layout-compact .tp-color {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  aspect-ratio: auto;
  border-radius: 6px;
  border-width: 2px;
}
html.layout-compact .tp-color.active {
  box-shadow:
    0 0 0 2px #ffdd00,
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.layout-compact .tp-swatch {
  width: 36px;
  height: 36px;
  border-width: 2px;
  border-radius: 8px;
}

/* Short phones: tighten chrome so canvas stays large */
@media (max-height: 700px) {
  html.layout-compact .tp-tool {
    width: 52px;
    min-width: 52px;
    min-height: 46px;
  }
  html.layout-compact .tp-sidebar-right {
    max-height: 80px;
  }
  html.layout-compact .tp-sel {
    width: 56px;
    min-width: 56px;
    min-height: 42px;
  }
  html.layout-compact .tp-speech {
    display: none; /* tip takes vertical space on short phones */
  }
}
@media (max-height: 600px) {
  html.layout-compact .tp-tools {
    padding: 5px 6px;
    gap: 4px;
  }
  html.layout-compact .tp-color {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    min-height: 24px;
  }
}

html.layout-compact #w-beatmaker {
  max-height: none;
}
html.layout-compact #w-beatmaker .title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 72px);
}
html.layout-compact #w-beatmaker .content {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.layout-compact #w-beatmaker .bm-wrap,
html.layout-compact .bm-wrap.bm-compact {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Safe area when covering dock / home indicator */
  padding: 0 0 max(10px, env(safe-area-inset-bottom, 0px));
  border-radius: 0;
}
html.layout-compact .bm-wrap::after {
  inset: 3px;
  border-radius: 10px;
}
/* SVG icons inside control buttons */
html.layout-compact .bm-ctl-icon,
.bm-ctl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.bm-ico {
  display: block;
  flex-shrink: 0;
}
.bm-pad-arr .bm-ico,
.bm-ico-chev {
  opacity: 0.92;
}

/* ---- Top: CNR | transport buttons | BPM (READY hidden — frees a full row) ---- */
html.layout-compact .bm-topbar {
  padding: 6px 10px 4px;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
  justify-content: flex-start;
}
html.layout-compact .bm-model {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-width: 0;
  flex: 0 0 auto;
}
html.layout-compact .bm-model-num {
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.9;
}
html.layout-compact .bm-model-rule {
  max-width: 64px;
  margin-top: 2px;
  height: 2px;
}
/* Drop READY pane on mobile */
html.layout-compact .bm-status {
  display: none !important;
}
html.layout-compact .bm-topbar .bm-ctl-row {
  margin-left: auto;
  margin-right: 4px;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  max-width: none;
  min-width: 0;
}
html.layout-compact .bm-bpm {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
html.layout-compact .bm-topbar .bm-bpm-display {
  min-width: 56px;
  max-width: none;
  padding: 4px 9px 3px;
  margin-left: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(45, 212, 168, 0.22);
  flex-shrink: 0;
}
html.layout-compact .bm-bpm-label {
  font-size: 7px;
  letter-spacing: 0.14em;
  opacity: 0.7;
}

/* ---- Transport: sliders only (buttons live in topbar) ---- */
html.layout-compact .bm-transport {
  flex-wrap: nowrap;
  padding: 0 10px 6px;
  gap: 0;
  flex-shrink: 0;
  align-items: center;
}
/* Compact equal control buttons in the top bar */
html.layout-compact .bm-ctl,
html.layout-compact .bm-ctl-play {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  margin: 0 !important;
  border-radius: 50%;
}
html.layout-compact .bm-ctl .bm-ico,
html.layout-compact .bm-ctl-play .bm-ico {
  width: 15px !important;
  height: 15px !important;
}
html.layout-compact .bm-ctl-icon {
  font-size: 0;
}
html.layout-compact .bm-ctl-ring {
  inset: -2px;
  border-width: 1.5px;
}
html.layout-compact .bm-sliders,
html.layout-compact .bm-slider-row {
  order: 0;
  flex: 1 1 100%;
  max-width: none;
  margin-left: 0;
  gap: 6px;
  display: flex;
}
html.layout-compact .bm-sliders .bm-tempo-wrap,
html.layout-compact .bm-slider-row .bm-tempo-wrap,
html.layout-compact .bm-tempo-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 5px 8px 4px;
  gap: 2px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
html.layout-compact .bm-volume-wrap {
  flex: 1 1 0;
  max-width: none;
}
html.layout-compact .bm-tempo-wrap label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
html.layout-compact .bm-tempo-val-m,
html.layout-compact #bm-volume-val {
  font-family: var(--bm-font-digit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  opacity: 1;
}
html.layout-compact .bm-tempo-hints {
  font-size: 7px;
  opacity: 0.4;
}
html.layout-compact .bm-tempo-track {
  height: 16px;
}
html.layout-compact .bm-tempo-wrap input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
}
html.layout-compact .bm-tempo-wrap input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
}

/* ---- Pads: true squares, size capped by --bm-pad-size (JS) ---- */
html.layout-compact .bm-pads {
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--bm-pad-size, min(28vw, 108px));
  gap: 5px 5px; /* tighter horizontal (and vertical) spacing */
  padding: 4px 10px 6px;
  align-content: start;
  justify-items: center;
}
html.layout-compact .bm-pad {
  width: var(--bm-pad-size, min(28vw, 108px));
  height: var(--bm-pad-size, min(28vw, 108px));
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  padding: 8px 6px 6px;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 -5px 12px rgba(0, 0, 0, 0.38) inset,
    0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s ease, filter 0.08s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
/* CRITICAL: split pad stays side-by-side (row). .bm-pad sets column and was stacking Kick/808. */
html.layout-compact .bm-pad.bm-pad-split {
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  overflow: hidden;
}
html.layout-compact .bm-pad.hit {
  transform: scale(0.96);
  filter: brightness(1.12);
}
html.layout-compact .bm-pad-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-top: 4px;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
html.layout-compact .bm-pad-led {
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 8px currentColor;
}
html.layout-compact .bm-pad-cycle {
  padding: 4px 5px;
  gap: 4px;
  margin-top: auto;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}
html.layout-compact .bm-pad-cycle .bm-pad-arr,
html.layout-compact .bm-half-cycle .bm-pad-arr {
  width: 24px;
  height: 22px;
  font-size: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}
html.layout-compact .bm-pad-cycle .bm-pad-arr:active,
html.layout-compact .bm-half-cycle .bm-pad-arr:active {
  background: rgba(255, 255, 255, 0.24);
}
html.layout-compact .bm-pad-dots {
  min-width: 14px;
  gap: 3px;
}
html.layout-compact .bm-pad-dot {
  width: 4px;
  height: 4px;
}
html.layout-compact .bm-pad-split {
  min-height: 0;
  height: var(--bm-pad-size, min(28vw, 108px));
  width: var(--bm-pad-size, min(28vw, 108px));
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}
html.layout-compact .bm-pad-split .bm-half {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  max-width: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.layout-compact .bm-half-kick {
  border-radius: 14px 0 0 14px;
}
html.layout-compact .bm-half-808 {
  border-radius: 0 14px 14px 0;
}
html.layout-compact .bm-half-seam {
  width: 2px;
  flex-shrink: 0;
}
html.layout-compact .bm-half-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
html.layout-compact .bm-half-sub {
  display: none;
}
html.layout-compact .bm-half-body {
  padding: 16px 2px 2px;
  gap: 0;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}
html.layout-compact .bm-half-cycle {
  margin-top: 0;
  padding: 0 0 5px;
  gap: 2px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
html.layout-compact .bm-half-cycle .bm-pad-arr {
  width: 18px;
  height: 16px;
}
html.layout-compact .bm-arm {
  width: 9px;
  height: 9px;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 1.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
html.layout-compact .bm-arm.is-on {
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* ---- Sequencer: fills remaining space; 8-step pages; bigger steps ---- */
html.layout-compact .bm-seq-section {
  padding: 0 10px 2px;
  flex: 1 1 auto;
  min-height: 230px; /* room for all 6 rows + slim pager */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: none;
}
html.layout-compact .bm-section-label {
  padding: 0 2px 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
html.layout-compact .bm-section-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.85;
}
html.layout-compact .bm-section-hint {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
  margin-left: auto;
  text-align: right;
  line-height: 1.2;
  font-weight: 500;
}
/* Neon page arrows live inside the sequencer shell */
html:not(.layout-compact) .bm-seq-pager {
  display: none !important;
}
html.layout-compact .bm-seq-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 8px 0;
  margin-top: 2px;
  min-height: 0;
  border-top: 1px solid rgba(61, 224, 255, 0.08);
}
html.layout-compact .bm-seq-arrow {
  appearance: none;
  border: none;
  background: transparent;
  padding: 4px 10px;
  margin: 0;
  cursor: pointer;
  color: var(--bm-cyan, #3de0ff);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  min-height: 28px;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.18s ease,
    filter 0.18s ease,
    transform 0.12s ease,
    text-shadow 0.18s ease;
}
html.layout-compact .bm-seq-arrow .bm-page-ico {
  display: block;
  width: 18px;
  height: 18px;
}
/* Lit = actionable direction (cyan neon glow) */
html.layout-compact .bm-seq-arrow.is-lit {
  opacity: 1;
  color: #5ef0ff;
  filter: drop-shadow(0 0 4px rgba(61, 224, 255, 0.85))
    drop-shadow(0 0 12px rgba(61, 224, 255, 0.55));
}
html.layout-compact .bm-seq-arrow.is-lit:active {
  transform: scale(0.92);
  filter: drop-shadow(0 0 6px rgba(61, 224, 255, 1))
    drop-shadow(0 0 16px rgba(61, 224, 255, 0.7));
}
/* Dim = no further page that way */
html.layout-compact .bm-seq-arrow.is-dim,
html.layout-compact .bm-seq-arrow:disabled {
  opacity: 0.22;
  color: rgba(61, 224, 255, 0.55);
  filter: none;
  cursor: default;
  pointer-events: none;
}
html.layout-compact .bm-sequencer-shell {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 6px 4px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
    rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
/* Hide off-page steps on mobile (8 visible at a time) */
html.layout-compact .bm-sequencer-shell[data-page="0"] [data-step-page="1"],
html.layout-compact .bm-sequencer-shell[data-page="1"] [data-step-page="0"] {
  display: none !important;
}
html.layout-compact .bm-playhead,
html.layout-compact .bm-step-numbers {
  flex-shrink: 0;
}
html.layout-compact .bm-sequencer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  touch-action: none;
  overflow: hidden;
}
/* 8 columns only on mobile pages */
html.layout-compact .bm-playhead,
html.layout-compact .bm-step-numbers,
html.layout-compact .bm-row {
  grid-template-columns: 38px repeat(8, minmax(0, 1fr));
  gap: 4px;
}
html.layout-compact .bm-row-label {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
}
html.layout-compact .bm-row-chip {
  padding: 3px 4px;
  gap: 3px;
  max-width: 36px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
}
html.layout-compact .bm-row-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  max-width: 26px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
html.layout-compact .bm-row-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}
html.layout-compact .bm-step-num {
  font-size: 9px;
  font-weight: 600;
  padding: 0;
  line-height: 1;
  opacity: 0.55;
}
html.layout-compact .bm-step-num.accent {
  opacity: 0.95;
  color: var(--bm-cyan, #3de0ff);
}
/* Rows share remaining shell height → bigger steps */
html.layout-compact .bm-row {
  height: auto;
  min-height: 28px;
  max-height: none;
  flex: 1 1 0;
  gap: 4px;
  border-radius: 7px;
  padding: 0;
}
html.layout-compact .bm-step {
  height: 100%;
  min-height: 28px;
  max-height: none;
  border-radius: 7px;
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.layout-compact .bm-step:active {
  transform: scale(0.94);
}
html.layout-compact .bm-step.on {
  filter: brightness(1.05);
}
html.layout-compact .bm-step.playing .bm-step-core {
  box-shadow: 0 0 10px rgba(61, 224, 255, 0.55);
}
html.layout-compact .bm-step-core {
  inset: 3px;
  border-radius: 4px;
}
html.layout-compact .bm-playhead {
  min-height: 10px;
  margin-bottom: 2px;
}
html.layout-compact .bm-playhead-dot {
  width: 5px;
  height: 5px;
}
html.layout-compact .bm-playhead-cell.active .bm-playhead-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 8px var(--bm-cyan, #3de0ff);
}
html.layout-compact .bm-step-numbers {
  min-height: 12px;
  margin-bottom: 3px;
}

/* Short phones */
@media (max-height: 720px) {
  html.layout-compact .bm-topbar {
    padding: 4px 10px 0;
  }
  html.layout-compact .bm-pads {
    gap: 4px;
    padding: 2px 8px 4px;
  }
  html.layout-compact .bm-pad-name {
    font-size: 12px;
  }
  html.layout-compact .bm-row {
    min-height: 26px;
  }
  html.layout-compact .bm-step {
    min-height: 26px;
  }
}
@media (max-height: 640px) {
  html.layout-compact .bm-pads {
    gap: 4px;
    padding: 0 8px 4px;
  }
  html.layout-compact .bm-section-hint {
    display: none;
  }
  html.layout-compact .bm-row {
    min-height: 24px;
  }
  html.layout-compact .bm-step {
    min-height: 24px;
  }
}

#w-beatmaker.bm-painting,
#w-beatmaker.bm-painting .content {
  touch-action: none;
  overscroll-behavior: none;
}
#w-beatmaker.bm-painting .bm-sequencer-shell,
#w-beatmaker.bm-painting .bm-step {
  touch-action: none !important;
}

@media (max-width: 360px) {
  html.layout-compact .bm-playhead,
  html.layout-compact .bm-step-numbers,
  html.layout-compact .bm-row {
    grid-template-columns: 32px repeat(8, minmax(0, 1fr));
  }
  html.layout-compact .bm-row-label {
    width: 30px;
    max-width: 30px;
  }
  html.layout-compact .bm-row-chip {
    max-width: 30px;
  }
}

html.layout-compact .it-shell,
html.layout-compact .tp-app,
html.layout-compact .lw-app,
html.layout-compact .fn-app,
html.layout-compact .notes-app,
html.layout-compact .ct-app {
  min-width: 0 !important;
  max-width: 100%;
}

/* iTunes / wide toolbars: allow horizontal scroll instead of clipping forever */
html.layout-compact .it-toolbar,
html.layout-compact .lw-toolbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

/* ==========================================================================
   LimeWire — mobile / compact only (classic XP look stays on desktop)
   ========================================================================== */
html.layout-compact #w-limewire .content {
  overflow: hidden;
}

/* Drop the fake app menubar — pure chrome waste on phones */
html.layout-compact .lw-menubar {
  display: none;
}

/* Toolbar: all icons + logo on one row, no scroll, no wrap — shrink to fit */
html.layout-compact .lw-toolbar {
  gap: 0;
  padding: 2px 3px 2px 1px;
  overflow: hidden;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
html.layout-compact .lw-toolbar-scroll {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; /* no scroll */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  padding-right: 2px;
  mask-image: none;
  -webkit-mask-image: none;
}
html.layout-compact .lw-tb-btn {
  /* Equal share of remaining width after logo */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  font-size: clamp(7px, 2.1vw, 9px);
  padding: 1px 0;
  overflow: hidden;
}
html.layout-compact .lw-tb-btn > div:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 1px;
  line-height: 1.1;
}
html.layout-compact .lw-tb-icon {
  font-size: clamp(12px, 3.4vw, 16px);
  height: 16px;
  margin-bottom: 1px;
}
html.layout-compact .lw-tb-logo {
  width: 14px;
  height: 14px;
}
html.layout-compact .lw-tb-logo-wrap {
  height: 16px;
}
/* Logo fixed natural size — full “LimeWire” word */
html.layout-compact .lw-logo {
  position: static;
  margin-left: 2px;
  width: auto;
  max-width: none;
  height: auto;
  padding: 0 2px 0 6px;
  gap: 4px;
  font-size: 11px;
  z-index: auto;
  background: transparent;
  border-left: 1px solid #aca899;
  box-shadow: none;
  justify-content: flex-start;
  flex: 0 0 auto;
  pointer-events: none;
  align-self: center;
}
html.layout-compact .lw-logo-img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
html.layout-compact .lw-logo-text {
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  white-space: nowrap;
}
/* Very narrow phones: slightly tighter logo so 7 buttons still fit */
@media (max-width: 360px) {
  html.layout-compact .lw-logo-text {
    font-size: 10px;
  }
  html.layout-compact .lw-logo-img {
    width: 16px;
    height: 16px;
  }
  html.layout-compact .lw-logo {
    padding-left: 4px;
    gap: 3px;
  }
  html.layout-compact .lw-tb-btn {
    height: 36px;
    min-height: 36px;
  }
}

/* Stack sidebar + results; primary filter fills width */
html.layout-compact .lw-main {
  flex-direction: column;
  min-height: 0;
}
html.layout-compact .lw-left {
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: visible;
  border-right: none;
  border-bottom: 1px solid #aca899;
  background: #f0f0f0;
}
/* Primary filter box (Library / Media): full width, short vertically */
html.layout-compact .lw-filter-box {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  border-left: none;
  border-right: none;
  border-top: none;
}
html.layout-compact .lw-filter-header {
  font-size: 10px;
  padding: 2px 8px;
  line-height: 1.2;
}
/* Compact horizontal chip row under the yellow title */
html.layout-compact .lw-filter-box .lw-filter-item {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  min-height: 0;
  line-height: 1.25;
  white-space: nowrap;
}
/* Put filter items in one short horizontal strip */
html.layout-compact .lw-filter-box {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
html.layout-compact .lw-filter-box .lw-filter-header {
  flex: 0 0 100%;
  width: 100%;
}
html.layout-compact .lw-filter-box .lw-filter-item {
  flex: 1 1 auto;
  justify-content: center;
  border-right: 1px solid #e0e0e0;
}
html.layout-compact .lw-filter-box .lw-filter-item:last-child {
  border-right: none;
}
/* Hide secondary filter groups + back/hint on mobile to free vertical space */
html.layout-compact #lw-view-search .lw-filter-box:nth-child(2),
html.layout-compact #lw-view-search .lw-filter-box:nth-child(3),
html.layout-compact #lw-view-library .lw-filter-box:nth-child(2),
html.layout-compact .lw-back-btn,
html.layout-compact .lw-lib-hint {
  display: none;
}
html.layout-compact .lw-right {
  min-height: 0;
  flex: 1 1 auto;
}
html.layout-compact .lw-warning {
  font-size: 10px;
  padding: 5px 8px;
  line-height: 1.3;
}
html.layout-compact .lw-lib-banner {
  padding: 6px 10px;
  gap: 8px;
}
html.layout-compact .lw-lib-banner-logo {
  width: 26px;
  height: 26px;
}
html.layout-compact .lw-lib-banner-title {
  font-size: 12px;
}
html.layout-compact .lw-lib-banner-sub {
  font-size: 10px;
}

/* Table: keep Name + essentials; hide dense desktop columns */
html.layout-compact .lw-table-wrap {
  min-height: 80px;
  -webkit-overflow-scrolling: touch;
}
html.layout-compact .lw-table {
  font-size: 12px;
}
html.layout-compact .lw-table th,
html.layout-compact .lw-table td {
  padding: 7px 6px;
}
/* Search columns: Quality # License Name Type Size Speed Bitrate  (1-based) */
html.layout-compact #lw-view-search .lw-table th:nth-child(2),
html.layout-compact #lw-view-search .lw-table td:nth-child(2),
html.layout-compact #lw-view-search .lw-table th:nth-child(3),
html.layout-compact #lw-view-search .lw-table td:nth-child(3),
html.layout-compact #lw-view-search .lw-table th:nth-child(7),
html.layout-compact #lw-view-search .lw-table td:nth-child(7),
html.layout-compact #lw-view-search .lw-table th:nth-child(8),
html.layout-compact #lw-view-search .lw-table td:nth-child(8) {
  display: none;
}
/* Library: play Name Artist Album Type Size Bitrate Status */
html.layout-compact #lw-view-library .lw-table th:nth-child(3),
html.layout-compact #lw-view-library .lw-table td:nth-child(3),
html.layout-compact #lw-view-library .lw-table th:nth-child(4),
html.layout-compact #lw-view-library .lw-table td:nth-child(4),
html.layout-compact #lw-view-library .lw-table th:nth-child(6),
html.layout-compact #lw-view-library .lw-table td:nth-child(6),
html.layout-compact #lw-view-library .lw-table th:nth-child(7),
html.layout-compact #lw-view-library .lw-table td:nth-child(7) {
  display: none;
}
html.layout-compact .lw-lib-play-btn {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* Action bar — larger tap targets, wrap cleanly */
html.layout-compact .lw-action-bar {
  gap: 6px;
  padding: 6px 8px;
  flex-wrap: wrap;
}
html.layout-compact .lw-big-btn,
html.layout-compact .lw-junk-btn {
  width: 64px;
  height: 48px;
  font-size: 10px;
  min-height: 48px;
}
html.layout-compact .lw-big-icon {
  font-size: 16px;
}

/* Player: shorter idle/audio; video still usable */
html.layout-compact .lw-player-panel {
  flex-basis: 72px;
  height: 72px;
  max-height: 72px;
  min-height: 72px;
}
html.layout-compact .lw-player-panel[data-mode="audio"] {
  flex-basis: 128px;
  height: 128px;
  max-height: 128px;
  min-height: 128px;
}
html.layout-compact .lw-audio-art {
  width: 88px;
  flex-basis: 88px;
}
html.layout-compact .lw-audio-art-ring {
  width: 52px;
  height: 52px;
}
html.layout-compact .lw-audio-art-logo {
  width: 28px;
  height: 28px;
}
/* Bigger video stage on phones — most of the lower half for watching */
html.layout-compact .lw-player-panel[data-mode="video"] {
  flex: 1 1 42vh;
  flex-basis: min(42vh, 360px);
  height: min(48vh, 380px);
  max-height: min(52vh, 420px);
  min-height: min(36vh, 280px);
}
html.layout-compact .lw-player-panel[data-mode="video"] .lw-video-stage {
  flex: 1 1 auto;
  min-height: 0;
}
html.layout-compact .lw-player-panel[data-mode="video"] .lw-video-bar {
  flex-shrink: 0;
}
/* When video is playing, let the file list shrink so the player can grow */
html.layout-compact #lw-view-library:has(.lw-player-panel[data-mode="video"]) .lw-table-wrap {
  flex: 0 1 22%;
  min-height: 64px;
  max-height: 28vh;
}
html.layout-compact .lw-player-empty {
  padding: 8px 12px;
  font-size: 11px;
  gap: 8px;
}
html.layout-compact .lw-player-empty-logo {
  width: 28px;
  height: 28px;
}
html.layout-compact .lw-audio-body {
  padding: 10px 12px 8px;
  gap: 5px;
  font-size: 11px;
}
html.layout-compact .lw-audio-title {
  font-size: 14px;
}
html.layout-compact .lw-audio-btn {
  width: 36px;
  height: 32px;
  min-height: 32px;
}
html.layout-compact .lw-audio-btn-main {
  width: 44px;
  height: 34px;
}
html.layout-compact .lw-video-bar {
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
}
html.layout-compact .lw-video-controls {
  width: 100%;
  justify-content: space-between;
}
html.layout-compact .lw-video-controls .lw-ctrl-btn {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 6px 4px;
  font-size: 11px;
}

/* Downloads pane shorter on search view */
html.layout-compact .lw-downloads {
  flex-basis: 84px;
  height: 84px;
  max-height: 84px;
}
html.layout-compact .lw-dl-header {
  grid-template-columns: 1.6fr 0.7fr 0.9fr 1fr 0.7fr 0;
  font-size: 10px;
  padding: 3px 6px;
}
html.layout-compact .lw-dl-header span:nth-child(6) {
  display: none;
}
html.layout-compact .lw-dl-item {
  grid-template-columns: 1.6fr 0.7fr 0.9fr 1fr 0.7fr 0;
  font-size: 10px;
}
html.layout-compact .lw-dl-item > :nth-child(6) {
  display: none;
}

/* Bottom strip: compact controls + status */
html.layout-compact .lw-controls {
  gap: 4px;
  padding: 6px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
html.layout-compact .lw-controls::-webkit-scrollbar {
  display: none;
}
html.layout-compact .lw-ctrl-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
}
/* Hide lesser-used bottom controls on mobile */
html.layout-compact .lw-controls .lw-ctrl-btn:nth-child(2),
html.layout-compact .lw-controls .lw-ctrl-btn:nth-child(3),
html.layout-compact .lw-controls .lw-ctrl-btn:nth-child(5) {
  display: none;
}

html.layout-compact .lw-status {
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 4px 8px;
  font-size: 10px;
}
html.layout-compact .lw-status-center {
  display: none; /* PRO promo — desktop only */
}
html.layout-compact .lw-status-right {
  margin-left: auto;
}
html.layout-compact .lw-player-label {
  display: none;
}
html.layout-compact .lw-player-btn {
  width: 30px;
  height: 28px;
  font-size: 12px;
  min-height: 28px;
}

/* Context menu fit */
html.layout-compact .ctx-menu {
  max-width: calc(100vw - 16px);
}

/* Short landscape phones */
@media (max-height: 420px) and (orientation: landscape) {
  html.layout-compact #dock {
    height: 48px;
    bottom: 4px;
  }
  html.layout-compact .dock-item {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
  html.layout-compact .cc-panel {
    max-height: calc(100dvh - 56px);
  }
}

/* ===================== CLASSIC iPod (mobile music) ===================== */
/* While open: stack windows above the dock so the iPod can cover it */
html.ipod-open #wins {
  z-index: 950;
}
html.ipod-open #dock {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#w-ipod {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
#w-ipod .titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 36px;
  background: linear-gradient(180deg, #3a3a3e 0%, #2a2a2e 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  padding: 0 10px;
}
#w-ipod .titlebar .title {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
#w-ipod .content {
  overflow: hidden;
  background: #9a9ca2;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ipod {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  padding: 40px 0 max(0px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  /* Cool studio grey behind silver body */
  background:
    radial-gradient(ellipse 90% 55% at 50% 8%, rgba(255, 255, 255, 0.4), transparent 58%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(0, 0, 0, 0.1), transparent 55%),
    linear-gradient(180deg, #b0b2b8 0%, #96989e 48%, #7e8086 100%);
}
.ipod-face {
  width: min(100%, 420px);
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Classic silver aluminum — cool metallic, not pure white plastic */
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      #f4f5f7 0%,
      #e6e8ec 14%,
      #d5d7dc 36%,
      #c8cad0 58%,
      #b9bbc2 78%,
      #aeb0b7 100%
    );
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.32),
    0 4px 12px rgba(0, 0, 0, 0.14),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 12px rgba(0, 0, 0, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.45),
    inset -1px 0 0 rgba(0, 0, 0, 0.08);
  padding: 14px 18px 22px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
/* Soft specular streak across the silver body */
.ipod-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 255, 255, 0.5) 44%,
      rgba(255, 255, 255, 0.1) 54%,
      transparent 70%
    );
  opacity: 0.65;
  z-index: 0;
}
.ipod-face > * {
  position: relative;
  z-index: 1;
}

.ipod-screen-bezel {
  width: 100%;
  /* Reference: long LCD (~half the face, not a short strip) */
  flex: 0 0 auto;
  min-height: 0;
  height: min(46vh, 268px);
  max-height: min(46vh, 268px);
  display: flex;
  flex-direction: column;
  background: #111;
  border-radius: 10px;
  padding: 6px;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 4px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
.ipod-screen {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 28%),
    linear-gradient(180deg, #e4ecf7 0%, #c8d6ec 55%, #b8c8e2 100%);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #111;
  display: flex;
  flex-direction: column;
}

.ipod-lcd {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1;
}
.ipod-lcd-title {
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px 5px;
  background: linear-gradient(180deg, #74aef0 0%, #3f84d8 48%, #2d6fc8 100%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid #1f5a9e;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Classic title bar: centered label + battery / play pip on the right */
.ipod-lcd-title-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px 4px;
}
.ipod-title-spacer {
  width: 36px;
  flex-shrink: 0;
}
.ipod-title-mid {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.ipod-title-right {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.ipod-batt {
  display: inline-block;
  width: 16px;
  height: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 1.5px;
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff 0%, #e8f4ff 100%);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.ipod-batt::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 1.5px;
  width: 2px;
  height: 3px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0 1px 1px 0;
}
.ipod-batt::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 70%;
  background: linear-gradient(180deg, #7dff9a 0%, #2ecc5a 100%);
  border-radius: 0.5px;
}
.ipod-play-pip {
  font-size: 9px;
  line-height: 1;
  opacity: 0.95;
  font-weight: 700;
}
.ipod-play-pip.is-paused {
  font-size: 8px;
  letter-spacing: -1px;
  opacity: 0.85;
}
.ipod-lcd-list {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #eef3fa;
  scrollbar-width: none; /* authentic LCD — no scrollbar chrome */
  overscroll-behavior: contain;
}
.ipod-lcd-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.ipod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #eef3fa;
  color: #111;
  min-height: 30px;
  box-sizing: border-box;
}
.ipod-row.is-selected {
  background: linear-gradient(180deg, #5ea3ec 0%, #2f78d0 55%, #2769bc 100%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  border-bottom-color: transparent;
}
.ipod-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ipod-row-meta {
  flex-shrink: 0;
  font-size: 11px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.ipod-row-chevron {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.9;
  line-height: 1;
}
.ipod-row-static {
  font-size: 12px;
  color: #444;
}
.ipod-row.is-playing .ipod-row-label::before {
  content: "♪ ";
}
.ipod-lcd-empty {
  padding: 28px 12px;
  text-align: center;
  color: #555;
  font-size: 13px;
}

/* Classic Now Playing: art + meta row, progress bar along the bottom */
.ipod-lcd-now {
  background: #eef3fa;
}
.ipod-lcd-now .ipod-now-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 10px 8px;
  align-items: stretch;
  background: #eef3fa;
  min-height: 0;
  flex: 1;
  box-sizing: border-box;
}
.ipod-now-main {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  min-height: 0;
  flex: 1 1 auto;
}
.ipod-now-art {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
  background: #ccc;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.ipod-now-meta {
  min-width: 0;
  flex: 1;
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ipod-now-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ipod-now-artist,
.ipod-now-album {
  font-size: 11px;
  color: #222;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ipod-now-stars {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  line-height: 1;
}
.ipod-now-tracknum {
  margin-top: 3px;
  font-size: 11px;
  color: #222;
  font-variant-numeric: tabular-nums;
}
.ipod-now-progress {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 2px;
}
.ipod-now-t0,
.ipod-now-t1 {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #222;
  min-width: 2.4em;
  line-height: 1;
}
.ipod-now-t1 {
  text-align: right;
}
.ipod-now-bar {
  flex: 1;
  height: 8px;
  min-width: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #c5d0e0 0%, #dce4f0 40%, #eef2f8 100%);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  position: relative;
}
.ipod-now-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #8ec0f5 0%, #4a8fd8 45%, #2f6fc4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: width 0.35s linear;
}

/* Click wheel — bright white plastic ring on silver body */
.ipod-wheel {
  position: relative;
  width: min(74vw, 272px);
  height: min(74vw, 272px);
  max-width: 100%;
  margin: clamp(36px, 6vh, 52px) auto 0;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffffff 0%, #fafafa 32%, #f0f0f0 62%, #e6e6e6 100%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 3px 5px rgba(255, 255, 255, 1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  touch-action: none;
  user-select: none;
}
/* Thin outer ring bevel */
.ipod-wheel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    inset 0 0 0 2px rgba(0, 0, 0, 0.03);
  z-index: 1;
}
.ipod-wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  cursor: default;
  background: transparent;
}
.ipod-wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  height: 36%;
  border-radius: 50%;
  border: none;
  z-index: 4;
  /* Bright white center button */
  background:
    radial-gradient(circle at 38% 32%, #ffffff 0%, #fafafa 42%, #efefef 78%, #e4e4e4 100%);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    inset 0 1.5px 0 #fff,
    inset 0 -2px 5px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.ipod-wheel-center:active {
  background: radial-gradient(circle at 38% 32%, #f5f5f5 0%, #e8e8e8 70%, #ddd 100%);
}
.ipod-wheel-hit {
  position: absolute;
  z-index: 3;
  border: none;
  background: transparent;
  color: #9a9a9a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ipod-glyph {
  width: 22px;
  height: 14px;
  display: block;
  opacity: 0.92;
}
.ipod-hit-menu {
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 15%;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #8a8a8a;
}
.ipod-hit-prev {
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 20%;
  height: 28%;
  color: #8e8e8e;
}
.ipod-hit-next {
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 20%;
  height: 28%;
  color: #8e8e8e;
}
.ipod-hit-play {
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 15%;
  color: #8e8e8e;
}
.ipod-wheel-hit:active {
  color: #555;
}
.ipod-wheel-hit:active .ipod-glyph {
  opacity: 1;
}

/* .ipod-yt-offscreen shared with .it-yt-offscreen above */

/* Only used on compact; hide if somehow opened on desktop without gate */
html:not(.layout-compact) #w-ipod {
  /* still ok if opened */
}

html.layout-compact #w-ipod .titlebar {
  height: 34px;
  padding-left: 10px;
  padding-right: 10px;
}
/* Full-bleed white body like the reference app */
html.layout-compact .ipod {
  padding: 34px 0 0;
  background: #e8e8e8;
}
html.layout-compact .ipod-face {
  border-radius: 0;
  border: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
  /* Top pad under titlebar, side inset for LCD, bottom room under wheel */
  padding: 10px 16px max(18px, env(safe-area-inset-bottom, 0px));
}
html.layout-compact .ipod-screen-bezel {
  flex: 0 0 auto;
  /* Long display — closer to reference LCD height */
  height: min(44vh, 280px);
  max-height: min(44vh, 280px);
  border-radius: 6px;
}
html.layout-compact .ipod-screen {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  border-radius: 3px;
}
html.layout-compact .ipod-wheel {
  width: min(74vw, 272px);
  height: min(74vw, 272px);
  /* Extra space under LCD so wheel sits lower */
  margin-top: clamp(38px, 6.4vh, 56px);
  margin-bottom: 0;
}

@media (max-height: 700px) {
  html.layout-compact .ipod-screen-bezel {
    height: min(42vh, 240px);
    max-height: min(42vh, 240px);
  }
  html.layout-compact .ipod-wheel {
    width: min(64vw, 240px);
    height: min(64vw, 240px);
    margin-top: clamp(30px, 5vh, 42px);
  }
  html.layout-compact .ipod-now-art {
    width: 72px;
    height: 72px;
  }
  html.layout-compact .ipod-now-title {
    font-size: 12px;
  }
  html.layout-compact .ipod-now-artist,
  html.layout-compact .ipod-now-album,
  html.layout-compact .ipod-now-tracknum {
    font-size: 10px;
  }
  html.layout-compact .ipod-face {
    padding: 8px 14px max(14px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-height: 620px) {
  html.layout-compact .ipod-screen-bezel {
    height: min(38vh, 210px);
    max-height: min(38vh, 210px);
  }
  html.layout-compact .ipod-wheel {
    width: min(58vw, 214px);
    height: min(58vw, 214px);
    margin-top: clamp(24px, 4.2vh, 34px);
  }
  html.layout-compact .ipod-face {
    padding: 6px 12px max(10px, env(safe-area-inset-bottom, 0px));
  }
}