/* saovalentimOS — desktop-first, OS-style interface
   Prioritises OS interaction patterns over web patterns.
   Cursor rules, focus/selection states, restrained animations. */

:root {
  --bg-start: #1a0508;
  --bg-end: #2d0a0c;
  --surface: rgba(255, 240, 242, 0.06);
  --surface-hover: rgba(255, 200, 210, 0.12);
  --surface-active: rgba(255, 180, 195, 0.08);
  --surface-selected: rgba(217, 48, 80, 0.15);
  --text: #ffe8eb;
  --text-dim: rgba(255, 220, 225, 0.8);
  --text-disabled: rgba(255, 200, 210, 0.45);
  --accent: #d93050;
  --accent-strong: #b71c3a;
  --accent-soft: rgba(217, 48, 80, 0.3);
  --red-glow: rgba(183, 28, 58, 0.5);
  --border: rgba(255, 180, 190, 0.15);
  --border-red: rgba(217, 48, 80, 0.45);
  --shadow: 0 8px 32px rgba(120, 0, 20, 0.35);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.2);
  --radius: 10px; /* OS-like: restrained, not mobile-ish */
  --radius-sm: 6px;
  --trip-hour-h: 52px;
  --font: 'Inter', -apple-system, sans-serif;
  --font-emotional: 'Nunito', var(--font);
  --transition-fast: 0.15s ease;
  --transition-medium: 0.2s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* OS-style: default cursor on body/desktop; pointer only on actionable elements */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: #0f0506;
  color: var(--text);
  overflow-x: hidden;
  cursor: default; /* Desktop default, not pointer everywhere */
  user-select: none; /* Reduce accidental text selection on desktop */
}

/* Restore text selection inside editable/modal areas */
.modal-body,
.chat-input-wrap,
input,
textarea {
  user-select: text;
}

/* ========== Ecrã de login (estilo Windows) ========== */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-screen[aria-hidden="true"] {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}

.login-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #1a0508 0%, #2d0a0c 25%, #4a0f12 50%, #2d080a 75%, #150506 100%);
  animation: gradient-breathe 25s ease-in-out infinite;
}

@keyframes gradient-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}

.login-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(217, 48, 80, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(183, 28, 58, 0.15) 0%, transparent 45%);
  pointer-events: none;
  animation: gradient-breathe 25s ease-in-out infinite;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 2rem;
  background: rgba(40, 10, 18, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-red);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(80, 0, 20, 0.4);
  text-align: center;
}

.login-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--surface);
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 24px var(--accent-soft);
}

.login-name {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-password {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  cursor: text;
}

.login-password::placeholder {
  color: var(--text-dim);
}

.login-password--error {
  border-color: var(--accent) !important;
  animation: login-shake 0.4s ease;
}

@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.login-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg-start);
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
/* Pointer only on actionable UI (OS affordance) */
.login-btn:hover {
  background: var(--accent-strong);
  transform: scale(1.02);
}
.login-btn:active {
  transform: scale(0.98);
}

.login-hint {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  max-width: 280px;
  line-height: 1.4;
  text-align: center;
}

/* Desktop — no scrolling; fixed viewport like real OS */
.desktop {
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 52px;
  overflow: hidden; /* OS constraint: desktop never scrolls */
  cursor: default;
}

.desktop[hidden] {
  display: none !important;
}

/* Top system bar — glassmorphism, translucent */
.menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: rgba(30, 8, 12, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-red);
  flex-shrink: 0;
  z-index: 40;
}

.menu-left .os-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
}

.menu-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

/* Clock — actionable, pointer cursor; OS focus ring */
.clock-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.clock-trigger:hover {
  background: var(--surface-hover);
}
.clock-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.clock {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.date {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.clock-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.4rem 0.75rem;
  background: rgba(30, 15, 35, 0.98);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-emotional);
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 200;
}

.clock-tooltip[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Área principal: apps + painel countdown ao lado (estilo Mac) */
.desktop-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}

/* Modo livre (estilo Windows): tudo posicionado à vontade */
.desktop-content.desktop-content--free {
  display: block;
  position: relative;
}
.desktop-content--free .apps-grid {
  position: absolute;
  inset: 0;
  display: block;
  grid-template-columns: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
.desktop-content--free .apps-grid .app-icon {
  position: absolute;
  margin: 0;
  transform: none;
}
.desktop-content--free .countdown-widget-panel,
.desktop-content--free .uptime-widget-panel,
.desktop-content--free .photo-widget-panel {
  position: absolute;
  margin: 0;
  z-index: 10;
}

/* Painel do widget — ao lado das apps (ou livre em --free) */
.countdown-widget-panel {
  flex-shrink: 0;
  width: 280px;
  padding: 1.5rem 1.5rem 1.5rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: default;
}
.countdown-widget-panel.desktop-widget-draggable {
  cursor: grab;
}
.countdown-widget-panel.desktop-widget-draggable.dragging {
  cursor: grabbing;
}

.countdown-widget-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card countdown — estilo macOS (glass, vistoso) */
.countdown-widget-card {
  position: relative;
  width: 100%;
  max-width: 260px;
  border: none;
  cursor: pointer;
  text-align: center;
  padding: 0;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.countdown-widget-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, rgba(217,48,80,0.4) 50%, rgba(255,255,255,0.08) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.countdown-widget-card:hover {
  transform: scale(1.02);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 60px rgba(217, 48, 80, 0.15);
}
.countdown-widget-card:active {
  transform: scale(0.98);
}
.reduce-motion .countdown-widget-card {
  transition: none;
}

.countdown-widget-card-inner {
  position: relative;
  padding: 1.75rem 1.25rem;
  background: rgba(40, 12, 18, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.countdown-widget-emoji {
  font-size: 2.75rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(217, 48, 80, 0.3));
}

.countdown-widget-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.countdown-widget-time {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(217, 48, 80, 0.4);
  margin-top: 0.25rem;
}

/* Relationship Uptime widget — painel separado (estilo Mac) */
.uptime-widget-panel {
  flex-shrink: 0;
  width: 280px;
  padding: 1.5rem 1.5rem 1.5rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: default;
}
.uptime-widget-panel.desktop-widget-draggable {
  cursor: grab;
}
.uptime-widget-panel.desktop-widget-draggable.dragging {
  cursor: grabbing;
}
.uptime-widget-card {
  position: relative;
  width: 100%;
  max-width: 260px;
  border: none;
  cursor: default;
  padding: 0;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.uptime-widget-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, rgba(217,48,80,0.4) 50%, rgba(255,255,255,0.08) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.uptime-widget-card-inner {
  position: relative;
  padding: 1.25rem 1.25rem;
  background: rgba(40, 12, 18, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
}
.uptime-widget-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}
.uptime-widget-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.uptime-widget-label {
  color: var(--text);
  font-weight: 500;
}
.uptime-widget-value {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(217, 48, 80, 0.3);
}
.uptime-widget-status {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* Screensaver emocional (overlay escuro; hora + frase + coração lento) */
.screensaver-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.screensaver-overlay.is-active {
  display: flex;
}
.screensaver-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
}
.screensaver-clock {
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 300;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
}
.screensaver-phrase {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-dim);
  margin: 0;
  max-width: 20ch;
  text-align: center;
}
.screensaver-heartbeat-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 480px;
}
.screensaver-ecg-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(20, 6, 12, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.screensaver-ecg-canvas {
  display: block;
  width: 100%;
  height: auto;
}
.screensaver-bpm-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.screensaver-bpm {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(217, 48, 80, 0.4);
}
.screensaver-bpm-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
}
.screensaver-heart {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  animation: heartbeat-pulse 1.15s ease-in-out infinite;
  animation-duration: var(--screensaver-heart-duration, 1.15s);
}
.screensaver-heart svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 16px rgba(217, 48, 80, 0.5));
}

