:root {
  --bg: #000;
  --phone-bg: #0b0b0d;
  --header-bg: rgba(28, 28, 30, 0.9);
  --border: #2c2c2e;
  --me: #0a84ff;
  --blob-a: #5e5ce6;
  --blob-b: #0a84ff;
  --blob-c: #bf5af2;
  --them: #26262a;
  --text: #f2f2f7;
  --sub: #8e8e93;
}

* { box-sizing: border-box; }

/* Elements toggled via the `hidden` attribute must actually hide, even
   when their own class sets `display: flex/grid`. Class selectors and
   [hidden] have equal specificity, so without this the class always wins. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Physical phone body: black titanium bezel + side buttons around the screen */
/* Monitor frame: thin bezel, 16:10 slab, desk stand + webcam notch instead
   of an iPhone body. Everything inside (.device and down) is unchanged. */
.phone-frame {
  position: relative;
  height: min(90vh, 820px);
  aspect-ratio: 16 / 10;
  width: auto;
  max-width: 96vw;
  background: linear-gradient(165deg, #2c2c2e, #0c0c0d 55%, #000 100%);
  border-radius: 18px;
  padding: 16px 16px 20px;
  box-shadow:
    0 0 0 2px #3a3a3c,
    0 40px 80px rgba(0, 0, 0, 0.65),
    inset 0 0 3px rgba(255, 255, 255, 0.22);
  margin-bottom: 46px; /* room for the stand below */
}
/* Monitor stand: neck + base, as two stacked bars under the frame */
.phone-frame::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%; transform: translateX(-50%);
  width: 64px; height: 26px;
  background: linear-gradient(180deg, #2c2c2e, #0c0c0d);
  box-shadow:
    0 26px 0 -6px #1c1c1e,          /* the neck, slightly narrower-looking via radius below */
    0 30px 0 -4px rgba(0, 0, 0, 0.3);
  border-radius: 0 0 6px 6px;
}
.monitor-base {
  position: absolute;
  left: 50%; bottom: -46px; transform: translateX(-50%);
  width: 150px; height: 10px;
  background: linear-gradient(180deg, #333335, #0c0c0d);
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.phone-btn { display: none; }

/* Tablet mode: on wide screens fill the space with an iPad-style landscape
   slab instead of a narrow portrait phone that leaves big black side bars. */
@media (min-aspect-ratio: 5/4) and (min-width: 900px) {
  .phone-frame { height: min(94vh, 900px); padding: 18px; }
  /* Roomier grid + centered content on the big canvas */
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 26px 14px; max-width: 760px; margin: 0 auto; width: 100%; }
  .messages, .composer, .search-bar, .search-results, .notes-list, .reminders-list,
  .reminder-add-bar, .settings-list, .weather-body, .clock-body { max-width: 620px; margin-left: auto; margin-right: auto; width: 100%; }
}

.device {
  width: 100%;
  height: 100%;
  background: var(--phone-bg);
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

@media (max-width: 420px) {
  .phone-frame {
    width: 100vw; height: 100vh;
    border-radius: 0; padding: 0;
    box-shadow: none;
    margin-bottom: 0;
  }
  .phone-frame::after, .monitor-base, .dynamic-island { display: none; }
  .device { border-radius: 0; }
}

/* Cinematic boot sequence */
.boot-screen {
  position: absolute;
  inset: 0;
  z-index: 9800;
  background: radial-gradient(circle at center, #0a0a1e 0%, #000 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  animation: boot-out 0.9s ease-in 3.6s forwards;
}
.boot-screen.skip { display: none; }
@keyframes boot-out {
  to { opacity: 0; transform: scale(1.35); filter: blur(6px); visibility: hidden; }
}
.boot-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: boot-orb-float 7s ease-in-out infinite;
}
.boot-orb-a { width: 260px; height: 260px; background: #5e5ce6; top: 10%; left: 8%; }
.boot-orb-b { width: 220px; height: 220px; background: #ff375f; top: 55%; right: 8%; animation-delay: 1.4s; }
.boot-orb-c { width: 240px; height: 240px; background: #0abfdc; bottom: 6%; left: 30%; animation-delay: 2.6s; }
@keyframes boot-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5%, -6%) scale(1.15); }
}
.boot-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #cfe3ff, transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent),
    radial-gradient(1px 1px at 35% 80%, #a9c7ff, transparent),
    radial-gradient(1px 1px at 75% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 15% 60%, #cfe3ff, transparent),
    radial-gradient(1px 1px at 50% 15%, #fff, transparent);
  opacity: 0;
  animation: boot-stars 3s ease-out forwards;
}
@keyframes boot-stars {
  0% { opacity: 0; transform: scale(1.4); }
  40% { opacity: 0.9; }
  100% { opacity: 0.5; transform: scale(1); }
}
.boot-ring {
  position: absolute;
  width: 60px; height: 60px;
  border: 2px solid rgba(94, 92, 230, 0.8);
  border-radius: 50%;
  opacity: 0;
  animation: boot-ring 2.6s ease-out forwards;
}
.boot-ring-2 { border-color: rgba(10, 132, 255, 0.6); animation-delay: 0.35s; }
.boot-ring-3 { border-color: rgba(255, 55, 95, 0.55); animation-delay: 0.7s; }
@keyframes boot-ring {
  0% { opacity: 0.9; width: 40px; height: 40px; }
  70% { opacity: 0.15; }
  100% { opacity: 0; width: 460px; height: 460px; }
}
.boot-logo {
  position: relative;
  font-size: 58px;
  opacity: 0;
  transform: scale(0.4) rotate(-20deg);
  animation: boot-logo 1.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.3s forwards, boot-bounce 1.1s ease-in-out 1.7s infinite;
  filter: drop-shadow(0 0 18px rgba(94, 92, 230, 0.9));
}
@keyframes boot-logo {
  0% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes boot-bounce {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 14px rgba(94, 92, 230, 0.7)); }
  50% { transform: scale(1.08) translateY(-6px); filter: drop-shadow(0 0 30px rgba(255, 55, 95, 0.9)); }
}
.boot-word {
  position: relative;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 6px;
  background: linear-gradient(90deg, #5e5ce6, #0a84ff, #0abfdc, #30d158, #ffd60a, #ff9500, #ff375f, #bf5af2, #5e5ce6);
  background-size: 400% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: boot-word-in 0.8s ease 1s forwards, boot-word-sheen 3.5s linear 1.6s infinite;
}
@keyframes boot-word-in {
  from { opacity: 0; transform: translateY(12px); letter-spacing: 16px; }
  to { opacity: 1; transform: translateY(0); letter-spacing: 6px; }
}
@keyframes boot-word-sheen { to { background-position: 400% center; } }
.boot-sub {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: boot-word-in 0.7s ease 1.7s forwards;
}
.boot-bar {
  position: relative;
  width: 130px; height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  opacity: 0;
  margin-top: 6px;
  animation: boot-word-in 0.6s ease 2.1s forwards;
}
.boot-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #5e5ce6, #0a84ff, #ff375f);
  border-radius: 3px;
  animation: boot-fill 1.4s ease-out 2.1s forwards;
}
@keyframes boot-fill { to { width: 100%; } }

/* Cinematic unlock: home icons cascade in */
.home-screen.reveal-in .app-icon {
  opacity: 0;
  animation: icon-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5) forwards;
}
.home-screen.reveal-in .app-grid .app-icon:nth-child(1) { animation-delay: 0.05s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(2) { animation-delay: 0.09s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(3) { animation-delay: 0.13s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(4) { animation-delay: 0.17s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(5) { animation-delay: 0.21s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(6) { animation-delay: 0.25s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(7) { animation-delay: 0.29s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(8) { animation-delay: 0.33s; }
.home-screen.reveal-in .app-grid .app-icon:nth-child(9) { animation-delay: 0.37s; }
.home-screen.reveal-in .dock .app-icon { animation-delay: 0.4s; }
@keyframes icon-pop {
  0% { opacity: 0; transform: scale(0.3) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.home-screen.reveal-in { animation: home-zoom-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes home-zoom-in {
  from { transform: scale(1.15); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

/* Webcam dot (was the iPhone "dynamic island" notch) — still expands to
   show a notification, just centered on a tiny monitor-style camera bump. */
.dynamic-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  background: #0a0a0a;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1c1c1e, 0 0 4px rgba(25, 255, 156, 0.5);
  z-index: 9700;
  pointer-events: none;
  transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1), height 0.3s, border-radius 0.3s;
}
.dynamic-island.expanded {
  width: 200px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: #fff;
  font-size: 12px;
  pointer-events: auto;
}

/* Home indicator */
.home-indicator {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  z-index: 9600;
  cursor: pointer;
}
.home-indicator.dark { background: rgba(0, 0, 0, 0.35); }

/* Every screen (lock, home, each app) stacks and fills the device;
   only one is visible at a time via the `hidden` attribute. */
.lock-screen, .home-screen, .app-window {
  position: absolute;
  inset: 0;
}

.app-window {
  background: var(--phone-bg);
  display: flex;
  flex-direction: column;
  z-index: 10;
  padding-top: 34px;
}
.app-window .composer,
.app-window .reminder-add-bar,
.app-window .note-editor-bar { padding-bottom: 16px; }
.app-window.opening { animation: app-open 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.app-window.closing { animation: app-close 0.28s cubic-bezier(0.4, 0, 1, 1); }
@keyframes app-open {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes app-close {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.94); }
}

/* Lock screen */
.lock-screen {
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Anchored from the top (not dead-centered) so a taller passcode pad
     doesn't push the clock up into the status bar — it just grows downward
     instead, same as a real lock screen. */
  justify-content: flex-start;
  padding-top: 52px;
  padding-bottom: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #050506;
}
.lock-screen.unlocking { animation: login-fade-out 0.4s ease forwards; }
@keyframes login-fade-out {
  to { opacity: 0; transform: scale(1.03); }
}
.lock-bg, .home-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.lock-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lock-time {
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -1px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.lock-date {
  margin-top: -20px;
  font-size: 15px;
  color: var(--sub);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.blob-a {
  width: 46vw; height: 46vw;
  background: var(--blob-a);
  top: -10%; left: -10%;
  animation: blob-float-a 16s ease-in-out infinite;
}
.blob-b {
  width: 40vw; height: 40vw;
  background: var(--blob-b);
  bottom: -12%; right: -8%;
  animation: blob-float-b 20s ease-in-out infinite;
}
.blob-c {
  width: 30vw; height: 30vw;
  background: var(--blob-c);
  top: 40%; left: 60%;
  animation: blob-float-c 14s ease-in-out infinite;
}

.device[data-wallpaper="sunset"] { --blob-a: #ff9500; --blob-b: #ff375f; --blob-c: #ffcc00; }
.device[data-wallpaper="forest"] { --blob-a: #30d158; --blob-b: #0a84ff; --blob-c: #34d669; }
.device[data-wallpaper="candy"] { --blob-a: #bf5af2; --blob-b: #ff375f; --blob-c: #ff9ff3; }
.device[data-wallpaper="mono"] { --blob-a: #8e8e93; --blob-b: #1c1c1e; --blob-c: #636366; }
.device[data-wallpaper="ocean"] { --blob-a: #00c6ff; --blob-b: #0072ff; --blob-c: #48c6ef; }
.device[data-wallpaper="dusk"] { --blob-a: #c94b4b; --blob-b: #4b134f; --blob-c: #833ab4; }

/* Custom uploaded photo wallpaper */
.device.has-photo .lock-bg,
.device.has-photo .home-bg {
  background-image: var(--wallpaper-image);
  background-size: cover;
  background-position: center;
}
.device.has-photo .blob { opacity: 0.18; }
.device.has-photo .home-screen::before,
.device.has-photo .lock-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 0;
  pointer-events: none;
}
@keyframes blob-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 6vh) scale(1.15); }
}
@keyframes blob-float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vw, -8vh) scale(1.1); }
}
@keyframes blob-float-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10vw, 5vh) scale(0.9); }
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100vw - 48px));
  background: rgba(20, 20, 23, 0.7);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 26px 24px 22px;
  text-align: center;
  animation: card-in var(--dur-2) var(--ease-out);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card.shake { animation: shake 0.4s; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.login-lock {
  font-size: 34px;
  margin-bottom: 10px;
  animation: lock-bounce 2.4s ease-in-out infinite;
}
@keyframes lock-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.login-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
  background: linear-gradient(90deg, #fff, #b9c2ff, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-sheen 4s linear infinite;
}
@keyframes title-sheen {
  to { background-position: 200% center; }
}
.login-sub { margin: 0 0 20px; font-size: 13px; color: var(--sub); }

/* ---- Windows-style "signed in as" chip above the credential step, so the
   profile pick (tile picker) and the password entry read as one continuous
   sign-in flow instead of two disconnected screens. ---- */
.signin-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.signin-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
}
.signin-avatar-emma { background: linear-gradient(160deg, #ff6482, #d6336c); }
.signin-avatar-cayden { background: linear-gradient(160deg, #0a84ff, #0a5fc4); }
.signin-name { font-size: 15px; font-weight: 600; color: var(--text); }
.signin-switch { color: var(--sub); }

/* ---- Passcode pad (replaces the old plain-text password field) ---- */
.passcode-label {
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 14px;
}
.passcode-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 4px;
}
.pc-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.pc-dot.filled {
  background: #fff;
  border-color: #fff;
  transform: scale(1.1);
}
.pc-dot.wrong { background: #ff453a; border-color: #ff453a; }
.login-error {
  min-height: 18px;
  margin-top: 12px;
  font-size: 13px;
  color: #ff453a;
}
.passcode-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
  transition: opacity 0.15s;
}
.passcode-pad.disabled { opacity: 0.5; pointer-events: none; }
.pc-key {
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: rgba(120, 120, 128, 0.24);
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, transform 0.1s;
}
.pc-key:active { background: rgba(255, 255, 255, 0.35); transform: scale(0.94); }
.pc-key-spacer { background: transparent; cursor: default; }
.pc-key-del {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}
.pc-key-del:active { background: transparent; color: #fff; }

/* ---- Password fallback (for a non-numeric shared password) ---- */
.password-field-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.password-field-row input {
  flex: 1;
  min-width: 0;
  background: #1c1c1e;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.password-field-row input:focus { border-color: var(--me); }
.password-unlock-btn {
  flex-shrink: 0;
  background: var(--me);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.password-unlock-btn:disabled { opacity: 0.6; }
.password-unlock-btn:not(:disabled):active { transform: scale(0.96); }
.login-mode-toggle {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--me);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}

/* ---- Face ID scan (returning sessions skip the passcode entirely) ---- */
.faceid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 44px 28px;
}
.faceid-frame {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  border-radius: 20px;
}
.faceid-corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 2.5px solid #fff;
  opacity: 0.85;
}
.faceid-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.faceid-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 8px; }
.faceid-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.faceid-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 8px; }
.faceid-face { opacity: 0.9; }
.faceid-scan {
  position: absolute;
  left: 4px; right: 4px;
  top: 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #5ac8fa, transparent);
  opacity: 0;
}
.faceid-scanning .faceid-scan {
  opacity: 1;
  animation: faceid-sweep 0.9s ease-in-out;
}
.faceid-scanning .faceid-corner { animation: faceid-pulse 0.9s ease-in-out; }
@keyframes faceid-sweep {
  0% { top: 10px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 62px; opacity: 0; }
}
@keyframes faceid-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; border-color: #5ac8fa; }
}
.faceid-card.faceid-fail .faceid-corner { border-color: #ff453a; }
.faceid-card.faceid-fail .faceid-face { color: #ff453a; }
.faceid-label { font-size: 15px; color: var(--sub); }

/* ---- Profile picker (who's using the phone right now) ---- */
.profile-card { padding: 32px 24px; }
.profile-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}
.profile-options {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.profile-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(120, 120, 128, 0.16);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 18px 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.profile-btn:active { transform: scale(0.96); }
.profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.profile-avatar-emma { background: linear-gradient(160deg, #ff6482, #d6336c); }
.profile-avatar-cayden { background: linear-gradient(160deg, #0a84ff, #0a5fc4); }

/* Notification banner */
.notif-banner {
  position: absolute;
  top: 48px;
  left: 10px;
  right: 10px;
  z-index: 300;
  background: rgba(32, 32, 35, 0.85);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transform: translateY(-130%);
  transition: transform 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.25);
}
.notif-banner.show { transform: translateY(0); }
.notif-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(160deg, #34d669, #0fb35a);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notif-body { min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; }
.notif-text {
  font-size: 13px;
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unread badge on an app icon */
.icon-tile { position: relative; }
.app-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ff3b30;
  border: 2px solid var(--bg);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Home screen */
.home-screen {
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 0 18px 76px; /* reserve room for the floating taskbar, which is
                           absolutely positioned and out of normal flow */
}
.status-bar {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.ios-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 6px;
  color: #fff;
}
.lock-statusbar { position: absolute; top: 0; left: 18px; right: 18px; z-index: 2; }
.sb-time { font-size: 15px; font-weight: 600; }
.sb-right { display: flex; align-items: center; gap: 6px; }
.sb-signal { display: flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.sb-signal i {
  width: 3px;
  background: #fff;
  border-radius: 1px;
}
.sb-signal i:nth-child(1) { height: 4px; }
.sb-signal i:nth-child(2) { height: 6px; }
.sb-signal i:nth-child(3) { height: 8px; }
.sb-signal i:nth-child(4) { height: 11px; }
.sb-wifi { margin: 0 1px; }
.sb-battery { display: flex; align-items: center; gap: 1px; }
.sb-battery-shell {
  width: 23px; height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  padding: 1.5px;
  display: flex;
}
.sb-battery-fill {
  height: 100%;
  width: 70%;
  background: #fff;
  border-radius: 1px;
}
.sb-battery-fill.low { background: #ff3b30; }
.sb-battery-nub {
  width: 1.5px; height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 1px 1px 0;
}
.app-grid {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0; /* let the grid scroll instead of overflowing past its
                    flex box (and under the floating taskbar) once there
                    are enough icons to need more room than fits */
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 20px 8px;
  align-content: start;
  padding: 18px 0 12px;
}
.app-icon {
  background: none;
  border: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.app-icon:active { transform: scale(0.92); }
.app-label { font-size: 11px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.icon-tile {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.25) inset,
    0 -6px 10px rgba(0, 0, 0, 0.18) inset,
    0 4px 10px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s;
}
/* Glossy top highlight — the single biggest thing that makes a flat gradient
   tile read as a real, modern icon instead of a plain colored square. */
.icon-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.icon-tile > svg, .icon-tile > img { position: relative; z-index: 1; }
.app-icon:active .icon-tile {
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.2) inset,
    0 -4px 8px rgba(0, 0, 0, 0.22) inset,
    0 2px 5px rgba(0, 0, 0, 0.3);
}
.tile-messages { background: linear-gradient(160deg, #34d669, #0fb35a); }
.tile-calculator { background: linear-gradient(160deg, #3a3a3c, #1c1c1e); }
.tile-notes { background: linear-gradient(160deg, #ffd75e, #f5b800); }
.tile-clock { background: linear-gradient(160deg, #2c2c2e, #050506); }
.tile-weather { background: linear-gradient(160deg, #6ec6ff, #0a84ff); }
.tile-camera { background: linear-gradient(160deg, #48484a, #1c1c1e); }
.tile-reminders { background: linear-gradient(160deg, #ffffff, #e5e5ea); }
.tile-settings { background: linear-gradient(160deg, #98989d, #636366); }
.tile-photos { background: linear-gradient(160deg, #fafafa, #e5e5ea); }
.tile-phone { background: linear-gradient(160deg, #34d669, #0aa84a); }
.tile-snake { background: linear-gradient(160deg, #30d158, #148a3a); }
.tile-piano { background: linear-gradient(160deg, #48484a, #1c1c1e); }
.tile-compass { background: linear-gradient(160deg, #ff9f0a, #d9720a); }
.tile-voicememos { background: linear-gradient(160deg, #ff453a, #b8291f); }
.tile-naturecams { background: linear-gradient(160deg, #30a85e, #166b38); }
.tile-admin { background: linear-gradient(160deg, #3a3a3c, #0c0c0d); }
.tile-whiteboard { background: linear-gradient(160deg, #ff9f0a, #c9700a); }
.tile-findmy { background: linear-gradient(160deg, #ff453a, #b8291f); }

/* Windows-style taskbar: a floating, fully centered pill anchored to the
   bottom of the screen, independent of the content flow above it so it's
   never at the mercy of the app-grid's own width/alignment. */
.dock {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 7px 10px;
  background: rgba(22, 22, 26, 0.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.dock-icon {
  padding: 5px;
  border-radius: 12px;
  transition: background 0.12s, transform 0.1s;
}
.dock-icon:hover { background: rgba(255, 255, 255, 0.08); }
.dock-icon:active { transform: scale(0.92); }
.dock-icon .icon-tile { width: 42px; height: 42px; }

/* Shared app header bar (used outside Messages' own chat-header) */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.app-topbar .app-title { font-weight: 600; font-size: 17px; flex: 1; text-align: center; }
.app-topbar-spacer { width: 32px; flex-shrink: 0; }
.back-btn { margin-right: 2px; }

/* Header */
.chat-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--me) 40%, var(--border));
  box-shadow: 0 1px 16px color-mix(in srgb, var(--me) 20%, transparent);
  z-index: 5;
}
/* Faint animated grid + glow behind the whole conversation — same cyber
   language as the rest of the app, dim enough not to fight the text. */
.chat-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.chat-bg-grid {
  position: absolute;
  inset: -20% -20%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--me) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--me) 14%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.35;
  animation: chat-grid-drift 16s linear infinite;
}
@keyframes chat-grid-drift { to { background-position: 42px 42px, 42px 42px; } }
.chat-bg-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
}
.chat-bg-glow.a { top: -60px; left: -60px; background: var(--me); }
.chat-bg-glow.b { bottom: -60px; right: -60px; background: var(--neon, #19ff9c); }
.messages, .search-bar, .search-results { position: relative; z-index: 1; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5e5ce6, #bf5af2, #0a84ff, #5e5ce6);
  background-size: 300% 300%;
  animation: avatar-shift 6s ease infinite;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--me) 55%, transparent), 0 2px 10px var(--me-glow, rgba(10, 132, 255, 0.4));
}
@keyframes avatar-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.who { flex: 1; min-width: 0; }
.name {
  font-weight: 700; font-size: 16px; cursor: pointer;
  background: linear-gradient(90deg, var(--text), var(--me) 140%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.2px;
}
.sub { font-size: 12px; color: var(--sub); display: flex; align-items: center; gap: 5px; overflow: hidden; }
#status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header .icon-btn svg { width: 17px; height: 17px; }
.chat-header { gap: 8px; padding: 12px 12px; }
.sub.online { color: #30d158; }
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sub);
  flex-shrink: 0;
}
.sub.online .status-dot {
  background: #30d158;
  box-shadow: 0 0 0 rgba(48, 209, 88, 0.6);
  animation: dot-pulse 1.8s ease-out infinite;
}
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}
.chat-header .icon-btn {
  background: color-mix(in srgb, var(--me) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--me) 20%, var(--border));
  color: var(--text);
  cursor: pointer;
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.12s, transform 0.12s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.chat-header .icon-btn:hover {
  background: color-mix(in srgb, var(--me) 18%, transparent);
  border-color: color-mix(in srgb, var(--me) 45%, var(--border));
  box-shadow: 0 0 10px color-mix(in srgb, var(--me) 35%, transparent);
  color: var(--me);
}
.chat-header .icon-btn:active { opacity: 0.6; transform: scale(0.88); }
.icon-btn {
  background: none; border: none; color: var(--text);
  cursor: pointer; padding: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.1s, transform 0.1s;
}
.icon-btn:active { opacity: 0.5; transform: scale(0.9); }
.icon-btn.plus {
  color: var(--me);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border);
}

/* Messages */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.messages::-webkit-scrollbar { width: 0; }

.name-label {
  font-size: 11px;
  color: var(--sub);
  margin: 8px 0 2px 12px;
}
.row {
  display: flex;
  margin-top: 2px;
  align-items: center;
  gap: 6px;
}
.row.me { justify-content: flex-end; }
.row.them { justify-content: flex-start; }

.bubble-wrap { position: relative; max-width: 74%; }

.bubble {
  padding: 8px 13px;
  border-radius: 19px;
  font-size: 16px;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: pop 0.14s ease-out;
  cursor: default;
}
@keyframes pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.bubble.me {
  background: linear-gradient(135deg, var(--me-light, #2b9bff), var(--me) 75%);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 10px var(--me-glow, rgba(10, 132, 255, 0.35));
}
.bubble.them {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.bubble.image { padding: 3px; overflow: hidden; }
.bubble.image img {
  display: block;
  max-width: 240px;
  max-height: 320px;
  width: auto; height: auto;
  border-radius: 16px;
}

/* React/unsend trigger button. Hover-only would never show on the touch-styled
   phone UI (no hover there), so it's always visible at a dimmed opacity and
   the row highlights it on hover/tap. */
.react-btn {
  opacity: 0.45;
  border: none;
  background: #1c1c1e;
  color: var(--sub);
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.row:hover .react-btn,
.react-btn:active { opacity: 1; }

/* Reaction badges on a bubble */
.reactions {
  position: absolute;
  top: -14px;
  display: flex;
  gap: 3px;
}
.row.me .reactions { right: 6px; }
.row.them .reactions { left: 6px; }
.reaction {
  background: #1c1c1e;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 6px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.reaction.mine { border-color: var(--me); background: #0a2a4d; }

.stamp {
  text-align: center;
  font-size: 11px;
  color: var(--sub);
  margin: 12px 0 4px;
}
.system-pill {
  align-self: center;
  max-width: 85%;
  margin: 8px auto;
  padding: 7px 14px;
  border-radius: 14px;
  background: rgba(25, 255, 156, 0.1);
  border: 1px solid rgba(25, 255, 156, 0.25);
  color: var(--neon, #19ff9c);
  font: 600 12px ui-monospace, Menlo, Consolas, monospace;
  text-align: center;
  letter-spacing: 0.2px;
}

.read-status {
  text-align: right;
  font-size: 11px;
  color: var(--sub);
  margin: 2px 6px 2px 0;
}

/* Typing indicator */
.typing-row { padding: 0 12px 4px; }
.bubble.typing { display: inline-flex; gap: 4px; padding: 12px 14px; animation: none; }
.bubble.typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sub); display: inline-block;
  animation: blink 1.3s infinite ease-in-out;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Composer */
.composer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(22px) saturate(1.4);
  border-top: 1px solid color-mix(in srgb, var(--me) 35%, var(--border));
  box-shadow: 0 -1px 16px color-mix(in srgb, var(--me) 14%, transparent);
}
.composer input#input {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 9px 14px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer input#input:focus {
  border-color: var(--me);
  box-shadow: 0 0 0 3px var(--me-glow, rgba(10, 132, 255, 0.25));
}
.icon-btn.plus {
  color: var(--me);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--me) 45%, var(--border));
  background: color-mix(in srgb, var(--me) 10%, transparent);
}
.mic-btn {
  color: var(--text);
  opacity: 0.85;
}
.mic-btn.recording { color: #ff3b30; opacity: 1; }
#send {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, var(--me-light, #2b9bff), var(--me) 65%);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 3px 8px var(--me-glow, rgba(10, 132, 255, 0.45));
  transition: transform 0.12s, opacity 0.1s, box-shadow 0.12s;
}
#send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
#send:not(:disabled):active { transform: scale(0.88); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 1px 3px rgba(10, 132, 255, 0.4); }

/* Reaction picker popup */
.react-picker {
  position: fixed;
  background: #1c1c1e;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.react-picker button {
  background: none; border: none;
  font-size: 22px; cursor: pointer;
  padding: 4px; border-radius: 50%;
  transition: transform 0.1s;
}
.react-picker button:hover { transform: scale(1.25); }

/* FaceTime call overlay */
.call {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 120;
  overflow: hidden;
}
/* Camera-iris style reveal when a FaceTime call opens, instead of just
   popping onscreen. */
.call.call-opening {
  animation: call-iris-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes call-iris-in {
  0% { clip-path: circle(0% at 50% 92%); }
  100% { clip-path: circle(140% at 50% 92%); }
}
.call.call-opening::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle at 50% 92%, rgba(48, 209, 88, 0.35), transparent 60%);
  animation: call-ring-flash 0.6s ease-out forwards;
}
@keyframes call-ring-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.video-grid {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 3px;
  background: #000;
  grid-template-columns: 1fr;
}
.video-grid.two { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.video-grid.many { grid-template-columns: 1fr 1fr; }
.tile {
  position: relative;
  background: #111;
  overflow: hidden;
  min-height: 0;
}
.tile video {
  width: 100%;
  height: 100%;
  /* "cover" cropped faces out of frame whenever the tile's aspect ratio
     didn't match the camera's (e.g. two people stacked in short tiles).
     "contain" always shows the whole face, letterboxed on the sides. */
  object-fit: contain;
  background: #000;
}
.tile .tile-name {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  border-radius: 10px;
}
.local-video {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 96px;
  height: 132px;
  /* This box is much taller/narrower than a typical camera feed, so "cover"
     was cropping the top of your head and chin off. "contain" keeps the
     whole face in frame, letterboxed top/bottom instead of cropped. */
  object-fit: contain;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: #222;
  transform: scaleX(-1);
}
.call-status {
  position: absolute;
  top: 24px;
  left: 0; right: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.call-controls {
  position: absolute;
  bottom: 30px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 22px;
}
.call-round {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, opacity 0.1s;
}
.call-round:active { transform: scale(0.9); }
.call-round.decline {
  background: linear-gradient(160deg, #ff6457, #ff3b30 70%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 16px rgba(255, 59, 48, 0.55);
}
.call-round.accept {
  background: linear-gradient(160deg, #4ee580, #30d158 70%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 16px rgba(48, 209, 88, 0.55);
}
.call-round.neutral {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.call-round.neutral.off { background: #fff; color: #000; }

.incoming {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.9);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.incoming-name {
  font-size: 28px;
  font-weight: 600;
  animation: incoming-pulse 1.6s ease-in-out infinite;
}
@keyframes incoming-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(48, 209, 88, 0); }
  50% { text-shadow: 0 0 22px rgba(48, 209, 88, 0.55); }
}
.incoming-sub { font-size: 15px; color: var(--sub); margin-bottom: 40px; }
.incoming-actions { display: flex; gap: 60px; }
.call-round {
  animation: incoming-ring-bounce 1.1s ease-in-out infinite;
}
.call-round.accept { animation-delay: 0.1s; }
@keyframes incoming-ring-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
  45% { transform: translateY(0); }
}

/* Calculator app */
.calc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 12px 20px;
  gap: 16px;
}
.calc-display {
  text-align: right;
  font-size: 56px;
  font-weight: 300;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.calc-btn {
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: #333336;
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
  transition: filter 0.1s, transform 0.1s;
}
.calc-btn:active { filter: brightness(1.4); transform: scale(0.96); }
.calc-fn { background: #a5a5a5; color: #000; }
.calc-op { background: var(--me); color: #fff; font-size: 26px; }
.calc-op.active-op { background: #fff; color: var(--me); }
.calc-zero {
  grid-column: span 2;
  border-radius: 28px;
  text-align: left;
  padding-left: 26px;
  aspect-ratio: auto;
}

/* Notes app */
.notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
}
.note-item {
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.note-item-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.note-item-preview { font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-empty { text-align: center; color: var(--sub); font-size: 14px; margin-top: 60px; }
.note-editor {
  position: absolute;
  inset: 0;
  background: var(--phone-bg);
  display: flex;
  flex-direction: column;
  z-index: 15;
  animation: app-open 0.22s ease;
}
.note-textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--text);
  font-size: 16px;
  padding: 16px;
  font-family: inherit;
  line-height: 1.5;
}
.note-editor-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.note-delete-btn, .note-done-btn {
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 6px 10px;
}
.note-delete-btn { color: #ff453a; }
.note-done-btn { color: var(--me); font-weight: 600; }

/* Clock app */
.clock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px;
}
.clock-face { text-align: center; }
.clock-big-time {
  font-size: 48px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
}
.clock-big-date { margin-top: 6px; font-size: 14px; color: var(--sub); }
.stopwatch {
  width: 100%;
  text-align: center;
}
.stopwatch-label { font-size: 12px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stopwatch-time {
  font-size: 40px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
}
.stopwatch-controls { display: flex; justify-content: center; gap: 18px; }
.sw-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #1c1c1e;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.1s;
}
.sw-btn:active { transform: scale(0.94); }
.sw-start { color: #30d158; border-color: rgba(48, 209, 88, 0.4); }
.sw-start.running { color: #ff453a; border-color: rgba(255, 69, 58, 0.4); }

.timer-section { width: 100%; text-align: center; margin-top: 28px; }
.timer-picker {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 22px;
}
.timer-wheel-col {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.timer-select {
  appearance: none;
  -webkit-appearance: none;
  background: #1c1c1e;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  text-align: center;
  outline: none;
}
.timer-unit { font-size: 13px; color: var(--sub); }
.timer-time {
  font-size: 40px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
  color: var(--me);
}
.timer-time.done { color: #ff453a; animation: timer-pulse 0.6s ease-in-out infinite; }
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Weather app */
.weather-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  background: linear-gradient(180deg, #2a6bc4, #6fa8dc 60%, #8ec3e8);
}
.weather-status { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.weather-location { font-size: 20px; font-weight: 600; color: #fff; }
.weather-temp { font-size: 76px; font-weight: 200; color: #fff; line-height: 1; margin: 4px 0; }
.weather-condition { font-size: 16px; color: rgba(255, 255, 255, 0.9); }
.weather-range { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin-top: 4px; }
.weather-icon { margin-bottom: 6px; }
.weather-retry {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 13px;
  cursor: pointer;
}
.weather-send-btn {
  flex-shrink: 0;
  margin: 0 16px 16px;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.weather-send-btn:active { transform: scale(0.98); }

/* Weather card chat bubble */
.bubble.weathercard-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #2a6bc4, #6fa8dc);
}
.weathercard-icon { font-size: 30px; line-height: 1; }
.weathercard-temp { font-size: 26px; font-weight: 300; color: #fff; }
.weathercard-info { display: flex; flex-direction: column; }
.weathercard-city { font-size: 13px; font-weight: 700; color: #fff; }
.weathercard-condition { font-size: 11.5px; color: rgba(255, 255, 255, 0.85); }

/* Camera app */
.camera-body {
  flex: 1;
  position: relative;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-video, .camera-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.camera-photo { transform: none; }
.camera-status {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: var(--sub);
  font-size: 14px;
  padding: 0 30px;
  z-index: 3;
}
.camera-controls {
  position: absolute;
  bottom: 26px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.camera-shutter {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform 0.1s;
}
.camera-shutter:active { transform: scale(0.9); }
.camera-review {
  position: absolute;
  bottom: 26px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 30px;
  z-index: 2;
}
.camera-action-btn {
  background: rgba(28, 28, 30, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 22px;
  cursor: pointer;
}
.camera-send-btn { background: var(--me); border-color: var(--me); }

/* Reminders app */
.reminders-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px;
}
.reminder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
}
.reminder-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #ff9500;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.reminder-check.done { background: #ff9500; border-color: #ff9500; }
.reminder-text { flex: 1; font-size: 15px; word-break: break-word; }
.reminder-text.done { color: var(--sub); text-decoration: line-through; }
.reminder-del {
  background: none; border: none; color: var(--sub);
  font-size: 18px; cursor: pointer; padding: 4px;
  flex-shrink: 0;
}
.reminders-empty { text-align: center; color: var(--sub); font-size: 14px; margin-top: 60px; }
.reminder-add-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.reminder-add-bar input {
  flex: 1;
  background: #1c1c1e;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 9px 14px;
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.reminder-add-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: #ff9500;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Settings app */
.settings-list { padding: 18px 14px; }
.settings-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #1c1c1e;
  border: none;
  color: var(--text);
  font-size: 15px;
  padding: 14px 14px;
  cursor: pointer;
  text-align: left;
}
.settings-row:first-child { border-radius: 12px 12px 0 0; }
.settings-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.settings-list > :last-of-type { border-radius: 0 0 12px 12px; margin-bottom: 20px; }
.settings-value { color: var(--sub); font-size: 14px; }
.settings-danger { color: #ff453a; justify-content: center; border-radius: 12px; margin-top: 6px; }
.settings-switch { position: relative; display: inline-block; width: 46px; height: 27px; }
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-switch-track {
  position: absolute; inset: 0;
  background: #39393d;
  border-radius: 14px;
  transition: background 0.2s;
}
.settings-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.settings-switch input:checked + .settings-switch-track { background: #30d158; }
.settings-switch input:checked + .settings-switch-track .settings-switch-knob { transform: translateX(19px); }

.settings-wallpaper-row { flex-direction: column; align-items: stretch; gap: 10px; }
.wallpaper-swatches { display: flex; gap: 10px; }
.wallpaper-swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.wallpaper-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--me); }

/* Search */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  color: var(--sub);
}
.search-bar input {
  flex: 1;
  background: #1c1c1e;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.search-bar button {
  background: none; border: none;
  color: var(--me);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.search-results {
  flex: 1;
  min-height: 0;
  background: var(--phone-bg);
  overflow-y: auto;
  padding: 4px 0;
}
.search-result-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
}
.search-result-name { font-size: 12px; color: var(--sub); margin-bottom: 2px; }
.search-result-text { font-size: 14px; }
.search-result-text mark { background: rgba(255, 214, 10, 0.35); color: inherit; border-radius: 3px; }
.search-empty { text-align: center; color: var(--sub); font-size: 14px; margin-top: 40px; }
.bubble.flash-highlight { animation: flash-highlight 1.2s ease; }
@keyframes flash-highlight {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px #ffd60a; }
}

/* Voice recording */
.record-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--header-bg);
  border-top: 1px solid var(--border);
}
.record-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  animation: dot-pulse 1s infinite;
  flex-shrink: 0;
}
#record-time { font-variant-numeric: tabular-nums; font-size: 14px; }
.record-hint { flex: 1; color: var(--sub); font-size: 13px; }
.record-cancel {
  background: none; border: none; color: var(--sub);
  font-size: 13px; cursor: pointer; padding: 4px 6px;
}
.record-stop {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: #ff3b30;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mic-btn.recording { color: #ff3b30; }

/* Voice message bubble */
.bubble.audio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-width: 150px;
}
.audio-play-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.bubble.them .audio-play-btn { background: rgba(255, 255, 255, 0.1); }
.audio-wave {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.audio-wave span {
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
}
.audio-duration { font-size: 12px; opacity: 0.8; flex-shrink: 0; }

/* Photos app */
.photos-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  align-content: start;
}
.photos-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  display: block;
}
.photos-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--sub);
  font-size: 14px;
  margin-top: 60px;
}
.photo-viewer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-viewer-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1;
}

/* Brightness / flashlight overlays */
.brightness-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 400;
  transition: opacity 0.15s;
}
.flashlight-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 9500;
}

/* Control Center */
.cc-trigger {
  position: absolute;
  top: 0; right: 0;
  width: 90px; height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 320;
}
.control-center {
  position: absolute;
  inset: 0;
  z-index: 350;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.cc-panel {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cc-drop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes cc-drop {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
.cc-row { display: flex; gap: 12px; }
.cc-tile-group {
  flex: 1;
  background: rgba(60, 60, 67, 0.55);
  backdrop-filter: blur(30px);
  border-radius: 20px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  place-items: center;
}
.cc-dnd-group { flex: 0 0 84px; display: flex; align-items: center; justify-content: center; }
.cc-toggle {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(120, 120, 128, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cc-toggle.cc-big { width: 56px; height: 56px; }
.cc-toggle.on#cc-airplane { background: #ff9500; }
.cc-toggle.on#cc-cell { background: #30d158; }
.cc-toggle.on#cc-wifi { background: #0a84ff; }
.cc-toggle.on#cc-bt { background: #0a84ff; }
.cc-toggle.on#cc-dnd { background: #5e5ce6; }
.cc-signal i { background: #fff; }
.cc-tile {
  flex: 1;
  height: 72px;
  border-radius: 20px;
  border: none;
  background: rgba(60, 60, 67, 0.55);
  backdrop-filter: blur(30px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cc-tile.cc-flashlight.on { background: #fff; color: #000; }
.cc-slider-row {
  background: rgba(60, 60, 67, 0.55);
  backdrop-filter: blur(30px);
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-slider-icon { color: rgba(255, 255, 255, 0.85); display: flex; flex-shrink: 0; }
.cc-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
}
.cc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.cc-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: #fff;
}
.device.airplane .sb-signal,
.device.airplane .sb-wifi { display: none; }
.device.airplane .sb-right::before {
  content: "\2708\FE0F";
  font-size: 12px;
}

/* ---- Phone (Calls) app ---- */
.phone-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  flex-shrink: 0;
}
.phone-tab {
  flex: 1;
  border: none;
  background: rgba(120, 120, 128, 0.16);
  color: var(--sub);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 10px;
  cursor: pointer;
}
.phone-tab.active { background: #0a84ff; color: #fff; }
.phone-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.phone-display {
  flex-shrink: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--text);
  padding: 8px 16px;
  word-break: break-all;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 4px 24px;
}
.key {
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: rgba(120, 120, 128, 0.16);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  gap: 2px;
}
.key span { font-size: 22px; }
.key small {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--sub);
}
.key:active { background: rgba(120, 120, 128, 0.32); }
.keypad-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px 20px;
  flex-shrink: 0;
}
.keypad-spacer { width: 52px; }
.call-fab {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: none;
  background: #30d158;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(48, 209, 88, 0.4);
}
.key-del {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
}
.recents-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px;
}
.recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(120, 120, 128, 0.16);
}
.recent-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #8e8e93;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.recent-info { flex: 1; min-width: 0; }
.recent-name { font-size: 15px; color: var(--text); font-weight: 500; }
.recent-meta { font-size: 12px; color: var(--sub); }
.recent-meta.missed { color: #ff3b30; }
.recents-empty { text-align: center; color: var(--sub); padding: 40px 20px; font-size: 14px; }

/* ---- Snake ---- */
.snake-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px 24px;
  min-height: 0;
}
.snake-scores {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--sub);
  flex-shrink: 0;
}
.snake-scores b { color: var(--text); }
#snake-canvas {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  background: #1c1c1e;
  border-radius: 16px;
}
.snake-body-wrap { position: relative; }
.snake-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  text-align: center;
}
.snake-start-btn {
  border: none;
  background: #30d158;
  color: #fff;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 6px;
  flex-shrink: 0;
}
.dpad-btn {
  border: none;
  background: rgba(120, 120, 128, 0.16);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}
.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 2; }
.dpad-btn:active { background: rgba(120, 120, 128, 0.32); }

/* ---- Piano ---- */
.piano-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 16px;
  gap: 4px;
  min-height: 0;
}
.piano-key {
  flex: 1;
  border: 1px solid rgba(120, 120, 128, 0.25);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  font-size: 11px;
  color: #8e8e93;
  user-select: none;
}
.piano-key:active, .piano-key.active { background: #d6e9ff; }

/* ---- Compass ---- */
.compass-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
}
.compass-heading {
  font-size: 56px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.compass-heading-label {
  font-size: 13px;
  color: var(--sub);
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.compass-dial-wrap {
  position: relative;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  margin-bottom: 18px;
}
.compass-dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2c2c2e, #1c1c1e 70%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease-out;
}
.compass-tick {
  position: absolute;
  font-size: 13px;
  font-weight: 600;
  color: var(--sub);
}
.compass-n { top: 10px; left: 50%; transform: translateX(-50%); color: #ff453a; }
.compass-e { right: 10px; top: 50%; transform: translateY(-50%); }
.compass-s { bottom: 10px; left: 50%; transform: translateX(-50%); }
.compass-w { left: 10px; top: 50%; transform: translateY(-50%); }
.compass-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.compass-center-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e5e5ea;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.compass-status {
  font-size: 13px;
  color: var(--sub);
  text-align: center;
  cursor: pointer;
}

/* ---- Voice Memos ---- */
.memos-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}
.memo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(120, 120, 128, 0.16);
}
.memo-play-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: #ff453a;
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.memo-info { flex: 1; min-width: 0; }
.memo-name { font-size: 15px; color: var(--text); font-weight: 500; }
.memo-meta { font-size: 12px; color: var(--sub); }
.memo-delete-btn {
  border: none;
  background: transparent;
  color: var(--sub);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.memos-empty { text-align: center; color: var(--sub); padding: 40px 20px; font-size: 14px; }
.memos-record-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0 26px;
}
.memos-record-time {
  font-size: 13px;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.memos-record-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.memos-record-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #ff453a;
  transition: border-radius 0.15s, width 0.15s, height 0.15s;
}
.memos-record-btn.recording .memos-record-dot {
  width: 24px; height: 24px;
  border-radius: 6px;
}

/* ---- Nature Cams ---- */
.naturecams-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
}
.naturecams-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(120, 120, 128, 0.16);
  cursor: pointer;
}
.naturecams-row:active { opacity: 0.6; }
.naturecams-thumb {
  width: 52px; height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.naturecams-info { flex: 1; min-width: 0; }
.naturecams-name { font-size: 15px; font-weight: 600; color: var(--text); }
.naturecams-desc { font-size: 12.5px; color: var(--sub); }
.naturecams-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff453a;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255, 69, 58, 0.8);
  animation: naturecams-pulse 1.4s ease-in-out infinite;
}
@keyframes naturecams-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.naturecams-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
}
.naturecams-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.naturecams-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.naturecams-caption {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--sub);
  text-align: center;
}

/* ---- Cyber intro: "Welcome to Cayden's Cyber Network" ---- */
.boot-screen {
  background: radial-gradient(circle at 50% 42%, #1c1d22, #0a0a0c 70%);
  gap: 0;
  animation: boot-out 0.7s ease-in 2.6s forwards;
}
.boot-matrix { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.boot-scan {
  position: absolute; left: 0; right: 0; height: 120px; top: -120px;
  background: linear-gradient(180deg, transparent, rgba(0, 255, 160, 0.14), transparent);
  animation: boot-scan 3.2s linear infinite;
  pointer-events: none;
}
@keyframes boot-scan { to { top: 100%; } }
.boot-terminal {
  position: absolute; top: 56px; left: 18px; right: 18px;
  font: 600 11.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #19ff9c;
  text-shadow: 0 0 8px rgba(25, 255, 156, 0.7);
  white-space: pre-wrap;
}
.boot-terminal .ok { color: #7dffd0; }
.boot-terminal .cursor::after { content: "\2588"; animation: boot-cursor 0.8s steps(1) infinite; margin-left: 2px; }
@keyframes boot-cursor { 50% { opacity: 0; } }
.boot-title {
  position: relative; z-index: 2; text-align: center; padding: 0 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 40px;
}
.boot-title-1, .boot-title-2 {
  font: 800 16px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 4px; color: #19ff9c; opacity: 0;
  text-shadow: 0 0 14px rgba(25, 255, 156, 0.8);
  position: relative;
  animation: boot-glitch-in 0.9s steps(8, end) 2.3s forwards;
}
.boot-title-2 {
  font-size: 24px; letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 18px rgba(25, 255, 156, 0.9), 0 0 36px rgba(0, 200, 255, 0.5);
  animation-delay: 2.7s;
}
.boot-title-2::before, .boot-title-2::after {
  content: attr(data-text); position: absolute; left: 0; right: 0; top: 0;
  overflow: hidden; pointer-events: none;
}
.boot-title-2::before { color: #ff2d95; transform: translateX(-2px); clip-path: inset(0 0 55% 0); animation: boot-glitch-a 2.6s steps(1) 3.6s infinite; }
.boot-title-2::after  { color: #00e5ff; transform: translateX(2px);  clip-path: inset(55% 0 0 0); animation: boot-glitch-b 2.2s steps(1) 3.6s infinite; }
@keyframes boot-glitch-in {
  0% { opacity: 0; transform: translateX(-10px) skewX(12deg); filter: blur(4px); }
  40% { opacity: 1; transform: translateX(6px) skewX(-8deg); }
  70% { transform: translateX(-3px); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes boot-glitch-a { 0%, 86%, 100% { opacity: 0; } 88% { opacity: 1; transform: translateX(-4px); } 92% { opacity: 1; transform: translateX(3px); } }
@keyframes boot-glitch-b { 0%, 80%, 100% { opacity: 0; } 82% { opacity: 1; transform: translateX(4px); } 90% { opacity: 1; transform: translateX(-3px); } }
.boot-shh {
  font-size: 54px; margin-top: 18px; opacity: 0; transform: scale(0.2) rotate(-20deg);
  filter: drop-shadow(0 0 16px rgba(25, 255, 156, 0.7));
  animation: boot-shh-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.5) 3.7s forwards, boot-shh-pulse 1.4s ease-in-out 4.4s infinite;
}
@keyframes boot-shh-pop { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes boot-shh-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.boot-tag {
  font: 600 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(25, 255, 156, 0.7); opacity: 0; animation: boot-tag-in 0.6s ease 4.3s forwards;
}
@keyframes boot-tag-in { to { opacity: 1; } }

/* ---- Cyber login: ACCESS GRANTED / DENIED ---- */
.access-overlay {
  position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; background: rgba(1, 11, 7, 0.88);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-align: center;
  animation: access-in 0.25s ease-out;
}
.access-overlay[hidden] { display: none; }
@keyframes access-in { from { opacity: 0; } to { opacity: 1; } }
.access-title { font-size: 24px; font-weight: 800; letter-spacing: 4px; color: #19ff9c; text-shadow: 0 0 18px rgba(25, 255, 156, 0.9); }
.access-sub { font-size: 11px; letter-spacing: 2px; color: rgba(125, 255, 208, 0.8); min-height: 14px; }
.access-overlay.denied .access-title { color: #ff3b57; text-shadow: 0 0 18px rgba(255, 59, 87, 0.9); animation: access-shake 0.4s; }
.access-overlay.denied .access-sub { color: rgba(255, 120, 140, 0.9); }
@keyframes access-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.access-bar { width: 150px; height: 3px; background: rgba(25, 255, 156, 0.18); border-radius: 3px; overflow: hidden; }
.access-bar span { display: block; height: 100%; width: 0; background: #19ff9c; box-shadow: 0 0 10px #19ff9c; animation: access-fill 0.8s ease-out forwards; }
.access-overlay.denied .access-bar span { background: #ff3b57; box-shadow: 0 0 10px #ff3b57; animation-duration: 0.4s; }
@keyframes access-fill { to { width: 100%; } }
.login-card .secure-line {
  font: 600 10px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(25, 255, 156, 0.75); margin-bottom: 10px;
}

/* ---- Phone revamp: cyber theme, widgets, glass dock, per-user accent ---- */
:root { --me-light: #2b9bff; --me-glow: rgba(10, 132, 255, 0.45); --neon: #19ff9c; }
body.user-emma { --me: #ff4f8b; --me-light: #ff86b0; --me-glow: rgba(255, 79, 139, 0.5); --blob-a: #d6336c; --blob-b: #ff4f8b; --blob-c: #bf5af2; }
body.user-cayden { --me: #0a84ff; --me-light: #2b9bff; --me-glow: rgba(10, 132, 255, 0.45); --blob-a: #5e5ce6; --blob-b: #0a84ff; --blob-c: #0abfdc; }

/* Wallpaper: a perspective grid floor that scrolls toward you + a slow scan line */
.home-bg .grid-floor {
  position: absolute; left: -40%; right: -40%; bottom: 0; height: 52%;
  background-image:
    linear-gradient(var(--me) 1px, transparent 1px),
    linear-gradient(90deg, var(--me) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.22;
  transform: perspective(300px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: grid-slide 4s linear infinite;
}
@keyframes grid-slide { to { background-position: 0 44px, 44px 0; } }
.home-bg .grid-scan {
  position: absolute; left: 0; right: 0; height: 90px; top: -90px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--me) 16%, transparent), transparent);
  animation: boot-scan 7s linear infinite;
}

/* Widgets */
.home-widgets { position: relative; z-index: 1; display: flex; gap: 10px; padding: 6px 0 0; }
.widget {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 22px rgba(0, 0, 0, 0.3);
}
.widget-time { font-size: clamp(22px, 7.5vw, 34px); font-weight: 200; letter-spacing: -1px; line-height: 1; white-space: nowrap; }
.widget-date { font-size: 11px; color: var(--sub); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-hello {
  margin-top: 8px; font: 700 9.5px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 1px; text-transform: uppercase; color: var(--me-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-net-title { font: 800 9.5px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; color: var(--neon); margin-bottom: 7px; }
.widget-net-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-dot { width: 8px; height: 8px; border-radius: 50%; background: #48484a; flex-shrink: 0; }
.net-dot.on { background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: naturecams-pulse 1.8s ease-in-out infinite; }
.widget-net-line { font: 600 9px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1.2px; color: rgba(25, 255, 156, 0.6); margin-top: 6px; text-transform: uppercase; }

.widget-countdown { margin-top: 10px; cursor: pointer; text-align: center; padding: 16px 14px; }
.countdown-num { font-size: 32px; font-weight: 800; color: var(--me-light); letter-spacing: -0.5px; }
.countdown-label { font-size: 12px; color: var(--sub); margin-top: 2px; text-transform: uppercase; letter-spacing: 1px; }
.countdown-edit { display: flex; flex-direction: column; gap: 8px; }
.countdown-edit input {
  background: #1c1c1e; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; color: var(--text); font-size: 14px; outline: none;
}
.countdown-edit input:focus { border-color: var(--me); }
.countdown-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.countdown-edit-actions button {
  border: none; border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.countdown-edit-actions button[type="submit"] { background: var(--me); color: #fff; }
.countdown-edit-actions button#countdown-cancel { background: rgba(255, 255, 255, 0.1); color: var(--sub); }

/* Dock: stronger glass with a neon top edge */
.dock {
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 -1px 0 color-mix(in srgb, var(--me) 55%, transparent), 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* App headers get a neon underline in the signed-in user's color */
.app-topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--me) 45%, var(--border));
  box-shadow: 0 1px 14px color-mix(in srgb, var(--me) 22%, transparent);
}
.app-icon .app-label { letter-spacing: 0.2px; font-weight: 500; }

/* ---- FaceTime revamp: reactions overlay + cyber control bar ---- */
.fx-canvas { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.fx-trigger {
  position: absolute; right: 16px; bottom: 112px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s;
}
.fx-trigger:active { transform: scale(0.9); }
.fx-tray {
  position: absolute; right: 16px; bottom: 166px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px; border-radius: 20px;
  background: rgba(20, 20, 24, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: fx-tray-in 0.2s ease-out;
}
@keyframes fx-tray-in { from { opacity: 0; transform: translateY(8px) scale(0.92); } to { opacity: 1; transform: none; } }
.fx-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.08);
  font-size: 19px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.1s, background 0.1s;
}
.fx-btn:active { transform: scale(0.85); background: rgba(255, 255, 255, 0.2); }

/* Cyber control bar */
.call-controls {
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 color-mix(in srgb, var(--neon) 40%, transparent), 0 10px 26px rgba(0, 0, 0, 0.4);
}
.call-round.neutral.active {
  background: var(--neon);
  color: #04140c;
  box-shadow: 0 0 14px var(--neon);
}

/* ---- Admin app ---- */
.admin-body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 18px 16px; }
.admin-login { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 10px 10px; }
.admin-shield { color: var(--neon); margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(25, 255, 156, 0.6)); }
.admin-login input {
  width: 100%; max-width: 280px;
  background: #1c1c1e; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; color: var(--text); font-size: 15px; outline: none;
  margin-top: 10px; transition: border-color 0.15s;
}
.admin-login input:focus { border-color: var(--neon); }
.admin-login-btn {
  width: 100%; max-width: 280px; margin-top: 14px;
  background: linear-gradient(160deg, #2effb0, var(--neon) 70%);
  color: #04140c; border: none; border-radius: 12px; padding: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(25, 255, 156, 0.4);
}
.admin-login-btn:active { transform: scale(0.98); }
.admin-dashboard { display: flex; flex-direction: column; gap: 14px; }
.admin-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; padding: 14px 16px;
}
.admin-card-title {
  font: 800 10px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--neon); margin-bottom: 10px;
}
.admin-row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--sub); }
.admin-row span:last-child { color: var(--text); font-weight: 600; }
.admin-online-list { display: flex; flex-direction: column; gap: 6px; }
.admin-online-row { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.admin-online-empty { font-size: 13px; color: var(--sub); }
.admin-action {
  border: none; border-radius: 14px; padding: 13px; font-size: 15px; font-weight: 600;
  cursor: pointer; background: rgba(255, 255, 255, 0.08); color: var(--text);
}
.admin-action:active { transform: scale(0.98); }
.admin-danger { background: rgba(255, 59, 48, 0.15); color: #ff6457; }
.admin-ghost { background: transparent; color: var(--sub); }

.admin-broadcast-form { display: flex; gap: 8px; }
.admin-broadcast-form input {
  flex: 1; min-width: 0; background: #1c1c1e; border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 14px; outline: none;
}
.admin-broadcast-form input:focus { border-color: var(--neon); }
.admin-send-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--neon); color: #04140c; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 3px 10px rgba(25, 255, 156, 0.45);
}
.admin-send-btn:active { transform: scale(0.9); }
.admin-online-row { justify-content: space-between; }
.admin-online-row .admin-kick-btn {
  border: none; background: rgba(255, 59, 48, 0.15); color: #ff6457;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  border-radius: 8px; padding: 4px 8px; cursor: pointer;
}

/* ---- Whiteboard ---- */
.wb-canvas-wrap { flex: 1; position: relative; background: #111; overflow: hidden; }
.wb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.wb-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--header-bg); backdrop-filter: blur(20px); border-top: 1px solid var(--border);
}
.wb-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer; flex-shrink: 0; transition: transform 0.1s, border-color 0.1s;
}
.wb-swatch.active { border-color: var(--me); transform: scale(1.15); }
.wb-width { flex: 1; accent-color: var(--me); }

.settings-sub { padding: 0 16px 12px; margin-top: -8px; font-size: 12px; color: var(--sub); }

/* ---- OS-style boot screen (generic "operating system loading", not any
   real OS's trademarked assets — just the familiar four-pane logo + spinner
   + status text shape everyone recognizes) ---- */
.os-boot-logo {
  position: relative;
  width: 64px; height: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  margin-bottom: 36px;
}
.os-logo-pane {
  border-radius: 4px;
  opacity: 0;
  transform: scale(0.4);
  animation: os-pane-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.2) forwards;
}
.os-logo-pane-1 { background: #0a84ff; animation-delay: 0.05s; }
.os-logo-pane-2 { background: #ff453a; animation-delay: 0.15s; }
.os-logo-pane-3 { background: #ffd60a; animation-delay: 0.25s; }
.os-logo-pane-4 { background: #30d158; animation-delay: 0.35s; }
@keyframes os-pane-in { to { opacity: 1; transform: scale(1); } }
.os-boot-spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.85);
  animation: os-spin 0.8s linear infinite;
}
@keyframes os-spin { to { transform: rotate(360deg); } }
.os-boot-text {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.2px;
}

/* ---- Mac-style traffic-light window controls on every app header ---- */
.win-traffic {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 4px 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.win-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.25) inset;
  transition: transform 0.1s, filter 0.1s;
}
.win-dot-red { background: #ff5f57; }
.win-dot-yellow { background: #febc2e; }
.win-dot-green { background: #28c840; }
.win-traffic:active .win-dot { transform: scale(0.85); filter: brightness(0.85); }

/* ---- Power button + menu ---- */
.power-btn {
  border: none; background: none; padding: 0; margin-left: 2px;
  display: flex; align-items: center; cursor: pointer; opacity: 0.9;
}
.power-btn:active { opacity: 0.6; }
.power-menu {
  position: absolute;
  top: 40px; right: 16px;
  z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  min-width: 150px;
  background: rgba(30, 30, 34, 0.85);
  backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: fx-tray-in 0.15s ease-out;
}
.power-menu-item {
  display: flex; align-items: center; gap: 10px;
  border: none; background: none; color: var(--text);
  padding: 9px 10px; border-radius: 9px; font-size: 14px; text-align: left; cursor: pointer;
}
.power-menu-item:active { background: rgba(255, 255, 255, 0.1); }
.power-menu-danger { color: #ff6457; }

/* Restart replays the boot screen without a full page reload */
.boot-screen.replaying { display: flex !important; animation: none; opacity: 1; visibility: visible; transform: none; filter: none; }

/* ---- Find My ---- */
.findmy-body {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 24px;
}
.findmy-radar {
  position: relative; width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.findmy-radar-ring {
  position: absolute; border: 1px solid rgba(255, 69, 58, 0.3); border-radius: 50%;
}
.findmy-radar-ring.r1 { width: 60px; height: 60px; }
.findmy-radar-ring.r2 { width: 120px; height: 120px; }
.findmy-radar-ring.r3 {
  width: 180px; height: 180px;
  animation: findmy-sweep 2.4s ease-out infinite;
}
@keyframes findmy-sweep {
  0% { transform: scale(0.3); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0; }
}
.findmy-radar-center {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--me, #0a84ff); box-shadow: 0 0 12px var(--me, #0a84ff);
}
.findmy-radar-peer {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: #ff453a; box-shadow: 0 0 10px #ff453a;
  transition: top 0.6s ease, left 0.6s ease;
  top: 50%; left: 50%;
}
.findmy-distance { font-size: 26px; font-weight: 300; color: var(--text); }
.findmy-sub { font-size: 13px; color: var(--sub); text-align: center; max-width: 260px; }
.findmy-toggle {
  margin-top: 10px; padding: 12px 26px; border-radius: 22px; border: none;
  background: var(--neon, #19ff9c); color: #04140c; font-weight: 700; font-size: 14px;
  cursor: pointer; box-shadow: 0 4px 16px rgba(25, 255, 156, 0.4);
}
.findmy-toggle.on { background: #ff453a; color: #fff; box-shadow: 0 4px 16px rgba(255, 69, 58, 0.4); }
.findmy-toggle:active { transform: scale(0.97); }
.findmy-meta { width: 100%; max-width: 280px; margin-top: 18px; }
.findmy-meta-row {
  display: flex; justify-content: space-between; font-size: 13px;
  color: var(--sub); padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.findmy-meta-row span:last-child { color: var(--text); font-weight: 600; }

/* ---- Nature Cams: Watch Together ---- */
.naturecams-together-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08); color: var(--sub);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.naturecams-together-btn.on { background: var(--neon, #19ff9c); color: #04140c; }
.naturecams-together-banner {
  flex-shrink: 0; padding: 10px 16px; font-size: 12.5px; font-weight: 600;
  text-align: center; color: var(--neon, #19ff9c);
  background: rgba(25, 255, 156, 0.08); border-bottom: 1px solid rgba(25, 255, 156, 0.2);
}

/* ---- OS skin switcher: iOS / Windows / macOS ---- */
.theme-btn {
  border: none; background: none; padding: 0; margin-left: 2px;
  display: flex; align-items: center; cursor: pointer; opacity: 0.9; color: #fff;
}
.theme-btn:active { opacity: 0.6; }

/* iOS: back chevron instead of window dots, big squircle icons */

/* Windows: caption buttons top-right, squarer tiles, edge-to-edge taskbar */
body[data-os-theme="windows"] .app-topbar .win-traffic { order: 3; gap: 2px; padding: 0; }
body[data-os-theme="windows"] .app-topbar-spacer { display: none; }
body[data-os-theme="windows"] .app-topbar .app-title { text-align: left; }
body[data-os-theme="windows"] .win-dot {
  width: 30px; height: 22px; border-radius: 4px; box-shadow: none;
  background: rgba(255, 255, 255, 0.08); position: relative;
}
body[data-os-theme="windows"] .win-dot::after {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
}
body[data-os-theme="windows"] .win-dot-red { order: 3; }
body[data-os-theme="windows"] .win-dot-red::after { content: "\2715"; }
body[data-os-theme="windows"] .win-dot-red:hover { background: #e81123; }
body[data-os-theme="windows"] .win-dot-yellow { order: 1; }
body[data-os-theme="windows"] .win-dot-yellow::after { content: "\2013"; }
body[data-os-theme="windows"] .win-dot-green { order: 2; }
body[data-os-theme="windows"] .win-dot-green::after { content: "\25A1"; }
body[data-os-theme="windows"] .icon-tile { border-radius: 9px; }
body[data-os-theme="windows"] .dock {
  left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none;
  border-radius: 0; padding: 6px 0; border-width: 1px 0 0;
  background: rgba(24, 28, 40, 0.82);
}
body[data-os-theme="windows"] .dock-icon { border-radius: 6px; }
body[data-os-theme="windows"] .dock-icon:hover { background: rgba(255, 255, 255, 0.12); }
body[data-os-theme="windows"] .home-screen { padding-bottom: 64px; }

/* ---- Home screen folders ---- */
.folder-tile { background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px); }
.folder-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 38px; height: 38px; position: relative; z-index: 1; }
.folder-mini-dot { border-radius: 5px; }
.folder-overlay {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px);
  animation: card-in var(--dur-2) var(--ease-out);
}
.folder-panel {
  width: min(460px, calc(100% - 36px)); padding: 20px 16px 26px; border-radius: 28px;
  background: rgba(40, 40, 46, 0.7); border: 1px solid rgba(255, 255, 255, 0.12);
}
.folder-title { text-align: center; font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.folder-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 18px 8px; }
body[data-os-theme="windows"] .folder-panel { border-radius: 10px; }
body[data-os-theme="windows"] .folder-mini-dot { border-radius: 2px; }

/* ======================= Desktop OS layer (os.js) ======================= */
.tile-journal { background: linear-gradient(160deg, #ff6482, #d6336c); }
.tile-playlist { background: linear-gradient(160deg, #ff453a, #8e1f1a); }

.dock.taskbar { z-index: 40; }
.dock-start, .dock-tray { display: none; }
.dock-running {
  position: relative; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 12px;
  padding: 5px; cursor: pointer; display: flex;
}
.dock-running .icon-tile { width: 42px; height: 42px; }
.dock-running::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 16px; height: 3px;
  border-radius: 2px; background: var(--me); transform: translateX(-50%);
}
body[data-os-theme="windows"] .dock-start {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  background: none; border: none; border-radius: 6px; cursor: pointer;
}
body[data-os-theme="windows"] .dock-start:hover { background: rgba(255, 255, 255, 0.12); }
body[data-os-theme="windows"] .dock-tray {
  display: flex; align-items: center; gap: 10px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.tray-clock { font-size: 11px; line-height: 1.25; text-align: right; color: #fff; }
.tray-btn, .theme-btn { position: relative; }
.tray-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.bell-badge {
  position: absolute; top: -4px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: #ff3b30; color: #fff; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Floating windows */
body.win-dragging { user-select: none; cursor: grabbing; }
.win-resize { display: none; }
.app-window.windowed {
  inset: auto; padding-top: 0; z-index: 10; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.app-window.windowed .app-topbar, .app-window.windowed .chat-header { cursor: grab; touch-action: none; }
.app-window.windowed .win-resize {
  display: block; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 5;
}
.app-window.windowed.maximized {
  left: 0 !important; top: 0 !important; width: 100% !important; height: calc(100% - 92px) !important; border-radius: 0;
}
body[data-os-theme="windows"] .app-window.windowed { border-radius: 8px; }
body[data-os-theme="windows"] .app-window.windowed.maximized { height: calc(100% - 66px) !important; }
.app-window.windowed.minimized { display: none !important; }

/* Start menu */
.start-scrim { position: absolute; inset: 0; z-index: 55; background: transparent; }
.start-menu {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100% - 28px)); max-height: 72%; display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: 12px; background: rgba(32, 36, 48, 0.9); backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  animation: card-in var(--dur-2) var(--ease-out);
}
.start-search {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text);
  border-radius: 20px; padding: 10px 16px; font-size: 14px; outline: none;
}
.start-search:focus { border-color: var(--me); }
.start-title { font-size: 13px; font-weight: 600; color: var(--sub); }
.start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 10px; overflow-y: auto; padding: 2px; }
.start-app {
  background: none; border: none; color: var(--text); font-size: 11px; border-radius: 8px; padding: 8px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
}
.start-app:hover { background: rgba(255, 255, 255, 0.1); }
.start-app .icon-tile { width: 46px; height: 46px; }
.start-foot {
  display: flex; align-items: center; justify-content: space-between; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.start-user { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.start-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.start-power button {
  background: none; border: none; color: #fff; font-size: 18px; width: 34px; height: 34px; border-radius: 6px; cursor: pointer;
}
.start-power button:hover { background: rgba(255, 255, 255, 0.12); }

/* Notification center */
.notif-center {
  position: absolute; right: 12px; top: 46px; z-index: 60; width: min(340px, calc(100% - 24px)); max-height: 70%;
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: rgba(30, 32, 40, 0.92); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); animation: card-in var(--dur-2) var(--ease-out);
}
.nc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 600; }
.nc-clear { background: none; border: none; color: var(--me); font-size: 12px; cursor: pointer; }
.nc-list { overflow-y: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.nc-item { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 10px 12px; }
.nc-item.unread { border-left: 3px solid var(--me); }
.nc-title { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.nc-title span { font-weight: 400; color: var(--sub); font-size: 11px; }
.nc-text { font-size: 13px; color: #d8d8de; margin-top: 3px; word-break: break-word; }
.nc-empty { text-align: center; color: var(--sub); font-size: 13px; padding: 24px 10px; }

/* Pings */
.mood-pop {
  position: absolute; right: 60px; top: 42px; z-index: 60; display: flex; gap: 4px; padding: 8px;
  border-radius: 24px; background: rgba(30, 32, 40, 0.92); backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14); animation: card-in var(--dur-2) var(--ease-out);
}
.mood-pop button { background: none; border: none; font-size: 24px; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; }
.mood-pop button:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.15); }
.ping-burst { position: absolute; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; }
.ping-burst span { position: absolute; bottom: -60px; animation: ping-rise 2.6s ease-out forwards; }
@keyframes ping-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-110vh) scale(1.2) rotate(18deg); opacity: 0; }
}

/* Journal */
.journal-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.journal-today { background: rgba(255, 255, 255, 0.06); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.journal-today-title { font-weight: 700; font-size: 15px; }
.journal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.journal-slot {
  position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.18); color: var(--sub); font-size: 13px; text-align: center;
}
.journal-slot img { width: 100%; height: 100%; object-fit: cover; }
.journal-slot em { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; font-size: 12px; font-style: normal; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; }
.journal-slot b { position: absolute; left: 0; right: 0; bottom: 14px; font-size: 12px; color: #fff; text-shadow: 0 1px 4px #000; }
.journal-blur { filter: blur(22px) brightness(0.8); transform: scale(1.1); }
#journal-caption { background: #1c1c1e; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; color: var(--text); font-size: 14px; outline: none; }
.journal-post-btn { background: var(--me); color: #fff; border: none; border-radius: 12px; padding: 12px; font-weight: 600; font-size: 14px; cursor: pointer; }
.journal-timeline-title { font-weight: 700; font-size: 14px; color: var(--sub); }
.journal-day { margin-bottom: 14px; }
.journal-day-label { font-size: 12px; color: var(--sub); margin-bottom: 6px; }
.journal-day-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.journal-day-imgs figure { margin: 0; }
.journal-day-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: pointer; }
.journal-day-imgs figcaption { font-size: 11px; color: var(--sub); margin-top: 3px; }
.lightbox { position: absolute; inset: 0; z-index: 9100; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 94%; max-height: 94%; border-radius: 12px; }

/* Playlist */
.playlist-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.playlist-player { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.playlist-player iframe, .playlist-player #playlist-yt { width: 100%; height: 100%; border: 0; }
.playlist-empty { color: var(--sub); font-size: 13px; }
.playlist-controls { display: flex; justify-content: center; gap: 14px; }
.playlist-controls button { width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 18px; cursor: pointer; }
.playlist-controls button:hover { background: var(--me); }
.playlist-form { display: flex; gap: 8px; }
.playlist-form input { flex: 1; min-width: 0; background: #1c1c1e; border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; color: var(--text); font-size: 14px; outline: none; }
.playlist-form button { background: var(--me); color: #fff; border: none; border-radius: 12px; padding: 0 18px; font-weight: 600; cursor: pointer; }
.playlist-queue { display: flex; flex-direction: column; gap: 6px; }
.pl-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.pl-item.now { background: color-mix(in srgb, var(--me) 22%, transparent); }
.pl-item img { width: 64px; height: 36px; border-radius: 6px; object-fit: cover; }
.pl-meta { flex: 1; min-width: 0; }
.pl-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-by { font-size: 11px; color: var(--sub); }
.pl-del { background: none; border: none; color: var(--sub); font-size: 20px; cursor: pointer; }

/* Settings: look picker */
.skin-buttons { display: flex; gap: 6px; }
.skin-buttons button { background: rgba(255, 255, 255, 0.1); color: var(--text); border: 1px solid transparent; border-radius: 10px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.skin-buttons button.active { border-color: var(--me); background: color-mix(in srgb, var(--me) 28%, transparent); }

/* ======================= OS layer 2 (os2.js) ======================= */
.tile-files { background: linear-gradient(160deg, #ffd75e, #e6a100); }
.tile-terminal { background: linear-gradient(160deg, #2c2c2e, #000); }
.tile-taskmgr { background: linear-gradient(160deg, #30d158, #0a7a35); }
.tile-snip { background: linear-gradient(160deg, #5e5ce6, #2f2da8); }
.tile-paint { background: linear-gradient(160deg, #ff9f0a, #ff375f); }

/* Draggable icons */
.app-icon.dragging { opacity: 0.25; }
.icon-ghost { position: fixed; z-index: 99999; pointer-events: none; opacity: 0.92; transform: scale(1.12); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
.app-grid > .app-icon { touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* Chat extras */
.composer-extra { flex-shrink: 0; font-size: 17px; }
.style-btn { font-weight: 700; font-size: 13px; }
.style-btn[data-tstyle="script"] { font-family: "Caveat", cursive; font-size: 20px; }
.style-btn[data-tstyle="neon"] { color: var(--neon, #19ff9c); text-shadow: 0 0 8px var(--neon, #19ff9c); }
.style-btn[data-tstyle="type"] { font-family: "Special Elite", monospace; }
#input[data-tstyle="script"] { font-family: "Caveat", cursive; font-size: 20px; }
#input[data-tstyle="neon"] { color: var(--neon, #19ff9c); }
#input[data-tstyle="type"] { font-family: "Special Elite", monospace; }
.bubble.tstyle-script { font-family: "Caveat", cursive; font-size: 22px; line-height: 1.15; }
.bubble.tstyle-neon { text-shadow: 0 0 6px currentColor, 0 0 14px var(--neon, #19ff9c); font-weight: 600; letter-spacing: 0.3px; }
.bubble.tstyle-type { font-family: "Special Elite", monospace; }
.bubble.sticker-bubble { background: none !important; box-shadow: none !important; font-size: 64px; line-height: 1.1; padding: 0 4px; animation: sticker-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes sticker-pop { from { transform: scale(0.3) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
.link-card { display: flex; flex-direction: column; margin-top: 8px; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.28); text-decoration: none !important; color: inherit; max-width: 260px; }
.link-card img { width: 100%; max-height: 140px; object-fit: cover; }
.link-card-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.link-card-body small { opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; }
.link-card-body b { font-size: 13px; }
.link-card-body span { opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bubble.locpin-bubble { padding: 0; overflow: hidden; }
.locpin-card { display: block; width: 230px; text-decoration: none !important; color: inherit; }
.locpin-map { position: relative; display: block; height: 130px; background-size: cover; background-position: center; }
.locpin-map i { position: absolute; font-style: normal; font-size: 26px; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.locpin-label { display: block; padding: 8px 10px; font-weight: 600; font-size: 13px; }
.locpin-label small { display: block; font-weight: 400; opacity: 0.7; font-size: 11px; }
.row.pinned .bubble { box-shadow: 0 0 0 2px #ffcc00; }
.row.flash .bubble { animation: pin-flash 1.2s ease; }
@keyframes pin-flash { 0%, 100% { filter: none; } 30% { filter: brightness(1.6); } }
.pin-bar { position: relative; z-index: 4; background: rgba(255, 204, 0, 0.12); border-bottom: 1px solid rgba(255, 204, 0, 0.35); }
.pin-summary { width: 100%; background: none; border: none; color: var(--text); text-align: left; padding: 8px 14px; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-summary span { opacity: 0.75; }
.pin-list { max-height: 160px; overflow-y: auto; padding: 0 8px 8px; }
.pin-item { padding: 7px 10px; font-size: 12px; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.06); margin-top: 4px; }
.pin-item b { color: #ffcc00; }
.sticker-pop {
  position: absolute; left: 10px; bottom: 74px; z-index: 40; width: min(330px, calc(100% - 20px)); max-height: 300px;
  display: flex; flex-direction: column; border-radius: 18px; background: rgba(30, 32, 40, 0.95); backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.sp-tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.sp-tabs button { flex: 1; background: none; border: none; color: var(--sub); padding: 7px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.sp-tabs button.active { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.sp-body { overflow-y: auto; padding: 8px; }
.sp-stickers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.sp-stickers button { background: none; border: none; font-size: 28px; padding: 4px; border-radius: 10px; cursor: pointer; }
.sp-stickers button:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.12); }
.sp-search { width: 100%; background: #1c1c1e; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; color: var(--text); outline: none; margin-bottom: 8px; }
.sp-gifgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-gifgrid img { width: 100%; border-radius: 8px; cursor: pointer; }
.widget-net-row.low #peer-bat-text { color: #ff453a; }

/* Files */
.files-body { flex: 1; display: flex; min-height: 0; }
.files-side { width: 170px; flex-shrink: 0; padding: 10px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); overflow-y: auto; }
.files-side button { display: flex; justify-content: space-between; align-items: center; background: none; border: none; color: var(--text); padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; }
.files-side button.active { background: color-mix(in srgb, var(--me) 28%, transparent); }
.files-side small { color: var(--sub); }
.files-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.files-path { padding: 10px 14px; font-size: 12px; color: var(--sub); border-bottom: 1px solid var(--border); }
.files-grid { flex: 1; overflow-y: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; align-content: start; }
.file-item { background: rgba(255, 255, 255, 0.05); border: none; border-radius: 10px; padding: 8px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; text-align: center; }
.file-item:hover { background: rgba(255, 255, 255, 0.12); }
.file-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.file-doc b { font-size: 36px; font-weight: 400; }
.file-pre { max-width: 90%; max-height: 86%; overflow: auto; background: #1c1c1e; color: #eee; padding: 18px; border-radius: 12px; white-space: pre-wrap; font-size: 14px; }
.lb-actions { position: absolute; bottom: 20px; left: 0; right: 0; justify-content: center; }
@media (max-width: 560px) { .files-side { width: 120px; } }

/* Terminal */
.term-body { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0c0c0e; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; color: #d6ffe9; padding: 10px 12px; }
.term-out { flex: 1; overflow-y: auto; }
.term-line { white-space: pre-wrap; word-break: break-word; }
.term-cmd { color: #8ecae6; }
.term-green { color: #19ff9c; }
.term-form { display: flex; gap: 8px; align-items: center; padding-top: 6px; }
.term-prompt { color: #19ff9c; white-space: nowrap; }
.term-form input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font: inherit; }

/* Task Manager */
.tm-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.tm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tm-stat { background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--sub); }
.tm-stat b { color: var(--text); font-size: 16px; }
.tm-title { font-weight: 700; font-size: 13px; color: var(--sub); }
.tm-list { display: flex; flex-direction: column; gap: 6px; }
.tm-row { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 40px 76px; gap: 8px; align-items: center; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.tm-name { font-weight: 600; }
.tm-status { color: var(--sub); }
.tm-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.tm-bar i { display: block; height: 100%; background: var(--me); }
.tm-row button { background: rgba(255, 59, 48, 0.2); color: #ff6b61; border: none; border-radius: 8px; padding: 5px 8px; cursor: pointer; font-size: 11px; }

/* Paint */
.paint-body { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #2a2a2e; }
.paint-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; background: rgba(0, 0, 0, 0.25); }
.paint-tools button { background: rgba(255, 255, 255, 0.1); color: #fff; border: none; border-radius: 8px; min-width: 34px; height: 34px; cursor: pointer; font-size: 16px; padding: 0 8px; }
.paint-tools button.active { background: var(--me); }
.paint-tools .paint-act { font-size: 12px; font-weight: 600; }
.paint-tools input[type="color"] { width: 34px; height: 34px; border: none; padding: 0; background: none; cursor: pointer; }
.paint-tools input[type="range"] { width: 90px; }
.paint-swatches { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; }
.paint-swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); cursor: pointer; padding: 0; }
.paint-canvas-wrap { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 10px; }
#paint-canvas { width: 100%; max-width: 900px; height: auto; background: #fff; border-radius: 6px; touch-action: none; cursor: crosshair; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }

/* Snip */
.snip-overlay { position: fixed; inset: 0; z-index: 99990; background: rgba(0, 0, 0, 0.72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-family: inherit; color: #fff; }
.snip-bar { display: flex; gap: 8px; align-items: center; background: rgba(30, 32, 40, 0.95); padding: 8px 12px; border-radius: 14px; font-size: 13px; }
.snip-bar button, .snip-actions button { background: rgba(255, 255, 255, 0.14); color: #fff; border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 12px; }
.snip-bar button:hover, .snip-actions button:hover { background: var(--me, #0a84ff); }
.snip-stage { position: relative; line-height: 0; }
.snip-stage canvas { cursor: crosshair; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.snip-sel { position: absolute; border: 2px dashed #fff; background: rgba(255, 255, 255, 0.12); pointer-events: none; }
.snip-result { position: fixed; z-index: 99991; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 92vw; max-height: 90vh; background: rgba(30, 32, 40, 0.97); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; padding: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.snip-result img { max-width: 80vw; max-height: 60vh; border-radius: 8px; }
.snip-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Animated wallpapers */
.device[data-wallpaper="aurora"] .lock-bg, .device[data-wallpaper="aurora"] .home-bg {
  background: linear-gradient(120deg, #05122b, #0b3d4a, #3a1b6b, #0a5f4a, #05122b); background-size: 400% 400%; animation: wp-shift 18s ease infinite;
}
.device[data-wallpaper="aurora"] .blob { opacity: 0.22; }
@keyframes wp-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.device[data-wallpaper="waves"] .lock-bg, .device[data-wallpaper="waves"] .home-bg {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'><path d='M0 100 Q150 40 300 100 T600 100 T900 100 T1200 100 V200 H0Z' fill='%230a84ff' fill-opacity='0.35'/></svg>") repeat-x 0 78% / 1200px 200px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'><path d='M0 110 Q150 170 300 110 T600 110 T900 110 T1200 110 V200 H0Z' fill='%2300d4ff' fill-opacity='0.3'/></svg>") repeat-x 0 88% / 1200px 200px,
    linear-gradient(180deg, #04162e, #0a3a6b);
  animation: wp-waves 14s linear infinite;
}
.device[data-wallpaper="waves"] .blob { opacity: 0.12; }
@keyframes wp-waves { from { background-position: 0 78%, 0 88%, 0 0; } to { background-position: 1200px 78%, -1200px 88%, 0 0; } }
.device[data-wallpaper="stars"] .lock-bg, .device[data-wallpaper="stars"] .home-bg {
  background: radial-gradient(circle at 50% 120%, #3a2a7a, #0b0b2b 60%, #03030f);
}
.device[data-wallpaper="stars"] .lock-bg::before, .device[data-wallpaper="stars"] .home-bg::before {
  content: ""; position: absolute; inset: 0; opacity: 0.9; animation: wp-twinkle 4s ease-in-out infinite;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(2px 2px at 44% 30%, #cfe3ff, transparent),
    radial-gradient(1px 1px at 61% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 76% 22%, #fff, transparent), radial-gradient(1px 1px at 88% 55%, #ffe9c7, transparent),
    radial-gradient(2px 2px at 8% 85%, #fff, transparent), radial-gradient(1px 1px at 52% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 93% 90%, #fff, transparent), radial-gradient(1px 1px at 35% 45%, #fff, transparent);
}
.device[data-wallpaper="stars"] .blob { opacity: 0.18; }
@keyframes wp-twinkle { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.55; } }
.device[data-wallpaper="lava"] { --blob-a: #ff3d00; --blob-b: #ffb300; --blob-c: #ff1744; }
.device[data-wallpaper="lava"] .lock-bg, .device[data-wallpaper="lava"] .home-bg { background: #1a0500; }
.device[data-wallpaper="lava"] .blob { opacity: 0.8; filter: blur(48px); }
.device[data-wallpaper="lava"] .blob-a { animation-duration: 7s; }
.device[data-wallpaper="lava"] .blob-b { animation-duration: 9s; }
.device[data-wallpaper="lava"] .blob-c { animation-duration: 6s; }

/* ---- Light mode (per look) ---- */
body[data-mode="light"] {
  --phone-bg: #f2f2f7; --header-bg: rgba(250, 250, 252, 0.92); --border: #d1d1d6; --them: #e5e5ea;
  --text: #111113; --sub: #6e6e73;
}
body[data-mode="light"] .app-window { color: var(--text); }
body[data-mode="light"] input[type="text"], body[data-mode="light"] input[type="password"], body[data-mode="light"] input[type="date"],
body[data-mode="light"] textarea, body[data-mode="light"] #journal-caption, body[data-mode="light"] .playlist-form input,
body[data-mode="light"] .sp-search { background: #fff !important; color: var(--text); border-color: var(--border); }
body[data-mode="light"] .chat-bg { opacity: 0.25; }
body[data-mode="light"] .bubble.them { color: #111; }
body[data-mode="light"] .composer, body[data-mode="light"] .search-bar { background: rgba(250, 250, 252, 0.94); }
body[data-mode="light"] .settings-row, body[data-mode="light"] .note-item, body[data-mode="light"] .journal-today,
body[data-mode="light"] .tm-stat, body[data-mode="light"] .tm-row, body[data-mode="light"] .pl-item, body[data-mode="light"] .file-item,
body[data-mode="light"] .nc-item { background: rgba(0, 0, 0, 0.05); }
body[data-mode="light"] .app-topbar, body[data-mode="light"] .chat-header { color: var(--text); }
body[data-mode="light"] .start-menu, body[data-mode="light"] .notif-center, body[data-mode="light"] .sticker-pop,
body[data-mode="light"] .mood-pop, body[data-mode="light"] .folder-panel { background: rgba(250, 250, 253, 0.94); color: var(--text); }
body[data-mode="light"] .start-app, body[data-mode="light"] .start-power button, body[data-mode="light"] .nc-text { color: var(--text); }
body[data-mode="light"] .files-side button, body[data-mode="light"] .file-item { color: var(--text); }
body[data-mode="light"] .tm-stat b, body[data-mode="light"] .tm-name { color: var(--text); }
body[data-mode="light"] .journal-slot, body[data-mode="light"] .journal-day-label { color: var(--sub); }
body[data-mode="light"] .app-window.windowed { border-color: rgba(0, 0, 0, 0.18); }
body[data-mode="light"] .win-traffic .win-dot { box-shadow: none; }
body[data-os-theme="windows"][data-mode="light"] .win-dot { background: rgba(0, 0, 0, 0.08); }
body[data-os-theme="windows"][data-mode="light"] .win-dot::after { color: #111; }
body[data-mode="light"] .calc-display { color: var(--text); }
body[data-mode="light"] .paint-body { background: #d8d8de; }

/* Compact countdown widget */
.widget-countdown { flex: 0 0 auto; margin-top: 8px; padding: 8px 14px; }
.countdown-view { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.countdown-num { font-size: 22px; line-height: 1.1; }
.countdown-label { margin-top: 0; font-size: 11px; }

/* FaceTime mini window (call keeps running while you use other apps) */
.call.minimized {
  inset: auto; right: 16px; bottom: 90px; width: 240px; height: 160px; border-radius: 16px; z-index: 45;
  border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); cursor: grab;
}
.call.minimized .call-controls, .call.minimized .fx-trigger, .call.minimized #fx-tray,
.call.minimized .local-video, .call.minimized .fx-canvas, .call.minimized .call-status { display: none !important; }
.call-mini-bar { display: none; }
.call.minimized .call-mini-bar {
  display: flex; position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; gap: 10px; padding: 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); z-index: 5;
}
.call-mini-bar button { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 15px; cursor: pointer; }
.call-mini-bar button.end { background: #ff3b30; }

/* ======================= OS layer 3 (os3.js) ======================= */
.tile-bin { background: linear-gradient(160deg, #8e8e93, #3a3a3c); }
.dock-taskview { display: none; background: none; border: none; border-radius: 8px; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; }
.dock-taskview:hover { background: rgba(255, 255, 255, 0.12); }
body.is-windowed .dock-taskview { display: flex; }

/* Virtual desktops */
.taskview { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); animation: card-in var(--dur-2) var(--ease-out); padding-bottom: 80px; }
.tv-title { font-size: 15px; font-weight: 600; color: #fff; }
.tv-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
.tv-card { position: relative; width: 170px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.tv-prev { height: 104px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.2); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.tv-prev span { background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 8px 8px 0 0; }
.tv-card.active .tv-prev { border-color: var(--me); box-shadow: 0 0 0 3px color-mix(in srgb, var(--me) 40%, transparent); }
.tv-name { text-align: center; color: #fff; font-size: 12px; }
.tv-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: none; background: #ff3b30; color: #fff; font-size: 16px; cursor: pointer; display: none; line-height: 1; }
.tv-card:hover .tv-x { display: block; }
.tv-new { width: 170px; height: 104px; border-radius: 12px; border: 2px dashed rgba(255, 255, 255, 0.35); background: none; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; }
.tv-new b { font-size: 26px; font-weight: 300; }
.tv-new:hover { background: rgba(255, 255, 255, 0.1); }
.home-screen.desk-slide-r { animation: desk-in-r 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.home-screen.desk-slide-l { animation: desk-in-l 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes desk-in-r { from { transform: translateX(14%); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes desk-in-l { from { transform: translateX(-14%); opacity: 0.2; } to { transform: none; opacity: 1; } }

/* Context menus */
.ctx-menu { position: fixed; z-index: 99980; min-width: 210px; padding: 6px; border-radius: 12px; background: rgba(34, 36, 46, 0.96); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55); color: #f2f2f7; font-size: 13px; animation: card-in var(--dur-2) var(--ease-out); }
.ctx-menu.ctx-sub { position: absolute; z-index: 99981; max-height: 60vh; overflow-y: auto; }
.ctx-item { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: none; background: none; color: inherit; border-radius: 7px; cursor: pointer; font: inherit; text-align: left; }
.ctx-item:hover:not(:disabled) { background: color-mix(in srgb, var(--me, #0a84ff) 55%, transparent); }
.ctx-item:disabled { opacity: 0.4; cursor: default; }
.ctx-item.danger { color: #ff6b61; }
.ctx-ico { width: 18px; text-align: center; flex-shrink: 0; }
.ctx-label { flex: 1; white-space: nowrap; }
.ctx-item kbd { font: 11px ui-monospace, monospace; opacity: 0.55; }
.ctx-arrow { opacity: 0.6; font-style: normal; }
.ctx-sep { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 5px 6px; }
body[data-mode="light"] .ctx-menu { background: rgba(250, 250, 253, 0.97); color: #111; border-color: rgba(0, 0, 0, 0.14); }
body[data-mode="light"] .ctx-sep { background: rgba(0, 0, 0, 0.12); }
body[data-os-theme="windows"] .ctx-menu { border-radius: 8px; }

/* Recycle Bin */
.bin-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.bin-toolbar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.bin-spacer { flex: 1; }
.bin-toolbar button, .bin-row button { background: rgba(255, 255, 255, 0.12); color: var(--text); border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.bin-toolbar button.danger, .bin-row button.danger { background: rgba(255, 59, 48, 0.2); color: #ff6b61; }
.bin-list { display: flex; flex-direction: column; gap: 6px; }
.bin-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 8px 10px; }
.bin-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.bin-row > b { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 400; }
.bin-meta { flex: 1; min-width: 0; }
.bin-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bin-sub { font-size: 11px; color: var(--sub); }

/* ======================= AI Assistant (os4.js) ======================= */
.tile-assistant { background: linear-gradient(160deg, #bf5af2, #5e5ce6); }
.ai-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-break: break-word; }
.ai-msg.user { align-self: flex-end; background: var(--me); color: #fff; border-bottom-right-radius: 5px; }
.ai-msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.08); border-bottom-left-radius: 5px; }
.ai-msg pre { background: rgba(0, 0, 0, 0.4); color: #d6ffe9; padding: 9px 11px; border-radius: 10px; overflow-x: auto; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; margin: 6px 0; white-space: pre; }
.ai-msg code { background: rgba(0, 0, 0, 0.3); padding: 1px 5px; border-radius: 5px; font: 12px ui-monospace, Menlo, Consolas, monospace; }
.ai-msg pre code { background: none; padding: 0; }
.ai-msg.typing::after { content: "▍"; animation: ai-blink 1s steps(2) infinite; }
@keyframes ai-blink { 50% { opacity: 0; } }
.ai-hello { text-align: center; color: var(--sub); font-size: 13px; padding: 26px 14px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.ai-chips button { background: rgba(255, 255, 255, 0.1); color: var(--text); border: none; border-radius: 14px; padding: 7px 12px; font-size: 12px; cursor: pointer; }
.ai-chips button:hover { background: var(--me); color: #fff; }
.ai-status { min-height: 16px; padding: 0 16px; font-size: 11px; color: var(--sub); text-align: center; }
.ai-form { display: flex; gap: 8px; padding: 8px 12px 14px; }
.ai-form input { flex: 1; min-width: 0; background: #1c1c1e; border: 1px solid var(--border); border-radius: 18px; padding: 11px 15px; color: var(--text); font-size: 14px; outline: none; }
.ai-form input:focus { border-color: var(--me); }
.ai-send { background: var(--me); color: #fff; border: none; border-radius: 18px; padding: 0 18px; font-weight: 600; cursor: pointer; }
.ai-send:disabled { opacity: 0.5; }
.ai-new { background: rgba(255, 255, 255, 0.1); color: var(--text); border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 16px; }
body[data-mode="light"] .ai-msg.bot, body[data-mode="light"] .ai-chips button { background: rgba(0, 0, 0, 0.07); color: var(--text); }
body[data-mode="light"] .ai-form input { background: #fff; color: var(--text); }

/* AI assistant: customization + images */
.ai-body { position: relative; }
.ai-msg img { display: block; max-width: 220px; max-height: 180px; border-radius: 10px; margin-bottom: 6px; object-fit: cover; }
.ai-msg .ai-who { font-size: 11px; opacity: 0.6; margin-bottom: 3px; }
.ai-pending { display: flex; gap: 8px; padding: 6px 14px 0; overflow-x: auto; }
.ai-thumb { position: relative; flex-shrink: 0; }
.ai-thumb img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; }
.ai-thumb button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #ff3b30; color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.ai-body.ai-drop::after { content: "Drop an image to ask about it"; position: absolute; inset: 8px; border: 2px dashed var(--me); border-radius: 16px; background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; z-index: 5; pointer-events: none; }
.ai-settings { position: absolute; inset: 0; z-index: 6; background: var(--phone-bg); overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ai-set-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.ai-set-head button, .ai-reset { background: var(--me); color: #fff; border: none; border-radius: 10px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.ai-reset { background: rgba(255, 255, 255, 0.1); color: var(--text); align-self: flex-start; }
.ai-settings label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--sub); }
.ai-settings input, .ai-settings select, .ai-settings textarea { background: #1c1c1e; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.ai-settings input:focus, .ai-settings select:focus, .ai-settings textarea:focus { border-color: var(--me); }
body[data-mode="light"] .ai-settings input, body[data-mode="light"] .ai-settings select, body[data-mode="light"] .ai-settings textarea { background: #fff; color: var(--text); }

/* Assistant replies inside the shared chat */
.bubble.ai-bubble { background: linear-gradient(135deg, rgba(191, 90, 242, 0.35), rgba(94, 92, 230, 0.35)) !important; border: 1px solid rgba(191, 90, 242, 0.55); }

.countdown-edit-actions button[type="button"] { background: rgba(255, 255, 255, 0.1); color: var(--sub); }

/* ======================= Administrator ======================= */
body.user-admin { --me: #ffb800; --me-light: #ffd24d; --me-glow: rgba(255, 184, 0, 0.5); --blob-a: #b8860b; --blob-b: #ffb800; --blob-c: #ff3d00; }
.profile-avatar-admin { background: linear-gradient(160deg, #ffd24d, #e08600); color: #1a1000; }
.signin-avatar-admin { background: linear-gradient(160deg, #ffd24d, #e08600); color: #1a1000; }
.tile-cc { background: linear-gradient(160deg, #ffb800, #c93a00); }
.profile-card { width: min(380px, calc(100vw - 32px)); }
.profile-options { flex-wrap: wrap; }
.profile-btn { min-width: 86px; }
.profile-btn span:last-child { font-size: 12px; }

/* ======================= Administrator layer (os6.js) ======================= */
.fx-global { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99970; opacity: 0; transition: opacity 0.2s; }
.fx-rainbow { animation: fx-hue 2.5s linear infinite; }
@keyframes fx-hue { to { filter: hue-rotate(360deg); } }
.fx-glitch { animation: fx-glitch 0.35s steps(2, end) infinite; }
@keyframes fx-glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-6px, 2px) skewX(3deg); filter: hue-rotate(90deg) saturate(2); }
  40% { transform: translate(5px, -3px); filter: invert(0.15) contrast(1.4); }
  60% { transform: translate(-3px, 4px) skewX(-4deg); filter: hue-rotate(-60deg); }
  80% { transform: translate(7px, 0); filter: saturate(3); }
  100% { transform: translate(0); filter: none; }
}
.fx-quake { animation: fx-quake 0.12s linear infinite; }
@keyframes fx-quake {
  0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-7px, 5px) rotate(-0.6deg); }
  50% { transform: translate(6px, -6px) rotate(0.5deg); } 75% { transform: translate(-5px, -4px) rotate(-0.4deg); } 100% { transform: translate(4px, 6px) rotate(0.6deg); }
}
.fx-blackout { position: fixed; inset: 0; z-index: 99969; background: #000; pointer-events: none; animation: fx-black 5s ease-in-out forwards; }
@keyframes fx-black { 0% { opacity: 0; } 8% { opacity: 1; } 14% { opacity: 0.2; } 20% { opacity: 1; } 28% { opacity: 0.5; } 34%, 82% { opacity: 1; } 100% { opacity: 0; } }
.fx-spookyfilter { animation: fx-spooky-f 1.6s ease-in-out infinite; }
@keyframes fx-spooky-f { 0%, 100% { filter: contrast(1.15) saturate(0.45) brightness(0.8); } 50% { filter: contrast(1.3) saturate(0.2) brightness(0.55) hue-rotate(-25deg); } }
.fx-spooky { position: fixed; inset: 0; z-index: 99969; pointer-events: none; overflow: hidden; background: radial-gradient(circle at center, transparent 40%, rgba(120, 0, 0, 0.55)); }
.fx-spooky span { position: absolute; bottom: -80px; opacity: 0; animation: ghost-float 6s ease-in-out infinite; }
@keyframes ghost-float { 0% { transform: translateY(0) rotate(-6deg); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translateY(-115vh) rotate(8deg); opacity: 0; } }
.fx-siren { position: fixed; inset: 0; z-index: 99969; pointer-events: none; animation: fx-siren 0.9s steps(1) infinite; }
@keyframes fx-siren { 0% { background: radial-gradient(circle at 0 50%, rgba(255, 0, 40, 0.6), transparent 60%); } 50% { background: radial-gradient(circle at 100% 50%, rgba(0, 90, 255, 0.6), transparent 60%); } }
.fx-cinema { position: fixed; inset: 0; z-index: 99969; pointer-events: none; display: flex; align-items: center; justify-content: center; animation: fx-cine-fade 6s ease forwards; }
.fx-cinema i { position: absolute; left: 0; right: 0; height: 14vh; background: #000; }
.fx-cinema i.top { top: 0; animation: cine-top 6s ease forwards; } .fx-cinema i.bot { bottom: 0; animation: cine-bot 6s ease forwards; }
.fx-cinema b { position: relative; color: #fff; font: 600 clamp(22px, 4vw, 44px) Georgia, serif; letter-spacing: 6px; text-transform: uppercase; text-shadow: 0 0 22px rgba(255, 255, 255, 0.7); animation: cine-text 6s ease forwards; }
@keyframes cine-top { 0% { transform: translateY(-100%); } 12%, 85% { transform: none; } 100% { transform: translateY(-100%); } }
@keyframes cine-bot { 0% { transform: translateY(100%); } 12%, 85% { transform: none; } 100% { transform: translateY(100%); } }
@keyframes cine-text { 0%, 12% { opacity: 0; letter-spacing: 18px; } 30%, 78% { opacity: 1; letter-spacing: 6px; } 100% { opacity: 0; } }
@keyframes fx-cine-fade { 0%, 100% { opacity: 1; } }

.admin-banner {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 99975; width: min(560px, calc(100vw - 28px));
  display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 20px; color: #1a1000;
  background: linear-gradient(135deg, #ffd24d, #ff9d00); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.35) inset;
  animation: banner-in 0.5s cubic-bezier(0.2, 1.2, 0.3, 1); cursor: pointer;
}
.admin-banner.out { opacity: 0; transform: translate(-50%, -30px); transition: all 0.4s; }
.admin-banner .ab-ico { font-size: 34px; }
.admin-banner small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.7; }
.admin-banner b { font-size: 18px; line-height: 1.3; }
@keyframes banner-in { from { transform: translate(-50%, -120px) scale(0.9); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

.poll-card {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99960; width: min(420px, calc(100vw - 28px));
  padding: 16px; border-radius: 20px; background: rgba(30, 32, 40, 0.96); backdrop-filter: blur(24px); color: #f2f2f7;
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); animation: card-in var(--dur-2) var(--ease-out);
}
.poll-q { font-weight: 700; margin-bottom: 10px; }
.poll-opt { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 14px; cursor: pointer; overflow: hidden; text-align: left; }
.poll-opt.mine { border-color: var(--me); }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--me, #ffb800) 35%, transparent); transition: width 0.5s ease; }
.poll-label, .poll-opt b { position: relative; }
.poll-foot { font-size: 11px; color: #9a9aa5; text-align: center; margin-top: 2px; }
.poll-foot a { color: var(--me); }

/* Command Center */
.cc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.cc-tabs { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: -12px; z-index: 3; padding: 8px 0; background: var(--phone-bg); }
.cc-tabs button { background: rgba(255, 255, 255, 0.08); color: var(--text); border: none; border-radius: 16px; padding: 7px 13px; font-size: 12px; cursor: pointer; }
.cc-tabs button.active { background: var(--me); color: #1a1000; font-weight: 700; }
.cc-body section { display: flex; flex-direction: column; gap: 10px; }
.cc-body h4 { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--sub); }
.cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.cc-card { background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--sub); }
.cc-card b { font-size: 16px; color: var(--text); }
.cc-users { display: flex; flex-direction: column; gap: 6px; }
.cc-user { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 9px 12px; font-size: 13px; }
.cc-user > span:last-child { margin-left: auto; display: flex; gap: 6px; }
.cc-user i, .cc-user em { margin-left: auto; font-size: 11px; color: var(--sub); font-style: normal; }
.cc-user em { margin-left: 4px; color: #ff9f0a; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; }
.cc-user button { background: rgba(255, 255, 255, 0.1); color: var(--text); border: none; border-radius: 8px; padding: 5px 9px; font-size: 11px; cursor: pointer; }
.cc-user button.danger, .cc-btn.danger { background: rgba(255, 59, 48, 0.2); color: #ff6b61; }
.cc-feed { max-height: 220px; overflow-y: auto; font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace; background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 8px 10px; }
.cc-feed time { color: var(--me); margin-right: 8px; }
.cc-btn { background: rgba(255, 255, 255, 0.12); color: var(--text); border: none; border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cc-btn.primary { background: var(--me); color: #1a1000; }
.cc-btn:hover { filter: brightness(1.15); }
.cc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cc-row input[type="range"] { flex: 1; min-width: 100px; }
.cc-check { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.cc-body textarea, .cc-body input[type="text"], .cc-body input[type="number"], .cc-body select { background: #1c1c1e; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.cc-body textarea:focus, .cc-body input:focus, .cc-body select:focus { border-color: var(--me); }
.cc-fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cc-fxgrid button { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); border-radius: 14px; padding: 12px 6px; cursor: pointer; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cc-fxgrid button b { font-size: 26px; font-weight: 400; }
.cc-fxgrid button:hover { background: color-mix(in srgb, var(--me) 30%, transparent); transform: translateY(-2px); }
.cc-note { font-size: 11px; color: var(--sub); }
.cc-body canvas { width: 100%; background: rgba(255, 255, 255, 0.04); border-radius: 12px; }
.cc-bars > div { position: relative; display: flex; justify-content: space-between; padding: 7px 10px; margin-bottom: 5px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); overflow: hidden; font-size: 13px; }
.cc-bars i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--me) 30%, transparent); }
.cc-bars span, .cc-bars b { position: relative; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chips span { background: rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 5px 11px; font-size: 12px; }
.cc-console { min-height: 220px; max-height: 360px; overflow-y: auto; background: #0c0c0e; border-radius: 12px; padding: 10px 12px; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #ffe9a8; }
.cc-console-form { display: flex; gap: 8px; align-items: center; background: #0c0c0e; border-radius: 12px; padding: 8px 12px; font: 13px ui-monospace, monospace; color: var(--me); }
.cc-console-form input { flex: 1; background: none; border: none; outline: none; color: #fff; font: inherit; }
body[data-mode="light"] .cc-body textarea, body[data-mode="light"] .cc-body input, body[data-mode="light"] .cc-body select { background: #fff; color: var(--text); }

.cc-detail { color: var(--sub); font-size: 11px; margin-left: 6px; flex: 1; min-width: 0; }
.cc-user { flex-wrap: wrap; }

/* Full-screen: the OS fills the whole browser window (no monitor bezel or stand). */
.phone-frame { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; aspect-ratio: auto; padding: 0; margin: 0; border-radius: 0; background: none; box-shadow: none; }
.phone-frame::after, .monitor-base { display: none; }
.device { border-radius: 0; }
.dynamic-island:not(.expanded) { opacity: 0; }

/* ======================= Multiplayer layer (os8.js) ======================= */
.tile-pad { background: linear-gradient(160deg, #34c759, #0a8f6a); }
.peer-cursor { position: fixed; left: 0; top: 0; z-index: 99985; pointer-events: none; transition: transform 0.07s linear, opacity 0.4s; opacity: 0; will-change: transform; }
.peer-cursor svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.peer-cursor span { position: absolute; left: 18px; top: 18px; padding: 2px 8px; border-radius: 10px; color: #fff; font: 600 11px system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.peer-ripple { position: fixed; z-index: 99984; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid; border-radius: 50%; pointer-events: none; animation: peer-ripple 0.65s ease-out forwards; }
@keyframes peer-ripple { to { transform: scale(4); opacity: 0; } }
.pad-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pad-status { padding: 8px 16px; font-size: 12px; color: var(--sub); border-bottom: 1px solid var(--border); }
.pad-ta { flex: 1; min-height: 0; resize: none; border: none; outline: none; background: transparent; color: var(--text); font: 16px/1.6 var(--font, system-ui), sans-serif; padding: 16px 18px; }
.pad-foot { display: flex; justify-content: space-between; padding: 8px 16px; font-size: 11px; color: var(--sub); border-top: 1px solid var(--border); }

/* ======================= Face unlock + gestures (os9.js) ======================= */
.face-modal { position: fixed; inset: 0; z-index: 99995; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; }
.face-card { width: min(360px, calc(100vw - 32px)); background: rgba(30, 32, 40, 0.97); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #f2f2f7; text-align: center; }
.face-title { font-weight: 700; font-size: 17px; }
.face-vid { position: relative; width: 220px; height: 220px; }
.face-vid video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scaleX(-1); background: #000; }
.face-ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--me, #0a84ff); animation: face-pulse 1.6s ease-in-out infinite; }
@keyframes face-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }
.face-msg { font-size: 14px; color: #c9cbd6; min-height: 20px; }
.face-cancel { background: rgba(255, 255, 255, 0.12); color: #fff; border: none; border-radius: 12px; padding: 9px 16px; cursor: pointer; font: inherit; font-size: 13px; }
.gesture-hud { position: fixed; left: 14px; bottom: 84px; z-index: 99950; width: 190px; background: rgba(20, 22, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 8px; color: #fff; font: 12px system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.gesture-hud video { width: 100%; border-radius: 9px; transform: scaleX(-1); background: #000; display: block; }
.gesture-label { margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--me, #ffb800); }
.gesture-help { margin-top: 4px; opacity: 0.6; font-size: 10px; line-height: 1.35; }

/* ======================= Switcher, live thumbnails, boot looks, subtitles (os10.js) ======================= */
.thumb-host { position: relative; overflow: hidden; border-radius: 10px; background: #000; flex: none; }
.thumb-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.switcher { position: fixed; inset: 0; z-index: 99996; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: card-in var(--dur-2) var(--ease-out); }
.sw-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 94vw; }
.sw-card { background: rgba(255, 255, 255, 0.08); border: 2px solid transparent; border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 8px; align-items: center; cursor: pointer; color: #fff; font: inherit; }
.sw-card.sel { border-color: var(--me, #0a84ff); background: rgba(255, 255, 255, 0.18); transform: translateY(-4px); }
.sw-name { font-size: 12px; }
.sw-hint { color: #c9cbd6; font-size: 12px; }
.dock-switch { display: none; background: none; border: none; border-radius: 8px; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; }
.dock-switch:hover { background: rgba(255, 255, 255, 0.12); }
body.is-windowed .dock-switch { display: flex; }

/* Task View with live thumbnails */
.tv-card { width: 232px; }
.tv-prev { height: auto !important; padding: 0; display: block !important; border-radius: 12px; overflow: hidden; position: relative; }
.tv-prev .tv-app { position: absolute; left: 6px; bottom: 6px; border-radius: 8px !important; }
.tv-new { width: 232px; height: auto; min-height: 145px; }
.tv-apps { width: min(900px, 94vw); display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.tv-appcard { background: none; border: none; color: #fff; display: flex; flex-direction: column; gap: 6px; align-items: center; cursor: pointer; font: inherit; font-size: 12px; }
.tv-appcard:hover .thumb-host { outline: 2px solid var(--me, #0a84ff); }
.taskview { overflow-y: auto; justify-content: flex-start; padding-top: 28px; }

/* Boot looks */
.boot-zlogo, .boot-bar, .boot-hello { display: none; }
.boot-screen[data-skin="windows"] { background: #000; }
.boot-screen[data-skin="windows"] .os-logo-pane { background: #0a84ff !important; }
.boot-screen[data-skin="windows"] .os-logo-pane-2, .boot-screen[data-skin="windows"] .os-logo-pane-3 { background: #3aa0ff !important; }
.boot-screen[data-skin="windows"] .os-boot-logo { width: 84px; height: 84px; gap: 8px; }

.boot-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; animation: boot-fill 2.6s ease-in-out forwards; }
@keyframes boot-fill { to { width: 100%; } }
@keyframes z-fade { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }

.boot-hello.in { animation: hello-in 0.3s ease both; }
@keyframes hello-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Subtitles */
.call-subs { position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px; max-width: min(720px, 92%); z-index: 8; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.sub-line { background: rgba(0, 0, 0, 0.74); color: #fff; padding: 7px 14px; border-radius: 12px; font-size: 17px; line-height: 1.35; text-align: center; }
.sub-line.mine { opacity: 0.6; font-size: 13px; }
.call.minimized .call-subs, .call.minimized .cc-invite { display: none !important; }
.cc-invite { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 9; background: rgba(30, 32, 40, 0.96); color: #fff; border-radius: 14px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.cc-invite button { background: var(--me, #0a84ff); color: #fff; border: none; border-radius: 10px; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.cc-invite button[data-no] { background: rgba(255, 255, 255, 0.14); }

/* ======================= Slash commands (os11.js) ======================= */
.bubble.tstyle-me { font-style: italic; background: transparent !important; box-shadow: none !important; color: var(--sub) !important; border: 1px dashed rgba(255, 255, 255, 0.25); }
.bubble.tstyle-spoiler:not(.revealed) { filter: blur(7px); cursor: pointer; user-select: none; }
.bubble.tstyle-spoiler { cursor: pointer; transition: filter 0.2s; }
.bubble.tstyle-shout { font-weight: 800; font-size: 21px; text-transform: uppercase; letter-spacing: 1px; }
.slash-pop {
  position: absolute; left: 10px; right: 10px; bottom: 74px; z-index: 41; max-width: 520px; max-height: 340px; overflow-y: auto;
  border-radius: 16px; background: rgba(30, 32, 40, 0.97); backdrop-filter: blur(22px); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); padding: 6px; display: flex; flex-direction: column;
}
.sp-title { padding: 6px 10px 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); }
.slash-pop button { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; background: none; border: none; color: var(--text); padding: 8px 10px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; }
.slash-pop button b { color: var(--me); min-width: 74px; }
.slash-pop button i { color: var(--sub); font-style: normal; font-size: 12px; }
.slash-pop button span { color: #b4b6c2; flex-basis: 100%; font-size: 12px; }
.slash-pop button.sel, .slash-pop button:hover { background: color-mix(in srgb, var(--me) 24%, transparent); }
.slash-pop button em { margin-left: auto; font-style: normal; font-size: 10px; background: #ffb800; color: #1a1000; border-radius: 6px; padding: 1px 6px; }
.sp-hint { padding: 8px 10px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.sp-hint b { color: var(--me); } .sp-hint i { color: var(--sub); font-style: normal; } .sp-hint span { flex-basis: 100%; color: #b4b6c2; font-size: 12px; }
.cmd-help { position: fixed; inset: 0; z-index: 99994; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ch-card { width: min(640px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: rgba(30, 32, 40, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; color: #f2f2f7; overflow: hidden; }
.ch-head { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ch-head b { font-size: 17px; }
.ch-search { flex: 1; min-width: 0; background: #1c1c1e; border: 1px solid #3a3a3c; border-radius: 10px; padding: 8px 12px; color: #fff; font: inherit; outline: none; }
.ch-close { background: var(--me, #0a84ff); color: #fff; border: none; border-radius: 10px; padding: 8px 14px; cursor: pointer; font: inherit; font-size: 13px; }
.ch-body { overflow-y: auto; padding: 4px 12px 16px; }
.ch-body h4 { margin: 14px 4px 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9a9aa5; }
.ch-body button { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; width: 100%; text-align: left; background: none; border: none; color: inherit; padding: 8px 8px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; }
.ch-body button:hover { background: rgba(255, 255, 255, 0.08); }
.ch-body button b { color: var(--me, #0a84ff); }
.ch-body button i { grid-column: 1; font-style: normal; color: #8e8e99; font-size: 11px; }
.ch-body button span { grid-column: 2; grid-row: 1 / span 2; color: #c9cbd6; align-self: center; }

/* FaceTime: in a 1-on-1 call the other person's camera fills the whole screen (it used to share
   the screen with an empty second row), and your own preview is bigger. */
.video-grid.two { grid-template-rows: 1fr; }
.tile { cursor: pointer; }
.local-video { width: clamp(110px, 22vmin, 240px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; top: 18px; right: 18px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); z-index: 6; }

/* ======================= Chromebook mode (os12.js) ======================= */
.lite-prompt { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lp-card { width: min(440px, 100%); background: #1c1e28; color: #f2f2f7; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; padding: 26px 24px 20px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lp-icon { font-size: 44px; }
.lp-card h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.lp-card p { margin: 0; color: #b9bccb; font-size: 14px; line-height: 1.5; }
.lp-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
.lp-btns button { border: none; border-radius: 14px; padding: 13px 16px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.lp-yes { background: #0a84ff; color: #fff; }
.lp-no { background: rgba(255, 255, 255, 0.1); color: #f2f2f7; }
.lp-card small { color: #8e90a0; font-size: 12px; }
.thumb-lite { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: #c9cbd6; font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.12); }

html.lite *, html.lite *::before, html.lite *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; text-shadow: none !important;
}
html.lite .boot-screen { display: none !important; }
html.lite .blob, html.lite .grid-floor, html.lite .grid-scan, html.lite .chat-bg-glow, html.lite .chat-bg-grid, html.lite .boot-orb, html.lite .fx-global { display: none !important; }
html.lite .lock-bg, html.lite .home-bg { background: linear-gradient(135deg, color-mix(in srgb, var(--blob-a, #5e5ce6) 55%, #0b0b10), #0b0b10 75%) !important; }
html.lite { --glass: rgba(28, 30, 38, 0.97); }
html.lite body[data-mode="light"] { --glass: rgba(250, 250, 253, 0.98); }
/* Without blur, translucent panels need a solid background to stay readable. */
html.lite .dock, html.lite .widget, html.lite .login-card, html.lite .start-menu, html.lite .notif-center, html.lite .ctx-menu,
html.lite .folder-panel, html.lite .sticker-pop, html.lite .slash-pop, html.lite .poll-card, html.lite .face-card, html.lite .power-menu,
html.lite .cc-panel, html.lite .mood-pop, html.lite .taskview, html.lite .switcher, html.lite .ch-card, html.lite .lp-card { background-color: var(--glass) !important; }
html.lite .app-topbar, html.lite .chat-header, html.lite .composer, html.lite .search-bar { background-color: var(--glass) !important; }
html.lite .notif-banner { background-color: var(--glass) !important; }

/* ======================= Shared chat background (os13.js) ======================= */
#app-messages .chat-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
#app-messages.has-bg-photo .chat-bg-glow, #app-messages.has-bg-photo .chat-bg-grid { display: none; }
#app-messages.has-bg-photo .chat-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, var(--chatbg-dim, 0.45)), rgba(0, 0, 0, calc(var(--chatbg-dim, 0.45) + 0.12))); }
body[data-mode="light"] #app-messages.has-bg-photo .chat-bg { opacity: 1; }

.bg-offer { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 45; width: min(440px, calc(100% - 24px)); display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(30, 32, 40, 0.97); border: 1px solid rgba(255, 255, 255, 0.16); color: #f2f2f7; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.bg-offer img { width: 84px; height: 112px; object-fit: cover; border-radius: 12px; flex: none; }
.bg-offer b { display: block; font-size: 15px; margin-bottom: 2px; }
.bg-offer span { display: block; font-size: 12px; color: #b9bccb; margin-bottom: 8px; }
.bo-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-btns button { border: none; border-radius: 10px; padding: 7px 11px; font: inherit; font-size: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.12); color: #fff; }
.bo-btns button[data-a="bg"] { background: var(--me, #0a84ff); }
#app-messages .chat-bg { background-position: 50% 28%; } /* keep faces in frame on wide screens */

.sp-add { width: 100%; margin-bottom: 8px; padding: 9px; border-radius: 10px; border: 1px dashed var(--border); background: transparent; color: var(--text); cursor: pointer; }
.sp-mgif { position: relative; }
.sp-mgif img { width: 100%; border-radius: 8px; cursor: pointer; display: block; }
.sp-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; }

/* ---- Performance mode picker + iPhone mode (os12.js) ---- */
.lp-btns .lp-mode { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; background: rgba(255, 255, 255, 0.1); color: #f2f2f7; }
.lp-btns .lp-mode span { font-size: 12px; font-weight: 400; color: #b9bccb; }
.lp-btns .lp-mode.lp-rec { background: #0a84ff; color: #fff; }
.lp-btns .lp-mode.lp-rec span { color: rgba(255, 255, 255, 0.85); }
.lp-btns .lp-mode.lp-current { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: -2px; }
/* iPhone mode: the lightest setting. Filters and blend modes are the usual cause of Safari lag, and
   messages that are off-screen don't need to be painted at all. */
html.iphone *, html.iphone *::before, html.iphone *::after {
  filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important;
  will-change: auto !important; background-attachment: scroll !important;
}
html.iphone #app-messages .row { content-visibility: auto; contain-intrinsic-size: auto 56px; }
html.iphone .home-bg, html.iphone .lock-bg { background: #0b0b10 !important; }
html.iphone .widget-net, html.iphone .dock-tray .tray-clock { contain: layout paint; }
html.iphone #app-messages .chat-bg::after { background: rgba(0, 0, 0, var(--chatbg-dim, 0.45)); }

.load-earlier { align-self: center; margin: 8px auto; padding: 7px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.08); color: var(--text); font-size: 12px; cursor: pointer; }

/* ---- In a call on a phone: stop all the pretty background work behind the call screen ---- */
body.in-call .home-bg, body.in-call .lock-bg, body.in-call .chat-bg-glow, body.in-call .chat-bg-grid, body.in-call .fx-global { display: none !important; }
body.in-call .home-screen, body.in-call .app-window:not(#call) { animation: none !important; }
html.phone body.in-call *:not(#call):not(#call *) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation-play-state: paused !important; }
html.phone body.in-call #call .video-grid video { will-change: auto; }

/* ---- FaceTime extras (os15.js): connection meter, quality menu, notice ---- */
.call-meter { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 16px; border: 0; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 12px; cursor: pointer; max-width: calc(100% - 100px); }
.call-meter .cm-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.call-meter .cm-bars i { display: block; width: 3px; border-radius: 1px; background: rgba(255, 255, 255, 0.3); }
.call-meter .cm-bars i:nth-child(1) { height: 4px; } .call-meter .cm-bars i:nth-child(2) { height: 7px; } .call-meter .cm-bars i:nth-child(3) { height: 10px; } .call-meter .cm-bars i:nth-child(4) { height: 14px; }
.call-meter[data-level="1"] .cm-bars i:nth-child(-n+1) { background: #ff453a; }
.call-meter[data-level="2"] .cm-bars i:nth-child(-n+2) { background: #ff9f0a; }
.call-meter[data-level="3"] .cm-bars i:nth-child(-n+3) { background: #30d158; }
.call-meter[data-level="4"] .cm-bars i { background: #30d158; }
.call.minimized .call-meter, .call.minimized .call-note, .call.minimized .call-qmenu { display: none; }
.call-note { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 54px); left: 50%; transform: translateX(-50%); z-index: 6; max-width: min(360px, calc(100% - 28px)); padding: 9px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 13px; text-align: center; }
.call-qmenu { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); transform: translateX(-50%); z-index: 7; width: min(300px, calc(100% - 28px)); padding: 8px; border-radius: 16px; background: rgba(28, 30, 38, 0.97); color: #f2f2f7; display: flex; flex-direction: column; gap: 2px; }
.call-qmenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 600; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left; }
.call-qmenu button span { font-size: 12px; font-weight: 400; color: #b9bccb; }
.call-qmenu button.on { background: rgba(10, 132, 255, 0.28); }
.call-qmenu .cq-auto { font-size: 12px; color: #b9bccb; padding: 8px 12px 4px; display: flex; gap: 8px; align-items: center; }
.call-q { font-size: 13px; font-weight: 700; }
@media (max-width: 520px) {
  #call-controls { flex-wrap: wrap; justify-content: center; gap: 12px 14px; padding-left: 14px; padding-right: 14px; }
  #call-controls .call-round { flex: none; }
  .fx-trigger { bottom: calc(env(safe-area-inset-bottom, 0px) + 190px); }
  .fx-tray { bottom: calc(env(safe-area-inset-bottom, 0px) + 246px); }
}

/* ---- Replies, edited tag, outbox (app.js) ---- */
.mode-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12px; background: rgba(255, 255, 255, 0.07); border-top: 1px solid var(--border); color: var(--sub); }
.mode-bar .mb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-bar .mb-x { border: 0; background: none; color: var(--text); font-size: 18px; cursor: pointer; line-height: 1; }
.reply-quote { display: flex; flex-direction: column; gap: 1px; margin: -2px 0 6px; padding: 4px 8px; border-left: 3px solid rgba(255, 255, 255, 0.6); border-radius: 4px; background: rgba(0, 0, 0, 0.18); font-size: 12px; cursor: pointer; text-align: left; }
.reply-quote b { font-weight: 600; opacity: 0.9; }
.reply-quote span { opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.edited-tag { margin-left: 6px; font-size: 10px; opacity: 0.55; }
.row.flash .bubble { outline: 2px solid var(--me, #0a84ff); outline-offset: 2px; }
.row.pending { opacity: 0.6; }
.pending-note { font-size: 11px; color: var(--sub); text-align: right; padding: 2px 6px 0; }

/* ---- Panic button (panic.js): cover everything until LOVE is typed ---- */
#panic-btn {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: calc(env(safe-area-inset-right, 0px) + 6px); z-index: 2147483000;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #e5322d; color: #fff;
  font: 700 14px/24px system-ui, sans-serif; text-align: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); opacity: 0.9;
}
#panic-btn:hover { opacity: 1; transform: scale(1.1); }
#panic-btn:active { transform: scale(0.92); }
#panic-overlay { position: fixed; inset: 0; z-index: 2147483647; display: none; background: #000; cursor: default; }
html.panic-on #panic-overlay { display: block; }
html.panic-on #panic-btn { display: none; }
/* keep the status-bar icons clear of the panic button in the corner */
.status-bar.ios-statusbar { padding-right: 34px; }

/* Panic button: bigger target, and every header leaves room for it so it never covers a button */
#panic-btn { width: 30px; height: 30px; font-size: 16px; line-height: 30px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#panic-btn::after { content: ""; position: absolute; inset: -8px; }
.app-topbar, .chat-header, .call-controls-top { padding-right: 44px !important; }
body[data-os-theme="windows"] .app-topbar, body[data-os-theme="windows"] .chat-header { padding-right: 44px !important; }
.status-bar.ios-statusbar { padding-right: 44px; }
.dock-tray { padding-right: 0; }

/* The cover looks like a plain search page; the password is typed into its search box */
#panic-overlay {
  position: fixed; inset: 0; z-index: 2147483647; display: none; flex-direction: column; background: #fff; color: #202124; cursor: default;
  font-family: arial, "Helvetica Neue", Helvetica, sans-serif; overflow: hidden;
}
html.panic-on #panic-overlay { display: flex; }
#panic-overlay .gl-top { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 14px 24px; font-size: 13px; }
#panic-overlay .gl-top a { color: rgba(0, 0, 0, 0.87); text-decoration: none; }
#panic-overlay .gl-top a:hover { text-decoration: underline; }
#panic-overlay .gl-apps { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; padding: 8px; }
#panic-overlay .gl-apps i { width: 4px; height: 4px; border-radius: 50%; background: #5f6368; display: block; }
#panic-overlay .gl-signin { background: #1a73e8; color: #fff !important; padding: 9px 22px; border-radius: 4px; font-weight: 500; font-size: 14px; }
#panic-overlay .gl-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 0 16px 80px; }
#panic-overlay .gl-logo { font-size: clamp(56px, 18vw, 92px); font-weight: 500; letter-spacing: -3px; line-height: 1; user-select: none; }
#panic-overlay .gl-logo span:nth-child(1), #panic-overlay .gl-logo span:nth-child(4) { color: #4285f4; }
#panic-overlay .gl-logo span:nth-child(2), #panic-overlay .gl-logo span:nth-child(6) { color: #ea4335; }
#panic-overlay .gl-logo span:nth-child(3) { color: #fbbc05; }
#panic-overlay .gl-logo span:nth-child(5) { color: #34a853; }
#panic-overlay .gl-box { width: min(584px, 100%); display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 46px; border: 1px solid #dfe1e5; border-radius: 24px; background: #fff; }
#panic-overlay .gl-box:hover, #panic-overlay .gl-box:focus-within { box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); border-color: rgba(223, 225, 229, 0); }
#panic-overlay #panic-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: #202124; font-family: inherit; }
#panic-overlay .gl-btns { display: flex; gap: 12px; }
#panic-overlay .gl-btns button { background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; color: #3c4043; font: 14px arial, sans-serif; padding: 0 16px; height: 36px; cursor: pointer; }
#panic-overlay .gl-btns button:hover { border-color: #dadce0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: #202124; }
#panic-overlay .gl-foot { background: #f2f2f2; border-top: 1px solid #dadce0; font-size: 14px; color: #70757a; }
#panic-overlay .gl-country { padding: 14px 24px; border-bottom: 1px solid #dadce0; }
#panic-overlay .gl-links { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 14px 24px; }
#panic-overlay .gl-links .gl-sp { flex: 1; }
@media (max-width: 560px) { #panic-overlay .gl-links .gl-sp { display: none; } #panic-overlay .gl-btns { display: none; } }

/* Big reminder on the cover (can be switched off in Settings) */
#panic-overlay .gl-hint { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.1; }
#panic-overlay .gl-hint[hidden] { display: none; }
#panic-overlay .gl-hint b { font-size: clamp(26px, 8vw, 44px); font-weight: 900; letter-spacing: 1px; color: #d93025; }
#panic-overlay .gl-hint strong { font-size: clamp(22px, 7vw, 36px); font-weight: 800; color: #1a73e8; }
#panic-overlay .gl-hint i { font-style: normal; font-size: clamp(30px, 9vw, 48px); font-weight: 900; color: #d93025; animation: gl-bob 1s ease-in-out infinite; }
@keyframes gl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

#panic-overlay .gl-hint strong { font-size: clamp(34px, 11vw, 60px); letter-spacing: 4px; }

#panic-overlay .gl-err { color: #d93025; font-size: 18px; font-weight: 700; margin-top: -8px; }
#panic-overlay .gl-err[hidden] { display: none; }
#panic-overlay .gl-box.gl-shake { animation: pl-shake 0.4s; border-color: #d93025; }
@keyframes pl-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }

/* ======================= Arcade (os16.js / os17.js) ======================= */
.tile-arcade { background: linear-gradient(160deg, #ff4081, #7c4dff); }
.arc-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.arc-menu { padding: 14px 14px 24px; }
.arc-head { font-size: 13px; font-weight: 600; color: var(--sub); margin: 2px 4px 12px; }
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.arc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.arc-card:hover { background: rgba(255, 255, 255, 0.11); }
.arc-card:active { transform: scale(0.97); }
.arc-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 4px; }
.arc-card b { font-size: 15px; }
.arc-card small { font-size: 12px; color: var(--sub); line-height: 1.3; }
.arc-card em { font-style: normal; font-size: 11px; color: var(--sub); margin-top: 2px; }
.arc-play { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arc-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.arc-back { border: 0; background: none; color: var(--me, #0a84ff); font: inherit; font-size: 15px; cursor: pointer; padding: 4px 2px; }
.arc-name { flex: 1; text-align: center; }
.arc-score { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arc-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; overflow: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.arc-canvas { width: min(100%, 420px); max-height: calc(100% - 70px); object-fit: contain; border-radius: 12px; display: block; touch-action: none; }
canvas.arc-canvas { height: auto; aspect-ratio: auto; }
.arc-pad { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.arc-key { min-width: 56px; height: 52px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.1); color: var(--text); font-size: 20px; cursor: pointer; touch-action: none; }
.arc-key.wide { min-width: 96px; }
.arc-key:active { background: rgba(255, 255, 255, 0.22); }
.arc-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0, 0, 0, 0.62); color: #fff; z-index: 3; text-align: center; padding: 16px; }
.arc-over b { font-size: 26px; }
.arc-over span { font-size: 15px; opacity: 0.85; }
.arc-over button { margin-top: 6px; border: 0; border-radius: 14px; padding: 12px 22px; background: var(--me, #0a84ff); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.arc-note { padding: 40px 12px; color: var(--sub); }
/* 2048 */
.a48 { width: min(100%, 360px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; border-radius: 12px; background: #bbada0; touch-action: none; }
.a48 .t { border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: system-ui, sans-serif; }
/* Minesweeper */
.ms-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; width: min(100%, 360px); }
.ms-flag { border: 1px solid var(--border); background: rgba(255, 255, 255, 0.08); color: var(--text); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ms-flag.on { background: rgba(255, 69, 58, 0.3); }
.ms-left { font-weight: 600; }
.ms-grid { width: min(100%, 360px); display: grid; gap: 3px; touch-action: manipulation; }
.ms-c { aspect-ratio: 1; border: 0; border-radius: 5px; background: #5c6b80; color: #fff; font: 700 16px system-ui, sans-serif; cursor: pointer; padding: 0; -webkit-touch-callout: none; }
.ms-c.open { background: #d9dee6; color: #333; cursor: default; }
.ms-c.mine { background: #ff6b6b; }
.ms-c[data-n="1"] { color: #1e63d6; } .ms-c[data-n="2"] { color: #2e8b3e; } .ms-c[data-n="3"] { color: #d32f2f; } .ms-c[data-n="4"] { color: #6a1b9a; } .ms-c[data-n="5"] { color: #8d4f00; }
/* Memory */
.mm-grid { width: min(100%, 360px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mm-c { aspect-ratio: 1; border: 0; border-radius: 12px; background: linear-gradient(160deg, #7c4dff, #3f1dcb); font-size: 30px; cursor: pointer; transition: transform 0.15s; }
.mm-c.up { background: #fff; }
.mm-c.done { background: #c8f7d4; transform: scale(0.94); }

/* ======================= Browser (os18.js) ======================= */
.tile-browser { background: linear-gradient(160deg, #34c3ff, #1565c0); }
.br-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.br-btn { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.br-btn:hover { background: rgba(255, 255, 255, 0.1); }
.br-url { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 17px; background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit; font-size: 14px; outline: none; }
.br-url:focus { border-color: var(--me, #0a84ff); }
.br-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.br-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.br-frame[hidden], .br-start[hidden], .br-loading[hidden] { display: none; }
.br-start { padding: 18px 14px; overflow-y: auto; }
.br-head { font-size: 13px; font-weight: 600; color: var(--sub); margin: 2px 4px 12px; }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.br-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.br-card:hover { background: rgba(255, 255, 255, 0.11); }
.br-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 700; }
.br-msg { margin: 16px 4px 0; color: #ff6b6b; font-size: 14px; }
.br-loading { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--me, #0a84ff), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: br-load 1s linear infinite; }
@keyframes br-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }
body[data-mode="light"] .br-btn:hover, body[data-mode="light"] .br-card:hover { background: rgba(0, 0, 0, 0.06); }

/* Browser app turned off (os18.js, ENABLED=false) */
.br-off { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--sub); gap: 6px; }
.br-off-ic { font-size: 52px; line-height: 1; color: var(--sub); opacity: 0.6; }
.br-off h3 { margin: 6px 0 0; font-size: 18px; color: var(--text); }
.br-off p { margin: 0; font-size: 14px; max-width: 260px; }

/* ---- Notification prompt + test button (app.js / os18.js) ---- */
.push-card { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); transform: translateX(-50%); z-index: 9500; width: min(400px, calc(100vw - 24px)); display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: rgba(28, 30, 38, 0.97); color: #f2f2f7; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.push-card .pc-ic { font-size: 26px; line-height: 1; }
.push-card .pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.push-card .pc-body > b { font-size: 15px; }
.push-card .pc-body span { color: #b9bccb; }
.push-card ol { margin: 4px 0 2px; padding-left: 18px; color: #d6d8e2; display: flex; flex-direction: column; gap: 2px; }
.push-card .pc-btns { display: flex; gap: 8px; margin-top: 6px; }
.push-card .pc-btns button { border: 0; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(255, 255, 255, 0.12); color: #fff; }
.push-card .pc-btns .pc-yes { background: var(--me, #0a84ff); }
.push-card .pc-msg { color: #ffb4ab; }
.push-test-btn { margin: 4px 16px 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.08); color: var(--text); border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; }

/* ---- Live site update (os20.js) ---- */
.cc-hint { font-size: 12px; opacity: 0.7; margin: 6px 0 4px; }
#site-update { position: fixed; inset: 0; z-index: 2147483600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(6, 8, 16, 0.94); color: #f2f2f7; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; text-align: center; padding: 20px; }
#site-update .su-spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.15); border-top-color: #0a84ff; animation: su-spin 0.9s linear infinite; }
#site-update b { font-size: 24px; }
#site-update span { font-size: 15px; color: #b9bccb; }
#site-update small { font-size: 13px; color: #8e90a0; }
@keyframes su-spin { to { transform: rotate(360deg); } }
html.lite #site-update .su-spin { animation: su-spin 0.9s linear infinite !important; }
.su-banner { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); z-index: 2147483600; padding: 9px 14px; border-radius: 14px; background: rgba(10, 132, 255, 0.95); color: #fff; font-size: 13px; font-weight: 600; }

/* ---- Chat encryption (e2e.js / os21.js) ---- */

/* ======================= Administrator console (os21.js) ======================= */
/* Nothing of the normal desktop: just the control room, full screen, with its own look */
body.admin-console .home-screen, body.admin-console .dock, body.admin-console #home-indicator, body.admin-console .notif-center,
body.admin-console .start-menu, body.admin-console .push-card, body.admin-console .app-window:not(#app-cc) { display: none !important; }
body.admin-console { background: #050505 !important; }
body.admin-console #app-cc {
  display: flex !important; flex-direction: column; position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important;
  width: auto !important; height: auto !important; z-index: 9000; border-radius: 0 !important; border: 0 !important; transform: none !important;
  background: radial-gradient(120% 80% at 50% -10%, #2a0d0d 0%, #0a0606 45%, #050505 100%) !important; color: #f5e6d3;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; animation: none !important;
}
body.admin-console #app-cc .app-topbar { background: rgba(0, 0, 0, 0.6) !important; border-bottom: 1px solid rgba(255, 70, 40, 0.35) !important; padding: 14px 52px 14px 18px !important; }
body.admin-console #app-cc .win-traffic, body.admin-console #app-cc .win-resize { display: none !important; }
body.admin-console #app-cc .app-title { text-align: left; font-size: 14px; font-weight: 800; letter-spacing: 3px; color: #ff6a3d; }
.ac-signout { display: none; }
body.admin-console .ac-signout { display: inline-block; border: 1px solid rgba(255, 106, 61, 0.6); background: transparent; color: #ff6a3d; border-radius: 8px; padding: 6px 12px; font: 600 12px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; cursor: pointer; }
body.admin-console .ac-signout:hover { background: rgba(255, 106, 61, 0.15); }
body.admin-console #cc-body { flex: 1; min-height: 0; overflow-y: auto; max-width: 1100px; width: 100%; margin: 0 auto; }
body.admin-console .cc-tabs button { font-family: inherit; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
body.admin-console .cc-tabs button.active { background: rgba(255, 106, 61, 0.2) !important; color: #ffb199 !important; }
body.admin-console #cc-body h4 { color: #ff8a65; letter-spacing: 2px; text-transform: uppercase; font-size: 11px; }
body.admin-console .cc-card, body.admin-console .cc-user { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 106, 61, 0.18) !important; }
.ac-keys { display: flex; flex-direction: column; gap: 6px; }
.ac-keyrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.ac-verdict { font-size: 13px; padding: 6px 2px; }
.ac-verdict.ok { color: #69f0ae; } .ac-verdict.warn { color: #ffb74d; }
.ac-muted { opacity: 0.6; font-size: 13px; }
.ac-chat { max-height: 55vh; overflow-y: auto; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 106, 61, 0.15); display: flex; flex-direction: column; gap: 4px; font-family: -apple-system, system-ui, sans-serif; }
.ac-chat button, .ac-chat .react-btn { pointer-events: none; }
.ac-chat .react-btn { display: none; }

.ac-key { display: flex; flex-direction: column; gap: 6px; }
.ac-keyval { flex: 1; min-width: 0; text-align: right; font-size: 11px; word-break: break-all; opacity: 0.9; }
.ac-reveal { border: 1px solid rgba(255, 106, 61, 0.5); background: transparent; color: #ff8a65; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 11px; cursor: pointer; }

/* ======================= Motion system =======================
   One set of timings and curves for the whole OS, so everything moves the same way.
   Only opacity and transform are animated (smooth on every device), screens enter from slightly
   below and settle, and leave a little faster than they arrive. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.4);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;  /* taps, hovers */
  --dur-2: 220ms;  /* menus, pop-ups, closing */
  --dur-3: 320ms;  /* opening apps and screens */
  --dur-4: 480ms;  /* big scene changes (unlock, startup) */
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes app-open { from { opacity: 0; transform: translateY(10px) scale(0.965); } to { opacity: 1; transform: none; } }
@keyframes app-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(0.975); } }
@keyframes login-fade-out { to { opacity: 0; transform: scale(1.02); } }
@keyframes home-zoom-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes icon-pop { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }

.app-window.opening { animation: app-open var(--dur-3) var(--ease-out); }
.app-window.closing { animation: app-close var(--dur-2) var(--ease-in) forwards; }  /* stays hidden until it's removed: no flash */
.lock-screen.unlocking { animation: login-fade-out var(--dur-3) var(--ease-in) forwards; }
.login-card { animation: card-in var(--dur-4) var(--ease-out); }

/* Startup: the desktop settles in, then widgets, icons and the dock arrive top to bottom, in order */
.home-screen.reveal-in { animation: home-zoom-in var(--dur-4) var(--ease-out); }
.home-screen.reveal-in .app-icon, .home-screen.reveal-in .widget {
  opacity: 0;
  animation: icon-pop 420ms var(--ease-out) both;  /* "both": hidden while waiting its turn, settled after */
  animation-delay: calc(var(--i, 0) * 28ms + 80ms) !important;
}

/* Centered pop-ups keep their centering in `translate`, so the pop-in animation can't push them sideways */
.start-menu, .poll-card { transform: none; translate: -50% 0; }
.start-menu { animation: card-in var(--dur-2) var(--ease-out); }
.poll-card { animation: card-in var(--dur-3) var(--ease-out); }

/* Taps feel the same everywhere */
.app-icon, .dock-icon, .icon-btn, .call-round, .arc-card, .arc-key, .cc-btn { transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) ease; }

/* Respect "reduce motion" on phones and computers */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Layout that fits together: widgets line up with the icon grid instead of spanning the whole screen,
   and the phone-style home bar never collides with the dock or taskbar */
.home-widgets, .widget-countdown { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
body[data-os-theme="windows"] #home-indicator { display: none !important; }

/* ======================= Startup: glitchy hacker terminal (Windows look) ======================= */
.boot-show { display: none; }
.boot-screen[data-skin="windows"] { background: #000; animation: boot-out 0.6s var(--ease-in, ease-in) 3.2s forwards; }
.boot-screen[data-skin="windows"] .os-boot-logo, .boot-screen[data-skin="windows"] .os-boot-spinner, .boot-screen[data-skin="windows"] .os-boot-text { display: none; }
.boot-screen[data-skin="windows"] .boot-show {
  display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at center, #031208 0%, #010402 70%);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; color: #3dff8f;
}

/* falling code */
.bh-rain { position: absolute; inset: 0; opacity: 0; animation: bh-in 0.5s ease forwards; }
.bh-rain span {
  position: absolute; top: 0; width: 3.6%; text-align: center; font-size: 14px; line-height: 1.15;
  color: rgba(61, 255, 143, 0.35); text-shadow: 0 0 6px rgba(61, 255, 143, 0.5);
  transform: translateY(-100%); animation: bh-fall linear infinite; will-change: transform;
}
@keyframes bh-fall { to { transform: translateY(110vh); } }
@keyframes bh-in { to { opacity: 1; } }

/* boot log, typed out line by line */
.bh-term { position: absolute; top: 7%; left: 6%; right: 6%; z-index: 2; display: flex; flex-direction: column; gap: 4px; font-size: clamp(10px, 1.5vw, 13px); }
.bh-term span { display: block; white-space: pre; overflow: hidden; opacity: 0; clip-path: inset(0 100% 0 0); text-shadow: 0 0 6px rgba(61, 255, 143, 0.6); animation: bh-type 0.32s steps(28) var(--d) forwards; }
.bh-term b { color: #b6ffd4; font-weight: 700; }
.bh-term .bh-last { color: #d9ffe9; }
@keyframes bh-type { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.bh-cursor { display: inline-block; width: 0.6em; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: #3dff8f; animation: bh-blink 0.7s steps(1) infinite; }
@keyframes bh-blink { 50% { opacity: 0; } }

/* the title in the middle, with an RGB-split glitch */
.bh-center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; text-align: center; animation: bh-shake 0.32s steps(2) 1.55s 2; }
.bh-sub { font-size: clamp(11px, 1.6vw, 14px); letter-spacing: 0.4em; padding-left: 0.4em; color: #3dff8f; opacity: 0; animation: bh-in 0.2s steps(2) 0.35s forwards; }
.bh-title {
  position: relative; font-weight: 800; font-size: clamp(26px, 7vw, 84px); line-height: 1; letter-spacing: 0.04em; white-space: nowrap;
  color: #eafff3; text-shadow: 0 0 10px rgba(61, 255, 143, 0.85), 0 0 34px rgba(61, 255, 143, 0.35);
  opacity: 0; animation: bh-in 0.1s linear 0.45s forwards, bh-flicker 2.2s steps(1) 0.6s infinite;
}
.bh-title::before, .bh-title::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.75; text-shadow: none; }
.bh-title::before { color: #ff2b4f; animation: bh-glitch-a 1.1s steps(2) infinite; }
.bh-title::after { color: #22e4ff; animation: bh-glitch-b 0.9s steps(2) infinite; }
@keyframes bh-glitch-a {
  0% { clip-path: inset(8% 0 72% 0); transform: translate(-3px, -1px); }
  25% { clip-path: inset(58% 0 18% 0); transform: translate(3px, 1px); }
  50% { clip-path: inset(30% 0 48% 0); transform: translate(-4px, 2px); }
  75% { clip-path: inset(82% 0 4% 0); transform: translate(2px, -1px); }
  100% { clip-path: inset(0 0 88% 0); transform: translate(-1px, 0); }
}
@keyframes bh-glitch-b {
  0% { clip-path: inset(66% 0 10% 0); transform: translate(3px, 1px); }
  25% { clip-path: inset(12% 0 70% 0); transform: translate(-3px, -1px); }
  50% { clip-path: inset(44% 0 34% 0); transform: translate(4px, 0); }
  75% { clip-path: inset(2% 0 86% 0); transform: translate(-2px, 2px); }
  100% { clip-path: inset(74% 0 6% 0); transform: translate(1px, -1px); }
}
@keyframes bh-flicker { 0%, 100% { opacity: 1; } 41% { opacity: 0.55; } 42% { opacity: 1; } 77% { opacity: 0.8; } 78% { opacity: 1; } }
@keyframes bh-shake { 0% { transform: translate(-6px, 2px) skewX(-6deg); } 50% { transform: translate(5px, -2px) skewX(5deg); } 100% { transform: none; } }

/* chunky loading bar, then ACCESS GRANTED */
.bh-bar { width: min(64vw, 420px); height: 10px; padding: 2px; border: 1px solid rgba(61, 255, 143, 0.7); opacity: 0; animation: bh-in 0.1s linear 1.1s forwards; }
.bh-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #3dff8f 0 8px, transparent 8px 10px); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px rgba(61, 255, 143, 0.7); animation: bh-load 1s steps(16) 1.15s forwards; }
@keyframes bh-load { to { transform: scaleX(1); } }
.bh-granted { margin-top: 4px; padding: 6px 14px; border: 1px solid #3dff8f; font-size: clamp(12px, 1.8vw, 16px); font-weight: 800; letter-spacing: 0.35em; padding-left: calc(14px + 0.35em); color: #021006; background: #3dff8f; box-shadow: 0 0 24px rgba(61, 255, 143, 0.75); opacity: 0; animation: bh-granted 0.5s steps(1) 2.2s forwards; }
@keyframes bh-granted { 0% { opacity: 1; } 20% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: 0.2; } 70%, 100% { opacity: 1; } }

/* CRT scanlines, a moving scan band and a vignette over everything */
.bh-scan { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.7) 100%); }
.bh-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; top: -18%; background: linear-gradient(180deg, transparent, rgba(61, 255, 143, 0.08), transparent); animation: bh-band 2.6s linear infinite; }
@keyframes bh-band { to { transform: translateY(700%); } }

@media (max-width: 560px) {
  .bh-title { font-size: 9.5vw; }
  .bh-term { font-size: 9.5px; top: 6%; }
  .bh-rain span { font-size: 11px; }
}

/* One look only (Windows): the look switcher button is gone */
#theme-btn { display: none !important; }

/* ======================= Our Story (os22.js) ======================= */
.tile-story { background: linear-gradient(160deg, #ff7aa2, #b4235a); }
.st-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 22px; max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.st-empty { padding: 60px 12px; text-align: center; color: var(--sub); }
.st-hero { text-align: center; padding: 18px 8px 6px; }
.st-kicker { font-size: 11px; letter-spacing: 0.35em; color: var(--me, #ff7aa2); font-weight: 700; }
.st-hero h2 { margin: 8px 0 6px; font-size: clamp(26px, 6vw, 40px); }
.st-hero p { margin: 0; color: var(--sub); }
.st-body h3 { margin: 0 0 10px; font-size: 15px; }
.st-note { margin: -4px 0 10px; font-size: 12px; color: var(--sub); }
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.st-card { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.st-card b { font-size: 22px; font-variant-numeric: tabular-nums; }
.st-card span { font-size: 12px; color: var(--sub); }
.st-split { display: flex; flex-direction: column; gap: 8px; }
.st-row { display: grid; grid-template-columns: 80px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.st-row i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--me, #ff7aa2), #7c4dff); }
.st-row b { text-align: right; font-variant-numeric: tabular-nums; }
.st-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.st-quote { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); }
.st-quote.love { border-color: rgba(255, 122, 162, 0.5); background: rgba(255, 122, 162, 0.08); }
.st-quote small { display: block; font-size: 11px; color: var(--sub); margin-bottom: 6px; }
.st-quote p { margin: 0; word-break: break-word; }
.st-quote img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; display: block; }
.st-mon { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.st-mon div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 2px; }
.st-mon span { font-size: 12px; color: var(--sub); }
.st-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 18px; }
.st-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; position: relative; min-width: 0; }
.st-bar i { width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--me, #ff7aa2), #7c4dff); }
.st-bar span { font-size: 10px; color: var(--sub); }
.st-bar b { position: absolute; top: 0; font-size: 10px; font-weight: 600; color: var(--sub); }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chips span { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 13px; }
.st-chips b { font-size: 11px; color: var(--sub); margin-left: 2px; }
.st-pm h4 { margin: 12px 0 6px; font-size: 12px; color: var(--sub); font-weight: 600; }
.st-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.st-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: pointer; }
.st-foot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.st-foot span { font-size: 12px; color: var(--sub); }
.st-export { border: 0; border-radius: 12px; padding: 10px 16px; background: var(--me, #0a84ff); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ======================= Windows finishing touches ======================= */
/* Notifications are toasts that slide in above the taskbar, bottom-right */
body[data-os-theme="windows"] .notif-banner {
  top: auto; left: auto; right: 12px; bottom: 76px; width: min(370px, calc(100% - 24px)); box-sizing: border-box;
  padding: 26px 16px 14px; border-radius: 10px; background: rgba(36, 36, 40, 0.97); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateX(calc(100% + 28px));
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease;
}
body[data-os-theme="windows"] .notif-banner::before { content: "Cayden's Network  ·  now"; position: absolute; top: 8px; left: 16px; font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.01em; }
body[data-os-theme="windows"] .notif-banner.show { opacity: 1; transform: none; }
body[data-os-theme="windows"][data-mode="light"] .notif-banner { background: rgba(250, 250, 252, 0.98); border-color: rgba(0, 0, 0, 0.08); }
body[data-os-theme="windows"][data-mode="light"] .notif-banner::before { color: rgba(0, 0, 0, 0.5); }
@media (max-width: 520px) { body[data-os-theme="windows"] .notif-banner { right: 10px; left: 10px; width: auto; } }

/* The phone status bar, home bar and webcam notch don't belong on a Windows desktop */
body[data-os-theme="windows"] .home-screen > .ios-statusbar, body[data-os-theme="windows"] .lock-statusbar,
body[data-os-theme="windows"] #dynamic-island, body[data-os-theme="windows"] #home-indicator, #bell-btn { display: none !important; }
body[data-os-theme="windows"] .home-screen { padding-top: 14px; }
/* ...its useful pieces live in the taskbar tray instead (os23.js) */
.dock-tray .tray-moved { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; opacity: 1; }
.dock-tray .tray-moved:hover { background: rgba(255, 255, 255, 0.1); }
.dock-tray .tray-status { width: auto; gap: 6px; padding: 0 8px; cursor: default; }
.dock-tray .tray-status .sb-battery { display: inline-flex; align-items: center; }
body[data-os-theme="windows"] .power-menu { top: auto; bottom: 76px; right: 12px; }
body[data-os-theme="windows"] .mood-pop { top: auto; bottom: 76px; right: 120px; }

/* ---- Our Story movie (os24.js) ---- */
.st-movie { margin-top: 14px; border: 0; border-radius: 999px; padding: 11px 22px; font: inherit; font-weight: 700; font-size: 15px; color: #fff; cursor: pointer; background: linear-gradient(90deg, #ff5a8c, #8a5cff); box-shadow: 0 8px 24px rgba(255, 90, 140, 0.35); }
.st-movie:active { transform: scale(0.97); }
.mv-overlay { position: fixed; inset: 0; z-index: 99990; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
.mv-canvas { height: min(82vh, calc((100vw - 24px) * 16 / 9)); width: auto; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); background: #0b0a1a; }
.mv-bar { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; color: #fff; font-size: 13px; }
.mv-bar button { border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; border-radius: 12px; padding: 9px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.mv-state { opacity: 0.8; min-width: 10px; }

/* ---- Live presence (os25.js) ---- */
.pr-chip { position: absolute; right: 290px; bottom: 50%; transform: translateY(50%); display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 12px; max-width: 42vw; }
.pr-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: linear-gradient(160deg, #ff5a8c, #8a5cff); flex: none; }
.pr-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pr-join { border: 0; border-radius: 999px; padding: 4px 10px; background: var(--me, #0a84ff); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; flex: none; }
.pr-beat { border: 0; background: none; font-size: 15px; cursor: pointer; padding: 2px 4px; flex: none; }
.pr-beat.sent { animation: pr-pop 0.5s var(--ease-out, ease-out); }
@keyframes pr-pop { 40% { transform: scale(1.5); } }
.pr-glow { position: fixed; inset: 0; z-index: 99950; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(255, 70, 130, 0); animation: pr-beat 1.8s ease-out forwards; }
@keyframes pr-beat {
  0% { box-shadow: inset 0 0 0 0 rgba(255, 70, 130, 0); }
  12% { box-shadow: inset 0 0 90px 24px rgba(255, 70, 130, 0.55); }
  28% { box-shadow: inset 0 0 30px 6px rgba(255, 70, 130, 0.2); }
  42% { box-shadow: inset 0 0 110px 30px rgba(255, 70, 130, 0.6); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 70, 130, 0); }
}
@media (max-width: 760px) { .pr-chip { right: auto; left: 8px; bottom: calc(100% + 8px); transform: none; background: rgba(28, 30, 38, 0.95); } }

/* ---- Live map in Find My (os26.js) ---- */
.findmy-body.lm-on .findmy-radar, .findmy-body.lm-on .findmy-distance, .findmy-body.lm-on .findmy-sub { display: none; }
.findmy-body.lm-on { justify-content: flex-start; gap: 12px; }
.lm-wrap { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.lm-map { width: 100%; height: min(52vh, 460px); border-radius: 16px; overflow: hidden; background: #0d1117; border: 1px solid var(--border); }
.lm-err { padding: 40px 14px; text-align: center; color: var(--sub); }
.lm-card { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); }
.lm-big { font-size: 22px; font-weight: 800; }
.lm-sub { font-size: 13px; color: var(--sub); margin-top: 2px; }
.lm-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lm-btns button { border: 1px solid var(--border); background: rgba(255, 255, 255, 0.08); color: var(--text); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.lm-btns button.on { background: rgba(255, 90, 140, 0.25); border-color: rgba(255, 90, 140, 0.6); }
.lm-btns button:disabled { opacity: 0.45; cursor: default; }
.lm-pin { display: flex; align-items: center; justify-content: center; }
.lm-pin span { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 15px system-ui, sans-serif; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15), 0 6px 14px rgba(0, 0, 0, 0.5); }
.lm-pin.me span { background: #0a84ff; }
.lm-pin.peer span { background: #ff5a8c; animation: lm-pulse 1.8s ease-out infinite; }
@keyframes lm-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 140, 0.6), 0 6px 14px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 0 0 18px rgba(255, 90, 140, 0), 0 6px 14px rgba(0, 0, 0, 0.5); } }
.lm-homepin { font-size: 22px; line-height: 26px; text-align: center; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.leaflet-container { font: 12px system-ui, sans-serif; background: #0d1117; }
.lm-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.6); }

/* ---- AI that knows your chat (os27.js) ---- */
.aim-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px 0; flex-wrap: wrap; }
.aim-toggle { border: 1px solid var(--border); background: rgba(255, 255, 255, 0.07); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.aim-toggle.on { background: rgba(138, 92, 255, 0.28); border-color: rgba(138, 92, 255, 0.7); }
.aim-note { font-size: 11.5px; color: var(--sub); flex: 1; min-width: 160px; }

/* ---- Our Room (os28.js) ---- */
.tile-room3d { background: linear-gradient(160deg, #2f6f73, #1c1630); }
.r3-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: #120e1c; }
.r3-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; }
.r3-stage canvas { display: block; cursor: pointer; }
.r3-hud { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; pointer-events: none; font-size: 12px; color: #fff; }
.r3-who { padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); font-weight: 600; }
.r3-tip { padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); opacity: 0.85; }
.r3-note { padding: 60px 16px; text-align: center; color: rgba(255, 255, 255, 0.7); }

/* ======================= Prank mode (os29.js) ======================= */
.pr-prank { border: 0; background: none; font-size: 15px; cursor: pointer; padding: 2px 4px; flex: none; }
.pk-menu { position: fixed; z-index: 99960; width: 240px; padding: 10px; border-radius: 14px; background: rgba(28, 30, 38, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); color: #f2f2f7; display: flex; flex-direction: column; gap: 2px; animation: card-in var(--dur-2) var(--ease-out); }
.pk-menu b { font-size: 13px; padding: 4px 6px 6px; }
.pk-menu button { display: flex; gap: 10px; align-items: center; border: 0; background: none; color: inherit; font: inherit; font-size: 13.5px; padding: 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.pk-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.pk-menu button span { width: 20px; text-align: center; }
.pk-menu small { font-size: 11px; opacity: 0.6; padding: 6px 6px 2px; }
.pk-root { position: fixed; inset: 0; z-index: 99900; display: flex; align-items: center; justify-content: center; }
.pk-root.pk-pass { pointer-events: none; }
.pk-root.pk-soft { pointer-events: auto; background: rgba(0, 0, 0, 0.35); }
.pk-reveal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 30px; border-radius: 20px; background: rgba(28, 30, 38, 0.97); color: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); animation: card-in var(--dur-3) var(--ease-out); }
.pk-reveal div { font-size: 46px; }
.pk-reveal b { font-size: 20px; }
.pk-reveal span { opacity: 0.75; }
/* fake error */
.pk-err { width: min(420px, calc(100vw - 32px)); background: #f3f3f3; color: #1b1b1b; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); font: 14px "Segoe UI", system-ui, sans-serif; overflow: visible; }
.pk-err-bar { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid #ddd; }
.pk-err-body { display: flex; gap: 14px; padding: 18px 16px; }
.pk-err-ic { font-size: 34px; }
.pk-err-body p { margin: 4px 0 0; font-size: 13px; color: #444; }
.pk-err-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }
.pk-err-btns button { min-width: 74px; padding: 6px 12px; border: 1px solid #c8c8c8; border-radius: 4px; background: #fff; font: inherit; cursor: pointer; transition: transform 0.18s var(--ease-out); }
/* fake blue screen */
.pk-bsod { position: absolute; inset: 0; background: #0078d7; color: #fff; padding: 12vh 10vw; font: 300 clamp(15px, 2.2vw, 24px)/1.4 "Segoe UI", system-ui, sans-serif; }
.pk-bsod-face { font-size: clamp(80px, 14vw, 160px); margin-bottom: 4vh; }
.pk-bsod-small { font-size: 0.65em; opacity: 0.85; margin-top: 4vh; }
/* hacked */
.pk-hack { position: absolute; inset: 0; background: #000; color: #3dff8f; padding: 8vh 8vw; font: 600 clamp(13px, 1.8vw, 18px)/1.6 ui-monospace, Menlo, Consolas, monospace; text-shadow: 0 0 8px rgba(61, 255, 143, 0.7); }
.pk-hack pre { margin: 0; white-space: pre-wrap; }
.pk-hack pre.big { font-size: 1.25em; }
/* flip + quake act on the whole desktop */
.device.pk-flip { transform: rotate(180deg); transition: transform 0.8s var(--ease-io); }
.device { transition: transform 0.8s var(--ease-io); }
.device.pk-quake { animation: pk-quake 0.12s linear infinite; }
@keyframes pk-quake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-6px, 3px) rotate(-0.6deg); } 50% { transform: translate(5px, -4px) rotate(0.5deg); } 75% { transform: translate(-3px, -2px) rotate(-0.3deg); } }
/* dancing cats */
.pk-cats { position: absolute; bottom: 14%; left: 0; width: 100%; height: 120px; }
.pk-cats span { position: absolute; left: -120px; bottom: 0; font-size: 64px; animation: pk-walk 6.2s linear forwards, pk-hop 0.42s ease-in-out infinite; animation-delay: calc(var(--i) * 0.38s), 0s; }
@keyframes pk-walk { to { left: calc(100% + 120px); } }
@keyframes pk-hop { 50% { transform: translateY(-26px) rotate(-10deg); } }
.pk-notes { position: absolute; top: 30%; width: 100%; text-align: center; font-size: 48px; animation: pk-hop 0.6s ease-in-out infinite; }
/* duck storm */
.pk-duck { position: absolute; top: -60px; font-style: normal; animation: pk-fall linear forwards; }
@keyframes pk-fall { to { transform: translateY(115vh) rotate(540deg); } }
/* heart battery */
.pk-batt { width: min(340px, calc(100vw - 32px)); padding: 22px; border-radius: 18px; background: rgba(28, 30, 38, 0.98); color: #fff; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); animation: card-in var(--dur-3) var(--ease-out); }
.pk-batt-ic { width: 64px; height: 30px; margin: 0 auto 12px; border: 3px solid #ff453a; border-radius: 6px; position: relative; padding: 3px; }
.pk-batt-ic::after { content: ""; position: absolute; right: -9px; top: 8px; width: 5px; height: 10px; border-radius: 0 3px 3px 0; background: #ff453a; }
.pk-batt-ic i { display: block; width: 6%; height: 100%; background: #ff453a; border-radius: 2px; animation: bh-blink 0.8s steps(1) infinite; }
.pk-batt p { font-size: 13px; opacity: 0.8; }
.pk-batt-btn { margin-top: 6px; border: 0; border-radius: 12px; padding: 10px 16px; background: #ff5a8c; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* ---- Search everything (os30.js) ---- */
.search-count { padding: 10px 14px 4px !important; font-size: 12px !important; text-align: left !important; }
.search-old { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(138, 92, 255, 0.25); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ======================= CaydenCraft (os31.js) ======================= */
.tile-craft { background: linear-gradient(160deg, #7ec8f5, #3a8fd6); }
.cc3-body { flex: 1; min-height: 0; position: relative; background: #8ec9ff; overflow: hidden; user-select: none; -webkit-user-select: none; }
.cc3-stage { position: absolute; inset: 0; touch-action: none; }
.cc3-stage canvas { display: block; }
.cc3-cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; }
.cc3-cross::before, .cc3-cross::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); }
.cc3-cross::before { left: 8px; top: 0; width: 2px; height: 18px; }
.cc3-cross::after { top: 8px; left: 0; width: 18px; height: 2px; }
.cc3-hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; font: 600 12px ui-monospace, Menlo, Consolas, monospace; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.cc3-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.45); border-radius: 8px; max-width: calc(100% - 20px); overflow-x: auto; }
.cc3-bar button { position: relative; width: 40px; height: 40px; padding: 4px; border: 2px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.08); cursor: pointer; flex: none; }
.cc3-bar button.on { border-color: #fff; background: rgba(255, 255, 255, 0.25); }
.cc3-bar canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.cc3-bar small { position: absolute; left: 3px; top: 1px; font: 700 9px monospace; color: #fff; text-shadow: 0 1px 1px #000; }
.cc3-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; text-align: center; padding: 16px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.cc3-start b { font-size: clamp(30px, 6vw, 54px); letter-spacing: 2px; text-shadow: 3px 3px 0 #2c5d1e; color: #8ef06e; }
.cc3-start span { font-size: 16px; padding: 8px 18px; border: 2px solid #fff; background: rgba(0, 0, 0, 0.35); }
.cc3-start small { max-width: 520px; opacity: 0.8; line-height: 1.5; }
.cc3-touch { display: none; }
.cc3-is-touch .cc3-touch { display: block; }
.cc3-is-touch .cc3-start small { display: none; }
.cc3-pad { position: absolute; left: 30px; bottom: 80px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.35); pointer-events: none; opacity: 0.6; }
.cc3-pad.on { opacity: 1; }
.cc3-pad i { position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.cc3-btns { position: absolute; right: 14px; bottom: 76px; display: grid; grid-template-columns: repeat(2, 54px); gap: 8px; }
.cc3-btns button { width: 54px; height: 54px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 20px; touch-action: none; }

/* ======================= Cloud Gaming (os32.js) ======================= */
.tile-cloudgaming { background: linear-gradient(160deg, #7b2ff7, #1565c0); }
.cg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 20px; display: flex; flex-direction: column; }
.cg-head { font-size: 13px; font-weight: 600; color: var(--sub); margin: 2px 2px 14px; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cg-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.cg-card:hover { background: rgba(255, 255, 255, 0.1); }
.cg-card:active { transform: scale(0.98); }
.cg-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 800; }
.cg-card b { font-size: 15px; }
.cg-card small { color: var(--sub); font-size: 12.5px; line-height: 1.4; }
.cg-go { margin-top: 2px; color: var(--me, #0a84ff); font-size: 13px; font-weight: 600; }
.cg-foot { margin: 18px 2px 0; color: var(--sub); font-size: 12.5px; line-height: 1.5; }
body[data-mode="light"] .cg-card:hover { background: rgba(0, 0, 0, 0.05); }

/* ======================= Phone app (phone-app.js) ======================= */
.ph-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ph-views { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
.ph-h { margin: 6px 2px 14px; font-size: 26px; font-weight: 800; }
.ph-card, .ph-contact { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); text-align: center; }
.ph-av { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #ff7aa2, #8a5cff); box-shadow: 0 10px 30px rgba(255, 90, 140, 0.3); }
.ph-av.big { width: 110px; height: 110px; font-size: 48px; }
.ph-name, .ph-contact > b { font-size: 24px; }
.ph-status, .ph-contact > span { font-size: 13px; color: var(--sub); }
.ph-acts { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.ph-acts button { width: 74px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.08); color: var(--me, #0a84ff); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ph-acts button i { font-style: normal; font-size: 22px; }
.ph-acts button:active { transform: scale(0.95); }
.ph-list { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); }
.ph-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ph-row:last-child { border-bottom: 0; }
.ph-row:hover { background: rgba(255, 255, 255, 0.05); }
.ph-row.missed b { color: #ff453a; }
.ph-dir { width: 18px; text-align: center; color: var(--sub); }
.ph-rowtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ph-rowtxt small { color: var(--sub); font-size: 12px; }
.ph-row time { color: var(--sub); font-size: 12px; }
.ph-empty { color: var(--sub); text-align: center; padding: 30px 10px; }
.ph-contact dl { width: 100%; max-width: 360px; margin: 14px 0 0; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.ph-contact dt { color: var(--sub); }
.ph-contact dd { margin: 0; }
.ph-me { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); display: flex; justify-content: space-between; }
.ph-me small { color: var(--sub); }
.ph-display { min-height: 52px; text-align: center; font-size: 34px; font-weight: 300; letter-spacing: 2px; padding: 10px 0 18px; font-variant-numeric: tabular-nums; }
.ph-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 26px; justify-content: center; }
.ph-key { width: 76px; height: 76px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font: inherit; }
.ph-key b { font-size: 30px; font-weight: 400; line-height: 1; }
.ph-key small { font-size: 9px; letter-spacing: 2px; opacity: 0.7; min-height: 11px; }
.ph-key:active { background: rgba(255, 255, 255, 0.28); }
.ph-keyrow { display: grid; grid-template-columns: repeat(3, 76px); gap: 26px; justify-content: center; margin-top: 16px; align-items: center; }
.ph-dial { width: 76px; height: 76px; border-radius: 50%; border: 0; background: #30d158; font-size: 30px; cursor: pointer; }
.ph-back { border: 0; background: none; color: var(--text); font-size: 24px; cursor: pointer; }
.ph-hint { text-align: center; font-size: 12px; color: var(--sub); margin-top: 18px; }
.ph-leave { width: 100%; margin-bottom: 12px; padding: 12px; border: 0; border-radius: 14px; background: rgba(255, 90, 140, 0.2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.ph-tabs { display: flex; border-top: 1px solid var(--border); background: var(--header-bg); padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px); }
.ph-tabs button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--sub); font: inherit; font-size: 10.5px; cursor: pointer; padding: 4px 0; }
.ph-tabs button i { font-style: normal; font-size: 19px; }
.ph-tabs button.on { color: var(--me, #0a84ff); }
.ph-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff453a; color: #fff; font-size: 10px; font-style: normal; line-height: 16px; }
/* a voice call shows a big avatar instead of an empty video tile */
.call.ph-voice .video-grid::before { content: "🎧 Voice call"; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 22px; font-weight: 700; color: #fff; z-index: 1; }
.call.ph-voice .local-video { display: none; }

/* ======================= Games Hub (os33.js) ======================= */
.tile-gameshub { background: linear-gradient(160deg, #ff4081, #7c4dff); }
.gh-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 22px; }
.gh-sec { font-size: 13px; font-weight: 700; color: var(--sub); margin: 6px 2px 12px; letter-spacing: 0.02em; }
.gh-sec:not(:first-child) { margin-top: 22px; }
.gh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 11px; }
.gh-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 15px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.gh-card:hover { background: rgba(255, 255, 255, 0.1); }
.gh-card:active { transform: scale(0.98); }
.gh-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; font-weight: 800; }
.gh-card b { display: block; font-size: 14.5px; }
.gh-card small { display: block; color: var(--sub); font-size: 12px; line-height: 1.35; margin-top: 2px; }
.gh-foot { margin: 20px 2px 0; color: var(--sub); font-size: 12.5px; line-height: 1.5; }
body[data-mode="light"] .gh-card:hover { background: rgba(0, 0, 0, 0.05); }

/* =======================================================================
   ZORVCLOUD BRAND RESKIN — phone shell (boot / lock / home / dock / icons)
   Visual-only override layer appended last so it wins by source order.
   No IDs or class names are renamed; JS hooks are untouched.
   ======================================================================= */
:root {
  --zc-bg: #07080c;
  --zc-panel: #11141c;
  --zc-panel-2: #161a24;
  --zc-mint: #37f0a8;
  --zc-cyan: #38d0ff;
  --zc-violet: #9d7bff;
  --zc-pink: #ff5c9d;
  --zc-grad: linear-gradient(135deg, #37f0a8, #38d0ff 55%, #9d7bff);
  --zc-border: rgba(255, 255, 255, 0.09);
  --zc-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zc-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* retune base palette to brand */
  --bg: #07080c;
  --phone-bg: #090b10;
  --border: #1d2230;
  --neon: #37f0a8;
}
body { font-family: var(--zc-body); }

/* ---- Device frame & bezel ---- */
.phone-frame {
  background: linear-gradient(165deg, #20242e, #0a0c11 55%, #050608 100%);
  box-shadow:
    0 0 0 1px rgba(120, 220, 200, 0.12),
    0 0 0 2px #262b35,
    0 40px 90px rgba(0, 0, 0, 0.7),
    inset 0 0 3px rgba(94, 240, 200, 0.18);
}
.phone-frame::after { background: linear-gradient(180deg, #20242e, #0a0c11); }
.monitor-base { background: linear-gradient(180deg, #2b303b, #0a0c11); }
.device { background: var(--zc-bg); }

/* ---- Dynamic island (crisp camera dot) ---- */
.dynamic-island {
  background: #04060a;
  box-shadow: 0 0 0 1.5px #20242e, 0 0 6px rgba(55, 240, 168, 0.55);
}
.dynamic-island.expanded {
  background: rgba(10, 13, 18, 0.92);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px var(--zc-border), 0 10px 30px rgba(0, 0, 0, 0.5);
}
.home-indicator { background: rgba(255, 255, 255, 0.45); }

/* ---- Aurora wallpaper for lock + home ---- */
.device {
  --blob-a: #37f0a8;
  --blob-b: #38d0ff;
  --blob-c: #9d7bff;
}
.lock-screen { background: #07080c; }
.lock-bg, .home-bg {
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(55, 240, 168, 0.10), transparent 70%),
    radial-gradient(55% 45% at 82% 78%, rgba(157, 123, 255, 0.10), transparent 70%),
    #07080c;
}
.blob { opacity: 0.42; filter: blur(66px); mix-blend-mode: screen; }
.blob-a { background: radial-gradient(circle at 50% 50%, var(--zc-mint), transparent 68%); }
.blob-b { background: radial-gradient(circle at 50% 50%, var(--zc-cyan), transparent 68%); }
.blob-c { background: radial-gradient(circle at 50% 50%, var(--zc-violet), transparent 68%); }

/* grid floor + scan tinted to brand mint/cyan */
.home-bg .grid-floor {
  background-image:
    linear-gradient(rgba(55, 240, 168, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 208, 255, 0.9) 1px, transparent 1px);
  opacity: 0.16;
}
.home-bg .grid-scan {
  background: linear-gradient(180deg, transparent, rgba(55, 240, 168, 0.14), transparent);
}

/* ---- Status bar ---- */
.ios-statusbar, .status-bar { color: #fff; }
.sb-time { font-family: var(--zc-display); font-weight: 600; letter-spacing: 0.3px; }
.sb-signal i { background: #fff; }
.sb-battery-shell { border-color: rgba(255, 255, 255, 0.55); }
.sb-battery-fill { background: #fff; }

/* ---- Lock clock ---- */
.lock-time {
  font-family: var(--zc-display);
  font-weight: 700;
  font-size: 66px;
  letter-spacing: -1.5px;
  background: var(--zc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 26px rgba(55, 240, 168, 0.35));
}
.lock-date {
  font-family: var(--zc-display);
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  font-size: 13px;
}

/* ---- Glass login / passcode card ---- */
.login-card {
  background: rgba(17, 20, 28, 0.62);
  backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--zc-border);
  border-radius: 26px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 20px 50px rgba(0, 0, 0, 0.45);
}
.login-card h1 {
  background: var(--zc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: var(--zc-display);
}
.secure-line, .login-card .secure-line { color: rgba(55, 240, 168, 0.8); }
.passcode-label { color: rgba(255, 255, 255, 0.6); }
.pc-dot { border-color: rgba(255, 255, 255, 0.45); }
.pc-dot.filled {
  background: var(--zc-mint);
  border-color: var(--zc-mint);
  box-shadow: 0 0 10px rgba(55, 240, 168, 0.7);
}
.pc-key {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--zc-display);
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.pc-key:active {
  background: rgba(55, 240, 168, 0.22);
  border-color: var(--zc-mint);
  box-shadow: 0 0 0 2px rgba(55, 240, 168, 0.45);
  transform: scale(0.94);
}
.pc-key-spacer { background: transparent; border-color: transparent; }
.pc-key-del { background: transparent; border-color: transparent; }
.pc-key-del:active { background: transparent; box-shadow: none; }
.password-field-row input {
  background: rgba(10, 13, 18, 0.7);
  border: 1px solid var(--zc-border);
  border-radius: 14px;
}
.password-field-row input:focus { border-color: var(--zc-mint); }
.password-unlock-btn, .countdown-edit-actions button[type="submit"] {
  background: var(--zc-grad);
  color: #04120c;
  font-weight: 700;
  border: none;
}
.login-mode-toggle { color: var(--zc-cyan); }

/* ---- Face ID ---- */
.faceid-frame { color: var(--zc-mint); }
.faceid-corner { border-color: var(--zc-mint); opacity: 0.9; }
.faceid-scan { background: linear-gradient(90deg, transparent, var(--zc-cyan), transparent); }
.faceid-label { color: rgba(255, 255, 255, 0.65); }

/* ---- Profile picker ---- */
.profile-title { font-family: var(--zc-display); }
.profile-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--zc-border);
  border-radius: 18px;
}
.profile-btn:active, .profile-btn:hover {
  background: rgba(55, 240, 168, 0.1);
  border-color: rgba(55, 240, 168, 0.4);
}

/* ---- App icons: cohesive branded squircle tiles ---- */
.icon-tile {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 -6px 12px rgba(0, 0, 0, 0.22) inset,
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(55, 240, 168, 0.06);
}
.app-icon:active .icon-tile {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -4px 8px rgba(0, 0, 0, 0.22) inset,
    0 2px 6px rgba(0, 0, 0, 0.35);
}
.app-label {
  font-family: var(--zc-body);
  font-weight: 500;
  letter-spacing: 0.1px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.app-badge { border-color: #07080c; background: var(--zc-pink); }

/* ---- Frosted dock ---- */
.dock {
  background: rgba(14, 17, 24, 0.55);
  backdrop-filter: blur(30px) saturate(1.7);
  border: 1px solid var(--zc-border);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 32px rgba(0, 0, 0, 0.5);
}
.dock-icon:hover { background: rgba(55, 240, 168, 0.1); }

/* ---- Widgets ---- */
.widget {
  background: rgba(17, 20, 28, 0.55);
  border: 1px solid var(--zc-border);
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(1.4);
}
.widget-time { font-family: var(--zc-display); font-weight: 600; }
.widget-net-title { color: var(--zc-mint); font-family: var(--zc-body); }
.net-dot.on { background: var(--zc-mint); box-shadow: 0 0 8px var(--zc-mint); }
.widget-net-line, .widget-hello { color: rgba(55, 240, 168, 0.7); }
.countdown-num { font-family: var(--zc-display); color: var(--zc-cyan); }

/* ---- Access overlay (unlock) ---- */
.access-title { font-family: var(--zc-display); color: var(--zc-mint); text-shadow: 0 0 18px rgba(55, 240, 168, 0.85); }
.access-sub { color: rgba(55, 240, 168, 0.8); }
.access-bar { background: rgba(55, 240, 168, 0.18); }
.access-bar span { background: var(--zc-mint); box-shadow: 0 0 10px var(--zc-mint); }

/* =======================================================================
   Boot screen rebrand
   ======================================================================= */
.boot-screen { background: radial-gradient(circle at 50% 42%, #0d1620, #050608 72%); }

/* generic OS fallback panes -> brand squircle + gradient */
.os-boot-logo { gap: 7px; }
.os-logo-pane { border-radius: 7px; }
.os-logo-pane-1 { background: var(--zc-mint); }
.os-logo-pane-2 { background: var(--zc-cyan); }
.os-logo-pane-3 { background: var(--zc-violet); }
.os-logo-pane-4 { background: var(--zc-pink); }
.os-boot-spinner { border-color: rgba(55, 240, 168, 0.22); border-top-color: var(--zc-mint); }
.os-boot-text { font-family: var(--zc-display); color: rgba(255, 255, 255, 0.6); letter-spacing: 1px; }

/* hacker-terminal boot (Windows skin) tinted mint/cyan */
.boot-screen[data-skin="windows"] { background: #04070a; }
.boot-screen[data-skin="windows"] .boot-show {
  background: radial-gradient(ellipse at center, #061812 0%, #03070a 72%);
  color: var(--zc-mint);
}
.bh-rain span { color: rgba(55, 240, 168, 0.32); text-shadow: 0 0 6px rgba(55, 240, 168, 0.5); }
.bh-term span { text-shadow: 0 0 6px rgba(55, 240, 168, 0.6); }
.bh-term b { color: #b6ffe0; }
.bh-term .bh-last { color: #d9fff0; }
.bh-cursor { background: var(--zc-mint); }
.bh-sub { color: var(--zc-cyan); font-family: var(--zc-display); }
.bh-title {
  font-family: var(--zc-display);
  color: #eafff5;
  background: var(--zc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(55, 240, 168, 0.45);
}
.bh-title::before { color: var(--zc-pink); -webkit-text-fill-color: var(--zc-pink); }
.bh-title::after { color: var(--zc-cyan); -webkit-text-fill-color: var(--zc-cyan); }
.bh-bar { border-color: rgba(55, 240, 168, 0.7); }
.bh-bar i {
  background: repeating-linear-gradient(90deg, var(--zc-mint) 0 8px, transparent 8px 10px);
  box-shadow: 0 0 10px rgba(55, 240, 168, 0.7);
}
.bh-granted {
  border-color: var(--zc-mint);
  color: #04120c;
  background: var(--zc-mint);
  box-shadow: 0 0 24px rgba(55, 240, 168, 0.75);
}
.bh-scan::after { background: linear-gradient(180deg, transparent, rgba(55, 240, 168, 0.08), transparent); }