/* ============================================================
   Cozy Stream Bot — Main Stylesheet
   Palette values are injected via CSS custom properties.
   ============================================================ */

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-main: 'Nunito', 'Quicksand', system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-soft: 0 4px 24px rgba(0,0,0,0.07);
  --shadow-card: 0 2px 16px rgba(0,0,0,0.06);
  --transition-soft: 0.35s cubic-bezier(0.34, 1.26, 0.64, 1);
  --transition-fade: 0.25s ease;

  /* Fallback palette (Sakura) — overridden by inline style */
  --color-bg: #fff0f5;
  --color-surface: #ffe4ee;
  --color-surface-alt: #ffd6e7;
  --color-border: #f9b8d0;
  --color-accent: #e8678a;
  --color-accent-soft: #f5a0bc;
  --color-text: #5a2d3a;
  --color-text-muted: #b07080;
  --color-orb-fill: #e8678a;
  --color-orb-wave: #f5a0bc;
  --color-orb-bg: #ffd6e7;
  --color-progress-fill: #e8678a;
  --color-progress-bg: #f5c0d0;
}

html, body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  transition: background var(--transition-fade), color var(--transition-fade);
}

.palette--gradient .cozy-sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-gradient-a) 18%, var(--color-surface)),
    color-mix(in srgb, var(--color-gradient-b) 18%, var(--color-surface))
  );
}

/* ============================================================
   Layout
   ============================================================ */
.cozy-layout {
  display: flex;
  min-height: 100vh;
}

.cozy-sidebar {
  width: 300px;
  min-width: 260px;
  max-width: 320px;
  background: var(--color-surface);
  border-right: 1.5px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 28px 20px 32px;
  gap: 0;
  overflow-y: auto;
  transition: background var(--transition-fade), border-color var(--transition-fade);
}

.cozy-main {
  flex: 1;
  padding: 36px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* ============================================================
   Brand
   ============================================================ */
.cozy-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.cozy-brand-user {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 22px;
  padding-left: 2px;
}

.cozy-logout-btn {
  margin-left: auto;
  font-size: 1rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fade), color var(--transition-fade);
}

.cozy-logout-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-accent);
}

.cozy-brand-icon {
  font-size: 1.7rem;
  animation: float 4s ease-in-out infinite;
}

.cozy-brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.3px;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ============================================================
   Config Form
   ============================================================ */
.cozy-config-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.config-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.config-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

.cozy-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.cozy-label--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cozy-input {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 0.88rem;
  padding: 7px 10px;
  outline: none;
  transition: border-color var(--transition-fade), background var(--transition-fade);
  width: 100%;
}

.cozy-input:focus {
  border-color: var(--color-accent-soft);
  background: var(--color-surface);
}

.cozy-input--sm { max-width: 80px; }

.cozy-select {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 0.88rem;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fade);
}

.cozy-select:focus { border-color: var(--color-accent-soft); }

/* ============================================================
   Palette Grid
   ============================================================ */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.palette-swatch {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--color-surface-alt);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color var(--transition-fade), transform var(--transition-soft);
}

.palette-swatch:hover { transform: scale(1.04); border-color: var(--color-accent-soft); }
.palette-swatch.active { border-color: var(--color-accent); }

.palette-swatch--locked {
  opacity: 0.65;
  cursor: pointer;
  position: relative;
}

.palette-swatch--locked:hover {
  opacity: 0.85;
  border-color: var(--color-accent-soft);
}

.palette-swatch--locked::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: var(--color-text);
  border: none;
  color: var(--color-bg);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}