/* Modo /love: mostra só ECG + BPM + coração (como na app Heartbeat) */
.screensaver-overlay--heartbeat-app .screensaver-content {
  gap: 1rem;
}
.screensaver-overlay--heartbeat-app .screensaver-heartbeat-wrap {
  max-width: 640px;
}
.screensaver-overlay--heartbeat-app .screensaver-ecg-wrap {
  background: rgba(25, 8, 14, 0.9);
}
.screensaver-overlay--heartbeat-app .screensaver-ecg-canvas {
  width: 100%;
  height: 120px;
}

/* Widget Foto (estilo Mac, arrastável) — dobro do tamanho dos outros */
.photo-widget-panel {
  flex-shrink: 0;
  width: 440px;
  padding: 1.5rem 1.5rem 1.5rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: default;
}
.photo-widget-panel.desktop-widget-draggable {
  cursor: grab;
}
.photo-widget-panel.desktop-widget-draggable.dragging {
  cursor: grabbing;
  will-change: transform;
}
.photo-widget-panel,
.photo-widget-card {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.photo-widget-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  background: var(--surface);
}
.photo-widget-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, rgba(217,48,80,0.3) 50%, rgba(255,255,255,0.06) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.photo-widget-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

@media (max-width: 900px) {
  .desktop-content {
    flex-direction: column;
    align-items: center;
  }
  .countdown-widget-panel,
  .uptime-widget-panel,
  .photo-widget-panel {
    width: 100%;
    padding: 0 2rem 1rem;
    justify-content: center;
  }
  .countdown-widget-card {
    max-width: 320px;
  }
  .uptime-widget-card {
    max-width: 320px;
  }
  .photo-widget-card {
    max-width: 400px;
  }
}

.countdown-list { list-style: none; margin: 0; padding: 0; }
.countdown-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.countdown-list-label { flex: 1; }
.countdown-list-value { color: var(--text-dim); font-size: 0.9rem; }
.countdown-toggle-wrap { margin-bottom: 1rem; }
.countdown-toggle-label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.countdown-hint { margin-bottom: 1rem; color: var(--text-dim); font-size: 0.9rem; }

.menu-right .status {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Grid de apps — no scrolling; fixed layout like desktop icons */
.apps-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
  gap: 2rem 2.5rem;
  padding: 2rem 3rem;
  max-width: 900px;
  margin: 0 auto;
  align-content: start;
  justify-content: start;
  min-height: 0;
  overflow: hidden;
  position: relative; /* For draggable icon absolute positioning */
}

/* Desktop icons: pointer for click, grab when draggable */
.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: var(--radius);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast);
  user-select: none;
}
/* Draggable: grab cursor; grabbing while dragging (set by JS) */
.app-icon.app-icon--draggable {
  cursor: grab;
}
.app-icon.app-icon--dragging {
  cursor: grabbing;
  opacity: 0.9;
  z-index: 100;
}
/* Drop target when reordering apps */
.app-icon.app-icon--drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}
/* Selection highlight — desktop metaphor (single-select) */
.app-icon.app-icon--selected {
  background: var(--surface-selected);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
/* Subtle hover — OS-style, not exaggerated */
.app-icon:hover {
  background: var(--surface-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.app-icon:active {
  background: var(--surface-active);
  transform: translateY(0) scale(0.98);
}
/* Focus ring for keyboard nav */
.app-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Glassmorphism on icon wrapper */
.app-icon .icon-wrapper {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Apps em destaque (Momentos, Messages, Reach the Heart) — ~10% maiores */
.app-icon--featured .icon-wrapper {
  width: 62px;
  height: 62px;
  border-radius: 16px;
}

.app-icon--featured .icon-wrapper svg {
  width: 32px;
  height: 32px;
}

.app-icon--featured .app-name {
  font-size: 0.88rem;
}

/* Icon wrapper — glassmorphism, restrained corners */
.icon-wrapper {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.icon-wrapper svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.app-name {
  font-size: 0.8rem;
  color: var(--text);
  text-align: center;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Background do desktop — gradiente que “respira” (20–30s) */
.desktop::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(165deg, #1a0508 0%, #2d080c 25%, #3d0e12 50%, #250608 75%, #150406 100%);
  animation: gradient-breathe 28s ease-in-out infinite;
}

.desktop::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 100% 60% at 30% 10%, rgba(217, 48, 80, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 70% 90%, rgba(183, 28, 58, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(150, 30, 50, 0.08) 0%, transparent 60%);
  pointer-events: none;
  animation: gradient-breathe 28s ease-in-out infinite;
}

/* Noise/grain muito suave (efeito vidro) */
.desktop .desktop-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========== Command bar (Spotlight-style) ========== */
.command-bar-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.command-bar-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.command-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 560px;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.command-bar-icon {
  font-size: 1.2rem;
  color: var(--accent);
  opacity: 0.9;
}
.command-bar-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: 'Ubuntu Mono', monospace;
  font-size: 1rem;
  outline: none;
}
.command-bar-input::placeholder {
  color: var(--text-disabled);
}
.command-bar-help {
  position: absolute;
  top: calc(12vh + 4rem);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.command-bar-help[aria-hidden="true"] {
  display: none;
}
.command-bar-help code {
  background: rgba(217, 48, 80, 0.2);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: 'Ubuntu Mono', monospace;
  font-size: 0.9em;
}

/* ========== /love — Linha ECG por cima do desktop (mantém tudo visível) ========== */
.love-ecg-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.love-ecg-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.love-ecg-canvas {
  width: 90%;
  max-width: 640px;
  height: 120px;
  filter: drop-shadow(0 0 20px rgba(217, 48, 80, 0.5));
}

/* ========== Blue Screen of Love (BSOD) ========== */
.bsod-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #0078d4;
  font-family: 'Segoe UI', system-ui, sans-serif;
  pointer-events: auto;
}
.bsod-overlay.is-active {
  display: flex;
}
.bsod-content {
  max-width: 560px;
  padding: 2rem;
  color: #fff;
  text-align: left;
}
.bsod-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.bsod-error {
  font-size: 1rem;
  margin: 0 0 2rem;
  opacity: 0.95;
}
.bsod-hint {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.8;
}

/* Easter egg — pointer only when actionable */
.heart-easter {
  position: fixed;
  bottom: 3.5rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-medium), transform var(--transition-fast);
  animation: heart-blink 8s ease-in-out infinite;
}
.heart-easter:hover {
  opacity: 1;
  transform: scale(1.1);
  animation: none;
}

@keyframes heart-blink {
  0%, 94%, 100% { opacity: 0.5; }
  95% { opacity: 0.3; }
  97% { opacity: 0.8; }
  99% { opacity: 0.5; }
}

/* ========== Bottom dock / taskbar — glassmorphism ========== */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  background: rgba(25, 6, 10, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border-red);
  z-index: 50;
}

.taskbar-left {
  position: relative;
  display: flex;
  align-items: center;
}

.taskbar-start {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.taskbar-start:hover {
  background: var(--surface-hover);
}
.taskbar-start:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.taskbar-logo {
  font-size: 1.25rem;
}

.start-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  width: 320px;
  max-height: 70vh;
  padding: 0.75rem;
  background: rgba(35, 10, 18, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-red);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 60;
}

.start-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.start-menu-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.start-menu-apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}

.start-menu-apps .app-icon {
  flex-direction: row;
  justify-content: flex-start;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.start-menu-apps .app-icon .icon-wrapper {
  width: 36px;
  height: 36px;
}

.start-menu-apps .app-icon .icon-wrapper svg {
  width: 20px;
  height: 20px;
}

.start-menu-apps .app-icon .app-name {
  text-align: left;
}

.start-menu-apps .app-icon--featured .icon-wrapper {
  width: 36px;
  height: 36px;
}

.start-menu-apps .app-icon--featured .icon-wrapper svg {
  width: 20px;
  height: 20px;
}

.start-menu-apps .app-icon--featured .app-name {
  font-size: 0.8rem;
}

/* Frase discreta no rodapé */
.footer-quote {
  position: fixed;
  bottom: 3.5rem;
  left: 1rem;
  margin: 0;
  font-family: var(--font-emotional);
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.6;
  pointer-events: none;
  z-index: 10;
}

.taskbar-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.taskbar-suspend {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.taskbar-suspend:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.taskbar-suspend:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.taskbar-logout {
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.taskbar-logout:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.taskbar-logout:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Modais — sensação de janela real: zoom suave + fade, fundo escurecido com blur */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 2, 4, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.modal[aria-hidden="false"] .modal-window {
  transform: scale(1);
  opacity: 1;
}

.modal-window {
  background: linear-gradient(180deg, rgba(38, 12, 18, 0.97) 0%, rgba(22, 5, 10, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-red);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 0 60px -12px var(--red-glow);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease-out, opacity 0.2s ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-red);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
}

.modal-header h2 {
  margin: 0;
  font-family: var(--font-emotional);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 0 20px var(--accent-soft);
}

.close-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.close-btn:hover {
  background: var(--accent-soft);
  transform: scale(1.05);
}
.close-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.close-btn--heart {
  font-size: 1.15rem;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--border-red) transparent;
  cursor: default;
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-red);
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ========== App Promises ========== */
.promises-app-window {
  max-width: 520px;
}

.promises-app-body {
  padding: 1.5rem;
}

.promises-app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.promises-item {
  padding: 1rem 1.15rem;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.promises-item:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.promises-item-text {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  font-weight: 500;
}

.promises-item-date {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Photos grid */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.photo-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.photo-thumb:hover {
  border-color: var(--accent);
  transform: scale(1.03);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 16px var(--red-glow);
}
.photo-thumb:active {
  transform: scale(1.01);
}
.photo-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.photo-thumb:hover img {
  transform: scale(1.05);
}

.photos-empty-msg {
  margin: 0;
  padding: 2rem;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-emotional);
}

/* Photo viewer */
.photo-viewer .modal-window {
  max-width: 700px;
}

.photo-viewer-window {
  position: relative;
  padding: 1rem;
}

.photo-viewer .close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 1.75rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition-fast);
}
.nav-btn:hover {
  background: var(--surface-hover);
}
.nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-btn.prev {
  left: 0.5rem;
}

.nav-btn.next {
  right: 0.5rem;
}

.photo-container {
  text-align: center;
}

.photo-container img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
}

.photo-caption {
  margin: 1rem 0 0.25rem;
  font-family: var(--font-emotional);
  font-size: 0.95rem;
  color: var(--text-dim);
  font-style: italic;
}

.photo-counter {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-left: 2px solid var(--accent);
  margin-left: 0.75rem;
  padding-left: 1.25rem;
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 1.25rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-soft);
}

.timeline-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.timeline-date {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 0.2rem;
  letter-spacing: 0.03em;
}

.timeline-content strong {
  display: block;
  margin-bottom: 0.25rem;
}

.timeline-content span {
  display: block;
  font-family: var(--font-emotional);
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.45;
}

/* Messages — Linux terminal style */
.messages-terminal.modal-window {
  background: #0c0c0c;
  border-color: rgba(0, 255, 136, 0.2);
  max-width: 580px;
}

.terminal-header {
  background: #1a1a1a;
  border-bottom-color: rgba(0, 255, 136, 0.15);
}

.terminal-title {
  font-family: 'Ubuntu Mono', 'Monaco', 'Menlo', 'Consolas', monospace !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #00ff88 !important;
  text-shadow: none !important;
}

.terminal-body {
  padding: 0;
  background: #0c0c0c;
  min-height: 340px;
}

.terminal-output {
  flex: 1;
  padding: 1rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: 'Ubuntu Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.terminal-output::-webkit-scrollbar {
  width: 10px;
}

.terminal-output::-webkit-scrollbar-track {
  background: #0c0c0c;
}

.terminal-output::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.terminal-output::-webkit-scrollbar-thumb:hover {
  background: #444;
}

.terminal-input-wrap {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.25rem 1rem;
  border-top: 1px solid rgba(0, 255, 136, 0.12);
  gap: 0;
}

.terminal-prompt {
  flex-shrink: 0;
  color: #00ff88;
  font-family: 'Ubuntu Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.9rem;
  margin-right: 0.35em;
}

.terminal-input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: 'Ubuntu Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.9rem;
  outline: none;
}

.terminal-input::placeholder {
  color: #555;
}

.terminal-input:disabled {
  color: #666;
}

/* Blink cursor when focused (Linux terminal feel) */
.terminal-input:focus {
  caret-color: #00ff88;
}

/* .msg-bubble used by JS — styled as terminal lines */
.msg-bubble {
  max-width: 100%;
  padding: 0;
  font-family: 'Ubuntu Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  background: transparent;
  border-radius: 0;
}

/* her = user input — prompt + text */
.msg-bubble.her {
  color: #fff;
}

.msg-bubble .term-prompt {
  color: #00ff88;
}

/* you = AI/system response — output only */
.msg-bubble.you {
  color: #e0e0e0;
}

.msg-bubble.msg-loading {
  color: #888;
  font-style: italic;
}

.msg-bubble.term-welcome {
  color: #555;
  font-size: 0.8rem;
}

.messages-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 320px;
}

.messages-body.is-loading {
  cursor: wait;
}

.messages-body.is-loading .terminal-input {
  cursor: wait;
}

.chat-send-btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background: #00ff88;
  color: #0c0c0c;
  font-family: 'Ubuntu Mono', monospace;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.chat-send-btn:hover {
  background: #33ff99;
}

/* Music */
.playlist-list {
  margin-bottom: 1rem;
}

.playlist-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.playlist-item:last-child {
  border-bottom: none;
}

.playlist-item .name {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.playlist-item .description {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.spotify-embed-wrap {
  margin-top: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  min-height: 152px;
}

.spotify-embed-wrap iframe {
  width: 100%;
  height: 152px;
  border: none;
}

/* System Info */
.system-info {
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-dim);
}

.system-info .row {
  display: flex;
  gap: 0.5rem;
}

.system-info .key {
  min-width: 140px;
  color: var(--accent);
}

.system-info .footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-emotional);
  font-style: italic;
  color: var(--text);
}

/* System Monitor (emocional) */
.system-monitor-window {
  max-width: 520px;
}

.system-monitor-body {
  padding: 1.25rem 1.5rem;
}