.palette-swatch--locked:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.palette-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Dot colors per palette */
.palette-dot--peach_fuzz      { background: #d4703a; }
.palette-dot--sakura          { background: #e8678a; }
.palette-dot--lavender        { background: #8b5cf6; }
.palette-dot--forest          { background: #3d8b4e; }
.palette-dot--ocean           { background: #1a7fa8; }
.palette-dot--vanilla         { background: #c8a020; }
.palette-dot--midnight        { background: #c084f5; border: 1px solid #5a3a78; }
.palette-dot--ember           { background: #f0820a; border: 1px solid #6a3c18; }
.palette-dot--cloudy_sky      { background: #4a70c0; }
.palette-dot--rose_gold       { background: #c06858; }
.palette-dot--aurora          { background: linear-gradient(135deg, #38d9c0, #7060e8); border: none; }
.palette-dot--neon_dusk       { background: linear-gradient(135deg, #f050c8, #5060f8); border: none; }
.palette-dot--galaxy          { background: linear-gradient(135deg, #a855f7, #ec4899); border: none; }
.palette-dot--gilded          { background: linear-gradient(135deg, #f5c842, #e040a0); border: none; }
.palette-dot--custom          { background: linear-gradient(135deg, #c084f5, #7060e8); border: none; }

.palette-swatch--full { grid-column: 1 / -1; }

/* ============================================================
   Buttons
   ============================================================ */
.cozy-btn {
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  cursor: pointer;
  transition: transform var(--transition-soft), box-shadow var(--transition-fade), opacity var(--transition-fade);
}

.cozy-btn:hover { transform: scale(1.04); }
.cozy-btn:active { transform: scale(0.97); }

.cozy-btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-soft);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.cozy-btn--primary:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* ============================================================
   Preview Header
   ============================================================ */
.preview-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preview-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
}

.preview-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ============================================================
   Preview Grid
   ============================================================ */
.preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.preview-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.preview-col > .preview-card {
  width: 100%;
}

/* ============================================================
   Widget card base
   ============================================================ */
.preview-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: clip;
  transition: background var(--transition-fade), border-color var(--transition-fade), box-shadow var(--transition-fade);
}

.palette--gradient .widget-title {
  background: linear-gradient(90deg, var(--color-gradient-a), var(--color-gradient-b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.palette--gradient .task-progress-fill {
  background: linear-gradient(90deg, var(--color-gradient-a), var(--color-gradient-b));
}

.palette--gradient .orb-fill {
  fill: url(#orb-gradient-v) var(--color-orb-fill);
}

.palette--gradient .orb-wave {
  fill: url(#orb-gradient-v) var(--color-orb-wave);
  opacity: 0.75;
}

.palette--gradient .orb-countdown {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.palette--gradient .orb-countdown--idle {
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.preview-card.size--sm { width: 240px; }
.preview-card.size--md { width: 320px; }
.preview-card.size--lg { width: 420px; }

.widget-body {
  position: relative;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 14px;
  background: var(--color-surface-alt);
  border-bottom: 1.5px solid var(--color-border);
  min-width: 0;
}

.widget-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.widget-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.widget-badge--lock { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); }
.widget-badge--focus { background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface)); }
.widget-badge--break { background: color-mix(in srgb, var(--color-orb-wave) 20%, var(--color-surface)); }

/* ============================================================
   Task Widget
   ============================================================ */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.task-list::-webkit-scrollbar { display: none; }

.task-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  animation: task-slide-in 0.3s cubic-bezier(0.34, 1.26, 0.64, 1);
  transition: background var(--transition-fade), border-color var(--transition-fade), opacity var(--transition-fade);
  line-height: 1.5;
}

.task-item--done {
  opacity: 0.45;
}

.task-item--done .task-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.task-header {
  display: flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-username {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1.4;
}

.task-sep {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 0 3px;
}

.task-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}

.task-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  text-align: center;
}

.task-empty-icon { font-size: 1.4rem; }

@keyframes task-slide-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Progress bar */
.task-progress-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-progress-track {
  flex: 1;
  height: 6px;
  background: var(--color-progress-bg);
  border-radius: 999px;
  overflow: hidden;
}

.task-progress-fill {
  height: 100%;
  background: var(--color-progress-fill);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.34, 1.26, 0.64, 1);
  min-width: 0;
}

.task-progress-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ============================================================
   Sound orb image (advanced+ tier)
   Image sits inside the orb circle, covered by rising water.
   ============================================================ */
.orb-sound-img {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.orb-sound-img--active {
  opacity: 1;
}

/* ============================================================
   Pomodoro Orb Widget
   ============================================================ */
.orb-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

.orb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-card.size--sm .orb { width: 130px; height: 130px; }
.preview-card.size--md .orb { width: 180px; height: 180px; }
.preview-card.size--lg .orb { width: 240px; height: 240px; }

.orb-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orb-bg {
  fill: var(--color-orb-bg);
}

.orb-liquid {
  transform: translateY(var(--orb-fill-y, 100%));
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.orb-fill {
  fill: var(--color-orb-fill);
  opacity: 0.75;
}

.orb-wave {
  fill: var(--color-orb-wave);
  opacity: 0.6;
}

.orb-wave--1 {
  animation: wave-move-1 3.5s linear infinite;
  animation-play-state: paused;
}

.orb-wave--2 {
  animation: wave-move-2 5.5s linear infinite;
  animation-play-state: paused;
  opacity: 0.4;
}

.orb--running .orb-wave--1,
.orb--running .orb-wave--2 {
  animation-play-state: running;
}

@keyframes wave-move-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

@keyframes wave-move-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(-200px); }
}

.orb-border {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
}

.orb-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.orb-countdown {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.orb-countdown--idle {
  font-size: 1.4rem;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.orb-time-total {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Orb drain animation */
.orb--draining .orb-fill,
.orb--draining .orb-wave {
  animation: orb-drain 0.8s ease-in forwards;
}

@keyframes orb-drain {
  from { transform: translateY(0); opacity: 0.75; }
  to   { transform: translateY(100%); opacity: 0; }
}

/* Orb full pulse */
.orb--full {
  animation: orb-pulse 1.5s ease-in-out 2;
}

@keyframes orb-pulse {
  0%, 100% { filter: drop-shadow(0 0 0px var(--color-accent)); }
  50%       { filter: drop-shadow(0 0 16px var(--color-accent)); }
}

/* Session counter (single row, no dots) */
.pomo-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

.pomo-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.pomo-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
}

.pomo-stat-div {
  font-size: 0.85rem;
  color: var(--color-border);
}

/* Phase pill — single label: Focus / Break / Idle */
.pomo-phase-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: background var(--transition-fade), color var(--transition-fade), border-color var(--transition-fade);
}

.pomo-phase-pill[data-phase="break"] {
  background: color-mix(in srgb, var(--color-orb-wave) 18%, var(--color-surface));
  color: var(--color-orb-fill);
  border-color: color-mix(in srgb, var(--color-orb-wave) 35%, transparent);
}

.pomo-phase-pill[data-phase="idle"] {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* ============================================================
   Simulation Panel
   ============================================================ */
.sim-panel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background var(--transition-fade), border-color var(--transition-fade);
}

.sim-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sim-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.sim-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.sim-sandbox-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-alt));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.03em;
  width: fit-content;
}

.sim-quick-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sim-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sim-group-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.sim-group-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sim-group-tier {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}

.sim-group-hint {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.sim-group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sim-quick-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 2px;
}

.sim-quick-label--sep {
  margin-left: 6px;
}

.sim-quick-btn {
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 5px 11px;
  cursor: pointer;
  transition: background var(--transition-fade), border-color var(--transition-fade), transform var(--transition-soft);
}

.sim-quick-btn:hover {
  background: var(--color-border);
  transform: scale(1.05);
}

.sim-group--locked .sim-quick-btn {
  opacity: 0.55;
  border-color: color-mix(in srgb, #e05050 30%, var(--color-border));
  cursor: default;
}

.sim-group--locked .sim-quick-btn:hover {
  transform: none;
  background: var(--color-surface-alt);
}

.sim-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sim-username-input { max-width: 130px; }
.sim-cmd-input { flex: 1; min-width: 200px; }

.sim-log {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 80px;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sim-log-entry {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 3px 0;
  border-bottom: 1px dashed var(--color-border);
  animation: task-slide-in 0.2s ease;
}

.sim-log-entry--info { color: var(--color-text-muted); }
.sim-log-entry--success { color: var(--color-accent); }
.sim-log-entry--error { color: #e05050; }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }

/* ============================================================
   Auth pages (login / register)
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 24px;
}

.auth-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-card--upgrade { max-width: 460px; }

.upgrade-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upgrade-tier {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.upgrade-tier p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.upgrade-cta {
  margin-top: 12px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  display: block;
  animation: upgradePulse 2.4s ease-in-out infinite;
}

@keyframes upgradePulse {
  0%, 100% { box-shadow: 0 2px 12px color-mix(in srgb, var(--color-accent) 35%, transparent); }
  50%       { box-shadow: 0 6px 28px color-mix(in srgb, var(--color-accent) 60%, transparent); transform: scale(1.02); }
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.auth-brand-icon { font-size: 1.5rem; }

.auth-brand-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.3px;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: -12px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-error {
  background: color-mix(in srgb, #e05050 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, #e05050 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #c03030;
}

.auth-field-error {
  font-size: 0.78rem;
  color: #c03030;
  margin-top: 4px;
  display: block;
}

.cozy-btn--full { width: 100%; justify-content: center; }

.auth-switch {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.auth-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-link:hover { text-decoration: underline; }

/* ============================================================
   Tier badge
   ============================================================ */
.cozy-brand-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 10px;
  flex-wrap: nowrap;
}

.cozy-brand-user {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.tier-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 20px;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex-shrink: 0;
}

.tier-badge--free        { color: var(--color-text-muted); }
.tier-badge--basic       { color: #7eb8f7; }
.tier-badge--advanced    { color: #b48ef7; }
.tier-badge--premium     { color: #f7c948; }
.tier-badge--vip { color: #5ecfb0; }

.config-hint {
  font-size: 0.73rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* ============================================================
   Config details / accordion dropdowns
   ============================================================ */
.config-details {
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.config-details-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.config-details-title::-webkit-details-marker { display: none; }

.config-details-title::after {
  content: "▸";
  font-size: 0.7rem;
  transition: transform 0.18s ease;
  color: var(--color-accent);
}

.config-details[open] > .config-details-title::after {
  transform: rotate(90deg);
}

.config-details .config-section {
  padding-top: 2px;
  padding-bottom: 10px;
  border-top: none;
}

.config-overlay-url-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

/* ============================================================
   Range slider (opacity)
   ============================================================ */
.cozy-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: var(--color-border);
  outline: none;
  margin-top: 6px;
  cursor: pointer;
}
.cozy-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  transition: background var(--transition-fade);
}
.cozy-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  cursor: pointer;
}

/* ============================================================
   Inline field pair (focus / break on same row)
   ============================================================ */
.cozy-inline-fields {
  display: flex;
  gap: 10px;
}
.cozy-inline-fields .cozy-label {
  flex: 1;
}

/* ============================================================
   Pomodoro session counter
   ============================================================ */
.pomo-session-counter {
  text-align: center;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

/* ============================================================
   Overlay URL section
   ============================================================ */
.config-section--overlay {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1.5px solid var(--color-border);
}

.config-overlay-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}

.cozy-overlay-url-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.cozy-input--url {
  flex: 1;
  font-size: 0.75rem;
  font-family: monospace;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cozy-btn--copy {
  padding: 6px 12px;
  font-size: 0.78rem;
  white-space: nowrap;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fade);
}

.cozy-btn--copy:hover {
  background: var(--color-border);
}

/* ============================================================
   Encouragement Widget — Simple Quote Style
   ============================================================ */
.encouragement-message {
  position: relative;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;
  padding: 12px 16px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  animation: encouragement-fade-in 0.6s ease forwards;
}


.encouragement-message--visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* Locked preview card overlay */
.preview-card__lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-lg);
  z-index: 10;
  backdrop-filter: blur(2px);
}

.preview-card__lock-icon {
  font-size: 2rem;
  opacity: 0.6;
}

.preview-card__lock-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Config locked hint */
.config-locked-hint {
  background: color-mix(in srgb, var(--color-surface-alt) 80%, var(--color-bg));
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.config-locked-hint p {
  margin: 0 0 4px;
}

/* Locked accordion styling */
.config-details--locked .config-details-title {
  color: var(--color-text-muted);
}

/* Sub-accordion (nested inside a section) */
.config-details--sub {
  margin-top: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface-alt) 60%, var(--color-bg));
}

.config-details-title--sub {
  font-size: 0.82rem;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.config-details-title--sub::marker,
.config-details-title--sub::-webkit-details-marker { display: none; }

.config-details--sub[open] > .config-details-title--sub::after { content: "▲"; font-size: 0.6rem; margin-left: auto; }
.config-details--sub:not([open]) > .config-details-title--sub::after { content: "▼"; font-size: 0.6rem; margin-left: auto; }

.config-section--sub {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Custom palette groups */
.custom-palette-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.custom-palette-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.custom-palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  transition: opacity 0.2s;
}

.custom-palette-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.custom-palette-field span {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

.cozy-color-input {
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.cozy-color-input:hover {
  border-color: var(--color-accent);
  transform: scale(1.08);
}


.config-details--locked .config-details-title::after {
  opacity: 0.5;
}

.config-details--nav > .config-details-title::after {
  content: "→";
}

.config-details--nav[open] > .config-details-title::after {
  transform: none;
  content: "→";
}

/* ============================================================
   Commands Widget
   ============================================================ */

.widget-body--commands-compact {
  padding: 14px 18px 16px;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.cmd-compact-command {
  font-family: var(--font-main);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.5px;
}

.cmd-compact-desc {
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.widget-body--commands-panel {
  padding: 10px 14px 14px;
  gap: 0;
}

.cmd-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmd-panel-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cmd-panel-cmd {
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.cmd-panel-desc {
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

@keyframes cmdFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cmd-fade--in {
  animation: cmdFadeIn 0.4s ease both;
}

/* ============================================================
   Clock Widget
   ============================================================ */

.widget-body--clock {
  padding: 14px 18px 16px;
  align-items: center;
  gap: 4px;
}

.widget-body--clock-bare {
  padding: 0;
  background: transparent;
  border: none;
}

.preview-card--transparent {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.clock-time {
  font-family: var(--font-main);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 2px;
  line-height: 1;
  text-align: center;
}

.clock-date {
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
  text-align: center;
}

.palette--gradient .clock-time {
  background: linear-gradient(135deg, var(--color-gradient-a, var(--color-accent)), var(--color-gradient-b, var(--color-accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Tree Widget
   ============================================================ */

/* Stage: fixed aspect-ratio container for all tree elements */
.tree-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 160px;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.preview-card .tree-stage {
  min-height: 200px;
  padding: 8px 0 4px;
}

/* Tree image — grows from bottom-center */
.tree-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(0.05);
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  pointer-events: none;
  opacity: 1;
  display: none;
  transition: none;
  z-index: 3;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

/* Wind idle sway — gentle oscillation when break / done */
@keyframes treeSway {
  0%   { transform: translateX(-50%) scale(1) rotate(0deg); }
  25%  { transform: translateX(-50%) scale(1) rotate(1.2deg); }
  75%  { transform: translateX(-50%) scale(1) rotate(-1.2deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}

.tree-img--wind {
  animation: treeSway 4s ease-in-out infinite;
}

/* Glow burst when fully grown */
@keyframes treeGlow {
  0%   { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
  30%  { filter: drop-shadow(0 0 28px var(--color-accent)) drop-shadow(0 0 60px var(--color-accent-soft)); }
  60%  { filter: drop-shadow(0 0 14px var(--color-accent-soft)); }
  100% { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
}

.tree-img--glow {
  animation: treeSway 4s ease-in-out infinite, treeGlow 2.5s ease-out forwards;
}

/* Seed — teardrop shape */
.tree-seed {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 16px;
  /* Teardrop: round bottom, pointed top */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-soft);
  z-index: 4;
  opacity: 0;
  transform-origin: center center;
}

.tree-seed--hidden {
  opacity: 0 !important;
  animation: none !important;
}

@keyframes seedFall {
  0%   { opacity: 0;   top: -24px; transform: translateX(-50%) rotate(0deg)   scale(0.6); }
  10%  { opacity: 1; }
  40%  {               top: 40%;  transform: translateX(-50%) rotate(180deg) scale(1);   }
  75%  { opacity: 1;   top: 78%;  transform: translateX(-50%) rotate(300deg) scale(1);   }
  90%  { opacity: 1;   top: 88%;  transform: translateX(-50%) rotate(340deg) scale(1.1); }
  100% { opacity: 0;   top: 92%;  transform: translateX(-50%) rotate(360deg) scale(0.7); }
}

.tree-seed--falling {
  animation: seedFall 2s cubic-bezier(0.33, 0.1, 0.66, 0.9) forwards;
}

/* Background layers — back behind everything (z0), front between fox and tree (z2) */
.tree-bg-back,
.tree-bg-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.tree-bg-back  { z-index: 0; }
.tree-bg-front { z-index: 2; }

/* Animal track — behind the tree (z1 < tree z3); foxes created dynamically */
.tree-animal-track {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* Fox sprite — 500x1500 sheet, 5 cols x 15 rows, each frame 100x100 */
.tree-animal {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 100px;
  background-image: url('/static/images/tree_widget/animal1_walk_animation_spritesheet.png');
  background-size: 500px 1500px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* Spritesheet default: fox faces RIGHT
   LTR (left→right): no flip needed — fox already faces right
   RTL (right→left): flip with scaleX(-1) */
@keyframes foxRunLTR {
  from { left: -110px; }
  to   { left: 110%; }
}

@keyframes foxRunRTL {
  from { right: -110px; left: auto; }
  to   { right: 110%;   left: auto; }
}

.tree-animal--run-ltr {
  animation: foxRunLTR 10s linear forwards;
  transform: scaleX(1);
}

.tree-animal--run-rtl {
  animation: foxRunRTL 10s linear forwards;
  transform: scaleX(-1);
}

/* Username label — same z-index as track (behind tree), sits tight above fox */
.tree-animal-name {
  position: absolute;
  bottom: 56px;
  left: -300px;
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .cozy-layout { flex-direction: column; }
  .cozy-sidebar { width: 100%; max-width: 100%; border-right: none; border-bottom: 1.5px solid var(--color-border); }
  .cozy-main { padding: 20px 16px; }
  .preview-card.size--sm,
  .preview-card.size--md,
  .preview-card.size--lg { width: 100%; }
}

/* ============================================================
   Landing Page — Phase 6A
   ============================================================ */

/* ----- Navigation ----- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 64px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--color-border);
}

.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.lp-nav-brand-icon { font-size: 1.5rem; }

.lp-nav-brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.3px;
}

.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.lp-nav-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fade);
}

.lp-nav-link:hover,
.lp-nav-link--active { color: var(--color-accent); }

.lp-nav-link--cta {
  background: var(--color-accent);
  color: var(--color-surface);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
  transition: transform var(--transition-soft), box-shadow var(--transition-fade), color var(--transition-fade);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.lp-nav-link--cta:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-accent) 42%, transparent);
  color: var(--color-surface);
}

/* ----- Shared section layout ----- */
.lp-section {
  padding: 72px 24px;
}

.lp-section:nth-child(even) {
  background: var(--color-surface);
}

.lp-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.lp-section-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-xl);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.lp-section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  line-height: 1.25;
}

.lp-section-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 640px;
  line-height: 1.7;
}

/* ----- Shared buttons ----- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 26px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-soft), box-shadow var(--transition-fade);
}

.lp-btn:hover { transform: scale(1.04); }
.lp-btn:active { transform: scale(0.97); }

.lp-btn--primary {
  background: var(--color-accent);
  color: var(--color-surface);
  box-shadow: 0 3px 16px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.lp-btn--primary:hover {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent-soft);
}

.lp-btn--ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-color: var(--color-accent);
}

.lp-btn--lg {
  font-size: 1.05rem;
  padding: 15px 32px;
}

.lp-btn-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ----- Accent helpers ----- */
.lp-accent { color: var(--color-accent); }
.lp-accent-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-soft);
  font-weight: 600;
}
.lp-accent-link:hover { text-decoration-color: var(--color-accent); }

/* ----- Tags / chips ----- */
.lp-tag {
  display: inline-block;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-xl);
}

.lp-tag--advanced {
  background: color-mix(in srgb, #8b5cf6 12%, var(--color-surface));
  border-color: color-mix(in srgb, #8b5cf6 30%, transparent);
  color: #6d40c8;
}

.lp-tag--premium {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  color: var(--color-accent);
}

.lp-tag--basic {
  background: color-mix(in srgb, #1a7fa8 10%, var(--color-surface));
  border-color: color-mix(in srgb, #1a7fa8 28%, transparent);
  color: #1a6a90;
}

.lp-code {
  font-family: 'Consolas', 'Fira Mono', monospace;
  font-size: 0.85em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--color-accent);
}

/* ----- Hero ----- */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px 56px;
  gap: 20px;
}

.lp-hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.18;
  max-width: 760px;
}

.lp-hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 580px;
  line-height: 1.7;
}

.lp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.lp-hero-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: -6px;
}

.lp-br-desktop { display: block; }

/* ----- Hero widget preview — real widgets, palette-scoped container ----- */
.lp-hero-preview {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-top: 16px;
  padding-top: 12px;
  width: 100%;
  max-width: 800px;
  overflow: visible;
  /* JS sets CSS vars directly on this element; widgets inside inherit them */
}

/* Float animation applied per-card with staggered delays */
.lp-preview-float {
  animation: float 5s ease-in-out infinite;
}

/* Constrain orb size inside the preview so it's not too large */
.lp-hero-preview .orb-container { max-width: 180px; margin: 0 auto; }
.lp-hero-preview .orb-svg { width: 100%; height: auto; }

/* ----- How it works ----- */
.lp-how .lp-section-inner { gap: 40px; }

.lp-steps {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.lp-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  padding: 20px;
}

.lp-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-surface);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.lp-step-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 5px;
}

.lp-step-body p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.lp-step-arrow {
  font-size: 1.5rem;
  color: var(--color-accent-soft);
  padding: 20px 4px;
  align-self: center;
}

/* ----- Features grid ----- */
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

.lp-feature-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform var(--transition-soft), box-shadow var(--transition-fade);
}

.lp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.lp-feature-icon { font-size: 2rem; }

.lp-feature-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.lp-feature-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
}

.lp-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.lp-feature-tier {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-xl);
  white-space: nowrap;
}

.lp-feature-tier--advanced {
  background: #8b5cf6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(139,92,246,0.35);
}

.lp-feature-tier--premium {
  background: linear-gradient(110deg, #f0a020, #e8678a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,103,138,0.35);
}

/* ----- Audience ----- */
.lp-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
}

.lp-audience-card {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: transform var(--transition-soft);
}

.lp-audience-card:hover { transform: translateY(-4px); }

.lp-audience-icon { font-size: 2.2rem; margin-bottom: 10px; }

.lp-audience-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.lp-audience-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ----- Tier cards (shared by landing & pricing) ----- */
.lp-tier-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  padding-top: 28px;
  overflow: visible;
  flex-wrap: wrap;
  width: 100%;
}

.lp-tier-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 240px;
  max-width: 320px;
  position: relative;
  transition: transform var(--transition-soft), box-shadow var(--transition-fade);
}

.lp-tier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.lp-tier-card--featured {
  border-color: var(--color-accent);
  box-shadow: 0 4px 28px color-mix(in srgb, var(--color-accent) 18%, transparent);
  margin-top: -8px;
  margin-bottom: -8px;
}

.lp-tier-card--featured:hover { transform: translateY(-6px); }

.lp-tier-badge-popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-surface);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-xl);
  white-space: nowrap;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.lp-tier-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-tier-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  align-self: flex-start;
}

.lp-tier-badge--sm { font-size: 0.68rem; padding: 3px 10px; }

.lp-tier-badge--basic {
  background: color-mix(in srgb, #1a7fa8 12%, var(--color-surface));
  color: #1a6a90;
  border: 1.5px solid color-mix(in srgb, #1a7fa8 28%, transparent);
}

.lp-tier-badge--advanced {
  background: color-mix(in srgb, #8b5cf6 12%, var(--color-surface));
  color: #6d40c8;
  border: 1.5px solid color-mix(in srgb, #8b5cf6 28%, transparent);
}

.lp-tier-badge--premium {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  color: var(--color-accent);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.lp-tier-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.lp-tier-tagline {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.lp-tier-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.lp-tier-features li {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.lp-btn--tier {
  display: flex;
  justify-content: center;
  width: 100%;
  background: var(--color-surface-alt);
  color: var(--color-accent);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 11px 20px;
  text-decoration: none;
  transition: transform var(--transition-soft), background var(--transition-fade);
  cursor: pointer;
  font-family: var(--font-main);
}

.lp-btn--tier:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-color: var(--color-accent-soft);
  transform: scale(1.03);
}

.lp-btn--tier-featured {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.lp-btn--tier-featured:hover {
  background: color-mix(in srgb, var(--color-accent) 88%, black);
  color: var(--color-surface);
}

.lp-pricing-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ----- Final CTA ----- */
.lp-cta-final {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)),
    color-mix(in srgb, var(--color-accent-soft) 12%, var(--color-bg))
  );
  border-top: 1.5px solid var(--color-border);
  text-align: center;
  padding: 72px 24px;
}

.lp-cta-final-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lp-cta-final-icon { font-size: 3rem; animation: float 4s ease-in-out infinite; }

.lp-cta-final-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.lp-cta-final-sub {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ----- Footer ----- */
.lp-footer {
  background: var(--color-surface);
  border-top: 1.5px solid var(--color-border);
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.lp-footer-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.05rem;
}

.lp-footer-brand-name {
  font-weight: 700;
  color: var(--color-accent);
}

.lp-footer-links {
  display: flex;
  gap: 24px;
}

.lp-footer-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fade);
}

.lp-footer-link:hover { color: var(--color-accent); }

.lp-footer-copy {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ----- Pricing page ----- */
.lp-pricing-hero {
  text-align: center;
  padding: 64px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lp-pricing-main { padding-top: 24px; }

/* Feature comparison table */
.lp-compare-section { padding-bottom: 80px; }

.lp-compare-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.lp-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  background: var(--color-surface);
}

.lp-compare-th {
  padding: 14px 18px;
  font-weight: 700;
  text-align: center;
  background: var(--color-surface-alt);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.lp-compare-th--feature { text-align: left; min-width: 200px; }

.lp-compare-th--featured {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-alt));
  border-bottom-color: var(--color-accent-soft);
}

.lp-compare-table tr { border-bottom: 1px solid var(--color-border); }
.lp-compare-table tr:last-child { border-bottom: none; }

.lp-compare-group td {
  padding: 10px 18px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-surface-alt) 50%, var(--color-surface));
}

.lp-compare-feature {
  padding: 11px 18px;
  color: var(--color-text);
  font-weight: 500;
}

.lp-compare-cell {
  padding: 11px 18px;
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 600;
}

.lp-compare-cell--featured {
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));
}

.lp-yes { color: var(--color-accent); font-size: 1rem; }
.lp-no { color: var(--color-border); }

/* ----- FAQ ----- */
.lp-faq-section { background: var(--color-surface); }

.lp-faq-inner { gap: 36px; }

.lp-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
}

.lp-faq-item {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.lp-faq-item h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.lp-faq-item p {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ----- Commands page ----- */
.lp-commands-hero {
  text-align: center;
  padding: 64px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lp-commands-section { padding-top: 0; }

.lp-commands-inner {
  gap: 32px;
  align-items: stretch;
}

.lp-cmd-group {
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.lp-cmd-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1.5px solid var(--color-border);
  background: var(--color-surface-alt);
  flex-wrap: wrap;
}

.lp-cmd-group-icon { font-size: 1.5rem; flex-shrink: 0; }

.lp-cmd-group-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.lp-cmd-group-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.lp-cmd-group-header > .lp-tag { margin-left: auto; }

.lp-cmd-table-wrap { overflow-x: auto; }

.lp-cmd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.lp-cmd-table thead { background: var(--color-surface-alt); }

.lp-cmd-table th {
  padding: 10px 18px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-border);
}

.lp-cmd-table td {
  padding: 12px 18px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.55;
}

.lp-cmd-table tr:last-child td { border-bottom: none; }

.lp-cmd-table td:first-child { white-space: nowrap; }

.lp-sound-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.lp-code--eg {
  font-size: 0.8em;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
}

/* Quick reference card */
.lp-cmd-quick {
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-cmd-quick-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.lp-cmd-quick-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: -10px;
}

.lp-cmd-quick-box {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.lp-cmd-quick-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 160px;
}

.lp-cmd-quick-col code {
  font-family: 'Consolas', 'Fira Mono', monospace;
  font-size: 0.82rem;
  color: var(--color-accent);
  padding: 2px 0;
}

.lp-cmd-quick-section {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 4px;
}

/* ----- Responsive landing ----- */
@media (max-width: 768px) {
  .lp-nav { padding: 0 20px; }
  .lp-nav-links { gap: 14px; }
  .lp-nav-link:not(.lp-nav-link--cta) { display: none; }
  .lp-hero { padding: 48px 20px 36px; }
  .lp-hero-title { font-size: 2rem; }
  .lp-section { padding: 48px 20px; }
  .lp-section-title { font-size: 1.6rem; }
  .lp-tier-card { max-width: 100%; }
  .lp-tier-card--featured { transform: none; }
  .lp-step-arrow { display: none; }
  .lp-br-desktop { display: none; }
  .lp-hero-preview { flex-wrap: wrap; gap: 12px; }
  .lp-footer { padding: 24px 20px; }
}