.sysmon {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sysmon-card {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: sysmon-fade-in 0.35s ease;
}

.sysmon-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.sysmon-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.sysmon-value {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.sysmon-sub {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}

.sysmon-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.sysmon-pill--low {
  background: rgba(56, 142, 60, 0.25);
  color: #c8e6c9;
}

.sysmon-pill--mid {
  background: rgba(255, 179, 0, 0.2);
  color: #ffe082;
}

.sysmon-pill--high {
  background: rgba(239, 83, 80, 0.25);
  color: #ffcdd2;
}

.sysmon-pill--battery-good {
  background: rgba(56, 142, 60, 0.25);
  color: #c8e6c9;
}

.sysmon-pill--battery-charge {
  background: rgba(255, 179, 0, 0.2);
  color: #ffe082;
}

.sysmon-pill--battery-low {
  background: rgba(239, 83, 80, 0.25);
  color: #ffcdd2;
}

.sysmon-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.sysmon-bar-fill {
  height: 100%;
  border-radius: inherit;
  transform-origin: left;
  transition: width 0.3s ease;
}

.sysmon-bar-fill--low {
  background: linear-gradient(90deg, #4caf50, #66bb6a);
}

.sysmon-bar-fill--mid {
  background: linear-gradient(90deg, #ffb300, #ffca28);
}

.sysmon-bar-fill--high {
  background: linear-gradient(90deg, #ef5350, #e57373);
}

.sysmon-battery-wrap {
  margin-top: 0.2rem;
}

.sysmon-battery {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sysmon-battery-body {
  position: relative;
  width: 72px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.sysmon-battery-body--good {
  border-color: rgba(129, 199, 132, 0.9);
}

.sysmon-battery-body--charge {
  border-color: rgba(255, 213, 79, 0.9);
}

.sysmon-battery-body--low {
  border-color: rgba(239, 83, 80, 0.9);
}

.sysmon-battery-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  transition: width 0.35s ease;
}

.sysmon-battery-fill--good {
  background: linear-gradient(90deg, #4caf50, #81c784);
}

.sysmon-battery-fill--charge {
  background: linear-gradient(90deg, #ffb300, #ffd54f);
}

.sysmon-battery-fill--low {
  background: linear-gradient(90deg, #ef5350, #e57373);
}

.sysmon-battery-cap {
  width: 5px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
}

@keyframes sysmon-fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Game — Reach the Heart: corações, obstáculos, HUD */
.game-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: #0d0508;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-red);
  box-shadow: 0 0 24px rgba(217, 48, 80, 0.15);
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 320px;
  background: linear-gradient(180deg, #1a0508 0%, #2d0e12 100%);
}

.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: rgba(10, 2, 4, 0.88);
  backdrop-filter: blur(6px);
  padding: 1.5rem;
}

.game-overlay-title {
  margin: 0;
  font-family: var(--font-emotional);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

.game-overlay-title[hidden] {
  display: none !important;
}

.game-instructions {
  margin: 0;
  text-align: center;
  color: var(--text);
  font-family: var(--font-emotional);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 280px;
}

.game-controls {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.game-btn {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 24px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px var(--red-glow);
}

.game-btn:hover {
  background: var(--accent-strong);
  transform: scale(1.06);
  box-shadow: 0 6px 20px var(--red-glow);
}

.game-message {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 1.25rem;
  background: rgba(22, 5, 10, 0.96);
  border: 1px solid var(--border-red);
  border-radius: 12px;
  font-family: var(--font-emotional);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.game-message[hidden] {
  display: none !important;
}

/* Links inside modals — reduce web affordance: no underline, pointer cursor */
.modal a {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.modal a:hover {
  color: var(--text);
}

/* ========== Files / Memories (Finder-style) ========== */
.files-window {
  max-width: 640px;
}

.files-header {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.files-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  order: 1;
}

.files-back-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.files-back-btn:hover:not(:disabled) {
  background: var(--surface-hover);
}
.files-back-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.files-breadcrumb {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
}

.files-filter-wrap {
  flex-shrink: 0;
}

.files-filter-btn {
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.files-filter-btn:hover,
.files-filter-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.files-title {
  order: 2;
  flex: 1;
}

.files-body {
  padding: 1rem 1.25rem;
}

.files-content {
  min-height: 200px;
}

.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.files-folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.files-folder-item:hover {
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.files-folder-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.files-folder-icon {
  font-size: 2rem;
}

.files-folder-name {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.files-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.files-photo-card {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.files-photo-card:hover {
  border-color: var(--accent-soft);
  transform: scale(1.02);
}

.files-photo-thumb-wrap {
  aspect-ratio: 1;
  overflow: hidden;
}
.files-photo-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.files-fav-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding: 0.2rem;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.files-fav-btn:hover {
  background: var(--accent-soft);
}

.files-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.files-video-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.files-video-card:hover {
  border-color: var(--accent-soft);
  transform: scale(1.02);
}

.files-video-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.files-video-title {
  font-size: 0.85rem;
  color: var(--text);
  text-align: center;
}

.files-audio-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.files-audio-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  transition: background var(--transition-fast);
}
.files-audio-item:hover {
  background: var(--surface-hover);
}

.files-audio-play {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.files-audio-play:hover {
  background: var(--accent-strong);
}

.files-audio-title {
  flex: 1;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-audio-artist {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.files-letters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.files-letter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.files-letter-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.files-letter-row:hover {
  background: var(--surface-hover);
}

.files-letter-title {
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.files-letter-date {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.files-empty {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-emotional);
}

/* Letters Viewer (leitura de cartas — estilo Notes) */
.letters-viewer-window {
  max-width: 520px;
}

.letters-viewer-body {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.letters-list-wrap[hidden],
.letter-reader-wrap[hidden] {
  display: none !important;
}

.letters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.letters-list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.75rem 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.letters-list-item:hover {
  background: var(--surface-hover);
}

.letters-list-title {
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.letters-list-date {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.letter-reader-wrap {
  flex: 1;
}

.letter-reader-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-emotional);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.letter-reader-date {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.letter-reader-content {
  font-family: var(--font-emotional);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
}
.letter-reader-content p {
  margin: 0 0 0.75rem;
}
.letter-reader-content p:last-child {
  margin-bottom: 0;
}

.letter-reader-back {
  margin-top: 1.5rem;
}

/* ========== App Letters (pasta de cartas) ========== */
.letters-app-window {
  max-width: 620px;
}

.letters-app-body {
  display: flex;
  gap: 0;
  padding: 0;
  min-height: 360px;
  overflow: hidden;
}

.letters-app-folder {
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-red);
  background: rgba(0, 0, 0, 0.2);
}

.letters-app-folder-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.letters-app-folder-icon {
  font-size: 1rem;
}

.letters-app-sidebar {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.letters-app-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid transparent;
  color: inherit;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.letters-app-item:hover {
  background: var(--surface-hover);
}

.letters-app-item.is-active {
  background: var(--surface-selected);
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.letters-app-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.letters-app-item-title {
  font-weight: 500;
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.letters-app-item-date {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.letters-app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}

.letters-app-placeholder {
  margin: auto 0;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-emotional);
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.letters-app-placeholder-icon {
  font-size: 2rem;
  opacity: 0.6;
}

.letters-app-placeholder[hidden],
.letters-app-reader[hidden] {
  display: none !important;
}

.letters-app-reader {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.letters-app-reader-paper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-red) transparent;
}

.letters-app-reader-paper::-webkit-scrollbar {
  width: 6px;
}

.letters-app-reader-paper::-webkit-scrollbar-track {
  background: transparent;
}

.letters-app-reader-paper::-webkit-scrollbar-thumb {
  background: var(--border-red);
  border-radius: 3px;
}

.letters-app-reader-paper::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.letters-app-reader-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-emotional);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.letters-app-reader-date {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.letters-app-reader-mood {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.letters-app-reader-content {
  font-family: var(--font-emotional);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-dim);
  white-space: pre-wrap;
}

.letters-app-reader-content p {
  margin: 0 0 0.75rem;
}

.letters-app-reader-content p:last-child {
  margin-bottom: 0;
}

.letters-app-p-empty {
  margin: 0 0 0.75rem;
  min-height: 1em;
}

/* ========== App Heartbeat (ECG + botões emocionais) ========== */
.heartbeat-app-window {
  max-width: 560px;
}

.heartbeat-app-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.heartbeat-ecg-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 2, 5, 0.98) 0%, rgba(18, 4, 8, 0.98) 100%);
  border: 1px solid var(--border-red);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(217, 48, 80, 0.08);
}

.heartbeat-ecg-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
}

.heartbeat-bpm-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.heartbeat-bpm {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px var(--accent-soft);
}

.heartbeat-bpm-label {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.heartbeat-heart-pulse {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  animation: heartbeat-pulse 0.8s ease-in-out infinite;
  animation-duration: var(--heartbeat-duration, 0.833s);
}

.heartbeat-heart-pulse svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(217, 48, 80, 0.5));
}

@keyframes heartbeat-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.12); opacity: 0.95; }
  50% { transform: scale(1.08); opacity: 1; }
  55% { transform: scale(1.12); opacity: 0.95; }
}

.heartbeat-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.heartbeat-preset-btn {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-family: var(--font-emotional);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.heartbeat-preset-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-soft);
  color: var(--text);
}

.heartbeat-preset-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.heartbeat-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.heartbeat-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.heartbeat-btn:hover {
  background: var(--surface-hover);
}

.heartbeat-btn--reset {
  width: auto;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.heartbeat-mute {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 1rem;
  cursor: pointer;
  margin-left: auto;
  transition: background var(--transition-fast);
}

.heartbeat-mute:hover {
  background: var(--surface-hover);
}

/* ========== App Wordle Diário ========== */
.wordle-window {
  max-width: 380px;
}

.wordle-body {
  padding: 1rem 1.25rem 1.5rem;
  text-align: center;
}

.wordle-subtitle {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.wordle-date {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  color: var(--text-disabled);
}

.wordle-grid-wrap {
  margin-bottom: 1rem;
}

.wordle-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.wordle-row {
  display: flex;
  gap: 4px;
}

.wordle-cell {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-transform: uppercase;
}

.wordle-cell--green {
  background: #3a7d44;
  border-color: #3a7d44;
  color: #fff;
}

.wordle-cell--yellow {
  background: #c9b458;
  border-color: #c9b458;
  color: #1a1a1a;
}

.wordle-cell--grey {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--text-disabled);
  color: var(--text-dim);
}

.wordle-input-wrap {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.wordle-input {
  width: 180px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
}

.wordle-submit {
  padding: 0.5rem 1rem;
}

.wordle-result {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}

.wordle-result-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.wordle-result-word {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.wordle-result-pts {
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent);
}

.wordle-keyboard-wrap {
  margin-top: 1rem;
}

.wordle-keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.wordle-kb-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.wordle-kb-key {
  min-width: 28px;
  height: 40px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.wordle-kb-key:hover {
  background: var(--surface-hover);
}

.wordle-kb-key--green {
  background: #3a7d44;
  color: #fff;
}

.wordle-kb-key--yellow {
  background: #c9b458;
  color: #1a1a1a;
}

.wordle-kb-key--grey {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
}

.wordle-kb-key--enter {
  font-size: 0.65rem;
  padding: 0 8px;
}

.wordle-kb-key--backspace {
  padding: 0 10px;
  font-size: 1.1rem;
}

.wordle-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--text-disabled);
}

/* ========== App Store (Loja) ========== */
.store-window {
  max-width: 520px;
}

.store-body {
  padding: 1rem 1.25rem 1.5rem;
}

.store-points {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--text-dim);
}

.store-points strong {
  color: var(--accent);
}

.store-main {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.store-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.store-purchased {
  flex-shrink: 0;
  width: 180px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.store-purchased-title {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.store-purchased-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.store-purchased-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-disabled);
}

.store-purchased-item {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.store-purchased-qty {
  color: var(--accent);
  font-weight: 600;
}

.store-item {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.store-item--unlocked {
  border-color: var(--accent-soft);
  background: rgba(217, 48, 80, 0.08);
}

.store-item-name {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.store-item-desc {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.store-item-action {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-item-badge {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 500;
}

.store-item-cost {
  font-size: 0.85rem;
  color: var(--text-disabled);
}

.store-buy-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

/* App icon hidden by Settings */
.app-icon.app-icon--hidden {
  display: none !important;
}

/* ========== App Settings ========== */
.settings-window {
  max-width: 520px;
  max-height: 90vh;
}

.settings-body {
  padding: 1rem 1.25rem 1.25rem;
  overflow-y: auto;
}

.settings-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.settings-row:last-child {
  margin-bottom: 0;
}

.settings-row--toggle {
  min-height: 2rem;
}

.settings-label {
  font-size: 0.9rem;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
}

.settings-select {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.88rem;
  cursor: pointer;
}

.settings-toggle {
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast);
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform var(--transition-fast);
}

.settings-toggle:hover {
  background: var(--surface-hover);
}

.settings-toggle.is-on,
.settings-toggle[aria-checked="true"] {
  background: var(--accent-soft);
}

.settings-toggle.is-on::after,
.settings-toggle[aria-checked="true"]::after {
  transform: translateX(20px);
  background: var(--accent);
}

.settings-accent-wrap {
  display: flex;
  gap: 0.5rem;
}

.settings-accent-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--accent-swatch, var(--accent));
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.settings-accent-btn:hover {
  transform: scale(1.1);
}

.settings-accent-btn.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--border);
}

.settings-system-info {
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.settings-info-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.settings-info-key {
  min-width: 120px;
  color: var(--accent);
}

.settings-about-btn {
  margin-top: 0.25rem;
}

.settings-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--text-disabled);
  font-style: italic;
}

.settings-apps-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-radius: var(--radius-sm);
}

.settings-app-name {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.settings-app-row .settings-toggle {
  width: 40px;
  height: 22px;
}

.settings-app-row .settings-toggle::after {
  width: 18px;
  height: 18px;
}

.settings-app-row .settings-toggle.is-on::after,
.settings-app-row .settings-toggle[aria-checked="true"]::after {
  transform: translateX(18px);
}

/* ========== App Trips (Planner de Viagens) ========== */
.trips-window {
  max-width: 1100px;
  width: 95vw;
  max-height: 90vh;
}

.trips-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.trips-layout {
  display: grid;
  grid-template-columns: 220px 280px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.trips-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  min-height: 0;
}

.trips-sidebar-header {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trips-btn {
  height: 34px;
  padding: 0 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trips-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-soft);
}

.trips-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
}

.trips-btn--ghost:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.trips-btn--small {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
}

.trips-btn--danger:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.trips-new-wrap {
  display: none;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

.trips-new-wrap.is-visible {
  display: block;
}

.trips-new-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trips-new-form h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.trips-new-form input {
  height: 34px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
}

.trips-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.trips-list {
  flex: 1;
  padding: 0.5rem;
  overflow-y: auto;
}

.trips-empty-msg,
.trips-placeholder {
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 1rem;
  text-align: center;
}

.trips-card {
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.trips-card:hover {
  background: var(--surface-hover);
  border-color: var(--accent-soft);
}

.trips-card.is-active {
  background: var(--surface-selected);
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.trips-card-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.trips-card-dest,
.trips-card-dates {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.trips-detail {
  padding: 0.9rem;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.trips-detail-header {
  margin-bottom: 0.75rem;
}

.trips-detail-title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

.trips-detail-meta {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}

.trips-detail-meta span {
  display: block;
}

.trips-detail-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.trips-detail-notes {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.trips-days-sidebar {
  margin-top: 0.75rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.trips-days-header {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.trips-days-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.trips-day-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.trips-day-item:hover {
  background: var(--surface-hover);
  border-color: var(--accent-soft);
}

.trips-day-item.is-active {
  background: var(--surface-selected);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.trips-day-date {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.trips-day-panel {
  padding: 1rem;
  overflow: hidden;
  min-height: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.trips-day-panel-header {
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.trips-day-title-large {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.trips-day-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.trips-day-summary span {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.trips-day-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.trips-tab {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.trips-tab:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.trips-tab.is-active {
  background: var(--surface-selected);
  border-color: var(--accent-soft);
  color: var(--text);
}

.trips-day-tab-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.trips-tab-checklist {
  overflow-y: auto;
  padding: 0.25rem 0;
}

.trips-tab-checklist .trips-checklist-section + .trips-checklist-section {
  margin-top: 1.25rem;
}

.trips-costs {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ========== Timeline (6h–24h, grid fixo) ========== */
.trips-tab-timeline {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.trips-timeline {
  flex: 1;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.trips-timelineViewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.trips-timelineViewport::-webkit-scrollbar {
  width: 8px;
}

.trips-timelineViewport::-webkit-scrollbar-thumb {
  background: var(--border-red);
  border-radius: 4px;
}

.trips-timelineScrollContent {
  display: flex;
  flex-shrink: 0;
}

.trips-hours {
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  z-index: 5;
  background: rgba(18, 6, 10, 0.98);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.trips-hour {
  height: var(--trip-hour-h);
  padding: 6px 10px 0;
  text-align: right;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}

.trips-grid {
  flex: 1;
  position: relative;
  min-width: 0;
}

.trips-gridInner {
  position: relative;
  width: 100%;
  min-height: calc(18 * var(--trip-hour-h));
}

.trips-timeline-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.trips-timeline-block {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 1;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  box-sizing: border-box;
}

.trips-timeline-block:hover {
  background: var(--surface-hover);
}

.trips-timeline-block--conflict {
  border-left-color: #e74c3c;
  box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.4);
}

.trips-timeline-block--done {
  opacity: 0.75;
}

.trips-timeline-block:hover .trips-block-actions {
  opacity: 1;
}

.trips-timeline-block .trips-block-time {
  font-size: 0.75rem;
  margin-bottom: 0.15rem;
}

.trips-timeline-block .trips-block-title {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trips-timeline-block .trips-block-loc,
.trips-timeline-block .trips-block-cost {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trips-timeline-block .trips-block-actions {
  opacity: 0;
  margin-top: 0.35rem;
}

.trips-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trips-block {
  padding: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}

.trips-block--conflict {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.trips-block--done {
  opacity: 0.75;
}

.trips-block-badge {
  font-size: 0.7rem;
  color: var(--accent);
  margin-bottom: 0.25rem;
  display: block;
}

.trips-block-time {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.2rem;
}

.trips-block-title {
  font-weight: 500;
  font-size: 0.9rem;
}

.trips-block-cat {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 400;
}

.trips-block-loc,
.trips-block-notes {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

.trips-block-cost {
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.trips-block-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.trips-block-btn {
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
}

.trips-block-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.trips-links-section,
.trips-checklist-section {
  margin-top: 1rem;
}

.trips-checklist-section h5 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.trips-links-list,
.trips-checklist-list {
  margin-bottom: 0.5rem;
}

.trips-link-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
}

.trips-link-item a {
  color: var(--accent);
  text-decoration: none;
}

.trips-link-item a:hover {
  text-decoration: underline;
}

.trips-link-remove,
.trips-check-remove {
  padding: 0.15rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
}

.trips-link-remove:hover,
.trips-check-remove:hover {
  color: var(--accent);
}

.trips-add-link,
.trips-add-check {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.trips-add-link input,
.trips-add-check input {
  height: 34px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  flex: 1;
  min-width: 100px;
}

.trips-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
}

.trips-check-item.is-done span {
  text-decoration: line-through;
  color: var(--text-dim);
}

.trips-check-item input[type="checkbox"] {
  cursor: pointer;
}

.trips-form-row {
  margin-bottom: 0.5rem;
}

.trips-form-row label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.2rem;
}

.trips-form-row input,
.trips-form-row select {
  height: 34px;
  width: 100%;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
}

.trips-form-row textarea {
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
}

.trips-block-form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 1.5rem;
}

.trips-block-form {
  background: rgba(28, 10, 14, 0.98);
  border: 1px solid var(--border-red);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.trips-block-form-scroll {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  flex: 1;
  min-height: 0;
}

.trips-block-form-scroll::-webkit-scrollbar {
  width: 6px;
}

.trips-block-form-scroll::-webkit-scrollbar-thumb {
  background: var(--border-red);
  border-radius: 3px;
}

.trips-block-form h4 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--text);
}

.trips-form-row--inline {
  display: flex;
  gap: 1rem;
}

.trips-form-row--inline > div {
  flex: 1;
}

.trips-block-form-links-wrap {
  margin-top: 0.35rem;
}

.trips-block-form-links-list {
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}

.trips-block-form-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
}

.trips-block-form-link a {
  color: var(--accent);
  text-decoration: none;
}

.trips-block-form-link a:hover {
  text-decoration: underline;
}

.trips-block-form-link .trips-link-remove {
  padding: 0.15rem 0.4rem;
  margin-left: auto;
}

.trips-block-form .trips-add-link {
  display: flex;
  gap: 0.35rem;
}

.trips-block-form .trips-add-link input {
  flex: 1;
  min-width: 0;
}

.trips-block-form .trips-add-link .trips-btn {
  padding: 0.4rem 0.6rem;
  flex-shrink: 0;
}

.trips-block-form .trips-form-actions {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.trips-block-form .trips-form-row {
  margin-bottom: 0.75rem;
}

.trips-block-form .trips-form-row:last-child {
  margin-bottom: 0;
}

.trips-block-link {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  margin-right: 0.5rem;
  margin-top: 0.15rem;
}

.trips-block-link:hover {
  text-decoration: underline;
}

.trips-block-links {
  margin-top: 0.2rem;
}

.trips-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .trips-layout {
    grid-template-columns: 1fr;
    min-height: 300px;
  }

  .trips-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .trips-detail {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .trips-day-panel {
    border-top: 1px solid var(--border);
  }
}

/* About modal */
.about-window {
  max-width: 440px;
}

.about-manifesto {
  margin: 0;
  font-family: var(--font-emotional);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-dim);
  white-space: pre-wrap;
}

/* Theme light (opcional) */
html.theme-light body,
html.theme-light .desktop::before {
  background: #f5e8ea;
}

html.theme-light .menu-bar,
html.theme-light .taskbar {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(217, 48, 80, 0.25);
}

html.theme-light .modal-window {
  background: linear-gradient(180deg, rgba(255, 250, 251, 0.98) 0%, rgba(255, 240, 245, 0.98) 100%);
  border-color: rgba(217, 48, 80, 0.35);
}

html.theme-light .modal-header h2,
html.theme-light .apps-grid .app-name {
  color: #2d0a0e;
}

html.theme-light .modal-body,
html.theme-light .settings-label {
  color: #4a1520;
}

/* ========== Temas fixes (predefinições) ========== */

/* Midnight Wine — atual, mais profundo */
html[data-theme-preset="midnight-wine"] {
  --bg-start: #0d0305;
  --bg-end: #1a0608;
  --surface: rgba(255, 235, 238, 0.05);
  --surface-hover: rgba(255, 180, 195, 0.14);
  --surface-active: rgba(255, 160, 175, 0.08);
  --surface-selected: rgba(217, 48, 80, 0.2);
  --text: #ffdde3;
  --text-dim: rgba(255, 210, 218, 0.85);
  --text-disabled: rgba(255, 180, 195, 0.4);
  --accent: #c92a48;
  --accent-strong: #9e1835;
  --accent-soft: rgba(201, 42, 72, 0.35);
  --red-glow: rgba(158, 24, 53, 0.55);
  --border: rgba(255, 170, 182, 0.12);
  --border-red: rgba(201, 42, 72, 0.5);
  --shadow: 0 10px 40px rgba(80, 0, 15, 0.45);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
}
html[data-theme-preset="midnight-wine"] body { background: #080204; }
html[data-theme-preset="midnight-wine"] .desktop::before {
  background: linear-gradient(165deg, #0d0305 0%, #1a0608 25%, #2a0a0c 50%, #150406 75%, #080204 100%);
}
html[data-theme-preset="midnight-wine"] .desktop::after {
  background: radial-gradient(ellipse 100% 60% at 30% 10%, rgba(201, 42, 72, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 70% 90%, rgba(158, 24, 53, 0.14) 0%, transparent 45%);
}

/* Rose Quartz — claro, suave, pastel */
html[data-theme-preset="rose-quartz"] {
  --bg-start: #fdf2f4;
  --bg-end: #f8e4e8;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-hover: rgba(233, 196, 206, 0.5);
  --surface-active: rgba(219, 180, 195, 0.4);
  --surface-selected: rgba(217, 120, 140, 0.25);
  --text: #5c2d3a;
  --text-dim: #7a4a55;
  --text-disabled: #a67d8a;
  --accent: #c45c7a;
  --accent-strong: #a84a66;
  --accent-soft: rgba(196, 92, 122, 0.25);
  --red-glow: rgba(164, 74, 102, 0.2);
  --border: rgba(180, 130, 145, 0.3);
  --border-red: rgba(196, 92, 122, 0.4);
  --shadow: 0 8px 32px rgba(180, 100, 120, 0.15);
  --shadow-soft: 0 4px 16px rgba(150, 80, 100, 0.1);
}
html[data-theme-preset="rose-quartz"] body { background: #f8e4e8; }
html[data-theme-preset="rose-quartz"] .desktop::before {
  background: linear-gradient(165deg, #fdf2f4 0%, #f8e4e8 40%, #f0d4da 100%);
}
html[data-theme-preset="rose-quartz"] .desktop::after { background: none; }
html[data-theme-preset="rose-quartz"] .menu-bar,
html[data-theme-preset="rose-quartz"] .taskbar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(196, 92, 122, 0.25);
}
html[data-theme-preset="rose-quartz"] .modal-window {
  background: linear-gradient(180deg, rgba(255, 252, 253, 0.98) 0%, rgba(253, 242, 246, 0.98) 100%);
  border-color: rgba(196, 92, 122, 0.35);
}

/* Paper Notes — off-white, cards como post-its */
html[data-theme-preset="paper-notes"] {
  --bg-start: #f5f0e6;
  --bg-end: #ebe4d8;
  --surface: rgba(255, 251, 235, 0.9);
  --surface-hover: rgba(255, 245, 210, 0.95);
  --surface-active: rgba(255, 238, 190, 0.9);
  --surface-selected: rgba(255, 220, 140, 0.4);
  --text: #3d3528;
  --text-dim: #5c5245;
  --text-disabled: #8a7d6a;
  --accent: #b8860b;
  --accent-strong: #8b6914;
  --accent-soft: rgba(184, 134, 11, 0.25);
  --red-glow: rgba(139, 105, 20, 0.15);
  --border: rgba(160, 145, 120, 0.4);
  --border-red: rgba(184, 134, 11, 0.5);
  --shadow: 0 6px 24px rgba(120, 100, 60, 0.2);
  --shadow-soft: 0 3px 12px rgba(100, 85, 50, 0.15);
  --radius: 8px;
  --radius-sm: 4px;
}
html[data-theme-preset="paper-notes"] body { background: #ebe4d8; }
html[data-theme-preset="paper-notes"] .desktop::before {
  background: linear-gradient(165deg, #f5f0e6 0%, #ebe4d8 50%, #e2d9c8 100%);
}
html[data-theme-preset="paper-notes"] .desktop::after { background: none; }
html[data-theme-preset="paper-notes"] .menu-bar,
html[data-theme-preset="paper-notes"] .taskbar {
  background: rgba(255, 251, 240, 0.95);
  border-color: rgba(184, 134, 11, 0.3);
}
html[data-theme-preset="paper-notes"] .modal-window {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 250, 235, 0.98) 100%);
  border-color: rgba(184, 134, 11, 0.4);
  box-shadow: 0 8px 32px rgba(100, 80, 40, 0.2), 0 0 0 1px rgba(184, 134, 11, 0.1);
}
html[data-theme-preset="paper-notes"] .icon-wrapper,
html[data-theme-preset="paper-notes"] .countdown-widget-card-inner {
  box-shadow: 0 2px 8px rgba(120, 100, 60, 0.15), 0 0 0 1px rgba(184, 134, 11, 0.08);
}

/* Polaroid — UI com molduras tipo fotos impressas */
html[data-theme-preset="polaroid"] {
  --bg-start: #e8e4dc;
  --bg-end: #ddd8ce;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-hover: rgba(250, 248, 245, 0.98);
  --surface-active: rgba(245, 242, 238, 0.98);
  --surface-selected: rgba(200, 190, 180, 0.5);
  --text: #2c2823;
  --text-dim: #4a4540;
  --text-disabled: #7a756d;
  --accent: #8b7355;
  --accent-strong: #6b5344;
  --accent-soft: rgba(139, 115, 85, 0.2);
  --red-glow: rgba(107, 83, 68, 0.15);
  --border: rgba(120, 110, 100, 0.5);
  --border-red: rgba(139, 115, 85, 0.5);
  --shadow: 0 12px 36px rgba(80, 70, 60, 0.25);
  --shadow-soft: 0 6px 20px rgba(60, 55, 50, 0.2);
  --radius: 4px;
  --radius-sm: 2px;
}
html[data-theme-preset="polaroid"] body { background: #ddd8ce; }
html[data-theme-preset="polaroid"] .desktop::before {
  background: linear-gradient(165deg, #e8e4dc 0%, #ddd8ce 100%);
}
html[data-theme-preset="polaroid"] .desktop::after { background: none; }
html[data-theme-preset="polaroid"] .modal-window {
  background: #fff;
  border: 12px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
html[data-theme-preset="polaroid"] .menu-bar,
html[data-theme-preset="polaroid"] .taskbar {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(120, 110, 100, 0.4);
}
html[data-theme-preset="polaroid"] .app-icon,
html[data-theme-preset="polaroid"] .icon-wrapper {
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
html[data-theme-preset="polaroid"] .countdown-widget-card-inner {
  border: 8px solid #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Terminal Love — verde terminal + monospace mais agressivo */
html[data-theme-preset="terminal-love"] {
  --bg-start: #0a0e0a;
  --bg-end: #0d120d;
  --surface: rgba(0, 40, 20, 0.6);
  --surface-hover: rgba(0, 80, 40, 0.25);
  --surface-active: rgba(0, 60, 30, 0.2);
  --surface-selected: rgba(0, 255, 136, 0.15);
  --text: #e0ffe8;
  --text-dim: rgba(0, 255, 136, 0.85);
  --text-disabled: rgba(0, 200, 100, 0.45);
  --accent: #00ff88;
  --accent-strong: #00cc6a;
  --accent-soft: rgba(0, 255, 136, 0.25);
  --red-glow: rgba(0, 255, 136, 0.3);
  --border: rgba(0, 255, 136, 0.2);
  --border-red: rgba(0, 255, 136, 0.5);
  --shadow: 0 8px 32px rgba(0, 40, 20, 0.5);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.4);
  --font: 'Ubuntu Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  --font-emotional: 'Ubuntu Mono', var(--font);
}
html[data-theme-preset="terminal-love"] body { background: #060a06; }
html[data-theme-preset="terminal-love"] .desktop::before {
  background: linear-gradient(165deg, #0a0e0a 0%, #0d120d 50%, #0a0e0a 100%);
}
html[data-theme-preset="terminal-love"] .desktop::after {
  background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(0, 255, 136, 0.08) 0%, transparent 50%);
}
html[data-theme-preset="terminal-love"] .menu-bar .os-name,
html[data-theme-preset="terminal-love"] .clock,
html[data-theme-preset="terminal-love"] .app-name {
  font-family: var(--font);
  letter-spacing: 0.02em;
}
html[data-theme-preset="terminal-love"] .icon-wrapper svg { color: var(--accent); }

/* Neon Heart — dark + neon pink/cyan, glow leve */
html[data-theme-preset="neon-heart"] {
  --bg-start: #0d0510;
  --bg-end: #150818;
  --surface: rgba(255, 20, 120, 0.06);
  --surface-hover: rgba(255, 20, 120, 0.12);
  --surface-active: rgba(255, 80, 160, 0.08);
  --surface-selected: rgba(255, 20, 120, 0.2);
  --text: #ffe0f0;
  --text-dim: rgba(255, 180, 220, 0.9);
  --text-disabled: rgba(255, 100, 160, 0.5);
  --accent: #ff1493;
  --accent-strong: #ff69b4;
  --accent-soft: rgba(255, 20, 147, 0.4);
  --red-glow: rgba(255, 20, 147, 0.6);
  --border: rgba(255, 105, 180, 0.25);
  --border-red: rgba(0, 255, 255, 0.4);
  --shadow: 0 8px 32px rgba(255, 20, 147, 0.25);
  --shadow-soft: 0 4px 20px rgba(0, 255, 255, 0.1);
}
html[data-theme-preset="neon-heart"] body { background: #08050a; }
html[data-theme-preset="neon-heart"] .desktop::before {
  background: linear-gradient(165deg, #0d0510 0%, #150818 30%, #0a0512 70%, #0d0510 100%);
}
html[data-theme-preset="neon-heart"] .desktop::after {
  background: radial-gradient(ellipse 100% 60% at 20% 10%, rgba(255, 20, 147, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse 80% 50% at 80% 80%, rgba(0, 255, 255, 0.12) 0%, transparent 45%);
}
html[data-theme-preset="neon-heart"] .modal-window,
html[data-theme-preset="neon-heart"] .countdown-widget-card-inner {
  box-shadow: 0 0 40px rgba(255, 20, 147, 0.15), 0 0 80px rgba(0, 255, 255, 0.05);
}
html[data-theme-preset="neon-heart"] .icon-wrapper {
  box-shadow: 0 0 20px rgba(255, 20, 147, 0.2);
}
html[data-theme-preset="neon-heart"] .menu-bar { border-bottom-color: rgba(255, 20, 147, 0.4); }
html[data-theme-preset="neon-heart"] .taskbar { border-top-color: rgba(255, 20, 147, 0.4); }

/* Ocean Calm — azul/teal, vibe segura */
html[data-theme-preset="ocean-calm"] {
  --bg-start: #051820;
  --bg-end: #0a2430;
  --surface: rgba(160, 220, 230, 0.06);
  --surface-hover: rgba(100, 200, 220, 0.14);
  --surface-active: rgba(80, 180, 200, 0.1);
  --surface-selected: rgba(0, 180, 200, 0.2);
  --text: #d0f0f5;
  --text-dim: rgba(180, 230, 238, 0.85);
  --text-disabled: rgba(120, 200, 210, 0.5);
  --accent: #20b2aa;
  --accent-strong: #008b8b;
  --accent-soft: rgba(32, 178, 170, 0.3);
  --red-glow: rgba(0, 139, 139, 0.4);
  --border: rgba(100, 200, 210, 0.2);
  --border-red: rgba(32, 178, 170, 0.5);
  --shadow: 0 8px 32px rgba(0, 80, 90, 0.3);
  --shadow-soft: 0 4px 16px rgba(0, 60, 70, 0.25);
}
html[data-theme-preset="ocean-calm"] body { background: #040d12; }
html[data-theme-preset="ocean-calm"] .desktop::before {
  background: linear-gradient(165deg, #051820 0%, #0a2430 40%, #062028 70%, #051820 100%);
}
html[data-theme-preset="ocean-calm"] .desktop::after {
  background: radial-gradient(ellipse 100% 60% at 50% 20%, rgba(32, 178, 170, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(0, 139, 139, 0.1) 0%, transparent 45%);
}
html[data-theme-preset="ocean-calm"] .menu-bar .os-name { color: var(--accent); }
html[data-theme-preset="ocean-calm"] .icon-wrapper svg { color: var(--accent); }

/* Golden Hour — laranja/mel, luz de fim de tarde */
html[data-theme-preset="golden-hour"] {
  --bg-start: #1a1205;
  --bg-end: #2a1a08;
  --surface: rgba(255, 235, 200, 0.06);
  --surface-hover: rgba(255, 210, 150, 0.14);
  --surface-active: rgba(255, 190, 120, 0.1);
  --surface-selected: rgba(255, 165, 80, 0.2);
  --text: #fff0dc;
  --text-dim: rgba(255, 230, 200, 0.85);
  --text-disabled: rgba(255, 200, 140, 0.5);
  --accent: #e89520;
  --accent-strong: #c77a10;
  --accent-soft: rgba(232, 149, 32, 0.35);
  --red-glow: rgba(199, 122, 16, 0.45);
  --border: rgba(255, 200, 140, 0.2);
  --border-red: rgba(232, 149, 32, 0.5);
  --shadow: 0 8px 32px rgba(120, 70, 10, 0.35);
  --shadow-soft: 0 4px 16px rgba(80, 50, 0, 0.25);
}
html[data-theme-preset="golden-hour"] body { background: #0f0a03; }
html[data-theme-preset="golden-hour"] .desktop::before {
  background: linear-gradient(165deg, #1a1205 0%, #2a1a08 30%, #3d2510 50%, #2a1a08 100%);
}
html[data-theme-preset="golden-hour"] .desktop::after {
  background: radial-gradient(ellipse 100% 60% at 30% 10%, rgba(232, 149, 32, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 70% 90%, rgba(199, 122, 16, 0.15) 0%, transparent 45%);
}
html[data-theme-preset="golden-hour"] .menu-bar .os-name { color: var(--accent); }
html[data-theme-preset="golden-hour"] .icon-wrapper svg { color: var(--accent); }
html[data-theme-preset="golden-hour"] .countdown-widget-time { color: var(--accent); }

/* Reduzir animações */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.02s !important;
  transition-duration: 0.02s !important;
}

/* Video player (mock) */
.video-player-window {
  max-width: 480px;
}

.video-player-placeholder {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--font-emotional);
}

/* Toast (notificações) */
.toast-container {
  position: fixed;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 90vw;
}

.toast {
  padding: 0.75rem 1.25rem;
  background: rgba(35, 10, 18, 0.98);
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-emotional);
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0);
}
.toast-icon { margin-right: 0.5rem; }
.toast--sweet { border-color: var(--accent-soft); background: rgba(45, 10, 18, 0.98); }
.reduce-motion .toast { transition-duration: 0.1s; }

/* Achievements */
.achievements-window {
  max-width: 520px;
}
.achievements-body {
  padding: 1.5rem 1.75rem;
}
.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.achievement-item {
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: rgba(35, 10, 18, 0.85);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.achievement-item--unlocked {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(217,48,80,0.25), 0 8px 22px rgba(0,0,0,0.35);
}
.achievement-title {
  font-size: 0.95rem;
  font-weight: 600;
}
.achievement-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
}
.achievement-reward {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.achievement-badge {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(44, 130, 80, 0.22);
  color: #c5ffd9;
}

/* Radio */
.radio-window {
  max-width: 640px;
}
.radio-body {
  padding: 1.5rem 1.75rem;
}
.radio-layout {
  display: flex;
  gap: 1rem;
}
.radio-stations {
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.radio-station-btn {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(30, 10, 16, 0.9);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.radio-station-btn.is-active {
  border-color: var(--accent-soft);
  background: rgba(217,48,80,0.16);
}
.radio-station-emoji {
  font-size: 1.1rem;
}
.radio-nowplaying {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: rgba(30, 8, 12, 0.9);
  border: 1px solid var(--border);
}
.radio-nowplaying-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.radio-nowplaying-desc {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}
.radio-nowplaying-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
}
.radio-nowplaying-link:hover {
  background: var(--accent-strong);
}
.radio-placeholder {
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* Hidden app */
.hidden-window {
  max-width: 400px;
}

.hidden-content {
  padding: 2rem;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Responsivo: manter usável em ecrãs menores */
@media (max-width: 600px) {
  .menu-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .menu-center {
    order: 3;
    width: 100%;
  }

  .apps-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 1rem;
    gap: 1rem;
  }

  .icon-wrapper {
    width: 48px;
    height: 48px;
  }

  .icon-wrapper svg {
    width: 24px;
    height: 24px;
  }

  .letters-app-body {
    flex-direction: column;
    min-height: 320px;
  }

  .letters-app-folder {
    width: 100%;
    min-width: 0;
    max-height: 140px;
    border-right: none;
    border-bottom: 1px solid var(--border-red);
  }

  .letters-app-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .letters-app-item {
    min-width: 160px;
  }
}