/**
 * Kratevia App Pages Styles
 * Styles for authenticated app pages (calendar, habits, stats, profile, settings)
 */

:root {
  --header-avatar-size: 42px;
  --header-avatar-tangent: 12px;
  --hdr-seam-overlap: 2px;
  --subscription-limit-bg: #ffffff;
  --subscription-limit-bg-muted: #f8fafc;
  --subscription-limit-text: #0f172a;
  --subscription-limit-text-muted: #475569;
  --subscription-limit-border: rgba(148, 163, 184, 0.34);
  --subscription-limit-overlay: rgba(15, 23, 42, 0.62);
  --subscription-limit-warning-bg: rgba(245, 158, 11, 0.13);
  --subscription-limit-warning-text: #92400e;
  --subscription-limit-selected-bg: rgba(37, 99, 235, 0.1);
  --subscription-limit-selected-border: #2563eb;
  --subscription-limit-check-bg: #ffffff;
}

html[data-theme="dark"],
body[data-theme="dark"],
body.dark-theme {
  --subscription-limit-bg: #111827;
  --subscription-limit-bg-muted: #1f2937;
  --subscription-limit-text: #f8fafc;
  --subscription-limit-text-muted: #cbd5e1;
  --subscription-limit-border: rgba(148, 163, 184, 0.42);
  --subscription-limit-overlay: rgba(2, 6, 23, 0.78);
  --subscription-limit-warning-bg: rgba(245, 158, 11, 0.18);
  --subscription-limit-warning-text: #facc15;
  --subscription-limit-selected-bg: rgba(96, 165, 250, 0.16);
  --subscription-limit-selected-border: #60a5fa;
  --subscription-limit-check-bg: #0f172a;
}

/* Subscription limit resolution */
.subscription-limit-modal-open {
  overflow: hidden;
}

.subscription-limit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 8px;
  background: var(--subscription-limit-warning-bg);
  color: var(--subscription-limit-text);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.subscription-limit-banner button {
  border: 0;
  border-radius: 7px;
  padding: 8px 12px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.subscription-limit-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--subscription-limit-overlay);
  backdrop-filter: blur(10px);
}

.subscription-limit-modal {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--subscription-limit-border);
  border-radius: 10px;
  background: var(--subscription-limit-bg);
  color: var(--subscription-limit-text);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.34);
}

.subscription-limit-modal__header {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 22px 22px 14px;
}

.subscription-limit-modal__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--subscription-limit-warning-bg);
  color: var(--subscription-limit-warning-text);
  font-weight: 900;
}

.subscription-limit-modal h2 {
  margin: 0 0 8px;
  font-size: 1.24rem;
  line-height: 1.25;
}

.subscription-limit-modal p {
  margin: 0;
  color: var(--subscription-limit-text-muted);
  line-height: 1.48;
}

.subscription-limit-modal__preview {
  margin: 0 22px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--subscription-limit-border);
  background: var(--subscription-limit-bg-muted);
  color: var(--subscription-limit-text-muted);
  font-size: 0.92rem;
}

.subscription-limit-modal__toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px 12px;
  color: var(--subscription-limit-text-muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.subscription-limit-modal__list {
  display: grid;
  gap: 10px;
  padding: 0 22px 14px;
  overflow: auto;
}

.subscription-limit-habit {
  display: grid;
  grid-template-columns: 22px 38px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--subscription-limit-border);
  border-radius: 8px;
  background: var(--subscription-limit-bg-muted);
  color: var(--subscription-limit-text);
  cursor: pointer;
}

.subscription-limit-habit input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subscription-limit-habit__check {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(100, 116, 139, 0.55);
  border-radius: 6px;
  background: var(--subscription-limit-check-bg);
}

.subscription-limit-habit.is-selected {
  border-color: var(--subscription-limit-selected-border);
  background: var(--subscription-limit-selected-bg);
}

.subscription-limit-habit.is-selected .subscription-limit-habit__check {
  border-color: var(--subscription-limit-selected-border);
  background: var(--subscription-limit-selected-border);
  box-shadow: inset 0 0 0 4px var(--subscription-limit-bg);
}

.subscription-limit-habit:focus-within {
  outline: 2px solid var(--subscription-limit-selected-border);
  outline-offset: 2px;
}

.subscription-limit-habit__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.14);
  font-size: 1.25rem;
}

.subscription-limit-habit__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.subscription-limit-habit__copy strong,
.subscription-limit-habit__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-limit-habit__copy small {
  color: var(--subscription-limit-text-muted);
}

.subscription-limit-modal__error {
  min-height: 20px;
  padding: 0 22px;
  color: #dc2626;
  font-weight: 700;
  font-size: 0.9rem;
}

.subscription-limit-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 22px;
  border-top: 1px solid var(--subscription-limit-border);
}

.subscription-limit-modal__footer .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.habit-item.is-subscription-limit-paused .badge-paused {
  border-color: rgba(245, 158, 11, 0.42);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}

@media (max-width: 640px) {
  .subscription-limit-modal-overlay {
    align-items: end;
    padding: 0;
  }

  .subscription-limit-modal {
    width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }

  .subscription-limit-modal__header {
    grid-template-columns: 1fr;
    padding: 18px 16px 12px;
  }

  .subscription-limit-modal__toolbar,
  .subscription-limit-modal__list,
  .subscription-limit-modal__error {
    padding-left: 16px;
    padding-right: 16px;
  }

  .subscription-limit-modal__footer {
    flex-direction: column-reverse;
    padding: 14px 16px 16px;
  }

  .subscription-limit-modal__footer .btn,
  .subscription-limit-banner button {
    width: 100%;
  }

  .subscription-limit-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .subscription-limit-habit__copy strong,
  .subscription-limit-habit__copy small {
    white-space: normal;
  }
}

  /* Menu scrollabile (unica area che scrolla) */
  body.is-mobile .app-sidebar .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
  }

  /* Titoli sezione menu più compatti */
  body.is-mobile .app-sidebar .sidebar-nav-title {
    padding-top: 4px !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }

  /* Link menu più compatti */
  body.is-mobile .app-sidebar .sidebar-nav-link {
    padding: 6px 8px !important;
    font-size: 13px !important;
  }

  /* Footer sempre visibile */
  body.is-mobile .app-sidebar .sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* MOBILE: Brand spacing fixes */
  /* MOBILE: brand più compatto e spostato verso il logo */
  body.is-mobile .app-header .header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Riduci padding orizzontale generale dell'header su mobile */
  body.is-mobile .app-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Se il testo "PLUS" è separato e scappa verso destra, annulla margini automatici */
  body.is-mobile .app-header .header-logo-text,
  body.is-mobile .app-header .sidebar-logo-text {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tablet + Header Top: Compact mode with icons only */
  body.is-tablet.tablet-top-compact .layout-segmented .layout-label,
  body.is-tablet.tablet-top-compact .layout-segmented .btn-text,
  body.is-tablet.tablet-top-compact .layout-segment-btn span:not(.layout-icon) {
    display: none !important;
  }

  /* MOBILE/TABLET: In header-top layout, show only icons in layout-segmented */
  html.is-tablet[data-layout="header"] .layout-segmented .layout-label,
  html.is-mobile[data-layout="header"] .layout-segmented .layout-label {
    display: none !important;
  }

  /* DESKTOP: Ensure labels are visible in header-top layout */
  html.is-desktop[data-layout="header"] .layout-segmented .layout-label {
    display: inline !important;
  }

  /* MOBILE/TABLET: Ensure icons are visible in header-top layout */
  html.is-tablet[data-layout="header"] .layout-segmented .layout-icon,
  html.is-mobile[data-layout="header"] .layout-segmented .layout-icon {
    display: inline-flex !important;
    margin-right: 0 !important;
  }

  /* MOBILE/TABLET: Compact spacing for header-top layout */
  html.is-tablet[data-layout="header"] .layout-segment-btn,
  html.is-mobile[data-layout="header"] .layout-segment-btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
    min-width: 44px !important;
    /* tap target */
  }

  /* TABLET: Make segmented compact when icon-only */
  html.is-tablet[data-layout="header"] .layout-segmented {
    width: fit-content !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  html.is-tablet[data-layout="header"] .layout-segmented button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: 44px !important;
  }

  /* ============================================
     LAYOUT SELECTOR COMPACT FIX (Mobile + Icon-Only)
     ============================================ */

  /* 1) Contenitore del selector: non deve avere min-width "da desktop" */
  .layout-segmented {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0 !important;
  }

  /* 2) Stato "icon-only": comprimilo davvero */
  .layout-segmented.is-icon-only {
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 999px !important;
    width: fit-content !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  /* 3) I bottoni/segmenti - reset min-width */
  .layout-segmented .layout-segment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    /* tap target ok */
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    white-space: nowrap;
    min-width: 0 !important;
    /* forza override */
  }

  /* 4) In icon-only il testo NON deve contribuire alla larghezza */
  .layout-segmented.is-icon-only .layout-label {
    display: none !important;
  }

  /* 5) In icon-only riduci padding laterale: icona centrata */
  .layout-segmented.is-icon-only .layout-segment-btn {
    min-width: 40px !important;
    width: 40px !important;
    /* segmenti uguali e compatti */
    padding: 0 !important;
    gap: 0 !important;
}

/* 6) HEADER TOP COMPACT MODE: icon-only basato su width */
body.layout-header.layout-compact .app-header .layout-segmented {
  width: fit-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 999px !important;
}

body.layout-header.layout-compact .app-header .layout-segmented .layout-label {
  display: none !important;
}

body.layout-header.layout-compact .app-header .layout-segmented .layout-segment-btn {
  min-width: 44px !important;
  width: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
}

body.layout-header.layout-compact .app-header .layout-segmented .layout-icon {
  display: inline-flex !important;
  margin: 0 !important;
}

/* 6b) Manual icon-only mode (override) */
.layout-segmented.is-icon-only .layout-label {
  display: none !important;
}

.layout-segmented.is-icon-only .layout-segment-btn {
  min-width: 44px !important;
  width: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
}

.layout-segmented.is-icon-only .layout-icon {
  display: inline-flex !important;
  margin: 0 !important;
}

/* 8) HEADER TOP FLUID MODE: riduci spazio vuoto su tablet */
body.layout-header .app-header-edge-left {
  flex: 0 0 auto;
  margin-right: 16px;
  /* spazio ridotto tra selector e inner */
}

body.layout-header .app-header-inner {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  max-width: 1800px;
  /* aumentato da ~1400px */
}

/* Assicura che i figli non causino overflow */
body.layout-header .app-header-inner>* {
  min-width: 0;
}

/* Tablet specific: ancora più aggressivo se necessario */
@media (max-width: 1024px) {
  body.layout-header .app-header-inner {
    max-width: none;
    /* rimuovi limite su tablet */
  }

  body.layout-header .app-header-edge-left {
    margin-right: 12px;
    /* ancora più compatto su tablet */
  }
}

/* 8b) HEADER TOP GRID LAYOUT: 3 zone non sovrapponibili */
body.layout-header .app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 var(--space-6);
}

/* Zone specifiche */
body.layout-header .app-header-edge-left {
  grid-column: 1;
  margin-right: 0;
  /* reset margin, usa gap */
}

body.layout-header .app-header-inner {
  grid-column: 2;
  margin: 0;
  /* reset margin */
  max-width: none;
  /* lascia che grid gestisca */
  min-width: 0;
}

body.layout-header .header-actions {
  grid-column: 3;
  margin-left: 0;
  /* reset margin, usa gap */
}

/* Wrapper per contenuto centrato */
body.layout-header .app-header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  min-width: 0;
}

/* Gruppo Sinistra: Brand */
body.layout-header .app-header-inner .header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Gruppo Centro: Navigazione */
body.layout-header .app-header-inner .header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

/* Gruppo Destra: Azioni */
body.layout-header .app-header-inner .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Previeni wrapping e overflow */
body.layout-header .app-header-inner .header-brand,
body.layout-header .app-header-inner .header-nav,
body.layout-header .app-header-inner .header-actions {
  white-space: nowrap;
}

/* Label con ellipsis se necessario */
body.layout-header .app-header-inner .header-logo-text,
body.layout-header .app-header-inner .header-nav-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 10) SIDEBAR HEADER CONTENT: allineamento logo a sinistra */
body.layout-sidebar .sidebar-header-content {
  margin-left: -8px;
  /* sposta leggermente verso sinistra */
  padding-left: 0;
  /* reset padding se presente */
}

/* 11) CALENDAR FLUID: DA IMPLEMENTARE DOPO DEBUG */
/* Truncation per label lunghe - breakpoint 1320px */
@media (max-width: 1320px) {

  body.layout-header .header-nav-link span,
  body.layout-header .header-admin-dropdown .admin-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
  }
}

/* Icon-only per menu - breakpoint 1120px */
@media (max-width: 1120px) {
  body.layout-header .header-nav-link span {
    display: none;
    /* nascondi testo, mantieni icone */
  }

  body.layout-header .header-nav-link {
    padding: 8px;
    /* padding più compatto */
    min-width: 44px;
    justify-content: center;
  }

  body.layout-header .header-nav-link svg {
    margin: 0;
    /* centra icone */
  }

  /* Header user: mostra solo avatar + caret */
  body.layout-header .header-user-name {
    display: none;
  }
}

/* Molto stretto: truncation aggressiva */
@media (max-width: 900px) {
  body.layout-header .header-admin-dropdown .admin-btn-label {
    max-width: 60px;
  }
}

/* ============================================
   APP SHELL & LAYOUT
   ============================================ */

.app-page {
  min-height: 100vh;
  background: var(--bg-base);
}

/* App Shell Container */
.app-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* Header Layout (Default) */
.app-shell[data-layout="header"],
.app-shell:not([data-layout]) {
  flex-direction: column;
}

.app-shell[data-layout="header"] .app-sidebar,
.app-shell:not([data-layout]) .app-sidebar {
  display: none;
}

/* Sidebar Layout */
.app-shell[data-layout="sidebar"] {
  flex-direction: row;
}

.app-shell[data-layout="sidebar"] .app-header {
  display: none;
}

.app-shell[data-layout="sidebar"] .app-sidebar {
  display: flex;
}

.app-shell[data-layout="sidebar"] .app-main {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
}

/* ============================================
   APP HEADER
   ============================================ */

.app-header {
  height: var(--header-height);
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  overflow: visible;
}

.app-header-inner {
  flex: 1 1 auto;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 0;
  position: relative;
}

.app-header-inner,
.header-actions {
  overflow: visible;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  position: relative;
}

/* Logo - Uses unified .ks-logo from logo.css */

/* Navigation */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-6);
}

.header-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: calc(var(--text-sm) * 1.12);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.header-nav-link:hover {
  background: var(--interactive-hover);
  color: var(--text-primary);
}

.header-nav-link.active {
  background: var(--accent-bg);
  color: var(--text-accent);
}

.header-nav-link svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.header-nav-link:hover svg,
.header-nav-link.active svg {
  opacity: 1;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-action-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header-action-btn svg {
  width: 20px;
  height: 20px;
}

.header-notifications {
  position: relative;
  display: flex;
  align-items: center;
}

.notifications-btn {
  position: relative;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.notifications-btn:hover,
.notifications-btn:focus-visible,
.header-left-notifications-btn:hover,
.header-left-notifications-btn:focus-visible {
  background: color-mix(in srgb, var(--surface-secondary) 74%, transparent);
  color: var(--text-primary);
}

.notifications-btn[aria-expanded="true"],
.header-left-notifications-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent-bg) 78%, transparent);
  color: var(--text-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-500) 22%, transparent);
}

[data-theme="dark"] .notifications-btn[aria-expanded="true"],
[data-theme="dark"] .header-left-notifications-btn[aria-expanded="true"] {
  background: rgba(var(--accent-rgb, 255, 208, 97), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 255, 208, 97), 0.18);
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: var(--neutral-0);
  font-size: 11px;
  font-weight: var(--font-semibold);
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface-primary);
  box-shadow: var(--shadow-xs);
  line-height: 1;
}

.notification-badge.is-visible {
  display: inline-flex;
}

@keyframes ks-badge-pop-in {
  0%   { transform: scale(0.4); opacity: 0; }
  65%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

.notification-badge--animate {
  animation: ks-badge-pop-in 0.25s ease-out forwards;
}

.profile-dropdown.notifications-dropdown {
  min-width: 320px;
  width: 370px;
  max-width: 92vw;
  padding: var(--space-2) 0;
  box-sizing: border-box;
}

.notifications-dropdown-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.notifications-header-row1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  grid-column: 2;
  justify-self: end;
}

.notifications-header-row2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
  flex-wrap: wrap;
  grid-column: 2;
  justify-self: end;
}

.notifications-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
}

@media (max-width: 420px) {
  .notifications-dropdown-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .notifications-header-left {
    grid-column: 1;
    grid-row: auto;
  }

  .notifications-header-row1,
  .notifications-header-row2 {
    grid-column: 1;
    justify-self: stretch;
  }
}

/* -- Dropdown view toggle (unread / recent) -- */

.notifications-dropdown-view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  padding: 2px;
  margin-left: auto;
  max-width: 100%;
}

.notifications-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.notifications-view-btn:hover {
  background: var(--surface-hover, rgba(255,255,255,0.06));
  color: var(--text-secondary);
}
.notifications-view-btn.is-active {
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
.notifications-view-btn svg {
  flex-shrink: 0;
}
.notifications-view-label {
  overflow: hidden;
}
@media (max-width: 400px) {
  .notifications-view-label { display: none; }
}

.notifications-mark-all {
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  color: var(--text-accent);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.notifications-mark-all:hover {
  background: var(--interactive-hover);
  border-color: var(--border-strong);
}

.notifications-mark-all:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.notifications-mark-all-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.notifications-mark-all-text {
  overflow: hidden;
}
@media (max-width: 360px) {
  .notifications-mark-all-text { display: none; }
}

.notifications-mark-all-page {
  color: var(--text-accent);
  border-color: var(--border-subtle);
  background: var(--surface-secondary);
}

.notifications-mark-all-page:hover:not(:disabled) {
  background: var(--interactive-hover);
  border-color: var(--border-strong);
}

.notifications-mark-all-page .notifications-mark-all-icon {
  width: 16px;
  height: 16px;
}

.notifications-readonly-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: rgba(14, 165, 233, 0.08);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.notifications-readonly-note--dropdown {
  margin: 0 0 8px;
  font-size: 12px;
}

.notifications-readonly-note--modal {
  margin: 0;
}

.notifications-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.notifications-count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.notifications-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* DROPDOWN ONLY: Nessun offset esterno, le tabs vivono dentro ogni card */
.notifications-dropdown .notifications-list {
  padding-top: 0;
  gap: 0;
}

.notifications-empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}

.notifications-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), box-shadow 200ms ease, transform 200ms ease;
}

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

.notifications-item-title {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.notifications-item-title-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
  max-width: 100%;
}

.notifications-item-title-habit-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
}

.notifications-item-title-habit-list--page {
  max-width: 100%;
}

.notifications-item-title-habit-list--dropdown {
  max-width: 100%;
}

.notifications-item-title-habit {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--text-secondary);
}

.notifications-item-title-habit::before {
  content: '·';
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.notifications-item-title-habit--overflow {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-accent);
}

.notifications-item-title-habit--overflow:hover,
.notifications-item-title-habit--overflow:focus-visible {
  color: color-mix(in srgb, var(--text-accent) 88%, var(--text-primary));
  outline: none;
}

.notifications-item-title-habit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.82;
}

.notifications-item-title-habit-name {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text-secondary);
}

.notifications-item-title-habit-list--page .notifications-item-title-habit-name {
  font-size: 13px;
}

.notif-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 1;
  background: var(--surface-secondary);
  color: var(--text-primary);
  flex-shrink: 0;
}

.notifications-habit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}


.notif-type--streak {
  background: rgba(255, 140, 0, 0.15);
  color: #c86200;
}

.notif-type--system {
  background: rgba(56, 139, 253, 0.16);
  color: #2f6fdd;
}

.notif-type--report {
  background: rgba(16, 185, 129, 0.16);
  color: #0f9f76;
}

.notifications-item-snippet {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notifications-item-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.notifications-item-meta--stack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.notifications-item-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--font-semibold);
  color: var(--text-accent);
  white-space: nowrap;
}

.notifications-item-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
}

.notifications-item-detail--habits {
  display: none;
}

.notifications-habit-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.notifications-habit-pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.18);
  background: rgba(255, 252, 245, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 18px -20px rgba(120, 53, 15, 0.24);
  color: rgb(120 53 15 / 0.96);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

[data-theme="dark"] .notifications-habit-pill {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 237, 213, 0.96);
}

button.notifications-habit-pill {
  cursor: pointer;
}

.notifications-habit-pill--overflow {
  color: rgb(22 101 52 / 0.94);
  background: rgba(236, 253, 245, 0.96);
  border-color: rgba(34, 197, 94, 0.22);
  box-shadow: 0 16px 26px -24px rgba(34, 197, 94, 0.36);
}

.notifications-habit-pill--overflow:hover,
.notifications-habit-pill--overflow:focus-visible {
  border-color: rgba(34, 197, 94, 0.36);
  background: rgba(220, 252, 231, 0.98);
  outline: none;
}

.notifications-item-title-habit--overflow.notifications-habit-pill--overflow {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

[data-theme="dark"] .notifications-habit-pill--overflow {
  color: rgba(187, 247, 208, 0.92);
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
}

[data-theme="dark"] .notifications-item-title-habit--overflow {
  color: rgba(110, 231, 183, 0.96);
  background: none;
  border-color: transparent;
  box-shadow: none;
}

.notifications-habit-icon {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

.notifications-habit-pill-name {
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-dropdown.notifications-dropdown .notifications-habit-pill-name {
  max-width: none;
}

.notifications-habit-overflow-popover {
  position: fixed;
  z-index: 1500;
  display: none;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
}

.notifications-habit-overflow-popover.is-open {
  display: grid;
  gap: 8px;
}

[data-theme="dark"] .notifications-habit-overflow-popover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 30, 0.96);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55);
}

.notifications-habit-overflow-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.notifications-habit-overflow-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.notifications-habit-overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .notifications-habit-overflow-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.notifications-habit-overflow-item-icon {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}

.notifications-habit-overflow-item-name {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}

.notifications-item--stack {
  position: relative;
  isolation: isolate;
  margin-top: var(--stack-offset);
  --stack-tab-h1: 8px;
  --stack-tab-h2: 12px;
  --stack-tab-gap: 3px;
  --stack-tab-shift: 3px;
  --stack-tab-inset-1: 16px;
  --stack-tab-inset-2: 10px;
  --stack-tab-bg: var(--surface-secondary);
  --stack-tab-border: var(--border-subtle);
  --stack-tab-alpha: 0.9;
  --stack-offset: calc(var(--stack-tab-gap) + var(--stack-tab-h2) + var(--stack-tab-shift));
}

.notifications-item--stack::before {
  content: '';
  position: absolute;
  top: calc(-1 * (var(--stack-tab-gap) + var(--stack-tab-h2) + var(--stack-tab-shift)));
  left: var(--stack-tab-inset-1);
  right: var(--stack-tab-inset-1);
  height: var(--stack-tab-h1);
  background: var(--stack-tab-bg);
  border: 1px solid var(--stack-tab-border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
  opacity: var(--stack-tab-alpha);
  z-index: 0;
}

.notifications-item--stack::after {
  content: '';
  position: absolute;
  top: calc(-1 * (var(--stack-tab-gap) + var(--stack-tab-h2)));
  left: var(--stack-tab-inset-2);
  right: var(--stack-tab-inset-2);
  height: var(--stack-tab-h2);
  background: var(--stack-tab-bg);
  border: 1px solid var(--stack-tab-border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
  opacity: var(--stack-tab-alpha);
  z-index: 0;
}

.notifications-item--stack>* {
  position: relative;
  z-index: 1;
}

.notifications-item--stack.is-compact {
  --stack-tab-h1: 6px;
  --stack-tab-h2: 9px;
  --stack-tab-gap: 2px;
  --stack-tab-shift: 2px;
  --stack-tab-inset-1: 12px;
  --stack-tab-inset-2: 7px;
}

/* DROPDOWN ONLY: Single-tab stacking più evidente */
.notifications-dropdown .notifications-item--stack.is-compact {
  --stack-tab-h1: 0px;
  --stack-tab-h2: 12px;
  --stack-tab-gap: 3px;
  --stack-tab-shift: 0px;
  --stack-tab-inset-2: 8px;
  --stack-offset: calc(var(--stack-tab-gap) + var(--stack-tab-h2));
}

/* DROPDOWN ONLY: Ogni card stack (non solo la prima) ha margin-top per le sue tabs */
.notifications-dropdown .notifications-item--stack.is-compact {
  margin-top: var(--stack-offset);
}

/* DROPDOWN ONLY: Prima card stack non ha margin extra (usa padding della lista) */
.notifications-dropdown .notifications-item--stack.is-compact:first-child {
  margin-top: 0;
}

/* DROPDOWN ONLY: Card non-stack dopo card stack: reset spacing */
.notifications-dropdown .notifications-item--stack.is-compact+.notifications-item:not(.notifications-item--stack) {
  margin-top: 0;
}

/* DROPDOWN ONLY: Nascondi la tab più piccola, tieni solo quella principale */
.notifications-dropdown .notifications-item--stack.is-compact::before {
  display: none;
}

/* DROPDOWN ONLY: Tab principale più visibile e contrastata */
.notifications-dropdown .notifications-item--stack.is-compact::after {
  height: var(--stack-tab-h2);
  top: calc(-1 * (var(--stack-tab-gap) + var(--stack-tab-h2)));
  opacity: 1;
  background: var(--surface-tertiary);
  border-color: var(--border-default);
  border-width: 1px;
}

[data-theme="dark"] .notifications-item--stack {
  --stack-tab-bg: var(--surface-tertiary);
  --stack-tab-border: rgba(255, 255, 255, 0.18);
  --stack-tab-alpha: 0.92;
}

/* DROPDOWN DARK THEME: Contrasto maggiore per la tab */
[data-theme="dark"] .notifications-dropdown .notifications-item--stack.is-compact::after {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

/* ============================================
   DROPDOWN STACKING (minimal tabs + rail)
   ============================================ */
.profile-dropdown.notifications-dropdown .notifications-item--group,
.profile-dropdown.notifications-dropdown .notifications-item--stack {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding-top: calc(var(--space-2) + var(--stack-tab-h2) + var(--stack-tab-gap));
  --stack-tab-h1: 6px;
  --stack-tab-h2: 10px;
  --stack-tab-gap: 3px;
  --stack-tab-inset-1: 16px;
  --stack-tab-inset-2: 10px;
  --stack-tab-bg: rgba(0, 0, 0, 0.04);
  --stack-tab-border: rgba(0, 0, 0, 0.08);
  --stack-rail-strong: rgba(var(--accent-rgb, 255, 208, 97), 0.22);
  --stack-rail-soft: rgba(var(--accent-rgb, 255, 208, 97), 0.06);
  background-image: linear-gradient(180deg, var(--stack-rail-strong) 0%, var(--stack-rail-soft) 60%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: left top;
}

.profile-dropdown.notifications-dropdown .notifications-item--group::before,
.profile-dropdown.notifications-dropdown .notifications-item--group::after,
.profile-dropdown.notifications-dropdown .notifications-item--stack::before,
.profile-dropdown.notifications-dropdown .notifications-item--stack::after {
  content: '';
  position: absolute;
  left: var(--stack-tab-inset-1);
  right: var(--stack-tab-inset-1);
  background: var(--stack-tab-bg);
  border: 1px solid var(--stack-tab-border);
  border-bottom: none;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  pointer-events: none;
  z-index: 0;
}

.profile-dropdown.notifications-dropdown .notifications-item--group::before,
.profile-dropdown.notifications-dropdown .notifications-item--stack::before {
  top: 0;
  height: var(--stack-tab-h1);
  opacity: 0.7;
}

.profile-dropdown.notifications-dropdown .notifications-item--group::after,
.profile-dropdown.notifications-dropdown .notifications-item--stack::after {
  top: var(--stack-tab-gap);
  left: var(--stack-tab-inset-2);
  right: var(--stack-tab-inset-2);
  height: var(--stack-tab-h2);
  opacity: 0.9;
}

.profile-dropdown.notifications-dropdown .notifications-item--group>*,
.profile-dropdown.notifications-dropdown .notifications-item--stack>* {
  position: relative;
  z-index: 1;
}

.profile-dropdown.notifications-dropdown .notifications-item--group.is-unread,
.profile-dropdown.notifications-dropdown .notifications-item--stack.is-unread {
  --stack-tab-bg: rgba(var(--accent-rgb, 255, 208, 97), 0.22);
  --stack-tab-border: rgba(var(--accent-rgb, 255, 208, 97), 0.32);
  --stack-rail-strong: rgba(var(--accent-rgb, 255, 208, 97), 0.3);
  --stack-rail-soft: rgba(var(--accent-rgb, 255, 208, 97), 0.1);
}

.profile-dropdown.notifications-dropdown .notifications-item--group .notifications-stack-badge {
  font-weight: 700;
}

[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--group,
[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--stack {
  --stack-tab-bg: rgba(255, 255, 255, 0.06);
  --stack-tab-border: rgba(255, 255, 255, 0.14);
  --stack-rail-strong: rgba(var(--accent-rgb, 255, 208, 97), 0.2);
  --stack-rail-soft: rgba(var(--accent-rgb, 255, 208, 97), 0.05);
}

[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--group.is-unread,
[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--stack.is-unread {
  --stack-tab-bg: rgba(var(--accent-rgb, 255, 208, 97), 0.18);
  --stack-tab-border: rgba(var(--accent-rgb, 255, 208, 97), 0.28);
  --stack-rail-strong: rgba(var(--accent-rgb, 255, 208, 97), 0.24);
  --stack-rail-soft: rgba(var(--accent-rgb, 255, 208, 97), 0.08);
}

/* DROPDOWN ONLY: Badge in title row, no overflow */
.notifications-dropdown .notifications-item-title {
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}

.notifications-dropdown .notifications-item-title-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.notifications-dropdown .notifications-item-title-text {
  display: block;
  width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notifications-dropdown .notifications-item-title-habit-list--dropdown {
  width: 100%;
  min-width: 0;
  gap: 2px 7px;
}

.notifications-dropdown .notifications-item-title .notifications-stack-badge {
  margin-left: auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  align-self: flex-start;
}

.profile-dropdown.notifications-dropdown {
  overflow-x: hidden;
}

.notifications-list {
  overflow-x: hidden;
}

.notifications-item {
  max-width: 100%;
  box-sizing: border-box;
}


.notifications-stack-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1;
}

/* DROPDOWN ONLY: Badge sempre visibile con maggior contrasto */
.notifications-dropdown .notifications-stack-badge {
  background: var(--accent-100);
  border-color: var(--accent-300);
  color: var(--accent-700);
  font-weight: var(--font-semibold);
}

[data-theme="dark"] .notifications-dropdown .notifications-stack-badge {
  background: rgba(56, 139, 253, 0.16);
  border-color: rgba(56, 139, 253, 0.3);
  color: var(--accent-400);
}

.notifications-item:hover {
  background-color: var(--interactive-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  z-index: 2;
}

.notifications-item.is-unread {
  background-color: var(--accent-bg);
}

@media (prefers-reduced-motion: reduce) {
  .notifications-item {
    transition: none;
  }

  .notifications-item:hover {
    transform: none;
  }
}

.notifications-footer-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-accent);
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.notifications-footer-link:hover {
  background: var(--interactive-hover);
  color: var(--text-accent);
}

.notifications-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.notifications-modal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.notifications-modal-message {
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
}

.notifications-modal-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ============================================
   STREAK MODAL — .sm- namespace
   Premium celebratory design, mobile-first
   ============================================ */

.sm-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 250 241 / 0.98) 0%, rgb(255 255 255 / 0.98) 24%, rgb(255 252 246 / 1) 100%);
}

[data-theme="dark"] .sm-body {
  background:
    linear-gradient(180deg, rgb(22 22 26 / 1) 0%, rgb(18 18 22 / 1) 24%, rgb(14 14 18 / 1) 100%);
}

/* ── A. HERO ── */
.sm-hero {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 12px 16px 9px;
  background:
    radial-gradient(circle at top right, rgb(251 191 36 / 0.14), transparent 43%),
    linear-gradient(180deg, rgb(255 246 225 / 0.95) 0%, rgb(255 250 239 / 0.78) 100%);
  border-bottom: 1px solid rgb(245 158 11 / 0.12);
}

[data-theme="dark"] .sm-hero {
  background:
    radial-gradient(circle at top right, rgb(251 191 36 / 0.12), transparent 42%),
    linear-gradient(180deg, rgb(34 27 15 / 0.92) 0%, rgb(22 20 17 / 0.84) 100%);
  border-bottom-color: rgb(251 191 36 / 0.12);
}

.sm-flame-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: linear-gradient(145deg, rgb(255 214 102 / 0.95), rgb(245 158 11 / 0.88));
  border-radius: 12px;
  box-shadow: 0 6px 16px -12px rgb(245 158 11 / 0.46), inset 0 1px 0 rgb(255 255 255 / 0.42);
  line-height: 1;
}

[data-theme="dark"] .sm-flame-badge {
  background: linear-gradient(145deg, rgb(251 191 36 / 0.92), rgb(217 119 6 / 0.88));
  box-shadow: 0 6px 18px -12px rgb(245 158 11 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.sm-hero-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.sm-hero-topline {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  min-width: 0;
}

.sm-hero-topline--with-habits {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(124px, auto);
  align-items: start;
  column-gap: 14px;
}

.sm-hero-lead {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  flex: 1 1 auto;
}

.sm-hero-topline .sm-flame-badge {
  margin-top: 5px;
}

.sm-hero-habit-column {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
  max-width: min(210px, 42vw);
}

.sm-habit-inline-list {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sm-habit-inline-list--hero {
  width: auto;
}

.sm-habit-inline-list--hero-column {
  width: 100%;
  justify-items: end;
  text-align: right;
}

.sm-habit-inline-list--hero-column .sm-habit-inline {
  justify-content: flex-end;
}

.sm-habit-inline-list--member {
  justify-items: start;
}

.sm-habit-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.sm-habit-inline--overflow {
  cursor: pointer;
  color: rgb(22 101 52 / 0.92);
}

.sm-habit-inline--overflow:hover,
.sm-habit-inline--overflow:focus-visible {
  color: rgb(21 128 61 / 0.98);
  outline: none;
}

.sm-habit-pill {
  display: inline-flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.76);
  border: 1px solid rgb(245 158 11 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.68), 0 12px 20px -22px rgb(120 53 15 / 0.22);
}

[data-theme="dark"] .sm-habit-pill {
  background: rgb(255 255 255 / 0.05);
  border-color: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}

.sm-habit-icon {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}

.sm-habit-name {
  font-size: 13px;
  font-weight: 650;
  color: rgb(146 64 14 / 0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 25ch;
}

[data-theme="dark"] .sm-habit-name {
  color: rgb(255 237 213 / 0.94);
}

.sm-habit-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.sm-habit-pill--overflow {
  cursor: pointer;
  color: rgb(22 101 52 / 0.92);
  background: rgb(236 253 245 / 0.96);
  border-color: rgb(34 197 94 / 0.22);
}

.sm-habit-pill--overflow:hover,
.sm-habit-pill--overflow:focus-visible {
  background: rgb(220 252 231 / 0.98);
  border-color: rgb(34 197 94 / 0.32);
  outline: none;
}

.sm-habit-inline--overflow.sm-habit-pill--overflow {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

[data-theme="dark"] .sm-habit-pill--overflow {
  color: rgb(187 247 208 / 0.94);
  background: rgb(34 197 94 / 0.12);
  border-color: rgb(34 197 94 / 0.2);
}

[data-theme="dark"] .sm-habit-inline--overflow {
  color: rgb(187 247 208 / 0.92);
  background: none;
  border-color: transparent;
  box-shadow: none;
}

.sm-streak-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.sm-streak-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex-wrap: nowrap;
}

.sm-streak-number {
  font-size: clamp(2.75rem, 7vw, 4rem);
  font-weight: var(--font-bold);
  line-height: 0.88;
  color: rgb(120 53 15 / 0.98);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums lining-nums;
  text-wrap: nowrap;
}

[data-theme="dark"] .sm-streak-number {
  color: rgb(255 220 145 / 0.98);
}

.sm-streak-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.sm-streak-meta--hero-column {
  width: 100%;
}

.sm-habit-pill-list--hero-column {
  width: auto;
  max-width: 100%;
  justify-content: flex-end;
}

.sm-habit-pill-list--hero-column .sm-habit-pill {
  align-self: flex-end;
}

.sm-streak-unit {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgb(146 64 14 / 0.88);
  line-height: 1;
  white-space: nowrap;
}

[data-theme="dark"] .sm-streak-unit {
  color: rgb(253 230 138 / 0.84);
}

.sm-tagline {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-secondary) 90%, rgb(120 53 15));
  margin: 0;
  line-height: 1.3;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .sm-tagline {
  color: rgba(255, 245, 214, 0.72);
}

/* ── B. SUMMARY ── */
.sm-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 9px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.94) 0%, rgb(255 250 242 / 0.98) 100%);
  border-bottom: 1px solid rgb(245 158 11 / 0.08);
}

[data-theme="dark"] .sm-summary {
  background:
    linear-gradient(180deg, rgb(18 18 22 / 0.96) 0%, rgb(16 16 20 / 1) 100%);
  border-bottom-color: rgb(255 255 255 / 0.05);
}

.sm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.sm-fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 7px 10px 8px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(245 158 11 / 0.14);
  box-shadow: 0 10px 22px -26px rgb(120 53 15 / 0.26), inset 0 1px 0 rgb(255 255 255 / 0.82);
}

[data-theme="dark"] .sm-fact {
  background: rgb(255 255 255 / 0.04);
  border-color: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.sm-fact-label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.05;
}

.sm-fact-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.sm-summary-row {
  display: none;
}

.sm-summary-label,
.sm-summary-value {
  display: none;
}

/* Next milestone progress */
.sm-next-target {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 11px 8px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgb(255 247 227 / 0.94) 0%, rgb(255 251 242 / 1) 100%);
  border: 1px solid rgb(245 158 11 / 0.16);
  box-shadow: 0 14px 30px -30px rgb(120 53 15 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.82);
}

[data-theme="dark"] .sm-next-target {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, rgb(255 255 255 / 0.025) 100%);
  border-color: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}

.sm-next-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.sm-next-label {
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.sm-next-remaining {
  font-size: 10px;
  color: rgb(146 64 14 / 0.92);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  background: rgb(255 251 241 / 0.98);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgb(245 158 11 / 0.16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.72);
}

[data-theme="dark"] .sm-next-remaining {
  color: rgb(253 230 138 / 0.92);
  background: rgb(251 191 36 / 0.08);
  border-color: rgb(251 191 36 / 0.16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.sm-next-target--compact {
  gap: 6px;
  padding: 8px 10px;
  border-radius: 14px;
}

.sm-progress-wrap {
  position: relative;
  overflow: visible;
}

.sm-progress-wrap--with-live-label {
  padding-top: 12px;
}

.sm-progress-wrap--with-live-label.sm-progress-wrap--compact {
  padding-top: 11px;
}

.sm-progress-track {
  position: relative;
  height: 8px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.75) 0%, rgb(255 242 214 / 0.88) 100%);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgb(245 158 11 / 0.12);
  box-shadow: inset 0 1px 1px rgb(120 53 15 / 0.08);
}

[data-theme="dark"] .sm-progress-track {
  background:
    linear-gradient(180deg, rgb(39 39 42 / 0.96) 0%, rgb(30 30 34 / 1) 100%);
  border-color: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.42);
}

.sm-progress-track--compact {
  height: 7px;
}

.sm-progress-fill {
  height: 100%;
  background:
    linear-gradient(90deg, rgb(253 224 71) 0%, rgb(245 158 11) 58%, rgb(217 119 6) 100%);
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 10px;
  position: relative;
  box-shadow: 0 0 22px -10px rgb(245 158 11 / 0.72);
}

.sm-progress-fill::after {
  display: none;
}

.sm-progress-target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgb(120 53 15 / 0.18);
}

[data-theme="dark"] .sm-progress-target {
  background: rgb(255 255 255 / 0.14);
}

.sm-progress-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.sm-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sm-progress-step--current {
  color: var(--text-primary);
  font-weight: 700;
}

.sm-progress-step--lower {
  font-weight: 600;
  color: var(--text-tertiary);
}

.sm-progress-step--goal {
  font-weight: 600;
  color: color-mix(in srgb, var(--text-secondary) 80%, rgb(146 64 14));
}

.sm-progress-step--shifted {
  color: rgb(146 64 14 / 0.96);
}

[data-theme="dark"] .sm-progress-step--shifted {
  color: rgb(253 230 138 / 0.9);
}

.sm-progress-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgb(255 250 240 / 0.98);
  border: 1.5px solid rgb(245 158 11 / 0.78);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.74), 0 4px 14px -8px rgb(120 53 15 / 0.45);
}

[data-theme="dark"] .sm-progress-thumb {
  background: rgb(255 247 224 / 0.98);
  box-shadow: 0 0 0 2px rgb(18 18 22 / 0.92), 0 4px 14px -8px rgb(0 0 0 / 0.5);
}

.sm-progress-thumb--compact {
  width: 10px;
  height: 10px;
}

.sm-progress-live-label {
  position: absolute;
  top: -1px;
  transform: translate(-50%, -92%);
  display: inline-block;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgb(146 64 14 / 0.94);
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 1;
}

[data-theme="dark"] .sm-progress-live-label {
  color: rgb(253 230 138 / 0.92);
}

.sm-progress-live-label--compact {
  font-size: 10px;
}

.sm-progress-live-label--edge-start {
  transform: translate(0, -92%);
}

.sm-progress-live-label--edge-end {
  transform: translate(-100%, -92%);
}

.sm-group-members {
  display: grid;
  gap: 9px;
}

.sm-group-member {
  display: grid;
  gap: 7px;
  padding: 9px 11px 10px;
  border-radius: 15px;
  background: rgb(255 255 255 / 0.86);
  border: 1px solid rgb(245 158 11 / 0.18);
  box-shadow: 0 14px 26px -30px rgb(120 53 15 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.86);
}

[data-theme="dark"] .sm-group-member {
  background: rgb(255 255 255 / 0.035);
  border-color: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.sm-group-member-head {
  display: block;
}

.sm-group-member-title {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.sm-group-member-meta {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-left: 0;
  text-align: left;
}

/* Completion family hero overrides — green tones instead of amber */
.sm-hero--completion {
  background:
    radial-gradient(circle at top right, rgb(34 197 94 / 0.14), transparent 43%),
    linear-gradient(180deg, rgb(236 253 245 / 0.95) 0%, rgb(240 253 244 / 0.78) 100%);
  border-bottom: 1px solid rgb(34 197 94 / 0.12);
}

[data-theme="dark"] .sm-hero--completion {
  background:
    radial-gradient(circle at top right, rgb(34 197 94 / 0.12), transparent 42%),
    linear-gradient(180deg, rgb(15 30 20 / 0.92) 0%, rgb(17 22 17 / 0.84) 100%);
  border-bottom-color: rgb(34 197 94 / 0.12);
}

.sm-flame-badge--completion {
  background: linear-gradient(145deg, rgb(134 239 172 / 0.95), rgb(34 197 94 / 0.88));
  box-shadow: 0 6px 16px -12px rgb(34 197 94 / 0.46), inset 0 1px 0 rgb(255 255 255 / 0.42);
}

[data-theme="dark"] .sm-flame-badge--completion {
  background: linear-gradient(145deg, rgb(34 197 94 / 0.92), rgb(22 163 74 / 0.88));
  box-shadow: 0 6px 18px -12px rgb(34 197 94 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.notification-modal--completion .sm-body {
  background:
    linear-gradient(180deg, rgb(246 254 249 / 0.98) 0%, rgb(255 255 255 / 0.98) 24%, rgb(240 253 244 / 1) 100%);
}

[data-theme="dark"] .notification-modal--completion .sm-body {
  background:
    linear-gradient(180deg, rgb(13 28 20 / 1) 0%, rgb(12 22 16 / 1) 24%, rgb(10 16 14 / 1) 100%);
}

.notification-modal--completion .sm-streak-number,
.notification-modal--completion .sm-streak-unit,
.notification-modal--completion .sm-progress-step--goal,
.notification-modal--completion .sm-progress-step--shifted,
.notification-modal--completion .sm-progress-live-label,
.notification-modal--completion .sm-next-remaining {
  color: rgb(21 128 61 / 0.96);
}

[data-theme="dark"] .notification-modal--completion .sm-streak-number,
[data-theme="dark"] .notification-modal--completion .sm-streak-unit,
[data-theme="dark"] .notification-modal--completion .sm-progress-step--goal,
[data-theme="dark"] .notification-modal--completion .sm-progress-step--shifted,
[data-theme="dark"] .notification-modal--completion .sm-progress-live-label,
[data-theme="dark"] .notification-modal--completion .sm-next-remaining {
  color: rgb(187 247 208 / 0.94);
}

.notification-modal--completion .sm-summary,
.notification-modal--completion .sm-history,
.notification-modal--completion .sm-next-target {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.94) 0%, rgb(240 253 244 / 0.98) 100%);
  border-color: rgb(34 197 94 / 0.12);
}

.notification-modal--completion .sm-fact,
.notification-modal--completion .sm-group-member,
.notification-modal--completion .sm-habit-pill {
  border-color: rgb(34 197 94 / 0.16);
  box-shadow: 0 12px 24px -28px rgb(21 128 61 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.82);
}

.notification-modal--completion .sm-progress-track {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.75) 0%, rgb(220 252 231 / 0.88) 100%);
  border-color: rgb(34 197 94 / 0.14);
}

[data-theme="dark"] .notification-modal--completion .sm-summary,
[data-theme="dark"] .notification-modal--completion .sm-history,
[data-theme="dark"] .notification-modal--completion .sm-next-target {
  background:
    linear-gradient(180deg, rgb(15 23 42 / 0.74) 0%, rgb(16 45 32 / 0.86) 100%);
  border-color: rgb(74 222 128 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

[data-theme="dark"] .notification-modal--completion .sm-fact,
[data-theme="dark"] .notification-modal--completion .sm-group-member,
[data-theme="dark"] .notification-modal--completion .sm-habit-pill {
  background: color-mix(in srgb, rgb(15 23 42 / 0.92) 74%, rgb(22 101 52 / 0.28));
  border-color: rgb(74 222 128 / 0.22);
  box-shadow: 0 14px 32px -28px rgb(4 120 87 / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.04);
}

[data-theme="dark"] .notification-modal--completion .sm-progress-track {
  background:
    linear-gradient(180deg, rgb(15 23 42 / 0.78) 0%, rgb(20 83 45 / 0.76) 100%);
  border-color: rgb(74 222 128 / 0.18);
}

.notification-modal--completion .sm-progress-fill {
  background:
    linear-gradient(90deg, rgb(134 239 172) 0%, rgb(34 197 94) 58%, rgb(22 163 74) 100%);
  box-shadow: 0 0 22px -10px rgb(34 197 94 / 0.72);
}

.notification-modal--completion .sm-progress-thumb {
  border-color: rgb(34 197 94 / 0.78);
}

/* "All milestones unlocked" final state */
.sm-next-target--final {
  text-align: center;
  padding: 12px;
}

.sm-next-target--final .sm-next-label {
  font-weight: var(--font-bold);
  color: var(--text-secondary);
}

/* ── C. MILESTONE HISTORY ── */
.sm-history {
  background:
    linear-gradient(180deg, rgb(255 253 249 / 0.96) 0%, rgb(255 250 244 / 1) 100%);
}

[data-theme="dark"] .sm-history {
  background:
    linear-gradient(180deg, rgb(16 16 20 / 1) 0%, rgb(14 14 18 / 1) 100%);
}

.sm-history[open] {
  padding-bottom: 4px;
}

.sm-history-toggle {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  border-radius: 0;
  border-top: 1px solid rgb(245 158 11 / 0.08);
}

.sm-history-toggle::-webkit-details-marker {
  display: none;
}

.sm-history-toggle::marker {
  content: '';
}

.sm-history-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.sm-history-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-history-toggle:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--interactive-hover) 62%, transparent);
}

.sm-history-toggle:focus-visible {
  outline: 2px solid var(--interactive-focus);
  outline-offset: -2px;
}

.sm-history-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--text-tertiary);
}

.sm-history[open] .sm-history-chevron {
  transform: rotate(180deg);
}

.sm-history-count {
  margin-left: 2px;
  font-size: 11px;
  background: rgb(255 255 255 / 0.78);
  color: color-mix(in srgb, var(--text-secondary) 82%, rgb(146 64 14));
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgb(245 158 11 / 0.08);
  font-weight: var(--font-semibold);
  min-width: 24px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.64);
}

[data-theme="dark"] .sm-history-count {
  background: rgb(255 255 255 / 0.05);
  color: rgb(255 244 214 / 0.76);
  border-color: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.sm-history-panel {
  padding: 2px 16px 10px;
}

[data-theme="dark"] .sm-history-panel {
  border-top: 1px solid rgb(255 255 255 / 0.04);
}

.sm-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 4px 2px;
  max-height: 148px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.sm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgb(255 255 255 / 0.88);
  color: color-mix(in srgb, var(--text-secondary) 88%, rgb(120 53 15));
  border: 1px solid rgb(245 158 11 / 0.14);
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  cursor: default;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.72), 0 12px 20px -24px rgb(120 53 15 / 0.18);
}

[data-theme="dark"] .sm-chip {
  background: rgb(255 255 255 / 0.05);
  color: rgb(255 244 214 / 0.74);
  border-color: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.sm-chip--current {
  background: rgb(255 236 186 / 0.98);
  color: rgb(120 53 15 / 0.98);
  border-color: rgb(245 158 11 / 0.22);
  box-shadow: 0 0 0 2px rgb(255 247 230 / 0.9);
}

[data-theme="dark"] .sm-chip--current {
  background: rgb(251 191 36 / 0.16);
  color: rgb(255 220 145 / 0.98);
  border-color: rgb(251 191 36 / 0.26);
  box-shadow: 0 0 0 2px rgb(251 191 36 / 0.05);
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .sm-hero {
    align-items: flex-start;
    gap: 0;
    padding: 12px 14px 9px;
  }

  .sm-hero-topline {
    gap: 9px;
  }

  .sm-hero-topline .sm-flame-badge {
    margin-top: 4px;
  }

  .sm-flame-badge {
    width: 30px;
    height: 30px;
    font-size: 0.92rem;
  }

  .sm-streak-number {
    font-size: clamp(2.45rem, 11.5vw, 3.2rem);
  }

  .sm-streak-headline {
    gap: 8px;
  }

  .sm-streak-meta {
    gap: 5px;
  }

  .sm-habit-pill-list--hero-column {
    justify-content: flex-start;
  }

  .sm-habit-pill-list--hero-column .sm-habit-pill {
    align-self: flex-start;
  }

  .sm-habit-inline-list--hero-column {
    justify-items: end;
    text-align: right;
  }

  .sm-tagline {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sm-summary {
    padding: 10px 14px 9px;
  }

  .sm-facts {
    gap: 6px;
  }

  .sm-fact {
    padding: 7px 9px;
    gap: 3px;
  }

  .sm-next-target {
    padding: 8px 10px 7px;
  }

  .sm-history-toggle {
    padding: 9px 14px;
  }

  .sm-history-panel {
    padding: 2px 14px 10px;
  }

  .sm-chip {
    padding: 5px 9px;
  }

  .sm-next-remaining {
    padding-inline: 7px;
  }

  .sm-group-member-meta {
    margin-left: 0;
    flex-basis: 100%;
    text-align: left;
  }
}

.sidebar-notifications-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: var(--neutral-0);
  font-size: 11px;
  font-weight: var(--font-semibold);
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface-primary);
  box-shadow: var(--shadow-xs);
  line-height: 1;
}

.sidebar-notifications-badge.is-visible {
  display: inline-flex;
}

.sidebar-notifications-badge.notification-badge--animate {
  animation: ks-badge-pop-in 0.25s ease-out forwards;
}

/* -- Notifications page: two-level filter bar -- */
.notifications-page-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
  min-width: 0;
}

.notifications-page-actions > * {
  min-width: 0;
}

.notifications-state-filter .notifications-state-segmented {
  min-height: 40px;
}
.notifications-state-filter .segmented-control__option {
  min-height: 36px;
  min-width: 80px;
  font-size: var(--text-sm);
}

.notifications-category-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.notifications-category-filter::-webkit-scrollbar { display: none; }

.notifications-category-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: var(--radius-pill, 999px);
  padding: 6px 14px;
  font-size: var(--text-sm);
  background: var(--surface-secondary, var(--surface-primary));
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
  min-height: 36px;
}
.notifications-category-chip:hover {
  background: var(--surface-hover, var(--surface-secondary));
  border-color: var(--border-default);
}
.notifications-category-chip--active {
  background: var(--accent-bg);
  color: var(--accent-600, var(--accent-500));
  border-color: var(--accent-400);
  font-weight: 600;
}

/* Per-family active tints */
.notifications-category-chip[data-category-filter="completions"].notifications-category-chip--active {
  background: rgb(34 197 94 / 0.10);
  border-color: rgb(34 197 94 / 0.30);
  color: var(--success, #16a34a);
}
.notifications-category-chip[data-category-filter="streaks"].notifications-category-chip--active {
  background: rgb(249 115 22 / 0.10);
  border-color: rgb(249 115 22 / 0.28);
  color: var(--warning, #d97706);
}
.notifications-category-chip[data-category-filter="achievements"].notifications-category-chip--active {
  background: rgb(16 185 129 / 0.10);
  border-color: rgb(16 185 129 / 0.26);
  color: rgb(5 150 105);
}
.notifications-category-chip[data-category-filter="reports"].notifications-category-chip--active {
  background: rgb(14 165 233 / 0.10);
  border-color: rgb(14 165 233 / 0.28);
  color: var(--info, #0ea5e9);
}

/* Chip icons */
.notifications-category-chip .chip-icon {
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .notifications-page-actions {
    width: 100%;
    align-items: stretch;
  }
  .notifications-state-filter .notifications-state-segmented {
    width: auto;
    max-width: 100%;
  }
  .notifications-category-filter {
    width: 100%;
    justify-content: flex-start;
    padding-inline: 2px;
    margin-inline: -2px;
    scroll-padding-inline: 2px;
  }
  .notifications-state-filter .segmented-control__option {
    min-height: 40px;
    font-size: var(--text-base, 14px);
  }
  .notifications-category-chip {
    min-height: 40px;
    padding: 8px 16px;
    font-size: var(--text-base, 14px);
  }
}

.notifications-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.notifications-page-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  background: var(--surface-primary);
  box-shadow: var(--shadow-xs);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.notifications-page-item.is-unread {
  border-color: var(--accent-400);
  background: rgba(16, 185, 129, 0.08);
}

.notifications-page-item:hover,
.notifications-page-item:focus-within {
  background: rgba(15, 23, 42, 0.035);
  border-color: rgba(148, 163, 184, 0.56);
  box-shadow: 0 18px 36px -34px rgb(15 23 42 / 0.24);
}

.notifications-page-item.is-unread:hover,
.notifications-page-item.is-unread:focus-within {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.46);
}

[data-theme="dark"] .notifications-page-item:hover,
[data-theme="dark"] .notifications-page-item:focus-within {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .notifications-page-item.is-unread:hover,
[data-theme="dark"] .notifications-page-item.is-unread:focus-within {
  background: rgba(16, 185, 129, 0.14);
}

[data-theme="light"] .notifications-page-item,
body:not([data-theme="dark"]) .notifications-page-item {
  border-color: rgba(148, 163, 184, 0.42);
  box-shadow: 0 16px 34px -34px rgb(15 23 42 / 0.22);
}

[data-theme="light"] .notifications-page-item.is-unread,
body:not([data-theme="dark"]) .notifications-page-item.is-unread {
  border-color: rgba(16, 185, 129, 0.42);
}

.notifications-page-main {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: calc(var(--radius-lg) - 8px);
}

.notifications-page-main:hover,
.notifications-page-main:focus-visible {
  background: transparent;
  outline: none;
}

[data-theme="dark"] .notifications-page-main:hover,
[data-theme="dark"] .notifications-page-main:focus-visible {
  background: transparent;
}

.notifications-page-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 7px;
  min-width: 110px;
}

.notifications-page-item .notif-type {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 11px;
  opacity: 0.76;
}

.notifications-page-toggle-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border-default);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  min-height: 0;
  min-inline-size: 0;
  padding: 5px 10px;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  transform: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.notifications-page-toggle-read::before {
  content: none;
}

.notifications-page-toggle-read:hover,
.notifications-page-toggle-read:focus-visible,
.notifications-page-toggle-read:active {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.04);
  transform: none;
}

.notifications-page-toggle-read--readonly,
.notifications-page-toggle-read--readonly:hover,
.notifications-page-toggle-read--readonly:focus-visible {
  cursor: default;
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
  background: var(--surface-secondary);
  box-shadow: none;
}

[data-theme="dark"] .notifications-page-toggle-read:hover,
[data-theme="dark"] .notifications-page-toggle-read:focus-visible,
[data-theme="dark"] .notifications-page-toggle-read:active {
  background: rgba(255, 255, 255, 0.05);
}

.notifications-page-toggle-stack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill, 999px);
  padding-inline: 9px;
  min-height: 28px;
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  transform: none;
}

.notifications-page-toggle-stack::before {
  content: '↳';
  font-size: 12px;
  line-height: 1;
  opacity: 0.72;
}

.notifications-page-toggle-stack:hover,
.notifications-page-toggle-stack:focus-visible,
.notifications-page-toggle-stack:active {
  color: var(--text-primary);
  transform: none;
}

.notifications-item-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.notifications-item-header .notifications-item-title {
  flex: 1;
  min-width: 0;
}

.notifications-page-item .notifications-item-title {
  line-height: 1.24;
}

.notifications-page-item .notifications-item-title-text {
  min-width: 0;
  flex: 0 1 auto;
}

.notifications-page-item .notifications-stack-badge {
  margin-left: auto;
  flex: 0 0 auto;
}

.notifications-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notifications-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.86;
}

.notifications-page-side .notifications-status-badge {
  margin-left: 0;
  align-self: flex-end;
}

.notifications-page-side .notifications-page-toggle-read {
  align-self: flex-end;
}

.notifications-item-message {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
}

.notifications-page-item .notifications-item-message {
  line-height: 1.38;
}

.notifications-page-item .notifications-item-detail {
  line-height: 1.3;
}

.notifications-page-item .notifications-item-meta {
  line-height: 1.2;
}

.notifications-page-item .notifications-item-meta--stack {
  gap: 6px;
}

.notifications-page-item .notifications-habit-pill-list {
  gap: 5px;
}

.notifications-page-item .notifications-habit-pill {
  gap: 5px;
  padding: 3px 9px;
}

.notifications-page-item .notifications-habit-icon {
  font-size: 11px;
}

.notifications-stack-panel {
  grid-column: 1 / -1;
  margin-top: -1px;
}

.notifications-stack-series-list {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.notifications-stack-series-item {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 90%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.notifications-stack-series-item:hover,
.notifications-stack-series-item:focus-visible {
  border-color: rgba(16, 185, 129, 0.3);
  background: color-mix(in srgb, var(--surface-secondary) 76%, rgba(16, 185, 129, 0.08));
  box-shadow: 0 12px 24px -22px rgb(15 23 42 / 0.22);
  outline: none;
}

.notifications-stack-series-item.is-unread {
  border-color: rgba(16, 185, 129, 0.22);
  background:
    linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%),
    color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary));
}

.notifications-stack-series-body {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 9px 10px;
}

.notifications-stack-series-top,
.notifications-stack-series-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.notifications-stack-series-title {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-primary);
  min-width: 0;
}

.notifications-stack-series-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(6 95 70 / 0.88);
  background: rgba(236, 253, 245, 0.96);
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.notifications-stack-series-item.is-read .notifications-stack-series-state {
  color: var(--text-tertiary);
  background: var(--surface-primary);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .notifications-stack-series-state {
  color: rgba(209, 250, 229, 0.92);
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(52, 211, 153, 0.18);
}

[data-theme="dark"] .notifications-stack-series-item.is-read .notifications-stack-series-state {
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.notifications-stack-series-snippet {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notifications-stack-series-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  min-width: 0;
}

.notifications-stack-series-open {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-accent);
  white-space: nowrap;
}

[data-theme="dark"] .notifications-stack-series-item {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .notifications-stack-series-item:hover,
[data-theme="dark"] .notifications-stack-series-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(52, 211, 153, 0.18);
}

[data-theme="dark"] .notifications-stack-series-item.is-unread {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.18);
}

@media (max-width: 700px) {
  .notifications-page-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .notifications-page-side {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .notifications-page-side .notifications-status-badge {
    align-self: auto;
  }

  .notifications-page-side .notifications-page-toggle-read {
    align-self: auto;
    min-inline-size: 0;
  }

  .notifications-page-side .notifications-page-toggle-stack {
    align-self: auto;
  }

  .notifications-stack-series-item {
    width: 100%;
  }

  .notifications-stack-series-top,
  .notifications-stack-series-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* ===== Theme Switch Component (Header & Sidebar) ===== */
.theme-switch {
  position: relative;
  width: 56px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.theme-switch:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

.theme-switch-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-switch:hover .theme-switch-track {
  background: var(--surface-tertiary);
  border-color: var(--border-strong);
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: var(--surface-primary);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Light mode (sun visible) */
[data-theme="light"] .theme-switch-thumb {
  transform: translateX(0);
}

/* Dark mode (moon visible, thumb moves right) */
[data-theme="dark"] .theme-switch-thumb {
  transform: translateX(28px);
  background: var(--accent-500);
}

.theme-switch-icon {
  position: absolute;
  width: 14px;
  height: 14px;
  transition: opacity 0.2s ease;
}

/* Sun icon - visible in light mode */
.theme-switch-icon-sun {
  opacity: 1;
  color: var(--text-warning);
}

[data-theme="dark"] .theme-switch-icon-sun {
  opacity: 0;
}

/* Moon icon - visible in dark mode */
.theme-switch-icon-moon {
  opacity: 0;
  color: var(--text-primary);
}

[data-theme="dark"] .theme-switch-icon-moon {
  opacity: 1;
}

/* Header structure with isolated left edge */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.app-header-edge-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: var(--space-4);
}

/* Header placement */
.header-theme-switch {
  display: flex;
  align-items: center;
}

/* ===== Sound Switch Component (Header & Sidebar) ===== */
.sound-switch {
  position: relative;
  width: 56px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  outline: none;
}

.sound-switch:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

.sound-switch-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sound-switch:hover .sound-switch-track {
  background: var(--surface-tertiary);
  border-color: var(--border-strong);
}

.sound-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: transform 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sound enabled (speaker visible) */
.sound-switch[aria-checked="true"] .sound-switch-thumb {
  transform: translateX(0);
  background: var(--surface-primary);
}

/* Sound disabled (muted visible, thumb moves right) */
.sound-switch[aria-checked="false"] .sound-switch-thumb {
  transform: translateX(28px);
  background: var(--surface-tertiary);
}

.sound-switch-icon {
  position: absolute;
  width: 14px;
  height: 14px;
  transition: opacity 0.2s ease;
}

/* Speaker icon - visible when sound enabled */
.sound-switch-icon-on {
  opacity: 1;
  color: var(--text-primary);
}

.sound-switch[aria-checked="false"] .sound-switch-icon-on {
  opacity: 0;
}

/* Muted icon - visible when sound disabled */
.sound-switch-icon-off {
  opacity: 0;
  color: var(--text-muted);
}

.sound-switch[aria-checked="false"] .sound-switch-icon-off {
  opacity: 1;
}

/* Pre-applied muted state from html class (avoids default->muted flash on reload). */
html.ks-muted .sound-switch .sound-switch-thumb {
  transform: translateX(28px);
  background: var(--surface-tertiary);
}

html.ks-muted .sound-switch .sound-switch-icon-on {
  opacity: 0;
}

html.ks-muted .sound-switch .sound-switch-icon-off {
  opacity: 1;
}

/* Header placement */
.header-sound-switch {
  display: flex;
  align-items: center;
}

/* ===== Switch Row Layout (Sidebar Footer) ===== */
.header-left-switch-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.header-left-switch-row .header-theme-switch,
.header-left-switch-row .header-sound-switch {
  display: flex;
  align-items: center;
}

.header-left-layout-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 4px 2px;
}

/* ===== Layout Segmented Control (Mobile | Desktop) ===== */
.layout-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  flex: 0 0 auto;
  min-width: 150px;
  max-width: 100%;
  overflow: hidden;
}

/* Sidebar full-width variant */
.app-sidebar .layout-segmented {
  width: 100%;
  max-width: 100%;
}

/* Segmented: piena larghezza, bottoni uguali */
.app-sidebar .layout-segmented .segmented-group {
  display: flex;
  width: 100%;
}

.app-sidebar .layout-segmented .layout-segment-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 10px;
  /* ridurre rispetto a prima */
  font-size: 14px;
  /* se necessario in mobile */
  text-align: center;
}

/* Evita ellissi aggressiva sul testo */
.app-sidebar .layout-segmented .layout-segment-btn span {
  white-space: nowrap;
  overflow: visible;
  /* oppure: hidden + no ellipsis */
  text-overflow: clip;
}

.layout-segment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.layout-segment-btn .layout-icon {
  width: 16px;
  height: 16px;
  display: none;
  flex-shrink: 0;
}

.layout-segment-btn .layout-label {
  display: inline-block;
}

.layout-segment-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .layout-segment-btn:hover {
  background: rgba(0, 0, 0, 0.03);
}

.layout-segment-btn:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

/* Active state with subtle gradient */
.layout-segment-btn[aria-checked="true"] {
  background: linear-gradient(135deg,
      var(--surface-primary) 0%,
      rgba(var(--accent-rgb, 255, 208, 97), 0.08) 100%);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(var(--accent-rgb, 255, 208, 97), 0.15);
}

[data-theme="light"] .layout-segment-btn[aria-checked="true"] {
  background: linear-gradient(135deg,
      var(--surface-primary) 0%,
      rgba(var(--accent-rgb, 255, 208, 97), 0.06) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(var(--accent-rgb, 255, 208, 97), 0.2);
}

/* Responsive: switch layout selector to icons when sidebar is narrow */
/* Theme switch NEVER degrades - always stays full */
@media (max-width: 420px) {
  .app-sidebar .layout-segment-btn .layout-label {
    display: none;
  }

  .app-sidebar .layout-segment-btn .layout-icon {
    display: inline-flex;
  }

  .app-sidebar .layout-segment-btn {
    padding: 7px 10px;
  }

  .app-sidebar .layout-segmented {
    min-width: auto;
  }
}

/* Additional responsive adjustments for very narrow viewports */
@media (max-width: 360px) {
  .top-controls-row {
    padding: 0 var(--space-2);
  }
}

/* Fallback: se proprio non ci sta, scroll orizzontale senza taglio */
@media (max-width: 420px) {
  .app-sidebar .layout-segmented {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar .layout-segmented {
    width: max-content;
  }
}

/* User Menu */
.header-user {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-1-5) var(--space-3-5);
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

:root {
  --ui-orbit-ring-base: rgba(255, 190, 90, 0.95);
  --ui-orbit-ring-hot: rgba(255, 245, 230, 1);
  --ui-orbit-ring-low: rgba(120, 60, 18, 0.55);
  --ui-orbit-ring-colors: var(--ui-orbit-ring-base), rgba(255, 150, 50, 0.8), var(--ui-orbit-ring-low), rgba(255, 210, 130, 0.9), var(--ui-orbit-ring-base);
  --ui-orbit-ring-width: 1px;
  --ui-orbit-ring-outset: 1px;
  --ui-orbit-ring-opacity: 0.9;
  --ui-orbit-glow-opacity: 0.45;
  --ui-orbit-glow-blur: 10px;
  --ui-orbit-speed: 4s;
}

[data-theme="light"] {
  --ui-orbit-ring-opacity: 1;
  --ui-orbit-glow-opacity: 0.65;
  --ui-orbit-glow-blur: 13px;
  --ui-orbit-speed: 1.8s;
}

[data-theme="light"] .user-menu-trigger .header-user::before,
[data-theme="light"] .ui-orbit-border::before {
  background-image:
    conic-gradient(from var(--lm-a), var(--ui-orbit-ring-colors)),
    conic-gradient(from var(--lm-a),
      rgba(255, 255, 255, 0) 0 48.2%,
      rgba(255, 248, 235, 1) 49.1%,
      rgba(255, 210, 130, 0.95) 50.4%,
      rgba(255, 255, 255, 0) 52.4% 100%),
    conic-gradient(from calc(var(--lm-a) + 160deg),
      rgba(0, 0, 0, 0) 0 55%,
      rgba(120, 60, 18, 1) 59%,
      rgba(0, 0, 0, 0) 63% 100%);
}

[data-theme="light"] .user-menu-trigger .header-user::after,
[data-theme="light"] .ui-orbit-border::after {
  background-image:
    conic-gradient(from var(--lm-a), var(--ui-orbit-ring-colors)),
    conic-gradient(from var(--lm-a),
      rgba(255, 255, 255, 0) 0 48.2%,
      rgba(255, 248, 235, 1) 49.1%,
      rgba(255, 210, 130, 0.95) 50.4%,
      rgba(255, 255, 255, 0) 52.4% 100%),
    conic-gradient(from calc(var(--lm-a) + 160deg),
      rgba(0, 0, 0, 0) 0 55%,
      rgba(120, 60, 18, 1) 59%,
      rgba(0, 0, 0, 0) 63% 100%);
}

.user-menu-trigger .header-user,
.ui-orbit-border {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --lm-a: 0deg;
}

.user-menu-trigger .header-user::before,
.user-menu-trigger .header-user::after,
.ui-orbit-border::before,
.ui-orbit-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.user-menu-trigger .header-user::before,
.ui-orbit-border::before {
  box-shadow: -2px 2px 0 0 rgba(255, 180, 70, 0.85);
}

.user-menu-trigger .header-user::before,
.ui-orbit-border::before {
  padding: var(--ui-orbit-ring-width);
  background-image:
    conic-gradient(from var(--lm-a), var(--ui-orbit-ring-colors)),
    conic-gradient(from var(--lm-a),
      rgba(255, 255, 255, 0) 0 44%,
      var(--ui-orbit-ring-hot) 46%,
      rgba(255, 230, 190, 0.75) 52%,
      rgba(255, 255, 255, 0) 58% 100%),
    conic-gradient(from calc(var(--lm-a) + 140deg),
      rgba(0, 0, 0, 0) 0 60%,
      var(--ui-orbit-ring-low) 64%,
      rgba(0, 0, 0, 0) 72% 100%),
    radial-gradient(80% 80% at 0% 100%, rgba(255, 190, 90, 0.35) 0 45%, rgba(255, 190, 90, 0) 70%);
  background-blend-mode: normal, screen, screen, screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.user-menu-trigger .header-user::after,
.ui-orbit-border::after {
  padding: var(--ui-orbit-ring-width);
  background-image:
    conic-gradient(from var(--lm-a), var(--ui-orbit-ring-colors)),
    conic-gradient(from var(--lm-a),
      rgba(255, 255, 255, 0) 0 44%,
      var(--ui-orbit-ring-hot) 46%,
      rgba(255, 230, 190, 0.75) 52%,
      rgba(255, 255, 255, 0) 58% 100%),
    conic-gradient(from calc(var(--lm-a) + 140deg),
      rgba(0, 0, 0, 0) 0 60%,
      var(--ui-orbit-ring-low) 64%,
      rgba(0, 0, 0, 0) 72% 100%),
    radial-gradient(90% 90% at 0% 100%, rgba(255, 180, 70, 0.7) 0 55%, rgba(255, 180, 70, 0) 72%);
  background-blend-mode: normal, screen, screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(var(--ui-orbit-glow-blur)) drop-shadow(-2px 2px 0 rgba(255, 180, 70, 0.7));
}

#calendar-quote-container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --lm-a: 0deg;
}

#calendar-quote-container::before,
#calendar-quote-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

#calendar-quote-container::before {
  padding: var(--ui-orbit-ring-width);
  background-image:
    conic-gradient(from var(--lm-a), var(--ui-orbit-ring-colors)),
    conic-gradient(from var(--lm-a),
      rgba(255, 255, 255, 0) 0 40%,
      var(--ui-orbit-ring-hot) 45%,
      rgba(255, 230, 190, 0.6) 58%,
      rgba(255, 255, 255, 0) 70% 100%),
    conic-gradient(from calc(var(--lm-a) + 140deg),
      rgba(0, 0, 0, 0) 0 52%,
      var(--ui-orbit-ring-low) 58%,
      rgba(0, 0, 0, 0) 70% 100%);
  background-blend-mode: normal, screen, screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: lm-orbit var(--ui-quote-orbit-speed, 6.5s) linear infinite;
  animation-timing-function: linear;
}

#calendar-quote-container::after {
  padding: var(--ui-orbit-ring-width);
  background-image:
    conic-gradient(from var(--lm-a), var(--ui-orbit-ring-colors)),
    conic-gradient(from var(--lm-a),
      rgba(255, 255, 255, 0) 0 40%,
      var(--ui-orbit-ring-hot) 45%,
      rgba(255, 230, 190, 0.6) 58%,
      rgba(255, 255, 255, 0) 70% 100%),
    conic-gradient(from calc(var(--lm-a) + 140deg),
      rgba(0, 0, 0, 0) 0 52%,
      var(--ui-orbit-ring-low) 58%,
      rgba(0, 0, 0, 0) 70% 100%);
  background-blend-mode: normal, screen, screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(var(--ui-orbit-glow-blur));
  opacity: var(--ui-orbit-glow-opacity);
  animation: lm-orbit var(--ui-quote-orbit-speed, 6.5s) linear infinite;
  animation-timing-function: linear;
}

.user-menu-trigger .header-user::before,
.ui-orbit-border::before {
  opacity: var(--ui-orbit-ring-opacity);
  animation: lm-orbit var(--ui-orbit-speed) linear infinite;
}

.user-menu-trigger .header-user::after,
.ui-orbit-border::after {
  opacity: var(--ui-orbit-glow-opacity);
  animation: lm-orbit var(--ui-orbit-speed) linear infinite;
}

@media (prefers-reduced-motion: reduce) {

  .user-menu-trigger .header-user::before,
  .user-menu-trigger .header-user::after,
  .ui-orbit-border::before,
  .ui-orbit-border::after,
  #calendar-quote-container::before,
  #calendar-quote-container::after {
    animation: none !important;
  }
}

.header-user:hover {
  border-color: var(--border-strong);
}

.header-user:hover .header-user-avatar--initial,
.header-user:focus-visible .header-user-avatar--initial {
  transform: scale(1.07);
}

.header-user[aria-expanded="true"] {
  border-color: var(--accent-500);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

/* ==========================
   HEADER USER AVATAR — SIMPLE (single source of truth)
   ========================== */
:root {
  --header-avatar-size: 38px;
  --header-avatar-tangent: 4px;
  --header-avatar-hover-lift: 4px;
  --header-avatar-hover-scale: 1.14;
}

/* container avatar: NESSUN crop circolare */
.header-user-avatar {
  width: var(--header-avatar-size);
  height: var(--header-avatar-size);
  min-width: var(--header-avatar-size);
  min-height: var(--header-avatar-size);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  margin-left: calc(-1 * var(--header-avatar-tangent));
  margin-right: var(--space-2);
  z-index: 2;
}

/* immagine: deve vedersi tutta (no crop) */
.header-user-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  transform: translateY(0) scale(1);
  transition: transform 180ms ease;
  will-change: transform;
}

/* PERSON: allineata in basso */
.header-user-avatar--person {
  align-items: flex-end;
  justify-content: center;
}

.header-user-avatar--person .header-user-avatar-img {
  object-position: 60% bottom;
  transform: translateY(6px) scale(1.62);
}

/* NONPERSON: centrata */
.header-user-avatar--nonperson {
  align-items: center;
  justify-content: center;
}

.header-user-avatar--nonperson .header-user-avatar-img {
  object-position: 60% 60%;
  transform: translateY(2px) scale(1.95);
}

/* SYMBOL: 10% smaller than other nonperson */
.header-user-avatar--symbol .header-user-avatar-img {
  transform: translateY(2px) scale(1.76);
}

/* OIDC avatar: static circular crop without zoom effects */
.header-user-avatar--oidc {
  border-radius: 50%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  margin-left: 0;
  margin-right: 10px;
}

.header-user-avatar--oidc .header-user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  transform: none !important;
  transition: none;
}

/* HOVER: person = micro lift */
.header-user:hover .header-user-avatar--person .header-user-avatar-img,
.header-user:focus-visible .header-user-avatar--person .header-user-avatar-img {
  transform: translateY(calc(6px - var(--header-avatar-hover-lift))) scale(1.62);
}

.header-user[aria-expanded="true"] .header-user-avatar--person .header-user-avatar-img {
  transform: translateY(calc(6px - var(--header-avatar-hover-lift))) scale(1.62);
}

/* HOVER: nonperson = scale up */
.header-user:hover .header-user-avatar--nonperson .header-user-avatar-img,
.header-user:focus-visible .header-user-avatar--nonperson .header-user-avatar-img {
  transform: translateY(2px) scale(2.30);
  transform-origin: center;
}

.header-user[aria-expanded="true"] .header-user-avatar--nonperson .header-user-avatar-img {
  transform: translateY(2px) scale(2.30);
  transform-origin: center;
}

.header-user:hover .header-user-avatar--symbol .header-user-avatar-img,
.header-user:focus-visible .header-user-avatar--symbol .header-user-avatar-img {
  transform: translateY(2px) scale(2.07);
}

.header-user:hover .header-user-avatar--oidc .header-user-avatar-img,
.header-user:focus-visible .header-user-avatar--oidc .header-user-avatar-img,
.header-user[aria-expanded="true"] .header-user-avatar--oidc .header-user-avatar-img {
  transform: none !important;
}

.header-user-name-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

#profile-menu-toggle-top.ks-has-service-avatar,
#profile-menu-toggle-sidebar.ks-has-service-avatar {
  --ks-svc-avatar-size: 48px;
  --ks-svc-avatar-left: -1px;
  --ks-svc-avatar-gutter: 10px;
  position: relative;
  padding-left: calc(var(--ks-svc-avatar-size) + var(--ks-svc-avatar-gutter));
}

#profile-menu-toggle-top.ks-has-service-avatar .header-user-avatar,
#profile-menu-toggle-sidebar.ks-has-service-avatar .header-user-avatar {
  visibility: hidden;
  width: 0;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

#profile-menu-toggle-top.ks-has-service-avatar .ks-service-avatar-inset,
#profile-menu-toggle-sidebar.ks-has-service-avatar .ks-service-avatar-inset {
  position: absolute;
  left: var(--ks-svc-avatar-left);
  top: 50%;
  width: var(--ks-svc-avatar-size);
  height: var(--ks-svc-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-secondary);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
  transform: translateY(-50%);
  transition: none !important;
  animation: none !important;
}

#profile-menu-toggle-top.ks-has-service-avatar .ks-service-avatar-inset img,
#profile-menu-toggle-sidebar.ks-has-service-avatar .ks-service-avatar-inset img {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

#profile-menu-toggle-top.ks-has-service-avatar:hover .ks-service-avatar-inset,
#profile-menu-toggle-top.ks-has-service-avatar:focus-visible .ks-service-avatar-inset,
#profile-menu-toggle-top.ks-has-service-avatar[aria-expanded="true"] .ks-service-avatar-inset,
#profile-menu-toggle-sidebar.ks-has-service-avatar:hover .ks-service-avatar-inset,
#profile-menu-toggle-sidebar.ks-has-service-avatar:focus-visible .ks-service-avatar-inset,
#profile-menu-toggle-sidebar.ks-has-service-avatar[aria-expanded="true"] .ks-service-avatar-inset {
  transform: translateY(-50%) !important;
  transition: none !important;
}

#profile-menu-toggle-top.ks-has-service-avatar:hover .ks-service-avatar-inset img,
#profile-menu-toggle-top.ks-has-service-avatar:focus-visible .ks-service-avatar-inset img,
#profile-menu-toggle-top.ks-has-service-avatar[aria-expanded="true"] .ks-service-avatar-inset img,
#profile-menu-toggle-sidebar.ks-has-service-avatar:hover .ks-service-avatar-inset img,
#profile-menu-toggle-sidebar.ks-has-service-avatar:focus-visible .ks-service-avatar-inset img,
#profile-menu-toggle-sidebar.ks-has-service-avatar[aria-expanded="true"] .ks-service-avatar-inset img {
  transform: none !important;
  transition: none !important;
}

#profile-menu-toggle-top.ks-has-service-avatar .header-user-name-wrap,
#profile-menu-toggle-sidebar.ks-has-service-avatar .header-user-name-wrap {
  margin-left: 9px;
}

@media (max-width: 768px) {
  #profile-menu-toggle-top.ks-has-service-avatar,
  #profile-menu-toggle-sidebar.ks-has-service-avatar {
    --ks-svc-avatar-size: 42px;
    --ks-svc-avatar-left: 0px;
    --ks-svc-avatar-gutter: 8px;
  }
}

.header-user-name {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: calc(var(--text-sm) * 1.01);
  font-weight: 560;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--text-primary) 84%, var(--text-secondary));
  margin-left: 2px;
  white-space: nowrap;
}

.header-user-caret {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-left: 2px;
}

.header-profile {
  position: relative;
  display: flex;
  align-items: center;
}

body.layout-header #app-header .header-actions .header-profile--top {
  margin-right: var(--space-2);
  width: 192px;
  min-width: 192px;
  max-width: 192px;
}

body.layout-header .app-header-inner .header-user-name-wrap,
body.layout-header .app-header-inner .header-user-name {
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

body.layout-header #app-header .header-actions #settings-hub-toggle-top {
  margin-left: clamp(30px, 3.2vw, 44px);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  min-width: 200px;
  padding: var(--space-1) 0;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.2) translateY(-8px);
  transform-origin: calc(100% - 16px) -6px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.profile-dropdown--open {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.profile-dropdown.closing {
  visibility: visible !important;
  pointer-events: none !important;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.profile-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.profile-dropdown-link:hover,
.profile-dropdown-link:focus {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.profile-dropdown-link.is-active {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

[data-theme="light"] .profile-dropdown-link:hover,
[data-theme="light"] .profile-dropdown-link:focus,
body:not([data-theme="dark"]) .profile-dropdown-link:hover,
body:not([data-theme="dark"]) .profile-dropdown-link:focus {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
}

[data-theme="light"] .profile-dropdown-link.is-active,
body:not([data-theme="dark"]) .profile-dropdown-link.is-active {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
}

.profile-dropdown-link svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}

.profile-dropdown-link:hover svg,
.profile-dropdown-link:focus svg {
  opacity: 1;
}

.profile-dropdown-link.is-active svg {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .profile-dropdown {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 150ms ease, visibility 150ms ease !important;
  }

  .profile-dropdown.profile-dropdown--open,
  .profile-dropdown.closing {
    animation: none !important;
  }

  .profile-dropdown.profile-dropdown--open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .profile-dropdown:not(.profile-dropdown--open):not(.closing) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.profile-dropdown-button {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

/* ============================================
   APP SIDEBAR
   ============================================ */

.app-sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-fixed);
  background: var(--surface-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

/* --- TOP: compattare sidebar-header-content e centrare switch --- */
/* Compatta l'header della sidebar */
.sidebar-header {
  padding-top: 6px;
  padding-bottom: 2px;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  min-height: auto;
  overflow: visible;
}

/* Compatta sidebar-header-content */
.sidebar-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: 4px;
  padding-bottom: 2px;
  margin: 0;
  min-height: 0;
  height: auto;
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Segmented più vicino al titolo e al MENU */
.top-controls-row {
  display: flex;
  justify-content: center;
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 0;
}

/* MENU: riduci distanza dall'area controlli */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  margin-top: 6px;
  /* meno aria prima di "MENU" */
}

/* =========================================================
   BRAND CANONICO — TOP e LEFT DEVONO ESSERE IDENTICI
   ========================================================= */

.ks-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* spazio icona↔testo */
}

/* ICONA: stessa dimensione ovunque (più grande) */
.ks-logo .ks-logo-mark,
.ks-logo svg {
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px;
}

/* PNG logo: altezza fissa ma larghezza auto per preservare il ratio */
.ks-logo .ks-logo-icon {
  height: 60px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  max-width: none !important;
}

/* WORdMARK: titolo + PLUS */
.ks-logo .ks-logo-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

/* TITOLO: aumentare ancora un po' */
.ks-logo .ks-logo-title {
  font-size: 28px !important;
  line-height: 1.05 !important;
}

/* PLUS: proporzionato al titolo */
.ks-logo .ks-logo-plus {
  font-size: 17px !important;
  line-height: 1.05 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
}

/* BRAND: spacing identico TOP + LEFT */
.ks-logo {
  display: inline-flex;
  align-items: center;
  gap: 5px !important;
  /* leggermente più spazio tra icona e wordmark */
}

/* Micro offset del wordmark (avvicina davvero) */
.ks-logo .ks-logo-wordmark {
  margin-left: -3px !important;
  /* mantiene compattezza senza schiacciare il testo sul logo */
}

/* SHIFT a sinistra SOLO sidebar (selettore corretto) */
.app-sidebar .sidebar-logo {
  width: 100%;
  box-sizing: border-box;
  transform: none !important;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* Evita che wrapper del link introduca padding/spazio invisibile */
.ks-logo-icon-link {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
}

/* Segmented: default = icona + testo (classi corrette dal DOM) */
.layout-segmented .layout-icon {
  display: inline-flex !important;
  margin-right: 8px;
}

/* Label visibile finché c'è spazio */
.layout-segmented .layout-label {
  display: inline;
  white-space: nowrap;
}

/* Quando la sidebar/top bar è stretta: nascondi SOLO il testo, lascia l'icona */
@media (max-width: 480px) {
  .layout-segmented .layout-label {
    display: none !important;
  }

  .layout-segmented .layout-icon {
    margin-right: 0;
  }
}

/* Se serve mantenere area tappabile, farla "sensata" e coerente */
@media (pointer: coarse) {
  .ks-logo-icon-link {
    padding: 6px !important;
    /* touch-friendly ma non crea distanza enorme */
  }
}

/* Rimuovi qualsiasi scala diversa tra top e left */
.app-header .ks-logo,
.app-sidebar .ks-logo {
  transform: none !important;
  zoom: 1 !important;
}

/* Sidebar header compaction */
.app-sidebar .sidebar-header {
  min-height: unset !important;
  height: auto !important;
}

.app-sidebar .sidebar-header-content {
  padding-top: 2px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   SIDEBAR HEADER-LEFT — HARD OVERRIDES (ANTI-REGRESSION)
   Mettere QUESTO BLOCCO in fondo al file CSS.
   ========================================================= */

/* 1) RIMUOVI LINEE REINTRODOTTE */
.app-sidebar .sidebar-header {
  border-bottom: none !important;
}

.app-sidebar .sidebar-footer {
  border-top: none !important;
}

/* Se esistono hr/separator immediatamente sotto header o sopra footer */
.app-sidebar .sidebar-header+hr,
.app-sidebar .sidebar-header+.sidebar-separator,
.app-sidebar .top-controls-row+hr,
.app-sidebar .top-controls-row+.sidebar-separator,
.app-sidebar .sidebar-footer>hr,
.app-sidebar .sidebar-footer>.sidebar-separator {
  display: none !important;
}

/* 2) SWITCH TEMA CENTRATO (wrapper reale) */
.app-sidebar .header-theme-switch {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 0 8px !important;
}

.app-sidebar .header-theme-switch::before,
.app-sidebar .header-theme-switch::after {
  content: none !important;
}

/* Sound switch in sidebar */
.app-sidebar .header-sound-switch {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 8px 0 10px !important;
}

.app-sidebar .header-sound-switch::before,
.app-sidebar .header-sound-switch::after {
  content: none !important;
}

/* 3) COMPATTA SPAZI ALTI (solo spacing, no resize componenti) */
/* Header: niente altezze forzate che creano vuoto */
.app-sidebar .sidebar-header {
  min-height: unset !important;
  height: auto !important;
  padding-top: 6px !important;
  padding-bottom: 14px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/* Contenuto header: togli aria verticale */
.app-sidebar .sidebar-header-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  gap: 10px !important;
  /* titolo più vicino all'icona */
  align-items: center;
}

.app-sidebar .sidebar-top-meta {
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 0;
  margin-bottom: 18px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: none;
}

/* Brand: icona e titolo più vicini */
.app-sidebar .brand-row,
.app-sidebar .logo-row {
  gap: 8px !important;
  /* prima ~10–12px */
}

/* Aumentare leggermente il titolo per allinearlo verticalmente al logo */
.app-sidebar .ks-logo-title {
  font-size: clamp(18px, 1.15rem, 20px);
  line-height: 1.1;
}

/* Il suffisso PLUS deve crescere in proporzione */
.app-sidebar .ks-logo-plus {
  font-size: clamp(11px, 0.7rem, 12px);
  letter-spacing: 0.12em;
}

/* Responsive negative margin per wordmark solo in sidebar */
.app-sidebar .ks-logo-wordmark {
  margin-left: clamp(-18px, -1.5vw, -12px);
  flex-wrap: nowrap;
  min-width: 0;
}

.app-sidebar .ks-logo-plus-link,
.app-sidebar .ks-logo-plus {
  white-space: nowrap;
  flex-shrink: 0;
}

.app-sidebar .app-shell-plan-pill--sidebar {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* Layout segmented: ancora più vicino al brand */
.app-sidebar .top-controls-row {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}

/* Footer: più respiro e separatore SOLO tra switch e logout */
.app-sidebar .sidebar-footer {
  border-top: none !important;
  /* niente riga sopra lo switch */
}

/* Separatore tra switch e logout */
.app-sidebar .footer-separator {
  display: block !important;
  height: 1px;
  background: var(--border-subtle);
  opacity: 0.35;
  margin: 10px 0 14px !important;
  /* spacing reale */
}

/* Spazio extra prima del bottone logout (se serve) */
.app-sidebar .sidebar-actions {
  margin-top: 0 !important;
  padding-top: 12px !important;
}

/* Sidebar Controls: Theme (left) + Layout (right) - DEPRECATED */
.sidebar-controls {
  display: none;
  /* Hidden since we reorganized layout */
}

/* Theme switch in basso sopra logout - DEPRECATED */
.bottom-theme-switch-row {
  display: none;
  /* Replaced by theme-switch-row */
}

/* Sidebar logo - Uses unified .ks-logo from logo.css */

/* Sidebar Navigation */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  margin-top: 8px;
  /* meno aria prima di "MENU" */
}

.sidebar-nav-section {
  margin-bottom: var(--space-4);
}

.sidebar-nav-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.sidebar-nav-link:hover {
  background: var(--interactive-hover);
  color: var(--text-primary);
}

.sidebar-nav-link.active {
  background: var(--accent-bg);
  color: var(--text-accent);
}

.sidebar-admin-children .sidebar-nav-link {
  transition: all var(--transition-fast);
}

.sidebar-admin-children .sidebar-nav-link:hover {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

[data-theme="light"] .sidebar-admin-children .sidebar-nav-link:hover,
body:not([data-theme="dark"]) .sidebar-admin-children .sidebar-nav-link:hover {
  background: rgba(79, 70, 229, 0.12);
  color: #4f46e5;
}

.sidebar-admin-children .sidebar-nav-link.active {
  background: rgba(99, 102, 241, 0.18);
  color: #6366f1;
}

[data-theme="light"] .sidebar-admin-children .sidebar-nav-link.active,
body:not([data-theme="dark"]) .sidebar-admin-children .sidebar-nav-link.active {
  background: rgba(79, 70, 229, 0.16);
  color: #4f46e5;
}

.sidebar-nav-link svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.sidebar-nav-link:hover svg,
.sidebar-nav-link.active svg {
  opacity: 1;
}

/* Premium/Highlight Navigation Link */
.sidebar-nav-link.nav-highlight {
  background: linear-gradient(135deg, rgba(var(--accent-500-rgb), 0.15), rgba(var(--accent-600-rgb), 0.08));
  color: var(--accent-500);
  border: 1px solid rgba(var(--accent-500-rgb), 0.3);
}

.sidebar-nav-link.nav-highlight:hover {
  background: linear-gradient(135deg, rgba(var(--accent-500-rgb), 0.25), rgba(var(--accent-600-rgb), 0.15));
  border-color: var(--accent-500);
}

.sidebar-nav-link.nav-highlight svg {
  opacity: 1;
  color: var(--accent-500);
}

.header-nav-link.nav-highlight {
  color: var(--accent-500);
  position: relative;
}

.header-nav-link.nav-highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-500);
  border-radius: 1px;
}

/* Sidebar Footer - FIX 2D: Spacing definitivo */
.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-actions {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  margin-top: 0;
  /* evita stacking di margini */
}

.sidebar-actions .action-btn {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}

.sidebar-actions .action-btn:hover {
  background: var(--surface-interactive-hover);
  border-color: var(--border-strong);
}

.sidebar-actions .action-btn:active {
  transform: translateY(1px);
}

.sidebar-actions .action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-bg);
  border-color: var(--accent-border);
}

.sidebar-actions .action-btn .action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.sidebar-actions .action-btn svg {
  width: 18px;
  height: 18px;
}

.sidebar-actions .action-btn.danger {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.sidebar-actions .action-btn.danger:hover {
  background: #fecaca;
  border-color: #f87171;
  color: #7f1d1d;
}

body.dark-theme .sidebar-actions .action-btn.danger {
  background: rgba(127, 29, 29, 0.85);
  border-color: #b91c1c;
  color: #fee2e2;
}

body.dark-theme .sidebar-actions .action-btn.danger:hover {
  background: #b91c1c;
  border-color: #f87171;
  color: #ffffff;
}

.sidebar-actions .action-btn.danger .action-icon {
  color: inherit;
}

/* ============================================
   APP MAIN CONTENT
   ============================================ */

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1;
  padding: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.app-page[data-page="calendar"] .app-content {
  max-width: none;
  margin: 0;
  width: 100%;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.app-grid.two-columns {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  align-items: start;
}

.section-title {
  font-family: var(--font-display);
  font-size: calc(var(--text-2xl) * 1.15);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.section-description {
  font-size: calc(var(--text-base) * 1.1);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* Page Header */
.page-header {
  margin-bottom: var(--space-8);
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-title {
  font-family: var(--font-display);
  font-size: calc(var(--text-3xl) * 1.15);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.page-subtitle {
  font-size: calc(var(--text-base) * 1.1);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================
   CARDS - APP VARIANT
   ============================================ */

.app-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.app-card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.app-card-title {
  font-size: calc(var(--text-lg) * 1.14);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.12;
}

.app-card-subtitle {
  font-size: calc(var(--text-sm) * 1.1);
  color: var(--text-tertiary);
  margin-top: var(--space-0-5);
}

.app-card-body {
  padding: var(--space-6);
}

.app-card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

/* ============================================
   STAT CARDS
   ============================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.stat-label {
  font-size: calc(var(--text-xs) * 1.1);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.stat-value-accent {
  color: var(--text-accent);
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: calc(var(--text-sm) * 1.1);
  font-weight: var(--font-medium);
  margin-top: var(--space-2);
}

.stat-change.positive {
  color: var(--success);
}

.stat-change.negative {
  color: var(--danger);
}

.stat-change.neutral {
  color: var(--text-muted);
}

/* ============================================
   EMPTY STATES
   ============================================ */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-title {
  font-size: calc(var(--text-xl) * 1.12);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  font-size: calc(var(--text-base) * 1.1);
  color: var(--text-tertiary);
  max-width: 400px;
  margin: 0 auto var(--space-6);
}

.calendar-empty-state-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.loading-spinner::after {
  content: '';
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   MINIMAP — month overview popover
   ============================================ */
/* ---- Toggle stack ---- */
.calendar-header-toggle-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  flex: 0 0 auto;
}

/* ---- Side actions column (minimap + today) ---- */
.calendar-side-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}
.cal-today-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 650;
  color: color-mix(in srgb, var(--text-secondary) 86%, var(--accent-300));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-elevated, var(--surface-secondary)) 34%, transparent),
      color-mix(in srgb, var(--surface-secondary) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--border-default) 38%, transparent);
  border-radius: var(--radius-full);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 22px -24px rgba(2, 6, 23, 0.68);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
  white-space: nowrap;
}
.cal-today-btn::before,
.cal-minimap-btn::before {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -45%;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  opacity: 0.16;
  transform: translateX(-120%) skewX(-18deg);
  animation: ilabSheenDrift 7.8s ease-in-out infinite;
  pointer-events: none;
}
.cal-today-btn > *,
.cal-minimap-btn > * {
  position: relative;
  z-index: 1;
}
.cal-today-btn:hover {
  transform: translateY(-1px);
  color: color-mix(in srgb, var(--text-primary) 82%, var(--accent-300));
  border-color: color-mix(in srgb, var(--accent-500) 28%, var(--border-default));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-elevated, var(--surface-secondary)) 46%, transparent),
      color-mix(in srgb, var(--accent-bg) 12%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 24px -24px rgba(2, 6, 23, 0.58);
}
.cal-today-btn:hover::before,
.cal-minimap-btn:hover::before {
  opacity: 0.28;
  animation-duration: 4.8s;
}
.cal-today-btn:focus-visible,
.cal-minimap-btn:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.6);
  outline-offset: 2px;
}

/* ---- Star slot inside label — P2: explicit left margin so star never overlaps text ---- */
.view-star-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  overflow: visible;
  vertical-align: middle;
  margin-left: 10px;
}

/* Pinned view star — lives inside .view-star-slot */
.cal-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: color 0.15s;
  flex-shrink: 0;
  padding: 0;
  margin-left: 2px;
  position: relative; /* no absolute — sits in flex flow of slot */
}
.cal-pin-btn:hover {
  color: var(--text-secondary);
}
.cal-pin-btn.is-pinned,
.cal-pin-btn[aria-pressed="true"] {
  color: #f59e0b;
}
.cal-pin-star {
  pointer-events: none;
}
.cal-pin-btn:not(.is-pinned) .cal-pin-star {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.cal-pin-pop {
  animation: cal-pin-pop 0.3s ease;
}
@keyframes cal-pin-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes ilabSheenDrift {
  0%,
  18% {
    transform: translateX(-120%) skewX(-18deg);
  }

  38% {
    transform: translateX(210%) skewX(-18deg);
  }

  100% {
    transform: translateX(210%) skewX(-18deg);
  }
}

.cal-minimap-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(18, 22, 31, 0.86), rgba(9, 12, 18, 0.94));
  color: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 30px -24px rgba(2, 6, 23, 0.7);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.cal-minimap-btn svg {
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex: 0 0 auto;
  fill: currentColor;
}

.cal-minimap-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -24px rgba(15, 23, 42, 0.55);
}
[data-theme="light"] .cal-today-btn,
[data-theme="light"] .cal-minimap-btn,
html:not([data-theme="dark"]) .cal-today-btn,
html:not([data-theme="dark"]) .cal-minimap-btn {
  border-color: var(--border-default);
  background: var(--surface-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="light"] .cal-today-btn,
html:not([data-theme="dark"]) .cal-today-btn {
  color: color-mix(in srgb, var(--text-secondary) 84%, var(--accent-600));
  border-color: color-mix(in srgb, var(--border-default) 24%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.66),
      color-mix(in srgb, var(--surface-secondary) 42%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 12px 20px -26px rgba(76, 53, 22, 0.22);
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

[data-theme="light"] .cal-minimap-btn,
html:not([data-theme="dark"]) .cal-minimap-btn {
  color: var(--text-primary);
}

[data-theme="light"] .cal-today-btn:hover,
[data-theme="light"] .cal-minimap-btn:hover,
html:not([data-theme="dark"]) .cal-today-btn:hover,
html:not([data-theme="dark"]) .cal-minimap-btn:hover {
  background: var(--interactive-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 10px 24px -20px rgba(123, 90, 47, 0.28);
}

[data-theme="light"] .cal-today-btn:hover,
html:not([data-theme="dark"]) .cal-today-btn:hover {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--accent-600));
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.72),
      color-mix(in srgb, var(--accent-bg) 26%, var(--surface-secondary)));
  border-color: color-mix(in srgb, var(--accent-500) 20%, var(--border-default));
}

.cal-minimap-panel {
  position: fixed;
  z-index: 10000;
  width: min(418px, calc(100vw - 20px));
  min-width: 360px;
  max-width: 418px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(18, 22, 31, 0.94), rgba(9, 12, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 26px 54px -32px rgba(2, 6, 23, 0.78);
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.2) translateY(-8px);
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.cal-minimap-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cal-minimap-panel.closing {
  visibility: visible;
  pointer-events: none;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.mm-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.mm-title {
  flex: 1;
  font-size: calc(var(--text-base) * 1.04);
  font-weight: 700;
  color: rgba(248, 250, 252, 0.94);
  text-align: center;
  white-space: nowrap;
}
.mm-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.86);
  cursor: pointer;
  font-size: 19px;
  padding: 0;
  transition: background 0.1s, color 0.1s;
}
.mm-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.96);
}

.mm-nav-btn.is-unavailable,
.mm-nav-btn:disabled.is-unavailable {
  visibility: hidden;
  pointer-events: none;
}

.mm-today-btn {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.86);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.mm-today-btn:hover {
  background: rgba(245, 158, 11, 0.14);
  color: rgba(251, 191, 36, 0.96);
}
.mm-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-bottom: 8px;
}
.mm-dow {
  font-size: 12px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.86);
  text-align: center;
  text-transform: uppercase;
}
.mm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.mm-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-secondary);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, box-shadow 0.1s;
}
.mm-cell:hover:not(.mm-empty) {
  transform: scale(1.15);
  box-shadow: var(--shadow-sm);
}
.mm-cell.mm-empty {
  background: transparent;
  cursor: default;
}
.mm-cell.mm-good {
  background: color-mix(in srgb, var(--success, #22c55e) 18%, var(--surface-secondary));
  color: var(--text-secondary);
}
.mm-cell.mm-medium {
  background: color-mix(in srgb, var(--warning, #f59e0b) 15%, var(--surface-secondary));
  color: var(--text-secondary);
}
.mm-cell.mm-bad {
  background: color-mix(in srgb, var(--danger, #ef4444) 15%, var(--surface-secondary));
  color: var(--text-secondary);
}
.mm-cell.mm-none {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(148, 163, 184, 0.82);
}
.mm-cell.mm-pending {
  cursor: pointer;
  opacity: 0.9;
}
.mm-cell.mm-future {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(148, 163, 184, 0.82);
  opacity: 0.45;
}
.mm-cell:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 1px;
}
.mm-cell.mm-today {
  box-shadow: inset 0 0 0 2px var(--accent-500);
  font-weight: 700;
}
.mm-cell.mm-selected {
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}
.mm-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.mm-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.75px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.86);
}
.mm-swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
}
.mm-swatch.mm-good { background: color-mix(in srgb, var(--success, #22c55e) 35%, var(--surface-secondary)); }
.mm-swatch.mm-medium { background: color-mix(in srgb, var(--warning, #f59e0b) 30%, var(--surface-secondary)); }
.mm-swatch.mm-bad { background: color-mix(in srgb, var(--danger, #ef4444) 30%, var(--surface-secondary)); }

[data-theme="light"] .cal-minimap-panel,
html:not([data-theme="dark"]) .cal-minimap-panel {
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.97), rgba(245, 236, 224, 0.98));
  border-color: rgba(189, 147, 98, 0.28);
  box-shadow: 0 24px 52px -30px rgba(123, 90, 47, 0.24);
}

[data-theme="light"] .mm-title,
html:not([data-theme="dark"]) .mm-title {
  color: #2f2218;
}

[data-theme="light"] .mm-nav-btn,
[data-theme="light"] .mm-today-btn,
html:not([data-theme="dark"]) .mm-nav-btn,
html:not([data-theme="dark"]) .mm-today-btn {
  border-color: rgba(189, 147, 98, 0.26);
  background: rgba(255, 255, 255, 0.74);
  color: #654c36;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

[data-theme="light"] .mm-nav-btn:hover,
[data-theme="light"] .mm-today-btn:hover,
html:not([data-theme="dark"]) .mm-nav-btn:hover,
html:not([data-theme="dark"]) .mm-today-btn:hover {
  background: rgba(255, 248, 239, 0.96);
  color: #3f2d1f;
}

[data-theme="light"] .mm-dow,
[data-theme="light"] .mm-legend-item,
html:not([data-theme="dark"]) .mm-dow,
html:not([data-theme="dark"]) .mm-legend-item {
  color: rgba(101, 76, 54, 0.82);
}

[data-theme="light"] .mm-cell,
html:not([data-theme="dark"]) .mm-cell {
  background: rgba(255, 249, 242, 0.92);
  color: #58422f;
}

[data-theme="light"] .mm-cell.mm-none,
html:not([data-theme="dark"]) .mm-cell.mm-none {
  background: rgba(109, 80, 48, 0.08);
  color: rgba(88, 66, 47, 0.7);
}

[data-theme="light"] .mm-cell.mm-future,
html:not([data-theme="dark"]) .mm-cell.mm-future {
  background: rgba(109, 80, 48, 0.06);
  color: rgba(88, 66, 47, 0.5);
  opacity: 1;
}

[data-theme="light"] .mm-cell.mm-good,
html:not([data-theme="dark"]) .mm-cell.mm-good {
  background: color-mix(in srgb, #78c792 26%, rgba(255, 249, 242, 0.96));
  color: #2f2218;
}

[data-theme="light"] .mm-cell.mm-medium,
html:not([data-theme="dark"]) .mm-cell.mm-medium {
  background: color-mix(in srgb, #f3c97a 34%, rgba(255, 249, 242, 0.96));
  color: #2f2218;
}

[data-theme="light"] .mm-cell.mm-bad,
html:not([data-theme="dark"]) .mm-cell.mm-bad {
  background: color-mix(in srgb, #ef9a8e 28%, rgba(255, 249, 242, 0.96));
  color: #2f2218;
}

[data-theme="light"] .mm-cell.mm-selected,
html:not([data-theme="dark"]) .mm-cell.mm-selected {
  outline-color: #7b5530;
}

[data-theme="light"] .mm-legend,
html:not([data-theme="dark"]) .mm-legend {
  border-top-color: rgba(189, 147, 98, 0.2);
}

@media (max-width: 640px) {
  .cal-minimap-panel {
    width: calc(100vw - 12px);
    min-width: 0;
    max-width: calc(100vw - 12px);
    padding: 18px;
    max-height: calc(100svh - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mm-nav-row {
    margin-bottom: 14px;
  }

  .mm-title {
    font-size: var(--text-base);
  }

  .mm-nav-btn {
    width: 34px;
    height: 34px;
  }

  .mm-grid,
  .mm-dow-row {
    gap: 6px;
  }

  .mm-cell {
    font-size: 12.5px;
  }

  .mm-legend {
    justify-content: center;
    text-align: center;
  }

  .mm-legend-item {
    font-size: 12.25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cal-minimap-panel {
    transform: none !important;
    animation: none !important;
    transition: opacity 150ms ease, visibility 150ms ease !important;
  }

  .cal-minimap-panel.is-open,
  .cal-minimap-panel.closing {
    animation: none !important;
  }

  .cal-minimap-panel.is-open {
    opacity: 1;
    visibility: visible;
  }

  .cal-minimap-panel:not(.is-open):not(.closing) {
    opacity: 0;
    visibility: hidden;
  }
}

/* Calendar loader — inline spinner */
.ks-calendar-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0;
}
.ks-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--accent-500);
  border-radius: 50%;
  animation: ks-spin 0.7s linear infinite;
}
@keyframes ks-spin {
  to { transform: rotate(360deg); }
}

.loading-skeleton {
  background: linear-gradient(90deg,
      var(--surface-secondary) 25%,
      var(--surface-tertiary) 50%,
      var(--surface-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   CALENDAR SPECIFIC
   ============================================ */

.calendar-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.app-page[data-page="calendar"] .calendar-shell {
  max-width: none;
}


.calendar-view-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.calendar-quote-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-quote-card .app-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: var(--text-xl);
}

.calendar-stage {
  width: 100%;
}

.calendar-stage .app-card-body {
  padding-top: 0;
}

.calendar-stage-header {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

/* Filter panel: deve poter uscire dall'header della calendar card */
body.app-page[data-page="calendar"] .ks-calendar-card > .app-card-header {
  overflow: visible !important;
}

.calendar-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

/* ===== Quote card inline in header ===== */
.calendar-view-toggle {
  flex: 0 0 auto;
}

.calendar-period-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.calendar-quote-card-inline {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  background: linear-gradient(135deg, var(--surface-secondary), var(--accent-bg));
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
}
.calendar-quote-card-inline.is-expandable {
  cursor: pointer;
}
.calendar-quote-card-inline.is-expandable:hover {
  border-color: rgba(245, 158, 11, 0.26);
  box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.42);
}

.month-quote-text {
  font-family: var(--font-display);
  font-size: calc(var(--text-base) * 1.1);
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
  line-height: var(--leading-relaxed);
  padding-inline: 0.2em;
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-quote-popover {
  position: fixed;
  z-index: 10001;
  width: min(520px, calc(100vw - 24px));
  padding: var(--space-4);
  background: linear-gradient(180deg, rgba(18, 22, 31, 0.94), rgba(9, 12, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 56px -34px rgba(2, 6, 23, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.2) translateY(-8px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.calendar-quote-popover.open {
  visibility: visible;
  pointer-events: auto;
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.calendar-quote-popover.closing {
  visibility: visible;
  pointer-events: none;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.calendar-quote-popover__content {
  display: grid;
  gap: var(--space-3);
}
.calendar-quote-popover__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--text-lg) * 1.02);
  line-height: var(--leading-relaxed);
  font-style: italic;
  color: rgba(241, 245, 249, 0.96);
}
.calendar-quote-popover__author {
  margin: 0;
  text-align: right;
  color: rgba(251, 191, 36, 0.9);
  font-size: var(--text-sm);
}

[data-theme="light"] .calendar-quote-popover,
html:not([data-theme="dark"]) .calendar-quote-popover {
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(245, 236, 224, 0.99));
  border-color: rgba(189, 147, 98, 0.28);
  box-shadow: 0 28px 56px -34px rgba(123, 90, 47, 0.24);
}

[data-theme="light"] .calendar-quote-popover__text,
html:not([data-theme="dark"]) .calendar-quote-popover__text {
  color: #35271d;
}

[data-theme="light"] .calendar-quote-popover__author,
html:not([data-theme="dark"]) .calendar-quote-popover__author {
  color: #a65d15;
}

/* Responsive header — stack at ≤899px */
@media (max-width: 899px) {
  .calendar-header-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
  }

  .calendar-header-toggle-stack {
    align-items: center;
    width: 100%;
  }

  .calendar-period-nav {
    margin-left: 0;
    justify-content: center;
    width: 100%;
  }

  .calendar-view-toggle {
    justify-content: center;
  }

  .calendar-quote-card-inline {
    width: 100%;
    order: 3;
  }

  .month-quote-text {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .calendar-quote-card-inline {
    display: none;
  }
}


.calendar-view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  padding: var(--space-0-5);
  background: var(--surface-secondary);
}

.calendar-view-toggle input {
  display: none;
}

.calendar-view-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--space-1-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
  user-select: none;
}

.calendar-view-toggle input:checked+label {
  background: var(--surface-primary);
  color: var(--text-accent);
  box-shadow: var(--shadow-sm);
}

.calendar-period-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.calendar-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.calendar-nav-btn:hover {
  background: var(--interactive-hover);
}

.calendar-nav-btn.is-unavailable,
.calendar-nav-btn:disabled.is-unavailable {
  visibility: hidden;
  pointer-events: none;
}

.calendar-period-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: calc(var(--text-xl) * 1.1);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.calendar-period-label-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-board {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-6) 0 var(--space-6);
  --cal-cell: 56px;
  --cal-gap: var(--space-1-5);
  --habit-col: 220px;
}

.calendar-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  overflow-x: auto;
  min-width: 0;
  display: block;
}

.calendar-board.is-month .calendar-wrapper {
  overflow-x: auto;
}

.calendar-board.is-week .calendar-wrapper,
.calendar-board.is-day .calendar-wrapper {
  overflow-x: hidden;
}

.calendar-wrapper .habit-calendar {
  margin: 0;
}

.calendar-wrapper.ks-calendar-scroll {
  --calendar-scrollbar-space: 26px;
  position: relative;
  isolation: isolate;
  background: var(--surface-primary);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--calendar-scrollbar-space);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 44%, transparent) color-mix(in srgb, var(--surface-secondary) 22%, transparent);
}

.calendar-wrapper.ks-calendar-scroll::-webkit-scrollbar {
  height: 14px;
}

.calendar-wrapper.ks-calendar-scroll::-webkit-scrollbar-track {
  border-radius: var(--radius-full);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-elevated, var(--surface-secondary)) 40%, transparent),
      color-mix(in srgb, var(--surface-secondary) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 38%, transparent);
}

.calendar-wrapper.ks-calendar-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, rgba(255, 255, 255, 0.58) 34%, transparent),
      color-mix(in srgb, var(--text-muted) 28%, transparent)),
    color-mix(in srgb, var(--surface-primary) 46%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px -16px rgba(0, 0, 0, 0.44);
}

.calendar-wrapper.ks-calendar-scroll:hover::-webkit-scrollbar-thumb,
.calendar-wrapper.ks-calendar-scroll.is-scrolling::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, rgba(255, 255, 255, 0.72) 42%, transparent),
      color-mix(in srgb, var(--accent-500) 30%, var(--text-muted))),
    color-mix(in srgb, var(--surface-primary) 42%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 20px -15px rgba(0, 0, 0, 0.54);
}

.calendar-quote-card .app-card-body {
  background: linear-gradient(135deg, var(--surface-primary), var(--accent-bg));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.month-quote {
  font-family: var(--font-display);
  font-size: calc(var(--text-lg) * 1.1);
  font-style: italic;
  color: var(--text-primary);
  margin: 0;
}

.calendar-mobile.app-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

.empty-state-card .app-card-body {
  padding: var(--space-6);
}

.calendar-board.hidden,
.calendar-mobile.hidden,
.day-view.hidden,
.calendar-legend-section.hidden,
.empty-state-card.hidden,
.weight-card.hidden {
  display: none;
}

.habit-calendar {
  width: max-content;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: color-mix(in srgb, var(--surface-secondary) 36%, var(--surface-primary));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 58%, transparent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 18px 40px -36px rgba(15, 23, 42, 0.32);
}

.habit-calendar thead th {
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
  padding: var(--space-2-5) var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}

.habit-column-cell {
  width: var(--habit-col);
  min-width: var(--habit-col);
  max-width: var(--habit-col);
  box-sizing: border-box;
}

.habit-calendar thead th.habit-header-cell,
.habit-calendar thead th.habit-header-spacer-cell {
  text-align: left;
  padding-left: var(--space-4);
  background: var(--surface-secondary);
  border-right: 1px solid var(--border-subtle);
  position: sticky;
  left: 0;
  z-index: 200 !important;
  border-top-left-radius: calc(var(--radius-xl) - 1px);
  box-shadow: 9px 0 18px -18px rgba(15, 23, 42, 0.42);
  isolation: isolate;
  overflow: visible;
}

.habit-calendar thead th.habit-header-cell {
  border-top-left-radius: calc(var(--radius-xl) - 1px);
}

/* Fix strutturale week-header:
   Con rowspan="2" la cella stacked copre riga 1 (week) e riga 2 (day).
   La riga week-header torna alla propria altezza naturale senza essere
   influenzata dall'altezza del contenuto sticky sinistro.
   - vertical-align: top: il contenuto si ancora in alto nella cella rowspannata
   - border-bottom rimosso: la cella si chiude al fondo della riga day-header
   - padding ripristinato al default base (non serve più ridurlo) */
.habit-calendar thead th.habit-header-cell--stacked {
  vertical-align: top;
  border-bottom: 0;
}

/* Il th.habit-header-spacer-cell non esiste più nel DOM (eliminato dal JS con rowspan),
   ma lascio la regola come fallback non invasivo. */
.habit-calendar thead th.habit-header-spacer-cell {
  padding: 0;
  border-top: 0;
  border-top-left-radius: 0;
}

.habit-calendar thead th.habit-header-cell::before,
.habit-calendar thead th.habit-header-cell::after,
.habit-calendar thead th.habit-header-spacer-cell::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.habit-calendar thead th.habit-header-cell::before {
  top: -1px;
  left: -1px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-top-left-radius: calc(var(--radius-xl) - 1px);
  background: var(--surface-secondary);
}

.habit-calendar thead th.habit-header-cell::after,
.habit-calendar thead th.habit-header-spacer-cell::after {
  top: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 1;
  width: 1px;
  background: var(--surface-secondary);
}

/* ===== Habit header cell with toggle ===== */
.habit-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}

.habit-header-edge-shield {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 1;
  width: 20px;
  background: var(--surface-secondary);
  pointer-events: auto;
}

@supports (-moz-appearance: none) {
  /* Firefox: cancel the stacking context that breaks position:sticky in overflow-x:auto.
     isolation:isolate on the scroll wrapper creates a new stacking context which prevents
     sticky from working correctly in Firefox. Resetting to auto restores native sticky. */
  .calendar-wrapper.ks-calendar-scroll {
    isolation: auto;
  }

  /* Firefox: ensure sticky header cell uses native compositor (no JS-driven transform).
     The transform approach caused one-rAF-frame lag, producing the ghosting/chasing effect. */
  .habit-calendar thead th.habit-header-cell {
    transform: none;
    will-change: auto;
    z-index: 300 !important;
  }

  .habit-calendar thead th.habit-header-cell .habit-header-content {
    will-change: auto;
    backface-visibility: normal;
  }

  .habit-calendar thead th.habit-header-spacer-cell {
    transform: none;
    will-change: auto;
    z-index: 299 !important;
  }
}

.habit-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  min-width: 0;
}

.habit-header-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-size: calc(var(--text-base) * 1.14);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.icon-only-toggle-table {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--text-tertiary);
  padding: var(--space-0-5) 0;
}

.icon-only-toggle-table:hover {
  color: var(--text-secondary);
}

.icon-only-toggle-table input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent-500);
  cursor: pointer;
}

.habit-calendar tbody td {
  padding: var(--space-3);
  text-align: center;
  border-bottom: 0;
  border-right: 0;
}

.habit-calendar tbody tr+tr td {
  border-top: 0;
}

.habit-calendar tbody td:first-child {
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-primary);
  /* Rimosso position: sticky - questo rende sticky il primo giorno, non la colonna abitudini */
  z-index: 10;
}

#habit-calendar td.habit-name-cell.habit-column-cell {
  display: table-cell !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 55 !important;
  background: var(--surface-primary) !important;
  border-right: 1px solid color-mix(in srgb, var(--border-subtle) 52%, transparent) !important;
  box-shadow: 9px 0 18px -18px rgba(15, 23, 42, 0.34) !important;
  border-left: 3px solid var(--cat-color, transparent) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: var(--space-2) var(--space-2-5) !important;
  vertical-align: middle;
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
}

#habit-calendar td.habit-name-cell.habit-column-cell::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 1;
  width: 1px;
  background: var(--surface-primary);
  pointer-events: none;
}

#calendar-body tr:last-child > td.habit-name-cell.habit-column-cell {
  border-bottom-left-radius: calc(var(--radius-xl) - 1px);
}

#calendar-body tr:last-child > td.habit-name-cell.habit-column-cell::before {
  content: '';
  position: absolute;
  left: -4px;
  bottom: -4px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-bottom-left-radius: calc(var(--radius-xl) - 1px);
  background:
    linear-gradient(90deg, var(--cat-color, transparent) 0 7px, var(--surface-primary) 7px 100%);
  pointer-events: none;
}

/* ============================================================
   HABIT CELL GRID — 2 colonne, 3 righe, scoped a .calendar-board
   row1: icon | title
   row2: .    | progress-row (streak+pill, destra)
   row3: meta meta (full-width dalla colonna icona)
   ============================================================ */
.calendar-board .habit-name-cell .habit-cell-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon  title"
    ".     progress"
    "meta  meta";
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  width: 100%;
  min-width: 0;
  height: auto;
}

.calendar-board .habit-name-cell .habit-icon-wrap {
  grid-area: icon;
  align-self: start;
  padding-top: 2px;
  display: flex;
  align-items: center;
}

.calendar-board .habit-name-cell .habit-title {
  grid-area: title;
  align-self: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  overflow: visible;
  display: block;
  text-overflow: clip;
  font-size: 0.95rem;
  line-height: 1.15;
  min-width: 0;
}

/* Row 2: streak pill + goal pill, allineati a destra */
.calendar-board .habit-name-cell .habit-progress-row {
  grid-area: progress;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: end;
  align-self: center;
  margin-top: -1px;
}

/* Row 3: frequency, parte dalla colonna icona (meta meta) */
.calendar-board .habit-name-cell .habit-meta-row {
  grid-area: meta;
  justify-self: start;
  align-self: center;
  min-width: 0;
  margin-top: 0;
}

.calendar-board .habit-name-cell .habit-frequency {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1.1;
  display: block;
  max-width: 100%;
}

/* Pill unificate: streak-pill e goal-pill — box model identico */
.calendar-board .habit-progress-row .habit-streak-pill,
.calendar-board .habit-progress-row .habit-goal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: var(--font-semibold);
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: none;
  box-sizing: border-box;
}

.calendar-board .habit-progress-row .habit-streak-pill {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.calendar-board .habit-progress-row .habit-goal-pill {
  background: var(--accent-bg);
  color: var(--text-accent);
}

/* Desktop upscale: più spazio disponibile */
@media (min-width: 900px) {
  .calendar-board .habit-name-cell .habit-title {
    font-size: 1rem;
  }
  .calendar-board .habit-name-cell .habit-frequency {
    font-size: 0.8rem;
  }
}

/* Nomi > 13 caratteri: riduce leggermente */
.calendar-board .habit-name-cell .habit-title.habit-title--long {
  font-size: 0.86rem;
}

/* Nomi > 20 caratteri: riduce di più */
.calendar-board .habit-name-cell .habit-title.habit-title--very-long {
  font-size: 0.78rem;
}

/* ============================================================
   DRAG: removed from calendar
   ============================================================ */
.calendar-board .drag-handle {
  display: none !important;
}

.calendar-board .habit-name-cell,
.calendar-board .habit-name-cell .habit-cell-grid,
.calendar-board .habit-name-cell * {
  cursor: default !important;
}

.calendar-board .habit-goal-pill,
.calendar-board .day-cell {
  cursor: pointer !important;
}

.habit-name-cell::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.calendar-board .habit-name-wrapper {
  cursor: default !important;
  user-select: auto !important;
}

/* ============================================================
   BORDER-WEEK: più visibile (default 0.12 troppo tenue)
   ============================================================ */
:root {
  --border-week: var(--cal-week-separator, rgba(91, 122, 153, 0.16));
}
[data-theme="dark"],
.dark-theme {
  --border-week: var(--cal-week-separator, rgba(148, 163, 184, 0.18));
}

/* ============================================================
   CAL FILTER: bottone + panel dropdown
   ============================================================ */
.cal-filter-wrap {
  position: relative;
}

.cal-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  padding: 0;
}

.cal-filter-btn:hover {
  color: var(--text-secondary);
  background: var(--surface-secondary);
  border-color: var(--border-default);
}

.cal-filter-btn.is-active {
  color: var(--text-accent);
  border-color: var(--accent-500);
  background: var(--accent-bg);
}

.cal-filter-panel {
  position: fixed;
  min-width: 180px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
}

.cal-filter-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cal-filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}

.cal-filter-option:hover {
  background: var(--surface-secondary);
}

.cal-filter-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent-500);
  cursor: pointer;
  flex-shrink: 0;
}

.cal-filter-option-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  user-select: none;
}

/* ============================================================
   COMPACT MODE — vista densa: solo icona + nome
   ============================================================ */
.calendar-board.compact-mode .habit-name-cell .habit-progress-row,
.calendar-board.compact-mode .habit-name-cell .habit-meta-row {
  display: none !important;
}

.calendar-board.compact-mode .habit-name-cell .habit-cell-grid {
  grid-template-areas: "icon title" !important;
  grid-template-rows: auto !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 4px !important;
}

.calendar-board.compact-mode {
  --habit-col: clamp(145px, 24vw, 152px);
  --cal-cell: 36px;
  --cal-row: 36px; /* single source of truth for compact row height */
}

.calendar-board.compact-mode .day-cell {
  --cal-month-sep-inset: 2px;
  --cal-week-sep-inset: 2px;
  font-size: 0.75rem;
  padding: var(--space-1-5) var(--space-1) !important;
  height: var(--cal-row) !important;
  min-height: var(--cal-row) !important;
}

.calendar-board.compact-mode #habit-calendar tbody td.habit-name-cell {
  height: var(--cal-row) !important;
  min-height: var(--cal-row) !important;
  display: table-cell;
  vertical-align: middle !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.calendar-board.compact-mode #habit-calendar tbody td.day-cell {
  height: var(--cal-row) !important;
  min-height: var(--cal-row) !important;
  vertical-align: middle !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.calendar-board.compact-mode #habit-calendar td.habit-name-cell.habit-column-cell {
  padding: var(--space-1-5) 8px !important;
  max-width: var(--habit-col) !important;
  overflow: visible !important;
}

.calendar-board.compact-mode .habit-name-cell .habit-title {
  font-size: 0.82rem !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  display: block !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.calendar-board.compact-mode .habit-name-cell .habit-icon {
  font-size: 0.9rem !important;
  width: 18px !important;
  height: 18px !important;
}

.calendar-board.compact-mode .cal-cat-label {
  gap: 3px;
  padding-left: 6px;
  font-size: 0.68rem;
  line-height: 1.08;
  letter-spacing: 0.01em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.calendar-board.compact-mode .cal-cat-label .cal-cat-icon {
  flex: 0 0 auto;
}

.calendar-board.compact-mode .cal-cat-label .cal-cat-name {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.calendar-board.compact-mode .cell-habit-mini-icon {
  display: none;
}

.calendar-board.compact-mode .day-cell.is-today.is-completed .cell-habit-mini-icon,
.calendar-board.compact-mode .day-cell.is-today.is-skipped .cell-habit-mini-icon {
  display: none !important;
}

.calendar-board.compact-mode .day-cell input[type="checkbox"] {
  --calendar-checkbox-size: 21px;
}

.calendar-board.compact-mode .streak-fire-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  pointer-events: auto;
}

/* Celle giorno compact: dimensione ridotta */
.calendar-board.compact-mode #habit-calendar tbody td.day-cell .day-inner,
.calendar-board.compact-mode #habit-calendar tbody td.day-cell .day-checkbox-wrap {
  min-width: 0 !important;
  width: 30px !important;
  height: 30px !important;
}

.habit-header-content .icon-only-toggle-table {
  display: none !important;
}

.habit-calendar col.habit-column {
  width: var(--habit-col);
  max-width: var(--habit-col);
}

.habit-calendar col.day-column {
  width: var(--cal-cell);
}

.calendar-board.is-month.has-out-month-narrow .habit-calendar col.day-column.is-out-month {
  width: var(--cal-out-month-cell);
}

.habit-calendar thead th:not(:first-child),
.habit-calendar tbody td:not(:first-child) {
  width: var(--cal-cell);
  max-width: var(--cal-cell);
}

.calendar-board.is-month.has-out-month-narrow .habit-calendar thead th.is-out-month,
.calendar-board.is-month.has-out-month-narrow .habit-calendar tbody td.is-out-month {
  width: var(--cal-out-month-cell);
  max-width: var(--cal-out-month-cell);
}

.habit-calendar .week-header {
  border-left: none;
}

.habit-calendar .week-header+.week-header {
  position: relative;
  border-left: 1px solid var(--border-week) !important;
  box-shadow: none !important;
}

.week-header {
  white-space: nowrap;
  text-align: center;
  font-size: var(--text-sm);
}

.calendar-day-header .day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}

.calendar-day-header {
  position: relative;
  min-width: var(--cal-cell);
  --cal-month-sep-left-width: 0px;
  --cal-month-sep-right-width: 0px;
  --cal-week-sep-left-width: 0px;
  --cal-week-sep-right-width: 0px;
  --cal-sep-left-width: 0px;
  --cal-sep-right-width: 0px;
  --cal-sep-left-color: transparent;
  --cal-sep-right-color: transparent;
  --cal-sep-left-opacity: 0;
  --cal-sep-right-opacity: 0;
  --cal-sep-left-inset: var(--cal-week-sep-inset);
  --cal-sep-right-inset: var(--cal-week-sep-inset);
  --cal-sep-left-z: 2;
  --cal-sep-right-z: 2;
  --cal-month-sep-inset: 3px;
  --cal-week-sep-inset: 3px;
}

.calendar-board.is-month.has-out-month-narrow .calendar-day-header.is-out-month,
.calendar-board.is-month.has-out-month-narrow .day-cell.is-out-month {
  min-width: var(--cal-out-month-cell);
}

/* Desktop fallback: apply narrower out-of-month columns even if runtime class is missing */
@media (min-width: 769px) {
  .calendar-board.is-month .habit-calendar col.day-column.is-out-month {
    width: var(--cal-out-month-cell);
  }

  .calendar-board.is-month .habit-calendar thead th.is-out-month,
  .calendar-board.is-month .habit-calendar tbody td.is-out-month {
    width: var(--cal-out-month-cell);
    max-width: var(--cal-out-month-cell);
  }

  .calendar-board.is-month .calendar-day-header.is-out-month,
  .calendar-board.is-month .day-cell.is-out-month {
    min-width: var(--cal-out-month-cell);
  }
}

.calendar-day-header .day-header>* {
  display: block;
}

.calendar-day-header .day-num {
  font-weight: var(--font-semibold);
  font-size: calc(var(--text-base) * 1.12);
  color: var(--text-primary);
}

.calendar-day-header .day-dow {
  font-size: calc(var(--text-xs) * 1.12);
  color: var(--text-tertiary);
  opacity: 0.85;
  text-transform: capitalize;
}

.habit-row {
  background: var(--surface-primary);
}

/* Category color accent on calendar habit rows */
.habit-row .habit-name-cell {
  border-left: 3px solid var(--cat-color, transparent);
}

.cal-category-separator {
  pointer-events: none;
}

.cal-category-separator td,
.cal-category-separator-cell {
  padding: var(--space-0-5) var(--space-3) !important;
  border-bottom: none !important;
  border-top: none !important;
  border-right: none !important;
  background: var(--surface-primary) !important;
  height: auto !important;
}

.cal-category-separator-cell--label {
  display: table-cell !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 58 !important;
  border-left: 0 !important;
  width: var(--habit-col);
  min-width: var(--habit-col);
  max-width: var(--habit-col);
  overflow: visible !important;
  border-right: 1px solid var(--border-subtle) !important;
  box-shadow: 9px 0 18px -18px rgba(15, 23, 42, 0.34) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
}

.cal-category-separator-cell--label::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 1;
  width: 1px;
  background: var(--surface-primary);
  pointer-events: none;
}

.cal-category-separator-fill {
  background: transparent !important;
  padding: 0 !important;
}

.cal-cat-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-left: 2px solid var(--cat-color, var(--neutral-500));
  padding-left: var(--space-2);
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}

.cal-cat-icon {
  font-size: 0.8rem;
  line-height: 1;
}

/* ============================================
   DAY VIEW — Category group containers
   ============================================ */

.day-cat-group {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  align-self: flex-start;
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 56%, transparent);
  border-left: 3px solid var(--cat-color, var(--neutral-500));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-primary) 94%, var(--surface-secondary));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 28px -28px rgba(15, 23, 42, 0.36);
  overflow: hidden;
}

.day-cat-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--cat-color, var(--neutral-500)) 8%, var(--surface-secondary));
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 48%, transparent);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.day-cat-group-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.day-cat-group-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  width: 100%;
  min-width: 0;
}

.day-habits-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.day-habit-card {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 54%, transparent);
  border-left: 3px solid var(--cat-color, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-primary) 92%, var(--surface-secondary));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px -22px rgba(15, 23, 42, 0.38);
}

/* Inside a category group, remove left border on individual cards — the group already has it */
.day-cat-group .day-habit-card {
  border-left: 1px solid color-mix(in srgb, var(--border-subtle) 54%, transparent);
}

/* ============================================
   CALENDAR TABLE — Inline category icon
   (shown when hide-categories toggle is on)
   ============================================ */
/*
.cal-inline-cat-icon {
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
  width: 18px;
  text-align: center;
}
*/

.habit-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.habit-name-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.habit-name-text-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.habit-name-wrapper .habit-icon {
  width: 24px;
  height: 24px;
  font-size: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Icon-only mode styles ===== */
.habit-icon-only {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.habit-name-fallback {
  font-size: calc(var(--text-sm) * 1.14);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  max-width: 100px;
}

/* ===== Drag handle: completely hidden, rows are draggable directly ===== */
.drag-handle {
  display: none !important;
}

/* CRITICAL: Only habit-name-wrapper is draggable, not the entire row */
.habit-name-wrapper {
  cursor: grab;
  user-select: none;
}

.habit-name-wrapper:active {
  cursor: grabbing;
}

/* Ensure pills, checkboxes, and day cells are not draggable and have pointer cursor */
.habit-goal-pill,
.day-cell {
  cursor: pointer;
}

/* Drag hint overlay - appears on hover without shifting layout */
.habit-name-cell {
  position: relative;
}

.habit-name-cell::before {
  content: '⋮⋮';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  line-height: 1;
}

/* Show drag hint only when hovering over the habit-name-wrapper */
.habit-name-wrapper:hover~.habit-name-cell::before,
.habit-row:hover .habit-name-cell::before,
.habit-row:focus-within .habit-name-cell::before {
  opacity: 0.4;
}

/* ===== Icon-only mode: shrink column and hide ALL text ===== */
.calendar-board.icon-only-mode {
  --habit-col: 84px;
}

/* IMPORTANT: Only change HORIZONTAL spacing, NOT vertical */
/* Shrink and center the habit column cells - only horizontal padding changes */
.calendar-board.icon-only-mode .habit-name-cell {
  justify-content: center;
  padding-left: var(--space-1) !important;
  padding-right: var(--space-1) !important;
  /* Keep vertical padding unchanged from normal mode */
}

/* Reduce header padding - only horizontal */
.calendar-board.icon-only-mode .habit-header-cell,
.calendar-board.icon-only-mode .habit-header-spacer-cell {
  padding-left: var(--space-1-5);
  padding-right: var(--space-1-5);
  /* Keep vertical padding unchanged from normal mode */
}

/* Hide drag hint in icon-only mode */
.calendar-board.icon-only-mode .habit-name-cell::before {
  display: none;
}

.calendar-board.icon-only-mode .habit-header-content {
  align-items: center;
  gap: var(--space-0-5);
}

.calendar-board.icon-only-mode .habit-header-title {
  font-size: var(--text-xs);
}

.calendar-board.icon-only-mode .icon-only-toggle-table {
  font-size: calc(var(--text-xs) * 0.9);
  gap: var(--space-1);
}

/* Hide ALL text elements in icon-only mode (except fallback for habits without icons) */
.calendar-board.icon-only-mode .habit-name-wrapper,
.calendar-board.icon-only-mode .habit-name-text,
.calendar-board.icon-only-mode .habit-name-text-group,
.calendar-board.icon-only-mode .habit-cell-grid,
.calendar-board.icon-only-mode .habit-frequency-desc,
.calendar-board.icon-only-mode .habit-streak-badge,
.calendar-board.icon-only-mode .habit-streak,
.calendar-board.icon-only-mode .habit-progress-row,
.calendar-board.icon-only-mode .habit-progress-wrap,
.calendar-board.icon-only-mode .habit-goal-pill {
  display: none !important;
}

/* Ensure icon is centered and properly sized */
.calendar-board.icon-only-mode .habit-icon-only {
  font-size: 1.3rem;
  line-height: 1;
}

/* Fallback name for habits without icons: keep compact and centered */
.calendar-board.icon-only-mode .habit-name-fallback {
  max-width: 64px;
  font-size: 0.65rem;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
}

.habit-name-text {
  font-weight: var(--font-medium);
  font-size: calc(var(--text-base) * 1.14);
  color: var(--text-primary);
  white-space: normal;
}

.habit-meta-row {
  /* Layout handled by grid in design-system.css */
  gap: 10px;
  /* Match design-system.css */
}

.habit-frequency-desc {
  font-size: calc(var(--text-xs) * 1.1);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.habit-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px var(--space-1-5);
  border-radius: var(--radius-full);
  font-size: calc(0.65rem * 1.08);
  font-weight: var(--font-semibold);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1.2;
}

.habit-goal-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: calc(var(--text-xs) * 1.08);
  font-weight: var(--font-semibold);
  background: var(--accent-bg);
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}


.mobile-scroll-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-4);
  display: none;
  max-width: 100%;
  word-break: break-word;
}

.day-cell {
  position: relative;
  --cal-month-sep-left-width: 0px;
  --cal-month-sep-right-width: 0px;
  --cal-week-sep-left-width: 0px;
  --cal-week-sep-right-width: 0px;
  --cal-sep-left-width: 0px;
  --cal-sep-right-width: 0px;
  --cal-sep-left-color: transparent;
  --cal-sep-right-color: transparent;
  --cal-sep-left-opacity: 0;
  --cal-sep-right-opacity: 0;
  --cal-sep-left-inset: var(--cal-week-sep-inset);
  --cal-sep-right-inset: var(--cal-week-sep-inset);
  --cal-sep-left-z: 2;
  --cal-sep-right-z: 2;
  --cal-month-sep-inset: 3px;
  --cal-week-sep-inset: 3px;
  min-width: var(--cal-cell);
  height: 36px;
  padding: var(--space-1) calc(var(--cal-gap) + 2px) !important;
  border: 1px solid color-mix(in srgb, var(--cal-border) 46%, transparent);
  border-radius: 10px;
  background: var(--cal-cell);
  color: var(--text-primary);
  vertical-align: middle;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(15, 23, 42, 0.035);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.day-cell:hover {
  background: var(--cal-cell-hover);
  border-color: color-mix(in srgb, var(--accent-300) 40%, var(--cal-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 6px 14px -14px rgba(15, 23, 42, 0.42);
  transform: translateY(-1px);
}

.day-cell:focus-within {
  border-color: color-mix(in srgb, var(--accent-500) 54%, var(--cal-border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-500) 36%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent-500) 13%, transparent);
}

/* ===== Calendar row hover: remove row-level highlight =====
   design-system.css has global rules ([data-theme="light"] tr:hover and
   .table tbody tr:hover) that highlight the full row. Neutralize them
   for the habit calendar table - only individual day cells should have hover. */
#habit-calendar tr:hover,
#habit-calendar .habit-row:hover,
#habit-calendar thead tr:hover {
  background: transparent !important;
}

.day-cell input[type="checkbox"] {
  --calendar-checkbox-size: 20px;
}

/* Dark theme: checkbox background must be solid white so the interior is clearly
   visible against any dark cell background. border-color lightened for contrast. */
[data-theme="dark"] .day-cell input[type="checkbox"],
[data-theme="dark"] .day-habit-checkbox input,
.dark-theme .day-cell input[type="checkbox"],
.dark-theme .day-habit-checkbox input {
  background-color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
}

[data-theme="dark"] .day-cell input[type="checkbox"]:checked,
[data-theme="dark"] .day-habit-checkbox input:checked,
.dark-theme .day-cell input[type="checkbox"]:checked,
.dark-theme .day-habit-checkbox input:checked {
  background-color: rgba(255, 255, 255, 0.06);
}

.day-cell input[type="checkbox"],
.day-habit-checkbox input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--calendar-checkbox-size, 20px);
  height: var(--calendar-checkbox-size, 20px);
  border-radius: 3px;
  border: 1.5px solid color-mix(in srgb, var(--border-default) 78%, transparent);
  background-color: color-mix(in srgb, var(--surface-primary) 90%, transparent);
  background-image:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--success) 86%, #e7f8ee),
      color-mix(in srgb, var(--success) 84%, #06351e));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 0 transparent;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  transition:
    background-size 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 140ms ease,
    box-shadow 180ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.day-cell input[type="checkbox"]::after,
.day-habit-checkbox input::after {
  content: '';
  width: calc(var(--calendar-checkbox-size, 20px) * 0.48);
  height: calc(var(--calendar-checkbox-size, 20px) * 0.27);
  border-left: 2px solid rgba(255, 255, 255, 0.94);
  border-bottom: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 1px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.62);
  transform-origin: 44% 58%;
  transition:
    opacity 120ms ease-out,
    transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

.day-cell input[type="checkbox"]:hover:not(:disabled),
.day-habit-checkbox input:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-500) 54%, var(--border-default));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 3px color-mix(in srgb, var(--accent-500) 12%, transparent);
}

.day-cell input[type="checkbox"]:active:not(:disabled),
.day-habit-checkbox input:active:not(:disabled) {
  transform: scale(0.94);
}

.day-cell input[type="checkbox"]:checked,
.day-habit-checkbox input:checked {
  background-color: color-mix(in srgb, var(--surface-primary) 90%, transparent);
  border-color: color-mix(in srgb, var(--success) 82%, #0f172a);
  background-size: 100% 100%, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -10px 16px -18px rgba(0, 0, 0, 0.48),
    0 10px 18px -15px color-mix(in srgb, var(--success) 78%, transparent);
}

.day-cell input[type="checkbox"]:checked::after,
.day-habit-checkbox input:checked::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
  transition-delay: 35ms;
}

.day-habit-checkbox input {
  --calendar-checkbox-size: 24px;
}

.day-cell input[type="checkbox"]:focus-visible,
.day-habit-checkbox input:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 3px color-mix(in srgb, var(--accent-500) 18%, transparent),
    0 0 0 1px var(--accent-500);
}

.day-cell input[type="checkbox"]:disabled,
.day-habit-checkbox input:disabled {
  cursor: default;
  opacity: 0.5;
}

.day-cell input[type="checkbox"].is-syncing,
.day-habit-checkbox input.is-syncing,
.streak-fire-icon.is-syncing {
  animation: calendarCheckboxSync 760ms ease-in-out infinite alternate;
}

.day-cell input[type="checkbox"].is-error,
.day-habit-checkbox input.is-error {
  border-color: color-mix(in srgb, var(--danger) 82%, var(--border-default)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent) !important;
  animation: calendarCheckboxError 180ms ease;
}

@keyframes calendarCheckboxSync {
  from {
    opacity: 0.86;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes calendarCheckboxError {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-1px);
  }
  65% {
    transform: translateX(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-cell input[type="checkbox"],
  .day-habit-checkbox input,
  .day-cell input[type="checkbox"]::after,
  .day-habit-checkbox input::after,
  .streak-fire-icon.is-syncing {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.day-cell.is-pre-start,
.day-cell.is-paused {
  cursor: not-allowed;
  opacity: 0.92;
}

.day-cell.is-pre-start {
  background: color-mix(in srgb, var(--surface-secondary) 88%, #000);
  border-color: color-mix(in srgb, var(--border-subtle) 75%, #000);
}

.day-cell.is-paused {
  background: color-mix(in srgb, var(--surface-secondary) 72%, #000);
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border-subtle));
}

.day-cell.is-paused.has-pause-reason {
  background: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 5%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 44%, var(--border-subtle));
}

.day-cell.is-pre-start input[type="checkbox"],
.day-cell.is-paused input[type="checkbox"] {
  display: none;
}

.day-cell-unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}

.day-cell-pause-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pause-reason-color, var(--warning)) 62%, var(--border-subtle));
  background: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 28%, var(--surface-primary));
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pause-reason-color, var(--warning)) 18%, transparent);
}

.day-cell-pause-marker__icon {
  line-height: 1;
}

.calendar-board.is-week .calendar-wrapper {
  overflow-x: auto;
}

.calendar-board.is-week .habit-calendar {
  width: max-content;
  min-width: 0;
  table-layout: fixed;
}

.calendar-board.is-day .habit-calendar col.day-column,
.calendar-board.is-day .habit-calendar thead th:not(:first-child),
.calendar-board.is-day .habit-calendar tbody td:not(:first-child) {
  width: calc(100% - var(--habit-col));
}

.calendar-board.is-week {
  --cal-cell: 68px;
  --cal-gap: var(--space-2);
}

.calendar-board.is-day {
  --cal-cell: 64px;
  --cal-gap: var(--space-2);
}

.calendar-board.is-month {
  --cal-cell: 56px;
  --cal-gap: var(--space-1-5);
  --cal-out-month-scale: 0.75;
  --cal-out-month-cell: calc(var(--cal-cell) * var(--cal-out-month-scale));
}

/* ===== Past cells: solid filled backgrounds ===== */
.day-cell.is-past.is-completed {
  background: var(--cal-past-done-bg);
  border-color: var(--cal-past-done-br);
}

.day-cell.is-past.is-skipped {
  background: var(--cal-past-skip-bg);
  border-color: var(--cal-past-skip-br);
}

.day-cell.is-past.is-off {
  background: var(--cal-off-bg);
  border-color: var(--cal-off-br);
  color: var(--text-tertiary);
}

.day-cell.is-past.is-planned {
  background: var(--cal-off-bg);
  border-color: var(--cal-off-br);
}

/* ===== Future cells: keep the active viewed month readable ===== */
.day-cell.is-future:not(.is-out-month) {
  opacity: 0.94;
}

.day-cell.is-future.is-out-month {
  opacity: 0.42;
}

.day-cell.is-future.is-planned {
  background: var(--cal-future-plan-bg);
  border-color: var(--cal-future-plan-br);
  border-style: dashed;
  border-width: 1px;
}

.day-cell.is-future:not(.is-out-month).is-planned {
  background: var(--cal-future-plan-bg);
  background-image: none;
  border-color: color-mix(in srgb, var(--cal-future-plan-br) 72%, var(--cal-border));
  border-width: 1px;
}

.day-cell.is-future.is-off {
  background: var(--cal-future-off-bg);
  border-color: var(--cal-future-off-br);
  color: var(--text-muted);
}

.day-cell.is-future.is-completed {
  background: var(--cal-done-bg);
  border-color: var(--cal-done-br);
  opacity: 0.82;
}

.day-cell.is-future.is-skipped {
  background: var(--cal-future-off-bg);
  border-color: var(--cal-future-off-br);
}

/* ===== Today cells: distinct state, not past nor future ===== */
.day-cell.is-today.is-completed {
  background: var(--cal-past-done-bg);
  border-color: var(--cal-past-done-br);
}

.day-cell.is-today.is-skipped {
  background: var(--cal-skip-bg);
  border-color: var(--cal-skip-br);
}

.day-cell.is-today.is-planned {
  background: var(--cal-plan-bg);
  border-color: var(--cal-plan-br);
}

.day-cell.is-today.is-off {
  background: var(--cal-off-bg);
  border-color: var(--cal-today-border);
  color: var(--text-tertiary);
}

.day-cell.is-today.is-pre-start {
  background: var(--cal-off-bg);
  border-color: var(--cal-today-border);
  color: var(--text-tertiary);
}

/* ===== Fallback for cells without temporal class ===== */
.day-cell.is-completed {
  background: var(--cal-done-bg);
  border-color: var(--cal-done-br);
}

.day-cell.is-skipped {
  background: var(--cal-skip-bg);
  border-color: var(--cal-skip-br);
}

.day-cell.is-planned {
  background: var(--cal-plan-bg);
  border-color: var(--cal-plan-br);
}

.day-cell.is-off {
  background: var(--cal-off-bg);
  border-color: var(--cal-off-br);
  color: var(--text-tertiary);
}

/* ===== Today column highlight - quiet inset emphasis ===== */
.day-cell.is-today {
  position: relative;
  z-index: 1;
  background-image:
    linear-gradient(90deg, var(--cal-today-column-bg) 0%, var(--cal-today-column-bg) 42%, transparent 100%);
  box-shadow:
    inset 0 0 0 1px var(--cal-today-border),
    inset 2px 0 0 0 var(--cal-today-column-line);
}

.day-cell.is-today::before {
  pointer-events: none;
}

.day-cell.is-today.is-completed,
.day-cell.is-today.is-skipped {
  box-shadow:
    inset 0 0 0 1px var(--cal-today-border),
    inset 2px 0 0 0 var(--cal-today-column-line);
}

.day-cell.is-today.is-completed {
  background: var(--cal-past-done-bg);
  border-color: var(--cal-past-done-br);
}

.day-cell.is-today.is-completed::before,
.day-cell.is-today.is-skipped::before {
  pointer-events: none;
}

.day-cell.is-today.is-completed .cell-habit-mini-icon,
.day-cell.is-today.is-skipped .cell-habit-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  opacity: 0.82;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Today column: for non-actionable cells keep neutral fill and only a thin inset cue. */
.day-cell.is-today.is-off,
.day-cell.is-today.is-pre-start,
.day-cell.is-today.is-paused {
  box-shadow:
    inset 0 0 0 1px var(--cal-today-border),
    inset 2px 0 0 0 var(--cal-today-column-line);
}

.day-cell.is-today.is-off::before,
.day-cell.is-today.is-pre-start::before,
.day-cell.is-today.is-paused::before {
  pointer-events: none;
}

/* Today column: non-actionable cells keep neutral fill (like "giorno libero"). */
.day-cell.is-today.is-off,
.day-cell.is-today.is-pre-start,
.day-cell.is-today.is-paused:not(.has-pause-reason) {
  background: var(--cal-off-bg);
  border-color: var(--cal-today-border);
}

/* Pause reason should tint the whole cell, including today column. */
.day-cell.is-paused.has-pause-reason,
.day-cell.is-today.is-paused.has-pause-reason {
  background: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 7%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 50%, var(--border-subtle));
}

/* ===== Out-of-month days: same colors, darker/desaturated ===== */
.day-cell.is-out-month {
  opacity: 0.55;
}

.day-cell.is-out-month.is-completed {
  background: var(--cal-done-bg-dim);
  border-color: var(--cal-done-br-dim);
}

.day-cell.is-out-month.is-skipped {
  background: var(--cal-skip-bg-dim);
  border-color: var(--cal-skip-br-dim);
}

.day-cell.is-out-month.is-planned {
  background: transparent;
  background-image: none;
  border-color: var(--cal-plan-br-dim);
  border-style: dashed;
  border-width: 1px;
}

.day-cell.is-out-month.is-off {
  background: var(--cal-off-bg-dim);
  border-color: var(--cal-off-br-dim);
}

/* ===== Week boundary separators - visual week grouping ===== */
.calendar-day-header.week-sep-left {
  --cal-week-sep-left-width: var(--cal-week-separator-width, 1px);
  --cal-sep-left-width: var(--cal-week-separator-width, 1px);
  --cal-sep-left-color: var(--border-week);
  --cal-sep-left-opacity: 0.42;
  --cal-sep-left-inset: var(--cal-week-sep-inset);
  --cal-sep-left-z: 2;
  margin-left: 0 !important;
}

.day-cell.week-sep-left {
  --cal-week-sep-left-width: var(--cal-week-separator-width, 1px);
  --cal-sep-left-width: var(--cal-week-separator-width, 1px);
  --cal-sep-left-color: var(--border-week);
  --cal-sep-left-opacity: 0.42;
  --cal-sep-left-inset: var(--cal-week-sep-inset);
  --cal-sep-left-z: 2;
  margin-left: 0 !important;
}

.calendar-day-header.week-sep-right {
  --cal-week-sep-right-width: var(--cal-week-separator-width, 1px);
  --cal-sep-right-width: var(--cal-week-separator-width, 1px);
  --cal-sep-right-color: var(--border-week);
  --cal-sep-right-opacity: 0.42;
  --cal-sep-right-inset: var(--cal-week-sep-inset);
  --cal-sep-right-z: 2;
  border-right: 0 !important;
  margin-right: 2px;
}

.day-cell.week-sep-right {
  --cal-week-sep-right-width: var(--cal-week-separator-width, 1px);
  --cal-sep-right-width: var(--cal-week-separator-width, 1px);
  --cal-sep-right-color: var(--border-week);
  --cal-sep-right-opacity: 0.42;
  --cal-sep-right-inset: var(--cal-week-sep-inset);
  --cal-sep-right-z: 2;
  margin-right: 0 !important;
}

.calendar-day-header.week-sep-left::before,
.calendar-day-header.month-sep-left::before,
.day-cell.week-sep-left::before,
.day-cell.month-sep-left::before {
  content: '';
  position: absolute;
  top: var(--cal-sep-left-inset, 3px);
  bottom: var(--cal-sep-left-inset, 3px);
  left: 0;
  width: var(--cal-sep-left-width, 0px);
  z-index: var(--cal-sep-left-z, 2);
  pointer-events: none;
  border-radius: 999px;
  background: var(--cal-sep-left-color, transparent);
  opacity: var(--cal-sep-left-opacity, 0);
}

.calendar-day-header.week-sep-right::after,
.calendar-day-header.month-sep-right::after,
.day-cell.week-sep-right::after,
.day-cell.month-sep-right::after {
  content: '';
  position: absolute;
  top: var(--cal-sep-right-inset, 3px);
  right: 0;
  bottom: var(--cal-sep-right-inset, 3px);
  width: var(--cal-sep-right-width, 0px);
  z-index: var(--cal-sep-right-z, 2);
  pointer-events: none;
  border-radius: 999px;
  background: var(--cal-sep-right-color, transparent);
  opacity: var(--cal-sep-right-opacity, 0);
}

/* ===== Month boundary separators (neutral, secondary to today) ===== */
.calendar-day-header.month-sep-left,
.day-cell.month-sep-left {
  --cal-month-sep-left-width: var(--cal-month-separator-width, 1px);
  --cal-sep-left-width: var(--cal-month-separator-width, 1px);
  --cal-sep-left-color: var(--border-month);
  --cal-sep-left-opacity: var(--cal-month-separator-opacity, 0.9);
  --cal-sep-left-inset: var(--cal-month-sep-inset);
  --cal-sep-left-z: 3;
  margin-left: 0;
}

.calendar-day-header.month-sep-right,
.day-cell.month-sep-right {
  --cal-month-sep-right-width: var(--cal-month-separator-width, 1px);
  --cal-sep-right-width: var(--cal-month-separator-width, 1px);
  --cal-sep-right-color: var(--border-month);
  --cal-sep-right-opacity: var(--cal-month-separator-opacity, 0.9);
  --cal-sep-right-inset: var(--cal-month-sep-inset);
  --cal-sep-right-z: 3;
  margin-right: 0;
}

.day-cell.is-today.week-sep-left,
.day-cell.is-today.week-sep-right,
.day-cell.is-today.month-sep-left,
.day-cell.is-today.month-sep-right {
  box-shadow:
    inset 0 0 0 1px var(--cal-today-border),
    inset 2px 0 0 0 var(--cal-today-column-line) !important;
}

.day-cell.is-today.is-completed,
.day-cell.is-today.is-skipped {
  box-shadow:
    inset 0 0 0 1px var(--cal-today-border),
    inset 2px 0 0 0 var(--cal-today-column-line) !important;
}

.day-cell.is-today.is-completed,
.day-cell.is-today.is-skipped,
.day-cell.is-today.is-off,
.day-cell.is-today.is-pre-start,
.day-cell.is-today.is-paused {
  border-left-width: 1px !important;
  border-right-width: 1px !important;
}

.day-cell.is-today.is-completed {
  border-color: var(--cal-past-done-br) !important;
}

.day-cell.is-today.is-skipped {
  border-color: var(--cal-skip-br) !important;
}

.day-cell.is-today.is-off,
.day-cell.is-today.is-pre-start,
.day-cell.is-today.is-paused:not(.has-pause-reason) {
  border-color: var(--cal-off-br) !important;
  box-shadow:
    inset 0 0 0 1px var(--cal-today-border),
    inset 2px 0 0 0 var(--cal-today-column-line) !important;
}

.day-cell.is-today.is-paused.has-pause-reason {
  border-color: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 50%, var(--border-subtle)) !important;
  box-shadow:
    inset 0 0 0 1px var(--cal-today-border),
    inset 2px 0 0 0 var(--cal-today-column-line) !important;
}

.habit-calendar thead th.week-header {
  background: var(--surface-tertiary);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-week);
}

.habit-calendar thead th.week-header+th.week-header {
  border-left: 1px solid var(--border-week) !important;
}

/* ===== Calendar day header styles ===== */
.calendar-day-header .day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  padding: var(--space-1) var(--space-2);
  border-radius: 8px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.calendar-day-header .day-num {
  font-weight: var(--font-semibold);
  font-size: calc(var(--text-base) * 1.12);
  color: var(--text-primary);
}

.calendar-day-header .day-dow {
  font-size: calc(var(--text-xs) * 1.12);
  color: var(--text-tertiary);
}

/* Out-of-month header styling */
.calendar-day-header.is-out-month .day-num,
.calendar-day-header.is-out-month .day-dow {
  opacity: 0.5;
}

/* Today header highlight - full-cell, stable emphasis */
.calendar-day-header.is-today {
  background:
    linear-gradient(180deg, var(--cal-today-header-bg), var(--cal-today-header-bg)),
    var(--surface-secondary);
  border-radius: 8px;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--cal-today-border);
}

.calendar-day-header.is-today .day-header {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.calendar-day-header.is-today .day-num {
  color: var(--cal-today-text);
  font-weight: var(--font-bold);
}

.calendar-day-header.is-today .day-dow {
  color: var(--cal-today-text);
  opacity: 0.9;
  font-weight: var(--font-semibold);
}

/* Future header: viewed-month days stay readable; out-of-month days stay secondary. */
.calendar-day-header.is-future:not(.is-out-month) .day-num,
.calendar-day-header.is-future:not(.is-out-month) .day-dow {
  opacity: 0.86;
}

.calendar-day-header.is-future.is-out-month .day-num,
.calendar-day-header.is-future.is-out-month .day-dow {
  opacity: 0.46;
}

.calendar-legend-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 42%, var(--surface-primary));
  border: 1px solid var(--border-subtle);
  width: fit-content;
  max-width: 100%;
}

.calendar-legend-block {
  display: flex;
  flex-direction: column;
}

.calendar-legend-header {
  margin-bottom: var(--space-2);
}

.calendar-legend-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.calendar-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1-5);
  margin-top: 0;
  padding: var(--space-2) 0 0;
  align-items: stretch;
  width: min(100%, 540px);
  max-width: 100%;
}

.calendar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary));
  box-shadow: var(--shadow-xs);
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--text-tertiary);
}

.calendar-legend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  font-size: 0.8rem;
}

/* Legend swatches aligned with actual cell styles */
.calendar-legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid var(--cal-border);
  background: var(--cal-cell);
  flex: 0 0 auto;
}

/* Past completed - same as .day-cell.is-past.is-completed */
.calendar-legend-swatch.is-past.is-completed {
  background: var(--cal-past-done-bg);
  border-color: var(--cal-past-done-br);
}

/* Past skipped - same as .day-cell.is-past.is-skipped */
.calendar-legend-swatch.is-past.is-skipped {
  background: var(--cal-past-skip-bg);
  border-color: var(--cal-past-skip-br);
}

/* Future planned - same as .day-cell.is-future.is-planned */
.calendar-legend-swatch.is-future.is-planned {
  background: var(--cal-future-plan-bg);
  border-color: var(--cal-future-plan-br);
  border-style: dashed;
  border-width: 2px;
}

/* Off/neutral day */
.calendar-legend-swatch.is-off {
  background: var(--cal-off-bg);
  border-color: var(--cal-off-br);
}

.calendar-pause-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px dashed color-mix(in srgb, var(--border-subtle) 78%, transparent);
  width: min(100%, 540px);
  max-width: 100%;
}

.calendar-pause-legend-header {
  margin-bottom: var(--space-2);
}

.calendar-pause-legend-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.calendar-pause-legend__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1-5);
  width: 100%;
}

.calendar-pause-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pause-reason-color, var(--border-default)) 44%, var(--border-default));
  background: color-mix(in srgb, var(--pause-reason-color, var(--surface-secondary)) 13%, var(--surface-primary));
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.calendar-pause-legend__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pause-reason-color, var(--surface-secondary)) 23%, var(--surface-primary));
  font-size: 11px;
  line-height: 1;
}

@media (min-width: 1024px) {
  .calendar-legend-section {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .calendar-legend-block {
    flex-direction: column;
  }

  .calendar-legend {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .calendar-pause-legend {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .calendar-pause-legend__items {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .calendar-pause-legend__item {
    padding: 3px 6px;
    font-size: 10px;
    min-height: 26px;
  }
}

@media (max-width: 1023px) and (min-width: 769px) {
  .calendar-legend-section {
    flex-direction: column;
    gap: var(--space-3);
  }

  .calendar-legend {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .calendar-pause-legend {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

@media (max-width: 768px) {
  .calendar-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 0;
    padding-top: 0;
  }

  .calendar-legend-item {
    gap: 6px;
    min-height: 34px;
    padding: 5px 6px;
    font-size: 10px;
    line-height: 1.15;
  }

  .calendar-pause-legend {
    gap: var(--space-2);
    margin-top: 0;
    padding-top: var(--space-2);
    border-top: 1px dashed color-mix(in srgb, var(--border-subtle) 78%, transparent);
  }

  .calendar-pause-legend__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .calendar-pause-legend__item {
    min-height: 26px;
    padding: 3px 6px;
    width: 100%;
    font-size: 10px;
  }

  .calendar-legend-section {
    margin-top: var(--space-2);
  }
}

.day-view {
  --day-habit-card-min-width: 296px;
  --day-habit-card-max-width: 308px;
  --day-habit-card-width: clamp(var(--day-habit-card-min-width), 19vw, var(--day-habit-card-max-width));
  --day-cat-single-width: calc(var(--day-habit-card-width) + (var(--space-3) * 2));
  --day-cat-double-width: calc((var(--day-habit-card-width) * 2) + var(--space-2) + (var(--space-3) * 2));
  container-type: inline-size;
  width: 100%;
  margin-top: var(--space-4);
}

.day-view .day-habits-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
}

.day-view .day-habits-grid--category .day-cat-group {
  flex: 0 1 var(--day-cat-double-width);
  width: min(100%, var(--day-cat-double-width));
  min-width: min(100%, var(--day-cat-single-width));
}

.day-view .day-habits-grid--category .day-cat-group[data-habit-count="1"] {
  flex-basis: var(--day-cat-single-width);
  width: min(100%, var(--day-cat-single-width));
}

.day-view .day-habits-grid--category .day-cat-group-body {
  grid-template-columns: repeat(2, minmax(var(--day-habit-card-min-width), 1fr));
}

.day-view .day-habits-grid--category .day-cat-group[data-habit-count="1"] .day-cat-group-body {
  grid-template-columns: minmax(0, 1fr);
}

.day-view .day-habits-grid--category .day-habit-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  align-self: flex-start;
  height: auto;
}

.day-view .day-habits-grid--flat .day-habit-card {
  width: min(100%, var(--day-habit-card-width, 220px));
}

@container (max-width: 50rem) {
  .day-view .day-habits-grid--category .day-cat-group,
  .day-view .day-habits-grid--flat .day-habit-card {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }
}

@container (max-width: 38rem) {
  .day-view .day-habits-grid--category .day-cat-group-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.day-habit-card {
  flex: 0 1 var(--day-habit-card-width, 296px);
  align-self: flex-start;
  width: min(100%, var(--day-habit-card-width, 296px));
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--surface-primary);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 56%, transparent);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px -24px rgba(15, 23, 42, 0.42);
  overflow: visible;
}

.day-habit-checkbox input {
  --calendar-checkbox-size: 24px;
}

.day-habit-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-accent);
}

.day-habit-progress .goal-progress-label {
  min-width: 0;
  flex: 1 1 auto;
}

.goal-progress-metrics {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 3px;
  min-width: fit-content;
  text-align: right;
  line-height: 1;
}

.goal-progress-secondary {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  line-height: 1.1;
}

/* ===== Day View Card States ===== */

/* Due and not completed - highlighted as actionable */
.day-habit-card.is-due {
  border-color: var(--cal-plan-br);
  background: var(--cal-plan-bg);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cal-plan-br) 42%, transparent),
    0 12px 26px -24px rgba(15, 23, 42, 0.42);
}

.day-habit-card.is-due .goal-progress-label {
  color: var(--accent-text);
  font-weight: var(--font-semibold);
}

.day-habit-card.is-due .goal-progress-secondary {
  color: var(--text-accent);
}

/* Due and completed - softer highlight */
.day-habit-card.is-due-completed {
  border-color: var(--cal-done-br);
  background: var(--cal-done-bg);
}

.day-habit-card.is-due-completed .goal-progress-label {
  color: var(--success);
}

.day-habit-card.is-due-completed .goal-progress-secondary {
  color: color-mix(in srgb, var(--success) 82%, var(--text-primary));
}

/* Not due - dimmed/neutral */
.day-habit-card.is-not-due {
  opacity: 0.7;
  border-color: var(--border-subtle);
  background: var(--surface-secondary);
}

.day-habit-card.is-not-due .goal-progress-label {
  color: var(--text-tertiary);
}

.day-habit-card.is-not-due .goal-progress-secondary {
  color: var(--text-tertiary);
}

/* Flexible habits - neutral styling */
.day-habit-card.is-unscheduled {
  border-color: var(--border-default);
  background: var(--surface-primary);
  opacity: 0.85;
}

.day-habit-card.is-unscheduled .goal-progress-label {
  color: var(--text-secondary);
  font-style: italic;
}

.profile-username-actions {
  width: 100%;
  margin-top: var(--space-2);
  display: flex;
  justify-content: center;
}

.profile-username-actions .btn {
  min-width: 0;
  width: min(100%, 168px);
}

/* Future days */
.day-habit-card.is-future {
  opacity: 0.6;
  pointer-events: none;
}

.day-habit-card.is-future .day-habit-checkbox {
  opacity: 0.5;
}

.day-habit-card.is-pre-start,
.day-habit-card.is-paused {
  opacity: 0.7;
  border-color: var(--border-subtle);
  background: var(--surface-secondary);
}

.day-habit-card.is-paused.has-pause-reason {
  opacity: 0.88;
  border-color: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 62%, var(--border-subtle));
  background: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 12%, var(--surface-secondary));
}

.day-habit-card.is-pre-start .day-habit-checkbox,
.day-habit-card.is-paused .day-habit-checkbox {
  pointer-events: none;
  opacity: 0.65;
}

.day-habit-checkbox-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-secondary) 88%, #000);
}

.day-habit-checkbox-paused {
  border-color: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 62%, var(--border-subtle));
  background: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 28%, var(--surface-primary));
  color: var(--text-primary);
  font-size: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pause-reason-color, var(--warning)) 18%, transparent);
}

/* ============================================
  DAY VIEW: Accordion expand + Last 7 days
  ============================================ */

/* --- Card tap-to-expand --- */
[data-habit-accordion] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[data-habit-accordion]:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

/* Expand handle bar (visible affordance) */
.day-habit-expand-handle,
.day-habit-30days-cta {
  appearance: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: 100%;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: color-mix(in srgb, var(--text-secondary) 88%, transparent);
  font-size: calc(var(--text-xs) * 0.9);
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.day-habit-expand-handle {
  margin-top: var(--space-1);
}

.day-habit-30days-cta {
  color: color-mix(in srgb, var(--text-tertiary) 86%, var(--text-secondary));
}

.day-habit-expand-handle:hover,
.day-habit-30days-cta:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-secondary) 38%, transparent);
  transform: none;
}

.day-habit-expand-handle:focus-visible,
.day-habit-30days-cta:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.day-habit-expand-handle.is-open,
.day-habit-expand-handle[aria-expanded="true"],
.day-habit-30days-cta.is-open,
.day-habit-30days-cta[aria-expanded="true"] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-secondary) 54%, transparent);
}

[data-theme="light"] .day-habit-expand-handle,
[data-theme="light"] .day-habit-30days-cta {
  color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
}

[data-theme="light"] .day-habit-30days-cta {
  color: color-mix(in srgb, var(--text-tertiary) 84%, var(--text-secondary));
}

[data-theme="light"] .day-habit-expand-handle:hover,
[data-theme="light"] .day-habit-30days-cta:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-secondary) 62%, transparent);
}

[data-theme="light"] .day-habit-expand-handle.is-open,
[data-theme="light"] .day-habit-expand-handle[aria-expanded="true"],
[data-theme="light"] .day-habit-30days-cta.is-open,
[data-theme="light"] .day-habit-30days-cta[aria-expanded="true"] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-secondary) 78%, transparent);
}

/* Collapsible detail */
.day-habit-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.18s ease, opacity 0.15s ease;
  overflow: hidden;
}

.day-habit-detail[aria-hidden="false"],
[data-habit-accordion].is-expanded .day-habit-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: visible;
}

.day-habit-detail-inner {
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

[data-habit-accordion].is-expanded .day-habit-detail-inner {
  padding-top: var(--space-2);
  padding-bottom: var(--space-1);
}

.day-habit-detail-title {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1-5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- 7-day mini-grid (calendar-style cells) --- */
.day-habit-7days {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.day-habit-7days-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(20px, 1fr));
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.day7-head {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
}

.day-habit-7days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(20px, 1fr));
  gap: 3px;
  padding-inline: 0;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.day7-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 20px;
  min-height: 34px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  font-size: 12px;
  line-height: 1;
  transition: border-color 0.1s, background 0.1s, box-shadow 0.1s;
}

.day7-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
}

.day7-check {
  font-weight: 700;
  font-size: 12px;
  color: var(--cal-done-text, var(--success));
}

.day7-summary {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: right;
  padding-top: 2px;
}

/* --- Week header compact (number only) --- */

.week-header--compact {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

/* --- 30-day lazy grid --- */
.day-habit-30days-cta {
  margin-top: 0;
}

.day-habit-30days {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}

.day-habit-30days.is-open {
  max-height: 600px;
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}

.day-habit-30days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  grid-auto-flow: row;
  gap: 4px;
  padding: 2px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
}

.day30-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 58%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 92%, var(--surface-primary));
  background-clip: padding-box;
  line-height: 1;
  isolation: isolate;
  contain: paint;
  --day30-cell-selection-ring: inset 0 0 0 0 transparent;
  --day30-cell-today-ring: inset 0 0 0 0 transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: border-color 0.1s, background 0.1s, box-shadow 0.1s;
}

.day30-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--day30-cell-selection-ring), var(--day30-cell-today-ring);
}

.day30-num {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 8px;
  font-weight: 600;
  color: var(--text-tertiary);
  opacity: 0.72;
  line-height: 1;
  pointer-events: none;
}

.day30-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  font-size: 10px;
  margin-top: 7px;
  line-height: 1;
  pointer-events: none;
}

.day30-check {
  font-weight: 700;
  color: var(--cal-done-text, var(--success));
}

.day7-cell.is-off,
.day30-cell.is-off {
  background: var(--cal-off-bg);
  border-color: var(--cal-off-br);
  color: var(--text-tertiary);
}

.day7-cell.is-completed,
.day30-cell.is-completed {
  background: var(--cal-done-bg);
  border-color: var(--cal-done-br);
}

.day7-cell.is-skipped,
.day30-cell.is-skipped {
  background: var(--cal-skip-bg);
  border-color: var(--cal-skip-br);
}

.day7-cell.is-planned,
.day30-cell.is-planned {
  background: var(--cal-plan-bg);
  border-color: var(--cal-plan-br);
}

.day7-cell.is-past.is-completed,
.day30-cell.is-past.is-completed {
  background: var(--cal-past-done-bg);
  border-color: var(--cal-past-done-br);
}

.day7-cell.is-past.is-skipped,
.day30-cell.is-past.is-skipped {
  background: var(--cal-past-skip-bg);
  border-color: var(--cal-past-skip-br);
}

.day7-cell.is-past.is-planned,
.day30-cell.is-past.is-planned {
  background: var(--cal-off-bg);
  border-color: var(--cal-off-br);
}

.day7-cell.is-future,
.day30-cell.is-future {
  opacity: 0.68;
}

.day7-cell.is-future.is-planned,
.day30-cell.is-future.is-planned {
  background: var(--cal-future-plan-bg);
  border-color: var(--cal-future-plan-br);
  border-style: dashed;
}

.day7-cell.is-future.is-off,
.day30-cell.is-future.is-off {
  border-style: dotted;
}

.day7-cell.is-future.is-completed,
.day30-cell.is-future.is-completed {
  background: var(--cal-done-bg);
  border-color: var(--cal-done-br);
}

.day7-cell.is-paused,
.day30-cell.is-paused {
  border-style: dashed;
}

.day7-cell.is-paused.has-pause-reason,
.day30-cell.is-paused.has-pause-reason {
  background: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 9%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 48%, var(--border-subtle));
}

.day7-cell.is-selected {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 18%, var(--border-default));
}

.day30-cell.is-selected {
  --day30-cell-selection-ring: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 18%, var(--border-default));
}

.day7-cell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--cal-today-border);
}

.day30-cell.is-today {
  --day30-cell-today-ring: inset 0 0 0 1.25px var(--cal-today-border);
}

.day7-cell.is-today.is-off,
.day30-cell.is-today.is-off,
.day7-cell.is-today.is-pre-start,
.day30-cell.is-today.is-pre-start {
  background: var(--cal-off-bg);
  border-color: var(--cal-today-border);
}

.day7-cell.is-today.is-planned,
.day30-cell.is-today.is-planned {
  background: var(--cal-plan-bg);
  border-color: var(--cal-plan-br);
}

.day7-cell.is-today.is-completed,
.day30-cell.is-today.is-completed {
  background: var(--cal-done-bg);
  border-color: var(--cal-done-br);
  box-shadow: none;
}

.day30-cell.is-today.is-completed {
  --day30-cell-today-ring: inset 0 0 0 0 transparent;
}

.day7-cell.is-today.is-skipped,
.day30-cell.is-today.is-skipped {
  background: var(--cal-skip-bg);
  border-color: var(--cal-skip-br);
}

.day7-cell.is-today.is-paused.has-pause-reason,
.day30-cell.is-today.is-paused.has-pause-reason {
  background: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 11%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--pause-reason-color, var(--warning)) 52%, var(--cal-today-border));
}

@media (max-width: 767px) {
  .day-view {
    --day-habit-card-min-width: 100%;
    --day-habit-card-max-width: 100%;
    --day-habit-card-width: 100%;
    --day-cat-single-width: 100%;
    --day-cat-double-width: 100%;
  }

  .day-view .day-habits-grid {
    gap: var(--space-3);
  }

  .day-view .day-habits-grid--category .day-cat-group {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }

  .day-view .day-habits-grid--category .day-cat-group-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-view .day-habits-grid--category .day-habit-card,
  .day-view .day-habits-grid--flat .day-habit-card {
    width: 100%;
    flex-basis: 100%;
    align-self: flex-start;
  }

  .day-view .goal-progress-metrics {
    width: auto;
    align-items: flex-end;
    text-align: right;
  }

  .day-habit-7days-grid,
  .day-habit-30days-grid {
    gap: 3px;
  }

  .day-habit-30days-grid {
    grid-template-columns: repeat(auto-fit, minmax(23px, 1fr));
    padding: 1px;
  }

  .day-habit-expand-handle,
  .day-habit-30days-cta {
    min-height: 33px;
    padding: 0 11px;
    font-size: calc(var(--text-xs) * 0.88);
  }

  .day7-cell,
  .day30-cell {
    min-height: 30px;
  }

  .day30-cell {
    border-radius: 5px;
  }

  .day30-num {
    top: 2px;
    left: 3px;
    font-size: 7px;
  }

  .day30-icon {
    font-size: 9px;
    margin-top: 6px;
  }
}

/* ============================================
  GOAL CARDS (Habits page - Goal mensili)
  ============================================ */

.habit-goals-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.goals-category-group {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cat-color, var(--neutral-400));
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  overflow: hidden;
}

.goals-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.goals-category-header .category-collapse-btn {
  flex-shrink: 0;
}

.goals-category-header__title {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 0 1 clamp(260px, 52%, 430px);
  min-width: 0;
  max-width: 430px;
}

.goals-category-header__emoji {
  font-size: 1.05rem;
}

.goals-category-header__name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  letter-spacing: 0.005em;
  font-size: clamp(0.88rem, 0.84rem + 0.08vw, 0.98rem);
}

.goals-category-header__progress {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: none;
  display: grid;
  gap: 4px;
  margin-left: auto;
}

.goals-category-header__progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  line-height: 1;
}

.goals-category-header__progress-value {
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
}

.goals-category-header__progress-percent {
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
}

.goals-category-header__progress-track {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 92%, var(--surface-tertiary));
  overflow: hidden;
}

.goals-category-header__progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cat-color, var(--accent-500)) 88%, #ffffff 12%),
    var(--cat-color, var(--accent-500))
  );
}

.goals-category-header__progress-expected {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 78%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface-primary) 88%, transparent);
  pointer-events: none;
}

.goals-category-header__count {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: var(--surface-primary);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 2px;
}

.goals-category-panel {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition:
    grid-template-rows 180ms ease,
    opacity 180ms ease,
    visibility 180ms ease;
}

.goals-category-panel > .goals-category-items {
  min-height: 0;
}

.goals-category-group.is-collapsed .goals-category-header {
  border-bottom-color: transparent;
}

.goals-category-group.is-collapsed .goals-category-panel {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.goals-category-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
}

.goal-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.goal-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.goals-category-items .goal-card {
  margin: 0;
}

.goal-card .goal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.goal-card .goal-card-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: calc(var(--text-base) * 1.12);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.goal-card .goal-card-icon {
  font-size: 1.1rem;
}

.goal-card .goal-card-progress {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-accent);
  white-space: nowrap;
}

.goal-card .goal-card-label {
  font-size: calc(var(--text-xs) * 1.1);
  color: var(--text-tertiary);
}

.goal-card .goal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: calc(var(--text-sm) * 1.08);
}

.goal-card .goal-card-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.goals-flat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.goal-card.goal-card--flat {
  border-left: 3px solid var(--goal-card-cat, var(--border-subtle));
}

.goal-card-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-default) 84%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 90%, var(--surface-primary));
  font-size: 10px;
  font-weight: var(--font-medium);
  line-height: 1.15;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goal-card .habit-streak-badge,
.goal-card .habit-streak {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--accent-text);
  white-space: nowrap;
}

.goal-progress-track {
  position: relative;
  height: 6px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-1);
}

.goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-400));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.goal-progress-expected {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 78%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface-primary) 88%, transparent);
  pointer-events: none;
}

@media (max-width: 768px) {
  .habit-category-header {
    flex-wrap: nowrap;
    row-gap: 0;
  }

  .habit-category-header__title-group {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .habit-category-header__name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .goals-category-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
  }

  .goals-category-header .category-collapse-btn {
    grid-column: 1;
    grid-row: 1;
  }

  .goals-category-header__title {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
  }

  .goals-category-header__progress {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin-inline: 0;
    min-width: 0;
  }

  .goals-category-items {
    grid-template-columns: 1fr;
    padding: var(--space-2);
  }
}

.weight-card .app-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Diff and progress values: accent color when active */
.weight-kpi-diff-value.accent,
#goal-diff-value.accent {
  color: var(--accent);
}

.weight-kpi-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-2);
  width: 100%;
  align-items: start;
  justify-items: center;
}

.segmented-control,
.weight-goal-unit-toggle,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle {
  --segmented-track-border: color-mix(in srgb, var(--border-default) 42%, transparent);
  --segmented-track-bg:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-elevated, var(--surface-secondary)) 96%, var(--surface-primary)) 0%,
      color-mix(in srgb, var(--surface-secondary) 84%, var(--surface-primary)) 100%);
  --segmented-track-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 18px -24px rgba(15, 23, 42, 0.12);
  --segmented-option-hover-bg: color-mix(in srgb, var(--surface-primary) 70%, transparent);
  --segmented-option-hover-color: var(--text-secondary);
  --segmented-option-active-bg:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-300) 16%, rgba(255, 241, 214, 0.12)) 0%,
      color-mix(in srgb, var(--accent-600) 26%, rgba(137, 84, 24, 0.76)) 100%);
  --segmented-option-active-color: color-mix(in srgb, #fff4e1 90%, var(--accent-300) 10%);
  --segmented-option-active-shadow:
    inset 0 1px 0 rgba(255, 243, 221, 0.18),
    0 10px 16px -12px rgba(0, 0, 0, 0.34);
  --segmented-option-focus-ring: color-mix(in srgb, var(--accent-500) 32%, transparent);
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  border-radius: 15px;
  border: 1px solid var(--segmented-track-border);
  background: var(--segmented-track-bg);
  box-shadow: var(--segmented-track-shadow);
}

[data-theme="light"] .segmented-control,
[data-theme="light"] .weight-goal-unit-toggle,
[data-theme="light"] body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle,
html:not([data-theme="dark"]) .segmented-control,
html:not([data-theme="dark"]) .weight-goal-unit-toggle,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle {
  --segmented-track-border: color-mix(in srgb, var(--border-default) 18%, transparent);
  --segmented-track-bg:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.76) 0%,
      color-mix(in srgb, var(--surface-secondary) 74%, var(--surface-primary)) 100%);
  --segmented-track-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 14px 22px -28px rgba(76, 53, 22, 0.12);
  --segmented-option-hover-bg:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      color-mix(in srgb, var(--surface-primary) 94%, transparent) 100%);
  --segmented-option-active-bg:
    linear-gradient(180deg,
      rgba(248, 213, 151, 0.72) 0%,
      rgba(232, 176, 84, 0.36) 100%);
  --segmented-option-active-color: color-mix(in srgb, var(--text-primary) 92%, #6f4819 8%);
  --segmented-option-active-shadow:
    inset 0 1px 0 rgba(255, 252, 245, 0.6),
    0 10px 18px -14px rgba(109, 73, 24, 0.24);
  --segmented-option-focus-ring: color-mix(in srgb, var(--accent-500) 24%, transparent);
}

.app-card-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: max-content;
}

.weight-card-header {
  align-items: flex-start;
}

.weight-card-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.weight-card-copy .app-card-subtitle {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: min(100%, 32ch);
  font-size: calc(var(--text-sm) * 0.98);
  line-height: 1.22;
  text-wrap: balance;
}

#active-goal-card.weight-card--needs-entry {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-default));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 96%, transparent) 0%, color-mix(in srgb, var(--accent-bg) 14%, var(--surface-secondary)) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-lg);
  overflow: visible;
}

#active-goal-card.weight-card--needs-entry .app-card-body,
#active-goal-card.weight-card--needs-entry #no-active-goal,
#active-goal-card.weight-card--needs-entry .weight-goal-empty-actions {
  overflow: visible;
}

#weight-goal-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

#active-goal-card .weight-card-header {
  gap: var(--space-3);
}

#active-goal-card.weight-card--needs-entry #new-weight-goal-btn {
  min-width: clamp(220px, 44vw, 280px);
}

#active-goal-card.weight-card--needs-entry #goal-status-badge {
  background: color-mix(in srgb, var(--accent-bg) 44%, var(--surface-primary));
  color: color-mix(in srgb, var(--accent) 78%, var(--text-primary));
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

#active-goal-card.weight-card--needs-entry .app-card-subtitle {
  color: color-mix(in srgb, var(--accent) 52%, var(--text-secondary));
}

#active-goal-card.weight-card--needs-entry #no-active-goal {
  min-height: 116px;
  flex-direction: column;
  gap: var(--space-3);
}

.weight-goal-empty-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
}

.weight-goal-cta--calendar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.weight-goal-cta {
  min-width: clamp(200px, 40vw, 260px);
  border-width: 1px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #221304;
  background: linear-gradient(135deg, rgba(255, 249, 237, 0.96), rgba(255, 238, 196, 0.92));
  border-color: rgba(255, 209, 102, 0.4);
  box-shadow: 0 14px 28px -18px rgba(251, 146, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#active-goal-card #new-weight-goal-btn.weight-goal-cta::before {
  content: '';
  position: absolute;
  inset: auto 24px 4px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(129, 140, 248, 0.34), rgba(129, 140, 248, 0));
  filter: blur(6px);
  z-index: 0;
  opacity: 0.68;
  pointer-events: none;
}

#active-goal-card #new-weight-goal-btn.weight-goal-cta::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.34) 48%, transparent 100%);
  transform: translateX(-120%);
  animation: weight-goal-cta-sheen 3.8s ease-in-out infinite;
  pointer-events: none;
}

#active-goal-card.weight-card--needs-entry #new-weight-goal-btn {
  background: linear-gradient(135deg, rgba(255, 251, 243, 0.98), rgba(246, 240, 255, 0.92));
  border-color: rgba(196, 181, 253, 0.48);
  color: #24124c;
  box-shadow: 0 18px 34px -16px rgba(99, 102, 241, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] #active-goal-card.weight-card--needs-entry #new-weight-goal-btn,
body.dark-theme #active-goal-card.weight-card--needs-entry #new-weight-goal-btn {
  background: linear-gradient(135deg, rgba(47, 39, 88, 0.96), rgba(27, 32, 68, 0.94));
  border-color: rgba(196, 181, 253, 0.34);
  color: #f8fafc;
  box-shadow: 0 18px 34px -16px rgba(67, 56, 202, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@keyframes weight-goal-cta-sheen {
  0%, 72%, 100% {
    transform: translateX(-120%);
  }

  84% {
    transform: translateX(120%);
  }
}

#active-goal-card .app-card-title {
  font-size: calc(var(--text-lg) * 1.02);
  line-height: 1.05;
}

.weight-goal-unit-toggle--header {
  gap: 2px;
  padding: 3px;
  min-height: 36px;
  margin-top: 2px;
}

.segmented-control__option,
.weight-goal-unit-chip,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text-tertiary) 92%, transparent);
  min-width: 44px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 12px;
  font-size: 11.25px;
  font-weight: 650;
  letter-spacing: 0.015em;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.weight-goal-unit-toggle--header .weight-goal-unit-chip {
  min-width: 38px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.segmented-control__option:hover,
.segmented-control__option:focus-visible,
.weight-goal-unit-chip:hover,
.weight-goal-unit-chip:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip:hover,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip:focus-visible {
  color: var(--segmented-option-hover-color);
  background: var(--segmented-option-hover-bg);
  box-shadow: inset 0 0 0 1px var(--segmented-option-focus-ring);
  outline: none;
}

[data-theme="light"] .segmented-control__option:hover,
[data-theme="light"] .segmented-control__option:focus-visible,
[data-theme="light"] .weight-goal-unit-chip:hover,
[data-theme="light"] .weight-goal-unit-chip:focus-visible,
[data-theme="light"] body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip:hover,
[data-theme="light"] body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip:focus-visible,
html:not([data-theme="dark"]) .segmented-control__option:hover,
html:not([data-theme="dark"]) .segmented-control__option:focus-visible,
html:not([data-theme="dark"]) .weight-goal-unit-chip:hover,
html:not([data-theme="dark"]) .weight-goal-unit-chip:focus-visible,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip:hover,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px var(--segmented-option-focus-ring);
}

.segmented-control__option.is-active,
.weight-goal-unit-chip.is-active,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip.is-active {
  color: var(--segmented-option-active-color);
  background: var(--segmented-option-active-bg);
  box-shadow: var(--segmented-option-active-shadow);
  font-weight: 700;
}

[data-theme="light"] .segmented-control__option.is-active,
[data-theme="light"] .weight-goal-unit-chip.is-active,
[data-theme="light"] body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip.is-active,
html:not([data-theme="dark"]) .segmented-control__option.is-active,
html:not([data-theme="dark"]) .weight-goal-unit-chip.is-active,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip.is-active {
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 245, 0.6),
    0 10px 18px -14px rgba(109, 73, 24, 0.24);
}

.segmented-control__option.is-active:focus-visible,
.weight-goal-unit-chip.is-active:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip.is-active:focus-visible {
  box-shadow:
    var(--segmented-option-active-shadow),
    inset 0 0 0 1px var(--segmented-option-focus-ring);
  outline: none;
}

.weight-kpi-row:not(.has-start-progress) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.weight-kpi-row:not(.has-start-progress) .weight-kpi-col--current {
  grid-column: 1;
}

.weight-kpi-row:not(.has-start-progress) .weight-kpi-col--difference {
  grid-column: 2;
}

.weight-kpi-row:not(.has-start-progress) .weight-kpi-col--target {
  grid-column: 3;
}

.weight-kpi-col {
  display: grid;
  grid-template-rows: minmax(1.35em, auto) minmax(2.15em, auto) minmax(1.05em, auto);
  align-items: start;
  justify-items: center;
  text-align: center;
  width: 100%;
  gap: 4px;
}

.weight-kpi-label {
  min-height: 1.35em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Primary weight columns: larger font */
/* Secondary label + diff: smaller */
.weight-kpi-col--progress,
.weight-kpi-col--difference {
  align-self: stretch;
}

.weight-kpi-label--spacer {
  opacity: 0;
  pointer-events: none;
}

.weight-kpi-label--sm {
  font-size: 9px;
  min-height: 1.05em;
  line-height: 1.1;
  color: var(--text-muted);
  opacity: 0.78;
  letter-spacing: 0.08em;
}

.weight-kpi-diff--sm {
  gap: 1px;
  align-self: center;
}

.weight-kpi-diff--sm .weight-kpi-diff-value {
  font-size: var(--text-sm);
}

.weight-kpi-diff--sm .goal-trend-arrow {
  font-size: var(--text-xs);
  line-height: 1;
}

.weight-kpi-value--sm {
  font-size: var(--text-lg);
}

.weight-kpi-value--accent {
  color: var(--accent);
}

.weight-kpi-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
}

.weight-kpi-value {
  font-size: clamp(1.18rem, 1.5vw, 1.42rem);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  min-height: 2.15em;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  align-self: center;
  line-height: 1;
}

.weight-kpi-value .weight-value-inline-switch {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  line-height: 1;
}

.weight-kpi-value .weight-value-number,
.weight-kpi-value > :not(small) {
  line-height: 1;
}

.weight-kpi-value small,
.weight-kpi-value .weight-unit-current-label {
  font-size: 0.48em;
  line-height: 1;
}

#active-goal-card .weight-kpi-label {
  color: color-mix(in srgb, var(--text-tertiary) 88%, transparent);
}

#active-goal-card .weight-kpi-label--sm {
  color: var(--text-muted);
  opacity: 0.66;
  letter-spacing: 0.1em;
}

#active-goal-card .weight-kpi-col--current .weight-kpi-value,
#active-goal-card .weight-kpi-col--target .weight-kpi-value {
  font-size: clamp(1.35rem, 1.8vw, 1.72rem);
  letter-spacing: -0.03em;
}

#active-goal-card .weight-kpi-col--progress .weight-kpi-diff-value,
#active-goal-card .weight-kpi-col--difference .weight-kpi-diff-value {
  font-size: calc(var(--text-lg) * 1.06);
}

.weight-kpi-diff {
  display: flex;
  min-height: 2.15em;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.weight-kpi-diff-value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  line-height: 1;
}

.weight-kpi-diff-value small {
  font-size: 0.52em;
  line-height: 1;
}

.weight-kpi-diff-value.accent {
  color: var(--accent);
}

.weight-kpi-diff-value.positive {
  color: var(--success);
}

.weight-kpi-diff-value.negative {
  color: var(--danger);
}

.weight-kpi-diff-value.neutral {
  color: var(--text-secondary);
}

/* Weight Goal Time Row — start date | center | end date */
.weight-time-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.weight-time-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* Date wrap: stacked label + value */
.weight-time-date-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  align-items: flex-start;
}

.weight-time-date-wrap--end {
  align-items: flex-end;
  text-align: right;
}

.weight-time-date-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.85;
  line-height: 1;
}

.weight-time-date {
  font-size: 11.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.weight-time-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
}

.weight-time-value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.28;
  text-wrap: balance;
}

.weight-trend-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 2px;
}

.weight-trend-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

.weight-trend-header .weight-kpi-label {
  grid-column: 1;
  justify-self: start;
}

.weight-trend-legend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  justify-self: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}

.weight-trend-legend__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  font-size: clamp(10px, 0.95vw, 11.5px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
  text-align: center;
}

.weight-trend-legend__swatch {
  width: 18px;
  height: 0;
  flex: 0 0 auto;
  color: currentColor;
  border-top: 2px dashed currentColor;
  border-radius: 999px;
}

.weight-trend-info-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-left: 1px;
  color: currentColor;
  opacity: 0.88;
}

.weight-trend-info-btn svg {
  width: 14px;
  height: 14px;
}

.weight-trend-info-btn:hover,
.weight-trend-info-btn:focus-visible {
  color: currentColor;
}

.weight-trend-legend__item--objective {
  color: color-mix(in srgb, #31d17c 82%, #dcfce7 10%);
}

.weight-trend-legend__item--real {
  color: color-mix(in srgb, #f0b24d 78%, #ffe39a 18%);
}

.weight-trend-chart {
  --weight-trend-label-fg: color-mix(in srgb, var(--text-primary) 92%, transparent);
  --weight-trend-label-outline: color-mix(in srgb, var(--surface-primary) 94%, #fff 6%);
  --weight-trend-projection-fg: color-mix(in srgb, var(--text-secondary) 82%, transparent);
  min-height: 170px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-secondary) 90%, transparent), color-mix(in srgb, var(--surface-primary) 96%, transparent));
  padding: 5px 8px 6px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
}

[data-theme="light"] .weight-trend-chart,
body:not([data-theme="dark"]) .weight-trend-chart {
  --weight-trend-label-fg: rgba(15, 23, 42, 0.96);
  --weight-trend-label-outline: rgba(255, 255, 255, 0.98);
  --weight-trend-projection-fg: rgba(51, 65, 85, 0.86);
}

[data-theme="dark"] .weight-trend-chart {
  --weight-trend-label-fg: rgba(255, 255, 255, 0.92);
  --weight-trend-label-outline: rgba(15, 23, 42, 0.68);
  --weight-trend-projection-fg: rgba(226, 232, 240, 0.78);
}

.weight-trend-svg {
  width: 100%;
  height: clamp(164px, 21vw, 212px);
  display: block;
  overflow: visible;
}

.weight-trend-path {
  fill: none;
  stroke: color-mix(in srgb, #f4b74a 82%, #fff1bf 8%);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weight-trend-context-line {
  fill: none;
  stroke: color-mix(in srgb, var(--text-tertiary) 46%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 5;
  opacity: 0.48;
}

.weight-trend-objective-line {
  stroke: color-mix(in srgb, #31d17c 82%, #dcfce7 10%);
  stroke-width: 1.9;
  stroke-dasharray: 6 4;
  opacity: 0.95;
}

.weight-trend-coincident-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 4;
  opacity: 0.96;
}

.weight-trend-target-label {
  fill: color-mix(in srgb, var(--warning) 58%, var(--text-tertiary));
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.weight-trend-end-marker-line {
  stroke: color-mix(in srgb, var(--warning) 40%, var(--border-default));
  stroke-width: 1.1;
  stroke-dasharray: 4 4;
  opacity: 0.75;
}

.weight-trend-endday-label {
  fill: color-mix(in srgb, var(--text-secondary) 92%, transparent);
  font-size: clamp(10px, 1vw, 11px);
  font-weight: 600;
}

.weight-trend-grid-line {
  stroke: color-mix(in srgb, var(--border-default) 54%, transparent);
  stroke-width: 1;
  opacity: 0.5;
}

.weight-trend-y-label {
  fill: color-mix(in srgb, var(--text-secondary) 94%, transparent);
  font-size: clamp(11px, 1.15vw, 13px);
}

.weight-trend-tick-label {
  fill: var(--text-tertiary);
  font-size: clamp(11px, 1.2vw, 13px);
}

.weight-trend-tick-label tspan:last-child {
  fill: color-mix(in srgb, var(--text-tertiary) 90%, transparent);
  font-size: clamp(10px, 1vw, 11.5px);
}

.weight-trend-current-point {
  fill: color-mix(in srgb, #f4b74a 84%, #fff3cf 16%);
  stroke: rgba(15, 23, 42, 0.9);
  stroke-width: 2;
}

.weight-trend-real-point {
  fill: color-mix(in srgb, #f4b74a 78%, #ffe39a 16%);
  stroke: color-mix(in srgb, rgba(15, 23, 42, 0.8) 68%, transparent);
  stroke-width: 1.2;
}

.weight-trend-context-point {
  fill: color-mix(in srgb, var(--text-tertiary) 62%, transparent);
  stroke: color-mix(in srgb, var(--surface-primary) 84%, transparent);
  stroke-width: 1;
  opacity: 0.58;
}

.weight-trend-objective-point {
  fill: color-mix(in srgb, #31d17c 80%, #ecfdf5 12%);
  stroke: color-mix(in srgb, rgba(5, 46, 22, 0.84) 70%, transparent);
  stroke-width: 1.2;
}

.weight-trend-coincident-point {
  fill: color-mix(in srgb, #d9c75a 86%, #fff7d6 14%);
  stroke: rgba(15, 23, 42, 0.75);
  stroke-width: 1.2;
}

.weight-trend-point-label {
  filter: drop-shadow(0 1px 3px rgba(6, 11, 20, 0.28));
}

.weight-trend-point-label-badge {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1;
}

.weight-trend-point-label-text {
  fill: var(--weight-trend-label-fg);
  stroke: var(--weight-trend-label-outline);
  paint-order: stroke fill;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 2.75px;
  font-size: clamp(10px, 1.15vw, 12px);
  font-weight: 780;
  letter-spacing: 0;
}

.weight-trend-point-label--real .weight-trend-point-label-text {
  fill: color-mix(in srgb, #ffd77b 90%, #fff8e7 10%);
}

.weight-trend-point-label--objective .weight-trend-point-label-text {
  fill: color-mix(in srgb, #78f0ae 84%, #effef5 16%);
}

.weight-trend-point-label--projection .weight-trend-point-label-text {
  fill: color-mix(in srgb, #f2ca72 82%, #fff5d7 18%);
}

.weight-trend-point-label--coincident .weight-trend-point-label-text {
  fill: color-mix(in srgb, #f4dd75 88%, #fff9dc 12%);
}

[data-theme="light"] .weight-trend-point-label--real .weight-trend-point-label-text,
body:not([data-theme="dark"]) .weight-trend-point-label--real .weight-trend-point-label-text {
  fill: #7c4a03;
}

[data-theme="light"] .weight-trend-point-label--objective .weight-trend-point-label-text,
body:not([data-theme="dark"]) .weight-trend-point-label--objective .weight-trend-point-label-text {
  fill: #047857;
}

[data-theme="light"] .weight-trend-point-label--projection .weight-trend-point-label-text,
body:not([data-theme="dark"]) .weight-trend-point-label--projection .weight-trend-point-label-text {
  fill: #92400e;
}

[data-theme="light"] .weight-trend-point-label--coincident .weight-trend-point-label-text,
body:not([data-theme="dark"]) .weight-trend-point-label--coincident .weight-trend-point-label-text {
  fill: #6b4e00;
}

.weight-trend-projection-line {
  stroke: color-mix(in srgb, #f0b24d 74%, #ffe39a 20%);
  stroke-width: 1.9;
  stroke-dasharray: 6 5;
  opacity: 0.82;
}

.weight-trend-projection-point {
  fill: color-mix(in srgb, #f3c563 78%, rgba(255, 255, 255, 0.48));
  stroke: rgba(15, 23, 42, 0.55);
  stroke-width: 1.15;
  opacity: 0.9;
}

.weight-trend-projection-label {
  fill: var(--weight-trend-projection-fg);
  stroke: var(--weight-trend-label-outline);
  paint-order: stroke fill;
  stroke-width: 1.6px;
  font-size: clamp(10px, 1.05vw, 11px);
  font-weight: 500;
  letter-spacing: 0.01em;
  filter: drop-shadow(0 1px 2px rgba(6, 11, 20, 0.28));
}

.weight-trend-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0.42rem;
  margin-top: var(--space-2-5);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent);
  font-size: clamp(10.5px, 1vw, 12px);
  color: var(--text-tertiary);
}

.weight-trend-caption__row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.36rem clamp(1.15rem, 5.5vw, 3.5rem);
}

.weight-trend-caption__item {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  line-height: 1.38;
  letter-spacing: 0;
  font-weight: 500;
  text-align: left;
}

.weight-trend-caption__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  margin-top: 0.52em;
  flex: 0 0 auto;
  align-self: flex-start;
  background: color-mix(in srgb, var(--text-muted) 68%, transparent);
}

.weight-trend-caption__item--no-marker::before,
.weight-trend-caption__item--projection-target::before {
  content: none;
}

.weight-trend-caption__item--real {
  color: var(--text-secondary);
}

.weight-trend-caption__item--real::before {
  background: color-mix(in srgb, var(--accent) 72%, var(--border-default));
}

.weight-trend-caption__item--objective {
  color: color-mix(in srgb, var(--text-secondary) 84%, transparent);
}

.weight-trend-caption__item--objective::before {
  background: color-mix(in srgb, #31d17c 82%, #dcfce7 10%);
}

.weight-trend-caption__item--projection {
  color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
  white-space: normal;
  flex-wrap: wrap;
  line-height: 1.24;
  width: auto;
  max-width: 100%;
}

.weight-trend-caption__item--projection::before {
  background: color-mix(in srgb, #f0b24d 78%, #ffe39a 18%);
}

.weight-trend-caption__text,
.weight-trend-caption__date {
  color: inherit;
}

.weight-trend-caption__value {
  font-size: inherit;
}

.weight-trend-caption__divider {
  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

.weight-trend-data-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-weight: 700;
}

.weight-trend-data-value--toward {
  color: color-mix(in srgb, #31d17c 84%, #ecfdf5 12%);
}

.weight-trend-data-value--against {
  color: color-mix(in srgb, #ff6b6b 84%, #ffe1e1 10%);
}

.weight-trend-data-value--neutral {
  color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
}

.weight-trend-data-value--anchor {
  color: color-mix(in srgb, var(--accent-400, #60a5fa) 84%, #dbeafe 12%);
}

.trend-real-popover__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.trend-real-popover__status-main,
.trend-real-popover__status-objective {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trend-real-popover__status-objective {
  margin-left: auto;
  text-align: right;
}

.trend-real-popover__eyebrow {
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}

.trend-real-popover__rate {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.trend-real-popover__separator {
  color: var(--text-muted);
}

.trend-real-popover__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.trend-real-popover__text strong {
  color: var(--text-primary);
}

.trend-real-popover__text-emphasis {
  color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
  font-weight: 600;
}

.weight-trend-empty {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.35;
}

/* BMI mini-section (profile weight card) */
.weight-bmi-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0 0;
  min-height: 0;
  transition: opacity 320ms ease, transform 320ms ease, filter 320ms ease;
}

.weight-bmi-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
}

#active-goal-card .weight-bmi-row {
  justify-content: center;
}

.weight-bmi-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  width: auto;
}

.weight-bmi-main--compact {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

#active-goal-card .weight-bmi-main--compact {
  width: 100%;
  max-width: max-content;
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-primary) 86%, transparent),
    color-mix(in srgb, var(--surface-secondary) 72%, transparent));
  border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 22px -24px rgba(15, 23, 42, 0.16);
}

#active-goal-card .weight-bmi-main--compact .weight-kpi-label {
  min-height: auto;
  margin: 0;
}

.weight-bmi-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.weight-bmi-actions {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
}

.bmi-info-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.bmi-info-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

.bmi-info-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.bmi-info-btn:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  background: var(--surface-secondary);
  border-color: var(--border-default);
}

.bmi-info-popover {
  position: fixed;
  z-index: var(--z-popover, 1060);
  width: min(500px, calc(100vw - 24px));
  max-width: 500px;
  max-height: 85vh;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.2) translateY(-8px);
  transform-origin: var(--bmi-popover-origin-x, 50%) var(--bmi-popover-origin-y, 50%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.bmi-info-popover--trend-real {
  width: min(680px, calc(100vw - 24px));
  max-width: min(680px, calc(100vw - 24px));
}

.bmi-info-popover.open {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.bmi-info-popover.closing {
  visibility: visible !important;
  pointer-events: none !important;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.bmi-info-popover__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.bmi-info-popover__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bmi-value {
  font-size: calc(var(--text-xl) * 1.02);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1;
}

.weight-bmi-main--compact .weight-kpi-label {
  margin: 0;
  white-space: nowrap;
}

#active-goal-card .weight-bmi-main--compact .weight-kpi-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.weight-bmi-main--compact .bmi-value {
  font-size: calc(var(--text-xl) * 0.96);
  white-space: nowrap;
}

#active-goal-card .weight-bmi-main--compact .bmi-value {
  font-size: calc(var(--text-lg) * 0.92);
}

.bmi-status-text {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: calc(var(--text-xs) * 0.98);
  font-weight: var(--font-semibold);
  background: color-mix(in srgb, var(--surface-secondary) 64%, transparent);
  color: var(--text-secondary);
  border: 1px solid color-mix(in srgb, var(--border-default) 52%, transparent);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.bmi-status-text.bmi-underweight {
  color: color-mix(in srgb, var(--warning) 74%, var(--text-primary));
  border-color: color-mix(in srgb, var(--warning) 22%, var(--border-default));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-primary));
}

.bmi-status-text.bmi-normal {
  color: color-mix(in srgb, var(--success) 78%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 24%, var(--border-default));
  background: color-mix(in srgb, var(--success) 8%, var(--surface-primary));
}

.bmi-status-text.bmi-overweight {
  color: color-mix(in srgb, var(--warning) 78%, var(--text-primary));
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border-default));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-primary));
}

.bmi-status-text.bmi-obese {
  color: color-mix(in srgb, var(--danger) 76%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border-default));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-primary));
}

.bmi-hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: left;
}

.bmi-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.35;
  padding: var(--space-2) 0;
}

.bmi-modal-current {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.bmi-modal-current-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.bmi-modal-current-value {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.bmi-scale,
.bmi-scale-wrap {
  margin-bottom: var(--space-2);
}

.bmi-scale {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bmi-scale__ticks {
  position: relative;
  height: 24px;
}

.bmi-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
  line-height: 1;
}

.bmi-scale__track,
.bmi-scale-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.bmi-seg,
.bmi-scale-segment {
  height: 100%;
}

.bmi-seg--under,
.bmi-scale-underweight {
  flex: 3.5 0 0;
  background: #3f98d8;
}

.bmi-seg--normal,
.bmi-scale-normal {
  flex: 6.5 0 0;
  background: #43b774;
}

.bmi-seg--over,
.bmi-scale-overweight {
  flex: 5 0 0;
  background: #d8a827;
}

.bmi-seg--obese,
.bmi-scale-obese {
  flex: 5 0 0;
  background: #d77938;
}

.bmi-marker,
.bmi-scale-marker {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: var(--surface-primary);
  border: 2px solid #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.bmi-scale__labels {
  display: grid;
  grid-template-columns: 3.5fr 6.5fr 5fr 5fr;
  gap: 0;
}

.bmi-label {
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  line-height: 1.25;
}

.bmi-modal-hint {
  margin-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .bmi-info-popover {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 150ms ease, visibility 150ms ease !important;
  }

  .bmi-info-popover.open,
  .bmi-info-popover.closing {
    animation: none !important;
  }

  .bmi-info-popover.open {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .bmi-info-popover:not(.open):not(.closing) {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Compat: modal markup generato dinamicamente da profile.js */
.bmi-scale-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bmi-scale-wrap .bmi-scale-bar {
  order: 2;
}

.bmi-scale-wrap .bmi-scale-ticks {
  order: 1;
  position: relative;
  height: 24px;
  margin-top: 0;
  font-size: 0;
}

.bmi-scale-wrap .bmi-scale-ticks>span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: transparent;
}

.bmi-scale-wrap .bmi-scale-ticks>span::after {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
}

.bmi-scale-wrap .bmi-scale-ticks>span:nth-child(1) {
  left: 17.5%;
}

.bmi-scale-wrap .bmi-scale-ticks>span:nth-child(1)::after {
  content: '18.5';
}

.bmi-scale-wrap .bmi-scale-ticks>span:nth-child(2) {
  left: 50%;
}

.bmi-scale-wrap .bmi-scale-ticks>span:nth-child(2)::after {
  content: '25';
}

.bmi-scale-wrap .bmi-scale-ticks>span:nth-child(3) {
  left: 75%;
}

.bmi-scale-wrap .bmi-scale-ticks>span:nth-child(3)::after {
  content: '30';
}

.bmi-scale-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.bmi-legend-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bmi-legend-dot {
  display: none;
}

.bmi-legend-row>span:last-child {
  color: transparent;
  font-size: 0;
  position: relative;
}

.bmi-legend-row>span:last-child::after {
  display: block;
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  line-height: 1.25;
  text-align: center;
}

.bmi-legend-row:nth-child(1)>span:last-child::after {
  content: 'Sottopeso';
}

.bmi-legend-row:nth-child(2)>span:last-child::after {
  content: 'Normale';
}

.bmi-legend-row:nth-child(3)>span:last-child::after {
  content: 'Sovrappeso';
}

.bmi-legend-row:nth-child(4)>span:last-child::after {
  content: 'Obesit\00E0';
}

/* Weight Goal Status Row (left: status, right: button) */
.weight-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.weight-status-row #complete-goal-btn {
  margin-right: auto;
}

.weight-status-row #abandon-goal-btn {
  margin-left: auto;
}

#active-goal-card .weight-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

#active-goal-card .weight-card-title-row #goal-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-medium);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  white-space: nowrap;
  flex-shrink: 0;
}

#active-goal-card .weight-card-title-row #goal-status-badge.badge-subtle {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}

#active-goal-card .weight-card-title-row #goal-status-badge.badge-goal-lose {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 64%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 20%, var(--border-default));
}

#active-goal-card .weight-card-title-row #goal-status-badge.badge-goal-gain {
  background: color-mix(in srgb, #e5a524 7%, var(--surface-primary));
  color: color-mix(in srgb, #e5a524 68%, var(--text-primary));
  border-color: color-mix(in srgb, #e5a524 22%, var(--border-default));
}

#active-goal-card .weight-card-title-row #goal-status-badge.badge-goal-maintain {
  background: color-mix(in srgb, #53a9ce 8%, var(--surface-primary));
  color: color-mix(in srgb, #53a9ce 72%, var(--text-primary));
  border-color: color-mix(in srgb, #53a9ce 24%, var(--border-default));
}

.weight-status-row #complete-goal-btn,
.complete-goal-btn {
  background: transparent;
  color: color-mix(in srgb, var(--success) 60%, var(--text-secondary));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-default));
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  box-shadow: none;
}

.weight-status-row #complete-goal-btn:hover,
.weight-status-row #complete-goal-btn:focus-visible,
.complete-goal-btn:hover,
.complete-goal-btn:focus-visible {
  background: color-mix(in srgb, var(--success) 14%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 46%, var(--border-default));
}

.weight-status-row #complete-goal-btn:active,
.complete-goal-btn:active {
  background: color-mix(in srgb, var(--success) 18%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--success) 52%, var(--border-default));
}

.weight-status-row #complete-goal-btn.complete-goal-btn--highlight,
.complete-goal-btn.complete-goal-btn--highlight {
  animation: complete-goal-btn-attention 1.9s ease-in-out infinite;
}

@keyframes complete-goal-btn-attention {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 28%, transparent);
  }
  35% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 16%, transparent);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent);
  }
}

.weight-status-row #complete-goal-btn.is-loading,
.complete-goal-btn.is-loading {
  opacity: 0.78;
  pointer-events: none;
}

.weight-status-row #complete-goal-btn.is-success,
.complete-goal-btn.is-success {
  background: color-mix(in srgb, var(--success) 86%, var(--surface-primary));
  color: #fff;
  border-color: color-mix(in srgb, var(--success) 94%, var(--border-default));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 18%, transparent);
  animation: none !important;
}

#active-goal-card.goal-completion-success {
  animation: goal-completion-card-success 820ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes goal-completion-card-success {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent);
  }
  45% {
    transform: translateY(-2px);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 14%, transparent);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent);
  }
}

.weight-status-row #abandon-goal-btn {
  background: transparent;
  color: color-mix(in srgb, var(--danger) 70%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 44%, var(--border-default));
  box-shadow: none;
}

.weight-status-row #abandon-goal-btn:hover,
.weight-status-row #abandon-goal-btn:focus-visible {
  background: color-mix(in srgb, var(--danger) 90%, var(--surface-primary));
  color: #fff;
  border-color: color-mix(in srgb, var(--danger) 95%, var(--border-default));
}

.weight-status-row #abandon-goal-btn:active {
  background: color-mix(in srgb, var(--danger) 82%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 90%, var(--border-default));
}

@media (max-width: 720px) {
  .weight-status-row {
    align-items: flex-start;
  }

  .weight-status-row #complete-goal-btn {
    margin-right: 0;
  }

  .weight-status-row #abandon-goal-btn {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weight-status-row #complete-goal-btn.complete-goal-btn--highlight,
  .complete-goal-btn.complete-goal-btn--highlight {
    animation: none !important;
  }

  #active-goal-card.goal-completion-success {
    animation: none !important;
  }

  #active-goal-card.goal-transition-to-empty #no-active-goal.is-visible,
  #active-goal-card.goal-completion-staging .weight-goal-primary-row {
    animation: none !important;
  }

  #active-goal-card #no-active-goal,
  #active-goal-card #no-active-goal .empty-state-description,
  .goal-flash-message,
  #active-goal-card #no-active-goal-text.is-revealing .fog-letter {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
}

.goal-flash-message {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--warning-border, rgba(255, 215, 0, 0.4));
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.02));
  color: var(--warning-dark, #b8860b);
  font-weight: var(--font-medium);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.34s ease, transform 0.34s ease;
  text-align: center;
}

.goal-flash-message.goal-flash-message--success {
  border-color: color-mix(in srgb, var(--success) 32%, var(--border-default));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--success) 16%, transparent),
    color-mix(in srgb, var(--success) 6%, transparent)
  );
  color: color-mix(in srgb, var(--success) 72%, var(--text-primary));
}

.goal-flash-message.goal-flash-message--warning {
  border-color: color-mix(in srgb, var(--warning, #d9a21a) 38%, var(--border-default));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--warning, #d9a21a) 16%, transparent),
    color-mix(in srgb, var(--warning, #d9a21a) 5%, transparent)
  );
  color: color-mix(in srgb, var(--warning, #d9a21a) 74%, var(--text-primary));
}

.goal-flash-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy styles for compatibility */
.weight-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-start;
}

.weight-column {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.weight-month-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

.weight-goal-label-short {
  display: none;
}

.weight-value {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.weight-value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.weight-diff-block {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.weight-month-diff {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.weight-month-diff.positive {
  color: var(--success-dark);
}

.weight-month-diff.negative {
  color: var(--danger-dark);
}

.weight-month-diff.up {
  color: var(--danger);
}

.weight-month-diff.down {
  color: var(--success);
}

.weight-month-diff.neutral {
  color: var(--text-muted);
}

.weight-diff-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.goal-remaining-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  background: var(--surface-secondary);
}

.goal-remaining-chip.goal-trend-positive {
  color: var(--success-dark);
}

.goal-remaining-chip.goal-trend-negative {
  color: var(--danger-dark);
}

.goal-trend-arrow {
  font-size: var(--text-xl);
}

.goal-remaining-days {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.goal-remaining-days.goal-trend-positive {
  color: var(--success-dark);
}

.goal-remaining-days.goal-trend-negative {
  color: var(--danger-dark);
}

.weight-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.weight-edit-btn {
  min-height: 34px;
  border-radius: var(--radius-md);
}

.weight-updated {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.weight-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calendar-card-header--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title action"
    "subtitle subtitle";
  align-items: start;
  gap: var(--space-1) var(--space-3);
}

.calendar-card-header--compact .calendar-card-header-title {
  grid-area: title;
  min-width: 0;
}

.calendar-card-header--compact .calendar-card-header-action {
  grid-area: action;
  justify-self: end;
  align-self: start;
}

.calendar-card-header--compact .app-card-title {
  margin: 0;
}

.calendar-card-header--compact .app-card-subtitle {
  grid-area: subtitle;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.weight-card-calendar-header .calendar-weight-unit-segmented {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: max-content;
  margin-left: auto;
  padding: 3px;
  border-radius: 14px;
}

.weight-card-calendar-header .calendar-weight-unit-segmented .segmented-control__option {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 26px;
  padding: 4px 8px;
  font-size: var(--text-xs);
  line-height: 1;
}

.calendar-weight-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary));
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  animation: calendarWeightEditorReveal 220ms ease both;
}

@keyframes calendarWeightEditorReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calendar-weight-toolbar {
  display: none;
}

.calendar-weight-editor.is-active {
  border-color: color-mix(in srgb, var(--accent-500) 42%, var(--border-default));
  box-shadow: 0 0 0 2px rgba(var(--accent-500-rgb), 0.12);
}

.calendar-weight-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 68%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 86%, transparent);
}

.calendar-weight-step {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-secondary) 76%, var(--surface-primary));
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, border-color var(--transition-fast), background var(--transition-fast);
}

.calendar-weight-step:hover,
.calendar-weight-step:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 45%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 56%, var(--surface-primary));
  outline: none;
}

.calendar-weight-step:active {
  transform: scale(0.94);
}

.calendar-weight-display-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 70%, var(--surface-primary));
}

.calendar-weight-display-input {
  width: 112px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: calc(var(--text-2xl) * 1.02);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0;
  line-height: 1.2;
  appearance: textfield;
}

#goal-target-weight::placeholder {
  color: color-mix(in srgb, var(--text-tertiary) 76%, transparent);
  opacity: 0.72;
  font-weight: var(--font-medium);
}

.calendar-weight-display-input:focus {
  outline: none;
}

.calendar-weight-display-input::-webkit-outer-spin-button,
.calendar-weight-display-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calendar-weight-unit {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
}

.calendar-weight-unit-next-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.7em;
  font-weight: var(--font-semibold);
  line-height: 1;
  padding: 0;
  margin-left: 0.08em;
  opacity: 0.82;
  cursor: pointer;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.calendar-weight-unit-next-btn::before {
  content: "/";
  margin-right: 2px;
  color: var(--text-tertiary);
  opacity: 0.75;
}

.calendar-weight-unit-next-btn:hover,
.calendar-weight-unit-next-btn:focus-visible {
  color: var(--text-accent);
  opacity: 1;
  outline: none;
}

.weight-value .calendar-weight-unit-next-btn {
  font-size: 0.5em;
  margin-left: 0.18em;
}

.calendar-complete-goal-btn {
  white-space: nowrap;
}

.weight-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.weight-remove-btn {
  min-height: 34px;
}

.weight-remove-helper {
  max-width: 420px;
  margin: calc(var(--space-1) * -1) auto 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.45;
  text-align: center;
}

.weight-form-actions--inline {
  justify-content: center;
}

.weight-edit-helper {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.weight-edit-warning {
  color: var(--danger-dark);
  font-weight: var(--font-semibold);
}

.weight-edit-note {
  color: var(--danger);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  margin-left: var(--space-1);
}

.weight-input {
  max-width: 200px;
}

.weight-input--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

@media (max-width: 1199px) {
  .calendar-hero {
    grid-template-columns: 1fr;
  }

  .calendar-stage-fullbleed {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .calendar-board {
    padding: var(--space-4);
  }

  .calendar-wrapper {
    padding: 0;
    overflow-x: auto;
  }

  .mobile-scroll-hint {
    display: block;
  }
}

@media (max-width: 768px) {
  .calendar-card-header--compact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-2);
  }

  .calendar-card-header--compact .app-card-subtitle {
    font-size: clamp(0.72rem, 3.2vw, 0.82rem);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .calendar-weight-unit-segmented {
    width: auto;
    max-width: max-content;
    margin-left: auto;
  }

  .weight-card-calendar-header .calendar-weight-unit-segmented .segmented-control__option {
    flex: 0 0 auto;
    text-align: center;
  }

  .weight-summary-row {
    flex-direction: column;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-summary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: stretch;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-summary-row:not(:has(.weight-target-column)) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-page[data-page="calendar"] #weight-content .weight-column {
    min-width: 0;
    gap: 6px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 66%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-secondary) 50%, transparent);
  }

  body.app-page[data-page="calendar"] #weight-content .weight-month-label {
    margin: 0;
    font-size: 0.64rem;
    letter-spacing: 0.055em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-goal-label-full {
    display: none;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-goal-label-short {
    display: inline;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-value {
    font-size: clamp(1.55rem, 7vw, 2.05rem);
    line-height: 1.02;
    white-space: nowrap;
    gap: 0.2rem;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-value .text-muted {
    font-size: 0.52em;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-diff-block {
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 2px;
  }

  body.app-page[data-page="calendar"] #weight-content .goal-remaining-chip,
  body.app-page[data-page="calendar"] #weight-content .calendar-complete-goal-btn {
    min-height: 28px;
  }

  body.app-page[data-page="calendar"] #weight-content .goal-remaining-chip {
    padding: 4px 8px;
    font-size: 0.76rem;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-diff-label {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-goal-remaining-row {
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-secondary) 54%, transparent);
    font-size: 0.78rem;
    line-height: 1.3;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-footer {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  body.app-page[data-page="calendar"] #weight-content .weight-updated {
    max-width: min(58%, 18rem);
    font-size: 0.74rem;
    line-height: 1.25;
    text-align: right;
  }

  .weight-form-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .weight-form-actions .btn {
    width: 100%;
  }

  .calendar-weight-editor {
    align-items: stretch;
  }

  .calendar-weight-toolbar {
    justify-content: flex-start;
  }

  .calendar-weight-stepper {
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }

  .calendar-weight-editor {
    box-sizing: border-box;
    max-width: 100%;
  }

  .calendar-weight-display-wrap {
    flex: 1;
    justify-content: center;
    min-width: 0;
    box-sizing: border-box;
  }

  .calendar-weight-display-input {
    width: 96px;
  }

  .calendar-weight-unit-next-btn {
    font-size: 0.82em;
    padding: 2px 4px;
  }

  .weight-value .calendar-weight-unit-next-btn {
    font-size: 0.56em;
  }

}

@media (max-width: 380px) {
  body.app-page[data-page="calendar"] #weight-content .weight-summary-row {
    gap: var(--space-2);
  }

  body.app-page[data-page="calendar"] #weight-content .weight-column {
    padding: 8px;
  }

  body.app-page[data-page="calendar"] #weight-content .weight-value {
    font-size: clamp(1.38rem, 6.4vw, 1.78rem);
  }
}

/* ============================================
   HABITS PAGE LAYOUT
   ============================================ */

.habits-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  min-width: 0;
}

@media (min-width: 1280px) {
  .habits-page-grid {
    grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr);
    align-items: start;
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  body.layout-sidebar .habits-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1440px) {
  body.layout-sidebar .habits-page-grid {
    grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
  }
}

.habits-list-card,
.habit-goals-card,
.habits-completed-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.habits-completed-card {
  grid-column: 1;
  order: 3;
}

.habits-completed-card__body {
  display: grid;
  gap: var(--space-3);
}

.completed-habits-list {
  display: grid;
  gap: var(--space-3);
}

.completed-habit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  min-width: 0;
}

.completed-habit-item__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.completed-habit-item__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  flex: 0 0 auto;
}

.completed-habit-item__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.completed-habit-item__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.completed-habit-item__period,
.completed-habit-item__meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.completed-habit-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.completed-habit-item__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.completed-habit-item__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.completed-habit-item__main[role="button"] {
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.completed-habit-item__main[role="button"]:hover {
  background: color-mix(in srgb, var(--surface-primary) 66%, var(--surface-secondary));
}

.completed-habit-item__main[role="button"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 55%, transparent);
  outline-offset: 2px;
}

/* Action button variants consistent with active habit cards */
.completed-habit-action--edit {
  border-color: color-mix(in srgb, var(--accent-500) 28%, var(--border-default));
  color: color-mix(in srgb, var(--accent-600) 78%, var(--text-primary));
}

.completed-habit-action--delete {
  border-color: color-mix(in srgb, var(--error-500, #ef4444) 24%, var(--border-default));
  color: color-mix(in srgb, var(--error-600, #ef4444) 72%, var(--text-primary));
}

.completed-habit-action--reactivate {
  border-color: color-mix(in srgb, var(--success-500, #10b981) 32%, var(--border-default));
  background: color-mix(in srgb, var(--success-500, #10b981) 8%, var(--surface-secondary));
  color: color-mix(in srgb, var(--success-700, #047857) 82%, var(--text-primary));
}

.completed-habit-action--reactivate:hover {
  background: color-mix(in srgb, var(--success-500, #10b981) 14%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--success-500, #10b981) 44%, var(--border-default));
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.btn__text {
  display: inline;
}

.ui-dialog--habit-details {
  max-width: 960px;
}

.habit-details-modal {
  display: grid;
  gap: var(--space-4);
}

.habit-details-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
}

.habit-details-hero__main {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.habit-details-hero__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  font-size: 1.35rem;
}

.habit-details-hero__copy {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}

.habit-details-hero__copy strong {
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.2;
}

.habit-details-hero__copy span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.habit-details-hero__category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--habit-category-color, var(--border-default)) 36%, var(--border-default));
  border-radius: 999px;
  background: color-mix(in srgb, var(--habit-category-color, var(--surface-primary)) 10%, var(--surface-primary));
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 750;
  line-height: 1.2;
}

.habit-details-hero__category .habit-category-color-bar {
  height: 18px;
}

.habit-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.habit-details-row {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
}

.habit-details-row__label,
.habit-details-row__value {
  margin: 0;
  min-width: 0;
}

.habit-details-row__label {
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.habit-details-row__value {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.habit-details-section-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 800;
}

.habit-details-timeline {
  display: grid;
  gap: var(--space-2);
}

.habit-details-timeline__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--space-2);
  align-items: center;
  padding: var(--space-2-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.habit-details-timeline__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--habit-pause-reason-color, var(--border-default)) 38%, var(--border-default));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--surface-primary)) 12%, var(--surface-primary));
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 750;
}

.habit-details-timeline__badge--frequency {
  --habit-pause-reason-color: var(--accent-400);
}

.habit-details-timeline__period {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 650;
}

.habit-details-timeline__show-all {
  justify-self: start;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-400) 32%, var(--border-default));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-bg) 44%, var(--surface-primary));
  color: var(--text-accent);
  font-size: var(--text-sm);
  font-weight: 750;
  cursor: pointer;
}

.habit-details-timeline__show-all:hover,
.habit-details-timeline__show-all:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-500) 48%, var(--border-default));
  box-shadow: var(--focus-ring);
}

.habit-details-timeline__note {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.habits-list-card .app-card-header {
  align-items: stretch;
}

.habits-page-header-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.habits-page-subtitle {
  max-width: min(100%, 48rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habits-list-header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
}

.habits-list-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}

.habits-order-mobile-anchor {
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 34px;
}

.habits-list-title-row .app-card-title {
  flex: 0 1 auto;
  min-width: 0;
}

.habits-list-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.habits-list-actions-row .habits-reminders-btn {
  margin-left: 0;
}

.habit-goals-card__header {
  align-items: stretch;
}

.habit-goals-header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  min-width: 0;
}

.habit-goals-header-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.habit-goals-header-copy .app-card-subtitle {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.74rem, 1.8vw, var(--text-sm));
  line-height: 1.15;
}

.habit-goals-month-badge {
  align-self: start;
  justify-self: end;
  max-width: 100%;
}

.habits-total-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--border-default) 78%, var(--surface-secondary));
  background: color-mix(in srgb, var(--surface-secondary) 78%, var(--surface-primary));
  color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary));
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
}

.habits-plus-cta-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  margin: var(--space-2) 0 calc(var(--space-5) + 2px) clamp(var(--space-3), 1.4vw, var(--space-4));
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(251, 191, 36, 0.24);
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.08) 0%,
      rgba(245, 158, 11, 0.035) 100%);
  color: color-mix(in srgb, var(--accent-700) 72%, var(--text-secondary));
  font-size: var(--text-xs);
  line-height: 1.2;
  max-width: 100%;
  text-decoration: none;
  align-self: flex-start;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.habits-plus-cta-inline__text {
  white-space: normal;
}

.habits-plus-cta-inline:hover {
  border-color: rgba(251, 191, 36, 0.36);
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.12) 0%,
      rgba(245, 158, 11, 0.055) 100%);
  color: color-mix(in srgb, var(--accent-600) 78%, var(--text-primary));
}

.habits-plus-cta-inline:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 55%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

.habits-header-meta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.35;
}

.habits-header-meta .habits-meta-active {
  color: color-mix(in srgb, var(--success-dark) 84%, var(--text-primary));
}

.habits-header-meta .habits-meta-planned {
  color: color-mix(in srgb, var(--info-dark) 82%, var(--text-primary));
}

.habits-header-meta .habits-meta-inactive {
  color: color-mix(in srgb, var(--text-tertiary) 78%, var(--text-secondary));
}

.habits-header-meta .habits-meta-separator {
  color: var(--text-tertiary);
  margin: 0 0.22rem;
}

.habit-reminder-toast-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.habit-reminder-toast-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-secondary) 84%, var(--surface-primary));
  font-size: 15px;
}

.habit-reminder-toast-row__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.habit-reminder-toast-row__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.habit-reminder-toast-row__copy strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.habit-reminder-toast-row__copy span,
.habit-reminder-toast-row--more {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.habits-list-card .habits-order-toolbar {
  align-self: center;
  justify-self: auto;
  margin-left: auto;
  max-width: 100%;
}

.habits-reminders-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  margin-left: 2px;
  border: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 44%),
    color-mix(in srgb, var(--surface-secondary) 84%, var(--surface-primary));
  color: var(--text-primary);
  box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.24);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.habits-reminders-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--info) 38%, var(--border-default));
  box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.24);
}

.habits-reminders-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.habits-reminders-btn.is-enabled {
  border-color: rgba(16, 185, 129, 0.34);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 44%),
    color-mix(in srgb, var(--surface-secondary) 70%, rgba(236, 253, 245, 0.96));
}

.habits-reminders-btn__count {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  min-width: 1ch;
}

.habits-reminders-btn__count.is-hidden {
  display: none;
}

.habits-bulk-pause-btn {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--warning) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-secondary) 86%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 20%, var(--border-default));
  color: color-mix(in srgb, var(--warning) 46%, var(--text-primary));
  box-shadow: none;
}

.habits-bulk-pause-btn:hover {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border-default));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--warning) 11%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-secondary) 92%, var(--surface-primary));
  box-shadow: 0 12px 24px -26px color-mix(in srgb, var(--warning) 32%, transparent);
}

.habits-bulk-pause-btn.has-active-pauses .habits-reminders-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border-default));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 70%, var(--text-primary));
  font-size: 10px;
  font-weight: 750;
}

.habits-history-entry-btn {
  color: var(--text-secondary);
}

.habits-history-entry-btn__icon,
.habits-history-entry-btn__icon svg {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.habits-history-entry-btn:hover {
  border-color: color-mix(in srgb, var(--accent-500) 28%, var(--border-default));
  color: var(--text-primary);
}

[data-theme="dark"] .habits-total-counter,
body.dark-theme .habits-total-counter {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.13);
  color: color-mix(in srgb, var(--text-primary) 90%, var(--text-secondary));
}

[data-theme="dark"] .habits-plus-cta-inline,
body.dark-theme .habits-plus-cta-inline {
  border-color: rgba(251, 191, 36, 0.26);
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.1) 0%,
      rgba(245, 158, 11, 0.05) 100%);
  color: color-mix(in srgb, var(--accent-400) 70%, var(--text-secondary));
}

[data-theme="dark"] .habits-plus-cta-inline:hover,
body.dark-theme .habits-plus-cta-inline:hover {
  border-color: rgba(251, 191, 36, 0.38);
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.14) 0%,
      rgba(245, 158, 11, 0.07) 100%);
  color: color-mix(in srgb, var(--accent-300) 72%, var(--text-primary));
}

[data-theme="dark"] .habits-header-meta,
body.dark-theme .habits-header-meta {
  color: color-mix(in srgb, var(--text-secondary) 86%, transparent);
}

[data-theme="dark"] .habits-header-meta .habits-meta-active,
body.dark-theme .habits-header-meta .habits-meta-active {
  color: color-mix(in srgb, var(--success) 72%, var(--text-secondary));
}

[data-theme="dark"] .habits-header-meta .habits-meta-planned,
body.dark-theme .habits-header-meta .habits-meta-planned {
  color: color-mix(in srgb, var(--info) 72%, var(--text-secondary));
}

[data-theme="dark"] .habits-header-meta .habits-meta-inactive,
body.dark-theme .habits-header-meta .habits-meta-inactive {
  color: color-mix(in srgb, var(--text-tertiary) 85%, transparent);
}

[data-theme="dark"] .habits-reminders-btn,
body.dark-theme .habits-reminders-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.055);
  color: var(--text-primary);
}

[data-theme="dark"] .habits-reminders-btn.is-enabled,
body.dark-theme .habits-reminders-btn.is-enabled {
  border-color: rgba(16, 185, 129, 0.3);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.2), transparent 44%),
    rgba(6, 78, 59, 0.5);
}

[data-theme="dark"] .habits-bulk-pause-btn,
body.dark-theme .habits-bulk-pause-btn {
  border-color: color-mix(in srgb, var(--warning) 24%, rgba(255, 255, 255, 0.14));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--warning) 12%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.052);
  color: color-mix(in srgb, var(--warning) 56%, var(--text-primary));
}

[data-theme="dark"] .habits-bulk-pause-btn.has-active-pauses .habits-reminders-btn__count,
body.dark-theme .habits-bulk-pause-btn.has-active-pauses .habits-reminders-btn__count {
  border-color: color-mix(in srgb, var(--warning) 32%, rgba(255, 255, 255, 0.16));
  background: color-mix(in srgb, var(--warning) 13%, rgba(255, 255, 255, 0.06));
  color: color-mix(in srgb, var(--warning) 72%, var(--text-primary));
}

.habits-list-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

@media (max-width: 768px) {
  .habits-list-body {
    padding: var(--space-1) var(--space-2) var(--space-2);
  }
}

@media (min-width: 1280px) {
  .habit-goals-card {
    position: sticky;
    top: var(--space-4);
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  body.layout-sidebar .habit-goals-card {
    position: static;
  }
}

/* ============================================
   PROFILE PAGE LAYOUT (3-column desktop)
   ============================================ */

.profile-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* 3-column layout for desktop */
.profile-page-grid--3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 1280px) {
  .profile-page-grid--3col {
    align-items: start;
  }
}

@media (min-width: 1280px) {
  .profile-page-grid--3col {
    grid-template-columns: 320px minmax(380px, 1fr) minmax(380px, 1fr);
  }
}

@media (min-width: 1536px) {
  .profile-page-grid--3col {
    grid-template-columns: 340px minmax(420px, 1fr) minmax(420px, 1fr);
  }
}

/* Column 1: Identity */
.profile-col-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (min-width: 1024px) {
  .profile-col-identity {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

/* Columns 2 & 3: Weight Goals and Missions */
.profile-col-weight,
.profile-col-missions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: stretch;
  min-height: 0;
  min-width: 0;
}

body.app-page[data-page="profile"] .profile-user-card,
body.app-page[data-page="profile"] #active-goal-card,
body.app-page[data-page="profile"] #goal-history-card,
body.app-page[data-page="profile"] #missions-card,
body.app-page[data-page="profile"] #missions-history-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
  box-sizing: border-box;
}

body.app-page[data-page="profile"] #missions-card {
  display: flex;
  flex-direction: column;
}

body.app-page[data-page="profile"] #active-goal-card,
body.app-page[data-page="profile"] #missions-card {
  align-self: stretch;
  height: auto;
  min-height: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 86%, #0b1120 14%) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, #020617 4%) 100%);
  border-color: color-mix(in srgb, var(--border-default) 82%, rgba(248, 250, 252, 0.04));
  box-shadow:
    0 24px 40px -34px rgba(2, 6, 23, 0.62),
    0 12px 24px -22px rgba(15, 23, 42, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.app-page[data-page="profile"] #active-goal-card > .app-card-header,
body.app-page[data-page="profile"] #missions-card > .app-card-header {
  border-bottom-color: color-mix(in srgb, var(--border-default) 88%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, rgba(255, 255, 255, 0.05) 56%, transparent);
}

body.app-page[data-page="profile"] #active-goal-card.weight-card--needs-entry {
  border-color: color-mix(in srgb, var(--border-default) 82%, rgba(248, 250, 252, 0.04));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 86%, #0b1120 14%) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, #020617 4%) 100%);
  box-shadow:
    0 24px 40px -34px rgba(2, 6, 23, 0.62),
    0 12px 24px -22px rgba(15, 23, 42, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.app-page[data-page="profile"] #active-goal-card.weight-card--needs-entry #goal-status-badge {
  background: color-mix(in srgb, var(--surface-primary) 90%, transparent);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--border-default) 72%, transparent);
}

body.app-page[data-page="profile"] #active-goal-card.weight-card--needs-entry .app-card-subtitle {
  color: var(--text-secondary);
}

[data-theme="light"] body.app-page[data-page="profile"] .app-main,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .app-main {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72) 0%, transparent 32%),
    radial-gradient(circle at 94% 10%, rgba(224, 191, 135, 0.16) 0%, transparent 24%),
    linear-gradient(180deg, #f8f3eb 0%, #f1e9de 54%, #ece2d4 100%);
}

[data-theme="light"] body.app-page[data-page="profile"] .profile-user-card,
[data-theme="light"] body.app-page[data-page="profile"] #active-goal-card,
[data-theme="light"] body.app-page[data-page="profile"] #goal-history-card,
[data-theme="light"] body.app-page[data-page="profile"] #missions-card,
[data-theme="light"] body.app-page[data-page="profile"] #missions-history-card,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .profile-user-card,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #active-goal-card,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #goal-history-card,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #missions-card,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #missions-history-card {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.992) 0%,
      rgba(254, 249, 242, 0.974) 58%,
      rgba(247, 238, 225, 0.95) 100%);
  border-color: color-mix(in srgb, var(--border-default) 22%, rgba(255, 255, 255, 0.82));
  box-shadow:
    0 26px 46px -38px rgba(83, 58, 23, 0.18),
    0 12px 22px -18px rgba(83, 58, 23, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] body.app-page[data-page="profile"] #active-goal-card.weight-card--needs-entry,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #active-goal-card.weight-card--needs-entry {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.992) 0%,
      rgba(254, 249, 242, 0.974) 58%,
      rgba(247, 238, 225, 0.95) 100%);
  border-color: color-mix(in srgb, var(--border-default) 22%, rgba(255, 255, 255, 0.82));
  box-shadow:
    0 26px 46px -38px rgba(83, 58, 23, 0.18),
    0 12px 22px -18px rgba(83, 58, 23, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] body.app-page[data-page="profile"] #missions-card .app-card-body,
[data-theme="light"] body.app-page[data-page="profile"] #active-missions-list,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #missions-card .app-card-body,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #active-missions-list {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

[data-theme="light"] body.app-page[data-page="profile"] #active-goal-card > .app-card-header,
[data-theme="light"] body.app-page[data-page="profile"] #goal-history-card > .app-card-header,
[data-theme="light"] body.app-page[data-page="profile"] #missions-card > .app-card-header,
[data-theme="light"] body.app-page[data-page="profile"] #missions-history-card > .app-card-header,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #active-goal-card > .app-card-header,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #goal-history-card > .app-card-header,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #missions-card > .app-card-header,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] #missions-history-card > .app-card-header {
  border-bottom-color: color-mix(in srgb, var(--border-subtle) 34%, transparent);
}

/* Hide empty history cards gracefully */
body.app-page[data-page="profile"] .app-card.is-history-empty {
  display: none;
}

body.app-page[data-page="profile"] #missions-card .app-card-subtitle {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

body.app-page[data-page="profile"] #missions-card .app-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  position: relative;
}

body.app-page[data-page="profile"] #missions-card .missions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
  padding-right: 0;
  scrollbar-gutter: stable;
  background: transparent;
  border-radius: inherit;
  background-clip: padding-box;
  box-shadow: none;
  isolation: isolate;
  position: relative;
}

body.app-page[data-page="profile"] #missions-card .missions-list.missions-list--viewport-locked {
  flex: 0 0 auto;
}

body.app-page[data-page="profile"] #missions-card .missions-list > .empty-state {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: clamp(180px, 30vh, 240px);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}

body.app-page[data-page="profile"] #missions-card .missions-list > .empty-state .empty-state-description {
  max-width: 28ch;
  margin: 0 auto;
}

body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar {
  width: 4px;
}

body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar-track {
  background: transparent;
}

body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 2px;
}

body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar-thumb:hover {
  background: var(--border-default);
}

body.app-page[data-page="profile"] #missions-card .missions-list::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      color-mix(in srgb, var(--surface-primary) 90%, transparent) 72%,
      var(--surface-primary) 100%);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

body.app-page[data-page="profile"] #missions-card .missions-list.scrollable::after {
  opacity: 1;
}

@media (min-width: 1024px) {

  body.app-page[data-page="profile"] #active-goal-card,
  body.app-page[data-page="profile"] #missions-card {
    height: auto;
    min-height: 0;
  }

  body.app-page[data-page="profile"] #active-goal-card .app-card-body {
    overflow: visible;
  }

  body.app-page[data-page="profile"] #missions-card {
    display: flex;
    flex-direction: column;
  }

  body.app-page[data-page="profile"] #missions-card .app-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    position: relative;
  }

  body.app-page[data-page="profile"] #missions-card .missions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: none;
    padding-right: 0;
    scrollbar-gutter: stable;
    padding-bottom: clamp(var(--space-2), 1.6vh, var(--space-4));
    background: transparent;
    border-radius: inherit;
    background-clip: padding-box;
    box-shadow: none;
    isolation: isolate;
    position: relative;
  }

  body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar {
    width: 4px;
  }

  body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar-track {
    background: transparent;
  }

  body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 2px;
  }

  body.app-page[data-page="profile"] #missions-card .missions-list::-webkit-scrollbar-thumb:hover {
    background: var(--border-default);
  }

  body.app-page[data-page="profile"] #missions-card .missions-list::after {
    content: '';
    position: absolute;
    left: 0;
    right: var(--space-1);
    bottom: 0;
    height: 36px;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        color-mix(in srgb, var(--surface-primary) 88%, transparent) 62%,
        var(--surface-primary) 100%);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  body.app-page[data-page="profile"] #missions-card .missions-list.scrollable::after {
    opacity: 1;
  }

  body.app-page[data-page="profile"] .profile-user-card {
    min-height: clamp(35rem, 64vh, 39rem);
  }

  body.app-page[data-page="profile"] .profile-user-card .app-card-body {
    min-height: 100%;
  }

  body.app-page[data-page="profile"] .profile-personal-summary {
    margin-top: auto;
  }
}

/* Tablet: 2-column layout (identity on left, content stacked on right) */
@media (min-width: 768px) and (max-width: 1279px) {
  .profile-page-grid--3col {
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto auto;
  }

  .profile-col-identity {
    grid-row: 1 / 3;
  }

  .profile-col-weight {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-col-missions {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Mobile: single column stacked */
@media (max-width: 767px) {
  .profile-page-grid--3col {
    grid-template-columns: 1fr;
  }

  .profile-col-identity,
  .profile-col-weight,
  .profile-col-missions {
    width: 100%;
  }

  /* Reduce section divider margins on mobile */
  .profile-col-weight .section-divider,
  .profile-col-missions .section-divider {
    margin-top: var(--space-4);
  }
}

/* Keep profile single-column on small tablets/large phones to avoid squeezed desktop layout */
@media (max-width: 899px) {
  body.app-page[data-page="profile"] .app-content {
    overflow-x: clip;
  }

  body.app-page[data-page="profile"] .profile-page-grid--3col {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
    gap: var(--space-3);
  }

  body.app-page[data-page="profile"] .profile-col-identity,
  body.app-page[data-page="profile"] .profile-col-weight,
  body.app-page[data-page="profile"] .profile-col-missions {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.app-page[data-page="profile"] .profile-col-identity,
  body.app-page[data-page="profile"] .profile-sidebar {
    position: static !important;
    top: auto !important;
  }
}

.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .profile-sidebar {
    position: sticky;
    top: var(--space-4);
  }
}

/* Profile user card */
.profile-user-card {
  text-align: center;
  overflow: hidden;
  position: relative;
}

body.app-page[data-page="profile"] .profile-user-card .app-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}

.profile-avatar {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: var(--radius-full);
  overflow: visible;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

@media (min-width: 1024px) {
  .profile-avatar {
    width: 122px;
    height: 122px;
  }
}

@media (min-width: 1280px) {
  .profile-avatar {
    width: 132px;
    height: 132px;
  }
}

[data-theme="light"] .profile-avatar,
html:not([data-theme="dark"]) .profile-avatar {
  box-shadow:
    0 22px 34px -22px rgba(90, 63, 23, 0.22),
    0 8px 12px -8px rgba(90, 63, 23, 0.1);
}

[data-theme="dark"] .profile-avatar,
body.dark-theme .profile-avatar {
  border: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

.profile-avatar-trigger {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.profile-avatar-trigger:hover,
.profile-avatar-trigger.is-open {
  box-shadow:
    0 14px 24px -16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.profile-avatar-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
}

.profile-avatar-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  display: block;
}

/* Profile avatar ring: reuse shared orbit style to match header user menu trigger */
.profile-avatar-trigger {
  position: relative;
}

.profile-avatar-trigger::before,
.profile-avatar-trigger::after {
  content: none;
}

.profile-avatar-frame.ui-orbit-border {
  --ui-orbit-speed: 2.25s;
  --ui-orbit-ring-width: 2px;
  --ui-orbit-ring-opacity: 1;
  --ui-orbit-glow-opacity: 0.78;
  --ui-orbit-glow-blur: 10px;
  overflow: hidden;
}

.profile-avatar-frame.ui-orbit-border::before,
.profile-avatar-frame.ui-orbit-border::after {
  inset: 0;
}

.profile-avatar-frame.ui-orbit-border .profile-avatar-img {
  position: relative;
  z-index: 2;
}

.profile-avatar-img--overflow {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar-frame.ui-orbit-border::before,
  .profile-avatar-frame.ui-orbit-border::after {
    animation: none;
  }
}

/* Point 1B: is-active removed — hover-only effect on profile avatar (see :hover rules below) */

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 200ms ease;
}

/* Slightly larger, lower framing for animal/symbol avatars */
.profile-avatar-img[src*="avatar-animal-"],
.profile-avatar-img[src*="avatar-symbol-"] {
  transform: translateY(3px) scale(1.3);
  transform-origin: center;
}

/* 3D effect for selected person avatar in profile */
.profile-avatar-img--overflow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  clip-path: inset(0 0 60% 0);
  transform: translateY(0) scale(1);
  transform-origin: center top;
  transition: transform 200ms ease, opacity 160ms ease;
}

.profile-avatar--person .profile-avatar-img {
  transform: translateY(2px) scale(1.08);
  transform-origin: center top;
}

.profile-avatar-trigger:hover .profile-avatar-img[src*="avatar-animal-"],
.profile-avatar-trigger:hover .profile-avatar-img[src*="avatar-symbol-"],
.profile-avatar-trigger.is-open .profile-avatar-img[src*="avatar-animal-"],
.profile-avatar-trigger.is-open .profile-avatar-img[src*="avatar-symbol-"] {
  transform: translateY(0) scale(1.45);
  transform-origin: center;
}

.profile-avatar-trigger.profile-avatar--person:hover .profile-avatar-img,
.profile-avatar-trigger.profile-avatar--person.is-open .profile-avatar-img {
  transform: translateY(0) scale(1.12);
  transform-origin: center bottom;
}

.profile-avatar-trigger.profile-avatar--person:hover .profile-avatar-img--overflow,
.profile-avatar-trigger.profile-avatar--person.is-open .profile-avatar-img--overflow {
  opacity: 1;
  clip-path: inset(0 0 62% 0);
  transform: translateY(0) scale(1.12);
}

.profile-avatar-trigger:not(.profile-avatar--person):hover .profile-avatar-img--overflow,
.profile-avatar-trigger:not(.profile-avatar--person).is-open .profile-avatar-img--overflow {
  opacity: 1;
  clip-path: inset(0 0 62% 0);
  transform: translateY(0) scale(1.45);
}

/* OIDC avatar in profile card: always circular, no overflow animation */
.profile-avatar-trigger.profile-avatar--oidc {
  overflow: hidden;
}

.profile-avatar-trigger.profile-avatar--oidc .profile-avatar-frame {
  border-radius: 50%;
  overflow: hidden;
}

.profile-avatar-trigger.profile-avatar--oidc .profile-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  transform: none !important;
}

.profile-avatar-trigger.profile-avatar--oidc .profile-avatar-img--overflow,
.profile-avatar-trigger.profile-avatar--oidc:hover .profile-avatar-img--overflow,
.profile-avatar-trigger.profile-avatar--oidc.is-open .profile-avatar-img--overflow {
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}

.profile-avatar-trigger.profile-avatar--oidc:hover .profile-avatar-img,
.profile-avatar-trigger.profile-avatar--oidc.is-open .profile-avatar-img {
  transform: none !important;
}

/* No mask: allow slight top overflow without clipping artifacts */


.profile-username {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.profile-tagline {
  font-size: var(--text-sm);
  margin: 0;
}

.profile-quick-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  white-space: normal;
  min-width: 0;
  min-height: 84px;
  padding: 16px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 90%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary)) 0%,
      color-mix(in srgb, var(--surface-primary) 98%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 26px -28px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .profile-stat,
html:not([data-theme="dark"]) .profile-stat {
  border-color: color-mix(in srgb, var(--border-default) 18%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      color-mix(in srgb, var(--surface-secondary) 68%, var(--surface-primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 18px 30px -32px rgba(76, 53, 22, 0.14);
}

.profile-stat-label {
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-muted);
  line-height: 1.1;
}

.profile-stat-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.15em;
  font-size: calc(var(--text-base) * 1.22);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.profile-stat--summary .profile-stat-value {
  font-size: clamp(1.18rem, 1.4vw, 1.34rem);
  line-height: 1.05;
}

.profile-stat--summary {
  min-height: 74px;
  padding: 13px 12px 12px;
  gap: 4px;
}

#profile-age-value {
  min-width: 2.2ch;
}

.profile-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
}

.profile-stat-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.profile-stat--units {
  grid-column: 1 / -1;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: auto;
  gap: 10px;
  padding: 15px 16px;
  border-color: color-mix(in srgb, var(--border-default) 24%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 68%, var(--surface-primary)) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 22px -28px rgba(15, 23, 42, 0.1);
}

.profile-stat--units.is-collapsed {
  gap: 0;
  padding-top: 13px;
  padding-bottom: 13px;
}

.profile-stat--bmi {
  grid-column: 1 / -1;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: auto;
  gap: 0;
  padding: 13px 16px;
  border-color: color-mix(in srgb, var(--border-default) 24%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 68%, var(--surface-primary)) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 22px -28px rgba(15, 23, 42, 0.1);
}

.profile-stat--bmi .weight-bmi-row {
  justify-content: flex-start;
}

.profile-stat--bmi .weight-bmi-main--profile {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
}

.profile-stat--bmi .bmi-value {
  font-size: clamp(1.08rem, 1.35vw, 1.18rem);
}

.profile-stat--bmi .bmi-empty {
  width: 100%;
  text-align: left;
}

.profile-stat-toggle {
  appearance: none;
  width: 100%;
  padding: 2px 4px;
  margin: -2px -4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.profile-stat-toggle:hover {
  background: color-mix(in srgb, var(--surface-primary) 68%, transparent);
}

.profile-stat-toggle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-500) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.profile-collapse-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.profile-collapse-chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0.78;
}

.profile-stat--units.is-expanded .profile-collapse-chevron::before,
body.app-page[data-page="profile"] .personal-data-card.is-edit .profile-collapse-chevron::before {
  transform: rotate(-135deg) translateY(-1px);
}

[data-theme="light"] .profile-stat--units,
html:not([data-theme="dark"]) .profile-stat--units {
  border-color: color-mix(in srgb, var(--border-default) 10%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.8) 0%,
      color-mix(in srgb, var(--surface-secondary) 58%, var(--surface-primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 18px 28px -30px rgba(76, 53, 22, 0.12);
}

[data-theme="light"] .profile-stat--bmi,
html:not([data-theme="dark"]) .profile-stat--bmi {
  border-color: color-mix(in srgb, var(--border-default) 10%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.8) 0%,
      color-mix(in srgb, var(--surface-secondary) 58%, var(--surface-primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 18px 28px -30px rgba(76, 53, 22, 0.12);
}

[data-theme="light"] .profile-unit-segmented,
html:not([data-theme="dark"]) .profile-unit-segmented {
  --segmented-track-border: color-mix(in srgb, var(--border-default) 12%, transparent);
  --segmented-track-bg:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.8) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, transparent) 100%);
  --segmented-track-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 14px 24px -30px rgba(76, 53, 22, 0.1);
}

.profile-stat-value--units {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

.profile-unit-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  align-items: end;
  margin-top: 10px;
}

.profile-unit-controls[hidden] {
  display: none !important;
}

.profile-unit-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-unit-group__label {
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.profile-unit-segmented {
  width: 100%;
  border-color: var(--segmented-track-border);
  background: var(--segmented-track-bg);
  box-shadow: var(--segmented-track-shadow);
}

.profile-unit-segmented .segmented-control__option {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
}

@media (max-width: 420px) {
  .profile-unit-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

.profile-personal-summary {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.profile-personal-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-personal-flow__item {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.profile-personal-flow__item--avatar {
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.profile-personal-flow__item--details {
  padding: var(--space-1);
}

[data-theme="dark"] body.app-page[data-page="profile"] .profile-stat-label,
[data-theme="dark"] body.app-page[data-page="profile"] .profile-unit-group__label,
[data-theme="dark"] body.app-page[data-page="profile"] .profile-stat-value--units,
html.dark-theme body.app-page[data-page="profile"] .profile-stat-label,
html.dark-theme body.app-page[data-page="profile"] .profile-unit-group__label,
html.dark-theme body.app-page[data-page="profile"] .profile-stat-value--units {
  color: color-mix(in srgb, var(--neutral-200) 44%, var(--text-tertiary));
}

.profile-user-card-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-size: calc(var(--text-base) * 1.08);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

body.app-page[data-page="profile"] .profile-personal-summary.personal-data-card {
  --personal-mode-duration: 260ms;
  --personal-mode-ease: cubic-bezier(0.22, 0.9, 0.32, 1);
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  overflow: visible;
}

body.app-page[data-page="profile"] .profile-personal-summary .personal-data-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

body.app-page[data-page="profile"] .profile-personal-summary .personal-data-card__header-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
}

body.app-page[data-page="profile"] .profile-personal-summary .personal-read-list {
  gap: 10px;
}

body.app-page[data-page="profile"] .profile-personal-summary .personal-read-row {
  background: color-mix(in srgb, var(--surface-secondary) 78%, transparent);
}

body.app-page[data-page="profile"] .profile-personal-summary .personal-edit-wrap {
  margin-top: var(--space-2);
}

body.app-page[data-page="profile"] .profile-personal-summary .personal-data-card__header #personal-cancel-btn {
  min-height: 32px;
}

body.app-page[data-page="profile"] .profile-avatar-section {
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}

body.app-page[data-page="profile"] .profile-quick-stats {
  margin-top: clamp(18px, 2.4vw, 24px);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle {
  padding: 2px;
  gap: 2px;
}

body.app-page[data-page="profile"] .weight-unit-current-label {
  font-size: 0.86em;
  font-weight: inherit;
  color: var(--text-primary);
  line-height: 1;
}

body.app-page[data-page="profile"] .weight-value-inline-switch {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  white-space: nowrap;
}

body.app-page[data-page="profile"] .weight-value-number {
  line-height: 1;
}

body.app-page[data-page="profile"] #profile-weight-value {
  white-space: nowrap;
}

/* Personal data card (profile) */
body.app-page[data-page="profile"] .personal-data-card #personal-data-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

body.app-page[data-page="profile"] .personal-data-card {
  --personal-mode-duration: 320ms;
  --personal-mode-fade-duration: 220ms;
  --personal-mode-ease: cubic-bezier(0.2, 0.84, 0.24, 1);
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__header {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__header-main {
  width: 100%;
  min-width: 0;
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__toggle {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--space-2);
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  border-radius: 12px;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__toggle::before {
  content: "";
  grid-column: 1;
  justify-self: start;
  width: 18px;
  height: 18px;
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-500) 32%, transparent);
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__toggle:hover .profile-collapse-chevron,
body.app-page[data-page="profile"] .personal-data-card .personal-data-card__toggle:focus-visible .profile-collapse-chevron,
body.app-page[data-page="profile"] .profile-stat-toggle:hover .profile-collapse-chevron,
body.app-page[data-page="profile"] .profile-stat-toggle:focus-visible .profile-collapse-chevron {
  color: var(--text-secondary);
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__toggle .profile-user-card-section-label {
  grid-column: 2;
  width: auto;
  justify-content: center;
  text-align: center;
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__toggle .profile-collapse-chevron {
  grid-column: 3;
  justify-self: end;
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__header #personal-cancel-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  min-height: 34px;
  padding: 0 var(--space-2);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 90%, transparent);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__header #personal-cancel-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--border-default));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 70%, var(--text-primary));
}

body.app-page[data-page="profile"] .personal-data-card .personal-data-card__header #personal-cancel-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 56%, white);
  outline-offset: 2px;
}

body.app-page[data-page="profile"] .personal-data-card .app-card-body {
  position: relative;
  overflow: visible;
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-wrap {
  overflow: hidden;
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
  will-change: max-height, opacity, transform;
  transition:
    max-height var(--personal-mode-duration) var(--personal-mode-ease),
    opacity var(--personal-mode-fade-duration) ease,
    transform var(--personal-mode-duration) var(--personal-mode-ease),
    filter var(--personal-mode-fade-duration) ease,
    visibility 0s linear 0s;
}

body.app-page[data-page="profile"] .personal-data-card .personal-edit-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  filter: blur(1.2px);
  visibility: hidden;
  pointer-events: none;
  margin-top: 0;
  will-change: max-height, opacity, transform;
  transition:
    max-height var(--personal-mode-duration) var(--personal-mode-ease),
    opacity var(--personal-mode-fade-duration) ease,
    transform var(--personal-mode-duration) var(--personal-mode-ease),
    filter var(--personal-mode-fade-duration) ease,
    margin-top var(--personal-mode-duration) var(--personal-mode-ease),
    visibility 0s linear var(--personal-mode-duration);
}

body.app-page[data-page="profile"] .personal-data-card.personal-mode-no-anim .personal-read-wrap,
body.app-page[data-page="profile"] .personal-data-card.personal-mode-no-anim .personal-edit-wrap {
  transition: none !important;
}

body.app-page[data-page="profile"] .personal-data-card[data-mode="edit"] .personal-edit-wrap {
  max-height: 1280px;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
  margin-top: var(--space-2);
  padding: 0;
  transition:
    max-height var(--personal-mode-duration) var(--personal-mode-ease),
    opacity var(--personal-mode-fade-duration) ease,
    transform var(--personal-mode-duration) var(--personal-mode-ease),
    filter var(--personal-mode-fade-duration) ease,
    margin-top var(--personal-mode-duration) var(--personal-mode-ease),
    visibility 0s linear 0s;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--birth,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--sex,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--height {
  position: relative;
  z-index: 0;
}

body.app-page[data-page="profile"] .personal-data-card[data-mode="edit"] .personal-read-wrap {
  max-height: 0;
  opacity: 0;
  transform: translateY(6px) scale(0.99);
  filter: blur(1px);
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height var(--personal-mode-duration) var(--personal-mode-ease),
    opacity var(--personal-mode-fade-duration) ease,
    transform var(--personal-mode-duration) var(--personal-mode-ease),
    filter var(--personal-mode-fade-duration) ease,
    visibility 0s linear var(--personal-mode-duration);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-list {
  display: grid;
  gap: 8px;
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  position: relative;
  padding: var(--space-2) calc(var(--space-3) + 14px) var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 90%, transparent);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row--static {
  cursor: default;
  padding-right: var(--space-3);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-value-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  min-width: 0;
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row::after {
  content: "›";
  position: absolute;
  right: var(--space-2-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row--static::after {
  content: none;
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row:hover {
  border-color: color-mix(in srgb, var(--accent-500) 34%, var(--border-default));
  background: color-mix(in srgb, var(--surface-secondary) 80%, var(--surface-primary));
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row--static:hover {
  border-color: var(--border-subtle);
  background: color-mix(in srgb, var(--surface-secondary) 90%, transparent);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row:hover::after,
body.app-page[data-page="profile"] .personal-data-card .personal-read-row:focus-visible::after {
  opacity: 0.88;
  transform: translateY(-50%) translateX(1px);
  color: var(--text-secondary);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row:active {
  transform: scale(0.995);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 72%, white);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-500) 20%, transparent);
}

[data-theme="light"] .personal-data-card .personal-read-row,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card .personal-read-row {
  border-color: color-mix(in srgb, var(--border-default) 18%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.86) 0%,
      color-mix(in srgb, var(--surface-secondary) 70%, var(--surface-primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 14px 24px -30px rgba(76, 53, 22, 0.12);
}

[data-theme="light"] .personal-data-card .personal-read-row:hover,
[data-theme="light"] .personal-data-card .personal-read-row:focus-visible,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card .personal-read-row:hover,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card .personal-read-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 14%, var(--border-default));
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      color-mix(in srgb, var(--accent-bg) 10%, var(--surface-secondary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 18px 28px -30px rgba(76, 53, 22, 0.14);
}

[data-theme="light"] .personal-data-card .personal-read-row--static:hover,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card .personal-read-row--static:hover {
  border-color: color-mix(in srgb, var(--border-default) 26%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.84) 0%,
      color-mix(in srgb, var(--surface-secondary) 78%, var(--surface-primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 16px 26px -34px rgba(76, 53, 22, 0.14);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-meta {
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--text-muted);
  text-align: right;
}

body.app-page[data-page="profile"] .personal-data-card .personal-read-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--text-primary);
  text-align: right;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group {
  --personal-form-group-bg: color-mix(in srgb, var(--surface-secondary) 72%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin: 0;
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 66%, transparent);
  border-radius: var(--radius-lg);
  background: var(--personal-form-group-bg);
}

[data-theme="light"] .personal-data-card #personal-data-form .form-group,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group {
  --personal-form-group-bg: linear-gradient(180deg,
    rgba(255, 255, 255, 0.68) 0%,
    color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--border-subtle) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 14px 24px -32px rgba(76, 53, 22, 0.12);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-label {
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-input {
  min-height: 46px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--border-subtle) 68%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
  box-shadow: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-input:focus,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-input:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 38%, var(--border-default));
  box-shadow: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-field-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-sex-picker,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-birth-picker,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-step-btn,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-presets {
  display: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-birth-picker {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-birth-picker:focus-within {
  border-color: transparent;
  box-shadow: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-birth-part {
  min-width: 0;
  border-color: color-mix(in srgb, var(--border-subtle) 50%, transparent);
  background-color: color-mix(in srgb, var(--surface-primary) 84%, transparent);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-birth-native {
  display: block;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-sex-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 62%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 90%, transparent);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="light"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-sex-picker,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-sex-picker {
  border-color: color-mix(in srgb, var(--border-subtle) 34%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.74) 0%,
      color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 22px -30px rgba(76, 53, 22, 0.12);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-sex-picker:focus-within {
  border-color: color-mix(in srgb, var(--accent-500) 34%, var(--border-default));
  box-shadow: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-sex-native {
  display: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-sex-option {
  appearance: none;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-sex-option.is-active {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent-bg) 48%, transparent);
  color: var(--text-accent);
  box-shadow: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-input-wrap {
  display: grid;
  grid-template-columns: 0 1fr 0;
  gap: var(--space-2);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-header .form-label {
  margin: 0;
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle {
  flex: 0 0 auto;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle .weight-unit-chip {
  min-width: 42px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-imperial-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-imperial-wrap.hidden {
  display: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--height[data-height-unit="cm"] .personal-height-imperial-wrap {
  display: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--height[data-height-unit="ft_in"] .personal-height-input-wrap,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--height[data-height-unit="ft_in"] .personal-height-presets {
  display: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form #height,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form #height-ft,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form #height-in {
  text-align: center;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-height-input-wrap {
  grid-template-columns: 48px 1fr 48px;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 84%, transparent);
  color: var(--text-secondary);
  font-size: calc(var(--text-lg) * 1.08);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-height-presets {
  display: block;
  position: relative;
  margin-top: var(--space-1);
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-height-presets::before,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-height-presets::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
  z-index: 2;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-height-presets::before {
  left: 0;
  background: linear-gradient(90deg, var(--personal-form-group-bg) 30%, transparent 100%);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-height-presets::after {
  right: 0;
  background: linear-gradient(270deg, var(--personal-form-group-bg) 30%, transparent 100%);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-presets-rail {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-presets-rail::-webkit-scrollbar {
  display: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-preset {
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 36px;
  padding: 0 var(--space-2-5);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 62%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 80%, transparent);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
  scroll-snap-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-preset.is-active {
  border-color: transparent;
  color: var(--text-accent);
  background: color-mix(in srgb, var(--accent-bg) 46%, transparent);
  box-shadow: none;
  transform: none;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-step-btn:active,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-preset:active,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-sex-option:active {
  transform: scale(0.97);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-birth-part:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-sex-option:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-preset:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-step-btn:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form #height-ft:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form #height-in:focus-visible,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form #height:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent-500) 42%, var(--border-default));
  outline-offset: 1px;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-control--pulse {
  animation: personal-control-pulse 220ms ease-out;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save {
  width: min(260px, 100%);
  min-width: 180px;
  flex: 0 0 auto;
  max-width: 260px;
  margin-inline: auto;
  min-height: 44px;
  border-radius: 14px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  background: color-mix(in srgb, var(--success) 14%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 82%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border-default));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--success) 14%, transparent);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.02);
  background: color-mix(in srgb, var(--success) 22%, var(--surface-primary));
  color: #ffffff;
  border-color: color-mix(in srgb, var(--success) 62%, var(--border-default));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--success) 20%, transparent);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.98);
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--success) 72%, white);
  outline-offset: 2px;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save__spinner,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save__icon {
  display: none;
  flex: 0 0 auto;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save__spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, #ffffff 85%, transparent);
  border-top-color: transparent;
  animation: personal-btn-spin 0.8s linear infinite;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save[data-state="loading"] .btn-save__spinner {
  display: inline-block;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save[data-state="success"] {
  background: color-mix(in srgb, var(--success) 86%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--success) 88%, var(--surface-primary));
  color: #ffffff;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save[data-state="success"] .btn-save__icon {
  display: inline-block;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save[data-state="error"] {
  background: color-mix(in srgb, var(--danger) 82%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 86%, var(--surface-primary));
  color: #fff;
}

body.app-page[data-page="profile"] .personal-data-card .personal-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

body.app-page[data-page="profile"] .personal-data-card .personal-feedback-live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.app-page[data-page="profile"] .personal-data-card .notice-toast {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-primary) 88%, var(--surface-secondary));
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

body.app-page[data-page="profile"] .personal-data-card .notice-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.app-page[data-page="profile"] .personal-data-card .notice-toast--success {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border-default));
  background: color-mix(in srgb, var(--success) 16%, var(--surface-primary));
}

body.app-page[data-page="profile"] .personal-data-card .notice-toast--error {
  border-color: color-mix(in srgb, var(--danger) 44%, var(--border-default));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-primary));
}

body.app-page[data-page="profile"] .personal-data-card .notice-toast--warning {
  border-color: color-mix(in srgb, var(--warning) 46%, var(--border-default));
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-primary));
}

/* Keep sex/height groups visually calm: no container glow/flood on focus/active. */
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--sex:focus-within,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--height:focus-within,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--sex.personal-control--pulse,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group--height.personal-control--pulse {
  border-color: var(--border-subtle);
  background: var(--personal-form-group-bg);
  box-shadow: none;
  transform: none;
}

@keyframes personal-control-pulse {
  0% {
    transform: scale(0.992);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-500) 0%, transparent);
  }

  60% {
    transform: scale(1.005);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 16%, transparent);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-500) 0%, transparent);
  }
}

@keyframes personal-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced #height {
  -moz-appearance: textfield;
}

body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced #height::-webkit-outer-spin-button,
body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced #height::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (min-width: 768px) {
  body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-birth-picker {
    display: grid;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-birth-native {
    display: none;
  }

  body.app-page[data-page="profile"] .personal-data-card .app-card-header {
    padding: var(--space-4) var(--space-5);
  }

  body.app-page[data-page="profile"] .personal-data-card .app-card-body {
    padding: var(--space-4) var(--space-5);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group {
    padding: var(--space-2-5);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-input {
    min-height: 44px;
    font-size: var(--text-base);
  }

}

@media (max-width: 767px) {
  body.app-page[data-page="profile"] .personal-data-card {
    border-radius: var(--radius-lg);
  }

  body.app-page[data-page="profile"] .personal-data-card .app-card-header {
    padding: var(--space-4);
  }

  body.app-page[data-page="profile"] .personal-data-card .app-card-body {
    padding: var(--space-4);
  }

  body.app-page[data-page="profile"] .personal-data-card .personal-read-row {
    padding: var(--space-2) calc(var(--space-2-5) + 12px) var(--space-2) var(--space-2-5);
  }

  body.app-page[data-page="profile"] .personal-data-card .app-card-title {
    font-size: calc(var(--text-xl) * 1.04);
    line-height: 1.2;
  }

  body.app-page[data-page="profile"] .personal-data-card .app-card-subtitle {
    font-size: var(--text-base);
    margin-top: var(--space-1);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form {
    gap: var(--space-2-5);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-group {
    padding: var(--space-2);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-input {
    min-height: 50px;
    font-size: 16px;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-birth-picker {
    display: none;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-birth-native {
    display: block;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-actions {
    margin-top: var(--space-1);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .form-actions .btn {
    min-height: 46px;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save {
    width: min(260px, 100%);
    min-width: 180px;
    flex: 0 0 auto;
    max-width: 260px;
    margin-inline: auto;
  }

  body.app-page[data-page="profile"] .personal-data-card .personal-data-card__header #personal-cancel-btn {
    min-height: 32px;
    padding-inline: var(--space-1-5);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form.personal-data-form--enhanced .personal-height-input-wrap {
    grid-template-columns: 44px 1fr 44px;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-unit-toggle {
    align-self: flex-start;
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-step-btn {
    font-size: var(--text-base);
  }

  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-preset {
    min-width: 56px;
  }

}

@media (prefers-reduced-motion: reduce) {
  body.app-page[data-page="profile"] .personal-data-card .personal-read-wrap,
  body.app-page[data-page="profile"] .personal-data-card .personal-edit-wrap,
  body.app-page[data-page="profile"] .personal-data-card .notice-toast,
  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .btn-save,
  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-height-preset,
  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-sex-option,
  body.app-page[data-page="profile"] .personal-data-card #personal-data-form .personal-step-btn {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Form stack layout */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Form row: two fields side by side */
.form-row {
  display: flex;
  gap: var(--space-3);
}

.form-row > .form-group {
  flex: 1;
  min-width: 0;
}

@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
  }
}

/* goal-start-info: bigger, centered, fog-ready */
.goal-start-info-display {
  font-size: var(--text-sm);
  text-align: center;
  color: var(--text-secondary);
  min-height: 1.6em;
  margin-bottom: var(--space-1);
  display: block;
}

.weight-goal-start-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-default));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 88%, var(--accent) 5%);
}

.weight-goal-start-card.is-empty {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border-default));
  background: color-mix(in srgb, var(--surface-secondary) 88%, var(--warning) 6%);
}

.weight-goal-start-card__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.weight-goal-start-card__eyebrow,
.weight-goal-start-card__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.weight-goal-start-card__value {
  display: block;
  color: var(--text-primary);
  font-size: clamp(1.7rem, 3.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0;
}

.weight-goal-start-card__month {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.weight-goal-start-card__control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.weight-goal-start-card__select {
  width: 100%;
}

.weight-goal-start-card__hint {
  grid-column: 1 / -1;
  margin: 0;
  text-align: left;
}

.goal-start-info-display .goal-start-weight-value {
  font-weight: var(--font-semibold);
  color: var(--accent);
}

/* Per-letter fog reveal (same engine as no-active-goal-text) */
.goal-start-info-display.is-revealing .fog-letter.fog-letter--animate {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(5px) scale(0.98);
  animation: no-active-fog-letter 580ms cubic-bezier(0.18, 0.68, 0.2, 1) forwards;
}

.goal-start-info-display .fog-space {
  display: inline-block;
  min-width: 0.33em;
}

.goal-start-info-display.is-revealing .goal-start-weight-value {
  display: inline-block;
  opacity: 0;
  animation: goalStartWeightReveal 480ms ease forwards;
}

@keyframes goalStartWeightReveal {
  from { opacity: 0; filter: blur(4px); transform: scale(0.96); }
  to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .goal-start-info-display.is-revealing .fog-letter.fog-letter--animate,
  .goal-start-info-display.is-revealing .goal-start-weight-value {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Extra spacing when locked alert is visible above goal-start-info */
#weight-goal-form-locked:not(.hidden) ~ #weight-goal-form .goal-start-info-display {
  margin-top: var(--space-2);
}

/* Days remaining hint below date trigger */
.weight-goal-date-days-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  text-align: center;
}

/* Weight goal summary improvements */
.weight-goal-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#active-goal-card #weight-goal-summary:not(.weight-goal-summary--no-active) {
  flex: 1 1 auto;
  justify-content: space-between;
  min-height: 100%;
}

#active-goal-card .weight-goal-primary-row {
  transition: opacity 280ms ease, transform 280ms ease, max-height 280ms ease, margin 280ms ease, padding 280ms ease, border-color 280ms ease;
}

#active-goal-card .weight-kpi-row {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

#active-goal-card #goal-status-footer {
  padding-top: var(--space-2);
  padding-bottom: 0;
}

#active-goal-card .app-card-body {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-3);
}

#active-goal-card .weight-time-row {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

#active-goal-card .weight-trend-section {
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
}

#active-goal-card .weight-trend-chart {
  min-height: 206px;
  padding: 7px 8px 8px 4px;
}

#active-goal-card .weight-trend-svg {
  height: clamp(184px, 23vw, 232px);
}

#active-goal-card.goal-completion-staging .weight-goal-primary-row {
  opacity: 0.22;
  transform: translateY(-5px);
}

#active-goal-card .weight-goal-summary--no-active .weight-goal-primary-row {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
}

#active-goal-card[data-profile-primary-state="empty"] .app-card-body {
  justify-content: center;
}

#active-goal-card[data-profile-primary-state="empty"] #no-active-goal {
  flex: 1 1 auto;
  min-height: clamp(180px, 28vh, 236px);
}

#active-goal-card #no-active-goal {
  position: relative;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-3) var(--space-4);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 320ms ease, transform 320ms ease;
}

#active-goal-card #no-active-goal .empty-state-description {
  margin: 0;
  color: var(--text-tertiary);
  transition: opacity 320ms ease, transform 320ms ease, filter 320ms ease;
  text-wrap: balance;
}

#active-goal-card #no-active-goal #goal-flash-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#active-goal-card #no-active-goal.is-flash-active .empty-state-description {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(7px);
}

#active-goal-card #no-active-goal-text .fog-letter {
  display: inline-block;
}

#active-goal-card #no-active-goal-text .fog-word {
  display: inline-flex;
  white-space: nowrap;
}

#active-goal-card #no-active-goal-text.is-revealing .fog-letter.fog-letter--animate {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(6px) scale(0.98);
  text-shadow: 0 0 14px color-mix(in srgb, var(--text-tertiary) 30%, transparent);
  animation: no-active-fog-letter 640ms cubic-bezier(0.18, 0.68, 0.2, 1) forwards;
}

#active-goal-card #no-active-goal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#active-goal-card.goal-transition-to-empty #no-active-goal.is-visible {
  animation: no-active-goal-enter 620ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

@keyframes no-active-goal-enter {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1.004);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes no-active-fog-letter {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(6px) scale(0.98);
  }
  64% {
    opacity: 1;
    filter: blur(1px);
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 transparent;
  }
}

/* Goal history list */
.weight-goal-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.goal-history-item {
  --goal-history-accent: var(--accent-500);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-secondary) 99.2%, var(--goal-history-accent));
  border: 1px solid color-mix(in srgb, var(--goal-history-accent) 10%, var(--border-subtle));
  border-radius: var(--radius-lg);
  gap: var(--space-2-5);
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.goal-history-item--lose {
  --goal-history-accent: var(--danger);
}

.goal-history-item--gain {
  --goal-history-accent: #e5a524;
}

.goal-history-item--maintain {
  --goal-history-accent: #53a9ce;
}

.goal-history-item.is-active {
  border-color: color-mix(in srgb, var(--goal-history-accent) 28%, var(--border-default));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--goal-history-accent) 10%, transparent);
  animation: goal-history-active-border 2.2s ease-in-out infinite;
}

@keyframes goal-history-active-border {
  0%, 100% {
    border-color: color-mix(in srgb, var(--goal-history-accent) 24%, var(--border-default));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--goal-history-accent) 9%, transparent);
  }

  50% {
    border-color: color-mix(in srgb, var(--goal-history-accent) 32%, var(--border-default));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--goal-history-accent) 13%, transparent);
  }
}

.goal-history-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}

.goal-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.goal-history-title {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.goal-history-dates {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  white-space: normal;
}

.goal-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.goal-history-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-primary) 86%, transparent);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.goal-history-result.completed {
  color: color-mix(in srgb, var(--success) 64%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 22%, var(--border-default));
  background: color-mix(in srgb, var(--success) 6%, var(--surface-primary));
}

.goal-history-result.active {
  color: color-mix(in srgb, var(--success) 68%, var(--text-primary));
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.goal-history-result.abandoned {
  color: color-mix(in srgb, var(--warning) 44%, var(--text-secondary));
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-weight: var(--font-medium);
}

.goal-history-result.failed {
  color: var(--danger);
}

.goal-history-actions .btn-history-reactivate {
  background: color-mix(in srgb, var(--success) 4%, transparent);
  color: color-mix(in srgb, var(--success) 68%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border-default));
}

.goal-history-actions .btn-history-reactivate:hover {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 42%, var(--border-default));
}

/* Softer delete button for goal history */
.goal-history-actions .btn-danger {
  background: transparent;
  color: color-mix(in srgb, var(--danger) 70%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--border-default));
  box-shadow: none;
}

.goal-history-actions .btn-danger:hover,
.goal-history-actions .btn-danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border-default));
}

/* Point 8: Goal type segmented control — reuses mission-deadline-segmented base */
:root {
  --goal-type-lose: #53a9ce;
  --goal-type-gain: #e5a524;
  --goal-type-maintain: #2aa198;
}

/* Color switching via data attribute */
.goal-type-segmented[data-active-goal-type="lose"]  { --goal-type-color: var(--goal-type-lose); }
.goal-type-segmented[data-active-goal-type="gain"]  { --goal-type-color: var(--goal-type-gain); }
.goal-type-segmented[data-active-goal-type="maintain"] { --goal-type-color: var(--goal-type-maintain); }

/* Override only the active state to use goal-type-color */
.goal-type-segmented .mission-segment-btn.is-active {
  color: color-mix(in srgb, var(--goal-type-color, var(--accent)) 70%, var(--text-primary));
  border-color: color-mix(in srgb, var(--goal-type-color, var(--accent)) 45%, var(--border-default));
  background: color-mix(in srgb, var(--goal-type-color, var(--accent)) 14%, var(--surface-primary));
}

/* Point 9: Goal modal 2-column split row */
.goal-modal-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .goal-modal-row--split {
    grid-template-columns: 1fr;
  }

  .weight-goal-start-card {
    grid-template-columns: 1fr;
  }

  .weight-goal-start-card__hint {
    text-align: left;
  }
}

/* Point 11: Goal type color on active-goal-card KPI diff */
#active-goal-card[data-goal-type="lose"]  { --goal-type-color: var(--goal-type-lose); }
#active-goal-card[data-goal-type="gain"]  { --goal-type-color: var(--goal-type-gain); }
#active-goal-card[data-goal-type="maintain"] { --goal-type-color: var(--goal-type-maintain); }

#goal-diff-value.accent {
  color: var(--goal-type-color, var(--accent));
}

/* Point 9: Goal history — colored type label + status-based backgrounds */
.goal-history-type {
  font-weight: var(--font-semibold);
}

.goal-history-type--lose { color: var(--goal-type-lose); }
.goal-history-type--gain { color: var(--goal-type-gain); }
.goal-history-type--maintain { color: var(--goal-type-maintain); }

.goal-history-item--status-active {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-default));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-secondary));
}

.goal-history-item--status-abandoned {
  opacity: 0.72;
  background: color-mix(in srgb, var(--surface-secondary) 95%, #000);
}

.goal-history-item--status-achieved {
  background: color-mix(in srgb, var(--success) 5%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--success) 18%, var(--border-subtle));
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-tertiary);
}

.empty-state-description {
  margin: 0;
}

/* ============================================
   HABIT LIST
   ============================================ */

.habit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* === HABIT ITEM - Refined Card === */
.habit-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--habit-cat-color, var(--neutral-400));
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  transition:
    box-shadow 200ms ease-out,
    border-color 200ms ease-out,
    transform 200ms ease-out;
  min-width: 0;
}

.habit-history-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.habit-history-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.habit-history-badge-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.habit-history-badge-label {
  white-space: nowrap;
}

.habit-history-badge:hover {
  background: color-mix(in srgb, var(--surface-secondary) 68%, var(--accent-bg));
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.habit-meta-row .habit-history-badge {
  margin-left: 0;
}

.habit-item:hover {
  border-color: var(--border-default);
  border-left-color: var(--habit-cat-color, var(--neutral-400));
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Inactive state */
.habit-item.is-inactive {
  opacity: 0.7;
  background: var(--surface-secondary);
}

.habit-item.is-inactive:hover {
  opacity: 0.85;
}

.habit-item.is-paused-today {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--accent-300)) 26%, var(--border-default));
  background: color-mix(in srgb, var(--surface-primary) 97%, var(--habit-pause-reason-color, var(--accent-300)));
}

.habit-item.is-paused-today:hover {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--accent-400)) 34%, var(--border-default));
  background: color-mix(in srgb, var(--surface-primary) 95%, var(--habit-pause-reason-color, var(--accent-300)));
}

.habit-item.is-scheduled-start,
.habit-item.is-future-start,
.habit-item.habit-scheduled {
  --scheduled-bg: color-mix(in srgb, var(--surface-secondary) 90%, var(--surface-primary));
  --scheduled-border: color-mix(in srgb, var(--border-subtle) 92%, var(--surface-secondary));
  --scheduled-pill-bg: color-mix(in srgb, var(--surface-secondary) 94%, var(--surface-primary));
  --scheduled-pill-border: color-mix(in srgb, var(--border-subtle) 88%, transparent);
  --scheduled-pill-text: color-mix(in srgb, var(--text-secondary) 90%, var(--text-tertiary));
  background-color: var(--scheduled-bg);
  background-image: linear-gradient(135deg, rgba(99, 113, 137, 0.045), rgba(99, 113, 137, 0.02));
  border-color: var(--scheduled-border);
  border-left-color: var(--habit-cat-color, var(--neutral-400));
  border-style: solid;
  opacity: 0.86;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    inset 0 0 0 1px rgba(0, 0, 0, 0.015);
}

.habit-item.is-scheduled-start .habit-name-text,
.habit-item.is-future-start .habit-name-text,
.habit-item.habit-scheduled .habit-name-text {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary));
}

.habit-item.is-scheduled-start .habit-goal-desc,
.habit-item.is-future-start .habit-goal-desc,
.habit-item.habit-scheduled .habit-goal-desc,
.habit-item.is-scheduled-start .habit-category-badge,
.habit-item.is-future-start .habit-category-badge,
.habit-item.habit-scheduled .habit-category-badge,
.habit-item.is-scheduled-start .habit-history-badge,
.habit-item.is-future-start .habit-history-badge,
.habit-item.habit-scheduled .habit-history-badge {
  filter: saturate(0.74);
  opacity: 0.92;
}

.habit-item.is-scheduled-start .habit-icon,
.habit-item.is-future-start .habit-icon,
.habit-item.habit-scheduled .habit-icon {
  filter: saturate(0.72);
  opacity: 0.9;
}

.habit-item.is-scheduled-start:hover,
.habit-item.is-future-start:hover,
.habit-item.habit-scheduled:hover {
  background-color: color-mix(in srgb, var(--scheduled-bg) 84%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--scheduled-border) 80%, var(--border-default));
  border-left-color: var(--habit-cat-color, var(--neutral-400));
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.045),
    inset 0 0 0 1px rgba(0, 0, 0, 0.015);
}

/* Actions - clean spacing */
.habit-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--space-4);
}

.habit-actions--buttons,
.habit-actions--icons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.habit-actions--icons {
  display: none;
}

.habit-actions .btn {
  white-space: nowrap;
}

.habit-actions--buttons .btn {
  min-height: 40px;
}

.habit-actions--buttons .habit-btn-desktop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.habit-action-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.92;
  line-height: 1;
}

.habit-action-btn__icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Desktop buttons - visible on desktop, hidden on mobile */
.habit-btn-desktop {
  display: inline-flex;
}

.habit-btn-mobile {
  display: none;
}

/* Outline button for Disattiva/Riattiva - neutral */
.habit-actions .btn-outline {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
}

.habit-actions .btn-outline:hover {
  background: var(--surface-secondary);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.habit-actions .habit-btn-reactivate {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.habit-actions .habit-btn-reactivate:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.55);
  color: #15803d;
}

/* Danger button for Elimina - red with text */
.habit-actions .btn-danger {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.habit-actions .btn-danger:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.5);
  color: #b91c1c;
}

.habit-actions--buttons .btn {
  box-shadow: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.habit-actions--buttons .btn.btn-primary {
  border-color: color-mix(in srgb, var(--button-primary-bg, var(--accent-500)) 42%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--button-primary-bg, var(--accent-500)) 96%, #ffffff 4%) 0%,
      var(--button-primary-bg, var(--accent-500)) 100%);
  box-shadow:
    0 16px 24px -22px color-mix(in srgb, var(--button-primary-bg, var(--accent-500)) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.habit-actions--buttons .btn.btn-primary:hover:not(:disabled) {
  box-shadow:
    0 18px 28px -22px color-mix(in srgb, var(--button-primary-bg, var(--accent-500)) 68%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.habit-actions--buttons .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--button-primary-bg, var(--accent-500)) 24%, transparent),
    0 18px 28px -22px color-mix(in srgb, var(--button-primary-bg, var(--accent-500)) 62%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.habit-actions .btn-outline:not(.habit-btn-reactivate) {
  color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-tertiary));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-primary) 94%, var(--surface-secondary)) 0%,
      color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.habit-actions .btn-outline:not(.habit-btn-reactivate):hover:not(:disabled) {
  color: var(--text-primary);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-primary) 98%, var(--surface-secondary)) 0%,
      color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--border-strong) 92%, transparent);
  box-shadow:
    0 14px 22px -24px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.habit-actions .btn-outline:not(.habit-btn-reactivate):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--text-secondary) 14%, transparent),
    0 14px 22px -24px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.habit-actions .btn-danger {
  color: color-mix(in srgb, var(--danger) 84%, var(--text-primary));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-primary) 96%, rgba(220, 38, 38, 0.06)) 0%,
      color-mix(in srgb, var(--surface-secondary) 82%, rgba(220, 38, 38, 0.12)) 100%);
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border-default));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.habit-actions .btn-danger:hover:not(:disabled) {
  color: color-mix(in srgb, var(--danger) 96%, var(--text-primary));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-primary) 94%, rgba(220, 38, 38, 0.12)) 0%,
      color-mix(in srgb, var(--surface-secondary) 72%, rgba(220, 38, 38, 0.18)) 100%);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border-default));
  box-shadow:
    0 14px 22px -24px rgba(127, 29, 29, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.habit-actions .btn-danger:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent),
    0 14px 22px -24px rgba(127, 29, 29, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Mobile icon buttons */
.btn-icon-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.btn-icon-mobile svg {
  flex-shrink: 0;
}

.btn-icon-mobile:hover {
  transform: translateY(-1px);
}

.btn-icon-mobile:focus-visible {
  outline: none;
}

/* Edit icon - yellow/amber background */
.btn-icon-edit {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-100) 92%, #ffffff 8%), var(--accent-100));
  border-color: color-mix(in srgb, var(--accent-300) 54%, transparent);
  color: color-mix(in srgb, var(--accent-700) 86%, var(--text-primary));
}

.btn-icon-edit:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-100) 48%, #ffffff 52%), var(--accent-200));
  color: var(--accent-800);
  box-shadow:
    0 14px 20px -20px color-mix(in srgb, var(--accent-500) 68%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-icon-edit:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-500) 18%, transparent),
    0 14px 20px -20px color-mix(in srgb, var(--accent-500) 58%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Pause/Deactivate icon - gray background */
.btn-icon-pause {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 96%, var(--neutral-100)), color-mix(in srgb, var(--surface-secondary) 78%, var(--neutral-100)));
  border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-tertiary));
}

.btn-icon-pause:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 92%, var(--neutral-100)), color-mix(in srgb, var(--surface-secondary) 70%, var(--neutral-200)));
  color: var(--text-primary);
  box-shadow:
    0 14px 20px -20px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-icon-pause:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--text-secondary) 14%, transparent),
    0 14px 20px -20px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Activate icon - green background */
.btn-icon-activate {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.btn-icon-activate:hover {
  background: rgba(34, 197, 94, 0.25);
  color: #15803d;
}

/* Delete icon - red background */
.btn-icon-delete {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 94%, rgba(220, 38, 38, 0.08)), color-mix(in srgb, var(--surface-secondary) 82%, rgba(220, 38, 38, 0.12)));
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
}

.btn-icon-delete:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 92%, rgba(220, 38, 38, 0.14)), color-mix(in srgb, var(--surface-secondary) 72%, rgba(220, 38, 38, 0.2)));
  color: color-mix(in srgb, var(--danger) 96%, var(--text-primary));
  box-shadow:
    0 14px 20px -20px rgba(127, 29, 29, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-icon-delete:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent),
    0 14px 20px -20px rgba(127, 29, 29, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (max-width: 1180px) {
  .habit-actions--buttons {
    display: none !important;
  }

  .habit-actions--icons {
    display: grid !important;
    grid-template-columns: 42px 34px;
    grid-template-rows: repeat(2, 30px);
    column-gap: 8px;
    row-gap: 4px;
    justify-content: end;
    align-content: start;
  }

  .habit-btn-desktop {
    display: none !important;
  }

  .habit-btn-mobile {
    display: flex !important;
  }

  .habit-actions {
    gap: var(--space-1);
    padding-left: var(--space-2);
    align-self: flex-start;
  }

  .habit-actions--icons .btn-icon-mobile {
    width: 34px;
    height: 30px;
    min-width: 34px;
    min-height: 30px;
  }

  .habit-actions--icons .btn-icon-edit {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    align-self: start;
    margin-top: 11px;
  }

  .habit-actions--icons .btn-icon-pause,
  .habit-actions--icons .btn-icon-activate {
    grid-column: 2;
    grid-row: 1;
  }

  .habit-actions--icons .btn-icon-delete {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 1360px) {
  body.layout-sidebar .habit-actions--buttons {
    display: none !important;
  }

  body.layout-sidebar .habit-actions--icons {
    display: grid !important;
    grid-template-columns: 42px 34px;
    grid-template-rows: repeat(2, 30px);
    column-gap: 8px;
    row-gap: 4px;
    justify-content: end;
    align-content: start;
  }

  body.layout-sidebar .habit-btn-desktop {
    display: none !important;
  }

  body.layout-sidebar .habit-btn-mobile {
    display: flex !important;
  }

  body.layout-sidebar .habit-actions {
    gap: var(--space-1);
    padding-left: var(--space-2);
    align-self: flex-start;
  }

  body.layout-sidebar .habit-actions--icons .btn-icon-mobile {
    width: 34px;
    height: 30px;
    min-width: 34px;
    min-height: 30px;
  }

  body.layout-sidebar .habit-actions--icons .btn-icon-edit {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    align-self: start;
    margin-top: 11px;
  }

  body.layout-sidebar .habit-actions--icons .btn-icon-pause,
  body.layout-sidebar .habit-actions--icons .btn-icon-activate {
    grid-column: 2;
    grid-row: 1;
  }

  body.layout-sidebar .habit-actions--icons .btn-icon-delete {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Mobile: show icons, hide text buttons */
@media (max-width: 768px) {
  .habit-item {
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-4) 12px;
  }

  .habit-item .habit-header,
  .habit-title-row,
  .habit-meta-row,
  .habit-meta-main {
    min-width: 0;
  }

  .habit-item .habit-header {
    gap: var(--space-1);
    margin-bottom: 2px;
  }

  .habit-title-row {
    row-gap: 4px;
  }

  .habit-name-text {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .habit-actions--buttons {
    display: none !important;
  }

  .habit-actions--icons {
    display: grid !important;
    grid-template-columns: 42px 34px;
    grid-template-rows: repeat(2, 30px);
    column-gap: 8px;
    row-gap: 4px;
    justify-content: end;
    align-content: start;
  }

  .habit-btn-desktop {
    display: none !important;
  }

  .habit-btn-mobile {
    display: flex !important;
  }

  .habit-actions {
    gap: var(--space-1);
    padding-left: var(--space-1);
    align-self: flex-start;
  }

  .habit-history-badge {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    justify-content: center;
    gap: 0;
  }

  .habit-history-badge-label {
    display: none;
  }

  .habit-actions--icons .btn-icon-mobile {
    width: 34px;
    height: 30px;
    min-width: 34px;
    min-height: 30px;
  }

  .habit-actions--icons .btn-icon-mobile svg {
    width: 15px;
    height: 15px;
  }

  .habit-actions--icons .btn-icon-edit {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    align-self: start;
    margin-top: 11px;
  }

  .habit-actions--icons .btn-icon-edit svg {
    width: 18px;
    height: 18px;
  }

  .habit-actions--icons .btn-icon-pause,
  .habit-actions--icons .btn-icon-activate {
    grid-column: 2;
    grid-row: 1;
  }

  .habit-actions--icons .btn-icon-delete {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .habit-item {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .habit-item:hover {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .habit-item.is-paused-today,
body.dark-theme .habit-item.is-paused-today {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, #fbbf24) 34%, rgba(255, 255, 255, 0.18));
  background: color-mix(in srgb, var(--surface-primary) 93%, var(--habit-pause-reason-color, #fbbf24));
}

[data-theme="dark"] .habit-item.is-paused-today:hover,
body.dark-theme .habit-item.is-paused-today:hover {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, #fbbf24) 40%, rgba(255, 255, 255, 0.2));
  background: color-mix(in srgb, var(--surface-primary) 90%, var(--habit-pause-reason-color, #fbbf24));
}

[data-theme="dark"] .habit-item.is-future-start,
body.dark-theme .habit-item.is-future-start,
[data-theme="dark"] .habit-item.is-scheduled-start,
body.dark-theme .habit-item.is-scheduled-start,
[data-theme="dark"] .habit-item.habit-scheduled,
body.dark-theme .habit-item.habit-scheduled {
  --scheduled-bg: color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary));
  --scheduled-border: rgba(255, 255, 255, 0.08);
  --scheduled-pill-bg: rgba(255, 255, 255, 0.05);
  --scheduled-pill-border: rgba(255, 255, 255, 0.1);
  --scheduled-pill-text: color-mix(in srgb, var(--text-secondary) 88%, transparent);
  background-color: var(--scheduled-bg);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-color: var(--scheduled-border);
  border-left-color: var(--habit-cat-color, var(--neutral-400));
  opacity: 0.82;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

[data-theme="dark"] .habit-item.is-scheduled-start .habit-name-text,
body.dark-theme .habit-item.is-scheduled-start .habit-name-text,
[data-theme="dark"] .habit-item.is-future-start .habit-name-text,
body.dark-theme .habit-item.is-future-start .habit-name-text,
[data-theme="dark"] .habit-item.habit-scheduled .habit-name-text,
body.dark-theme .habit-item.habit-scheduled .habit-name-text {
  color: color-mix(in srgb, var(--text-primary) 84%, var(--text-secondary));
}

[data-theme="dark"] .btn-icon-edit,
body.dark-theme .btn-icon-edit {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.24);
  color: var(--accent-400);
}

[data-theme="dark"] .btn-icon-edit:hover,
body.dark-theme .btn-icon-edit:hover {
  background: rgba(251, 191, 36, 0.25);
}

[data-theme="dark"] .btn-icon-pause,
body.dark-theme .btn-icon-pause {
  background: color-mix(in srgb, var(--surface-secondary) 86%, rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.76);
}

[data-theme="dark"] .btn-icon-pause:hover,
body.dark-theme .btn-icon-pause:hover {
  background: color-mix(in srgb, var(--surface-secondary) 74%, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .btn-icon-activate,
body.dark-theme .btn-icon-activate {
  background: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .habit-actions .habit-btn-reactivate,
body.dark-theme .habit-actions .habit-btn-reactivate {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: #22c55e;
}

[data-theme="dark"] .habit-actions .habit-btn-reactivate:hover,
body.dark-theme .habit-actions .habit-btn-reactivate:hover {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(34, 197, 94, 0.65);
  color: #4ade80;
}

[data-theme="dark"] .habit-item .badge-paused,
body.dark-theme .habit-item .badge-paused {
  color: color-mix(in srgb, var(--habit-pause-reason-color, #fbbf24) 62%, #ffffff);
  background: color-mix(in srgb, var(--habit-pause-reason-color, #fbbf24) 12%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, #fbbf24) 34%, rgba(255, 255, 255, 0.24));
}

[data-theme="dark"] .btn-icon-delete,
body.dark-theme .btn-icon-delete {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.24);
}

[data-theme="dark"] .habit-actions .btn-danger,
body.dark-theme .habit-actions .btn-danger {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.18));
  border-color: rgba(220, 38, 38, 0.32);
  color: color-mix(in srgb, #ffffff 12%, var(--danger));
}

[data-theme="dark"] .habit-actions .btn-danger:hover,
body.dark-theme .habit-actions .btn-danger:hover {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.24));
  border-color: rgba(220, 38, 38, 0.44);
}

[data-theme="dark"] .habit-actions .btn-outline:not(.habit-btn-reactivate),
body.dark-theme .habit-actions .btn-outline:not(.habit-btn-reactivate) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.76);
}

[data-theme="dark"] .habit-actions .btn-outline:not(.habit-btn-reactivate):hover,
body.dark-theme .habit-actions .btn-outline:not(.habit-btn-reactivate):hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.1));
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

[data-theme="dark"] .habit-actions--buttons .btn.btn-primary,
body.dark-theme .habit-actions--buttons .btn.btn-primary {
  box-shadow:
    0 18px 28px -24px color-mix(in srgb, var(--button-primary-bg, var(--accent-500)) 54%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .category-collapse-btn,
body.dark-theme .category-collapse-btn,
[data-theme="dark"] .habit-category-add-btn,
body.dark-theme .habit-category-add-btn {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .category-collapse-btn:hover,
body.dark-theme .category-collapse-btn:hover,
[data-theme="dark"] .habit-category-add-btn:hover,
body.dark-theme .habit-category-add-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

[data-theme="dark"] .habit-category-add-btn,
body.dark-theme .habit-category-add-btn {
  background: color-mix(in srgb, var(--cat-color, var(--accent-500)) 16%, rgba(255, 255, 255, 0.03));
  border-color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 26%, rgba(255, 255, 255, 0.12));
  color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 62%, #ffffff);
}

.habit-icon {
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
}

.habit-info {
  flex: 1;
  min-width: 0;
}

.habit-item .habit-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  min-width: 0;
}

.habit-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  flex-wrap: wrap;
}

.habit-item .habit-header .habit-icon {
  font-size: 1.25rem;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.habit-item .habit-goal-desc {
  font-size: var(--text-sm);
  color: var(--text-accent);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
}

.habit-start-row {
  margin-top: 2px;
}

.habit-start-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--scheduled-pill-border, color-mix(in srgb, var(--border-default) 88%, var(--surface-secondary)));
  background: var(--scheduled-pill-bg, color-mix(in srgb, var(--surface-secondary) 92%, var(--surface-primary)));
  color: var(--scheduled-pill-text, var(--text-secondary));
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habit-item.is-scheduled-start .habit-start-badge,
.habit-item.is-future-start .habit-start-badge,
.habit-item.habit-scheduled .habit-start-badge {
  background: var(--scheduled-pill-bg, color-mix(in srgb, var(--surface-secondary) 94%, var(--surface-primary)));
  border-color: var(--scheduled-pill-border, color-mix(in srgb, var(--border-subtle) 88%, transparent));
  color: var(--scheduled-pill-text, color-mix(in srgb, var(--text-secondary) 90%, var(--text-tertiary)));
}

[data-theme="dark"] .habit-start-badge,
body.dark-theme .habit-start-badge {
  background: var(--scheduled-pill-bg, rgba(255, 255, 255, 0.045));
  border-color: var(--scheduled-pill-border, rgba(255, 255, 255, 0.11));
  color: var(--scheduled-pill-text, var(--text-secondary));
}

.habit-item .habit-user-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}

.habit-item.is-inactive {
  opacity: 0.6;
  background: var(--surface-secondary);
}

.habit-item-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--text-tertiary);
  font-size: var(--text-base);
  text-align: center;
  background: var(--surface-primary);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-xl);
}

.habit-item .badge-inactive {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin-left: var(--space-2);
}

.habit-item .badge-paused {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: color-mix(in srgb, var(--habit-pause-reason-color, #f59e0b) 66%, var(--text-primary));
  background: color-mix(in srgb, var(--habit-pause-reason-color, #f59e0b) 10%, var(--surface-primary));
  border: 1px solid color-mix(in srgb, var(--habit-pause-reason-color, #f59e0b) 30%, var(--border-default));
}

.badge-paused__icon {
  font-size: 0.9rem;
  line-height: 1;
  flex: 0 0 auto;
}

.badge-paused__label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.habit-pause-note-row {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.habit-pause-note {
  color: color-mix(in srgb, var(--habit-pause-reason-color, var(--text-tertiary)) 44%, var(--text-tertiary));
  font-style: italic;
}

.habit-title-row .badge-inactive {
  margin-left: 0;
}

.habit-title-row .badge-paused {
  margin-left: 0;
}

.habit-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.habit-streak {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  background: var(--accent-bg);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-accent);
}


.drag-handle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-tertiary);
  padding: var(--space-1);
}

.drag-handle-wrapper:active {
  cursor: grabbing;
}

.habit-item .drag-handle {
  font-size: var(--text-lg);
  letter-spacing: -2px;
  user-select: none;
}

/* ============================================
   HABIT MODAL — Icon + Name Row
   ============================================ */

#habit-form.form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

#habit-form.form-grid > .habit-name-row,
#habit-form.form-grid > .habit-frequency-type-hint,
#habit-form.form-grid > #frequency-history-section {
  grid-column: 1 / -1;
}

#habit-form.form-grid > .form-group,
#habit-form.form-grid > .frequency-fields {
  margin-bottom: 0;
  min-width: 0;
}

#habit-form.form-grid > .habit-category-select-group {
  grid-column: 1 / 3;
}

#habit-form.form-grid > #habit-start-month-group {
  grid-column: 3 / 5;
}

#habit-form.form-grid > .habit-end-date-group {
  grid-column: 5 / 7;
}

#habit-form.form-grid > .habit-frequency-main-group {
  grid-column: 1 / 4;
}

#habit-form.form-grid > .habit-frequency-variant-group {
  grid-column: 4 / 7;
  align-self: start;
}

#habit-form.form-grid:not(.habit-form--create) > .habit-category-select-group {
  grid-column: 1 / 3;
}

@media (max-width: 1100px) and (min-width: 769px) {
  #habit-form.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #habit-form.form-grid > .habit-category-select-group {
    grid-column: 1 / -1;
  }

  #habit-form.form-grid > #habit-start-month-group {
    grid-column: 1;
  }

  #habit-form.form-grid > .habit-end-date-group {
    grid-column: 2;
  }

  #habit-form.form-grid > .habit-frequency-main-group {
    grid-column: 1;
  }

  #habit-form.form-grid > .habit-frequency-variant-group {
    grid-column: 2;
  }
}

.habit-name-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.habit-icon-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  flex-shrink: 0;
}

.habit-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border-default);
  background: var(--surface-secondary);
  cursor: pointer;
  font-size: 1.5rem;
  transition: border-color 200ms, background 200ms, transform 150ms;
}

.habit-icon-btn:hover {
  border-color: var(--accent-500);
  background: var(--accent-bg);
  transform: scale(1.06);
}

.habit-icon-btn.has-icon {
  border-style: solid;
  border-color: var(--accent-400);
  background: var(--accent-bg);
}

.habit-icon-btn__preview {
  line-height: 1;
}

.habit-name-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.habit-name-input-wrap {
  position: relative;
  width: 100%;
}

.habit-name-input-wrap .form-input {
  width: 100%;
  position: relative;
  z-index: 1;
  background: transparent;
}

.habit-name-counter {
  display: block;
  align-self: flex-end;
  min-height: 1rem;
  margin-top: calc(var(--space-1) * -1);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.2;
  text-align: right;
}

.habit-name-counter.is-at-limit {
  color: color-mix(in srgb, var(--warning) 74%, var(--text-secondary));
}

.habit-name-counter.is-over-limit {
  color: var(--danger);
}

.habit-category-select-group {
  margin-top: var(--space-4);
}

#habit-start-month-group {
  margin-top: var(--space-4);
}

.habit-end-date-group {
  margin-top: var(--space-4);
}

#habit-start-month-hint,
#habit-end-date-hint {
  display: none;
}

.habit-category-select-group .form-input {
  width: 100%;
  min-height: 68px;
  padding: var(--space-2) calc(var(--space-3) + 26px) var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: 1.06rem;
  font-weight: var(--font-semibold);
  line-height: 1.25;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-category-select-group .form-input:hover {
  border-color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-bg) 30%, var(--surface-primary));
}

.habit-category-select-group .form-input:focus {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: var(--focus-ring);
}

.habit-category-native-select {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: -1px;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.habit-category-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 68px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: 1.06rem;
  font-weight: var(--font-semibold);
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-category-trigger:hover {
  border-color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-bg) 30%, var(--surface-primary));
}

.habit-category-trigger:focus-visible,
.habit-category-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: var(--focus-ring);
}

.habit-category-trigger__content,
.habit-category-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.habit-category-color-bar {
  display: inline-block;
  width: 4px;
  height: 26px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: var(--habit-category-color, #6B7280);
}

.habit-category-trigger__icon,
.habit-category-choice__icon {
  flex: 0 0 auto;
  line-height: 1;
}

.habit-category-trigger__label,
.habit-category-choice__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-category-trigger__chevron {
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.habit-category-popover {
  width: min(320px, calc(100vw - 24px));
  padding: 10px;
  overflow: visible;
}

.habit-category-popover__header {
  display: none;
}

.habit-category-options {
  display: grid;
  gap: 6px;
  max-height: min(360px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.habit-category-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 9px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.habit-category-option:hover,
.habit-category-option:focus-visible,
.habit-category-option.is-selected {
  outline: none;
  border-color: color-mix(in srgb, var(--habit-category-color, var(--accent-400)) 42%, var(--border-default));
  background: color-mix(in srgb, var(--habit-category-color, var(--accent-bg)) 12%, var(--surface-secondary));
}

.habit-edit-start-date-info {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2-5) var(--space-3);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 88%, rgba(37, 99, 235, 0.06)) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, transparent) 100%);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.35;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 10px 24px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .habit-edit-start-date-info {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 26px rgba(0, 0, 0, 0.22);
}

.habit-edit-start-date-info__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-bg) 64%, var(--surface-secondary));
  color: var(--text-primary);
}

.habit-edit-start-date-info__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.habit-edit-start-date-info__label {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

.habit-edit-start-date-info__value {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.habit-frequency-effective-error {
  display: block;
  margin-top: var(--space-1-5);
  color: var(--danger, #dc2626);
  font-size: var(--text-xs);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 180ms ease;
}

.habit-frequency-effective-error.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.habit-frequency-effective-from .form-input.is-invalid {
  border-color: color-mix(in srgb, var(--danger, #dc2626) 72%, var(--border-default));
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

[data-theme="dark"] .habit-frequency-effective-from .form-input.is-invalid {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16);
}

.habit-frequency-main-group,
.habit-frequency-variant-group {
  margin-top: var(--space-2-5);
  min-width: 0;
}

.habit-frequency-type-hint {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-top: var(--space-1);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

.habit-frequency-type-hint__line {
  display: block;
}

.habit-frequency-main-group #frequency-type.form-input {
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) calc(var(--space-3) + 26px) var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: 1.06rem;
  font-weight: var(--font-semibold);
  line-height: 1.2;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-frequency-main-group #frequency-type.form-input:hover {
  border-color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-bg) 30%, var(--surface-primary));
}

.habit-frequency-main-group #frequency-type.form-input:focus {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: var(--focus-ring);
}

.habit-frequency-variant-group {
  padding-top: 0;
}

.habit-frequency-variant-group .form-group {
  margin-bottom: 0;
}

.habit-frequency-variant-group .form-group > .form-input {
  min-height: 50px;
}

.habit-frequency-variant-group .form-group > .form-hint {
  margin-top: var(--space-1);
}

.habit-frequency-main-group > .form-hint,
.habit-frequency-type-hint,
.habit-frequency-variant-group .form-hint {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

.habit-qty-picker {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: var(--space-1-5);
  min-height: 56px;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
}

.habit-qty-picker__btn {
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: 1.3rem;
  font-weight: var(--font-semibold);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform 120ms ease;
}

.habit-qty-picker__btn:hover {
  border-color: color-mix(in srgb, var(--accent-300) 70%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 36%, var(--surface-secondary));
}

.habit-qty-picker__btn:active {
  transform: translateY(1px);
}

.habit-qty-picker__value {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 92%, var(--surface-primary));
  color: var(--text-primary);
  font-size: 1.12rem;
  font-weight: var(--font-semibold);
}

.habit-qty-picker__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.habit-frequency-compact-hint {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

#specific-days-hint.is-error {
  color: var(--danger, #dc2626);
}

#specific-days-hint.is-warning {
  color: color-mix(in srgb, var(--warning-600, #d97706) 86%, var(--text-primary));
}

.habit-weekdays-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.habit-weekday-chip {
  position: relative;
  display: block;
}

.habit-weekday-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.habit-weekday-chip__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--space-2);
  border-radius: 11px;
  border: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--surface-secondary) 90%, var(--surface-primary));
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform 120ms ease, box-shadow var(--transition-fast);
}

.habit-weekday-chip:hover .habit-weekday-chip__pill {
  border-color: color-mix(in srgb, var(--accent-300) 70%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 35%, var(--surface-secondary));
  transform: translateY(-1px);
}

.habit-weekday-chip input[type="checkbox"]:focus-visible + .habit-weekday-chip__pill {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-400) 45%, transparent);
}

.habit-weekday-chip input[type="checkbox"]:checked + .habit-weekday-chip__pill {
  border-color: color-mix(in srgb, var(--accent-500) 62%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 72%, var(--surface-secondary));
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-400) 40%, transparent);
}

.habit-weekday-chip.is-locked-last .habit-weekday-chip__pill {
  animation: habit-weekday-locked-pulse 420ms ease;
}

@keyframes habit-weekday-locked-pulse {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-600, #d97706) 18%, transparent);
  }
}

.habit-name-placeholder {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: var(--text-base);
  pointer-events: none;
  z-index: 0;
  transition: opacity 300ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - var(--space-8));
}

.habit-name-placeholder.placeholder-exit {
  animation: placeholderExit 300ms ease forwards;
}

.habit-name-placeholder.placeholder-enter {
  animation: placeholderEnter 400ms ease forwards;
}

@keyframes placeholderExit {
  0% {
    opacity: 1;
    transform: translateY(-50%);
  }

  100% {
    opacity: 0;
    transform: translateY(-70%);
  }
}

@keyframes placeholderEnter {
  0% {
    opacity: 0;
    transform: translateY(-30%);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%);
  }
}


/* ============================================
   KS-POPOVER — Reusable popover component
   ============================================ */

.ks-popover {
  display: none;
  position: fixed;
  z-index: var(--z-popover, 1060);
  min-width: 280px;
  max-width: 380px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 12px 48px rgba(0, 0, 0, 0.06);
  padding: var(--space-4);
  animation: popoverFadeIn 200ms ease;
}

.ks-popover.open {
  display: block;
}

.ks-popover.closing {
  animation: popoverFadeOut 200ms ease forwards;
}

@keyframes popoverFadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popoverFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

.ks-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.ks-popover__title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.ks-popover__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: background 150ms;
}

.ks-popover__close:hover {
  background: var(--surface-tertiary);
}

[data-theme="dark"] .ks-popover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 12px 48px rgba(0, 0, 0, 0.2);
}

.ks-popover.habit-category-popover {
  width: min(320px, calc(100vw - 24px));
  padding: 10px;
  overflow: visible;
}

.ks-popover.habit-category-popover .habit-category-popover__header {
  display: none;
}


/* ============================================
   TOGGLE SWITCH
   ============================================ */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--neutral-300);
  border-radius: 24px;
  transition: background 200ms;
}

.toggle-switch__slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 200ms;
}

.toggle-switch input:checked+.toggle-switch__slider {
  background: var(--accent-500);
}

.toggle-switch input:checked+.toggle-switch__slider::before {
  transform: translateX(20px);
}

[data-theme="dark"] .toggle-switch__slider {
  background: var(--neutral-600);
}


/* ============================================
   ORDER TOOLBAR — Habit List
   ============================================ */

.habits-order-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-height: 0;
  min-width: 0;
  text-align: right;
}

.habits-order-toolbar:empty {
  display: none;
}

.habits-order-switch-wrap {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  display: inline-flex;
}

.habits-order-mobile-trigger {
  display: none;
}

.habits-order-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: stretch;
  gap: 4px;
  width: auto;
  padding: 4px;
  border-radius: 999px;
  border: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 86%, var(--surface-primary)) 0%,
      color-mix(in srgb, var(--surface-primary) 94%, var(--surface-secondary)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-default) 42%, transparent);
}

.habits-order-switch__option {
  min-width: max-content;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  min-height: 38px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.habits-order-switch__option:hover {
  background: color-mix(in srgb, var(--surface-primary) 76%, var(--accent-bg));
  color: var(--text-primary);
  box-shadow: none;
}

.habits-order-switch__option:active {
  transform: translateY(1px);
}

.habits-order-switch__option:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-400) 22%, transparent),
    0 14px 24px -26px rgba(15, 23, 42, 0.16);
}

.habits-order-switch__option.is-active {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-bg) 74%, var(--surface-primary)) 0%,
      color-mix(in srgb, var(--accent-bg) 58%, var(--surface-primary)) 100%);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-500) 28%, transparent);
}

.habits-order-switch__option.is-loading {
  opacity: 0.72;
  cursor: progress;
}

.habits-order-switch__icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
}

.habits-order-switch__option.is-active .habits-order-switch__icon {
  color: var(--accent-700);
}

.habits-order-switch__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
}

.habits-order-switch__title {
  display: block;
  font-size: 11px;
  font-weight: var(--font-semibold);
  line-height: 1.15;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.habits-order-switch__desc {
  display: none;
}

.habits-order-switch-hint {
  display: none;
}

.habits-order-mobile-trigger {
  width: 34px;
  height: 34px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary)) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, var(--surface-secondary)) 100%);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-default) 42%, transparent);
}

.habits-order-mobile-trigger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.habits-order-mobile-trigger:hover {
  color: var(--text-primary);
}

.habits-order-mobile-trigger:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-400) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-500) 26%, transparent);
}

.habits-order-mobile-popover {
  width: min(260px, calc(100vw - 20px));
  padding: 12px;
}

.habits-order-mobile-popover__header {
  margin-bottom: 10px;
  justify-content: flex-start;
}

.habits-order-mobile-popover__body {
  display: grid;
  gap: 8px;
}

.habits-order-switch--popover {
  width: 100%;
}

.habits-order-switch--popover .habits-order-switch__option {
  justify-content: flex-start;
  min-width: 0;
}

[data-theme="dark"] .habits-order-switch,
body.dark-theme .habits-order-switch {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .habits-order-mobile-trigger,
body.dark-theme .habits-order-mobile-trigger {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.06) 100%);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .habits-order-switch__option,
body.dark-theme .habits-order-switch__option {
  color: var(--text-secondary);
}

[data-theme="dark"] .habits-order-switch__option:hover,
body.dark-theme .habits-order-switch__option:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

[data-theme="dark"] .habits-order-switch__option.is-active,
body.dark-theme .habits-order-switch__option.is-active {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.19), rgba(245, 158, 11, 0.09));
  color: color-mix(in srgb, var(--text-primary) 92%, #fbbf24);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.34);
}

[data-theme="dark"] .habits-order-switch__icon,
body.dark-theme .habits-order-switch__icon {
  border: none;
  background: transparent;
}

[data-theme="dark"] .habits-order-switch__option.is-active .habits-order-switch__icon,
body.dark-theme .habits-order-switch__option.is-active .habits-order-switch__icon {
  color: #fbbf24;
}

@media (max-width: 1279px) {
  .habits-order-toolbar {
    display: none;
  }

  .habits-order-switch-wrap--desktop {
    display: none;
  }

  .habits-order-mobile-anchor {
    display: inline-flex;
  }

  .habits-order-mobile-trigger {
    display: inline-flex;
  }
}

@media (max-width: 1439px) {
  body.layout-sidebar .habits-order-toolbar {
    display: none;
  }

  body.layout-sidebar .habits-order-switch-wrap--desktop {
    display: none;
  }

  body.layout-sidebar .habits-order-mobile-anchor {
    display: inline-flex;
  }

  body.layout-sidebar .habits-order-mobile-trigger {
    display: inline-flex;
  }
}

@media (max-width: 991px) {
  .habits-list-card .app-card-header {
    align-items: flex-start;
  }

  .habits-list-header-main {
    width: 100%;
    row-gap: var(--space-2);
  }

  .habits-list-title-row {
    flex-wrap: nowrap;
    row-gap: var(--space-1);
  }

  .habits-list-actions-row {
    gap: 6px;
  }

  .habits-list-actions-row .habits-order-toolbar {
    margin-left: 0;
  }

  .habits-order-toolbar {
    width: auto;
    align-items: center;
    justify-content: flex-end;
  }

  .habits-order-switch-wrap {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .habits-page-subtitle {
    font-size: 0.78rem;
    line-height: 1.15;
  }

  .habits-list-header-main {
    row-gap: 6px;
  }

  .habits-list-title-row {
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .habits-list-actions-row {
    gap: 6px;
  }

  .habits-list-title-row .app-card-title {
    font-size: 1.08rem;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .habits-reminders-btn {
    min-height: 30px;
    padding: 0 7px;
    gap: 5px;
  }

  .habits-list-actions-row .habits-order-toolbar {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .habits-order-toolbar {
    align-self: start;
  }

  .habit-goals-header-main {
    gap: 6px var(--space-2);
  }

  .habit-goals-header-copy .app-card-subtitle {
    font-size: 0.73rem;
  }

  .habits-order-switch-wrap--desktop {
    display: none;
  }

  .habits-order-mobile-trigger {
    display: inline-flex;
  }

}


/* ============================================
   CATEGORY GROUP CONTAINER — Habit List
   ============================================ */

.habit-category-group {
  list-style: none;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cat-color, var(--neutral-400));
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--surface-primary);
  transition: border-color 200ms, opacity 200ms, box-shadow 200ms;
}

.habit-category-group:last-child {
  margin-bottom: 0;
}

.habit-list > .habit-category-group {
  margin-bottom: 0; /* gap from .habit-list handles spacing */
}

.habit-category-group.dragging {
  opacity: 0.5;
}

.habit-category-group.drag-over {
  border-color: var(--accent-400);
  box-shadow: 0 0 0 2px var(--accent-200);
}

[data-theme="dark"] .habit-category-group.drag-over {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}


/* ============================================
   CATEGORY HEADERS — inside group container
   ============================================ */

.habit-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  cursor: grab;
  user-select: none;
  transition: background 150ms;
}

.habit-category-header:hover {
  background: var(--surface-tertiary);
}

.habit-category-header:active {
  cursor: grabbing;
}

.drag-handle--category {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1;
  opacity: 0.5;
  transition: opacity 150ms;
}

.habit-category-header:hover .drag-handle--category {
  opacity: 1;
}

.habit-category-header__emoji {
  font-size: 1.1rem;
}

.habit-category-header__title-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.habit-category-header__name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
  font-size: clamp(0.96rem, 0.92rem + 0.08vw, 1.04rem);
}

.habit-category-header__count {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: var(--surface-primary);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .habit-category-header__title-group {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .habit-category-header__name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(100%, 18ch);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

.category-collapse-btn,
.habit-category-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 94%, var(--surface-secondary));
  color: var(--text-tertiary);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.category-collapse-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.habit-category-group.is-collapsed .category-collapse-btn svg,
.goals-category-group.is-collapsed .category-collapse-btn svg {
  transform: rotate(-90deg);
}

.category-collapse-btn:hover,
.habit-category-add-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border-strong) 90%, transparent);
  color: var(--text-primary);
  box-shadow:
    0 12px 18px -22px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.category-collapse-btn:focus-visible,
.habit-category-add-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-500) 14%, transparent),
    0 12px 18px -22px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.habit-category-add-btn {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 72%, var(--text-secondary));
  background: color-mix(in srgb, var(--cat-color, var(--accent-500)) 10%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 26%, var(--border-default));
}

.habit-category-add-btn:hover {
  color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 84%, var(--text-primary));
  background: color-mix(in srgb, var(--cat-color, var(--accent-500)) 16%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 34%, var(--border-default));
}

.habit-category-panel {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition:
    grid-template-rows 180ms ease,
    opacity 180ms ease,
    visibility 180ms ease;
}

.habit-category-panel > .habit-category-items {
  min-height: 0;
}

.habit-category-group.is-collapsed .habit-category-header {
  border-bottom-color: transparent;
}

.habit-category-group.is-collapsed .habit-category-panel {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ============================================
   CATEGORY ITEMS LIST — inside group container
   ============================================ */

.habit-category-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.habit-category-items .habit-item {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
  box-shadow: none;
}

.habit-category-items .habit-item:last-child {
  border-bottom: none;
}

.habit-category-items .habit-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-secondary);
}


/* ============================================
   CATEGORY BADGE — shown in custom order mode
   ============================================ */

.habit-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--space-2);
  background: var(--surface-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  line-height: 1.4;
}

.habit-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.habit-meta-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.habit-meta-main.has-history {
  gap: var(--space-1-5);
}

.habit-meta-row .habit-goal-desc {
  margin-bottom: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-meta-main.has-history .habit-goal-desc {
  max-width: clamp(100px, 30vw, 320px);
}

.habit-meta-row .habit-category-badge {
  flex-shrink: 0;
}


/* ============================================
   DRAG STATES — habit items
   ============================================ */

.habit-item.dragging {
  opacity: 0.5;
}

.habit-item[draggable="true"] {
  touch-action: pan-y;
}

.habit-item.dragging-touch {
  opacity: 0.68;
  box-shadow:
    0 10px 24px -18px rgba(0, 0, 0, 0.32),
    0 0 0 1px color-mix(in srgb, var(--accent-500) 22%, transparent);
}

.habit-item.drag-over {
  border-top: 2px solid var(--accent-500);
}


/* ============================================
   TEMPLATE GRID
   ============================================ */

.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  max-height: 320px;
  overflow-y: auto;
}

.template-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(20px, auto) minmax(0, 1fr) minmax(58px, auto);
  grid-template-areas:
    "check icon freq"
    "name name name"
    "category category category";
  align-items: start;
  justify-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: background 150ms, border-color 150ms, transform 100ms;
}

.template-card__check {
  position: static;
  grid-area: check;
  justify-self: start;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-bold);
  color: var(--text-on-accent, #111827);
  background: var(--accent-400);
  border: 1px solid color-mix(in srgb, var(--accent-500) 70%, var(--accent-300));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.habit-template-freq-text {
  position: static;
  grid-area: freq;
  justify-self: end;
  max-width: 9ch;
  font-size: 11px;
  line-height: 1.12;
  font-weight: var(--font-semibold);
  letter-spacing: 0;
  text-align: right;
  white-space: normal;
  color: var(--text-accent, var(--ks-accent, #f5a524));
  opacity: 0.95;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.template-card:hover {
  background: var(--accent-bg);
  border-color: var(--accent-300);
  transform: translateY(-1px);
}

.habit-template-card-selectable.is-selected {
  border-color: var(--accent-400);
  background: color-mix(in srgb, var(--accent-bg) 70%, var(--surface-secondary));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-400) 40%, transparent), 0 10px 24px rgba(0, 0, 0, 0.2);
}

.habit-template-card-selectable.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.habit-template-card-selectable.is-disabled:hover {
  transform: none;
}

.template-card__icon {
  grid-area: icon;
  justify-self: center;
  font-size: 1.5rem;
  line-height: 1;
}

.template-card__name {
  grid-area: name;
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.2;
}

.template-card__category {
  grid-area: category;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.template-card__category .habit-category-color-bar {
  height: 18px;
}

.template-card__category .habit-category-choice__label {
  white-space: normal;
  line-height: 1.15;
}


/* ============================================
   MODAL FOOTER — Actions
   ============================================ */

/* (footer layout is handled by the common .ks-modal__footer rules below) */

.habit-template-btn {
  font-size: var(--text-sm);
  margin-left: auto;
  margin-right: auto;
}

.habits-page-actions-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 640px) {
  .habits-page-header-copy {
    flex-basis: 100%;
  }

  .page-actions.habits-page-actions-group {
    width: 100%;
    justify-content: space-between;
  }

  .page-actions.habits-page-actions-group #add-habit-btn {
    margin-left: auto;
  }
}

.habit-templates-modal {
  max-width: 980px;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--border-default) 70%, rgba(37, 99, 235, 0.22));
  background: var(--surface-primary);
}

.habit-templates-modal::before {
  content: none;
}

[data-theme="dark"] .habit-templates-modal {
  background: var(--surface-primary);
  border-color: rgba(255, 255, 255, 0.10);
}

.habit-templates-modal .ks-modal__body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, color-mix(in srgb, #f8fbff 70%, var(--surface-primary)) 0%, var(--surface-primary) 100%);
}

.habit-templates-modal .ks-modal__body::before {
  content: '';
  position: absolute;
  top: -22%;
  right: 0;
  bottom: -22%;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(122, 162, 247, 0.30), transparent 28%),
    radial-gradient(circle at 78% 14%, rgba(187, 154, 247, 0.26), transparent 30%),
    radial-gradient(circle at 58% 88%, rgba(255, 158, 100, 0.22), transparent 34%);
  filter: blur(40px);
  opacity: 0.74;
  transform: translate3d(-2%, 1%, 0) scale(1.04);
  animation: habit-template-aurora-drift 18s ease-in-out infinite alternate;
  contain: paint;
}

[data-theme="dark"] .habit-templates-modal .ks-modal__body {
  background: #0b0d12;
}

[data-theme="dark"] .habit-templates-modal .ks-modal__body::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(122, 162, 247, 0.56), transparent 28%),
    radial-gradient(circle at 76% 18%, rgba(187, 154, 247, 0.50), transparent 30%),
    radial-gradient(circle at 58% 88%, rgba(255, 158, 100, 0.42), transparent 32%);
  opacity: 0.66;
}

.habit-templates-modal .ks-modal__body > * {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@keyframes habit-template-aurora-drift {
  from {
    transform: translate3d(-2%, 1%, 0) scale(1.04) rotate(0deg);
  }
  to {
    transform: translate3d(2%, -2%, 0) scale(1.12) rotate(7deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .habit-templates-modal .ks-modal__body::before,
  .habit-template-card-selectable.is-selected,
  .habit-weekday-chip.is-locked-last .habit-weekday-chip__pill {
    animation: none;
  }
}

.habit-templates-modal__header {
  align-items: flex-start;
  gap: var(--space-2);
}

.habit-templates-modal__header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.habit-templates-modal__header-copy {
  min-width: 0;
}

.habit-templates-modal__title {
  margin: 0;
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.55rem);
  line-height: 1.05;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.habit-templates-modal__topbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

.habit-templates-modal__status-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  min-width: 0;
}

.habit-templates-modal__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.habit-templates-modal__aside {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.habit-templates-modal__guide-slot {
  min-height: 0;
}

.habit-templates-modal__guide-slot--header {
  justify-self: stretch;
  width: 100%;
}

.habit-templates-modal__guide-slot--header .ks-ob-embedded-hint {
  max-width: none;
}

.habit-templates-modal__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.habit-templates-modal__search,
.habit-templates-modal__filter {
  display: block;
}

.habit-templates-modal__search {
  min-width: 0;
}

.habit-templates-modal__search .form-input {
  width: 100%;
  min-height: 44px;
}

.habit-templates-modal__filter--radial {
  position: relative;
  justify-self: end;
}

.habit-templates-category-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 216px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 92%, rgba(255, 255, 255, 0.18)) 0%, color-mix(in srgb, var(--surface-secondary) 90%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 36px -32px rgba(15, 23, 42, 0.42);
  color: var(--text-primary);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.habit-templates-category-trigger:hover,
.habit-templates-category-trigger:focus-visible,
.habit-templates-category-trigger.is-open {
  border-color: color-mix(in srgb, var(--accent-400) 52%, var(--border-default));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 24px 40px -34px rgba(79, 70, 229, 0.46),
    0 0 0 1px color-mix(in srgb, var(--accent-400) 16%, transparent);
}

.habit-templates-category-trigger__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.habit-templates-category-trigger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--habit-category-color, var(--accent-bg)) 18%, var(--surface-secondary));
  color: var(--text-accent, var(--accent-500));
  font-size: 0.95rem;
}

.habit-templates-category-trigger__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-medium);
}

.habit-templates-category-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform 180ms ease;
}

.habit-templates-category-trigger.is-open svg {
  transform: rotate(180deg);
}

.habit-templates-category-menu {
  position: fixed;
  width: min(340px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 94%, rgba(255, 255, 255, 0.22)) 0%, color-mix(in srgb, var(--surface-secondary) 92%, transparent) 100%);
  box-shadow:
    0 28px 60px -42px rgba(15, 23, 42, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: var(--z-popover, 1060);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.habit-templates-category-menu[hidden] {
  display: none !important;
}

.habit-templates-category-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 800;
}

.habit-templates-category-list {
  display: grid;
  gap: 6px;
}

.habit-templates-category-option {
  display: grid;
  grid-template-columns: 4px auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.habit-templates-category-option:hover,
.habit-templates-category-option:focus-visible,
.habit-templates-category-option.is-selected {
  outline: none;
  border-color: color-mix(in srgb, var(--habit-category-color, var(--accent-400)) 42%, var(--border-default));
  background: color-mix(in srgb, var(--habit-category-color, var(--accent-bg)) 12%, var(--surface-primary));
}

.habit-templates-category-option .habit-category-color-bar {
  height: 24px;
}

.habit-templates-category-option__check {
  color: var(--text-accent);
  font-size: var(--text-sm);
  font-weight: 800;
  text-align: right;
}

.habit-templates-category-orbit {
  position: relative;
  min-height: 384px;
  width: 100%;
  --orbit-radius: clamp(118px, 14vw, 148px);
}

.habit-templates-category-orbit::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--orbit-radius) * 2 + 136px);
  height: calc(var(--orbit-radius) * 2 + 136px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 32%, color-mix(in srgb, var(--border-default) 34%, transparent) 32.4%, color-mix(in srgb, var(--surface-primary) 88%, transparent) 33%, color-mix(in srgb, var(--surface-primary) 70%, transparent) 59%, transparent 59.4%),
    radial-gradient(circle at center, color-mix(in srgb, var(--accent-bg) 16%, transparent), transparent 68%);
  opacity: 0.96;
  pointer-events: none;
}

.habit-templates-category-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 142px;
  min-height: 142px;
  padding: 18px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-400) 44%, var(--border-default));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-bg) 84%, rgba(255, 255, 255, 0.18)) 0%, color-mix(in srgb, var(--surface-primary) 94%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 22px 44px -36px rgba(79, 70, 229, 0.54),
    0 0 0 1px color-mix(in srgb, var(--accent-400) 14%, transparent);
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
}

.habit-templates-category-orbit__core-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.habit-templates-category-orbit__core-label {
  font-size: 0.95rem;
  line-height: 1.18;
  font-weight: var(--font-semibold);
}

.habit-templates-category-orbit__item {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: clamp(92px, 10vw, 108px);
  min-height: clamp(74px, 9vw, 88px);
  padding: 12px 10px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  color: var(--text-primary);
  box-shadow: 0 18px 30px -28px rgba(15, 23, 42, 0.45);
  transform: translate(-50%, -50%) rotate(var(--orbit-angle, 0deg)) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--orbit-angle, 0deg) * -1)) scale(0.82);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  transition-delay: var(--orbit-delay, 0ms);
  text-align: center;
}

.habit-templates-category-orbit.is-open .habit-templates-category-orbit__item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--orbit-angle, 0deg)) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--orbit-angle, 0deg) * -1)) scale(1);
}

.habit-templates-category-orbit__item:hover,
.habit-templates-category-orbit__item:focus-visible,
.habit-templates-category-orbit__item.is-selected {
  border-color: color-mix(in srgb, var(--accent-400) 58%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 76%, var(--surface-primary));
  box-shadow:
    0 22px 34px -28px rgba(79, 70, 229, 0.42),
    0 0 0 1px color-mix(in srgb, var(--accent-400) 20%, transparent);
}

.habit-templates-category-orbit__icon {
  font-size: 1.08rem;
  line-height: 1;
}

.habit-templates-category-orbit__label {
  font-size: 0.76rem;
  line-height: 1.16;
  text-align: center;
  font-weight: var(--font-medium);
}

.habit-templates-modal__selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 78%, var(--surface-primary));
}

.habit-templates-modal__results {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#habit-templates-clear-btn {
  flex: 0 0 auto;
}

.habit-templates-modal__counter {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.habit-templates-modal__after {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.habit-templates-modal__callout {
  margin-bottom: var(--space-3);
}

.habit-templates-modal__callout-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.habit-templates-modal__callout-copy {
  min-width: 0;
}

.habit-templates-modal__callout-title {
  margin-bottom: 4px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.habit-templates-bulk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: min(58vh, 560px);
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 4px 8px 2px;
  scroll-padding-top: 16px;
}

.habit-templates-bulk-grid .template-card {
  min-width: 0;
  max-width: 100%;
  min-height: 102px;
  padding: 12px 12px 10px;
  gap: 6px;
}

.habit-template-card-selectable {
  transform-origin: center 72%;
  will-change: transform, box-shadow;
}

.habit-template-card-selectable.is-selected {
  animation: habitTemplateSelectedFloat 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-400) 42%, transparent),
    0 18px 34px -22px rgba(79, 70, 229, 0.42);
}

.habit-template-card-selectable.is-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent-300) 56%, transparent);
  opacity: 0.9;
}

@keyframes habitTemplateSelectedFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  22% {
    transform: translateY(-4px) rotate(-0.95deg) scale(1.012);
  }

  52% {
    transform: translateY(-7px) rotate(0.8deg) scale(1.022);
  }

  76% {
    transform: translateY(-3px) rotate(-0.55deg) scale(1.01);
  }
}

.habit-templates-modal__empty {
  padding: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--border-default) 70%, transparent);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-secondary) 62%, var(--surface-primary));
}

@media (min-width: 640px) {
  .habit-templates-modal__header-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-templates-modal__topbar {
    grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }

  .habit-templates-modal__toolbar {
    grid-template-columns: minmax(0, 2.1fr) auto;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .habit-templates-modal {
    max-width: 1180px;
  }

  .habit-templates-bulk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .habit-templates-bulk-grid .template-card {
    padding: 14px 16px 12px;
    min-height: 108px;
    gap: var(--space-0-5);
  }

  .habit-templates-bulk-grid .template-card__icon {
    font-size: 1.375rem;
  }

  .habit-templates-bulk-grid .habit-template-freq-text {
    top: 8px;
    right: 8px;
  }
}

@media (min-width: 1440px) {
  .habit-templates-bulk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .habit-templates-modal__header-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-templates-modal__guide-slot--header {
    justify-self: stretch;
  }

  .habit-templates-modal__topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-templates-modal__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-templates-modal__filter--radial {
    order: -1;
    justify-self: stretch;
  }

  .habit-templates-modal__search {
    order: 1;
  }

  .habit-templates-category-trigger {
    width: 100%;
    min-width: 0;
  }

  .habit-templates-category-menu {
    width: min(340px, calc(100vw - 24px));
    padding: 14px;
    border-radius: 20px;
  }

  .habit-templates-category-orbit {
    min-height: 328px;
    --orbit-radius: 108px;
  }

  .habit-templates-category-orbit::before {
    width: calc(var(--orbit-radius) * 2 + 108px);
    height: calc(var(--orbit-radius) * 2 + 108px);
  }

  .habit-templates-category-orbit__core {
    width: 112px;
    min-height: 112px;
    padding: 14px 12px;
  }

  .habit-templates-category-orbit__core-label {
    font-size: 0.84rem;
  }

  .habit-templates-category-orbit__item {
    width: 88px;
    min-height: 70px;
    padding: 10px 8px;
    border-radius: 18px;
  }

  .habit-templates-category-orbit__label {
    font-size: 0.7rem;
  }

  .habit-templates-modal__selection {
    flex-wrap: nowrap;
    align-items: center;
  }

  .habit-templates-bulk-grid .template-card__icon {
    font-size: 1.25rem;
  }

  .habit-templates-bulk-grid .template-card__name {
    font-size: var(--text-xs);
  }
}

@media (max-width: 380px) {
  .habit-templates-modal__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ui-toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.ui-toast {
  pointer-events: auto;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 94%, var(--surface-primary));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  padding: 12px 14px;
  color: var(--text-primary);
  max-height: min(52vh, 360px);
  overflow: auto;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 190ms ease, opacity 190ms ease;
}

.ui-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.ui-toast.is-leaving {
  transform: translateY(10px);
  opacity: 0;
}

.ui-toast--success {
  border-color: color-mix(in srgb, var(--accent-400) 58%, transparent);
}

.ui-toast--error {
  border-color: color-mix(in srgb, var(--danger-400, #ef4444) 72%, transparent);
}

.ui-toast.habit-toast {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--habit-toast-tint, var(--surface-secondary)) 9%, var(--surface-secondary)) 0%,
      color-mix(in srgb, var(--habit-toast-tint, var(--surface-primary)) 5%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--habit-toast-border, var(--border-default)) 52%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 42px rgba(0, 0, 0, 0.22);
}

.habit-toast--success {
  --habit-toast-tint: #10b981;
  --habit-toast-border: #34d399;
}

.habit-toast--update {
  --habit-toast-tint: #6366f1;
  --habit-toast-border: #818cf8;
}

.habit-toast--pause {
  --habit-toast-tint: #d97706;
  --habit-toast-border: #fbbf24;
}

.habit-toast--danger {
  --habit-toast-tint: #e11d48;
  --habit-toast-border: #fb7185;
}

.habit-toast--default {
  --habit-toast-tint: var(--text-tertiary);
  --habit-toast-border: var(--border-default);
}

[data-theme="dark"] .ui-toast.habit-toast {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--habit-toast-tint, #64748b) 13%, rgba(15, 23, 42, 0.94)) 0%,
      color-mix(in srgb, var(--habit-toast-tint, #64748b) 8%, rgba(8, 13, 23, 0.96)) 100%);
  border-color: color-mix(in srgb, var(--habit-toast-border, #64748b) 38%, rgba(255, 255, 255, 0.08));
}

.ui-toast__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.25;
}

.ui-toast__message {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.ui-toast__content {
  margin-top: 8px;
}

.ui-toast-created-list {
  display: grid;
  gap: 6px;
}

.ui-toast-created-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: baseline;
}

.ui-toast-created-item__icon {
  font-size: 14px;
  line-height: 1;
}

.ui-toast-created-item__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  min-width: 0;
}

.ui-toast-created-item__meta {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.ui-toast-created-more {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.ui-toast-action {
  display: grid;
  gap: 8px;
}

.ui-toast-action__habit {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-primary) 78%, rgba(255, 255, 255, 0.08));
  border: 1px solid color-mix(in srgb, var(--habit-toast-border, var(--border-default)) 22%, var(--border-default));
}

.ui-toast-action__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-bg) 70%, var(--surface-secondary));
  line-height: 1;
}

.ui-toast-action__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ui-toast-action__name {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ui-toast-action__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}

.ui-toast-action__primary-meta,
.ui-toast-action__side-meta,
.ui-toast-action__reason,
.ui-toast-action__details {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.2;
  min-width: 0;
}

.ui-toast-action__primary-meta {
  overflow-wrap: anywhere;
}

.ui-toast-action__side-meta {
  justify-self: end;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.ui-toast-action__reason {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.ui-toast-action__more {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.habit-item.habit-just-created {
  position: relative;
  outline: 2px solid rgba(245, 165, 36, 0);
  animation: ksCreatedPulse 2.6s ease-out 1;
}

@keyframes ksCreatedPulse {
  0% {
    box-shadow: 0 0 0 rgba(245, 165, 36, 0);
    outline-color: rgba(245, 165, 36, 0);
  }

  25% {
    box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.22);
    outline-color: rgba(245, 165, 36, 0.55);
  }

  100% {
    box-shadow: 0 0 0 rgba(245, 165, 36, 0);
    outline-color: rgba(245, 165, 36, 0);
  }
}

@media (max-width: 767px) {
  .ui-toast-host {
    right: 50%;
    transform: translateX(50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(92vw, 460px);
  }

  .ui-toast-action__line {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .ui-toast-action__side-meta {
    justify-self: start;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-toast {
    transition: none;
  }

  .habit-item.habit-just-created {
    animation: none;
    outline-color: rgba(245, 165, 36, 0.45);
  }
}

/* ============================================
   ICON PICKER — Grid & Buttons
   ============================================ */

.icon-picker {
  display: block;
  padding: var(--space-2) 0;
  max-height: 320px;
  overflow-y: auto;
}

.icon-picker-section-title {
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: var(--font-bold);
  color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-primary));
  letter-spacing: 0.2px;
}

.icon-picker-section-title--suggested {
  margin: 0 0 8px;
}

.icon-picker-title-main {
  font-size: 12px;
  font-weight: 800;
  color: color-mix(in srgb, var(--text-primary) 88%, white);
  letter-spacing: 0.2px;
}

.icon-picker-title-sub {
  margin-top: 2px;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: color-mix(in srgb, var(--ks-accent, #f5a524) 92%, white);
  letter-spacing: 0.1px;
}

.icon-picker-section--suggested {
  position: relative;
  border-radius: 14px;
  padding: 10px 10px 12px;
  margin: 6px 0 12px;
  background: color-mix(in srgb, var(--ks-accent, #f5a524) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ks-accent, #f5a524) 10%, transparent);
}

.icon-picker-section--suggested::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg,
      color-mix(in srgb, var(--ks-accent, #f5a524) 0%, transparent) 0%,
      color-mix(in srgb, var(--ks-accent, #f5a524) 8%, transparent) 40%,
      color-mix(in srgb, var(--ks-accent, #f5a524) 0%, transparent) 70%);
  opacity: 0.55;
  transform: translateX(-20%);
  animation: ksSuggestedGlow 9s ease-in-out infinite;
}

.icon-picker-section--suggested>* {
  position: relative;
  z-index: 1;
}

@keyframes ksSuggestedGlow {
  0% {
    transform: translateX(-20%);
    opacity: 0.35;
  }

  50% {
    transform: translateX(20%);
    opacity: 0.55;
  }

  100% {
    transform: translateX(-20%);
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-picker-section--suggested::before {
    animation: none;
  }
}

.icon-picker-section-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.icon-picker-section+.icon-picker-section {
  margin-top: 10px;
}

.icon-picker-divider {
  height: 1px;
  background: color-mix(in srgb, var(--border-subtle) 85%, transparent);
  margin: 10px 0;
}

.icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 40px;
  height: 40px;
  justify-self: center;
  font-size: 1.6rem;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, transform 100ms;
}

.icon-option:hover {
  background: var(--accent-bg);
  border-color: var(--accent-400);
  transform: scale(1.12);
}

.icon-option.selected {
  border-color: var(--accent-500);
  background: var(--accent-bg);
  box-shadow: 0 0 0 2px var(--accent-300);
}

/* ============================================
   HABIT FREQUENCY HISTORY (Create/Edit modal)
   ============================================ */

.habit-month-year-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.habit-start-date-grid {
  display: grid;
  gap: var(--space-2);
}

.habit-start-date-grid--legacy {
  display: none;
}

.habit-start-date-trigger {
  width: 100%;
  min-height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-start-date-trigger:hover {
  border-color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-bg) 35%, var(--surface-primary));
}

.habit-start-date-trigger:focus-visible {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: var(--focus-ring);
}

.habit-start-date-trigger.is-start-date-changed,
.habit-start-date-trigger.is-end-date-changed {
  border-color: color-mix(in srgb, var(--warning-500, #f59e0b) 52%, var(--border-default));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-primary) 84%, rgba(245, 158, 11, 0.10)) 0%,
      color-mix(in srgb, var(--surface-secondary) 92%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 26px color-mix(in srgb, var(--warning-500, #f59e0b) 12%, transparent);
}

.habit-start-date-trigger.is-start-date-changed .habit-start-date-trigger__hint,
.habit-start-date-trigger.is-end-date-changed .habit-start-date-trigger__hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning-500, #f59e0b) 16%, transparent);
  color: color-mix(in srgb, var(--warning-700, #b45309) 82%, var(--text-primary));
  font-weight: var(--font-semibold);
}

.habit-start-date-trigger__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.habit-start-date-trigger__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.habit-start-date-trigger__value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.habit-start-date-trigger__hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.habit-start-date-trigger__chevron {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.habit-start-signup-toggle {
  margin-top: var(--space-2);
}

.habit-start-date-popover {
  min-width: 320px;
  max-width: min(92vw, 360px);
  padding: var(--space-3);
  overflow: visible;
}

.habit-start-date-popover__header {
  margin-bottom: var(--space-2);
}

.habit-start-date-popover .ks-popover__title {
  font-size: 1rem;
  font-weight: 800;
}

.habit-start-date-popover__heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.habit-end-date-popover .habit-start-date-popover__heading {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.habit-start-date-popover__subtitle {
  color: var(--text-tertiary);
  font-size: 0.82rem;
  line-height: 1.35;
}

.habit-start-date-popover .ks-popover__close {
  width: 36px;
  height: 36px;
  font-size: 1.35rem;
}

.habit-start-date-popover__month-nav {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.habit-start-date-popover__month-label {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.habit-start-date-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}

.habit-start-date-nav-btn:hover:not(:disabled) {
  border-color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-bg) 40%, var(--surface-secondary));
}

.habit-start-date-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.habit-start-date-popover__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: var(--space-1);
}

.habit-start-date-popover__weekdays span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.habit-start-date-popover__calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.habit-start-date-popover__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.habit-start-date-popover__range {
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.3;
}

.habit-end-date-clear {
  flex: 0 0 auto;
  white-space: nowrap;
}

.habit-end-date-presets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.habit-end-date-preset {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-end-date-preset:hover,
.habit-end-date-preset:focus-visible,
.habit-end-date-preset.is-selected {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-400) 58%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 72%, var(--surface-primary));
  color: var(--text-primary);
}

.habit-start-date-day {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform 100ms ease;
}

.habit-start-date-day:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-300) 70%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 35%, var(--surface-secondary));
  transform: translateY(-1px);
}

.habit-start-date-day.is-outside {
  color: color-mix(in srgb, var(--text-tertiary) 72%, transparent);
}

.habit-start-date-day.is-today {
  border-color: #3b82f6;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #60a5fa 72%, #ffffff 28%),
    0 0 0 1px color-mix(in srgb, #3b82f6 50%, transparent);
  animation: habitStartDateTodayPulse 2.4s ease-in-out infinite;
}

.habit-start-date-day.is-selected {
  background: color-mix(in srgb, var(--accent-bg) 62%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--accent-500) 58%, var(--border-default));
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-400) 40%, transparent);
}

.habit-start-date-day.is-selected.is-today {
  background: color-mix(in srgb, var(--accent-bg) 70%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--accent-500) 62%, var(--border-default));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #60a5fa 64%, #ffffff 36%),
    0 0 0 1px color-mix(in srgb, #3b82f6 44%, transparent),
    0 4px 16px color-mix(in srgb, #3b82f6 20%, transparent);
}

.habit-start-date-day.is-selected:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-bg) 76%, var(--surface-secondary));
}

.habit-start-date-day:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

@keyframes habitStartDateTodayPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, #60a5fa 72%, #ffffff 28%),
      0 0 0 1px color-mix(in srgb, #3b82f6 50%, transparent),
      0 0 0 0 color-mix(in srgb, #3b82f6 0%, transparent);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, #60a5fa 78%, #ffffff 22%),
      0 0 0 1px color-mix(in srgb, #3b82f6 66%, transparent),
      0 0 0 4px color-mix(in srgb, #3b82f6 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .habit-start-date-day.is-today {
    animation: none;
  }
}


.weight-goal-date-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.weight-goal-date-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-2-5);
  border: 1px solid var(--border-default);
  border-radius: calc(var(--radius-lg) + 2px);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.weight-goal-date-preset:hover {
  border-color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-bg) 28%, var(--surface-secondary));
  color: var(--text-primary);
}

.weight-goal-date-preset.is-selected {
  border-color: var(--accent-400);
  box-shadow: 0 0 0 1px rgba(var(--accent-500-rgb), 0.32);
  color: var(--text-primary);
}

.weight-goal-date-preset:active {
  transform: scale(0.97);
}

.weight-goal-date-preset:focus-visible {
  outline: none;
  border-color: var(--accent-400);
  box-shadow: 0 0 0 3px rgba(var(--accent-500-rgb), 0.16);
  color: var(--text-primary);
}

@media (max-width: 575px) {
  .weight-goal-date-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.habit-pause-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.habit-pause-mode-option {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.habit-pause-mode-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.habit-pause-mode-option__content {
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 78%, var(--surface-primary));
  display: grid;
  gap: 2px;
  align-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-pause-mode-option__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.2;
}

.habit-pause-mode-option__hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.2;
}

.habit-pause-mode-option:hover .habit-pause-mode-option__content {
  border-color: color-mix(in srgb, var(--border-strong) 80%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 64%, var(--accent-bg));
}

.habit-pause-mode-option__input:focus-visible + .habit-pause-mode-option__content {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-400) 50%, transparent);
}

.habit-pause-mode-option__input:checked + .habit-pause-mode-option__content {
  border-color: color-mix(in srgb, var(--accent-500) 58%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 68%, var(--surface-primary));
  transform: translateY(-1px);
}

.habit-pause-reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.habit-pause-reason-chip {
  min-height: 46px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--habit-pause-reason-color, var(--border-default)) 36%, var(--border-default));
  background: color-mix(in srgb, var(--surface-secondary) 84%, var(--surface-primary));
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  opacity: 0.72;
  filter: saturate(0.66);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-pause-reason-chip:hover {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--border-strong)) 56%, var(--border-strong));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--surface-secondary)) 16%, var(--surface-primary));
  color: var(--text-primary);
  opacity: 0.9;
  filter: saturate(0.86);
}

.habit-pause-reason-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--habit-pause-reason-color, var(--accent-400)) 36%, transparent);
}

.habit-pause-reason-chip.is-active {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--accent-500)) 76%, var(--border-default));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--accent-bg)) 28%, var(--surface-primary));
  color: var(--text-primary);
  opacity: 1 !important;
  filter: saturate(1) !important;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--habit-pause-reason-color, var(--accent-500)) 18%, transparent),
    0 10px 24px color-mix(in srgb, var(--habit-pause-reason-color, var(--accent-500)) 16%, transparent);
}

.habit-reminder-trigger[hidden],
.habit-reminder-trigger.is-unscheduled[aria-hidden="true"] {
  display: none !important;
}

.habit-pause-reason-chip__icon {
  font-size: 15px;
  line-height: 1;
}

.habit-pause-reason-chip__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.1;
}

.habit-pause-date-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.habit-pause-fields {
  margin-top: var(--space-2);
}

.habit-pause-modal__compact-intro {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.habit-bulk-panel__hint--compact {
  margin-top: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

@media (max-width: 380px) {
  .habit-pause-date-grid,
  .habit-pause-mode-switch {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-bulk-toolbar,
  .habit-bulk-panel__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-bulk-toolbar__actions,
  .habit-reminders-group__actions,
  .habit-bulk-actions {
    justify-content: flex-start;
  }

  .habit-end-date-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #habit-form.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-3);
  }

  #habit-form.form-grid > .habit-name-row,
  #habit-form.form-grid > .habit-category-select-group,
  #habit-form.form-grid > #frequency-history-section {
    grid-column: 1 / -1;
  }

  #habit-form.form-grid > #habit-start-month-group,
  #habit-form.form-grid > .habit-frequency-main-group {
    grid-column: 1;
  }

  #habit-form.form-grid > .habit-end-date-group,
  #habit-form.form-grid > .habit-frequency-variant-group {
    grid-column: 2;
  }

  #habit-form.form-grid > .habit-frequency-main-group,
  #habit-form.form-grid > .habit-frequency-variant-group {
    grid-column: 1 / -1;
  }

  #habit-form.form-grid:not(.habit-form--create) > .habit-category-select-group {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-name-row {
    gap: var(--space-3);
  }

  .habit-category-select-group,
  #habit-start-month-group,
  .habit-end-date-group {
    margin-top: var(--space-3);
  }

  .habit-pause-reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .habit-pause-reason-chip {
    min-height: 48px;
  }

  .habit-start-date-popover {
    min-width: min(92vw, 380px);
    max-width: min(92vw, 380px);
    padding: var(--space-3);
  }

  .habit-start-date-popover.ks-popover--mobile-sheet {
    inset: auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(86vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  }

  .habit-start-date-popover.ks-popover--mobile-sheet .ks-popover__title {
    font-size: 1.08rem;
  }

  .habit-start-date-popover.ks-popover--mobile-sheet .ks-popover__close {
    width: 42px;
    height: 42px;
    font-size: 1.55rem;
  }

  .habit-start-date-popover.ks-popover--mobile-sheet .habit-start-date-popover__month-label {
    font-size: 1.08rem;
  }

  .habit-start-date-trigger {
    padding: var(--space-2);
    min-height: 64px;
  }

  .habit-frequency-main-group #frequency-type.form-input {
    min-height: 52px;
    font-size: var(--text-base);
  }

  .habit-category-select-group .form-input {
    min-height: 64px;
    font-size: var(--text-base);
  }

  .habit-category-trigger {
    min-height: 64px;
    font-size: var(--text-base);
  }

  .ks-popover.habit-category-popover .habit-category-popover__header {
    display: flex;
    margin-bottom: 8px;
  }

  .habit-qty-picker {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 52px;
  }

  .habit-qty-picker__btn,
  .habit-qty-picker__value {
    height: 40px;
  }

  .habit-frequency-compact-hint {
    font-size: 0.72rem;
  }

  .habit-start-date-trigger__value {
    font-size: var(--text-sm);
  }

  .habit-start-date-trigger__hint {
    font-size: 0.72rem;
  }

  .habit-weekdays-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .habit-weekday-chip__pill {
    min-height: 40px;
    padding-inline: var(--space-1-5);
    border-radius: 10px;
    font-size: var(--text-xs);
  }

  .completed-habit-item {
    align-items: stretch;
    flex-direction: column;
  }

  .completed-habit-item__actions {
    width: 100%;
  }

  .completed-habit-item__actions .btn {
    flex: 1 1 0;
  }

  .habit-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .habit-details-timeline__item {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  .habit-details-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .habit-modal__header-main {
    min-width: 0;
  }

  .habit-modal__header-actions {
    gap: 6px;
  }

  .habit-template-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding-inline: 0;
    justify-content: center;
  }

  .habit-template-btn__label {
    display: none;
  }
}

@media (max-width: 359px) {
  #habit-form.form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #habit-form.form-grid > #habit-start-month-group,
  #habit-form.form-grid > .habit-end-date-group,
  #habit-form.form-grid > .habit-frequency-main-group,
  #habit-form.form-grid > .habit-frequency-variant-group {
    grid-column: 1;
  }
}

#frequency-history-section {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
}

.habit-frequency-apply-modes {
  display: grid;
  gap: var(--space-2);
}

.habit-frequency-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1-5);
}

.habit-frequency-main-header .form-label {
  margin: 0;
}

.habit-history-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.habit-history-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--accent-300);
  color: var(--text-primary);
}

.habit-history-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 16px;
  height: 16px;
}

.habit-history-btn__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.habit-frequency-apply-modes .checkbox-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.habit-frequency-mode-danger {
  border: 1px dashed #f59e0b;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: color-mix(in srgb, #f59e0b 8%, var(--surface-primary));
}

.habit-frequency-effective-from {
  margin-top: var(--space-3);
}

#frequency-from-creation-warning,
#frequency-past-warning {
  margin-top: var(--space-3);
}

#frequency-past-warning {
  border-left: 3px solid #dc2626;
}

.habit-confirm-past-change {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-weight: var(--font-medium);
}

.habit-future-plans-warning {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border-default));
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning-light) 45%, var(--surface-primary));
}

.habit-future-plans-warning__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.habit-future-plans-warning__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.habit-future-plans-warning__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning-light) 20%, transparent);
  padding: var(--space-1-5) var(--space-2);
}

.habit-future-plans-warning__item-main {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.habit-future-plans-warning__item-text {
  color: var(--text-secondary);
}

.habit-future-plans-warning__item-extra {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  padding-left: var(--space-1);
}

.habit-plan-delete-confirm {
  display: grid;
  gap: var(--space-2);
}

.habit-plan-delete-confirm__question {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.45;
}

.habit-plan-delete-confirm__summary {
  display: grid;
  gap: var(--space-1-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 85%, var(--surface-primary));
  padding: var(--space-2) var(--space-2-5);
}

.habit-plan-delete-confirm__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.habit-plan-delete-confirm__row strong {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-semibold);
}

.habit-plan-delete-confirm__habit {
  align-items: center;
  color: var(--text-primary);
}

.habit-plan-delete-confirm__icon {
  font-size: 1.05rem;
  line-height: 1;
}

.habit-plan-delete-confirm__habit-name {
  font-weight: var(--font-semibold);
}

.habit-reactivate-date-input {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
}

.habit-reactivate-date-input:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 1px;
}

.habit-reactivate-copy-main {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.habit-reactivate-copy-secondary {
  color: var(--text-secondary);
}

[data-theme="dark"] .habit-future-plans-warning {
  border-color: color-mix(in srgb, #f6c453 30%, var(--border-default));
  border-left-color: #f6c453;
  background: color-mix(in srgb, #f6c453 9%, var(--surface-primary));
}
body.dark-theme .habit-future-plans-warning {
  border-color: color-mix(in srgb, #f6c453 30%, var(--border-default));
  border-left-color: #f6c453;
  background: color-mix(in srgb, #f6c453 9%, var(--surface-primary));
}

[data-theme="dark"] .habit-future-plans-warning__text {
  color: var(--text-primary);
}
body.dark-theme .habit-future-plans-warning__text {
  color: var(--text-primary);
}

[data-theme="dark"] .habit-future-plans-warning__item {
  border-color: color-mix(in srgb, #f6c453 36%, var(--border-default));
  background: color-mix(in srgb, #f6c453 11%, var(--surface-secondary));
}
body.dark-theme .habit-future-plans-warning__item {
  border-color: color-mix(in srgb, #f6c453 36%, var(--border-default));
  background: color-mix(in srgb, #f6c453 11%, var(--surface-secondary));
}

[data-theme="dark"] .habit-future-plans-warning__item-text {
  color: var(--text-primary);
}
body.dark-theme .habit-future-plans-warning__item-text {
  color: var(--text-primary);
}

[data-theme="dark"] .habit-future-plans-warning__item-extra,
[data-theme="dark"] .habit-future-plans-warning__list {
  color: var(--text-secondary);
}
body.dark-theme .habit-future-plans-warning__item-extra,
body.dark-theme .habit-future-plans-warning__list {
  color: var(--text-secondary);
}

[data-theme="dark"] .habit-plan-delete-confirm__summary,
body.dark-theme .habit-plan-delete-confirm__summary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .habit-plan-delete-confirm__question,
[data-theme="dark"] .habit-plan-delete-confirm__row,
body.dark-theme .habit-plan-delete-confirm__question,
body.dark-theme .habit-plan-delete-confirm__row {
  color: var(--text-secondary);
}

[data-theme="dark"] .habit-plan-delete-confirm__row strong,
body.dark-theme .habit-plan-delete-confirm__row strong {
  color: color-mix(in srgb, var(--text-tertiary) 90%, var(--text-secondary));
}

.habit-history-preview-popover {
  position: fixed;
  z-index: calc(var(--z-modal, 1000) + 35);
  width: min(340px, calc(100vw - 16px));
  max-height: min(320px, calc(100vh - 16px));
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.2) translateY(-8px);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.habit-history-preview-popover.is-measuring {
  visibility: hidden !important;
  opacity: 1 !important;
  pointer-events: none !important;
  animation: none !important;
  transform: none !important;
}

.habit-history-preview-popover.open {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.habit-history-preview-popover.closing {
  visibility: visible !important;
  pointer-events: none !important;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.habit-history-preview-popover__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.habit-history-preview-popover__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.habit-history-preview-popover__close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-secondary);
  cursor: pointer;
}

.habit-history-preview-popover__content {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.habit-history-preview-list {
  display: grid;
  gap: var(--space-2);
}

.habit-history-preview-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  padding: var(--space-2) var(--space-3);
}

.habit-history-preview-item.is-future {
  border-color: color-mix(in srgb, var(--accent-500) 35%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 62%, var(--surface-primary));
}

.habit-history-preview-item.is-pause {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 28%, var(--border-default));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 6%, var(--surface-primary));
}

.habit-history-preview-item.is-pause.is-future {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 34%, var(--border-default));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 8%, var(--surface-primary));
}

.habit-history-preview-item__period {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.habit-history-preview-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.habit-history-preview-item__desc {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.habit-history-preview-item__desc-main {
  font-weight: var(--font-medium);
}

.habit-history-preview-item__desc-note {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
}

.habit-history-preview-more {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.habit-history-global-preview-intro {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-secondary);
}

.habit-history-preview-show-all {
  justify-self: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

.habit-history-preview-show-all:hover {
  background: var(--surface-secondary);
  border-color: var(--border-strong);
}

.habit-history-preview-loading,
.habit-history-preview-error,
.habit-history-preview-empty {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .habit-history-preview-popover {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 150ms ease, visibility 150ms ease !important;
  }

  .habit-history-preview-popover.open,
  .habit-history-preview-popover.closing {
    animation: none !important;
  }

  .habit-history-preview-popover.open {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .habit-history-preview-popover:not(.open):not(.closing) {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

.habit-history-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 1000) + 30);
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.habit-history-drawer-overlay.open,
.habit-history-drawer-overlay.is-open,
.habit-history-drawer-overlay.closing {
  visibility: visible;
}

.habit-history-drawer-overlay.habit-history-standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.habit-history-drawer-overlay.open,
.habit-history-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.habit-history-drawer-overlay.closing {
  opacity: 0;
}

.habit-history-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  transition: opacity 220ms ease;
}

.habit-history-drawer-overlay.open .habit-history-drawer-backdrop,
.habit-history-drawer-overlay.is-open .habit-history-drawer-backdrop {
  opacity: 1;
}

.habit-history-drawer-overlay.closing .habit-history-drawer-backdrop {
  opacity: 0;
}

.habit-history-drawer {
  position: fixed;
  z-index: 1;
  top: 12px;
  right: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  height: min(85vh, 760px);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.2) translateY(-8px);
  transform-origin: var(--habit-history-origin-x, 50%) var(--habit-history-origin-y, 0%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.habit-history-drawer-overlay.habit-history-standalone .habit-history-drawer {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  width: min(720px, calc(100vw - 24px));
  max-height: min(82vh, 760px);
  height: auto;
  transform-origin: 50% 50%;
}

.habit-history-drawer-overlay.habit-history-global .habit-history-drawer {
  width: min(820px, calc(100vw - 24px));
}

.habit-history-drawer.open,
.habit-history-drawer-overlay.open .habit-history-drawer,
.habit-history-drawer-overlay.is-open .habit-history-drawer {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.habit-history-drawer.closing,
.habit-history-drawer-overlay.closing .habit-history-drawer {
  visibility: visible !important;
  pointer-events: none !important;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.habit-history-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.habit-history-drawer__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.habit-history-drawer__close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-secondary);
  cursor: pointer;
}

.habit-history-drawer__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.habit-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.habit-history-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-primary);
}

.habit-history-item.is-future {
  border-color: color-mix(in srgb, var(--accent-500) 35%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 62%, var(--surface-primary));
}

.habit-history-item.is-pause {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 28%, var(--border-default));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 6%, var(--surface-primary));
}

.habit-history-item.is-pause.is-future {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 34%, var(--border-default));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 8%, var(--surface-primary));
}

.habit-history-item__period {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  flex-wrap: wrap;
}

.habit-history-item__arrow {
  color: var(--text-tertiary);
}

.habit-history-item__desc {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.habit-history-item__desc-main {
  font-weight: var(--font-medium);
}

.habit-history-item__desc-note {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
}

.habit-history-status-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--font-semibold);
  line-height: 1;
}

.habit-history-status-badge.is-future {
  border-color: color-mix(in srgb, var(--accent-500) 45%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 60%, var(--surface-primary));
  color: var(--text-accent);
}

.habit-history-status-badge.is-pause {
  border-color: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 36%, var(--border-default));
  background: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 58%, var(--text-primary));
  gap: 6px;
}

.habit-history-status-badge--count {
  border-color: color-mix(in srgb, var(--border-default) 78%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 80%, transparent);
  color: var(--text-secondary);
}

.habit-history-status-badge__icon {
  line-height: 1;
}

.habit-history-global {
  display: grid;
  gap: var(--space-3);
}

.habit-history-global__summary {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.habit-history-global__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary));
}

.habit-history-global__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.habit-history-global__filter:hover,
.habit-history-global__filter:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 20%, var(--border-default));
  color: var(--text-primary);
  outline: none;
}

.habit-history-global__filter.is-active {
  border-color: color-mix(in srgb, var(--accent-500) 28%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 62%, var(--surface-primary));
  color: var(--text-accent);
}

.habit-history-global__count {
  margin-left: auto;
  padding: 0 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.habit-history-global-habit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.habit-history-batch-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.habit-history-batch-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--border-default) 76%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-secondary) 76%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.habit-history-batch-toggle:hover,
.habit-history-batch-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 24%, var(--border-default));
  color: var(--text-primary);
  outline: none;
}

.habit-history-batch-children {
  display: grid;
  gap: 8px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--habit-pause-reason-color, var(--warning)) 18%, var(--border-subtle));
}

.habit-history-batch-children[hidden] {
  display: none;
}

.habit-history-batch-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 82%, var(--surface-secondary));
}

.habit-history-batch-child__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.habit-history-batch-child__period,
.habit-history-batch-child__note {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.habit-history-batch-child__note {
  color: var(--text-tertiary);
}

.habit-history-delete-btn {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border-default));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--danger-light) 55%, var(--surface-primary));
  color: var(--danger-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.habit-history-delete-btn:hover {
  background: color-mix(in srgb, var(--danger-light) 75%, var(--surface-primary));
}

.habit-history-delete-btn--icon {
  margin-top: 0;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.habit-history-delete-btn--icon span[aria-hidden="true"] {
  font-size: 0.95rem;
  line-height: 1;
}

.habit-history-delete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-theme="dark"] .habit-history-delete-btn {
  border-color: color-mix(in srgb, #ef4444 45%, var(--border-default));
  background: color-mix(in srgb, #ef4444 14%, var(--surface-primary));
  color: color-mix(in srgb, #fca5a5 85%, var(--text-primary));
}
body.dark-theme .habit-history-delete-btn {
  border-color: color-mix(in srgb, #ef4444 45%, var(--border-default));
  background: color-mix(in srgb, #ef4444 14%, var(--surface-primary));
  color: color-mix(in srgb, #fca5a5 85%, var(--text-primary));
}

[data-theme="dark"] .habit-history-delete-btn:hover {
  background: color-mix(in srgb, #ef4444 24%, var(--surface-primary));
}
body.dark-theme .habit-history-delete-btn:hover {
  background: color-mix(in srgb, #ef4444 24%, var(--surface-primary));
}

@media (max-width: 640px) {
  .habit-month-year-grid {
    grid-template-columns: 1fr;
  }

  .habit-meta-main.has-history .habit-goal-desc {
    max-width: clamp(96px, 42vw, 220px);
  }
}

@media (max-width: 768px) {
  .habit-history-drawer {
    position: fixed;
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    height: min(84vh, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
    border-radius: var(--radius-xl);
    transform-origin: 50% 100%;
  }

  .habit-history-drawer-overlay.habit-history-standalone .habit-history-drawer {
    width: calc(100vw - 24px);
    max-height: 86vh;
  }

  .habit-history-delete-btn--icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .habit-history-drawer {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 150ms ease, visibility 150ms ease !important;
  }

  .habit-history-drawer.open,
  .habit-history-drawer.closing {
    animation: none !important;
  }

  .habit-history-drawer.open {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .habit-history-drawer:not(.open):not(.closing) {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


/* ============================================
   QUOTE BANNER
   ============================================ */

.quote-banner {
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--surface-primary), var(--accent-bg));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  text-align: center;
  margin-bottom: var(--space-6);
}

.quote-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.quote-author {
  font-size: var(--text-sm);
  color: var(--text-accent);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1366px) {
  body.layout-header .header-nav-link>span {
    display: none;
  }

  body.layout-header .header-nav-link {
    padding: var(--space-2);
    min-width: 44px;
    justify-content: center;
    gap: 0;
  }

  body.layout-header .header-nav-link svg {
    margin: 0;
  }

  body.layout-header .admin-dropdown-btn .admin-btn-label,
  body.layout-header .admin-dropdown-btn .header-user-caret {
    display: none;
  }

  body.layout-header .admin-dropdown-btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
}

@media (max-width: 768px) {

  /* Mobile: Hide sidebar completely */
  .app-shell[data-layout="sidebar"] .app-sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .app-shell[data-layout="sidebar"] .app-sidebar.open {
    transform: translateX(0);
  }

  .app-shell[data-layout="sidebar"] .app-main {
    margin-left: 0;
    width: 100%;
  }

  .app-content {
    padding: var(--space-4);
  }

  .page-title {
    font-size: var(--text-2xl);
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .header-user-name {
    display: none;
  }

  /* ============================================
     MOBILE FIX: SIDEBAR STRUTTURA
     La sidebar deve avere:
     - Altezza: 100dvh (con fallback 100vh)
     - Header: fisso in alto
     - Nav (menu): SCROLLABILE se troppo lungo
     - Footer: SEMPRE visibile in basso senza scroll
     ============================================ */
  .app-sidebar {
    /* Altezza viewport dinamica con fallback */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    /* Flexbox per distribuire header/nav/footer */
    display: flex;
    flex-direction: column;
    /* Safe area per dispositivi con notch */
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: hidden;
    /* Previene scroll dell'intera sidebar */
  }

  /* Header sidebar: fisso, non scrollabile */
  .sidebar-header {
    flex-shrink: 0;
    min-height: auto;
  }

  /* Nav (menu): UNICA area scrollabile */
  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* Chiave per permettere shrink in flexbox */
    /* Scrollbar sottile */
    scrollbar-width: thin;
  }

  .sidebar-nav::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 2px;
  }

  /* Footer sidebar: SEMPRE visibile, mai scrollato via */
  .sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-top: 1px solid var(--border-subtle);
  }

  /* Compatta gli elementi nel footer */
  .sidebar-actions {
    padding: var(--space-2);
  }

  .sidebar-actions .action-btn {
    height: 40px;
    font-size: 13px;
  }

  /* Compatta gli switch */
  .header-left-switch-row {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .page-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ============================================
   PREFERENCES PANEL
   ============================================ */

.preferences-section {
  margin-bottom: var(--space-8);
}

.preferences-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.preferences-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.preferences-option-info {
  flex: 1;
}

.preferences-option-label {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-0-5);
}

.preferences-option-description {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Layout Selector */
.layout-selector {
  display: flex;
  gap: var(--space-3);
}

.layout-option {
  flex: 1;
  padding: var(--space-4);
  background: var(--surface-secondary);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.layout-option:hover {
  border-color: var(--border-strong);
}

.layout-option.active {
  border-color: var(--accent-500);
  background: var(--accent-bg);
}

.layout-option-icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

.layout-option-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

/* ============================================
   STATISTICS PAGE
   ============================================ */

/* KPI Grid - compact row of stat cards */
.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .stats-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-kpi-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  text-align: center;
  min-height: 80px;
}

.kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.kpi-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-1);
}

/* Period filter in header */
.stats-period-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Visualization containers */
.heatmap-container {
  width: 100%;
  overflow-x: auto;
}

.monthly-charts-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .monthly-charts-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.monthly-chart-wrapper {
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.chart-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3) 0;
}

/* Bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  height: 120px;
}

.bar-chart-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.bar-chart-bar {
  width: 100%;
  max-width: 40px;
  background: var(--accent-500);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  min-height: 4px;
  transition: height var(--transition-base);
}

.bar-chart-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.bar-chart-value {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Stacked chart (daily) */
.stacked-chart {
  display: flex;
  gap: 2px;
  height: 80px;
  align-items: flex-end;
}

.stacked-bar {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  min-width: 8px;
  max-width: 20px;
}

.stacked-segment {
  width: 100%;
  min-height: 2px;
}

.stacked-segment.completed {
  background: var(--success);
}

.stacked-segment.missed {
  background: var(--danger);
}

.stacked-segment.not-due {
  background: var(--surface-tertiary);
}

/* Heatmap improvements */
.heatmap-grid--year {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.heatmap-month-block {
  flex: 1;
  min-width: 200px;
}

.heatmap-month-header {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.heatmap-month-grid {
  display: flex;
  gap: 2px;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.heatmap-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.heatmap-legend-color {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

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

.heatmap-day-labels {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.heatmap-day-labels span {
  display: block;
  height: 14px;
  line-height: 14px;
}

.heatmap-day {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.heatmap-day--empty {
  background: transparent;
}

.heatmap-day--disabled {
  background: var(--surface-secondary);
  opacity: 0.3;
}

.heatmap-day--today {
  border-color: var(--accent-500);
  border-width: 2px;
}

.heatmap-day--future {
  background: var(--surface-secondary);
  opacity: 0.4;
}

.heatmap-day--perfect {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--success-bg, rgba(34, 197, 94, 0.15));
  border-color: var(--success);
}

.heatmap-day--perfect::after {
  content: '💯';
  font-size: 8px;
}

/* Stats options toggle */
.stats-options {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
}

.stats-options.hidden {
  display: none;
}

.toggle-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

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

.toggle-checkbox:checked+.toggle-switch {
  background: var(--accent-500);
}

.toggle-checkbox:checked+.toggle-switch::after {
  transform: translateX(18px);
}

.toggle-checkbox:focus-visible+.toggle-switch {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-label-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.toggle-label-help {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* KPI card highlight variant */
.kpi-card--highlight {
  border-color: var(--accent-500);
  background: var(--accent-bg);
}

.kpi-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Styled select dropdowns */
.ks-select-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ks-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ks-select-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-right: var(--space-2);
}

.ks-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-width: 100px;
}

.ks-select:hover {
  border-color: var(--border-strong);
  background: var(--surface-tertiary);
}

.ks-select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.ks-select-wrap::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-tertiary);
  pointer-events: none;
}

/* Heatmap color scale - PERCENTAGE based (0%, 1-24%, 25-49%, 50-74%, 75-99%, 100%) */
.heatmap-day[data-level="0"] {
  background: var(--surface-tertiary);
  /* 0% - neutral gray */
}

.heatmap-day[data-level="1"] {
  background: #fca5a5;
  /* 1-24% - red-300 */
}

.heatmap-day[data-level="2"] {
  background: #fdba74;
  /* 25-49% - orange-300 */
}

.heatmap-day[data-level="3"] {
  background: #fde047;
  /* 50-74% - yellow-300 */
}

.heatmap-day[data-level="4"] {
  background: #86efac;
  /* 75-99% - green-300 */
}

.heatmap-day[data-level="5"] {
  background: #34d399;
  /* 100% - emerald-400 (but perfect gets special treatment) */
}

/* Perfect day - gold with 💯 icon */
.heatmap-day--perfect {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  position: relative;
}

.heatmap-day--perfect::after {
  content: '💯';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  line-height: 1;
}

/* Heatmap legend colors matching percentage scale */
.heatmap-legend-color[data-level="0"] {
  background: var(--surface-tertiary);
}

.heatmap-legend-color[data-level="1"] {
  background: #fca5a5;
}

.heatmap-legend-color[data-level="2"] {
  background: #fdba74;
}

.heatmap-legend-color[data-level="3"] {
  background: #fde047;
}

.heatmap-legend-color[data-level="4"] {
  background: #86efac;
}

.heatmap-legend-color[data-level="5"] {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.heatmap-legend-color--perfect {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}

/* Goal card breakdown styles */
.goal-card-breakdown {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-primary);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.breakdown-item {
  padding: 2px 6px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.breakdown-item.is-complete {
  background: var(--success-bg);
  color: var(--success-text);
}

.breakdown-ellipsis {
  color: var(--text-tertiary);
}

.breakdown-info {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Month chips for year view - compact status indicators */
.month-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-primary);
}

.month-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: transform 0.1s ease;
}

.month-chip:hover {
  transform: scale(1.05);
}

/* Complete month - green */
.month-chip--complete {
  background: var(--success-bg);
  color: var(--success-text);
}

/* Incomplete month - red/warning */
.month-chip--incomplete {
  background: var(--error-bg);
  color: var(--error-text);
}

/* Neutral (unscheduled or no data) */
.month-chip--neutral {
  background: var(--surface-secondary);
  color: var(--text-tertiary);
}

/* Disabled/excluded future months */
.month-chip--disabled {
  background: var(--surface-tertiary);
  color: var(--text-tertiary);
  opacity: 0.5;
}

/* ============================================
   MISSIONS (SFIDE PERSONALI)
   ============================================ */

.missions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.missions-card-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: min(100%, 260px);
}

.missions-card-actions-stack {
  display: grid;
  grid-template-columns: auto;
  justify-items: end;
  gap: 10px;
  width: 100%;
}

.missions-card-header {
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.missions-card-actions {
  min-width: 0;
  align-self: center;
}

.missions-card-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.missions-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.missions-card-title-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
}

.missions-card-toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
}

.missions-card-subtitle-slot {
  margin-top: 0;
  display: contents;
}

#missions-card #new-mission-btn {
  min-height: 30px;
  padding: 0 12px;
}

.missions-see-all-link,
.section-divider-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg,
      rgba(24, 33, 44, 0.92) 0%,
      rgba(13, 18, 27, 0.9) 100%);
  color: #f8fafc;
  font-size: 10.5px;
  font-weight: 700;
  gap: 7px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 20px -24px rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(8px) saturate(1.02);
}

.missions-see-all-link:hover,
.missions-see-all-link:focus-visible,
.section-divider-action-link:hover,
.section-divider-action-link:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 28px -28px rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .missions-see-all-link,
[data-theme="light"] .section-divider-action-link,
html:not([data-theme="dark"]) .missions-see-all-link,
html:not([data-theme="dark"]) .section-divider-action-link {
  border-color: rgba(20, 34, 54, 0.08);
  background:
    linear-gradient(180deg,
      rgba(232, 240, 251, 0.98) 0%,
      rgba(219, 230, 247, 0.94) 100%);
  color: #142236;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 24px -28px rgba(76, 53, 22, 0.14);
}

[data-theme="light"] .missions-see-all-link:hover,
[data-theme="light"] .missions-see-all-link:focus-visible,
[data-theme="light"] .section-divider-action-link:hover,
[data-theme="light"] .section-divider-action-link:focus-visible,
html:not([data-theme="dark"]) .missions-see-all-link:hover,
html:not([data-theme="dark"]) .missions-see-all-link:focus-visible,
html:not([data-theme="dark"]) .section-divider-action-link:hover,
html:not([data-theme="dark"]) .section-divider-action-link:focus-visible {
  color: #0f1f33;
  border-color: rgba(20, 34, 54, 0.16);
  background:
    linear-gradient(180deg,
      rgba(238, 245, 253, 1) 0%,
      rgba(224, 235, 249, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 18px 28px -28px rgba(76, 53, 22, 0.16);
}

[data-theme="light"] .missions-see-all-link__count,
html:not([data-theme="dark"]) .missions-see-all-link__count {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(244, 248, 252, 0.94) 100%);
  border-color: rgba(20, 34, 54, 0.1);
  color: #30435a;
}

.missions-see-all-link__label,
.section-divider-action-link__label {
  display: inline-flex;
  align-items: center;
}

.missions-see-all-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  min-height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(248, 250, 252, 0.92);
  font-size: 10px;
  font-weight: 700;
}

.mission-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  min-width: 0;
  box-sizing: border-box;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.missions-list--compact {
  gap: 10px;
}

.mission-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 26%, transparent);
  border-radius: calc(var(--radius-lg) - 2px);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 94%, transparent) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, transparent) 100%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mission-compact-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}

.mission-compact-row__title-wrap {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.mission-compact-row__title {
  margin: 0;
  font-size: calc(var(--text-base) * 1.02);
  line-height: 1.18;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.mission-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.mission-status-badge--active {
  background: color-mix(in srgb, var(--accent-500) 14%, transparent);
  color: color-mix(in srgb, var(--accent-500) 58%, white);
  border-color: color-mix(in srgb, var(--accent-500) 22%, transparent);
}

[data-theme="light"] .mission-status-badge--active,
html:not([data-theme="dark"]) .mission-status-badge--active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-500) 22%, #ffffff) 0%,
    color-mix(in srgb, var(--accent-500) 14%, var(--surface-primary)) 100%);
  color: color-mix(in srgb, var(--accent-700) 88%, #0f172a);
  border-color: color-mix(in srgb, var(--accent-600) 42%, var(--border-default));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.mission-status-badge--completed {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: color-mix(in srgb, var(--success) 62%, white);
  border-color: color-mix(in srgb, var(--success) 22%, transparent);
}

.mission-status-badge--failed,
.mission-status-badge--archived {
  background: color-mix(in srgb, var(--surface-primary) 78%, transparent);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--border-default) 58%, transparent);
}

.mission-compact-row__deadline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  line-height: 1.1;
}

.mission-compact-row__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  flex-wrap: wrap;
}

.mission-compact-row__meta .mission-habit-badge {
  min-height: 22px;
  padding: var(--space-0-5) var(--space-2);
  font-size: calc(var(--text-xs) * 1.08);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  max-width: 100%;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.mission-compact-row__empty-habit {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1;
}

.mission-compact-row__side {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: none;
}

.mission-compact-row__deadline--danger {
  color: color-mix(in srgb, var(--danger) 84%, var(--text-primary));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border-default));
}

.mission-compact-row__deadline--warning {
  color: color-mix(in srgb, var(--warning) 86%, var(--text-primary));
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border-default));
}

.mission-compact-row__deadline--neutral {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
  border-color: color-mix(in srgb, var(--border-default) 82%, transparent);
}

.mission-compact-row__menu-trigger {
  appearance: none;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mission-compact-row__menu-trigger:hover,
.mission-compact-row__menu-trigger:focus-visible,
.mission-compact-row__menu-trigger[aria-expanded="true"] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  border-color: color-mix(in srgb, var(--accent-500) 32%, transparent);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  outline: none;
}

.mission-compact-row__menu-trigger span {
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}

.mission-compact-actions-radial {
  position: fixed;
  z-index: 1160;
  width: 196px;
  height: 196px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.86) rotate(-10deg);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mission-compact-actions-radial.is-open {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.mission-compact-actions-radial--card-menu {
  width: min(248px, calc(100vw - 24px));
  height: auto;
  min-height: 0;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-primary) 98%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 62%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(18px) saturate(1.05);
  pointer-events: auto;
  transform: translateY(-4px) scale(0.96);
}

.mission-compact-actions-radial--card-menu.is-open {
  transform: translateY(0) scale(1);
}

.mission-compact-actions-radial__core {
  position: absolute;
  inset: 72px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 56%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
}

.mission-compact-actions-radial__items {
  position: absolute;
  inset: 0;
}

.mission-compact-actions-radial--card-menu .mission-compact-actions-radial__core {
  display: none;
}

.mission-compact-actions-radial--card-menu .mission-compact-actions-radial__items {
  position: relative;
  inset: auto;
  display: grid;
  gap: 6px;
}

.mission-compact-action-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border-default) 52%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease, background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mission-compact-action-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.mission-compact-action-btn--radial {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.mission-compact-action-btn--card-menu {
  position: relative;
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  pointer-events: auto;
  box-shadow: none;
}

.mission-compact-action-btn--card-menu:hover,
.mission-compact-action-btn--card-menu:focus-visible {
  background: color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--border-default) 82%, transparent);
  outline: none;
}

.mission-compact-action-btn--radial[data-compact-action-index="0"] {
  left: 18px;
  top: 70px;
}

.mission-compact-action-btn--radial[data-compact-action-index="1"] {
  right: 18px;
  top: 70px;
}

.mission-compact-action-btn--radial[data-compact-action-index="2"] {
  left: 75px;
  bottom: 18px;
}

.mission-compact-action-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.mission-compact-action-btn--card-menu .mission-compact-action-btn__icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-secondary) 84%, transparent);
}

.mission-compact-action-btn--sheet .mission-compact-action-btn__icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-secondary) 84%, transparent);
}

.mission-compact-action-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mission-compact-action-btn__tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 52%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.mission-compact-action-btn--radial:hover .mission-compact-action-btn__tooltip,
.mission-compact-action-btn--radial:focus-visible .mission-compact-action-btn__tooltip {
  opacity: 1;
}

.mission-compact-action-btn--primary {
  background: color-mix(in srgb, var(--info) 15%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--info) 34%, transparent);
  color: color-mix(in srgb, var(--info-dark) 84%, var(--text-primary));
}

.mission-compact-action-btn--success {
  background: color-mix(in srgb, var(--success) 18%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: color-mix(in srgb, var(--success) 82%, white);
}

.mission-compact-action-btn--secondary,
.mission-compact-action-btn--edit {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
  color: color-mix(in srgb, var(--warning-dark) 82%, var(--text-primary));
}

.mission-compact-action-btn--ghost,
.mission-compact-action-btn--neutral {
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
  border-color: color-mix(in srgb, var(--border-default) 72%, transparent);
  color: var(--text-primary);
}

.mission-compact-action-btn--muted,
.mission-compact-action-btn--archive {
  background: color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 22%, var(--border-default));
  color: color-mix(in srgb, var(--warning-dark) 62%, var(--text-secondary));
}

.mission-compact-action-btn--card-menu.mission-compact-action-btn--primary:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--primary:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--primary:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--info) 22%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--info) 44%, transparent);
}

.mission-compact-action-btn--card-menu.mission-compact-action-btn--success:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--success:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--success:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--success:focus-visible {
  background: color-mix(in srgb, var(--success) 24%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--success) 44%, transparent);
}

.mission-compact-action-btn--card-menu.mission-compact-action-btn--secondary:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--secondary:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--secondary:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--secondary:focus-visible,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--edit:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--edit:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--edit:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--edit:focus-visible {
  background: color-mix(in srgb, var(--warning) 20%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
}

.mission-compact-action-btn--card-menu.mission-compact-action-btn--ghost:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--ghost:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--ghost:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--ghost:focus-visible,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--neutral:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--neutral:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--neutral:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--neutral:focus-visible {
  background: color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--info) 18%, var(--border-default));
}

.mission-compact-action-btn--card-menu.mission-compact-action-btn--muted:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--muted:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--muted:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--muted:focus-visible,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--archive:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--archive:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--archive:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--archive:focus-visible {
  background: color-mix(in srgb, var(--surface-secondary) 94%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border-default));
}

.mission-compact-action-btn--primary .mission-compact-action-btn__icon {
  background: color-mix(in srgb, var(--info) 12%, var(--surface-primary));
}

.mission-compact-action-btn--success .mission-compact-action-btn__icon {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
}

.mission-compact-action-btn--secondary .mission-compact-action-btn__icon,
.mission-compact-action-btn--edit .mission-compact-action-btn__icon {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-primary));
}

.mission-compact-action-btn--ghost .mission-compact-action-btn__icon,
.mission-compact-action-btn--neutral .mission-compact-action-btn__icon {
  background: color-mix(in srgb, var(--info) 10%, var(--surface-primary));
}

.mission-compact-action-btn--muted .mission-compact-action-btn__icon,
.mission-compact-action-btn--archive .mission-compact-action-btn__icon {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-secondary));
}

.mission-compact-action-btn--danger {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
}

.mission-compact-action-btn--danger .mission-compact-action-btn__icon {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-primary));
}

.mission-compact-action-btn--card-menu.mission-compact-action-btn--danger:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--danger:focus-visible,
.mission-compact-action-btn--sheet.mission-compact-action-btn--danger:hover,
.mission-compact-action-btn--sheet.mission-compact-action-btn--danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 15%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-default));
}

.mission-compact-action-btn--danger-zone {
  margin-top: 4px;
}

.mission-compact-actions-sheet {
  position: fixed;
  inset: 0;
  z-index: 1160;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.mission-compact-actions-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mission-compact-actions-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.44);
  backdrop-filter: blur(6px);
}

.mission-compact-actions-sheet__panel {
  position: relative;
  width: min(100%, 420px);
  padding: 16px;
  border-radius: 22px 22px 0 0;
  background: color-mix(in srgb, var(--surface-primary) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 58%, transparent);
  box-shadow: 0 -16px 40px rgba(15, 23, 42, 0.26);
  transform: translateY(18px);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mission-compact-actions-sheet.is-open .mission-compact-actions-sheet__panel {
  transform: translateY(0);
}

.mission-compact-actions-sheet__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.mission-compact-actions-sheet__heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mission-compact-actions-sheet__eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mission-compact-actions-sheet__title {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.mission-compact-actions-sheet__items {
  display: grid;
  gap: 8px;
}

.mission-compact-action-btn--sheet {
  min-height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
}

.mission-compact-action-btn__label {
  font-size: 15px;
  font-weight: 700;
}

.mission-compact-action-btn--card-menu .mission-compact-action-btn__label {
  font-size: 14px;
}

.mission-compact-actions-sheet__close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--border-default) 62%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 92%, transparent);
  color: var(--text-primary);
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.32);
}

.mission-compact-actions-sheet__close:hover,
.mission-compact-actions-sheet__close:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 36%, var(--border-default));
  background: color-mix(in srgb, var(--surface-primary) 96%, transparent);
}

.mission-card::before,
.mission-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mission-card::before {
  background-image: var(--mission-cover-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.mission-card::after {
  background:
    radial-gradient(circle at center, rgba(15, 23, 42, 0.03) 0%, rgba(15, 23, 42, 0.22) 40%, rgba(15, 23, 42, 0.78) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.56));
}

.mission-card.has-cover::before,
.mission-card.has-cover::after {
  opacity: 1;
}

.mission-card > * {
  position: relative;
  z-index: 1;
}

.mission-card.has-cover {
  border-color: color-mix(in srgb, var(--border-default) 72%, rgba(255, 255, 255, 0.24));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.mission-card:hover {
  border-color: var(--border-strong);
}

[data-theme="light"] .mission-card,
html:not([data-theme="dark"]) .mission-card {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      color-mix(in srgb, var(--surface-secondary) 80%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--border-default) 24%, transparent);
  box-shadow:
    0 20px 34px -34px rgba(83, 58, 23, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .mission-card:hover,
html:not([data-theme="dark"]) .mission-card:hover {
  border-color: color-mix(in srgb, var(--accent-500) 10%, var(--border-default));
  box-shadow:
    0 24px 40px -34px rgba(83, 58, 23, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.mission-card.has-cover .mission-card-title,
.mission-card.has-cover .mission-card-description,
.mission-card.has-cover .mission-card-meta,
.mission-card.has-cover .mission-start-progress {
  color: #F8FAFC;
}

.mission-card.has-cover .mission-card-footer {
  border-top-color: rgba(248, 250, 252, 0.18);
}

.mission-card.has-cover .mission-target-status {
  color: #F8FAFC;
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(248, 250, 252, 0.18);
}

.mission-card.has-cover .mission-card-header .mission-deadline-badge {
  backdrop-filter: blur(8px);
  border-color: rgba(248, 250, 252, 0.22);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.mission-card.has-cover .mission-footer-right .btn,
.mission-card.has-cover .mission-card-actions .btn,
.mission-card.has-cover .mission-card-actions .btn.is-disabled,
.mission-card.has-cover .mission-card-actions .btn:disabled {
  background: rgba(15, 23, 42, 0.38);
  color: #F8FAFC;
  border-color: rgba(248, 250, 252, 0.24);
  backdrop-filter: blur(8px);
}

.mission-card.has-cover .mission-footer-right .btn:hover,
.mission-card.has-cover .mission-card-actions .btn:hover,
.mission-card.has-cover .mission-footer-right .btn:focus-visible,
.mission-card.has-cover .mission-card-actions .btn:focus-visible {
  background: rgba(15, 23, 42, 0.52);
  color: #FFFFFF;
  border-color: rgba(248, 250, 252, 0.32);
}

.mission-card.has-cover .mission-card-actions [data-action="complete-mission"] {
  background: rgba(22, 163, 74, 0.28);
  color: #ECFDF5;
  border-color: rgba(134, 239, 172, 0.42);
}

.mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:hover,
.mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:focus-visible {
  background: rgba(22, 163, 74, 0.36);
  color: #FFFFFF;
  border-color: rgba(167, 243, 208, 0.54);
}

[data-theme="light"] .mission-card.has-cover::after,
html:not([data-theme="dark"]) .mission-card.has-cover::after {
  background:
    linear-gradient(180deg, rgba(35, 24, 13, 0.24) 0%, rgba(35, 24, 13, 0.1) 18%, rgba(255, 249, 240, 0.04) 34%, rgba(92, 63, 24, 0.14) 58%, rgba(27, 20, 13, 0.26) 100%),
    radial-gradient(circle at 18% 12%, rgba(255, 252, 247, 0.34) 0%, rgba(255, 252, 247, 0.08) 24%, transparent 54%),
    radial-gradient(circle at 52% 4%, rgba(35, 24, 13, 0.2) 0%, rgba(35, 24, 13, 0.09) 28%, transparent 62%),
    radial-gradient(circle at 82% 120%, rgba(156, 106, 41, 0.12) 0%, transparent 34%);
}

[data-theme="light"] .mission-card.has-cover,
html:not([data-theme="dark"]) .mission-card.has-cover {
  border-color: color-mix(in srgb, var(--border-default) 62%, rgba(255, 255, 255, 0.72));
  box-shadow:
    0 22px 38px -34px rgba(97, 72, 32, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

[data-theme="light"] .mission-card.has-cover .mission-card-title,
[data-theme="light"] .mission-card.has-cover .mission-card-description,
[data-theme="light"] .mission-card.has-cover .mission-card-meta,
[data-theme="light"] .mission-card.has-cover .mission-start-progress,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-title,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-description,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-meta,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-start-progress {
  color: rgba(255, 252, 248, 0.985);
  text-shadow:
    0 1px 2px rgba(20, 14, 8, 0.3),
    0 7px 20px rgba(20, 14, 8, 0.24);
}

[data-theme="light"] .mission-card.has-cover .mission-card-title,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-title {
  text-shadow:
    0 1px 2px rgba(20, 14, 8, 0.38),
    0 10px 24px rgba(20, 14, 8, 0.28),
    0 0 0.7px rgba(20, 14, 8, 0.28);
  -webkit-text-stroke: 0.22px rgba(20, 14, 8, 0.2);
}

[data-theme="light"] .mission-card.has-cover .mission-card-side .mission-target-status,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-side .mission-target-status {
  color: rgba(244, 252, 246, 0.995);
  text-shadow:
    0 1px 2px rgba(20, 14, 8, 0.32),
    0 7px 18px rgba(20, 14, 8, 0.24),
    0 0 0.55px rgba(20, 14, 8, 0.26);
}

[data-theme="light"] .mission-card.has-cover .mission-card-header .mission-deadline-badge,
[data-theme="light"] .mission-card.has-cover .mission-footer-right .btn,
[data-theme="light"] .mission-card.has-cover .mission-card-actions .btn,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-header .mission-deadline-badge,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-footer-right .btn,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions .btn {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.84) 0%, rgba(247, 239, 227, 0.72) 100%);
  color: #382515;
  border-color: rgba(198, 170, 127, 0.34);
  backdrop-filter: blur(8px) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 22px -24px rgba(94, 67, 28, 0.14);
}

[data-theme="light"] .mission-card.has-cover .mission-footer-right .btn:hover,
[data-theme="light"] .mission-card.has-cover .mission-card-actions .btn:hover,
[data-theme="light"] .mission-card.has-cover .mission-footer-right .btn:focus-visible,
[data-theme="light"] .mission-card.has-cover .mission-card-actions .btn:focus-visible,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-footer-right .btn:hover,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions .btn:hover,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-footer-right .btn:focus-visible,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions .btn:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.9) 0%, rgba(249, 242, 231, 0.8) 100%);
  color: #2f2012;
  border-color: rgba(190, 158, 113, 0.46);
}

[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"],
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"] {
  background: linear-gradient(180deg, rgba(243, 252, 246, 0.88) 0%, rgba(232, 247, 238, 0.8) 100%);
  color: #166534;
  border-color: rgba(74, 222, 128, 0.24);
}

[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:hover,
[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:focus-visible,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:hover,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:focus-visible {
  background: linear-gradient(180deg, rgba(239, 250, 243, 0.94) 0%, rgba(229, 246, 236, 0.88) 100%);
  color: #14532d;
  border-color: rgba(74, 222, 128, 0.36);
}

.mission-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mission-card-header-main {
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 0;
}

.mission-card-side {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
  max-width: min(42%, 220px);
}

.mission-card-header .mission-deadline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.1;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
}

.mission-card-header .mission-deadline-badge.mission-deadline-badge--critical {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 74%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border-default));
}

.mission-card-header .mission-deadline-badge.mission-deadline-badge--warning {
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 72%, var(--text-primary));
  border-color: color-mix(in srgb, var(--warning) 26%, var(--border-default));
}

.mission-card-header .mission-deadline-badge.mission-deadline-badge--info {
  background: color-mix(in srgb, var(--info, #53a9ce) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--info, #53a9ce) 76%, var(--text-primary));
  border-color: color-mix(in srgb, var(--info, #53a9ce) 24%, var(--border-default));
}

.mission-card-header .mission-deadline-badge.mission-deadline-badge--neutral,
.mission-card-header .mission-deadline-badge.mission-deadline-badge--none {
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--border-default) 82%, transparent);
}

.mission-card-header .mission-deadline-badge.mission-deadline-badge--expired {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border-default));
}

.mission-card-title {
  font-size: calc(var(--text-base) * 1.14);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--leading-tight);
}

.mission-card-description {
  font-size: calc(var(--text-sm) * 1.1);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mission-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: calc(var(--text-xs) * 1.1);
  color: var(--text-tertiary);
}

.mission-card-meta--gallery {
  gap: 6px;
  margin-top: -2px;
  margin-bottom: 0;
}

.mission-card-meta--gallery .mission-habit-badge {
  background: color-mix(in srgb, var(--hb-bg, #6B7280) 14%, rgba(248, 250, 252, 0.04));
  color: color-mix(in srgb, var(--hb-fg, #F8FAFC) 74%, var(--text-primary));
  border-color: color-mix(in srgb, var(--hb-bg, #6B7280) 16%, rgba(248, 250, 252, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mission-habit-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  background: color-mix(in srgb, var(--hb-bg, #6B7280) 11%, var(--surface-primary));
  color: color-mix(in srgb, var(--hb-fg, #F8FAFC) 72%, var(--text-primary));
  border-radius: var(--radius-full);
  font-size: calc(var(--text-xs) * 1.08);
  font-weight: var(--font-medium);
  border: 1px solid color-mix(in srgb, var(--hb-bg, #6B7280) 16%, var(--border-default));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .mission-habit-badge,
html:not([data-theme="dark"]) .mission-habit-badge {
  background: color-mix(in srgb, var(--hb-bg, #6B7280) 9%, rgba(255, 255, 255, 0.82));
  color: color-mix(in srgb, var(--text-primary) 78%, var(--hb-bg, #6B7280) 22%);
  border-color: color-mix(in srgb, var(--hb-bg, #6B7280) 12%, var(--border-default));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 16px -24px rgba(76, 53, 22, 0.08);
}

.mission-habit-badge.removed {
  background: var(--danger-light);
  color: var(--danger-dark);
}

.mission-card.has-cover .mission-habit-badge,
.mission-history-item.has-cover .mission-habit-badge,
.mission-detail-habit-wrap .mission-habit-badge {
  background: color-mix(in srgb, var(--hb-bg, #6B7280) 12%, rgba(15, 23, 42, 0.54));
  color: color-mix(in srgb, var(--hb-fg, #F8FAFC) 82%, #F8FAFC);
  border-color: color-mix(in srgb, var(--hb-bg, #6B7280) 18%, rgba(248, 250, 252, 0.16));
  backdrop-filter: blur(10px) saturate(1.02);
}

[data-theme="light"] .mission-card.has-cover .mission-habit-badge,
[data-theme="light"] .mission-history-item.has-cover .mission-habit-badge,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-habit-badge,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-habit-badge {
  background: color-mix(in srgb, var(--hb-bg, #6B7280) 8%, rgba(255, 251, 245, 0.48));
  color: color-mix(in srgb, var(--text-primary) 68%, var(--hb-bg, #6B7280) 32%);
  border-color: color-mix(in srgb, var(--hb-bg, #6B7280) 10%, rgba(224, 201, 169, 0.32));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 18px -24px rgba(94, 67, 28, 0.06);
}

[data-theme="light"] .mission-compact-row,
html:not([data-theme="dark"]) .mission-compact-row {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.84) 0%,
      color-mix(in srgb, var(--surface-secondary) 78%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--border-default) 28%, transparent);
  box-shadow:
    0 22px 34px -34px rgba(76, 53, 22, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme="light"] .mission-compact-row__deadline,
html:not([data-theme="dark"]) .mission-compact-row__deadline {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.86) 0%,
      color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--border-default) 34%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 18px -26px rgba(76, 53, 22, 0.12);
}

[data-theme="light"] .mission-compact-row__menu-trigger,
html:not([data-theme="dark"]) .mission-compact-row__menu-trigger {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.84) 0%,
      color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary)) 100%);
  border-color: color-mix(in srgb, var(--border-default) 24%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 20px -24px rgba(76, 53, 22, 0.12);
}

[data-theme="light"] .mission-compact-row__menu-trigger:hover,
[data-theme="light"] .mission-compact-row__menu-trigger:focus-visible,
[data-theme="light"] .mission-compact-row__menu-trigger[aria-expanded="true"],
html:not([data-theme="dark"]) .mission-compact-row__menu-trigger:hover,
html:not([data-theme="dark"]) .mission-compact-row__menu-trigger:focus-visible,
html:not([data-theme="dark"]) .mission-compact-row__menu-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent-500) 16%, var(--border-default));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 24px -24px rgba(76, 53, 22, 0.14);
}

.mission-start-date {
  color: var(--text-muted);
}

.mission-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.mission-card-actions [data-action="complete-mission"] {
  background: color-mix(in srgb, var(--success) 16%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 82%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border-default));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--success) 12%, transparent);
}

.mission-card-actions [data-action="complete-mission"]:hover,
.mission-card-actions [data-action="complete-mission"]:focus-visible {
  background: color-mix(in srgb, var(--success) 24%, var(--surface-primary));
  color: #ffffff;
  border-color: color-mix(in srgb, var(--success) 62%, var(--border-default));
}

.mission-card-actions [data-action="complete-mission"]:active {
  background: color-mix(in srgb, var(--success) 20%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--success) 54%, var(--border-default));
}

.mission-card-actions .btn.is-disabled,
.mission-card-actions .btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
  box-shadow: none;
}

.mission-card-actions [data-action="complete-mission"].is-disabled,
.mission-card-actions [data-action="complete-mission"]:disabled {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 58%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-default));
  box-shadow: none;
  opacity: 1;
}

.mission-card-actions [data-action="complete-mission"].is-disabled:hover,
.mission-card-actions [data-action="complete-mission"].is-disabled:focus-visible,
.mission-card-actions [data-action="complete-mission"]:disabled:hover,
.mission-card-actions [data-action="complete-mission"]:disabled:focus-visible {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 58%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-default));
}

.mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled,
.mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled,
.mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled:hover,
.mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled:focus-visible,
.mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled:hover,
.mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled:focus-visible {
  background: rgba(34, 197, 94, 0.18);
  color: rgba(236, 253, 245, 0.82);
  border-color: rgba(134, 239, 172, 0.28);
  box-shadow: none;
  opacity: 1;
}

[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled,
[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled,
[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled:hover,
[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled:focus-visible,
[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled:hover,
[data-theme="light"] .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled:focus-visible,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled:hover,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"].is-disabled:focus-visible,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled:hover,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-actions [data-action="complete-mission"]:disabled:focus-visible {
  background: rgba(220, 252, 231, 0.76);
  color: rgba(22, 101, 52, 0.78);
  border-color: rgba(134, 239, 172, 0.44);
}

.mission-target-status {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: color-mix(in srgb, var(--success) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
  background: color-mix(in srgb, var(--success) 11%, var(--surface-primary));
  border-radius: var(--radius-md);
  padding: 7px 10px;
}

.mission-target-status--reached {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border-default));
}

.mission-card-side .mission-target-status {
  display: block;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  overflow: visible;
  color: color-mix(in srgb, var(--success) 72%, var(--text-primary));
}

.mission-card.has-cover .mission-card-side .mission-target-status {
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--success) 72%, #F8FAFC);
  text-shadow: 0 1px 10px rgba(15, 23, 42, 0.24);
}

/* =============================================
   MISSION CARD — TARGET SLOT IN FOOTER
   Stable position inside footer, above action buttons.
   ============================================= */

.mission-card-target-slot {
  width: 100%;
  margin-bottom: var(--space-2);
}

.mission-card-target-slot .mission-target-status {
  margin: 0;
}

/* =============================================
   MISSION DETAIL — COVER HEADER BUTTON
   "Cambia copertina" inside the hero/cover area.
   ============================================= */

.mission-detail-cover-header-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.48);
  color: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(248, 250, 252, 0.14);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
}

.mission-detail-header:hover .mission-detail-cover-header-btn,
.mission-detail-cover-header-btn:focus-visible {
  opacity: 1;
}

.mission-detail-cover-header-btn:hover {
  background: rgba(15, 23, 42, 0.68);
  color: #f8fafc;
}

[data-theme="light"] .mission-detail-cover-header-btn,
html:not([data-theme="dark"]) .mission-detail-cover-header-btn {
  background: rgba(255, 255, 255, 0.62);
  color: rgba(30, 20, 10, 0.78);
  border-color: rgba(148, 120, 80, 0.14);
}

[data-theme="light"] .mission-detail-cover-header-btn:hover,
html:not([data-theme="dark"]) .mission-detail-cover-header-btn:hover {
  background: rgba(255, 255, 255, 0.82);
  color: rgba(30, 20, 10, 0.95);
}

/* =============================================
   MISSION HISTORY — HABIT ROW
   Dedicated row for habit badge in history cards.
   ============================================= */

.mission-history-habit {
  margin: var(--space-1) 0 var(--space-2);
}

/* =============================================
   RESPONSIVE — MISSION CARDS
   ============================================= */

@media (max-width: 359px) {
  .mission-card {
    padding: var(--space-3);
  }

  .mission-card-title {
    font-size: calc(var(--text-sm) * 1.08);
  }

  .mission-habit-badge {
    font-size: calc(var(--text-xs) * 0.98);
    padding: var(--space-0-5) var(--space-1);
  }
}

/* Missions History */
.missions-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.missions-history-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.missions-history-title {
  font-size: calc(var(--text-sm) * 1.1);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.mission-history-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.mission-history-item::before,
.mission-history-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mission-history-item::before {
  background-image: var(--mission-cover-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.mission-history-item::after {
  background:
    radial-gradient(circle at center, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.2) 42%, rgba(15, 23, 42, 0.68) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.5));
}

.mission-history-item.has-cover::before,
.mission-history-item.has-cover::after {
  opacity: 1;
}

.mission-history-item > * {
  position: relative;
  z-index: 1;
}

.mission-history-item.completed {
  border-left: 3px solid var(--success);
}

.mission-history-item.archived:not(.has-cover) {
  opacity: 0.8;
}

.mission-history-item.has-cover .mission-history-title,
.mission-history-item.has-cover .mission-history-meta,
.mission-history-item.has-cover .mission-duration,
.mission-history-item.has-cover .mission-completion-note,
.mission-history-item.has-cover .mission-history-icon,
.mission-history-item.has-cover .mission-start-date,
.mission-history-item.has-cover .mission-completed-date {
  color: #F8FAFC;
}

[data-theme="light"] .mission-history-item.has-cover .mission-history-title,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-title {
  text-shadow:
    0 1px 2px rgba(20, 14, 8, 0.38),
    0 10px 24px rgba(20, 14, 8, 0.28),
    0 0 0.7px rgba(20, 14, 8, 0.28);
  -webkit-text-stroke: 0.22px rgba(20, 14, 8, 0.2);
}

[data-theme="light"] .mission-history-item.has-cover .mission-history-meta,
[data-theme="light"] .mission-history-item.has-cover .mission-duration,
[data-theme="light"] .mission-history-item.has-cover .mission-completion-note,
[data-theme="light"] .mission-history-item.has-cover .mission-start-date,
[data-theme="light"] .mission-history-item.has-cover .mission-completed-date,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-meta,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-duration,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-completion-note,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-start-date,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-completed-date {
  text-shadow:
    0 1px 2px rgba(20, 14, 8, 0.3),
    0 7px 20px rgba(20, 14, 8, 0.24);
}

.mission-history-item.has-cover .mission-history-actions {
  border-top-color: rgba(248, 250, 252, 0.18);
}

.mission-history-item.has-cover .mission-history-actions .btn {
  background: rgba(15, 23, 42, 0.38);
  color: #F8FAFC;
  border-color: rgba(248, 250, 252, 0.24);
  backdrop-filter: blur(8px);
}

.mission-history-item.has-cover .mission-history-actions .btn:hover,
.mission-history-item.has-cover .mission-history-actions .btn:focus-visible {
  background: rgba(15, 23, 42, 0.52);
  color: #FFFFFF;
  border-color: rgba(248, 250, 252, 0.3);
}

.mission-history-item.has-cover .badge {
  backdrop-filter: blur(8px);
}

.mission-history-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mission-history-icon {
  font-size: var(--text-xl);
}

.mission-history-title {
  font-size: calc(var(--text-base) * 1.12);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.mission-history-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: calc(var(--text-xs) * 1.1);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.mission-duration {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.mission-completion-note {
  font-size: calc(var(--text-sm) * 1.1);
  font-style: italic;
  color: var(--text-secondary);
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-tertiary);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--accent-500);
}

.mission-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.mission-history-actions .btn-history-reactivate {
  background: color-mix(in srgb, var(--success) 7%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border-default));
  box-shadow: none;
}

.mission-history-actions .btn-history-reactivate:hover,
.mission-history-actions .btn-history-reactivate:focus-visible {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 42%, var(--border-default));
}

.mission-history-actions .btn-danger {
  background: color-mix(in srgb, var(--danger) 6%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 70%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--border-default));
  box-shadow: none;
}

.mission-history-actions .btn-danger:hover,
.mission-history-actions .btn-danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border-default));
}

.mission-history-actions [data-action="view-mission"] {
  border: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
}

.mission-history-actions [data-action="view-mission"]:hover,
.mission-history-actions [data-action="view-mission"]:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 32%, var(--border-default));
}

[data-theme="light"] .mission-history-item.has-cover::after,
html:not([data-theme="dark"]) .mission-history-item.has-cover::after {
  background:
    linear-gradient(180deg, rgba(35, 24, 13, 0.24) 0%, rgba(35, 24, 13, 0.1) 18%, rgba(255, 249, 240, 0.04) 34%, rgba(92, 63, 24, 0.14) 58%, rgba(27, 20, 13, 0.24) 100%),
    radial-gradient(circle at 18% 14%, rgba(255, 252, 247, 0.3) 0%, rgba(255, 252, 247, 0.08) 24%, transparent 54%),
    radial-gradient(circle at 52% 6%, rgba(35, 24, 13, 0.18) 0%, rgba(35, 24, 13, 0.09) 28%, transparent 62%);
}

[data-theme="light"] .mission-history-item.has-cover,
html:not([data-theme="dark"]) .mission-history-item.has-cover {
  border-color: color-mix(in srgb, var(--border-default) 62%, rgba(255, 255, 255, 0.7));
  box-shadow:
    0 18px 32px -32px rgba(97, 72, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .mission-history-item.has-cover .mission-history-actions,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-actions {
  border-top-color: rgba(255, 251, 245, 0.22);
}

[data-theme="light"] .mission-history-item.has-cover .mission-history-actions .btn,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-actions .btn {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.84) 0%, rgba(247, 239, 227, 0.72) 100%);
  color: #382515;
  border-color: rgba(198, 170, 127, 0.34);
  backdrop-filter: blur(8px) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 22px -24px rgba(94, 67, 28, 0.12);
}

[data-theme="light"] .mission-history-item.has-cover .mission-history-actions .btn:hover,
[data-theme="light"] .mission-history-item.has-cover .mission-history-actions .btn:focus-visible,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-actions .btn:hover,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-actions .btn:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.9) 0%, rgba(249, 242, 231, 0.8) 100%);
  color: #2f2012;
  border-color: rgba(190, 158, 113, 0.46);
}

[data-theme="light"] .mission-history-item.has-cover .mission-history-actions .btn-history-reactivate,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-actions .btn-history-reactivate {
  background: linear-gradient(180deg, rgba(243, 252, 246, 0.88) 0%, rgba(232, 247, 238, 0.8) 100%);
  color: #166534;
  border-color: rgba(74, 222, 128, 0.24);
}

[data-theme="light"] .mission-history-item.has-cover .mission-history-actions .btn-danger,
html:not([data-theme="dark"]) .mission-history-item.has-cover .mission-history-actions .btn-danger {
  background: linear-gradient(180deg, rgba(255, 248, 247, 0.88) 0%, rgba(252, 238, 235, 0.8) 100%);
  color: #b42318;
  border-color: rgba(244, 63, 94, 0.14);
}

/* Mission Modals */
.mission-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.mission-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.mission-modal-lg {
  max-width: 560px;
}

.mission-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.mission-modal .modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.mission-modal .modal-body {
  padding: var(--space-5);
}

.mission-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.mission-modal .ks-modal__body {
  padding: var(--space-5);
}

.mission-modal .ks-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mission-modal .ks-modal__footer .btn {
  min-height: 44px;
}

.mission-title-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.mission-title-input-shell {
  position: relative;
  min-width: 0;
  flex: 1 1 0%;
}

.mission-title-input-wrap .form-input {
  position: relative;
  z-index: 1;
  background: transparent;
}

.mission-cover-thumb {
  position: relative;
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-default) 76%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 92%, transparent);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.mission-cover-thumb:hover {
  border-color: color-mix(in srgb, var(--accent-500) 42%, var(--border-default));
  transform: translateY(-1px);
}

.mission-cover-thumb:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-500) 58%, var(--border-default));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 22%, transparent);
}

.mission-cover-thumb__image,
.mission-cover-thumb__icon {
  position: absolute;
  inset: 0;
}

.mission-cover-thumb__image {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mission-cover-thumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mission-cover-thumb__icon svg {
  width: 20px;
  height: 20px;
}

.mission-cover-thumb__remove {
  position: absolute;
  top: 1px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.74);
  color: #F8FAFC;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mission-cover-thumb:not(.is-empty) .mission-cover-thumb__image,
.mission-cover-thumb:not(.is-empty) .mission-cover-thumb__remove {
  opacity: 1;
}

.mission-cover-thumb:not(.is-empty) .mission-cover-thumb__icon {
  opacity: 0;
}

.mission-name-placeholder {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  transform: translateY(-50%);
  pointer-events: none;
  max-width: calc(100% - (var(--space-4) * 2));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-tertiary);
  font-size: var(--text-base);
  line-height: 1.1;
  opacity: 1;
  transition: opacity 220ms ease;
}

.mission-name-placeholder.is-hidden {
  opacity: 0;
}

.mission-title-input-wrap .form-input:focus-visible + .mission-name-placeholder {
  opacity: 0.72;
}

.mission-name-placeholder .mission-fog-word {
  display: inline-flex;
  margin-right: 0.35em;
}

.mission-name-placeholder .mission-fog-letter {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(8px) scale(0.98);
}

.mission-name-placeholder .mission-fog-letter.is-animate {
  animation: missionPlaceholderFogLetter 620ms cubic-bezier(0.2, 0.68, 0.22, 1) forwards;
}

@keyframes missionPlaceholderFogLetter {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(8px) scale(0.98);
  }
  35% {
    opacity: 0.72;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-name-placeholder .mission-fog-letter,
  .mission-name-placeholder .mission-fog-letter.is-animate {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.mission-date-picker-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .mission-date-picker-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.mission-date-picker-row.mission-date-picker-row--disabled-deadline .mission-date-field--deadline .mission-date-trigger {
  border-color: color-mix(in srgb, var(--border-default) 82%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 72%, var(--surface-primary));
}

.mission-date-field {
  margin: 0;
}

.mission-habit-group {
  margin-top: 2px;
  margin-bottom: 10px;
}

.mission-title-habit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  align-items: start;
  gap: 12px;
}

.mission-title-habit-row > .form-group {
  margin: 0;
}

.mission-title-habit-row .mission-habit-group {
  align-self: end;
}

.mission-title-habit-row .mission-habit-group .form-label,
.mission-title-habit-row .mission-habit-group .form-hint {
  font-size: var(--text-xs);
}

.mission-title-habit-row .mission-habit-group .form-hint {
  line-height: 1.35;
}

@media (max-width: 900px) {
  .mission-title-habit-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mission-title-habit-row .mission-habit-group {
    align-self: stretch;
  }
}

.mission-target-mode-group {
  margin-top: 0;
}

.mission-date-trigger {
  min-height: 64px;
}

.mission-date-trigger .habit-start-date-trigger__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-date-trigger:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 24%, transparent);
}

.mission-date-trigger:disabled {
  opacity: 0.74;
  cursor: not-allowed;
}

.mission-date-trigger:disabled .habit-start-date-trigger__hint {
  color: color-mix(in srgb, var(--text-tertiary) 86%, transparent);
}

.mission-date-popover {
  min-width: 320px;
  max-width: min(92vw, 360px);
  max-height: min(82vh, 520px);
}

.mission-deadline-segmented,
.mission-mode-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
}

.mission-mode-segment {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 10px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mission-mode-segment.is-active {
  color: color-mix(in srgb, var(--accent-700, var(--accent-500)) 78%, var(--text-primary));
  border-color: color-mix(in srgb, var(--accent-500) 38%, var(--border-default));
  background: color-mix(in srgb, var(--accent-500) 12%, var(--surface-primary));
}

.mission-mode-segment.is-disabled {
  opacity: 0.58;
}

.mission-mode-segment__label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mission-mode-segment__text,
.mission-mode-segment__line {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  font-weight: var(--font-semibold);
  color: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mission-mode-panel {
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 96%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.mission-mode-panel__content {
  display: grid;
  gap: 10px;
}

.mission-mode-panel__content[hidden] {
  display: none !important;
}

.mission-mode-panel__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.mission-mode-panel__description {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.mission-mode-panel__target-slot {
  min-width: 0;
}

.mission-mode-panel__target-field {
  margin: 0;
  display: grid;
  gap: 8px;
}

.mission-mode-panel__target-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
}

.mission-mode-panel__target-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mission-mode-panel__target-label {
  margin: 0;
}

.mission-mode-panel__target-input {
  width: 100%;
}

.mission-mode-panel__target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 112px);
  align-items: center;
  gap: 8px 12px;
}

.mission-mode-panel__target-field .form-label {
  margin: 0;
}

.mission-mode-panel__target-field .form-hint {
  margin: 0;
  min-width: 0;
}

.mission-mode-panel__helper,
.mission-mode-panel__availability {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.mission-mode-panel__availability {
  margin-top: 8px;
}

.mission-form-label-optional {
  margin-left: 0.55rem;
  font-size: 0.82em;
  opacity: 0.72;
}

.mission-date-popover__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mission-date-presets {
  margin-top: 2px;
}

.mission-cover-picker-modal {
  width: min(760px, calc(100% - 24px));
  max-width: 760px;
}

.mission-cover-picker-preview {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-secondary) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
}

.mission-cover-picker-preview__media,
.mission-cover-link-preview__media {
  min-height: 104px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-secondary) 94%, transparent), color-mix(in srgb, var(--surface-tertiary) 88%, transparent));
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
}

.mission-cover-picker-preview__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
}

.mission-cover-picker-preview__clear {
  align-self: flex-start;
  margin-top: var(--space-3);
}

.mission-cover-picker-preview__meta strong {
  font-size: var(--text-base);
  color: var(--text-primary);
}

.mission-cover-picker-preview__meta span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}

.mission-cover-picker-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
}

.mission-cover-picker-panel {
  display: none;
}

.mission-cover-picker-panel.is-active {
  display: block;
}

.mission-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--space-3);
}

.mission-cover-unsplash-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mission-cover-unsplash-suggestions[hidden] {
  display: none;
}

.mission-cover-unsplash-suggestions__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mission-cover-unsplash-suggestions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mission-cover-unsplash-suggestions__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mission-cover-unsplash-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-top: 4px;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.mission-cover-unsplash-chips::-webkit-scrollbar {
  display: none;
}

.mission-cover-unsplash-chip {
  --chip-accent: var(--accent-500);
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip-accent) 18%, var(--border-default));
  background: color-mix(in srgb, var(--chip-accent) 8%, rgba(15, 23, 42, 0.9));
  color: color-mix(in srgb, var(--chip-accent) 42%, #e5e7eb 58%);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.mission-cover-unsplash-chip:hover,
.mission-cover-unsplash-chip:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--chip-accent) 34%, var(--border-default));
  background: color-mix(in srgb, var(--chip-accent) 14%, rgba(15, 23, 42, 0.94));
  color: color-mix(in srgb, var(--chip-accent) 62%, #ffffff 38%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mission-cover-unsplash-chip.is-active {
  background: color-mix(in srgb, var(--chip-accent) 18%, rgba(15, 23, 42, 0.96));
  border-color: color-mix(in srgb, var(--chip-accent) 42%, var(--border-default));
  color: color-mix(in srgb, var(--chip-accent) 72%, #ffffff 28%);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mission-cover-unsplash-chip[data-unsplash-topic="reading"] {
  --chip-accent: #8b5cf6;
}

.mission-cover-unsplash-chip[data-unsplash-topic="travel"] {
  --chip-accent: #06b6d4;
}

.mission-cover-unsplash-chip[data-unsplash-topic="running"] {
  --chip-accent: #f97316;
}

.mission-cover-unsplash-chip[data-unsplash-topic="study"] {
  --chip-accent: #3b82f6;
}

.mission-cover-unsplash-chip[data-unsplash-topic="workout"] {
  --chip-accent: #ef4444;
}

.mission-cover-unsplash-chip[data-unsplash-topic="nature"] {
  --chip-accent: #22c55e;
}

.mission-cover-unsplash-chip[data-unsplash-topic="minimal"] {
  --chip-accent: #94a3b8;
}

.mission-cover-unsplash-chip[data-unsplash-topic="productivity"] {
  --chip-accent: #eab308;
}

.mission-cover-unsplash-chip[data-unsplash-topic="mindfulness"] {
  --chip-accent: #14b8a6;
}

.mission-cover-unsplash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.mission-cover-option {
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 90%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.mission-cover-option:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-500) 40%, var(--border-default));
}

.mission-cover-option.is-selected {
  border-color: color-mix(in srgb, var(--accent-500) 58%, var(--border-default));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-500) 16%, transparent);
}

.mission-cover-option__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: color-mix(in srgb, var(--surface-secondary) 94%, transparent);
}

.mission-cover-option__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mission-cover-option__title,
.mission-cover-option__meta {
  padding: 0 var(--space-3) var(--space-2);
}

.mission-cover-option__title {
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.mission-cover-option__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.mission-cover-picker-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed color-mix(in srgb, var(--border-default) 70%, transparent);
  border-radius: var(--radius-lg);
}

.mission-cover-search,
.mission-cover-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.mission-cover-link-preview {
  margin-top: var(--space-3);
}

.mission-cover-picker-footer {
  justify-content: flex-start;
}

.mission-segment-btn {
  min-height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.mission-segment-btn.is-disabled,
.mission-segment-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.mission-segment-btn.is-disabled:hover,
.mission-segment-btn:disabled:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--border-default) 70%, transparent);
}

.mission-segment-btn:hover {
  border-color: color-mix(in srgb, var(--accent-500) 24%, var(--border-default));
  color: var(--text-primary);
}

.mission-segment-btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-500) 48%, var(--border-default));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 22%, transparent);
}

.mission-segment-btn.is-active {
  color: color-mix(in srgb, var(--warning) 68%, var(--text-primary));
  border-color: color-mix(in srgb, var(--warning) 52%, var(--border-default));
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-primary));
}

.mission-modal .form-feedback {
  margin-top: var(--space-2);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.mission-modal .form-feedback:empty {
  display: none;
}

.mission-modal .form-feedback--error {
  display: block;
  padding: 10px 12px;
  color: color-mix(in srgb, var(--danger) 76%, var(--text-primary));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-primary));
  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--border-default));
}

.mission-modal .form-feedback--success {
  display: block;
  padding: 10px 12px;
  color: color-mix(in srgb, var(--success) 76%, var(--text-primary));
  background: color-mix(in srgb, var(--success) 10%, var(--surface-primary));
  border: 1px solid color-mix(in srgb, var(--success) 42%, var(--border-default));
}

@media (max-width: 640px) {
  .mission-modal {
    width: calc(100% - 16px);
    max-width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 18px;
  }

  .mission-modal .ks-modal__body {
    padding: var(--space-4);
  }

  .mission-modal .ks-modal__footer {
    padding: var(--space-3) var(--space-4);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .mission-modal .ks-modal__footer .btn {
    width: 100%;
    justify-content: center;
  }

  .mission-modal .ks-modal__footer:has(> :only-child) {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-date-picker-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mission-cover-picker-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-cover-picker-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-segment-btn {
    min-height: 38px;
    font-size: var(--text-xs);
  }
}

@media (max-width: 768px) {
  .mission-modal {
    width: calc(100% - 10px);
    max-height: calc(100vh - 10px);
    border-radius: 16px;
  }

  .mission-modal .ks-modal__header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-tertiary);
    padding: 16px 18px;
  }

  .mission-modal .ks-modal__body {
    padding: 14px 14px 16px;
  }

  .mission-modal .ks-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--surface-tertiary);
    padding: 10px 14px;
    gap: 10px;
  }

  .mission-date-trigger {
    min-height: 60px;
    padding: 10px 12px;
  }

  .mission-cover-picker-modal {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    max-height: min(70vh, 680px);
  }

  .mission-cover-picker-modal.is-open {
    transform: translateY(0);
  }

  .mission-cover-search,
  .mission-cover-link-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-segment-btn {
    min-height: 42px;
  }
}

/* Complete Mission Modal Header */
.mission-complete-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mission-complete-header {
  min-height: 164px;
  margin-bottom: 0;
}

.mission-complete-icon {
  font-size: 2.8rem;
}

.mission-complete-title {
  font-size: calc(var(--text-xl) * 1.05);
}

.mission-complete-dates {
  margin-bottom: 0;
}

.mission-complete-form {
  margin-top: var(--space-1);
}

.mission-complete-date-field {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 8px 12px;
}

.mission-complete-warning {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-secondary));
  border: 1px solid color-mix(in srgb, var(--warning) 26%, var(--border-default));
}

.mission-complete-warning__title {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
}

.mission-complete-warning__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.mission-complete-submit {
  background: color-mix(in srgb, var(--success) 82%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--success) 78%, var(--border-default));
  color: #ffffff;
}

.mission-complete-submit:hover,
.mission-complete-submit:focus-visible {
  background: color-mix(in srgb, var(--success) 92%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--success) 86%, var(--border-default));
  color: #ffffff;
}

.btn-mission-archive {
  background: color-mix(in srgb, var(--warning) 72%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 62%, var(--border-default));
  color: color-mix(in srgb, #3a2a0f 76%, var(--text-primary));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--warning) 14%, transparent);
}

.btn-mission-archive:hover,
.btn-mission-archive:focus-visible {
  background: color-mix(in srgb, var(--warning) 82%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 74%, var(--border-default));
  color: color-mix(in srgb, #2b1f0b 82%, var(--text-primary));
}

.mission-complete-detail-link {
  min-width: 0;
}

.mission-action-confirm-preview {
  margin-bottom: 0;
}

.mission-action-confirm-header .mission-detail-habit-wrap {
  margin-top: 2px;
  justify-content: center;
}

.mission-action-confirm-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 52%, transparent);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.mission-action-confirm-icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.mission-action-confirm-icon--archive {
  color: color-mix(in srgb, var(--warning) 82%, white);
  background: color-mix(in srgb, var(--warning) 18%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 36%, transparent);
}

.mission-action-confirm-icon--fail {
  color: color-mix(in srgb, var(--danger) 82%, white);
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 36%, transparent);
}

.mission-action-confirm-message {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-secondary) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 48%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.mission-action-confirm-modal--fail .mission-action-confirm-message {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 78%, var(--text-primary));
}

.mission-action-confirm-form {
  margin: 0;
}

.mission-complete-date-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}

.mission-complete-date-field .mission-complete-date-trigger {
  grid-column: 1;
  width: 100%;
}

.mission-target-status--inline {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
  font-size: 11px;
  line-height: 1.25;
  color: color-mix(in srgb, var(--success) 72%, var(--text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-complete-action .mission-target-status--inline {
  font-weight: 700;
  color: inherit;
  opacity: 0.92;
}

.mission-detail-status-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mission-detail-progress-panel,
.mission-detail-action-section {
  margin-bottom: var(--space-4);
  padding: calc(var(--space-3) + 2px) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-secondary) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
}

.mission-detail-progress-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mission-detail-progress-panel__header h5 {
  margin: 0 0 4px;
}

.mission-detail-progress-panel__header p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mission-detail-target-stats {
  margin-bottom: var(--space-3);
}

.mission-detail-target-stats .mission-stats-grid {
  margin: 0;
}

.mission-detail-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: var(--space-3);
}

.mission-detail-progress-summary__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 58%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.mission-detail-progress-summary__item:first-child {
  border-color: color-mix(in srgb, var(--info) 18%, var(--border-default));
}

.mission-detail-progress-summary__item strong {
  font-size: var(--text-base);
  color: var(--text-primary);
  white-space: nowrap;
}

.mission-detail-progress-summary__label {
  font-size: 11px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

.mission-detail-progress-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mission-detail-progress-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, 260px);
  gap: var(--space-3);
  align-items: end;
}

.mission-detail-progress-field {
  margin: 0;
}

.mission-detail-progress-field--date {
  min-width: 0;
}

.mission-detail-progress-field--date .form-input,
.mission-detail-progress-field--note .form-input {
  width: 100%;
  min-width: 0;
}

.mission-detail-progress-field--note {
  min-width: 0;
}

.mission-detail-progress-action {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  justify-content: center;
}

.mission-detail-progress-action .mission-action-btn__label {
  overflow: visible;
  text-overflow: initial;
}

.mission-detail-progress-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mission-note-counter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 92px;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
}

.mission-note-counter--field {
  display: flex;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
}

.mission-note-counter--inline {
  min-width: auto;
}

.mission-note-counter.is-limit {
  color: color-mix(in srgb, var(--danger) 74%, var(--text-primary));
}

.mission-detail-progress-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
  margin-bottom: 0;
}

.mission-detail-progress-panel .mission-progress-action-group {
  width: 100%;
  max-width: none;
}

.mission-progress-action-group--detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(54px, 0.45fr);
  gap: 8px;
}

.mission-detail-progress-panel .mission-progress-action .mission-action-btn__label {
  overflow: visible;
  text-overflow: initial;
}

.mission-progress-action-group--detail-panel .mission-progress-action {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.mission-progress-action-group--detail-panel .mission-progress-action--decrement {
  min-width: 0;
}

.mission-complete-progress-panel {
  display: block;
}

.mission-complete-progress-panel.hidden {
  display: none;
}

.mission-complete-progress-section {
  margin-bottom: 0;
}

.mission-complete-progress-toolbar {
  grid-template-columns: minmax(180px, 1fr) minmax(190px, 260px);
}

.mission-progress-action-group--completion {
  width: 100%;
}

.mission-detail-progress-btn {
  min-width: 88px;
}

.mission-detail-progress-date-trigger,
.mission-detail-progress-field--date .mission-date-trigger {
  width: 100%;
}

.mission-detail-progress-history {
  margin-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--border-default) 68%, transparent);
  padding-top: var(--space-3);
}

.mission-detail-progress-history summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.mission-detail-progress-history__empty {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
}

.mission-detail-progress-history__list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}

.mission-detail-progress-history__item {
  display: flex;
  gap: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 68%, transparent);
}

.mission-detail-progress-history__item.has-note,
.mission-detail-progress-history__item.is-editing {
  padding-block: 11px;
}

.mission-detail-progress-history__main {
  min-width: 0;
  display: grid;
  gap: 6px;
  width: 100%;
}

.mission-detail-progress-history__summary,
.mission-detail-progress-history__summary-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mission-detail-progress-history__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.mission-detail-progress-history__summary > .btn {
  flex: 0 0 auto;
}

.mission-detail-progress-history__summary-side {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.mission-detail-progress-history__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: 0;
}

.mission-detail-progress-history__actions .btn {
  flex: 0 0 auto;
}

.mission-detail-progress-history__note-action {
  white-space: nowrap;
}

.mission-detail-progress-history__summary-main {
  min-width: 0;
}

.mission-detail-progress-history__dot {
  color: var(--text-tertiary);
}

.mission-detail-progress-history__date,
.mission-detail-progress-history__progress {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mission-detail-progress-history__date-btn {
  padding-inline: 8px;
  border-radius: 999px;
}

.mission-detail-progress-history__date-edit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.mission-detail-progress-history__date-trigger {
  min-width: 168px;
}

.mission-detail-progress-history__date-trigger .habit-start-date-trigger__hint {
  white-space: nowrap;
}

.mission-detail-progress-history__date-input {
  width: 152px;
  min-width: 152px;
}

.mission-detail-progress-history__note-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.mission-detail-progress-history__note {
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.45;
}

.mission-detail-progress-history__note.is-empty {
  color: var(--text-tertiary);
  font-style: italic;
}

.mission-detail-progress-history__editor {
  display: grid;
  gap: var(--space-2);
}

.mission-detail-progress-history__editor-input-wrap {
  display: grid;
  gap: 6px;
}

.mission-detail-progress-history__editor-input {
  min-width: 0;
}

.mission-detail-progress-history__editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mission-detail-progress-history__delete {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
}

.mission-detail-progress-history__delete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}

.mission-detail-progress-history__delete-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mission-detail-progress-history__delta {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid transparent;
}

.mission-detail-progress-history__delta--positive {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 24%, transparent);
  color: color-mix(in srgb, var(--success) 74%, var(--text-primary));
}

.mission-detail-progress-history__delta--negative {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  color: color-mix(in srgb, var(--danger) 76%, var(--text-primary));
}

.mission-detail-complete-btn {
  width: 100%;
  justify-content: center;
}

/* Mission Detail Modal */
.mission-detail-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: calc(var(--space-4) + 54px) var(--space-4) var(--space-4);
  min-height: 198px;
  background: linear-gradient(135deg, var(--accent-bg), var(--success-light));
  border-radius: var(--radius-lg);
  text-align: center;
  flex-direction: column;
}

.mission-detail-header__badge-slot {
  position: absolute;
  top: var(--space-3);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  max-width: calc(50% - 12px);
}

.mission-detail-header__badge-stack {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: 6px;
  width: min(62%, 620px);
  min-width: 0;
}

.mission-detail-header__badge-stack .mission-detail-header__badge-slot {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  max-width: 100%;
}

.mission-detail-header__badge-slot--status {
  left: var(--space-3);
  justify-content: flex-start;
}

.mission-detail-header__badge-slot--mode {
  right: var(--space-3);
  justify-content: flex-end;
}

.mission-detail-header__badge-stack .mission-detail-header__badge-slot--mode {
  justify-content: flex-start;
}

.mission-detail-header__badge-slot > * {
  max-width: 100%;
}

.mission-detail-header__main {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: min(100%, 560px);
  padding-top: 6px;
}

.mission-detail-header::before,
.mission-detail-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mission-detail-header::before {
  background-image: var(--mission-cover-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.mission-detail-header::after {
  background:
    radial-gradient(circle at center, rgba(15, 23, 42, 0.03) 0%, rgba(15, 23, 42, 0.2) 40%, rgba(15, 23, 42, 0.76) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0.54));
}

.mission-detail-header.has-cover::before,
.mission-detail-header.has-cover::after {
  opacity: 1;
}

.mission-detail-header > *:not(.mission-detail-header__badge-slot):not(.mission-detail-header__badge-stack) {
  position: relative;
  z-index: 1;
}

.mission-detail-header > .mission-detail-cover-header-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  left: auto;
  bottom: auto;
  z-index: 3;
}

.mission-detail-trophy {
  font-size: 2.65rem;
}

.mission-detail-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.mission-detail-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4) 0;
  text-align: center;
}

.mission-detail-header.has-cover .mission-detail-title,
.mission-detail-header.has-cover .mission-detail-description,
.mission-detail-header.has-cover .mission-detail-trophy {
  color: #F8FAFC;
}

.mission-detail-header__mode-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

.mission-detail-header.has-cover .mission-status-badge,
.mission-detail-header.has-cover .mission-detail-header__mode-badge {
  box-shadow: 0 12px 24px -20px rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(6px);
}

.mission-detail-header.has-cover .mission-detail-header__mode-badge {
  background: rgba(15, 23, 42, 0.38);
  border-color: rgba(248, 250, 252, 0.2);
  color: #F8FAFC;
}

.mission-detail-header.has-cover .mission-action-confirm-icon--archive {
  color: #FCD34D;
}

.mission-detail-header.has-cover .mission-action-confirm-icon--fail {
  color: #FCA5A5;
}

.mission-detail-dates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mission-detail-dates:has(.mission-detail-date:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mission-detail-dates:has(.mission-detail-date:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mission-detail-date {
  text-align: center;
  padding: var(--space-3);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
}

.mission-detail-date .label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.mission-detail-date .value {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.mission-detail-habit {
  text-align: center;
  padding: var(--space-2) var(--space-4);
  background: var(--accent-bg);
  color: var(--text-accent);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin: 0 0 var(--space-4) 0;
  display: inline-block;
}

.mission-detail-habit-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-1) 0 0 0;
}

.mission-detail-header .mission-detail-habit-wrap {
  justify-content: center;
  margin: var(--space-2) 0 0 0;
}

.mission-detail-header.has-cover .mission-detail-habit-wrap .mission-habit-badge {
  background: color-mix(in srgb, var(--hb-bg, #6B7280) 12%, rgba(15, 23, 42, 0.54));
  color: color-mix(in srgb, var(--hb-fg, #F8FAFC) 82%, #F8FAFC);
  border-color: color-mix(in srgb, var(--hb-bg, #6B7280) 18%, rgba(248, 250, 252, 0.16));
  backdrop-filter: blur(4px);
}

.mission-detail-habit-wrap .mission-habit-badge {
  font-size: var(--text-sm);
  padding: 7px 14px;
}

.mission-detail-attribution {
  margin: 0 0 var(--space-4) 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: none;
}

.mission-detail-attribution a {
  color: inherit;
  font-weight: var(--font-semibold);
}

/* attribution removed, cover button moved to JS-rendered header */

.mission-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mission-detail-footer.hidden {
  display: none;
}

.mission-detail-footer__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.mission-detail-footer__primary {
  min-width: 0;
  width: 100%;
}

.mission-detail-footer__main > .btn {
  width: 100%;
  justify-content: center;
}

.mission-detail-footer .mission-complete-action {
  background: color-mix(in srgb, var(--success) 16%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 82%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border-default));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--success) 12%, transparent);
}

.mission-detail-footer .mission-complete-action:hover,
.mission-detail-footer .mission-complete-action:focus-visible {
  background: color-mix(in srgb, var(--success) 24%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 90%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 62%, var(--border-default));
}

.mission-detail-footer .mission-complete-action.is-disabled,
.mission-detail-footer .mission-complete-action:disabled {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 58%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-default));
  box-shadow: none;
  opacity: 1;
}

.mission-detail-footer__secondary {
  justify-self: end;
  display: flex;
  align-items: center;
}

.mission-detail-footer .mission-card-actions-trigger {
  min-width: 44px;
  min-height: 40px;
  padding-inline: 12px;
}

.missions-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.missions-page-header .page-header-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.missions-page-header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.missions-page-toolbar {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5);
}

.missions-page-toolbar__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.missions-page-toolbar__controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.missions-page-state-toggle {
  --chip-surface: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--chip-surface);
  border: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.missions-page-search,
.missions-page-sort {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.missions-page-toolbar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.missions-page-search .form-input,
.missions-page-sort .form-input {
  min-height: 44px;
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  border-color: color-mix(in srgb, var(--border-default) 72%, transparent);
}

.missions-page-state-toggle--chips {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding-inline-end: 2px;
}

.missions-page-state-toggle--chips::-webkit-scrollbar {
  display: none;
}

.missions-page-state-toggle--chips .mission-segment-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 8px 16px 10px;
  min-height: 0;
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-size: calc(var(--text-sm) * 0.97);
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
  transition:
    color 180ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 180ms ease;
}

.missions-page-state-toggle--chips .mission-segment-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-accent, var(--warning)) 84%, #ffffff 16%);
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition: opacity 180ms ease, transform 220ms ease;
}

.missions-page-state-toggle--chips .mission-segment-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--chip-accent, var(--warning)) 24%, var(--border-default));
  color: var(--text-primary);
}

.missions-page-state-toggle--chips .mission-segment-btn.is-active {
  background: color-mix(in srgb, var(--chip-accent, var(--warning)) 16%, rgba(15, 23, 42, 0.88));
  border-color: color-mix(in srgb, var(--chip-accent, var(--warning)) 40%, var(--border-default));
  color: color-mix(in srgb, var(--chip-accent, var(--warning)) 66%, #ffffff 34%);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--chip-accent, var(--warning)) 18%, transparent);
}

.missions-page-state-toggle--chips .mission-segment-btn.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.missions-page-state-toggle--chips .mission-segment-btn[data-state="all"] {
  --chip-accent: #D6A53A;
}

.missions-page-state-toggle--chips .mission-segment-btn[data-state="active"] {
  --chip-accent: #5F84C9;
}

.missions-page-state-toggle--chips .mission-segment-btn[data-state="completed"] {
  --chip-accent: #22C55E;
}

.missions-page-state-toggle--chips .mission-segment-btn[data-state="failed"] {
  --chip-accent: #F87171;
}

.missions-page-state-toggle--chips .mission-segment-btn[data-state="archived"] {
  --chip-accent: #94A3B8;
}

.missions-page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.missions-inline-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 960px) {
  .missions-page-toolbar__controls {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
}

@media (max-width: 640px) {
  .section-divider--profile-missions .section-divider-title {
    padding-right: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  #missions-card .app-card-header.missions-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  #missions-card .missions-card-copy,
  #missions-card .missions-card-title-row,
  #missions-card .missions-card-toolbar,
  #missions-card .missions-card-actions {
    width: 100%;
  }

  #missions-card .missions-card-title-main {
    min-width: 0;
    white-space: normal;
  }

  #missions-card .missions-card-title-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #missions-card .missions-card-toolbar {
    justify-content: flex-start;
  }

  .missions-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .missions-see-all-link,
  .section-divider-action-link {
    position: static;
    transform: none;
    min-height: 28px;
    padding: 0 10px;
    font-size: 10px;
  }

  #new-mission-btn {
    min-height: 29px;
    padding: 0 11px;
    font-size: 11px;
    align-self: flex-start;
  }

  .app-card-header-actions {
    gap: 8px;
  }

  .weight-card-header,
  .missions-card-header {
    gap: 10px;
  }

  .missions-card-title-row {
    gap: 6px;
  }

  .weight-goal-unit-toggle--header .weight-goal-unit-chip {
    min-width: 30px;
    min-height: 26px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .mission-compact-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 68px;
    padding: 12px 14px;
    gap: 10px;
  }

  .mission-compact-row__side {
    grid-column: 1 / 2;
    justify-content: flex-start;
    max-width: none;
  }

  .mission-compact-row__deadline {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
    text-align: left;
    max-width: none;
  }

  .mission-compact-row__menu-trigger {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    align-self: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .mission-compact-actions-radial {
    display: none;
  }

  .weight-bmi-main--compact {
    gap: 8px;
  }

  .weight-bmi-main--compact .weight-kpi-label,
  .weight-bmi-main--compact .bmi-status-text,
  .weight-bmi-main--compact .bmi-label {
    font-size: calc(var(--text-xs) * 1.04);
  }

  .weight-bmi-main--compact .bmi-value {
    font-size: calc(var(--text-lg) * 1.02);
  }

  .missions-page-header .page-header-body {
    align-items: stretch;
    flex-direction: column;
  }

  .mission-detail-dates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mission-detail-date {
    padding: 10px 7px;
  }

  .mission-detail-date .label {
    font-size: 10px;
    line-height: 1.18;
    margin-bottom: 4px;
  }

  .mission-detail-date .value {
    font-size: calc(var(--text-xs) * 1.04);
    line-height: 1.22;
  }

  .mission-detail-progress-form {
    grid-template-columns: 1fr;
  }

  .mission-detail-target-stats .mission-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mission-detail-target-stats .mission-stat-value {
    font-size: var(--text-base);
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mission-detail-target-stats .mission-stat--target-reached .mission-stat-value {
    font-size: var(--text-sm);
  }

  .mission-detail-target-stats .mission-stat-label {
    font-size: 10px;
    line-height: 1.25;
  }

  .mission-detail-progress-toolbar {
    grid-template-columns: 1fr;
  }

  .mission-complete-date-field {
    width: 100%;
  }

  .mission-detail-progress-history__note-row,
  .mission-detail-progress-history__editor-input-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .mission-complete-header {
    min-height: 148px;
  }

  .missions-page-toolbar {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .missions-page-toolbar__bar {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .missions-page-toolbar__controls {
    grid-template-columns: minmax(0, 1fr) 138px;
    gap: var(--space-2);
  }

}

.mission-detail-habit.removed {
  background: var(--danger-light);
  color: var(--danger-dark);
}

.mission-detail-stats {
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.mission-detail-stats h5 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-3) 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.mission-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.mission-stat {
  text-align: center;
}

.mission-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-accent);
}

.mission-detail-target-stats .mission-stat--target-reached .mission-stat-value {
  font-size: var(--text-base);
  line-height: 1.18;
}

@media (max-width: 640px) {
  .mission-detail-target-stats .mission-stat--target-reached .mission-stat-value {
    font-size: var(--text-sm);
  }
}

.mission-stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.mission-detail-note {
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border-left: 3px solid var(--accent-500);
}

.mission-detail-note h5 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2) 0;
}

.mission-detail-note p {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* Calendar Trophy Icon */
.day-cell.has-trophy {
  position: relative;
}

.day-cell.has-trophy::after {
  content: '🏆';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.75rem;
  line-height: 1;
}

.trophy-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.65rem;
  line-height: 1;
  z-index: 5;
}

/* Trophy overlay in calendar cells - positioned top-right, doesn't replace checkbox */
.day-cell.has-trophy-overlay {
  position: relative;
}

.cell-trophy {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 10;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  background: rgba(255, 215, 0, 0.2);
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease, background 150ms ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cell-trophy:hover {
  transform: scale(1.15);
  background: rgba(255, 215, 0, 0.4);
}

.cell-trophy:active {
  transform: scale(1.05);
}

.cell-trophy:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Mobile: slightly larger touch target */
@media (max-width: 768px) {
  .cell-trophy {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 1rem;
  }
}

/* Habit mini-icon in today's column cells (mobile UX helper) */
.day-cell.is-today {
  position: relative;
}

.cell-habit-mini-icon {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.65rem;
  line-height: 1;
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}

/* Ensure mini-icon doesn't overlap content */
.day-cell.is-today input[type="checkbox"],
.day-cell.is-today .trophy-icon,
.day-cell.is-today .streak-fire-icon {
  position: relative;
  z-index: 2;
}

/* ============================================
   PROFILE PAGE - NEW LAYOUT
   ============================================ */

/* Section Dividers */
.section-divider {
  margin: var(--space-6) 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.section-divider:first-child {
  margin-top: 0;
}

.section-divider-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.section-divider-icon--weight {
  color: var(--accent);
}

.section-divider-icon--missions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.96em;
  line-height: 1;
  transform: translateY(-0.02em);
}

.section-divider-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-divider--profile-missions {
  position: relative;
}

.section-divider--profile-missions .section-divider-title {
  position: relative;
  width: 100%;
  min-height: 22.5px;
  justify-content: flex-start;
  align-items: center;
  padding-right: clamp(126px, 24%, 158px);
}

.section-divider--profile-missions .section-divider-title__text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  line-height: 1;
}

.section-divider--profile-missions .missions-see-all-link {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}

.section-divider--profile-weight .section-divider-title {
  position: relative;
  width: 100%;
  min-height: 22.5px;
  justify-content: flex-start;
  align-items: center;
  padding-right: clamp(122px, 24%, 158px);
}

.section-divider--profile-weight .section-divider-title__text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  line-height: 1;
}

.section-divider--profile-weight .section-divider-action-link {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}

/* Profile Username Input */
.profile-username-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  margin-top: 0;
}

.profile-username-input {
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--border-default) 58%, transparent);
  font-size: clamp(1.72rem, 2.08vw, 1.98rem);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
  max-width: min(100%, 17ch);
  padding: 8px 12px 6px;
  border-radius: 12px;
  letter-spacing: -0.03em;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-username-input:hover {
  border-color: var(--border-default);
}

.profile-username-input:not(.is-editing) {
  cursor: pointer;
  caret-color: transparent;
}

.profile-username-input:not(.is-editing):focus {
  outline: none;
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--border-default) 58%, transparent);
  background: transparent;
  box-shadow: none;
}

.profile-username-input.is-editing:focus {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface-secondary) 68%, transparent);
  box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.18);
}

.profile-username-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.profile-identity-meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 1.2rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.profile-identity-meta__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-muted);
}

.profile-identity-meta__value {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Avatar Popover — portalled to body, above all stacking contexts */
.avatar-popover {
  --avatar-popover-gutter: 10px;
  position: fixed;
  z-index: 2147483647;
  isolation: isolate;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-lg);
  width: min(var(--avatar-popover-width, 380px), calc(100vw - 24px));
  max-height: min(var(--avatar-popover-max-height, 84vh), calc(100vh - 12px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.2) translateY(-8px);
  transform-origin: var(--avatar-popover-origin-x, 50%) var(--avatar-popover-origin-y, 0%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.avatar-popover__scroll {
  max-height: calc(min(var(--avatar-popover-max-height, 84vh), calc(100vh - 12px)) - 24px);
  overflow-y: auto;
  overflow-x: visible;
  padding-left: var(--avatar-popover-gutter);
  padding-right: calc(var(--avatar-popover-gutter) + 4px);
  margin-left: calc(-1 * var(--avatar-popover-gutter));
  margin-right: calc(-1 * var(--avatar-popover-gutter));
  flex: 1 1 auto;
}

.avatar-popover.avatar-popover--fit-content .avatar-popover__scroll {
  max-height: none;
  overflow-y: visible;
  flex: 0 0 auto;
}

.avatar-popover__scroll::-webkit-scrollbar {
  width: 5px;
}

.avatar-popover__scroll::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 999px;
}

.avatar-popover__scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Point 5: Hide footer when group has only 1 row */
.avatar-picker-group--no-more .avatar-picker-footer {
  display: none;
}

.avatar-popover.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.avatar-popover.open {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.avatar-popover.closing {
  visibility: visible !important;
  pointer-events: none !important;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.avatar-popover__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.avatar-popover__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.avatar-popover__loading-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.avatar-popover.is-loading .avatar-popover__loading {
  opacity: 1;
  pointer-events: auto;
}

.avatar-popover.is-loading .avatar-picker-group {
  opacity: 0.2;
  filter: blur(1px);
}

.avatar-popover__caret {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  transform: rotate(45deg);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.avatar-popover[data-placement="right"] .avatar-popover__caret {
  left: -6px;
  top: var(--avatar-caret-top, 20px);
}

.avatar-popover[data-placement="left"] .avatar-popover__caret {
  right: -6px;
  top: var(--avatar-caret-top, 20px);
}

.avatar-popover[data-placement="top"] .avatar-popover__caret {
  bottom: -6px;
  left: var(--avatar-caret-left, 20px);
}

.avatar-popover[data-placement="bottom"] .avatar-popover__caret {
  top: -6px;
  left: var(--avatar-caret-left, 20px);
}

.avatar-picker-group+.avatar-picker-group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* Services section: ultra-compact, title hidden */
.avatar-picker-group--services {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-1);
  padding-top: 0 !important;
  border-top: none !important;
  margin-top: 0 !important;
}

.avatar-picker-group--services .avatar-picker-title {
  display: block;
  width: 100%;
  font-size: 9px;
  margin-bottom: var(--space-1);
}

.avatar-picker-group--services .avatar-picker-grid {
  justify-items: center;
}

.avatar-picker-group--services .avatar-picker-footer {
  display: none;
}

/* Personal section: gold background, compact, centered */
.avatar-picker-group--personal {
  background: linear-gradient(135deg, rgba(214, 177, 90, 0.07) 0%, rgba(255, 220, 130, 0.04) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  margin: var(--space-1) calc(-1 * var(--space-2)) calc(-1 * var(--space-2));
  border-top: 1px solid rgba(214, 177, 90, 0.22);
}

.avatar-picker-group--personal .avatar-picker-grid {
  justify-items: center;
  justify-content: center;
}

.avatar-picker-group--personal .avatar-option {
  transform: scale(1.12);
}

.avatar-picker-group--personal .avatar-option:hover:not(:disabled):not(.is-disabled):not(.avatar-option--selected):not(.selected),
.avatar-picker-group--personal .avatar-option.selected,
.avatar-picker-group--personal .avatar-option.avatar-option--selected {
  transform: scale(1.2);
}

.avatar-picker-group--personal .avatar-option--person {
  --avatar-scale: 1.1;
  --avatar-scale-hover: 1.3;
}

.avatar-picker-group--personal + .avatar-picker-group {
  border-top: none;
}

.avatar-picker-title--personal {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(90deg,
    #d4a940 0%,
    #d4a940 43%,
    #ffe7a8 50%,
    #d4a940 57%,
    #d4a940 100%);
  background-size: 240% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ks-shine-sweep 3.5s linear infinite;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-picker-title--personal {
    animation: none;
    -webkit-text-fill-color: #d4a940;
    color: #d4a940;
  }
}

.avatar-picker-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  text-align: center;
}

/* Avatar Picker */
.avatar-picker {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-top: var(--space-3);
  box-shadow: var(--shadow-md);
}

.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(44px, 1fr));
  gap: var(--space-3);
  position: relative;
  overflow: visible;
}

.avatar-picker-grid--services {
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: var(--space-2);
}

.avatar-picker-grid--services-single {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.avatar-picker-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 22px;
  margin-top: var(--space-3);
}

.avatar-picker-more {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.avatar-picker-more:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
}

[data-theme="light"] .avatar-picker-more {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .avatar-picker-more:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

.avatar-option {
  background: var(--surface-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform 220ms ease, box-shadow 220ms ease;
  aspect-ratio: 1;
  overflow: visible;
  transform: scale(1.1);
  position: relative;
}

.avatar-option:disabled,
.avatar-option.is-disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.avatar-option-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-lg);
  overflow: visible;
}

.avatar-option-base {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-lg);
  overflow: visible;
  position: relative;
  z-index: 1;
  clip-path: inset(0 0 0 0 round var(--radius-lg));
  transition: clip-path 200ms ease;
}

.avatar-row-loader {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--avatar-row-top, 0px);
  height: var(--avatar-row-height, 0px);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.avatar-picker-group.is-row-loading .avatar-row-loader {
  display: flex;
}

.avatar-row-loader .avatar-picker-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 220ms ease, opacity 160ms ease;
}

.avatar-option:hover:not(:disabled):not(.is-disabled):not(.avatar-option--selected):not(.selected) {
  border-color: rgba(255, 165, 0, 0.6);
  transform: scale(1.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.avatar-option-img {
  transform: translateY(var(--avatar-translate, 0)) scale(var(--avatar-scale, 1));
  transform-origin: var(--avatar-origin, center);
  clip-path: none;
}

.avatar-option-img--overflow {
  display: none;
}

.avatar-option--person {
  --avatar-scale: 1.08;
  --avatar-scale-hover: 1.28;
  --avatar-translate: 2px;
  --avatar-origin: center top;
  --avatar-origin-hover: center bottom;
  --avatar-clip-top: -28%;
}

.avatar-option:not(.avatar-option--person) {
  --avatar-scale: 1.3;
  --avatar-scale-hover: 1.65;
  --avatar-translate: 3px;
  --avatar-origin: center;
  --avatar-origin-hover: center;
  --avatar-clip-top: -18%;
}

.avatar-option--person .avatar-option-img {
  transform: translateY(var(--avatar-translate)) scale(var(--avatar-scale));
  transform-origin: var(--avatar-origin);
}

.avatar-option:hover .avatar-option-img {
  transform: translateY(0) scale(var(--avatar-scale-hover));
  transform-origin: var(--avatar-origin-hover);
}

.avatar-option:hover .avatar-option-base {
  clip-path: inset(var(--avatar-clip-top) 0 0 0 round var(--radius-lg));
}

.avatar-option:hover .avatar-option-img--overflow {
  opacity: 0;
}

.avatar-option--service {
  transform: none;
  aspect-ratio: auto;
  min-height: 48px;
  min-width: 176px;
  width: auto;
  max-width: min(100%, 240px);
  padding: 10px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  justify-self: center;
  text-align: center;
  border-radius: 999px;
  box-sizing: border-box;
}

.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile,
.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile * {
  animation: none !important;
}

.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile {
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile:hover,
.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile:focus-visible,
.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile:active {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--border-default);
}

.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile.avatar-option--selected,
.avatar-picker-group.ks-avatar-services .ks-service-avatar-tile.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: none !important;
}

.avatar-service-logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-service-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-service-logo--apple {
  color: var(--text-primary);
}

.avatar-service-label {
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.avatar-service-hint {
  font-size: 9px;
  line-height: 1.1;
  color: var(--text-muted);
  display: none;
}

.avatar-option--service.avatar-option--selected .avatar-service-hint {
  color: var(--text-secondary);
}

/* Selected avatar: orbit-ring — cross-browser (no overflow:hidden needed) */
.avatar-option.selected,
.avatar-option.avatar-option--selected {
  border-color: transparent !important;
  background: var(--accent-subtle);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent) !important;
  overflow: visible;
  isolation: isolate;
}

/* Spinning conic-gradient ring via ::before (inset:0) */
.avatar-option.selected::before,
.avatar-option.avatar-option--selected::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    var(--accent) 0deg 70deg,
    rgba(255, 230, 150, 0.85) 88deg,
    var(--accent) 118deg,
    transparent 148deg 360deg
  );
  animation: ks-orbit-rotate 2.6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Inner fill: hides gradient interior, leaving only the 2px ring visible */
.avatar-option.selected::after,
.avatar-option.avatar-option--selected::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--accent-subtle);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Content above the inner fill */
.avatar-option.selected .avatar-option-viewport,
.avatar-option.avatar-option--selected .avatar-option-viewport {
  position: relative;
  z-index: 3;
}

/* Point 2B: Selected avatar always looks hovered (scale + clip-path + img transform) */
.avatar-option.selected,
.avatar-option.avatar-option--selected {
  transform: scale(1.18);
}

.avatar-option.selected .avatar-option-img,
.avatar-option.avatar-option--selected .avatar-option-img {
  transform: translateY(0) scale(var(--avatar-scale-hover));
  transform-origin: var(--avatar-origin-hover);
}

.avatar-option.selected .avatar-option-base,
.avatar-option.avatar-option--selected .avatar-option-base {
  clip-path: inset(var(--avatar-clip-top) 0 0 0 round var(--radius-lg));
}

.avatar-option:disabled.avatar-option--selected,
.avatar-option.is-disabled.avatar-option--selected {
  border-color: var(--border-subtle);
  background: var(--surface-secondary);
  box-shadow: none;
}

.avatar-option:disabled.avatar-option--selected::before,
.avatar-option.is-disabled.avatar-option--selected::before {
  display: none;
}

.avatar-option:disabled.avatar-option--selected::after,
.avatar-option.is-disabled.avatar-option--selected::after {
  display: none;
}

@keyframes ks-orbit-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-option.selected::before,
  .avatar-option.avatar-option--selected::before {
    animation: none;
  }
}

@media (max-width: 640px) {
  .avatar-popover {
    --avatar-popover-gutter: 8px;
  }

  .avatar-picker-grid {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }

  .avatar-picker-grid--services {
    grid-template-columns: repeat(2, minmax(72px, 1fr));
  }

  .avatar-picker-grid--services-single {
    width: 100%;
    max-width: 100%;
  }

  .avatar-picker-group.ks-avatar-services .ks-service-avatar-tile {
    margin-inline: auto;
    min-width: 168px;
    max-width: min(100%, 220px);
  }
}

@media (min-width: 1024px) {
  .avatar-popover {
    --avatar-popover-gutter: 12px;
    padding: var(--space-3) var(--space-3) var(--space-2-5);
  }

  .avatar-picker-grid {
    grid-template-columns: repeat(6, minmax(52px, 1fr));
    gap: 14px;
  }

  .avatar-picker-grid--services-single {
    width: 100%;
    max-width: 100%;
  }

  .avatar-option {
    transform: scale(1.03);
  }

  .avatar-picker-group.ks-avatar-services .ks-service-avatar-tile {
    min-height: 52px;
    min-width: 188px;
    max-width: 248px;
    padding-inline: 20px;
  }
}

/* Missions Overview (sidebar mini-section with 2-column grid) */
.profile-missions-overview {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.missions-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.missions-overview-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

/* 2-column grid for completed vs active missions */
.missions-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.missions-overview-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Left column (Completate): align left */
.missions-overview-col:first-child {
  align-items: flex-start;
  text-align: left;
}

/* Right column (Attive): align right */
.missions-overview-col:last-child {
  align-items: flex-end;
  text-align: right;
}

.missions-col-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.missions-col-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 28px;
  width: 100%;
}

/* Align list items based on column */
.missions-overview-col:first-child .missions-col-list {
  align-items: flex-start;
}

.missions-overview-col:last-child .missions-col-list {
  align-items: flex-end;
}

.missions-col-empty {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Mission mini item (compact for sidebar) */
.mission-mini-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding: var(--space-0-5) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-mini-item .mission-mini-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-mini-item.is-completed {
  color: var(--text-secondary);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.02));
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.mission-mini-item.is-completed::before {
  content: '✓';
  color: #d4a000;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  margin-right: var(--space-1);
}

/* Legacy pill styles (kept for compatibility) */
.mission-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-width: 100%;
  overflow: hidden;
}

.mission-pill-icon {
  flex-shrink: 0;
}

.mission-pill-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.mission-pill-habit {
  flex-shrink: 0;
  font-size: 0.9em;
}

.missions-overflow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

/* ============================================
   ADMIN DROPDOWN IN HEADER
   ============================================ */

.header-admin-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-nav-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.28);
  color: #6366f1;
  font-family: inherit;
  font-weight: var(--font-semibold);
  font-size: 15px;
  line-height: 1.12;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.admin-nav-trigger:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.36);
  color: #6366f1;
}

.admin-nav-trigger.active,
.admin-nav-trigger.is-open {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.42);
  color: #ffffff;
}

[data-theme="light"] .admin-nav-trigger,
html:not([data-theme="dark"]) .admin-nav-trigger,
body:not([data-theme="dark"]) .admin-nav-trigger {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.28);
  color: #3f3a9f;
}

[data-theme="light"] .admin-nav-trigger:hover,
[data-theme="light"] .admin-nav-trigger.active,
[data-theme="light"] .admin-nav-trigger.is-open,
html:not([data-theme="dark"]) .admin-nav-trigger:hover,
html:not([data-theme="dark"]) .admin-nav-trigger.active,
html:not([data-theme="dark"]) .admin-nav-trigger.is-open,
body:not([data-theme="dark"]) .admin-nav-trigger:hover,
body:not([data-theme="dark"]) .admin-nav-trigger.active,
body:not([data-theme="dark"]) .admin-nav-trigger.is-open {
  background: rgba(79, 70, 229, 0.18);
  border-color: rgba(79, 70, 229, 0.34);
  color: #18283b;
}

.admin-dropdown-btn {
  width: auto;
  cursor: pointer;
}

.admin-dropdown-btn:hover {
  transform: translateY(-1px);
}

.admin-dropdown-btn.active,
.admin-dropdown-btn.is-open {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.admin-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.admin-trigger-icon svg,
.admin-dropdown-btn svg {
  width: 18px;
  height: 18px;
  opacity: 0.78;
}

.admin-trigger-label {
  display: inline-flex;
  align-items: center;
}

.admin-trigger-caret {
  font-size: 10px;
  opacity: 0.62;
  transition: transform var(--transition-fast);
}

.admin-nav-trigger:hover .admin-trigger-icon svg,
.admin-nav-trigger:focus-visible .admin-trigger-icon svg,
.admin-nav-trigger.active .admin-trigger-icon svg,
.admin-nav-trigger.is-open .admin-trigger-icon svg {
  opacity: 1;
}

.admin-btn-label {
  display: inline;
}

@media (max-width: 768px) {
  .admin-btn-label {
    display: none;
  }
}

.admin-dropdown-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  min-width: 200px;
  max-width: min(260px, calc(100vw - 16px));
  padding: var(--space-1) 0;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  /* Stato chiuso: invisibile */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94) translateY(-4px);
  transform-origin: var(--admin-dropdown-origin-x, calc(100% - 22px)) var(--admin-dropdown-origin-y, -6px);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Stato aperto: bubble expansion morbida */
.admin-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: adminBubbleIn 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stato closing: bubble collapse percepibile */
.admin-dropdown-menu.closing {
  /* CRITICAL: keep visible during animation */
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: adminBubbleOut 240ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* Apertura: bubble morbida senza elastico */
@keyframes adminBubbleIn {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
    filter: blur(0.5px);
  }

  60% {
    opacity: 1;
    transform: scale(1.015) translateY(0);
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0px);
  }
}

/* Chiusura: più lunga e percepibile - effetto bolla che si sgonfia */
@keyframes adminBubbleOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform: scale(0.93) translateY(-6px);
    filter: blur(0.8px);
  }
}

/* Supporto prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .avatar-popover {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 150ms ease, visibility 150ms ease !important;
  }

  .avatar-popover.open,
  .avatar-popover.closing {
    animation: none !important;
  }

  .avatar-popover.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .avatar-popover:not(.open):not(.closing) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .admin-dropdown-menu {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 120ms ease, visibility 120ms ease !important;
  }

  .admin-dropdown-menu.open,
  .admin-dropdown-menu.closing {
    animation: none !important;
  }

  .admin-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
  }

  .admin-dropdown-menu:not(.open):not(.closing) {
    opacity: 0;
    visibility: hidden;
  }
}

/* ============================================ */
/*  NOTIFICATIONS DROPDOWN RADIAL ANIMATION    */
/*  Anchored bubble expansion from icon        */
/* ============================================ */

/* -----------------------------------------------
   BASE STATE (closed): Hidden at icon position
   ----------------------------------------------- */
#notifications-dropdown,
.profile-dropdown.notifications-dropdown {
  display: flex !important;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.2) translateY(-8px);
  transform-origin: calc(100% - 12px) -4px;
  /* Anchor exactly at icon center */
  will-change: transform, opacity;
  /* Smooth GPU-only animation */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* -----------------------------------------------
   OPEN STATE: Bubble inflates from the icon
   Animation handles the transition from 0→1
   ----------------------------------------------- */
#notifications-dropdown.profile-dropdown--open,
.profile-dropdown.notifications-dropdown.profile-dropdown--open {
  visibility: visible !important;
  pointer-events: auto !important;
  /* Let animation control opacity and transform - don't set them here to avoid flash */
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* -----------------------------------------------
   CLOSING STATE: Bubble deflates back to icon
   ----------------------------------------------- */
#notifications-dropdown.closing,
.profile-dropdown.notifications-dropdown.closing {
  visibility: visible !important;
  pointer-events: none !important;
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

/* -----------------------------------------------
   KEYFRAME: Open - Smooth bubble expansion
   GPU-optimized: only transform + opacity
   ----------------------------------------------- */
@keyframes notificationsBubbleIn {
  0% {
    opacity: 0;
    transform: scale(0.2) translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* -----------------------------------------------
   KEYFRAME: Close - Smooth bubble collapse
   GPU-optimized: only transform + opacity
   ----------------------------------------------- */
@keyframes notificationsBubbleOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.2) translateY(-8px);
  }
}

/* -----------------------------------------------
   ACCESSIBILITY: prefers-reduced-motion
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  #notifications-dropdown,
  .profile-dropdown.notifications-dropdown {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: opacity 150ms ease, visibility 150ms ease !important;
  }

  #notifications-dropdown.profile-dropdown--open,
  #notifications-dropdown.closing,
  .profile-dropdown.notifications-dropdown.profile-dropdown--open,
  .profile-dropdown.notifications-dropdown.closing {
    animation: none !important;
  }

  #notifications-dropdown.profile-dropdown--open,
  .profile-dropdown.notifications-dropdown.profile-dropdown--open {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #notifications-dropdown:not(.profile-dropdown--open):not(.closing),
  .profile-dropdown.notifications-dropdown:not(.profile-dropdown--open):not(.closing) {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* -----------------------------------------------
   SUBTLE LOADING STATE
   Applied when refreshing data without clearing content
   ----------------------------------------------- */
#notifications-dropdown.is-loading .notifications-list,
.profile-dropdown.notifications-dropdown.is-loading .notifications-list {
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 150ms ease;
}

#notifications-dropdown.is-loading .notifications-footer-link,
.profile-dropdown.notifications-dropdown.is-loading .notifications-footer-link {
  pointer-events: none;
}


.admin-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-4);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.admin-dropdown-link:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

[data-theme="light"] .admin-dropdown-link:hover,
body:not([data-theme="dark"]) .admin-dropdown-link:hover {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}

.admin-dropdown-link.active {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

[data-theme="light"] .admin-dropdown-link.active,
body:not([data-theme="dark"]) .admin-dropdown-link.active {
  background: rgba(79, 70, 229, 0.12);
  color: #4f46e5;
}

.admin-dropdown-link svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.admin-dropdown-link:hover svg,
.admin-dropdown-link.active svg {
  opacity: 1;
}

/* ============================================
   KRATEVIA PLUS - LIQUID GLASS EFFECT
   ============================================ */

.app-shell-plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-400);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.app-shell-plan-pill svg {
  width: 16px;
  height: 16px;
  color: var(--accent-400);
  flex: 0 0 auto;
}

.app-shell-plan-pill.is-plus-active {
  color: var(--accent-300);
}

.app-shell-plan-pill--sidebar {
  width: 100%;
  min-height: 34px;
}

/* Liquid glass effect for nav-plus-link */
.nav-plus-link,
.nav-plus-family {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.1) 0%,
      rgba(245, 158, 11, 0.05) 50%,
      rgba(251, 191, 36, 0.1) 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--accent-400) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-plus-link::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(251, 191, 36, 0.4) 60deg,
      rgba(245, 158, 11, 0.6) 120deg,
      transparent 180deg,
      rgba(251, 191, 36, 0.4) 240deg,
      rgba(245, 158, 11, 0.6) 300deg,
      transparent 360deg);
  animation: glow-rotate 6s linear infinite;
  opacity: 0.6;
}

.nav-plus-link::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-primary);
}

@keyframes glow-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .nav-plus-link::before {
    animation: none;
    opacity: 0.4;
  }
}

.nav-plus-link:hover {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.nav-plus-link:hover::before {
  opacity: 0.8;
}

.nav-plus-link svg {
  color: var(--accent-400);
  opacity: 1 !important;
}

.nav-plus-link:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

/* Header identity-slot version */
.app-shell-plan-pill--top {
  margin-left: 0;
}

.header-nav-link.nav-plus-link::after {
  background: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%);
}

/* Sidebar version specific adjustments */
.app-shell-plan-pill--sidebar.nav-plus-link::after,
.app-shell-plan-pill--sidebar.nav-plus-family::after {
  background: linear-gradient(135deg, var(--surface-primary) 0%, var(--surface-secondary) 100%);
}

.app-shell-plan-pill:hover {
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

/* Dark theme enhancements */
[data-theme="dark"] .nav-plus-link,
body.dark-theme .nav-plus-link {
  background: linear-gradient(135deg,
      rgba(251, 191, 36, 0.12) 0%,
      rgba(245, 158, 11, 0.06) 50%,
      rgba(251, 191, 36, 0.12) 100%) !important;
}

[data-theme="dark"] .nav-plus-link::after,
body.dark-theme .nav-plus-link::after {
  background: linear-gradient(135deg, var(--neutral-850) 0%, var(--neutral-800) 100%);
}

/* ============================================
   SIDEBAR ADMIN DROPDOWN / COLLAPSIBLE GROUP
   Canonical shared family with header admin-dropdown-btn.
   Only layout-context differences: width, alignment.
   ============================================ */

.sidebar-admin-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-1);
}

.sidebar-admin-toggle {
  width: auto;
  max-width: 100%;
  cursor: pointer;
  text-align: left;
}

.sidebar-admin-toggle:hover {
  transform: translateY(-1px);
}

.sidebar-admin-toggle.active,
.sidebar-admin-toggle.is-open {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.sidebar-admin-toggle-label {
  flex: 1;
}

.sidebar-admin-toggle.is-open .sidebar-admin-toggle-caret {
  transform: rotate(180deg);
}

.sidebar-admin-children {
  display: none !important;
}

/* ============================================
   FIREFOX FALLBACK - Prevent background pixelation
   ============================================ */

/* Firefox fallback: evita blur/backdrop che crea banding/pixelation */
@-moz-document url-prefix() {

  .app-page::before,
  .app-page::after,
  .app-shell::before,
  .app-shell::after,
  body::before,
  body::after {
    filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  /* se usiamo background-attachment: fixed, su Firefox spesso peggiora */
  .app-page,
  .app-shell,
  body {
    background-attachment: scroll !important;
  }

  /* Disabilita backdrop-filter su elementi che lo usano */
  .nav-plus-link {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.sidebar-admin-children {
  display: none;
  flex-direction: column;
  padding-left: var(--space-4);
  margin-top: var(--space-1);
  border-left: 2px solid var(--border-subtle);
  margin-left: var(--space-5);
}

.sidebar-admin-group.open .sidebar-admin-children {
  display: flex;
  animation: sidebar-admin-enter 0.24s ease-out both;
}

.sidebar-admin-children.closing {
  display: flex;
  animation: sidebar-admin-exit 0.24s ease-in both;
}

@keyframes sidebar-admin-enter {
  from { opacity: 0; max-height: 0; transform: translateY(-4px); }
  to   { opacity: 1; max-height: 500px; transform: translateY(0); }
}

@keyframes sidebar-admin-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-admin-group.open .sidebar-admin-children,
  .sidebar-admin-children.closing {
    animation: none;
  }
}

.sidebar-admin-children .sidebar-nav-link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.sidebar-admin-children .sidebar-nav-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  .app-shell-plan-pill--top span {
    display: none;
  }
}

/* ============================================
   CALENDAR BOTTOM SECTION - TWO COLUMN LAYOUT
   ============================================ */

/* Wrapper riga che contiene Peso + Missioni */
.calendar-bottom-section {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(420px, 1.14fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  margin-bottom: 120px;
  align-items: start;
}

@media (min-width: 992px) {
  body.app-page[data-page="calendar"] .calendar-bottom-section {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
    box-sizing: border-box;
  }
}

.calendar-bottom-section .app-card {
  height: auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
}

#calendar-missions-section.missions-card .app-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

@media (max-width: 991px) {
  .calendar-bottom-section {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

#calendar-missions-section.missions-card {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  min-height: 0;
  align-self: start;
  overflow: visible;
}

#calendar-active-missions-list {
  min-height: 0;
  max-height: none;
  overflow-y: visible;
  overscroll-behavior: auto;
  padding-right: 0;
  scrollbar-gutter: auto;
}

#calendar-missions-section.missions-card.has-scrollable-missions {
  max-height: clamp(430px, 58vh, 680px);
  overflow: hidden;
}

#calendar-missions-section.missions-card.has-scrollable-missions .app-card-body {
  overflow: hidden;
}

#calendar-active-missions-list.missions-list--scrollable {
  max-height: clamp(340px, 46vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

#calendar-active-missions-list::-webkit-scrollbar {
  width: 10px;
}

#calendar-active-missions-list::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--border-strong) 54%, transparent);
  background-clip: content-box;
}

#weight-section.weight-card {
  align-self: start;
}

/* Days left pill - GLOBAL (usato in profile e calendar) */
.pill-days-left {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  height: 24px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pill-days-left.critical {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.2);
}

.pill-days-left.warning {
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.2);
}

.pill-days-left.info {
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.2);
}

.pill-days-left.neutral {
  background: rgba(107, 114, 128, 0.08);
  color: #6b7280;
  border-color: rgba(107, 114, 128, 0.15);
}

.pill-days-left.expired {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.3);
  font-weight: var(--font-bold);
}

/* Mission card footer - layout uniforme (profile + calendar) */
.mission-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  min-height: 52px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.mission-footer-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
}

.mission-start-progress {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: left;
  line-height: 1.35;
}

.mission-description-input {
  min-height: 74px;
  resize: vertical;
}

/* ============================================
   PAGE LOADER OVERLAY
   ============================================ */

.page-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loader-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-content {
  text-align: center;
  color: white;
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-3);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader-text {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-4);
}

.loader-actions {
  display: none;
}

.loader-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.loader-error-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: #ef4444;
  margin-bottom: var(--space-1);
}

.loader-error-message {
  font-size: var(--text-sm);
  opacity: 0.8;
  max-width: 300px;
  text-align: center;
  line-height: 1.4;
}

.loader-retry-btn {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

/* Show error state */
.page-loader-overlay.has-error .loader-spinner,
.page-loader-overlay.has-error .loader-text {
  display: none;
}

.page-loader-overlay.has-error .loader-actions {
  display: block;
}

/* Hide main content during loading */
body.is-loading .app-main {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.is-ready .app-main {
  opacity: 1;
  visibility: visible;
}

/* Block scroll during loading */
body.is-loading {
  overflow: hidden;
}

/* ============================================
   MISSIONS LOADING STATES
   ============================================ */

.is-hidden {
  display: none !important;
}

.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Skeleton loader styles */
.missions-skeleton {
  padding: var(--space-2);
}

.missions-skeleton-item {
  background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--surface-primary) 50%, var(--surface-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.missions-skeleton-title {
  height: 16px;
  width: 60%;
  margin-bottom: var(--space-1);
}

.missions-skeleton-meta {
  height: 12px;
  width: 40%;
  margin-bottom: var(--space-0-5);
}

.missions-skeleton-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-1);
}

.missions-skeleton-button {
  height: 24px;
  width: 80px;
  border-radius: var(--radius-sm);
}

.missions-skeleton-pill {
  height: 20px;
  width: 60px;
  border-radius: var(--radius-sm);
}

/* Error state */
.missions-error {
  text-align: center;
  padding: var(--space-4);
  color: var(--text-muted);
}

.missions-error-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
  color: var(--danger);
}

.missions-error-message {
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}

.missions-error-retry {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

/* Fade-in transition for content */
.missions-content {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.missions-content.show {
  opacity: 1;
}

/* ============================================
   CRITICAL FIXES - HIGH PRIORITY CSS
   ============================================ */

/* Calendar missions: only the explicit scrollable state may create an inner viewport. */
body.app-page #calendar-missions-section.missions-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: visible;
}

body.app-page #calendar-missions-section.missions-card .app-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: visible;
}

body.app-page #calendar-missions-section.missions-card.has-scrollable-missions {
  max-height: clamp(430px, 58vh, 680px) !important;
  overflow: hidden;
}

body.app-page #calendar-missions-section.missions-card.has-scrollable-missions .app-card-body {
  overflow: hidden;
}

/* Force header layout e z-index */
body.app-page #calendar-missions-section.missions-card .app-card-header {
  position: relative;
  z-index: 10;
  margin-bottom: 0;
}

/* ============================================
   MOBILE CALENDAR — CONSOLIDATED
   NO transform:scale (creates stacking context, breaks overlays/touch).
   Uses CSS vars + overflow-x:auto (scroll) for all breakpoints.
   ============================================ */

@media (max-width: 768px) {
  .calendar-board {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
  }

  /* --- MONTH VIEW (tablet-ish) --- */
  .calendar-board.is-month {
    --cal-cell: 36px;
    --habit-col: 140px;
  }

  .calendar-board.is-month .calendar-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* NO transform:scale — removes stacking context bug */
    transform: none;
    width: auto;
    max-width: 100%;
  }

  .calendar-board.is-month .habit-calendar {
    border-collapse: collapse;
    min-width: calc(var(--habit-col) + (var(--cal-cell) * 31) + 20px);
    table-layout: fixed;
  }

  .calendar-board.is-month .habit-calendar thead th {
    padding: 2px;
    font-size: 10px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 52%, transparent);
  }

  .calendar-board.is-month .habit-calendar tbody td {
    padding: 2px;
    font-size: 10px;
    border: 0;
  }

  .calendar-board.is-month .habit-calendar tbody td.day-cell.is-future.is-planned {
    background: var(--cal-future-plan-bg);
    background-image: none;
    border-color: var(--cal-future-plan-br);
    border-style: dashed;
    border-width: 1px;
  }

  .calendar-board.is-month .habit-calendar tbody td.day-cell.is-future:not(.is-out-month).is-planned {
    border-width: 1px;
  }

  .calendar-board.is-month .habit-calendar tbody td.day-cell.is-out-month.is-planned {
    border-color: var(--cal-plan-br-dim);
    border-style: dashed;
    border-width: 1px;
  }

  .calendar-board.is-month .day-header {
    font-size: 9px;
    line-height: 1.1;
  }
  .calendar-board.is-month .day-number { font-size: 10px; }
  .calendar-board.is-month .day-name { font-size: 8px; }

  .calendar-board.is-month .habit-name-cell {
    padding: 2px 4px;
    max-width: var(--habit-col);
    overflow: visible;
    text-overflow: clip;
  }

  .calendar-board.is-month .habit-icon-only { font-size: 1rem; }

  .calendar-board.is-month .habit-status-btn {
    width: 24px; height: 24px;
    min-width: 24px; min-height: 24px;
  }

  /* --- WEEK VIEW --- */
  .calendar-board.is-week {
    --cal-cell: 56px;
    --habit-col: 136px;
  }

  .calendar-board.is-week .calendar-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }

  .calendar-board.is-week .habit-calendar {
    min-width: 700px;
    width: max-content;
    table-layout: auto;
  }

  .calendar-board.is-week .habit-calendar col.day-column {
    width: var(--cal-cell);
    min-width: var(--cal-cell);
  }

  .mobile-scroll-hint { display: none; }
}

/* --- SMALL PHONE (≤ 480px) --- */
@media (max-width: 480px) {
  .calendar-legend-item {
    padding: 4px 6px;
    font-size: 9px;
  }

  .calendar-pause-legend__item {
    padding: 3px 6px;
    font-size: 9px;
  }

  .calendar-board.is-month {
    --cal-cell: 28px;
    --habit-col: 132px;
  }

  .calendar-board.is-month .habit-calendar thead th,
  .calendar-board.is-month .habit-calendar tbody td {
    padding: 2px;
    font-size: 10px;
  }

  .calendar-board.is-month .habit-status-btn {
    width: 22px; height: 22px;
    min-width: 22px; min-height: 22px;
  }

  .calendar-board.is-month .habit-icon-only { font-size: 0.9rem; }

  .calendar-board.is-month .habit-name-cell {
    padding: 2px 4px;
    max-width: var(--habit-col);
    font-size: 10px;
    position: sticky;
    left: 0;
    background: var(--surface-primary);
    z-index: 2;
  }

  .calendar-board.is-month .day-header { font-size: 8px; }
  .calendar-board.is-month .day-number { font-size: 9px; }
  .calendar-board.is-month .day-name { font-size: 7px; }

  .calendar-board.is-week .habit-calendar { min-width: 600px; }
}

/* P1: Override 768px habit-col values for mid range 576-899 (must come after 768px block) */
@media (min-width: 576px) and (max-width: 899px) {
  .calendar-board.is-month {
    --habit-col: clamp(130px, 28vw, 190px);
  }
  .calendar-board.is-week {
    --habit-col: clamp(120px, 26vw, 170px);
  }
  /* Apply the var to cells (no equivalent rule exists outside the ≤576px block) */
  .calendar-board .ks-calendar-grid col.habit-column,
  .calendar-board .ks-calendar-grid .habit-column-cell {
    width: var(--habit-col);
    min-width: var(--habit-col);
    max-width: var(--habit-col);
    box-sizing: border-box;
  }
}

/* ============================================
   MOBILE FIX: PESO CORPOREO & MISSIONI CARDS
   Le card devono crescere in altezza per mostrare tutto il contenuto

   BUG RISOLTO: .calendar-bottom-section aveva max-height:360px + overflow:hidden
   che troncava il contenuto su mobile. Questo override lo neutralizza.
   ============================================ */

@media (max-width: 768px) {

  /* CRITICAL FIX: Override del wrapper che tronca le card
     La regola originale (linea ~5719) ha max-height:360px; overflow:hidden
     Questo override DEVE avere specificità sufficiente */
  .calendar-bottom-section {
    /* Stack verticale su mobile */
    grid-template-columns: 1fr;
    gap: var(--space-4);
    /* OVERRIDE CRITICO: rimuove il troncamento */
    max-height: none;
    overflow: visible;
  }

  .calendar-bottom-section .app-card {
    /* Rimuove height fissa, permette auto-sizing */
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  /* D: overflow hardening — always constrain weight card to viewport width */
  .weight-card {
    height: auto;
    min-height: auto;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .weight-card .app-card-body {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* D: prevent any dynamic weight-content child from overflowing */
  .weight-card .app-card-body > *,
  #weight-content,
  #weight-content > * {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  #active-goal-card .weight-kpi-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) minmax(0, 1fr) minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 6px;
  }

  #active-goal-card .weight-goal-unit-toggle--header .weight-goal-unit-chip {
    min-width: 32px;
    min-height: 28px;
    padding: 5px 8px;
    font-size: 10.5px;
  }

  #active-goal-card .weight-kpi-row:not(.has-start-progress) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #active-goal-card .weight-kpi-label {
    font-size: 10px;
  }

  #active-goal-card .weight-kpi-label--sm {
    font-size: 8px;
  }

  #active-goal-card .weight-kpi-value {
    font-size: var(--text-xl);
  }

  #active-goal-card .weight-kpi-diff--sm .weight-kpi-diff-value {
    font-size: var(--text-sm);
  }

  #active-goal-card .weight-trend-chart {
    min-height: 176px;
    padding: 5px 7px 8px 4px;
  }

  #active-goal-card .weight-trend-caption {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  #active-goal-card .weight-trend-caption__item {
    width: 100%;
  }

  #active-goal-card .weight-trend-caption__item--objective {
    justify-content: center;
    text-align: center;
  }

  #active-goal-card .weight-trend-caption__item--projection {
    justify-content: center;
    text-align: center;
    white-space: normal;
    width: auto;
    max-width: 100%;
  }

  #active-goal-card .weight-trend-header {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  #active-goal-card .weight-trend-header .weight-kpi-label,
  #active-goal-card .weight-trend-legend {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }

  #active-goal-card .weight-trend-legend {
    width: 100%;
  }

  #active-goal-card .weight-time-center {
    align-items: center;
    text-align: center;
  }

  #active-goal-card #goal-days-remaining {
    white-space: normal;
    text-align: center;
    margin-inline: auto;
  }

  .trend-real-popover__status-objective {
    margin-left: 0;
    text-align: left;
  }

  /* P2: overflow hardening for all bottom-section elements */
  body.app-page[data-page="calendar"] .calendar-bottom-section,
  body.app-page[data-page="calendar"] #weight-section,
  body.app-page[data-page="calendar"] #calendar-missions-section,
  body.app-page[data-page="calendar"] .calendar-bottom-section .app-card,
  body.app-page[data-page="calendar"] .calendar-bottom-section .app-card-body {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
  }
  /* Flex children: prevent intrinsic width from causing overflow */
  body.app-page[data-page="calendar"] .calendar-bottom-section .app-card-body > *,
  body.app-page[data-page="calendar"] #weight-content,
  body.app-page[data-page="calendar"] #weight-content > *,
  body.app-page[data-page="calendar"] .missions-list,
  body.app-page[data-page="calendar"] .missions-list > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* D: prevent calendar-bottom-section from page-overflowing */
  .calendar-bottom-section {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Missions card only creates an internal scroll when JS marks 3+ missions. */
  #calendar-missions-section.missions-card {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  #calendar-missions-section.missions-card .app-card-body {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  #calendar-missions-section.missions-card .missions-list {
    max-height: none;
    overflow-y: visible;
    flex: 1 1 auto;
  }

  #calendar-missions-section.missions-card.has-scrollable-missions {
    max-height: min(72vh, 640px);
    overflow: hidden;
  }

  #calendar-missions-section.missions-card.has-scrollable-missions .app-card-body {
    overflow: hidden;
  }

  #calendar-missions-section.missions-card .missions-list.missions-list--scrollable {
    max-height: clamp(380px, 58vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Rimuove fade effect su mobile - non serve senza scroll */
  #calendar-missions-section.missions-card .missions-list::after {
    display: none;
  }
}

/* ============================================
   MOBILE FIX: PANORAMA PAGE CARDS
   Stesso fix per le card nella pagina Panorama
   ============================================ */

@media (max-width: 768px) {
  .panorama-card {
    min-height: auto;
    height: auto;
  }

  .panorama-card .app-card-body {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  /* Dot grid containers - permettono overflow visibile */
  .dot-grid-container {
    min-height: auto;
    height: auto;
  }
}

@media (max-width: 640px) {
  .weight-trend-caption__row {
    justify-content: center;
    gap: 0.38rem 0.7rem;
  }

  .weight-trend-caption__item,
  .weight-trend-caption__item--real,
  .weight-trend-caption__item--objective,
  .weight-trend-caption__item--projection {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .weight-trend-caption__item--projection {
    white-space: normal;
    flex-wrap: wrap;
  }

  #active-goal-card .weight-trend-caption__item--objective,
  #active-goal-card .weight-trend-caption__item--projection {
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }
}

/* ============================================
   KRATEVIA UNIFIED MODAL SYSTEM (ks-modal)
   Sistema modale centralizzato gestito da modal-manager.js

   MARKUP:
   <div class="ks-modal" id="..." role="dialog" aria-modal="true">
     <div class="ks-modal__header">...</div>
     <div class="ks-modal__body">...</div>
     <div class="ks-modal__footer">...</div>
   </div>

   STATI:
   - Default: hidden (opacity:0, visibility:hidden, pointer-events:none)
   - .is-open: visible (opacity:1, visibility:visible)

   REGOLE UX:
   - Annulla sempre a SINISTRA (order:1, margin-right:auto)
   - Azione primaria sempre a DESTRA (order:2)
   - Backdrop con blur
   - Header/footer con sfondo distinto (--surface-tertiary)
   ============================================ */

/* Backdrop globale unico */
.ks-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal, 1000);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.ks-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Body lock quando modale aperta */
body.is-modal-open {
  overflow: hidden;
}

/* Modal container */
.ks-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal, 1000) + 1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ks-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.ks-modal.mission-modal {
  max-width: 480px;
  max-height: 90vh;
}

.ks-modal.mission-modal.mission-modal-lg {
  max-width: 560px;
}

.ks-modal.mission-cover-picker-modal {
  width: min(760px, calc(100% - 24px));
  max-width: 760px;
}

@media (max-width: 768px) {
  body.app-page .mission-cover-picker-modal {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: min(70vh, 680px);
    transform: translateY(100%);
  }

  body.app-page .mission-cover-picker-modal.is-open {
    transform: translateY(0);
  }
}

/* Varianti dimensione */
.ks-modal--sm {
  max-width: 360px;
}

.ks-modal--md {
  max-width: 480px;
}

.ks-modal--lg {
  max-width: 640px;
}

.ks-modal--xl {
  max-width: 800px;
}

/* Header modale */
.ks-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-tertiary, var(--surface-secondary));
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink: 0;
}

.ks-modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.ks-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: color-mix(in srgb, var(--surface-secondary) 78%, #fff6ec 22%);
  border: 0;
  border-radius: 13px;
  color: color-mix(in srgb, var(--text-secondary) 72%, #7a4a2c 28%);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  box-shadow:
    7px 7px 14px rgba(188, 163, 141, 0.24),
    -7px -7px 14px rgba(255, 250, 244, 0.92);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.ks-modal__close:hover {
  background: color-mix(in srgb, var(--surface-secondary) 72%, #fff9f2 28%);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.ks-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 64%, transparent);
  outline-offset: 2px;
}

.ks-modal__close:active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    inset 5px 5px 10px rgba(188, 163, 141, 0.24),
    inset -5px -5px 10px rgba(255, 250, 244, 0.9);
}

[data-theme="dark"] .ks-modal__close {
  background: color-mix(in srgb, var(--surface-secondary) 90%, rgba(255, 255, 255, 0.025));
  color: color-mix(in srgb, var(--text-secondary) 84%, var(--text-primary));
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.36),
    -4px -4px 10px rgba(255, 255, 255, 0.026),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

[data-theme="dark"] .ks-modal__close:hover {
  background: color-mix(in srgb, var(--surface-tertiary) 88%, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
}

[data-theme="dark"] .ks-modal__close:active {
  transform: translateY(1px) scale(0.96);
  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.52),
    inset -4px -4px 8px rgba(255, 255, 255, 0.026);
}

/* Body modale */
.ks-modal__body {
  flex: 1 1 auto;
  padding: var(--space-5);
  overflow-y: auto;
  background: var(--surface-primary);
}

/* Footer modale */
.ks-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-tertiary, var(--surface-secondary));
  border-top: 1px solid var(--border-default);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  flex-shrink: 0;
}

/* REGOLA UX: Annulla a sinistra, Azione primaria a destra */
.ks-modal__footer .btn-secondary,
.ks-modal__footer [data-modal-close]:not(.ks-modal__close) {
  order: 1;
  margin-right: auto;
}

.ks-modal__footer .btn-primary,
.ks-modal__footer .btn-danger,
.ks-modal__footer [type="submit"]:not(.btn-secondary) {
  order: 2;
}

.ks-modal__footer--single-action {
  justify-content: flex-end;
}

.ks-modal__footer--single-action .btn-primary,
.ks-modal__footer--single-action .btn-danger {
  margin-left: auto;
}

@media (max-width: 640px) {
  .ks-modal__footer--single-action .btn-primary,
  .ks-modal__footer--single-action .btn-danger {
    width: min(52vw, 220px);
    min-width: 154px;
  }
}

.weight-entries-modal {
  width: min(920px, calc(100% - 32px));
  max-width: 920px;
  max-height: min(84vh, 744px);
  border-color: color-mix(in srgb, var(--border-default) 72%, rgba(77, 125, 152, 0.22));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 74%, rgba(88, 150, 177, 0.08)) 0%,
      color-mix(in srgb, var(--surface-primary) 96%, transparent) 34%,
      var(--surface-primary) 100%);
  box-shadow:
    0 30px 80px rgba(9, 19, 33, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.weight-entries-modal__header {
  align-items: stretch;
  gap: var(--space-3);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 92%, rgba(96, 159, 185, 0.14)) 0%,
      color-mix(in srgb, var(--surface-primary) 98%, transparent) 100%);
}

.weight-entries-modal__sheet-handle {
  display: none;
  width: 48px;
  height: 5px;
  margin: 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-tertiary) 36%, transparent);
}

.weight-entries-modal__header-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.weight-entries-modal__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.weight-entries-modal__header-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.weight-entries-modal__year-wrap {
  flex: 0 0 auto;
  min-width: 152px;
  max-width: 196px;
}

.weight-entries-modal__year-select {
  width: 100%;
}

.weight-entries-modal__feedback {
  flex: 1 1 240px;
  min-height: 1.2rem;
  margin: 0;
  padding-top: 4px;
}

.weight-entries-modal__body {
  padding: var(--space-4);
  overflow-y: auto;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-primary) 96%, transparent) 0%,
      color-mix(in srgb, var(--surface-secondary) 52%, transparent) 100%);
}

.weight-entries-modal__content {
  min-height: 0;
}

.weight-entries-modal__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: var(--space-5);
  border: 1px dashed color-mix(in srgb, var(--border-default) 68%, rgba(84, 132, 157, 0.24));
  border-radius: 20px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-secondary) 54%, transparent);
  text-align: center;
}

.weight-entries-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 212px), 236px));
  justify-content: flex-start;
  gap: 12px;
}

.weight-entries-month-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 124px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--border-default) 68%, rgba(88, 130, 155, 0.18));
  border-radius: 20px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 88%, rgba(117, 177, 200, 0.08)) 0%,
      color-mix(in srgb, var(--surface-primary) 98%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 34px -30px rgba(15, 23, 42, 0.32);
}

.weight-entries-month-card[data-entry-state="empty"] {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 82%, transparent) 0%,
      color-mix(in srgb, var(--surface-primary) 98%, transparent) 100%);
}

.weight-entries-month-card.is-editing {
  min-height: auto;
  border-color: color-mix(in srgb, var(--accent-500) 34%, var(--border-strong));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 40px -28px color-mix(in srgb, var(--accent-500) 16%, transparent);
}

.weight-entries-month-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.weight-entries-month-card__copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.weight-entries-month-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.weight-entries-month-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: capitalize;
  letter-spacing: 0.01em;
}

.weight-entries-month-card__value {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.2vw, 1.2rem);
  font-weight: var(--font-semibold);
  line-height: 1.15;
  color: var(--text-primary);
}

.weight-entries-month-card__value.is-empty {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.35;
  color: var(--text-secondary);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.weight-entries-month-card__actions,
.weight-entries-month-card__editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.weight-entries-month-card__actions {
  align-self: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.weight-entries-month-card__primary-action {
  min-width: 108px;
}

.weight-entries-month-card__delete-shortcut {
  align-self: flex-start;
}

.weight-entries-month-card__editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 70%, rgba(93, 141, 164, 0.18));
}

.weight-entries-month-card__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.weight-entries-month-card__field-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

.weight-entries-month-card__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.weight-entries-month-card__input {
  min-height: 42px;
}

.weight-entries-month-card__unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 42px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.weight-entries-month-card__editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weight-entries-month-card__delete-inline {
  grid-column: 1 / -1;
}

@media (max-width: 820px) {
  .weight-entries-modal {
    width: min(100%, calc(100% - 20px));
  }

  .weight-entries-modal__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr));
  }
}

@media (max-width: 640px) {
  body.app-page .weight-entries-modal {
    width: 100%;
    max-width: 100%;
    max-height: min(90dvh, 780px);
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    transform: translateY(104%);
  }

  body.app-page .weight-entries-modal.is-open {
    transform: translateY(0);
  }

  .weight-entries-modal__header {
    padding: 12px 16px 10px;
    border-radius: 24px 24px 0 0;
  }

  .weight-entries-modal__sheet-handle {
    display: block;
  }

  .weight-entries-modal__header-main {
    gap: 10px;
  }

  .weight-entries-modal__header-top {
    align-items: center;
  }

  .weight-entries-modal__header-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .weight-entries-modal__year-wrap {
    width: 100%;
    max-width: 100%;
  }

  .weight-entries-modal__feedback {
    min-height: 0;
    padding-top: 0;
  }

  .weight-entries-modal__body {
    padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  .weight-entries-modal__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .weight-entries-month-card {
    min-height: auto;
    padding: 14px;
    border-radius: 18px;
  }

  .weight-entries-month-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .weight-entries-month-card__copy {
    min-height: auto;
    gap: 4px;
  }

  .weight-entries-month-card__value {
    font-size: 1rem;
  }

  .weight-entries-month-card__value.is-empty {
    font-size: 0.93rem;
  }

  .weight-entries-month-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .weight-entries-month-card__primary-action {
    min-width: 96px;
  }

  .weight-entries-month-card__delete-shortcut {
    display: none;
  }

  .weight-entries-month-card__editor-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .weight-entries-month-card__editor-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .weight-entries-month-card__input-wrap {
    align-items: stretch;
  }
}

/* Legacy modal support (per quotes.php e altri) */
.modal.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Mission modals: usano pattern .active, NON .hidden
   Le modali mission sono hidden di default (opacity:0, visibility:hidden)
   e diventano visibili SOLO con .active class */

/* Card dentro modal (legacy) */
.modal>.card,
.modal>.modal-content {
  background: var(--surface-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  width: 100%;
}

.modal>.card .card-header,
.modal>.modal-content .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.modal>.card .card-body,
.modal>.modal-content .card-body {
  padding: var(--space-5);
}

/* Form actions dentro modal */
.modal .form-actions,
.ks-modal .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Annulla a sinistra per form-actions */
.modal .form-actions .btn-secondary,
.ks-modal .form-actions .btn-secondary {
  margin-right: auto;
}

/* ============================================
   QUOTES PAGE MODERNIZATION
   Card-based layout per citazioni
   ============================================ */

/* Container citazioni come grid di card */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

/* Card singola citazione */
.quote-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.quote-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

.quote-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.quote-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.quote-card-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.quote-card-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-500);
}

.quote-card-body {
  flex: 1;
}

.quote-card-text {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0 0 var(--space-2) 0;
}

.quote-card-text::before {
  content: '"';
  color: var(--accent-500);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.2em;
  margin-right: 2px;
}

.quote-card-text::after {
  content: '"';
  color: var(--accent-500);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.2em;
  margin-left: 2px;
}

.quote-card-author {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.quote-card-author::before {
  content: '— ';
  color: var(--text-tertiary);
}

.quote-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* Table fallback per quotes (legacy) */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.data-table th {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  background: var(--surface-secondary);
}

.data-table tbody tr:hover {
  background: var(--surface-interactive-hover);
}

.quote-text-cell {
  max-width: 400px;
}

.quote-text {
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
}

.quote-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Mobile quotes */
@media (max-width: 768px) {
  .quotes-grid {
    grid-template-columns: 1fr;
  }

  /* Nascondi tabella su mobile, mostra card */
  .table-wrapper {
    display: none;
  }

  .quotes-grid {
    display: grid;
  }
}

/* Form input error state */
.input-error,
input.input-error,
select.input-error,
textarea.input-error {
  border-color: var(--danger, #e53e3e) !important;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2);
}

/* ============================================
   IMPERSONATION MODE
   ============================================ */

/* Visual overlay when impersonating - use html for early render */
html.impersonating::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Dark mode: noticeable warm veil */
  background: rgba(139, 69, 69, 0.18);
}

/* Light mode overlay - dark veil */
html[data-theme="light"].impersonating::before {
  background: rgba(120, 50, 50, 0.12);
}

/* ============================================
   SHARED PROFILE MENU + SIDEBAR USER ROW
   ============================================ */

.app-header-edge-left:empty {
  display: none;
  padding-left: 0;
}

.profile-dropdown--account {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  transform-origin: var(--profile-popover-origin-x, calc(100% - 16px)) var(--profile-popover-origin-y, -6px);
}

#notifications-dropdown.notifications-dropdown--shared {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  transform-origin: var(--notifications-popover-origin-x, calc(100% - 12px)) var(--notifications-popover-origin-y, -4px);
}

#settings-hub-menu.profile-dropdown--settings {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  transform-origin: var(--settings-popover-origin-x, calc(100% - 12px)) var(--settings-popover-origin-y, -4px);
}

.header-left-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  width: 100%;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.header-left-user-row .header-profile--sidebar {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

.sidebar-account-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.header-left-user-row .notifications-trigger--left {
  width: 32px;
  min-width: 32px;
  justify-self: end;
  align-self: center;
}

.header-user--adaptive {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 12px;
  align-items: center;
  justify-content: initial;
  margin-left: 0;
  max-width: 100%;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 10px;
  gap: 0;
  column-gap: 4px;
  overflow: hidden;
}

.header-user--adaptive .header-user-avatar {
  margin-left: 0;
  margin-right: 7px;
  flex: 0 0 auto;
}

.header-user--adaptive .header-user-name {
  display: block !important;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  width: auto;
  text-align: center;
  font-size: clamp(0.71rem, 0.69rem + 0.12vw, 0.79rem);
  line-height: 1.1;
  letter-spacing: 0;
}

.header-user--adaptive .header-user-name-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: 2px 0;
}

#profile-menu-toggle-top.header-user--adaptive .header-user-name-wrap,
#profile-menu-toggle-top.header-user--adaptive .header-user-name,
#profile-menu-toggle-sidebar.header-user--adaptive .header-user-name-wrap,
#profile-menu-toggle-sidebar.header-user--adaptive .header-user-name {
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}

.header-user--adaptive.is-name-tight .header-user-name-wrap {
  justify-content: flex-start;
  padding-inline: 1px 0;
}

.header-user--adaptive.is-name-tight .header-user-name {
  text-align: left;
}

.header-user--adaptive .header-user-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  margin-left: 0;
  margin-right: 0;
  font-size: 10px;
  line-height: 1;
  opacity: 0.72;
}

.header-left-user-row .header-user--sidebar {
  width: 100%;
  min-width: 0;
}

.header-left-user-row #profile-menu-toggle-sidebar.ks-has-service-avatar {
  --ks-svc-avatar-left: 3px;
  --ks-svc-avatar-gutter: 9px;
  padding-left: calc(var(--ks-svc-avatar-size) + var(--ks-svc-avatar-gutter));
}

.header-left-notifications-btn {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  margin-left: 0;
  align-self: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.header-left-notifications-btn svg {
  width: 22px;
  height: 22px;
}

.header-left-notifications-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent-bg) 78%, transparent);
  color: var(--text-accent);
}

.header-left-notifications-btn .sidebar-notifications-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  margin-left: 0;
}

.sidebar-top-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-top-meta>.sidebar-admin-group {
  margin-top: 0;
  margin-bottom: 0;
}

/* ============================================
   LAYOUT SWITCH ICON-ONLY + INFO POPOVER
   ============================================ */

.layout-switch-with-popover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.layout-switch-with-popover .layout-segmented.layout-segmented--control {
  min-width: 0 !important;
}

.layout-switch-with-popover--left .layout-segmented.layout-segmented--control.layout-segmented--icon-only {
  min-width: 0 !important;
  width: auto !important;
  padding: 4px !important;
  gap: 4px !important;
}

.layout-switch-with-popover--left .layout-segmented.layout-segmented--control:not(.layout-segmented--icon-only) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}

.layout-switch-with-popover .layout-segmented.layout-segmented--icon-only .layout-label {
  display: none !important;
}

.layout-switch-with-popover .layout-segmented.layout-segmented--icon-only .layout-icon {
  display: inline-flex !important;
  margin: 0 !important;
}

.layout-switch-with-popover .layout-segmented.layout-segmented--icon-only .layout-segment-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 34px !important;
  padding: 0 !important;
  gap: 0 !important;
}

.layout-switch-with-popover--top .layout-segmented.layout-segmented--control:not(.layout-segmented--icon-only) .layout-label {
  display: inline !important;
}

.layout-switch-with-popover--top .layout-segmented.layout-segmented--control:not(.layout-segmented--icon-only) .layout-icon {
  display: inline-flex !important;
  margin-right: 8px !important;
}

.layout-switch-with-popover--top .layout-segmented.layout-segmented--control:not(.layout-segmented--icon-only) .layout-segment-btn {
  width: auto !important;
  min-width: 0 !important;
  padding: 7px 14px !important;
  gap: 6px !important;
}

.header-left-layout-row>.layout-switch-with-popover {
  width: 100%;
}

.header-left-layout-row>.layout-switch-with-popover .layout-segmented.layout-segmented--control {
  width: 100%;
  max-width: 100%;
}

.layout-switch-popover {
  position: fixed;
  width: min(250px, calc(100vw - 24px));
  max-width: 250px;
  padding: var(--space-3);
}

.layout-switch-popover__body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-switch-popover__body .layout-segmented {
  width: 100%;
  min-width: 0;
}

[data-layout-switch-template] {
  display: none !important;
}

.layout-segmented--popover-preview {
  pointer-events: auto;
}

.layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-label {
  display: inline !important;
}

.layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-icon {
  display: inline-flex !important;
  margin-right: 8px !important;
}

.layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-segment-btn {
  width: auto !important;
  min-width: 0 !important;
  padding: 7px 14px !important;
  gap: 6px !important;
}

.layout-switch-popover .layout-segmented.layout-switch-popover--expanded.layout-segmented--icon-only .layout-label {
  display: inline !important;
}

.layout-switch-popover .layout-segmented.layout-switch-popover--expanded.layout-segmented--icon-only .layout-segment-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 7px 14px !important;
  gap: 6px !important;
}

body.is-tablet.tablet-top-compact .layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-segment-btn span:not(.layout-icon),
html.is-tablet[data-layout="header"] .layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-segment-btn span:not(.layout-icon),
html.is-mobile[data-layout="header"] .layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-segment-btn span:not(.layout-icon) {
  display: inline !important;
}

/* Sidebar UX refinements (global: desktop + mobile) */
.app-sidebar .header-left-switch-row {
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 8px !important;
}

.app-sidebar .header-left-switch-row .header-theme-switch {
  flex: 1 1 auto;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.app-sidebar .header-left-switch-row .header-sound-switch {
  flex: 1 1 auto;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* Larger, more comfortable click target (base on desktop + mobile) */
.app-sidebar .theme-switch,
.app-sidebar .sound-switch {
  width: 64px !important;
  height: 40px !important;
  padding: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-sidebar .theme-switch-track,
.app-sidebar .sound-switch-track {
  width: 56px;
  height: 28px;
}

.app-sidebar .header-left-layout-row {
  padding: 4px 8px 2px !important;
}

/* More vertical air between profile/admin block and menu section */
.app-sidebar .sidebar-nav {
  margin-top: 14px !important;
  padding-top: 6px !important;
  gap: var(--space-2);
}

/* Sidebar menu readability + touch comfort */
.app-sidebar .sidebar-nav-link {
  min-height: 48px;
  padding: 10px 12px !important;
  gap: 12px;
  font-size: 15px !important;
  line-height: 1.35;
}

.app-sidebar .sidebar-nav-link svg {
  width: 23px;
  height: 23px;
}

.app-sidebar .sidebar-admin-toggle {
  min-height: 36px;
  padding: 6px 12px !important;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.12;
  font-weight: var(--font-semibold);
  letter-spacing: normal;
  text-transform: none;
}

.app-sidebar .sidebar-admin-toggle-label {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.12;
  font-weight: var(--font-semibold);
  letter-spacing: normal;
  text-transform: none;
}

.app-sidebar .sidebar-admin-toggle-icon {
  width: 18px;
  height: 18px;
}

.app-sidebar .sidebar-admin-toggle-icon svg {
  width: 18px;
  height: 18px;
}

.app-sidebar .sidebar-footer {
  margin-bottom: var(--space-5);
}

@media (min-width: 769px) {
  .app-shell[data-layout="sidebar"] {
    --sidebar-width: 272px;
  }
}

/* Slightly stronger active state for better scanability */
.app-sidebar .sidebar-nav-link.active {
  border: 1px solid rgba(var(--accent-500-rgb), 0.24);
  font-weight: var(--font-semibold);
}

/* Header-top: corridor-clamped nav + staged compaction */
html.ks-header-boot #app-header,
html.ks-header-boot #app-header *,
html.ks-header-boot #app-sidebar .header-sound-switch,
html.ks-header-boot #app-sidebar .header-sound-switch * {
  transition: none !important;
  animation: none !important;
}

body.layout-header #app-header .app-header-inner {
  --header-safe-gap-right: 20px;
  --header-safe-gap-left: 16px;
  --header-hysteresis: 20px;
  --nav-abs-x: 0px;
  --header-corridor-width: 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: none;
  column-gap: 0;
}

body.layout-header #app-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

body.layout-header #app-header .app-header-edge-left {
  flex: 0 0 auto;
}

body.layout-header #app-header .app-header-edge-left:empty {
  display: none;
  padding-left: 0;
}

body.layout-header #app-header .header-brand,
body.layout-header #app-header .header-actions {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

body.layout-header #app-header .header-brand {
  min-width: max-content;
}

body.layout-header #app-header .header-actions {
  min-width: max-content;
}

body.layout-header #app-header .header-nav {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(var(--nav-abs-x, 0px), -50%, 0);
  transition: transform 60ms linear;
  will-change: transform;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: var(--header-corridor-width, 9999px);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}

body.layout-header #app-header .app-header-inner.is-nav-resizing .header-nav {
  transition: none !important;
}

body.layout-header #app-header .app-header-inner.is-measuring .header-nav {
  transition: none !important;
  transform: translate3d(0, -50%, 0) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-width: none !important;
}

body.layout-header #app-header .header-nav-link {
  font-size: calc(var(--text-sm) * 1.2);
  line-height: 1.12;
  padding: 6px 10px;
}

body.layout-header #app-header .header-nav-link svg {
  width: 19px;
  height: 19px;
}

/* Compaction source of truth: data-nav-level on .app-header-inner (fallback: html[data-ks-nav-lvl]). */
body.layout-header #app-header .header-nav .header-nav-link>.nav-label,
body.layout-header #app-header .header-nav .header-nav-link>span {
  display: inline;
}

body.layout-header #app-header .app-header-inner[data-nav-level="1"] .header-nav,
html[data-ks-nav-lvl="1"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav {
  gap: 3px;
}

body.layout-header #app-header .app-header-inner[data-nav-level="1"] .header-nav .header-nav-link,
html[data-ks-nav-lvl="1"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link {
  padding: 5px 8px;
  font-size: calc(var(--text-sm) * 1.12);
}

body.layout-header #app-header .app-header-inner[data-nav-level="1"] .header-nav .header-nav-link svg,
html[data-ks-nav-lvl="1"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link svg {
  width: 18px;
  height: 18px;
}

body.layout-header #app-header .app-header-inner[data-nav-level="2"] .header-nav,
body.layout-header #app-header .app-header-inner[data-nav-level="3"] .header-nav,
html[data-ks-nav-lvl="2"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav,
html[data-ks-nav-lvl="3"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav {
  gap: 4px;
}

body.layout-header #app-header .app-header-inner[data-nav-level="2"] .header-nav .header-nav-link>.nav-label,
body.layout-header #app-header .app-header-inner[data-nav-level="2"] .header-nav .header-nav-link>span,
body.layout-header #app-header .app-header-inner[data-nav-level="3"] .header-nav .header-nav-link>.nav-label,
body.layout-header #app-header .app-header-inner[data-nav-level="3"] .header-nav .header-nav-link>span,
html[data-ks-nav-lvl="2"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link>.nav-label,
html[data-ks-nav-lvl="2"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link>span,
html[data-ks-nav-lvl="3"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link>.nav-label,
html[data-ks-nav-lvl="3"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link>span {
  display: none;
}

body.layout-header #app-header .app-header-inner[data-nav-level="2"] .header-nav .header-nav-link,
body.layout-header #app-header .app-header-inner[data-nav-level="3"] .header-nav .header-nav-link,
html[data-ks-nav-lvl="2"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link,
html[data-ks-nav-lvl="3"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link {
  padding: var(--space-2);
  min-width: 42px;
  justify-content: center;
  gap: 0;
}

body.layout-header #app-header .app-header-inner[data-nav-level="2"] .header-nav .header-nav-link svg,
body.layout-header #app-header .app-header-inner[data-nav-level="3"] .header-nav .header-nav-link svg,
html[data-ks-nav-lvl="2"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link svg,
html[data-ks-nav-lvl="3"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link svg {
  margin: 0;
}

body.layout-header #app-header .app-header-inner[data-nav-level="3"] .header-nav,
html[data-ks-nav-lvl="3"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav {
  gap: 2px;
}

body.layout-header #app-header .app-header-inner[data-nav-level="3"] .header-nav .header-nav-link,
html[data-ks-nav-lvl="3"] body.layout-header #app-header .app-header-inner:not([data-nav-level]) .header-nav .header-nav-link {
  min-width: 36px;
  padding: 6px;
}

body.layout-header #app-header .header-actions>.layout-switch-with-popover--top {
  margin-left: auto;
  margin-right: 0;
}

body.layout-header #app-header .header-actions>.header-sound-switch+.layout-switch-with-popover--top {
  padding-left: clamp(18px, 2vw, 28px);
}

@media (max-width: 1200px) {
  body.layout-header #app-header .header-nav {
    max-width: var(--header-corridor-width, 9999px);
  }
}

/* Dropdown item sizing parity: profile menu aligned to admin dropdown sizing */
#profile-menu .profile-dropdown-link,
.admin-dropdown-menu .admin-dropdown-link {
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-4);
  font-size: 15px;
  line-height: 1.32;
  border-radius: var(--radius-lg);
  margin: 2px var(--space-2);
}

#profile-menu .profile-dropdown-link svg,
.admin-dropdown-menu .admin-dropdown-link svg {
  width: 18px;
  height: 18px;
}

/* Logout item: same geometry as other entries + dedicated red tone */
#profile-menu .profile-dropdown-button {
  width: auto;
  box-sizing: border-box;
  align-self: stretch;
  background: rgba(239, 68, 68, 0.07);
  color: #dc2626;
}

#profile-menu .profile-dropdown-button svg {
  opacity: 1;
  color: #ea580c;
}

#profile-menu .profile-dropdown-button:hover,
#profile-menu .profile-dropdown-button:focus {
  background: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}

#profile-menu .profile-dropdown-button:hover svg,
#profile-menu .profile-dropdown-button:focus svg {
  color: #c2410c;
}

/* Header-top Admin trigger: same typographic step as updated menu items */
body.layout-header #app-header .admin-dropdown-btn {
  font-size: 15px;
  line-height: 1.12;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Notifications icon micro-tuning (top + sidebar triggers) */
.notifications-btn svg {
  width: 22px;
  height: 22px;
}

/* Layout switch (extended mode): reduce icon-text spacing everywhere */
.layout-switch-with-popover .layout-segmented.layout-segmented--control:not(.layout-segmented--icon-only) .layout-icon {
  margin-right: 6px !important;
}

.layout-switch-with-popover .layout-segmented.layout-segmented--control:not(.layout-segmented--icon-only) .layout-segment-btn {
  gap: 4px !important;
}

.layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-icon {
  margin-right: 6px !important;
}

.layout-switch-popover .layout-segmented.layout-switch-popover--expanded .layout-segment-btn {
  gap: 4px !important;
  padding: 7px 12px !important;
}

@media (max-width: 768px) {
  .sidebar-top-meta {
    gap: var(--space-1-5);
    padding-bottom: 0;
    margin-bottom: 8px;
    border-bottom: none;
  }

  .header-left-user-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .header-left-user-row .notifications-trigger--left {
    width: 30px;
    min-width: 30px;
    justify-self: end;
    align-self: center;
    order: 0;
  }

  .header-left-notifications-btn {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    margin-left: 0;
    align-self: center;
    border: none;
    border-radius: 8px;
    background: transparent;
  }

  .header-left-user-row .header-user-name {
    display: inline !important;
    text-align: left;
    width: auto;
  }

  .header-left-user-row .header-user-name-wrap {
    justify-content: flex-start;
    padding-inline: 2px 0;
  }

  .header-left-user-row .header-user--sidebar {
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 12px;
  }

  .header-left-user-row .header-user--sidebar .header-user-caret {
    display: none;
  }

  body.layout-header #app-header .header-actions .header-profile--top {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  body.layout-header #profile-menu-toggle-top.header-user--adaptive {
    width: auto;
    grid-template-columns: auto 12px;
    padding-right: 12px;
  }

  /* Extra mobile boost */
  body.is-mobile .app-sidebar .theme-switch,
  body.is-mobile .app-sidebar .sound-switch {
    width: 68px !important;
    height: 42px !important;
    padding: 7px !important;
  }

  body.is-mobile .app-sidebar .sidebar-nav {
    margin-top: 20px !important;
  }

  body.is-mobile .app-sidebar .sidebar-nav-link {
    font-size: 16px !important;
  }

  body.is-mobile .app-sidebar .sidebar-admin-toggle {
    font-size: 15px;
    line-height: 1.12;
  }

  body.is-mobile .app-sidebar .sidebar-nav-link.active {
    border-color: rgba(var(--accent-500-rgb), 0.32);
  }
}

/* Body scroll lock when mobile left sidebar is open */
body.is-left-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-width: 768px) {
  body.is-left-open .app-sidebar.open {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.is-left-open .app-sidebar.open .sidebar-nav {
    overflow: hidden !important;
    margin-top: 12px !important;
    padding-top: 2px !important;
  }

  body.is-left-open .app-sidebar.open .sidebar-header {
    margin-bottom: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  body.is-left-open .app-sidebar.open .app-shell-plan-pill--sidebar {
    min-height: 32px !important;
  }

  body.is-left-open .app-sidebar.open .header-left-user-row {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  body.is-left-open .app-sidebar.open>.sidebar-admin-group {
    margin-bottom: 8px !important;
  }

  body.is-left-open .app-sidebar.open .sidebar-footer {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
  }
}

/* Ensure content stays above overlay */
.app-header {
  position: sticky;
  z-index: var(--z-sticky);
}

.app-sidebar,
.app-main,
.app-content {
  position: relative;
  z-index: 2;
}

/* ============================================
   MIRROR (SPECCHIO)
   ============================================ */
.page-mirror-liquid {
  position: relative;
  isolation: isolate;
  background-color: var(--lm-bg);
  --lm-radius: 18px;
  --lm-radius-top: 18px 18px 0 0;
  --lm-radius-bottom: 0 0 18px 18px;
  --lm-frame-width: 2px;
  --lm-frame-opacity: 0.9;
  --lm-anim-speed-hover: 3.4s;
  --lm-anim-speed-selected: 7s;
  --lm-ring-width: 3px;
  --lm-ring-outset: 0px;
  --lm-glow-blur: 12px;
  --lm-glow-opacity: 0.45;
  --lm-ring-opacity: 0.9;
  --lm-a: 0deg;
  --lm-ambient-opacity: 0.35;
  --lm-ambient-glow: 0.22;
  --lm-ambient-speed: 12s;
}

[data-theme="dark"] .page-mirror-liquid {
  --lm-bg: #070709;
  --lm-brushed-1: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(255, 255, 255, 0.02) 85%);
  --lm-brushed-2: linear-gradient(315deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(255, 255, 255, 0.02) 90%);
  --lm-caustic-1: radial-gradient(900px 600px at 18% 20%, rgba(255, 255, 255, 0.06), transparent 70%);
  --lm-caustic-2: radial-gradient(1100px 700px at 80% 18%, rgba(255, 255, 255, 0.05), transparent 72%);
  --lm-caustic-3: radial-gradient(900px 700px at 55% 78%, rgba(255, 255, 255, 0.04), transparent 72%);
  --lm-grain: radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.04) 0, transparent 50%),
    radial-gradient(1px 1px at 80% 60%, rgba(255, 255, 255, 0.035) 0, transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.03) 0, transparent 50%);
  --lm-card-bg: #111117;
  --lm-card-border: rgba(255, 255, 255, 0.08);
  --lm-iri-colors: rgba(245, 245, 245, 0.9), rgba(200, 205, 210, 0.55), rgba(150, 155, 160, 0.25), rgba(245, 245, 245, 0.9);
  --lm-ring-colors: rgba(255, 255, 255, 0.85), rgba(170, 180, 190, 0.35), rgba(120, 130, 140, 0.18), rgba(120, 160, 255, 0.18), rgba(255, 200, 120, 0.14), rgba(255, 255, 255, 0.85);
  --lm-highlight: linear-gradient(120deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
  --lm-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --lm-media-bg: #0b0b10;
  --lm-haze: radial-gradient(900px 700px at 50% 20%, rgba(255, 255, 255, 0.04), transparent 70%);
}

[data-theme="light"] .page-mirror-liquid {
  --lm-bg: #f3efe8;
  --lm-brushed-1: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(170, 150, 130, 0.08) 45%, rgba(255, 255, 255, 0.35) 85%);
  --lm-brushed-2: linear-gradient(315deg, rgba(255, 255, 255, 0.35) 0%, rgba(160, 140, 120, 0.1) 50%, rgba(255, 255, 255, 0.25) 90%);
  --lm-caustic-1: radial-gradient(900px 600px at 18% 18%, rgba(255, 255, 255, 0.35), transparent 70%);
  --lm-caustic-2: radial-gradient(1100px 700px at 82% 20%, rgba(245, 236, 224, 0.4), transparent 72%);
  --lm-caustic-3: radial-gradient(900px 700px at 55% 78%, rgba(255, 255, 255, 0.3), transparent 72%);
  --lm-grain: radial-gradient(1px 1px at 20% 30%, rgba(90, 75, 60, 0.035) 0, transparent 50%),
    radial-gradient(1px 1px at 80% 60%, rgba(90, 75, 60, 0.03) 0, transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(90, 75, 60, 0.025) 0, transparent 50%);
  --lm-card-bg: #ffffff;
  --lm-card-border: rgba(120, 100, 85, 0.16);
  --lm-iri-colors: rgba(235, 228, 218, 0.95), rgba(210, 195, 175, 0.65), rgba(190, 175, 155, 0.3), rgba(235, 228, 218, 0.95);
  --lm-ring-base: rgba(255, 170, 55, 0.9);
  --lm-ring-hot: rgba(255, 246, 230, 1);
  --lm-ring-low: rgba(120, 60, 18, 0.55);
  --lm-ring-colors: var(--lm-ring-base), rgba(255, 140, 40, 0.85), var(--lm-ring-low), rgba(255, 210, 120, 0.9), var(--lm-ring-base);
  --lm-highlight: linear-gradient(120deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
  --lm-shadow: 0 16px 40px rgba(120, 100, 85, 0.2);
  --lm-media-bg: #faf7f1;
  --lm-haze: radial-gradient(900px 700px at 50% 20%, rgba(255, 255, 255, 0.55), transparent 70%);
  --lm-ring-opacity: 1;
  --lm-glow-opacity: 0.72;
  --lm-glow-blur: 16px;
  --lm-ring-width: 4px;
  --lm-ring-outset: 1px;
  --lm-hover-boost: 1.12;
}

.page-mirror-liquid::before,
.page-mirror-liquid::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-mirror-liquid::before {
  background-color: var(--lm-bg);
  background-image: var(--lm-brushed-1), var(--lm-brushed-2), var(--lm-caustic-1), var(--lm-caustic-2), var(--lm-caustic-3), var(--lm-grain);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 140% 140%, 140% 140%, auto, auto, auto, 240px 240px;
  background-position: center, center, 18% 20%, 82% 18%, 55% 78%, center;
}

.page-mirror-liquid::after {
  background-image: var(--lm-haze), radial-gradient(130% 120% at 50% 35%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  background-position: center, center;
  opacity: 0.45;
}

.page-mirror-liquid .app-shell,
.page-mirror-liquid .app-content {
  position: relative;
  z-index: 1;
}

.page-mirror-liquid .mirror-card {
  background: var(--lm-card-bg);
  border: 1px solid var(--lm-card-border);
  box-shadow: var(--lm-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-mirror-liquid .mirror-card:hover,
.page-mirror-liquid .mirror-card:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

.page-mirror-liquid .mirror-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--lm-radius);
}

.page-mirror-liquid .mirror-card::before,
.page-mirror-liquid .mirror-card::after {
  content: '';
  position: absolute;
  inset: calc(var(--lm-ring-outset) * -1);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.page-mirror-liquid .mirror-card::before {
  padding: var(--lm-ring-width);
  background-image:
    conic-gradient(from var(--lm-a), var(--lm-ring-colors)),
    conic-gradient(from var(--lm-a), rgba(255, 255, 255, 0) 0 40%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 58% 100%),
    conic-gradient(from calc(var(--lm-a) + 180deg), rgba(255, 255, 255, 0) 0 40%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0) 58% 100%);
  background-blend-mode: normal, screen, screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.page-mirror-liquid .mirror-card::after {
  padding: var(--lm-ring-width);
  background-image:
    conic-gradient(from var(--lm-a), var(--lm-ring-colors)),
    conic-gradient(from var(--lm-a), rgba(255, 255, 255, 0) 0 40%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 58% 100%),
    conic-gradient(from calc(var(--lm-a) + 180deg), rgba(255, 255, 255, 0) 0 40%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0) 58% 100%);
  background-blend-mode: normal, screen, screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(var(--lm-glow-blur));
  opacity: 0;
}

[data-theme="light"] .page-mirror-liquid .mirror-card::before {
  background-image:
    conic-gradient(from var(--lm-a), var(--lm-ring-colors)),
    conic-gradient(from var(--lm-a),
      rgba(255, 255, 255, 0) 0 44%,
      var(--lm-ring-hot) 46%,
      rgba(255, 230, 190, 0.75) 52%,
      rgba(255, 255, 255, 0) 58% 100%),
    conic-gradient(from calc(var(--lm-a) + 140deg),
      rgba(0, 0, 0, 0) 0 60%,
      var(--lm-ring-low) 64%,
      rgba(0, 0, 0, 0) 72% 100%);
}

[data-theme="light"] .page-mirror-liquid .mirror-card::after {
  filter: blur(var(--lm-glow-blur)) drop-shadow(0 0 14px rgba(210, 120, 40, 0.32));
}

[data-theme="light"] .page-mirror-liquid .mirror-card.is-current-month:not(.is-future):not(:hover):not(:focus-within)::before,
[data-theme="light"] .page-mirror-liquid .mirror-card[data-current-month="true"]:not(.is-future):not(:hover):not(:focus-within)::before {
  opacity: 0.48;
  animation: lm-orbit 12s linear infinite;
}

[data-theme="light"] .page-mirror-liquid .mirror-card.is-current-month:not(.is-future):not(:hover):not(:focus-within)::after,
[data-theme="light"] .page-mirror-liquid .mirror-card[data-current-month="true"]:not(.is-future):not(:hover):not(:focus-within)::after {
  opacity: 0.38;
  animation: lm-orbit 12s linear infinite;
}

[data-theme="light"] .page-mirror-liquid .mirror-card:hover::before,
[data-theme="light"] .page-mirror-liquid .mirror-card:focus-within::before {
  opacity: calc(var(--lm-ring-opacity) * var(--lm-hover-boost));
  animation-duration: 3s;
}

[data-theme="light"] .page-mirror-liquid .mirror-card:hover::after,
[data-theme="light"] .page-mirror-liquid .mirror-card:focus-within::after {
  opacity: calc(var(--lm-glow-opacity) * var(--lm-hover-boost));
  animation-duration: 3s;
}

.page-mirror-liquid .mirror-card.is-current:not(.is-future)::before {
  opacity: var(--lm-ambient-opacity);
  animation: lm-orbit var(--lm-ambient-speed) linear infinite;
}

.page-mirror-liquid .mirror-card.is-current:not(.is-future)::after {
  opacity: var(--lm-ambient-glow);
  animation: lm-orbit var(--lm-ambient-speed) linear infinite;
}

.page-mirror-liquid .mirror-card-media {
  border-radius: var(--lm-radius-top);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.page-mirror-liquid .mirror-card-img {
  border-radius: var(--lm-radius-top);
}

.page-mirror-liquid .mirror-card:hover::before,
.page-mirror-liquid .mirror-card:focus-within::before,
.page-mirror-liquid .mirror-card.is-selected::before,
.page-mirror-liquid .mirror-card[data-selected="true"]::before,
.page-mirror-liquid .mirror-card[aria-selected="true"]::before {
  opacity: var(--lm-ring-opacity);
  animation: lm-orbit var(--lm-anim-speed-hover) linear infinite;
}

.page-mirror-liquid .mirror-card:hover::after,
.page-mirror-liquid .mirror-card:focus-within::after,
.page-mirror-liquid .mirror-card.is-selected::after,
.page-mirror-liquid .mirror-card[data-selected="true"]::after,
.page-mirror-liquid .mirror-card[aria-selected="true"]::after {
  opacity: var(--lm-glow-opacity);
  animation: lm-orbit var(--lm-anim-speed-hover) linear infinite;
}

.page-mirror-liquid .mirror-card.is-current:hover::before,
.page-mirror-liquid .mirror-card.is-current:focus-within::before,
.page-mirror-liquid .mirror-card.is-current-month:hover::before,
.page-mirror-liquid .mirror-card.is-current-month:focus-within::before,
.page-mirror-liquid .mirror-card[data-current-month="true"]:hover::before,
.page-mirror-liquid .mirror-card[data-current-month="true"]:focus-within::before {
  opacity: var(--lm-ring-opacity);
  animation: lm-orbit var(--lm-anim-speed-hover) linear infinite;
}

.page-mirror-liquid .mirror-card.is-current:hover::after,
.page-mirror-liquid .mirror-card.is-current:focus-within::after,
.page-mirror-liquid .mirror-card.is-current-month:hover::after,
.page-mirror-liquid .mirror-card.is-current-month:focus-within::after,
.page-mirror-liquid .mirror-card[data-current-month="true"]:hover::after,
.page-mirror-liquid .mirror-card[data-current-month="true"]:focus-within::after {
  opacity: var(--lm-glow-opacity);
  animation: lm-orbit var(--lm-anim-speed-hover) linear infinite;
}

.page-mirror-liquid .mirror-card.is-selected::before,
.page-mirror-liquid .mirror-card[data-selected="true"]::before,
.page-mirror-liquid .mirror-card[aria-selected="true"]::before,
.page-mirror-liquid .mirror-card.is-selected::after,
.page-mirror-liquid .mirror-card[data-selected="true"]::after,
.page-mirror-liquid .mirror-card[aria-selected="true"]::after {
  animation-duration: var(--lm-anim-speed-selected);
}

.page-mirror-liquid .mirror-card.is-future:hover::before,
.page-mirror-liquid .mirror-card.is-future:focus-within::before {
  opacity: 0.55;
}

.page-mirror-liquid .mirror-card.is-future:hover::after,
.page-mirror-liquid .mirror-card.is-future:focus-within::after {
  opacity: 0.25;
}

@media (prefers-reduced-motion: reduce) {

  .page-mirror-liquid .mirror-card::before,
  .page-mirror-liquid .mirror-card::after {
    animation: none !important;
  }
}

@property --lm-a {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@keyframes lm-orbit {
  to {
    --lm-a: -360deg;
  }
}

@keyframes lm-spin {
  to {
    transform: rotate(360deg);
  }
}

.page-mirror {
  position: relative;
  isolation: isolate;
  background-color: var(--mirror-bg);
  --mirror-dot-size: 1px;
  --mirror-dot-gap: clamp(18px, 2.2vw, 24px);
  --mirror-dot-size-2: 0.7px;
  --mirror-dot-gap-2: clamp(10px, 1.3vw, 12px);
  --mirror-dots: radial-gradient(circle,
      var(--mirror-dot-color) 0 var(--mirror-dot-size),
      transparent calc(var(--mirror-dot-size) + 0.6px));
  --mirror-dots-2: radial-gradient(circle,
      var(--mirror-dot-color-2) 0 var(--mirror-dot-size-2),
      transparent calc(var(--mirror-dot-size-2) + 0.6px));
  --mirror-mask: radial-gradient(120% 100% at 30% 10%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(160deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0.2) 70%);
}

[data-theme="dark"] .page-mirror {
  --mirror-bg: #050507;
  /* più scuro */
  --mirror-dot-color: rgba(255, 255, 255, 0.16);
  /* puntini meno accesi */
  --mirror-dot-color-2: rgba(255, 255, 255, 0.05);
  --mirror-dot-size: 1.1px;

  /* gradienti scuri (ink), NON glow chiari */
  --mirror-glow-1: radial-gradient(900px circle at 18% 22%, rgba(4, 5, 8, 0.9), transparent 64%);
  --mirror-glow-2: radial-gradient(1200px circle at 82% 14%, rgba(4, 6, 8, 0.82), transparent 62%);
  --mirror-glow-3: radial-gradient(1100px circle at 70% 78%, rgba(4, 6, 8, 0.78), transparent 66%);

  /* vignette più “chiusa” */
  --mirror-vignette: radial-gradient(140% 140% at 50% 35%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.72) 100%);
}

[data-theme="dark"] .page-mirror::after {
  mix-blend-mode: normal;
  /* evita schiarimenti */
  opacity: 0.9;
  filter: blur(1.2px);
}


[data-theme="light"] .page-mirror {
  --mirror-bg: #f6f2ea;
  /* bianco caldo */
  --mirror-dot-color: rgba(70, 60, 52, 0.14);
  /* tortora caldo */
  --mirror-dot-color-2: rgba(70, 60, 52, 0.05);

  --mirror-dot-size: 1.6px;
  --mirror-dot-gap: clamp(20px, 2.2vw, 26px);
  --mirror-dot-size-2: 0.8px;
  --mirror-dot-gap-2: clamp(10px, 1.4vw, 12px);

  /* gradienti warm/taupe (monocromatici) */
  --mirror-glow-warm: radial-gradient(900px circle at 16% 16%, rgba(232, 222, 208, 0.6), transparent 66%);
  --mirror-glow-taupe: radial-gradient(1200px circle at 84% 16%, rgba(210, 196, 178, 0.52), transparent 68%);
  --mirror-glow-neutral: radial-gradient(1000px circle at 55% 80%, rgba(244, 238, 230, 0.7), transparent 70%);

  /* depth calda, non grigia fredda */
  --mirror-depth: linear-gradient(120deg, rgba(255, 255, 255, 0.0) 0%, rgba(168, 150, 128, 0.18) 36%, rgba(255, 255, 255, 0.0) 72%);

  /* vignette leggerissima, calda */
  --mirror-vignette: radial-gradient(1200px 800px at 50% 18%, rgba(255, 255, 255, 0) 0%, rgba(120, 96, 72, 0.06) 72%, rgba(120, 96, 72, 0.10) 100%);

  /* mask per occludere i puntini in alto */
  --mirror-mask-light: radial-gradient(140% 100% at 50% 8%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 18%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 1) 85%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 24%, rgba(0, 0, 0, 1) 70%);

  /* fallback overlay se mask non supportata */
  --mirror-occlusion: linear-gradient(to bottom, rgba(246, 242, 234, 0.96) 0%, rgba(246, 242, 234, 0.72) 18%, rgba(246, 242, 234, 0.0) 55%);
}

.page-mirror::before,
.page-mirror::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}


.page-mirror::before {
  background-color: var(--mirror-bg);
  background-image: var(--mirror-depth), var(--mirror-dots), var(--mirror-dots-2);
  background-repeat: no-repeat, repeat, repeat;
  background-size: 140% 140%, var(--mirror-dot-gap) var(--mirror-dot-gap), var(--mirror-dot-gap-2) var(--mirror-dot-gap-2);
  background-position: 0% 0%, center, center;
  -webkit-mask-image: var(--mirror-mask);
  mask-image: var(--mirror-mask);
  -webkit-mask-size: cover;
  mask-size: cover;
}

[data-theme="light"] .page-mirror::before {
  -webkit-mask-image: var(--mirror-mask-light);
  mask-image: var(--mirror-mask-light);
  -webkit-mask-size: cover;
  mask-size: cover;
}

.page-mirror::after {
  background-image: var(--mirror-glow-1), var(--mirror-glow-2), var(--mirror-glow-3), var(--mirror-dots), var(--mirror-vignette);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-size: auto, auto, auto, var(--mirror-dot-gap) var(--mirror-dot-gap), auto;
  background-position: 18% 16%, 82% 18%, 55% 80%, center, center;
  opacity: 0.85;
  filter: blur(1.6px);
  mix-blend-mode: normal;
}

[data-theme="light"] .page-mirror::after {
  background-image: var(--mirror-occlusion), var(--mirror-glow-warm), var(--mirror-glow-taupe), var(--mirror-glow-neutral), var(--mirror-dots), var(--mirror-vignette);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-size: 100% 60%, auto, auto, auto, var(--mirror-dot-gap) var(--mirror-dot-gap), auto;
  background-position: 0% 0%, 18% 16%, 82% 16%, 55% 80%, center, center;
  mix-blend-mode: multiply;
  /* dà profondità taupe senza effetto “sporco” */
  opacity: 0.5;
  filter: blur(2.8px);
}


.page-mirror .app-shell,
.page-mirror .app-content {
  position: relative;
  z-index: 1;
}

.mirror-header .page-header-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(18px, 3vw, 36px);
  row-gap: var(--space-3);
}

.mirror-header .page-header-copy {
  min-width: 0;
}

.mirror-header-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 0;
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.mirror-year-selector .form-input {
  min-width: 110px;
}

.menu-item--mirror .menu-icon--mirror svg {
  color: var(--mirror-accent);
  filter: drop-shadow(0 0 6px rgba(214, 177, 90, 0.25));
  transition: filter 180ms ease, color 180ms ease;
}

.mirror-page-title {
  display: inline-block;
  margin: 0;
  padding-right: 0.08em;
  line-height: 1.02;
}

.mirror-title-shine {
  color: var(--mirror-accent);
  text-shadow: 0 1px 10px rgba(214, 177, 90, 0.12);
}

.menu-item--mirror.active .menu-icon--mirror svg,
.menu-item--mirror.is-active .menu-icon--mirror svg,
.menu-item--mirror:hover .menu-icon--mirror svg,
.menu-item--mirror:focus .menu-icon--mirror svg {
  color: #e2c77b;
  filter: drop-shadow(0 0 8px rgba(214, 177, 90, 0.35));
}

.menu-text--mirror {
  display: inline;
  padding: 0;
  background: none;
  background-color: transparent;
  color: var(--mirror-accent);
  text-shadow: 0 1px 10px rgba(214, 177, 90, 0.12);
  transition: text-shadow 180ms ease;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .menu-text--mirror {
    background-color: transparent;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), var(--mirror-accent), rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: text-shadow 180ms ease;
  }

  .menu-text--mirror.ks-shine-text {
    display: inline-block;
    background: linear-gradient(90deg,
        var(--mirror-accent) 0%,
        var(--mirror-accent) 46%,
        #ffe7b2 50%,
        var(--mirror-accent) 54%,
        var(--mirror-accent) 100%);
    background-color: transparent;
    background-repeat: repeat-x;
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: ks-shine-sweep 4s linear infinite;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  [data-theme="light"] .menu-text--mirror,
  body:not([data-theme="dark"]) .menu-text--mirror {
    background: linear-gradient(90deg, #a46f12, var(--mirror-accent), #c4962b);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-shadow: 0 1px 4px rgba(214, 177, 90, 0.12);
  }

  [data-theme="light"] .menu-text--mirror.ks-shine-text,
  body:not([data-theme="dark"]) .menu-text--mirror.ks-shine-text {
    background: linear-gradient(90deg,
        var(--mirror-accent) 0%,
        var(--mirror-accent) 46%,
        #ffdf9b 50%,
        var(--mirror-accent) 54%,
        var(--mirror-accent) 100%);
    background-color: transparent;
    background-repeat: repeat-x;
    background-size: 220% 100%;
    background-position: 0% 50%;
    text-shadow: 0 1px 1px rgba(80, 55, 20, 0.16);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .menu-item--mirror:hover .ks-shine-text,
  .menu-item--mirror:focus .ks-shine-text,
  .menu-item--mirror:focus-visible .ks-shine-text {
    animation: ks-shine-sweep 2.1s linear infinite;
  }

  .menu-item--mirror.active .ks-shine-text,
  .menu-item--mirror.is-active .ks-shine-text,
  .menu-item--mirror[aria-current="page"] .ks-shine-text {
    animation: ks-shine-sweep 3s linear infinite;
  }

  .mirror-title-shine {
    background: linear-gradient(90deg,
        var(--mirror-accent) 0%,
        var(--mirror-accent) 46%,
        #ffe7b2 50%,
        var(--mirror-accent) 54%,
        var(--mirror-accent) 100%);
    background-color: transparent;
    background-repeat: repeat-x;
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: ks-shine-sweep 4s linear infinite;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  [data-theme="light"] .mirror-title-shine,
  body:not([data-theme="dark"]) .mirror-title-shine {
    background: linear-gradient(90deg,
        var(--mirror-accent) 0%,
        var(--mirror-accent) 46%,
        #ffdf9b 50%,
        var(--mirror-accent) 54%,
        var(--mirror-accent) 100%);
    background-color: transparent;
    background-repeat: repeat-x;
    background-size: 220% 100%;
    background-position: 0% 50%;
    text-shadow: 0 1px 1px rgba(80, 55, 20, 0.16);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

@keyframes ks-shine-sweep {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-item--mirror .ks-shine-text {
    animation: none !important;
  }

  .mirror-title-shine {
    animation: none !important;
  }

  .mirror-collage-cta::before {
    animation: none !important;
  }
}

.mirror-gallery {
  margin-top: var(--space-6);
}

.mirror-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: var(--space-3);
}

.mirror-toolbar__utility-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.mirror-collage-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--mirror-accent) 42%, var(--border-default));
  border-radius: 999px;
  color: color-mix(in srgb, var(--mirror-accent) 72%, var(--text-primary));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-elevated) 90%, rgba(255, 255, 255, 0.08)),
      color-mix(in srgb, var(--surface-primary) 94%, rgba(9, 14, 24, 0.14)));
  box-shadow:
    0 20px 36px -30px rgba(3, 7, 18, 0.58),
    0 10px 18px -18px rgba(214, 177, 90, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
  overflow: hidden;
  isolation: isolate;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

.mirror-collage-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 231, 178, 0.16) 50%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0) 78%);
  transform: translateX(-120%);
  animation: mirror-cta-shimmer 7.2s linear infinite;
  z-index: -1;
}

.mirror-collage-cta:hover,
.mirror-collage-cta:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--mirror-accent) 58%, var(--border-default));
  color: color-mix(in srgb, var(--mirror-accent) 82%, var(--text-primary));
  box-shadow:
    0 24px 40px -28px rgba(3, 7, 18, 0.64),
    0 12px 22px -18px rgba(214, 177, 90, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.mirror-collage-cta:focus-visible {
  outline: 2px solid rgba(255, 224, 163, 0.72);
  outline-offset: 3px;
}

.mirror-collage-cta:disabled,
.mirror-collage-cta.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
  color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 18px -18px rgba(3, 7, 18, 0.42);
}

.mirror-collage-cta:disabled::before,
.mirror-collage-cta.is-disabled::before {
  display: none;
}

.mirror-collage-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.mirror-collage-cta__icon svg {
  width: 18px;
  height: 18px;
}

.mirror-collage-cta__text {
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

body.is-modal-open .mirror-header-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes mirror-cta-shimmer {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

.mirror-privacy-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 88%, rgba(255, 255, 255, 0.04));
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px -24px rgba(15, 23, 42, 0.36);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mirror-privacy-toggle:hover,
.mirror-privacy-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border-default));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 30px -24px rgba(15, 23, 42, 0.42);
}

.mirror-privacy-toggle.is-active {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-default));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-secondary));
}

.mirror-privacy-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.mirror-privacy-toggle__icon[hidden] {
  display: none !important;
}

.mirror-privacy-toggle__icon svg {
  width: 18px;
  height: 18px;
}

.mirror-privacy-toggle__text {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

#mirror-feedback {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

#mirror-feedback:empty {
  display: none;
}

#mirror-feedback.is-success {
  color: var(--success-dark);
  background: var(--success-light);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

#mirror-feedback.is-error {
  color: var(--danger-dark);
  background: var(--danger-light);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.mirror-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.mirror-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--surface-secondary);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mirror-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-shadow);
}

.mirror-card-media {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background: var(--surface-tertiary);
  position: relative;
  font-size: 0;
}

.mirror-card.has-photo .mirror-card-media {
  background: #000;
}

.mirror-card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.mirror-card.has-photo .mirror-card-placeholder {
  display: none;
}

.mirror-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 18px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-align: center;
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--surface-elevated) 92%, rgba(255, 255, 255, 0.2)), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 94%, rgba(255, 255, 255, 0.12)), color-mix(in srgb, var(--surface-secondary) 96%, rgba(15, 23, 42, 0.06)));
}

.mirror-card-placeholder__art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: color-mix(in srgb, var(--text-tertiary) 78%, var(--accent) 22%);
}

.mirror-card-placeholder__art svg {
  width: 72px;
  height: 72px;
}

.mirror-card-placeholder__title {
  max-width: 15ch;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.mirror-card-placeholder__meta {
  max-width: 20ch;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.mirror-card-placeholder__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-default));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-elevated));
  color: color-mix(in srgb, var(--accent) 82%, var(--text-primary));
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.mirror-card-placeholder--current .mirror-card-placeholder__action {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-default));
}

.mirror-card-placeholder--future .mirror-card-placeholder__action {
  display: none;
}

.mirror-card-privacy-mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(7, 11, 17, 0.38), rgba(7, 11, 17, 0.72));
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 2;
}

.mirror-card-privacy-mask__art {
  display: inline-flex;
  width: 54px;
  height: 54px;
}

.mirror-card-privacy-mask__art svg {
  width: 54px;
  height: 54px;
}

.mirror-card-privacy-mask__text {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mirror-privacy-mode .mirror-card.has-photo .mirror-card-img {
  filter: blur(18px) saturate(0.72) brightness(0.8);
  transform: scale(1.05);
}

.mirror-privacy-mode .mirror-card.has-photo .mirror-card-privacy-mask {
  opacity: 1;
}

.mirror-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--card-border);
  gap: var(--space-2);
  border-bottom-left-radius: var(--lm-radius);
  border-bottom-right-radius: var(--lm-radius);
}

.mirror-card-month {
  font-weight: var(--font-semibold);
  min-width: 0;
}

.mirror-card-weight {
  color: var(--neutral-500);
  font-size: var(--text-sm);
  text-align: right;
  overflow-wrap: anywhere;
}

.mirror-card-weight.is-empty {
  color: var(--neutral-400);
}

.mirror-card.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.mirror-card.is-future {
  background: color-mix(in srgb, var(--surface-secondary) 94%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--border-default) 78%, transparent);
  box-shadow: none;
}

.mirror-card.is-future .mirror-card-media {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 96%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--surface-secondary) 96%, rgba(15, 23, 42, 0.04)));
  cursor: not-allowed;
}

.mirror-card.is-future .mirror-card-placeholder {
  color: var(--text-secondary);
}

.mirror-card.is-future .mirror-card-footer {
  border-top-color: color-mix(in srgb, var(--border-default) 76%, transparent);
  color: var(--text-secondary);
}

.mirror-card.is-future .mirror-card-weight {
  color: var(--text-tertiary);
}

.mirror-card.is-future .mirror-card-media {
  cursor: not-allowed;
}

.mirror-card.is-current:not(.has-photo) {
  box-shadow: 0 24px 44px -34px rgba(242, 196, 120, 0.36);
}

html[data-theme="light"] .mirror-card-placeholder {
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98));
}

html[data-theme="light"] .mirror-card-placeholder__art {
  color: color-mix(in srgb, var(--text-secondary) 62%, var(--accent) 28%);
}

html[data-theme="light"] .mirror-card-placeholder__action {
  color: color-mix(in srgb, var(--accent) 84%, #3a2412 16%);
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.94));
}

html[data-theme="light"] .mirror-card.is-future {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
  border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
}

html[data-theme="light"] .mirror-card.is-future .mirror-card-media {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94));
}

html[data-theme="light"] .mirror-card.is-current:not(.has-photo) {
  box-shadow: 0 22px 38px -34px rgba(217, 119, 6, 0.28);
}

.mirror-modal .ks-modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--space-4) var(--space-5) var(--space-3);
  overflow: hidden;
}

.mirror-modal {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  max-height: min(760px, calc(100vh - 48px));
}

.mirror-collage-modal .ks-modal__header {
  align-items: flex-start;
}

.mirror-collage-modal {
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  max-height: min(88vh, calc(100vh - 32px));
}

.mirror-collage-modal__subtitle {
  margin: 6px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.mirror-collage-modal .ks-modal__body {
  display: block;
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  overflow: auto;
  overscroll-behavior: contain;
}

.mirror-collage-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mirror-collage-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 90%, rgba(255, 255, 255, 0.04));
}

.mirror-collage-panel--controls {
  position: relative;
  overflow: visible;
}

.mirror-collage-panel__title {
  margin: 0;
  font-size: var(--text-base);
}

.mirror-collage-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 84%, rgba(255, 255, 255, 0.04));
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
}

.mirror-collage-controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mirror-collage-controls-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.mirror-collage-controls-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.mirror-collage-controls-actions .btn {
  white-space: nowrap;
}

.mirror-collage-popover {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.mirror-collage-toolbar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.mirror-collage-toolbar-btn::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  opacity: 0.64;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms ease, opacity 180ms ease;
}

.mirror-collage-toolbar-btn.is-open::after {
  transform: rotate(-135deg) translateY(-1px);
  opacity: 0.86;
}

.mirror-collage-toolbar-btn__label {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.mirror-collage-toolbar-btn--format .mirror-collage-toolbar-btn__label::after {
  content: ':';
  margin-left: 0.18em;
}

.mirror-collage-toolbar-btn__value {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.mirror-collage-toolbar-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mirror-accent) 84%, rgba(7, 11, 17, 0.18));
  color: #211304;
  font-size: 11px;
  font-weight: var(--font-bold);
  line-height: 1;
}

.mirror-collage-toolbar-btn.has-active-filters {
  border-color: color-mix(in srgb, var(--mirror-accent) 44%, var(--border-default));
  background: color-mix(in srgb, var(--mirror-accent) 10%, var(--surface-primary));
}

.mirror-collage-popover__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(320px, calc(100vw - 64px));
  min-width: 240px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-default) 84%, transparent);
  background: color-mix(in srgb, var(--surface-elevated) 96%, rgba(8, 12, 20, 0.08));
  box-shadow: 0 24px 44px -28px rgba(3, 7, 18, 0.56);
  backdrop-filter: blur(18px);
  z-index: 8;
}

.mirror-collage-popover__panel[hidden] {
  display: none !important;
}

.mirror-collage-popover__panel--format {
  min-width: 250px;
}

.mirror-collage-month-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

.mirror-collage-month-empty {
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--border-subtle) 82%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 84%, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary);
  text-align: center;
}

.mirror-collage-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding: 12px 15px;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 82%, rgba(255, 255, 255, 0.04));
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mirror-collage-chip:hover,
.mirror-collage-chip:focus-within {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-default));
  transform: translateY(-1px);
}

.mirror-collage-chip.is-selected {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-default));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mirror-collage-month__checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.mirror-collage-chip__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.mirror-collage-chip__copy strong {
  font-size: var(--text-sm);
}

.mirror-collage-chip__meta {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.mirror-collage-options {
  display: grid;
  gap: 10px;
}

.mirror-collage-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 84%, rgba(255, 255, 255, 0.04));
}

.mirror-collage-option input {
  accent-color: var(--accent);
}

.mirror-collage-format-list {
  display: grid;
  gap: 8px;
}

.mirror-collage-format-option {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 84%, rgba(255, 255, 255, 0.04));
  color: var(--text-primary);
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.mirror-collage-format-option:hover,
.mirror-collage-format-option:focus-visible {
  border-color: color-mix(in srgb, var(--mirror-accent) 38%, var(--border-default));
  transform: translateY(-1px);
}

.mirror-collage-format-option.is-active {
  border-color: color-mix(in srgb, var(--mirror-accent) 52%, var(--border-default));
  background: color-mix(in srgb, var(--mirror-accent) 10%, var(--surface-primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mirror-collage-format-option__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.mirror-collage-format-option__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.mirror-collage-action-btn {
  min-height: 40px;
  border-radius: 999px;
}

.mirror-collage-action-btn--select {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-default));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--accent) 76%, var(--text-primary));
}

.mirror-collage-action-btn--deselect {
  background: color-mix(in srgb, var(--surface-primary) 84%, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary);
}

.mirror-collage-action-btn:disabled {
  opacity: 0.54;
  box-shadow: none;
}

.mirror-collage-panel--preview {
  justify-content: stretch;
  gap: 10px;
}

.mirror-collage-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mirror-collage-preview-head__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.mirror-collage-preview-toggle {
  min-height: 36px;
  border-radius: 999px;
  white-space: nowrap;
}

.mirror-collage-preview-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: clamp(180px, 22vw, 240px);
  max-height: clamp(220px, 32vh, 300px);
  padding: 12px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 82% 18%, rgba(242, 196, 120, 0.12), rgba(242, 196, 120, 0) 28%),
    linear-gradient(180deg, rgba(8, 12, 20, 0.94), rgba(15, 23, 42, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 44px rgba(0, 0, 0, 0.28);
}

.mirror-collage-canvas {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  max-height: 100%;
  margin: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.32));
}

.mirror-collage-preview-open {
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  z-index: 1;
}

.mirror-collage-preview-open[hidden],
.mirror-collage-preview-open:disabled {
  display: none;
}

.mirror-collage-preview-open:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 68%, transparent);
  outline-offset: -6px;
}

.mirror-collage-preview-open__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.mirror-collage-panel--preview.is-collapsed {
  gap: 0;
}

.mirror-collage-preview-shell[hidden] {
  display: none !important;
}

.mirror-collage-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: rgba(255, 255, 255, 0.84);
  z-index: 2;
}

.mirror-collage-empty-state[hidden] {
  display: none;
}

.mirror-collage-empty-state__art {
  display: inline-flex;
  width: 72px;
  height: 72px;
}

.mirror-collage-empty-state__art svg {
  width: 72px;
  height: 72px;
}

.mirror-modal-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tertiary);
  border-radius: 16px;
  width: 100%;
  height: clamp(280px, 56vh, 520px);
  max-height: 100%;
  min-height: 0;
  padding: 14px;
  overflow: hidden;
}

.mirror-modal-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mirror-modal-footer {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mirror-modal-footer--collage {
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mirror-collage-preview-modal {
  width: min(1280px, calc(100vw - 28px));
  max-width: 1280px;
  max-height: min(92vh, calc(100vh - 24px));
}

.mirror-collage-preview-modal .ks-modal__body {
  padding: 0;
  overflow: hidden;
}

.mirror-collage-preview-modal__body {
  min-height: 0;
}

.mirror-collage-preview-modal__frame {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  height: min(76vh, 920px);
  overflow: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 82% 18%, rgba(242, 196, 120, 0.12), rgba(242, 196, 120, 0) 28%),
    linear-gradient(180deg, rgba(8, 12, 20, 0.96), rgba(15, 23, 42, 0.9));
}

.mirror-collage-preview-modal__image {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  box-shadow: 0 28px 48px rgba(0, 0, 0, 0.34);
}

.mirror-modal-footer--collage-preview {
  justify-content: flex-end;
}

.mirror-modal-footer--photo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.mirror-modal-footer__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.mirror-modal-footer__group--rotations {
  justify-self: start;
}

.mirror-modal-footer__group--replace {
  justify-self: center;
}

.mirror-modal-footer__group--danger {
  justify-self: end;
}

.mirror-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  min-width: 58px;
  height: 46px;
  padding: 0;
}

.mirror-icon-btn__content {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding-top: 1px;
}

.mirror-icon-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mirror-icon-btn__icon svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.mirror-icon-btn__badge {
  position: absolute;
  right: -20px;
  bottom: -11px;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-primary) 88%, rgba(255, 255, 255, 0.12));
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.6);
}

.mirror-replace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 170px;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-default));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06)), color-mix(in srgb, var(--surface-primary) 84%, rgba(255, 255, 255, 0.03)));
  color: color-mix(in srgb, var(--accent) 78%, var(--text-primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 26px -24px rgba(214, 177, 90, 0.45);
}

.mirror-replace-btn:hover,
.mirror-replace-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-default));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 32px -26px rgba(214, 177, 90, 0.56);
}

.mirror-replace-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mirror-replace-btn__icon svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1024px) {
  .mirror-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .mirror-header .page-header-body {
    column-gap: var(--space-3);
  }

  .mirror-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .mirror-header .page-header-body {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mirror-toolbar {
    width: 100%;
    justify-content: flex-start;
    justify-self: stretch;
  }

  .mirror-toolbar__utility-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .mirror-year-selector,
  .mirror-year-selector .form-input {
    width: 100%;
    min-width: 0;
  }

  .mirror-privacy-toggle {
    width: 44px;
    padding: 0;
  }

  .mirror-privacy-toggle__text {
    display: none;
  }

  .mirror-header-cta {
    position: fixed;
    left: 50%;
    width: min(75vw, 320px);
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    z-index: 40;
    transform: translateX(-50%);
  }

  .mirror-collage-cta {
    width: 100%;
  }

  body.is-modal-open .mirror-header-cta {
    transform: translateX(-50%) translateY(10px);
  }

  body.app-page[data-page="mirror"] .app-content {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 540px) {
  .mirror-toolbar {
    width: 100%;
  }

  .mirror-collage-controls-toolbar,
  .mirror-collage-controls-actions {
    width: 100%;
  }

  .mirror-collage-popover {
    flex: 1 1 calc(50% - 5px);
  }

  .mirror-collage-toolbar-btn {
    width: 100%;
    justify-content: space-between;
  }

  .mirror-collage-popover__panel {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .mirror-collage-controls-actions {
    width: 100%;
  }

  .mirror-collage-controls-actions .btn {
    flex: 1 1 calc(50% - 4px);
  }

  .mirror-collage-chip {
    width: 100%;
    border-radius: 18px;
  }

  .mirror-collage-preview-shell {
    min-height: 0;
    padding: 12px;
    max-height: min(32vh, 240px);
  }

  .mirror-collage-preview-open__hint {
    right: 10px;
    bottom: 10px;
    padding-inline: 10px;
  }

  .mirror-collage-preview-modal {
    width: min(100vw - 12px, 1000px);
    max-height: min(94vh, calc(100vh - 12px));
  }

  .mirror-collage-preview-modal__frame {
    height: min(72vh, 760px);
    padding: 12px;
  }

  .mirror-collage-modal {
    width: min(100vw - 20px, 720px);
    max-height: min(90vh, calc(100vh - 16px));
  }

  .mirror-modal-footer--photo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "rotate rotate"
      "replace danger";
  }

  .mirror-modal {
    width: min(100vw - 20px, 560px);
    max-height: min(86vh, 700px);
  }

  .mirror-modal .ks-modal__body {
    padding-inline: var(--space-4);
  }

  .mirror-modal-media {
    height: min(48vh, 420px);
    padding: 12px;
  }

  .mirror-modal-footer__group--rotations {
    grid-area: rotate;
    flex-wrap: wrap;
  }

  .mirror-modal-footer__group--replace {
    grid-area: replace;
  }

  .mirror-modal-footer__group--danger {
    grid-area: danger;
  }

  .mirror-modal-footer__group--replace .btn,
  .mirror-modal-footer__group--danger .btn {
    width: 100%;
    justify-content: center;
  }

  .mirror-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   STATS V2 PAGE
   ============================================ */

.stats-v2-user-summary-body {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.stats-v2-user-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.stats-v2-avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.stats-v2-overall-block,
.stats-v2-streak-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
}

.stats-v2-streak-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
}

.stats-v2-streak-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.stats-v2-streak-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.stats-v2-streak-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.stats-v2-streak-habit {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.stats-v2-streak-dates {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.stats-v2-ring-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.stats-v2-ring {
  --stats-v2-ring-value: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(
    var(--accent-500) calc(var(--stats-v2-ring-value) * 1%),
    var(--surface-tertiary) 0
  );
}

.stats-v2-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
}

.stats-v2-ring-value {
  position: relative;
  z-index: 1;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.stats-v2-ring-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.stats-v2-ring-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.stats-v2-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stats-v2-year-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.stats-v2-year-switcher .ks-select {
  min-width: 110px;
}

.stats-v2-month-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.stats-v2-month-card {
  position: relative;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  min-height: 76px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.stats-v2-month-card:hover {
  border-color: var(--accent-500);
  transform: translateY(-1px);
}

.stats-v2-month-card:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.stats-v2-month-card.is-selected {
  border-color: var(--accent-500);
  background: var(--accent-bg);
}

.stats-v2-month-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stats-v2-month-name {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

.stats-v2-month-percent {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.stats-v2-month-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-tertiary);
  overflow: hidden;
}

.stats-v2-month-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}

.stats-v2-month-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
}

.stats-v2-period-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.stats-v2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.stats-v2-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats-v2-category-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.stats-v2-category-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.stats-v2-category-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cat-color, var(--surface-tertiary)) 24%, transparent);
}

.stats-v2-category-name {
  display: block;
  font-weight: var(--font-semibold);
}

.stats-v2-category-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.stats-v2-category-progress {
  display: grid;
  gap: var(--space-1);
}

.stats-v2-category-values {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.stats-v2-progress-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-tertiary);
  overflow: hidden;
}

.stats-v2-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}

.stats-v2-progress-track.is-unscheduled span {
  background: linear-gradient(90deg, #64748b, #475569);
}
.stats-v2-habits-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.stats-v2-category-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stats-v2-chip {
  border: 1px solid var(--border-default);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.stats-v2-chip.is-active {
  border-color: var(--accent-500);
  background: var(--accent-bg);
  color: var(--text-primary);
}

.stats-v2-search-wrap .form-input {
  max-width: 280px;
}

.stats-v2-habits-list {
  display: grid;
  gap: var(--space-2);
}

.stats-v2-habit-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.stats-v2-habit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.stats-v2-habit-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.stats-v2-habit-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--surface-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stats-v2-habit-score {
  font-weight: var(--font-semibold);
}

.stats-v2-habit-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.stats-v2-pill {
  border-radius: var(--radius-full);
  padding: 2px 8px;
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 11px;
  font-weight: var(--font-medium);
}

.stats-v2-heatmap-actions {
  display: flex;
  align-items: center;
}

.stats-v2-toggle {
  display: inline-flex;
  gap: 6px;
}

.stats-v2-toggle .btn.is-active {
  border-color: var(--accent-500);
  background: var(--accent-bg);
}

.stats-v2-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.stats-v2-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.stats-v2-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.stats-v2-legend-swatch.level-0,
.stats-v2-heatmap-cell.level-0 {
  background: var(--surface-tertiary);
}

.stats-v2-legend-swatch.level-1,
.stats-v2-heatmap-cell.level-1 {
  background: #a7f3d0;
}

.stats-v2-legend-swatch.level-2,
.stats-v2-heatmap-cell.level-2 {
  background: #6ee7b7;
}

.stats-v2-legend-swatch.level-3,
.stats-v2-heatmap-cell.level-3 {
  background: #34d399;
}

.stats-v2-legend-swatch.level-4,
.stats-v2-heatmap-cell.level-4 {
  background: #059669;
}

.stats-v2-heatmap-scroll {
  overflow-x: auto;
}

.stats-v2-heatmap-grid {
  min-width: 760px;
  display: flex;
  gap: var(--space-2);
}

.stats-v2-heatmap-label-col {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  padding-top: 2px;
}

.stats-v2-heatmap-label-col span {
  height: 12px;
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 12px;
}

.stats-v2-heatmap-weeks {
  display: flex;
  gap: 2px;
}

.stats-v2-heatmap-week {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

.stats-v2-heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.stats-v2-heatmap-cell.is-muted {
  opacity: 0.5;
}

.stats-v2-heatmap-cell.is-out {
  background: transparent;
}

@media (min-width: 900px) {
  .stats-v2-user-summary-body {
    grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr) minmax(260px, 1.2fr);
    align-items: center;
  }

  .stats-v2-period-body {
    grid-template-columns: minmax(180px, 0.5fr) 1fr;
    align-items: center;
  }

  .stats-v2-month-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .stats-v2-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-v2-habits-controls {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (max-width: 639px) {
  .stats-v2-year-switcher {
    width: 100%;
  }

  .stats-v2-year-switcher .ks-select {
    width: 100%;
  }

  .stats-v2-filters-head {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-v2-month-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================
   STATS V2.1 PAGE REFINEMENT
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-layout {
  padding-bottom: 12px;
}

body.app-page[data-page="stats"] .stats-v2-section {
  margin-top: 36px;
}

body.app-page[data-page="stats"] .stats-v2-section:first-child {
  margin-top: 0;
}

body.app-page[data-page="stats"] .stats-v2-section-head {
  margin-bottom: 14px;
}

body.app-page[data-page="stats"] .stats-v2-section-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: 1.3;
}

body.app-page[data-page="stats"] .stats-v2-section-subtitle {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

body.app-page[data-page="stats"] .stats-v2-section .app-card-header {
  padding: 20px 22px 0;
}

body.app-page[data-page="stats"] .stats-v2-section .app-card-body {
  padding: 22px;
}

body.app-page[data-page="stats"] .stats-v2-user-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

body.app-page[data-page="stats"] .stats-v2-summary-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 20px;
  display: grid;
  gap: 14px;
}

body.app-page[data-page="stats"] .stats-v2-summary-card-main {
  gap: 18px;
}

body.app-page[data-page="stats"] .stats-v2-summary-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-summary-subtitle {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

body.app-page[data-page="stats"] .stats-v2-summary-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

body.app-page[data-page="stats"] .stats-v2-user-main-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

body.app-page[data-page="stats"] .stats-v2-summary-ring-block {
  display: grid;
  gap: 10px;
  align-items: start;
}

body.app-page[data-page="stats"] .stats-v2-inline-metric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

body.app-page[data-page="stats"] .stats-v2-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-metric-cell {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

body.app-page[data-page="stats"] .stats-v2-metric-value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-metric-label {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.35;
}

body.app-page[data-page="stats"] .stats-v2-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}

body.app-page[data-page="stats"] .stats-v2-feature-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

body.app-page[data-page="stats"] .stats-v2-feature-item.is-enabled .stats-v2-feature-dot {
  border-color: #16a34a;
  color: #16a34a;
}

body.app-page[data-page="stats"] .stats-v2-feature-item.is-disabled {
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-streak-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
}

body.app-page[data-page="stats"] .stats-v2-streak-label {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

body.app-page[data-page="stats"] .stats-v2-streak-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-streak-item {
  display: grid;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-streak-habit {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

body.app-page[data-page="stats"] .stats-v2-ring-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-ring {
  --stats-v2-ring-value: 0;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(
    var(--accent-500) calc(var(--stats-v2-ring-value) * 1%),
    var(--surface-tertiary) 0
  );
}

body.app-page[data-page="stats"] .stats-v2-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
}

body.app-page[data-page="stats"] .stats-v2-ring-value {
  position: relative;
  z-index: 1;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

body.app-page[data-page="stats"] .stats-v2-ring-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-ring-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-filters .app-card-body {
  display: grid;
  gap: 20px;
}

body.app-page[data-page="stats"] .stats-v2-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-year-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-year-switcher .ks-select {
  min-width: 116px;
}

body.app-page[data-page="stats"] .stats-v2-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-month-card {
  position: relative;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
  padding: 12px;
  min-height: 92px;
  display: grid;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

body.app-page[data-page="stats"] .stats-v2-month-card:hover {
  border-color: var(--accent-500);
  transform: translateY(-1px);
}

body.app-page[data-page="stats"] .stats-v2-month-card.is-selected {
  border-color: var(--accent-500);
  background: var(--accent-bg);
}

body.app-page[data-page="stats"] .stats-v2-month-card.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.app-page[data-page="stats"] .stats-v2-month-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-month-percent {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-month-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-tertiary);
  overflow: hidden;
}

body.app-page[data-page="stats"] .stats-v2-month-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}

body.app-page[data-page="stats"] .stats-v2-month-volume {
  font-size: 11px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-month-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-period-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

body.app-page[data-page="stats"] .stats-v2-period-content {
  display: grid;
  gap: 20px;
}

body.app-page[data-page="stats"] .stats-v2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

body.app-page[data-page="stats"] .stats-v2-kpi-card {
  min-height: 92px;
}

body.app-page[data-page="stats"] .stats-v2-comparisons-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

body.app-page[data-page="stats"] .stats-v2-comparison-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 16px;
  display: grid;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-comparison-card h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-comparison-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  font-size: 11px;
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-delta.is-up {
  color: #15803d;
  border-color: #16a34a33;
  background: #16a34a1a;
}

body.app-page[data-page="stats"] .stats-v2-delta.is-down {
  color: #b91c1c;
  border-color: #ef444433;
  background: #ef44441a;
}

body.app-page[data-page="stats"] .stats-v2-delta.is-neutral {
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

body.app-page[data-page="stats"] .stats-v2-insight-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 16px;
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-insight-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-insight-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

body.app-page[data-page="stats"] .stats-v2-category-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

body.app-page[data-page="stats"] .stats-v2-category-legend {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-category-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 16px;
  display: grid;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-category-head-trend {
  display: grid;
  justify-items: end;
  gap: 4px;
}

body.app-page[data-page="stats"] .stats-v2-category-trend-label {
  font-size: 10px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-category-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-category-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cat-color, var(--surface-tertiary)) 22%, transparent);
}

body.app-page[data-page="stats"] .stats-v2-category-name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-category-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-progress-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-tertiary);
  overflow: hidden;
}

body.app-page[data-page="stats"] .stats-v2-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}

body.app-page[data-page="stats"] .stats-v2-progress-track.is-unscheduled span {
  background: linear-gradient(90deg, #64748b, #475569);
}

body.app-page[data-page="stats"] .stats-v2-category-foot,
body.app-page[data-page="stats"] .stats-v2-category-subdelta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-category-subdelta-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.app-page[data-page="stats"] .stats-v2-category-trend-detail {
  margin: 0;
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.3;
}

body.app-page[data-page="stats"] .stats-v2-category-trend-detail--month {
  margin-top: -6px;
}

body.app-page[data-page="stats"] .stats-v2-habits-controls {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

body.app-page[data-page="stats"] .stats-v2-category-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.app-page[data-page="stats"] .stats-v2-chip {
  border: 1px solid var(--border-default);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

body.app-page[data-page="stats"] .stats-v2-chip.is-active {
  border-color: var(--accent-500);
  background: var(--accent-bg);
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-search-wrap .form-input {
  width: 100%;
  max-width: 300px;
}

body.app-page[data-page="stats"] .stats-v2-habits-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

body.app-page[data-page="stats"] .stats-v2-habit-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 16px;
  display: grid;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-habit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-habit-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.app-page[data-page="stats"] .stats-v2-habit-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--surface-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.app-page[data-page="stats"] .stats-v2-habit-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-habit-rank {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-habit-score {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-habit-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-habit-frequency {
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  padding: 3px 8px;
}

body.app-page[data-page="stats"] .stats-v2-pill {
  border-radius: var(--radius-full);
  padding: 3px 8px;
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 11px;
  font-weight: var(--font-medium);
}

body.app-page[data-page="stats"] .stats-v2-habit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-habit-deltas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.app-page[data-page="stats"] .stats-v2-weight-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

body.app-page[data-page="stats"] .stats-v2-weight-chart-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 14px;
}

body.app-page[data-page="stats"] .stats-v2-weight-chart {
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-weight-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

body.app-page[data-page="stats"] .stats-v2-weight-grid line {
  stroke: color-mix(in srgb, var(--border-default) 75%, transparent);
  stroke-width: 1;
}

body.app-page[data-page="stats"] .stats-v2-weight-line-real {
  fill: none;
  stroke: #0f766e;
  stroke-width: 2.4;
}

body.app-page[data-page="stats"] .stats-v2-weight-line-trend {
  fill: none;
  stroke: #f97316;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

body.app-page[data-page="stats"] .stats-v2-weight-points circle {
  fill: #0f766e;
  opacity: 0.9;
}

body.app-page[data-page="stats"] .stats-v2-weight-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-weight-summary {
  display: grid;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-weight-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-weight-trend,
body.app-page[data-page="stats"] .stats-v2-weight-goal {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-weight-trend strong,
body.app-page[data-page="stats"] .stats-v2-weight-goal strong {
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-actions {
  display: flex;
  align-items: center;
}

body.app-page[data-page="stats"] .stats-v2-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
}

body.app-page[data-page="stats"] .stats-v2-toggle .btn {
  border-color: transparent;
  padding-inline: 12px;
}

body.app-page[data-page="stats"] .stats-v2-toggle .btn.is-active {
  border-color: var(--accent-500);
  background: var(--accent-bg);
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

body.app-page[data-page="stats"] .stats-v2-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  background: var(--surface-secondary);
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-0,
body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-0 {
  background: var(--surface-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-1,
body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-1 {
  background: #a7f3d0;
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-2,
body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-2 {
  background: #6ee7b7;
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-3,
body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-3 {
  background: #34d399;
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-4,
body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-4 {
  background: #059669;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-scroll {
  overflow-x: auto;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-grid {
  min-width: 860px;
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 10px;
  row-gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-axis-empty {
  height: 14px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-month-row {
  display: flex;
  gap: 2px;
  align-items: center;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-month-marker {
  width: 12px;
  height: 14px;
  font-size: 9px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-month-marker.is-selected,
body.app-page[data-page="stats"] .stats-v2-heatmap-month-marker.is-current {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-label-col {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-label-col span {
  height: 12px;
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 12px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-weeks {
  display: flex;
  gap: 2px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-week {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid transparent;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-muted {
  opacity: 0.45;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-out {
  background: transparent;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-selected-month {
  border-color: color-mix(in srgb, var(--accent-600) 70%, transparent);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-current-month {
  outline: 1px solid color-mix(in srgb, var(--accent-500) 70%, transparent);
  outline-offset: 0;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-tooltip {
  position: fixed;
  z-index: 1200;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  min-width: 180px;
  display: none;
  pointer-events: none;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-tooltip.is-visible {
  display: grid;
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-tooltip-date {
  font-size: 12px;
  font-weight: var(--font-semibold);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  body.app-page[data-page="stats"] .stats-v2-comparisons-grid,
  body.app-page[data-page="stats"] .stats-v2-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  body.app-page[data-page="stats"] .stats-v2-user-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-period-layout {
    grid-template-columns: minmax(190px, 0.38fr) 1fr;
    align-items: start;
  }

  body.app-page[data-page="stats"] .stats-v2-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-habits-controls {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  body.app-page[data-page="stats"] .stats-v2-habits-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-month-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-weight-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

@media (min-width: 1280px) {
  body.app-page[data-page="stats"] .stats-v2-habits-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  body.app-page[data-page="stats"] .stats-v2-filters-head {
    flex-direction: column;
    align-items: stretch;
  }

  body.app-page[data-page="stats"] .stats-v2-year-switcher {
    width: 100%;
  }

  body.app-page[data-page="stats"] .stats-v2-year-switcher .ks-select {
    width: 100%;
  }

  body.app-page[data-page="stats"] .stats-v2-metric-grid,
  body.app-page[data-page="stats"] .stats-v2-weight-kpis {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   STATS V2.2 OVERRIDES
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-section {
  margin-top: 40px;
}

body.app-page[data-page="stats"] .stats-v2-section .app-card-header,
body.app-page[data-page="stats"] .stats-v2-section .app-card-body {
  padding: 20px;
}

body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

body.app-page[data-page="stats"] .stats-v2-summary-col {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 16px;
  display: grid;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-plus-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--font-semibold);
  letter-spacing: .02em;
  border: 1px solid transparent;
}

body.app-page[data-page="stats"] .stats-v2-plus-badge.is-plus {
  background: #f5b02722;
  border-color: #f5b02766;
  color: #9a6100;
}

body.app-page[data-page="stats"] .stats-v2-plus-badge.is-free {
  background: var(--surface-primary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-summary-lines {
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-summary-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-summary-line strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  text-align: right;
}

body.app-page[data-page="stats"] .stats-v2-summary-line-trailing {
  grid-column: 1 / -1;
  display: inline-flex;
  justify-content: flex-end;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-compact {
  width: 88px;
  height: 88px;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-compact::before {
  inset: 10px;
}

body.app-page[data-page="stats"] .stats-v2-period-context {
  margin: 6px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

body.app-page[data-page="stats"] .stats-v2-month-badge {
  min-width: 20px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  padding: 0;
  line-height: 1;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-0,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-0 {
  background: #eb6040;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-1,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-1 {
  background: #f29d38;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-2,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-2 {
  background: #66b5ff;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-3,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-3 {
  background: #43b564;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-4,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-4 {
  background: #f5b027;
}

@media (min-width: 980px) {
  body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-habits-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-missions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  body.app-page[data-page="stats"] .stats-v2-missions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================
   STATS V2.3 OVERRIDES
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
  gap: 18px;
}

body.app-page[data-page="stats"] .stats-v2-summary-col {
  padding: 14px 16px;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-summary-lines {
  gap: 7px;
}

body.app-page[data-page="stats"] .stats-v2-plus-impact {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
  display: grid;
  gap: 4px;
}

body.app-page[data-page="stats"] .stats-v2-plus-impact p {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list {
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-primary) 88%, var(--surface-secondary));
  padding: 8px;
  display: grid;
  gap: 3px;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-name {
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-streak-top-days {
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-streak-top-range {
  font-size: 11px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-streak-top-status {
  display: inline-flex;
  width: fit-content;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--font-semibold);
  border: 1px solid transparent;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-status.is-active {
  background: #16a34a1a;
  border-color: #16a34a40;
  color: #166534;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-status.is-closed {
  background: var(--surface-primary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-evolution-body {
  display: grid;
  gap: 14px;
}

body.app-page[data-page="stats"] .stats-v2-evolution-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-evolution-narrative {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch {
  background: var(--stats-v2-legend-bg, var(--surface-tertiary));
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch.is-no-data {
  --stats-v2-legend-bg: color-mix(in srgb, var(--surface-tertiary) 78%, var(--surface-primary));
}

body.app-page[data-page="stats"] .stats-v2-legend-swatch.is-future {
  --stats-v2-legend-bg: color-mix(in srgb, var(--surface-tertiary) 45%, var(--surface-primary));
  opacity: 0.45;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell {
  background: var(--stats-v2-heat, color-mix(in srgb, var(--surface-tertiary) 82%, var(--surface-primary)));
  transition: background var(--transition-fast), opacity var(--transition-fast), outline-color var(--transition-fast);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-no-data {
  --stats-v2-heat: color-mix(in srgb, var(--surface-tertiary) 78%, var(--surface-primary));
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-future {
  --stats-v2-heat: color-mix(in srgb, var(--surface-tertiary) 42%, var(--surface-primary));
  opacity: 0.25;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell:hover {
  filter: saturate(1.05) brightness(1.03);
}

[data-theme="dark"] body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-future,
body.dark-theme.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-future {
  --stats-v2-heat: rgba(255, 255, 255, 0.12);
}

@media (min-width: 980px) {
  body.app-page[data-page="stats"] .stats-v2-evolution-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================
   STATS V3.0 OVERRIDES
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-section {
  margin-top: 38px;
}

body.app-page[data-page="stats"] .stats-v2-section .app-card-header,
body.app-page[data-page="stats"] .stats-v2-section .app-card-body {
  padding: 20px;
}

body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
  gap: 16px;
}

body.app-page[data-page="stats"] .stats-v2-summary-col {
  padding: 14px;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-summary-title {
  font-size: 15px;
}

body.app-page[data-page="stats"] .stats-v2-summary-subtitle {
  margin-top: 2px;
  font-size: 11px;
}

body.app-page[data-page="stats"] .stats-v2-summary-line {
  font-size: 11px;
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-summary-line strong {
  font-size: 12px;
}

body.app-page[data-page="stats"] .stats-v2-plus-impact {
  margin-top: 6px;
  padding-top: 8px;
}

body.app-page[data-page="stats"] .stats-v2-plus-impact p {
  font-size: 10px;
  line-height: 1.35;
}

body.app-page[data-page="stats"] .stats-v2-summary-ring-block {
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-ring {
  border: 1px solid color-mix(in srgb, var(--border-default) 84%, transparent);
}

body.app-page[data-page="stats"] .stats-v2-ring.is-lifetime {
  background: conic-gradient(
    color-mix(in srgb, #f5b027 88%, #ffcc66) calc(var(--stats-v2-ring-value) * 1%),
    color-mix(in srgb, var(--surface-tertiary) 90%, var(--surface-primary)) 0
  );
  box-shadow:
    0 0 0 1px rgba(245, 176, 39, 0.2),
    0 0 20px rgba(245, 176, 39, 0.18);
}

body.app-page[data-page="stats"] .stats-v2-ring.is-lifetime::before {
  inset: 9px;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-lifetime .stats-v2-ring-value {
  font-size: 26px;
  font-weight: 700;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-compact.is-lifetime {
  width: 100px;
  height: 100px;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-period {
  background: conic-gradient(
    color-mix(in srgb, var(--accent-500) 88%, var(--accent-400)) calc(var(--stats-v2-ring-value) * 1%),
    color-mix(in srgb, var(--surface-tertiary) 94%, var(--surface-primary)) 0
  );
  box-shadow: none;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-period::before {
  inset: 14px;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-period .stats-v2-ring-value {
  font-size: 22px;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface-primary);
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-filters .app-card-body {
  gap: 14px;
}

body.app-page[data-page="stats"] .stats-v2-filters-head {
  justify-content: flex-start;
  gap: 10px;
}

body.app-page[data-page="stats"] #stats-v2-year-view.is-active {
  border-color: var(--accent-500);
  background: var(--accent-bg);
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-month-grid {
  gap: 12px;
  grid-auto-rows: 1fr;
}

body.app-page[data-page="stats"] .stats-v2-month-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.app-page[data-page="stats"] .stats-v2-month-card {
  height: 118px;
  min-height: 118px;
  padding: 10px 11px;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  align-content: start;
  gap: 5px;
}

body.app-page[data-page="stats"] .stats-v2-month-percent {
  font-size: 14px;
  font-weight: 700;
}

[data-theme="dark"] body.app-page[data-page="stats"] .stats-v2-month-percent,
body.dark-theme.app-page[data-page="stats"] .stats-v2-month-percent {
  color: #e7edf7;
}

body.app-page[data-page="stats"] .stats-v2-month-card.is-selected {
  border-color: color-mix(in srgb, var(--accent-500) 78%, #ffffff);
}

body.app-page[data-page="stats"] .stats-v2-month-volume {
  font-size: 10px;
}

body.app-page[data-page="stats"] .stats-v2-month-change-indicator {
  width: 100%;
  max-width: 100%;
  min-height: 32px;
  margin-top: 7px;
  display: flex;
  align-items: flex-start;
}

body.app-page[data-page="stats"] .stats-v2-month-change-title {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 78%, var(--surface-primary));
  padding: 4px 8px;
  margin: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

body.app-page[data-page="stats"] .stats-v2-month-change-icon {
  font-size: 11px;
  line-height: 1.1;
  margin-top: 1px;
}

body.app-page[data-page="stats"] .stats-v2-month-change-text {
  display: block;
  min-width: 0;
  line-height: 1.12;
}

body.app-page[data-page="stats"] .stats-v2-month-change-text .line1,
body.app-page[data-page="stats"] .stats-v2-month-change-text .line2 {
  display: block;
}

body.app-page[data-page="stats"] .stats-v2-month-change-empty {
  display: block;
  width: 100%;
  min-height: 32px;
}

body.app-page[data-page="stats"] .stats-v2-month-change-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 78%, #ffffff);
  outline-offset: 2px;
}

body.app-page[data-page="stats"] .stats-v2-month-change-popover {
  width: min(360px, calc(100vw - 16px));
  max-height: min(360px, calc(100vh - 16px));
}

body.app-page[data-page="stats"] .stats-v2-month-change-popover .habit-history-preview-popover__content {
  max-height: min(280px, calc(100vh - 96px));
}

body.app-page[data-page="stats"] .stats-v2-month-change-popover-item {
  display: grid;
  gap: 3px;
}

body.app-page[data-page="stats"] .stats-v2-month-change-popover-item .habit-history-preview-item__period {
  font-size: 12px;
}

body.app-page[data-page="stats"] .stats-v2-month-change-popover-item .habit-history-preview-item__desc {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 0;
  line-height: 1.3;
}

body.app-page[data-page="stats"] .stats-v2-kpi-grid {
  gap: 14px;
}

body.app-page[data-page="stats"] .stats-v2-period-micro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-chip-icon {
  font-size: 12px;
  line-height: 1;
}

body.app-page[data-page="stats"] .stats-v2-habit-deltas {
  display: grid;
  gap: 4px;
  justify-items: end;
}

body.app-page[data-page="stats"] .stats-v2-trend-text {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

body.app-page[data-page="stats"] .stats-v2-trend-text.is-up {
  color: #15803d;
}

body.app-page[data-page="stats"] .stats-v2-trend-text.is-down {
  color: #b91c1c;
}

body.app-page[data-page="stats"] .stats-v2-trend-text.is-neutral {
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-tooltip-row {
  font-size: 10px;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-future {
  opacity: 0.26;
}

[data-theme="dark"] body.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-future,
body.dark-theme.app-page[data-page="stats"] .stats-v2-heatmap-cell.is-future {
  --stats-v2-heat: rgba(199, 206, 218, 0.22);
}

@media (min-width: 980px) {
  body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.app-page[data-page="stats"] .stats-v2-period-micro-grid {
    grid-template-columns: 1fr;
  }

  body.app-page[data-page="stats"] .stats-v2-habit-deltas {
    justify-items: start;
  }
}

/* ============================================
   STATS V4.1 STRUCTURE + PERIOD CLARITY
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-layout {
  display: grid;
  gap: 30px;
}

body.app-page[data-page="stats"] .stats-v2-section {
  margin-top: 0;
}

body.app-page[data-page="stats"] .stats-v2-section .app-card-header,
body.app-page[data-page="stats"] .stats-v2-section .app-card-body {
  padding: 18px;
}

body.app-page[data-page="stats"] .stats-v4-period-wrapper {
  display: grid;
  gap: 18px;
}

body.app-page[data-page="stats"] .stats-v4-period-wrapper-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v4-period-active-label {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 6px 10px;
  white-space: nowrap;
}

body.app-page[data-page="stats"] .stats-v4-period-wrapper.is-refreshing .app-card {
  animation: stats-v4-fade-refresh 240ms ease;
}

@keyframes stats-v4-fade-refresh {
  from {
    opacity: 0.7;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.app-page[data-page="stats"] .stats-v4-period-analysis .app-card-body {
  display: grid;
  gap: 14px;
}

body.app-page[data-page="stats"] .stats-v4-period-analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v4-period-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

body.app-page[data-page="stats"] .stats-v4-period-eyebrow {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v4-period-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v4-period-filter-badge {
  border: 1px solid color-mix(in srgb, var(--accent-500) 32%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 70%, var(--surface-primary));
  color: var(--text-primary);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 10px;
}

body.app-page[data-page="stats"] .stats-v4-period-main {
  display: grid;
  grid-template-columns: minmax(120px, 150px) 1fr;
  gap: 14px;
  align-items: center;
}

body.app-page[data-page="stats"] .stats-v4-period-top {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  gap: 18px;
  align-items: start;
}

body.app-page[data-page="stats"] .stats-v4-period-left {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.app-page[data-page="stats"] .stats-v4-period-right {
  min-width: 0;
  align-self: start;
  max-height: var(--stats-v4-period-top-height, 248px);
}

body.app-page[data-page="stats"] .stats-v4-period-insights-subcard {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  padding: 12px;
  display: grid;
  gap: 8px;
  max-height: inherit;
  overflow: hidden;
}

body.app-page[data-page="stats"] .stats-v4-period-insights-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

body.app-page[data-page="stats"] .stats-v4-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  grid-auto-rows: minmax(0, 1fr);
}

body.app-page[data-page="stats"] .stats-v4-insights-grid.is-one {
  grid-template-columns: 1fr;
}

body.app-page[data-page="stats"] .stats-v4-insights-grid.is-three .stats-v2-insight-card:last-child {
  grid-column: 1 / span 2;
}

body.app-page[data-page="stats"] .stats-v4-period-ring-top {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v4-period-main .stats-v2-ring-wrap {
  align-items: flex-start;
}

body.app-page[data-page="stats"] .stats-v4-period-main .stats-v2-ring-label,
body.app-page[data-page="stats"] .stats-v4-period-main .stats-v2-ring-detail {
  display: none;
}

body.app-page[data-page="stats"] .stats-v4-period-main-stats {
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v4-period-main-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.app-page[data-page="stats"] .stats-v4-period-main-stat span {
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v4-period-main-stat strong {
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v4-period-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v4-period-grid {
  display: grid;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v4-period-grid-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.app-page[data-page="stats"] .stats-v4-period-grid-analysis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.app-page[data-page="stats"] .stats-v4-period-grid-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.app-page[data-page="stats"] .stats-v4-period-tile {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  padding: 10px 11px;
  display: grid;
  gap: 3px;
}

body.app-page[data-page="stats"] .stats-v4-period-tile strong {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.2;
}

body.app-page[data-page="stats"] .stats-v4-period-tile span {
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v4-period-streak-tile strong {
  font-size: 12px;
  line-height: 1.3;
}

body.app-page[data-page="stats"] .stats-v4-period-streak-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

body.app-page[data-page="stats"] .stats-v4-period-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-tertiary) 86%, var(--surface-secondary));
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.2;
  padding: 2px 7px;
}

body.app-page[data-page="stats"] .stats-v4-compare-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  padding: 10px 11px;
}

body.app-page[data-page="stats"] .stats-v4-compare-card h4 {
  margin: 0 0 7px;
  font-size: 12px;
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v4-compare-card .stats-v2-comparison-row {
  font-size: 11px;
  margin-top: 4px;
}

body.app-page[data-page="stats"] .stats-v4-deep-dive {
  display: grid;
  gap: 18px;
}

body.app-page[data-page="stats"] .stats-v4-subsection {
  display: grid;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v4-subsection-head {
  display: grid;
  gap: 3px;
}

body.app-page[data-page="stats"] .stats-v4-subsection-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

body.app-page[data-page="stats"] .stats-v4-subsection-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

body.app-page[data-page="stats"] .stats-v2-insight-card {
  border: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent);
  border-radius: var(--radius-md);
  padding: 10px 11px;
  gap: 4px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.app-page[data-page="stats"] .stats-v2-insight-card:hover {
  border-color: color-mix(in srgb, var(--border-default) 88%, var(--accent-500));
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

body.app-page[data-page="stats"] .stats-v2-insight-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 70%, #ffffff);
  outline-offset: 2px;
}

body.app-page[data-page="stats"] .stats-v4-insights-grid .stats-v2-insight-title {
  font-size: 12px;
  line-height: 1.25;
}

body.app-page[data-page="stats"] .stats-v4-insights-grid .stats-v2-insight-description {
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-theme="dark"] body.app-page[data-page="stats"] .stats-v2-insight-card,
body.dark-theme.app-page[data-page="stats"] .stats-v2-insight-card {
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] body.app-page[data-page="stats"] .stats-v2-insight-card:hover,
body.dark-theme.app-page[data-page="stats"] .stats-v2-insight-card:hover {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

body.app-page[data-page="stats"] .stats-v4-evolution-inline {
  border-top: 1px solid var(--border-subtle);
  margin-top: 6px;
  padding-top: 9px;
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v4-evolution-inline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v4-evolution-inline-head h4 {
  margin: 0;
  font-size: 12px;
}

body.app-page[data-page="stats"] .stats-v4-evolution-inline-head span {
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v4-evolution-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v4-evolution-inline-grid .stats-v2-metric-cell {
  padding: 8px;
}

body.app-page[data-page="stats"] .stats-v4-evolution-inline-text {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}

body.app-page[data-page="stats"] .stats-v2-month-percent {
  font-weight: 800;
}

[data-theme="dark"] body.app-page[data-page="stats"] .stats-v2-month-percent,
body.dark-theme.app-page[data-page="stats"] .stats-v2-month-percent {
  color: #f2f6ff;
  text-shadow: 0 0 8px rgba(162, 196, 255, 0.3);
}

body.app-page[data-page="stats"] .stats-v2-ring.is-lifetime {
  box-shadow:
    0 0 0 1px rgba(245, 176, 39, 0.24),
    0 0 26px rgba(245, 176, 39, 0.22);
}

body.app-page[data-page="stats"] .stats-v2-ring.is-period {
  width: 88px;
  height: 88px;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-period::before {
  inset: 15px;
}

body.app-page[data-page="stats"] .stats-v2-ring.is-period .stats-v2-ring-value {
  font-size: 24px;
}

@media (max-width: 980px) {
  body.app-page[data-page="stats"] .stats-v4-period-wrapper-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  body.app-page[data-page="stats"] .stats-v4-period-active-label {
    justify-self: start;
  }

  body.app-page[data-page="stats"] .stats-v4-period-main {
    grid-template-columns: 1fr;
  }

  body.app-page[data-page="stats"] .stats-v4-period-top {
    grid-template-columns: 1fr;
  }

  body.app-page[data-page="stats"] .stats-v4-period-right {
    max-height: none;
  }

  body.app-page[data-page="stats"] .stats-v4-period-insights-subcard {
    max-height: none;
    overflow: hidden;
  }

  body.app-page[data-page="stats"] .stats-v4-period-grid-summary,
  body.app-page[data-page="stats"] .stats-v4-period-grid-analysis,
  body.app-page[data-page="stats"] .stats-v4-period-grid-compare {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  body.app-page[data-page="stats"] .stats-v4-period-grid-summary,
  body.app-page[data-page="stats"] .stats-v4-period-grid-analysis,
  body.app-page[data-page="stats"] .stats-v4-period-grid-compare,
  body.app-page[data-page="stats"] .stats-v4-evolution-inline-grid,
  body.app-page[data-page="stats"] .stats-v4-insights-grid {
    grid-template-columns: 1fr;
  }

  body.app-page[data-page="stats"] .stats-v4-insights-grid .stats-v2-insight-description {
    -webkit-line-clamp: 3;
  }
}

/* ============================================
   STATS V4.2 TARGETED FIXES (CHIPS + TRENDS + WEIGHT)
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-category-pill {
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--stats-v2-category-pill-color, var(--border-default)) 40%, var(--border-default));
  background: color-mix(in srgb, var(--stats-v2-category-pill-color, var(--surface-secondary)) 15%, var(--surface-primary));
  color: var(--text-secondary);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

body.app-page[data-page="stats"] .stats-v2-trend-text--no-data {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.35;
  white-space: normal;
}

body.app-page[data-page="stats"] .stats-v2-weight-chart {
  position: relative;
}

body.app-page[data-page="stats"] .stats-v2-weight-y-labels text {
  font-size: 10px;
  fill: var(--text-tertiary);
}

body.app-page[data-page="stats"] .stats-v2-weight-points .stats-v2-weight-point {
  fill: #0f766e;
  opacity: 0.9;
  cursor: pointer;
}

body.app-page[data-page="stats"] .stats-v2-weight-point-label {
  font-size: 9px;
  fill: color-mix(in srgb, #0f766e 84%, #ffffff);
  opacity: 0.95;
}

body.app-page[data-page="stats"] .stats-v2-weight-tooltip {
  position: fixed;
  z-index: 1500;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

body.app-page[data-page="stats"] .stats-v2-weight-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================================
   STATS USER SUMMARY: HALL OF FAME LIFETIME
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
  align-items: stretch;
}

body.app-page[data-page="stats"] .stats-v2-summary-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: visible;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-summary-lines {
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-summary-lines-streak {
  --stats-v2-value-col-w: clamp(220px, 28%, 320px);
  display: grid;
  grid-template-columns: 1fr var(--stats-v2-value-col-w);
  column-gap: 14px;
  row-gap: 12px;
  align-items: start;
}

body.app-page[data-page="stats"] .stats-v2-streak-label {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  grid-column: 1;
}

body.app-page[data-page="stats"] .stats-v2-streak-value {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: var(--font-semibold);
  line-height: 1.3;
  text-align: right;
}

body.app-page[data-page="stats"] .stats-v2-streak-block,
body.app-page[data-page="stats"] .stats-v2-streak-header,
body.app-page[data-page="stats"] .stats-v2-summary-lines-streak .stats-v2-summary-line {
  display: contents;
}

body.app-page[data-page="stats"] .stats-v2-summary-lines-streak .stats-v2-summary-line > span {
  grid-column: 1;
}

body.app-page[data-page="stats"] .stats-v2-summary-lines-streak .stats-v2-summary-line > strong,
body.app-page[data-page="stats"] .stats-v2-summary-lines-streak .stats-v2-summary-line > .stats-v2-summary-value {
  grid-column: 2;
  text-align: right;
}

body.app-page[data-page="stats"] .stats-v2-streak-right {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 6px;
  width: 100%;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list .text-muted {
  margin: 0;
  text-align: right;
}

body.app-page[data-page="stats"] .stats-v2-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 768px) {
  body.app-page[data-page="stats"] .stats-v2-streak-top-list {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow: visible !important;
    max-width: 100%;
    padding-left: 2px;
  }

  body.app-page[data-page="stats"] .stats-v2-streak-top-list .stats-v2-streak-pill {
    flex: 0 0 auto;
  }

  body.app-page[data-page="stats"] .stats-v2-streak-right,
  body.app-page[data-page="stats"] .stats-v2-streak-header,
  body.app-page[data-page="stats"] .stats-v2-summary-lines-streak {
    overflow: visible !important;
  }
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list.is-compact .stats-v2-streak-pill {
  padding: 6px 7px;
}

@media (min-width: 768px) {
  body.app-page[data-page="stats"] .stats-v2-streak-top-list.is-compact {
    gap: 6px;
  }
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list.is-compact .stats-v2-streak-pill .pill-text {
  display: none;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list.is-compact-tight {
  gap: 4px !important;
}

body.app-page[data-page="stats"] .stats-v2-streak-top-list.is-compact-tight .stats-v2-streak-pill {
  padding: 5px 6px;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-evolution {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-lifetime-header strong {
  font-weight: 600;
  color: var(--text-primary);
}

body.app-page[data-page="stats"] #statsV2LifetimeChart {
  width: 100%;
  height: 70px !important;
  max-height: 70px;
  display: block;
}

@media (min-width: 980px) {
  body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
    align-items: stretch;
  }

  body.app-page[data-page="stats"] .stats-v2-summary-col--identity .stats-v2-plus-card {
    margin-top: auto;
  }
}

@media (max-width: 767px) {
  body.app-page[data-page="stats"] .stats-v2-summary-lines-streak {
    --stats-v2-value-col-w: clamp(160px, 40%, 220px);
  }

  body.app-page[data-page="stats"] .stats-v2-streak-right {
    align-items: flex-start;
  }

  body.app-page[data-page="stats"] .stats-v2-streak-value {
    text-align: left;
  }

  body.app-page[data-page="stats"] .stats-v2-streak-top-list {
    justify-content: flex-start;
  }

  body.app-page[data-page="stats"] .stats-v2-lifetime-evolution {
    margin-top: 14px;
    padding-top: 10px;
  }

  body.app-page[data-page="stats"] #statsV2LifetimeChart {
    height: 64px !important;
    max-height: 64px;
  }
}

/* ============================================
   STATS V4 SCORE HERO + LIFETIME WIDGET (CARD 2)
   ============================================ */
body.app-page[data-page="stats"] .stats-v2-score-hero {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body.app-page[data-page="stats"] .stats-v2-score-hero-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

body.app-page[data-page="stats"] .stats-v2-score-hero-right {
  display: grid;
  gap: 8px;
  align-content: start;
}

body.app-page[data-page="stats"] .stats-v2-summary-col-head {
  display: flex;
  justify-content: flex-start;
}

body.app-page[data-page="stats"] .stats-v2-summary-col-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

body.app-page[data-page="stats"] .stats-v2-inline-metric--card-head {
  border: 1px dashed color-mix(in srgb, var(--border-default) 76%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 84%, var(--surface-primary));
  padding: 6px 8px;
  justify-content: flex-start;
}

body.app-page[data-page="stats"] .stats-v2-inline-metric--month-score {
  border: 1px dashed color-mix(in srgb, var(--border-default) 72%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-secondary) 78%, var(--surface-primary));
  padding: 6px 8px;
  justify-content: flex-start;
}

body.app-page[data-page="stats"] .stats-v2-inline-metric-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-score-hero-right .stats-v2-inline-metric {
  justify-content: flex-end;
}

/* ============================================
   MONTH-TO-DATE COMPARISON SECTION
   ============================================ */
body.app-page[data-page="stats"] .stats-v4-month-compare {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  box-shadow: var(--shadow-sm);
}

body.app-page[data-page="stats"] .stats-v4-mtd-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body.app-page[data-page="stats"] .stats-v4-mtd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

body.app-page[data-page="stats"] .stats-v4-mtd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

body.app-page[data-page="stats"] .stats-v4-mtd-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body.app-page[data-page="stats"] .stats-v4-mtd-col-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin: 0;
}

body.app-page[data-page="stats"] .stats-v4-mtd-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--accent-100);
  color: var(--accent-700);
}

body.app-page[data-page="stats"] .stats-v4-mtd-badge--prev {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v4-mtd-col--delta {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-4);
}

body.app-page[data-page="stats"] .stats-v4-mtd-insights {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

body.app-page[data-page="stats"] .stats-v4-mtd-insight {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

body.app-page[data-page="stats"] .stats-v4-mtd-insight--positive {
  border-left: 3px solid var(--success-500, #22c55e);
}

body.app-page[data-page="stats"] .stats-v4-mtd-insight--negative {
  border-left: 3px solid var(--warning-500, #f97316);
}

body.app-page[data-page="stats"] .stats-v4-mtd-insight-icon {
  flex-shrink: 0;
}

/* Records card title */
body.app-page[data-page="stats"] .stats-v2-records-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  body.app-page[data-page="stats"] .stats-v4-mtd-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  body.app-page[data-page="stats"] .stats-v4-mtd-col--delta {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-3);
  }
  body.app-page[data-page="stats"] .stats-v4-mtd-pills {
    flex-direction: column;
  }
}

body.app-page[data-page="stats"] .stats-v2-score-hero-right .stats-v2-summary-line {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.app-page[data-page="stats"] .stats-v2-summary-subtitle {
  line-height: 1.35;
}

body.app-page[data-page="stats"] .stats-v2-summary-subtitle-segment {
  display: inline-block;
  white-space: nowrap;
}

body.app-page[data-page="stats"] .stats-v2-plus-card {
  margin-top: 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 86%, #08111f);
  padding: 12px;
  display: grid;
  gap: 10px;
}

body.app-page[data-page="stats"] .stats-v2-summary-col--identity .stats-v2-user-main-head {
  margin-bottom: 6px;
}

body.app-page[data-page="stats"] .stats-v2-plus-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.app-page[data-page="stats"] .stats-v2-plus-card-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-secondary) 90%, #f3c77a);
}

body.app-page[data-page="stats"] .stats-v2-plus-lines {
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-plus-impact {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--border-default) 72%, transparent);
}

body.app-page[data-page="stats"] .stats-v2-plus-benefit-number {
  color: var(--success);
  font-weight: 700;
}

body.app-page[data-page="stats"] {
  --stats-v2-lifetime-card-bg: color-mix(in srgb, var(--surface-secondary) 94%, #ffffff);
  --stats-v2-lifetime-card-border: color-mix(in srgb, var(--border-default) 78%, transparent);
  --stats-v2-lifetime-header-text: color-mix(in srgb, var(--text-secondary) 92%, #445877);
  --stats-v2-lifetime-header-strong: color-mix(in srgb, var(--text-primary) 94%, #1c2a3d);
  --stats-v2-lifetime-sub-text: color-mix(in srgb, var(--text-tertiary) 90%, #65748b);
  --stats-v2-lifetime-grid: color-mix(in srgb, var(--border-default) 56%, transparent);
  --stats-v2-lifetime-axis: color-mix(in srgb, var(--text-secondary) 90%, #435a79);
  --stats-v2-lifetime-line: color-mix(in srgb, var(--color-accent, var(--accent-500)) 90%, #f5b027);
  --stats-v2-lifetime-line-shadow: rgba(245, 176, 39, 0.16);
  --stats-v2-lifetime-point-stroke: color-mix(in srgb, #ffffff 90%, var(--surface-primary));
  --stats-v2-lifetime-value-text: color-mix(in srgb, var(--text-primary) 92%, #152235);
}

[data-theme="dark"] body.app-page[data-page="stats"],
body.dark-theme.app-page[data-page="stats"] {
  --stats-v2-lifetime-card-bg: color-mix(in srgb, #060a12 76%, var(--surface-primary));
  --stats-v2-lifetime-card-border: color-mix(in srgb, var(--border-default) 78%, transparent);
  --stats-v2-lifetime-header-text: color-mix(in srgb, var(--text-secondary) 92%, #c4ccd7);
  --stats-v2-lifetime-header-strong: color-mix(in srgb, var(--text-primary) 92%, #f7c56a);
  --stats-v2-lifetime-sub-text: color-mix(in srgb, var(--text-tertiary) 88%, #9ba7ba);
  --stats-v2-lifetime-grid: color-mix(in srgb, #f6f8fb 14%, transparent);
  --stats-v2-lifetime-axis: color-mix(in srgb, var(--text-tertiary) 90%, #9aa8c0);
  --stats-v2-lifetime-line: color-mix(in srgb, var(--color-accent, var(--accent-500)) 90%, #f5b027);
  --stats-v2-lifetime-line-shadow: rgba(245, 176, 39, 0.28);
  --stats-v2-lifetime-point-stroke: color-mix(in srgb, #090d15 76%, transparent);
  --stats-v2-lifetime-value-text: color-mix(in srgb, #f4f7ff 92%, var(--text-primary));
}

body.app-page[data-page="stats"] .stats-v2-lifetime-card {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stats-v2-lifetime-card-border);
  background: var(--stats-v2-lifetime-card-bg);
}

body.app-page[data-page="stats"] .stats-v2-lifetime-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--stats-v2-lifetime-header-text);
}

body.app-page[data-page="stats"] .stats-v2-lifetime-header strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--stats-v2-lifetime-header-strong);
}

body.app-page[data-page="stats"] .stats-v2-lifetime-sub {
  margin: 0 0 8px;
  font-size: 10px;
  color: var(--stats-v2-lifetime-sub-text);
}

body.app-page[data-page="stats"] .stats-v2-lifetime-svg-wrap {
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: stretch;
  overflow: visible;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-svg-wrap.is-layout-pending {
  min-height: 120px;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-svg {
  display: block;
  width: 100%;
  height: 120px;
  min-height: 120px;
  max-height: 136px;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-grid-line {
  stroke: var(--stats-v2-lifetime-grid);
  stroke-width: 1;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-axis-text {
  fill: var(--stats-v2-lifetime-axis);
  font-size: 11px;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-axis-text--x {
  font-size: 10px;
  font-weight: 550;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-line {
  fill: none;
  stroke: var(--stats-v2-lifetime-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--stats-v2-lifetime-line-shadow));
}

body.app-page[data-page="stats"] .stats-v2-lifetime-point {
  fill: var(--stats-v2-lifetime-line);
  stroke: var(--stats-v2-lifetime-point-stroke);
  stroke-width: 1.2;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-value-text {
  fill: var(--stats-v2-lifetime-value-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  paint-order: stroke fill;
  stroke: var(--stats-v2-lifetime-card-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-fallback {
  display: grid;
  gap: 8px;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-fallback-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

body.app-page[data-page="stats"] .stats-v2-lifetime-fallback-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text-tertiary) 90%, #9aa8c0);
}

body.app-page[data-page="stats"] .stats-v2-lifetime-fallback-dots {
  display: inline-flex;
  gap: 6px;
}

body.app-page[data-page="stats"] .stats-v2-lifetime-fallback-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-tertiary) 90%, var(--surface-primary));
}

body.app-page[data-page="stats"] .stats-v2-lifetime-fallback-dot.is-filled {
  background: color-mix(in srgb, var(--color-accent, var(--accent-500)) 86%, #f5b027);
}

@media (max-width: 767px) {
  body.app-page[data-page="stats"] .stats-v2-score-hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.app-page[data-page="stats"] .stats-v2-score-hero-left {
    justify-content: center;
  }

  body.app-page[data-page="stats"] .stats-v2-score-hero-right .stats-v2-inline-metric {
    justify-content: flex-start;
  }

  body.app-page[data-page="stats"] .stats-v2-summary-col--highlights .stats-v2-summary-col-foot {
    align-items: stretch;
  }

  body.app-page[data-page="stats"] .stats-v2-inline-metric--card-head,
  body.app-page[data-page="stats"] .stats-v2-inline-metric--month-score {
    width: 100%;
    justify-content: space-between;
  }

  body.app-page[data-page="stats"] .stats-v2-summary-subtitle-segment {
    white-space: normal;
  }

  body.app-page[data-page="stats"] .stats-v2-lifetime-svg {
    height: 108px;
    min-height: 108px;
  }
}
/* Settings page */
body.app-page[data-page="settings"] .app-content {
  max-width: 1220px;
}

body.app-page[data-page="settings"] .ks-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.92fr);
  gap: 20px;
  align-items: start;
}

body.app-page[data-page="settings"] .ks-settings-section {
  display: contents;
}

body.app-page[data-page="settings"] .ks-settings-card {
  min-width: 0;
}

body.app-page[data-page="settings"] .ks-settings-card.profile-card,
body.app-page[data-page="settings"] .ks-settings-card.settings-danger-toggle-section {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--border-default) 80%, transparent);
  box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.26);
}

body.app-page[data-page="settings"] .ks-settings-card.profile-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 92%, white 8%), color-mix(in srgb, var(--accent) 38%, transparent));
  opacity: 0.85;
}

body.app-page[data-page="settings"] .ks-settings-card .app-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.app-page[data-page="settings"] .ks-settings-card--account {
  grid-column: 1 / -1;
}

body.app-page[data-page="settings"] .ks-settings-card--linked {
  grid-column: 1;
}

body.app-page[data-page="settings"] .ks-settings-card--tutorial {
  grid-column: 1 / -1;
}

body.app-page[data-page="settings"] .ks-settings-card--notifications {
  grid-column: 2;
}

body.app-page[data-page="settings"] .ks-settings-card--danger {
  grid-column: 1 / -1;
}

body.app-page[data-page="settings"] .ks-settings-tutorial-card::before {
  background: linear-gradient(90deg, #6366f1, rgba(99, 102, 241, 0.12));
}

body.app-page[data-page="settings"] .ks-settings-notifications-card::before {
  background: linear-gradient(90deg, #0ea5e9, rgba(14, 165, 233, 0.12));
}

body.app-page[data-page="settings"] .ks-linked-access-card::before {
  background: linear-gradient(90deg, #10b981, rgba(16, 185, 129, 0.12));
}

body.app-page[data-page="settings"] .ks-settings-card--account .app-card-header,
body.app-page[data-page="settings"] .ks-settings-card--linked .app-card-header,
body.app-page[data-page="settings"] .ks-settings-card--tutorial .app-card-header,
body.app-page[data-page="settings"] .ks-settings-card--notifications .app-card-header {
  padding-bottom: var(--space-3);
}

body.app-page[data-page="settings"] .ks-settings-card--tutorial .app-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

body.app-page[data-page="settings"] .ks-settings-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary));
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

body.app-page[data-page="settings"] .ks-settings-card__toggle:hover,
body.app-page[data-page="settings"] .ks-settings-card__toggle:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-default));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-primary));
}

body.app-page[data-page="settings"] .ks-settings-card__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

body.app-page[data-page="settings"] .ks-settings-card--tutorial.is-open .ks-settings-card__toggle svg {
  transform: rotate(180deg);
}

body.app-page[data-page="settings"] .ks-settings-card__collapsible {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: max-height 240ms ease, opacity 180ms ease, transform 180ms ease, padding 180ms ease;
}

body.app-page[data-page="settings"] .ks-settings-card--tutorial.is-open .ks-settings-card__collapsible {
  max-height: 560px;
  padding-top: 0;
  padding-bottom: var(--space-1);
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: translateY(0);
}

body.app-page[data-page="settings"] .ks-settings-card--tutorial:not(.is-open) .form-feedback {
  min-height: 0;
}

body.app-page[data-page="settings"] .ks-settings-account-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: end;
  max-width: 980px;
}

body.app-page[data-page="settings"] .ks-account-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.app-page[data-page="settings"] .ks-settings-card--account .app-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body.app-page[data-page="settings"] .ks-account-header-copy {
  min-width: 0;
}

body.app-page[data-page="settings"] .ks-account-email-card {
  min-width: min(100%, 280px);
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.app-page[data-page="settings"] .ks-account-email-card .profile-label {
  margin-bottom: 6px;
}

body.app-page[data-page="settings"] .ks-account-block {
  position: relative;
  min-width: 0;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 94%, rgba(255, 255, 255, 0.32)) 0%, color-mix(in srgb, var(--surface-secondary) 92%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 24px 42px -36px rgba(15, 23, 42, 0.34);
  padding: 20px 22px;
}

body.app-page[data-page="settings"] .ks-account-block::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.28) 72%, transparent);
  opacity: 0.72;
}

body.app-page[data-page="settings"] .ks-account-block .profile-label {
  margin-bottom: 8px;
}

body.app-page[data-page="settings"] .ks-account-block--password {
  width: 100%;
}

body.app-page[data-page="settings"] .ks-password-inline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

body.app-page[data-page="settings"] .ks-password-inline-note {
  margin: 6px 0 0;
  max-width: 44ch;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

body.app-page[data-page="settings"] .ks-password-inline-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

body.app-page[data-page="settings"] .ks-password-inline-feedback {
  min-height: 18px;
  max-width: 260px;
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: right;
  color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
}

body.app-page[data-page="settings"] .ks-password-inline-wrap {
  width: min(100%, 560px);
  max-width: 100%;
}

body.app-page[data-page="settings"] .ks-password-provider-notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 38%, var(--border-default));
  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

body.app-page[data-page="settings"] .ks-field-email,
body.app-page[data-page="settings"] .ks-field-password {
  min-width: 0;
}

body.app-page[data-page="settings"] .ks-field-value {
  font-size: calc(var(--text-base) * 1.05);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

body.app-page[data-page="settings"] .ks-readonly-password {
  width: 100%;
  max-width: none;
  letter-spacing: 0.08em;
  cursor: text;
}

body.app-page[data-page="settings"] .ks-readonly-password.is-masked {
  font-weight: var(--font-semibold);
  color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary));
}

body.app-page[data-page="settings"] .ks-password-toggle {
  display: flex;
  align-items: flex-end;
}

body.app-page[data-page="settings"] .ks-password-toggle .btn {
  white-space: nowrap;
}

body.app-page[data-page="settings"] .ks-password-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: max-height 220ms ease, opacity 170ms ease, transform 170ms ease;
}

body.app-page[data-page="settings"] .ks-password-panel.is-open {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.app-page[data-page="settings"] .ks-password-panel-inner {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
}

body.app-page[data-page="settings"] .ks-password-form {
  max-width: 980px;
}

body.app-page[data-page="settings"] .ks-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: start;
}

body.app-page[data-page="settings"] .ks-password-new {
  margin-bottom: 0;
}

body.app-page[data-page="settings"] .ks-password-confirm {
  margin-bottom: 0;
}

body.app-page[data-page="settings"] .ks-password-actions-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}

body.app-page[data-page="settings"] .ks-password-actions-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.app-page[data-page="settings"] .ks-password-save-hint {
  min-height: 18px;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

body.app-page[data-page="settings"] .ks-password-submit-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

body.app-page[data-page="settings"] .ks-password-submit {
  min-width: 220px;
  min-height: 42px;
}

body.app-page[data-page="settings"] .ks-password-submit.is-loading {
  position: relative;
  color: transparent;
}

body.app-page[data-page="settings"] .ks-password-submit.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--button-primary-text, var(--text-inverse));
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

body.app-page[data-page="settings"] .password-wrapper {
  position: relative;
}

body.app-page[data-page="settings"] .password-wrapper .form-input {
  padding-right: var(--space-10);
}

body.app-page[data-page="settings"] .password-toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

body.app-page[data-page="settings"] .password-toggle:hover {
  background: var(--interactive-hover);
  color: var(--text-secondary);
}

body.app-page[data-page="settings"] .ks-password-strength {
  margin-top: var(--space-2);
}

body.app-page[data-page="settings"] .password-strength-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--surface-tertiary);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

body.app-page[data-page="settings"] .password-strength-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--danger);
  transition: width 180ms ease, background-color 180ms ease;
}

body.app-page[data-page="settings"] .password-strength-bar[data-level="medium"] .password-strength-fill {
  background: #f59e0b;
}

body.app-page[data-page="settings"] .password-strength-bar[data-level="strong"] .password-strength-fill {
  background: var(--success);
}

body.app-page[data-page="settings"] .password-strength-label {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

body.app-page[data-page="settings"] .password-strength-label[data-level="weak"] {
  color: var(--danger);
}

body.app-page[data-page="settings"] .password-strength-label[data-level="medium"] {
  color: #d97706;
}

body.app-page[data-page="settings"] .password-strength-label[data-level="strong"] {
  color: var(--success);
}

body.app-page[data-page="settings"] .password-checklist {
  margin: var(--space-2) 0 0;
  padding-left: 18px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: grid;
  gap: 4px;
}

body.app-page[data-page="settings"] .password-checklist li.is-passed {
  color: var(--success-dark);
}

body.app-page[data-page="settings"] .form-feedback {
  min-height: 20px;
  margin-top: 0;
  font-size: var(--text-sm);
}

@media (max-width: 1023px) {
  body.app-page[data-page="settings"] .ks-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-page[data-page="settings"] .ks-settings-card--linked,
  body.app-page[data-page="settings"] .ks-settings-card--tutorial,
  body.app-page[data-page="settings"] .ks-settings-card--notifications {
    grid-column: 1 / -1;
  }

  body.app-page[data-page="settings"] .ks-settings-card--account .app-card-header,
  body.app-page[data-page="settings"] .ks-password-grid,
  body.app-page[data-page="settings"] .ks-password-actions-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-page[data-page="settings"] .ks-password-inline-head {
    flex-direction: column;
  }

  body.app-page[data-page="settings"] .ks-account-email-card {
    width: 100%;
    max-width: none;
  }

  body.app-page[data-page="settings"] .ks-password-inline-actions {
    align-items: stretch;
    width: 100%;
  }

  body.app-page[data-page="settings"] .ks-password-inline-feedback {
    max-width: none;
    text-align: left;
  }

  body.app-page[data-page="settings"] .ks-password-inline-wrap {
    width: 100%;
  }

  body.app-page[data-page="settings"] .ks-password-submit-wrap {
    justify-content: stretch;
  }

  body.app-page[data-page="settings"] .ks-password-submit {
    width: 100%;
  }
}

body.app-page[data-page="settings"] .form-feedback--error {
  color: var(--danger);
}

body.app-page[data-page="settings"] .form-feedback--success {
  color: var(--success);
}

body.app-page[data-page="settings"] .ks-linked-access-card .form-feedback {
  margin-bottom: var(--space-3);
}

body.app-page[data-page="settings"] .ks-identities-list {
  display: grid;
  gap: 12px;
  max-width: 980px;
}

body.app-page[data-page="settings"] .ks-identity-item {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--surface-secondary);
}

body.app-page[data-page="settings"] .ks-identity-item.is-disabled {
  opacity: 0.78;
}

body.app-page[data-page="settings"] .ks-identity-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

body.app-page[data-page="settings"] .ks-identity-provider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.app-page[data-page="settings"] .ks-identity-provider-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.app-page[data-page="settings"] .ks-identity-provider-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.app-page[data-page="settings"] .ks-identity-provider-icon--apple {
  color: var(--text-primary);
}

body.app-page[data-page="settings"] .ks-identity-status {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

body.app-page[data-page="settings"] .ks-identity-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body.app-page[data-page="settings"] .ks-identity-item.is-connected .ks-identity-status {
  color: var(--success-dark);
}

body.app-page[data-page="settings"] .settings-danger-toggle-section {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

body.app-page[data-page="settings"] .app-content {
  padding-bottom: calc(var(--space-6) + 140px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body.app-page[data-page="settings"] #ks-onboarding-dock {
    left: auto !important;
    right: 24px !important;
  }
}

body.app-page[data-page="settings"] .settings-danger-trigger {
  align-self: flex-start;
  display: inline-flex;
  width: auto;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border-default));
  color: color-mix(in srgb, var(--danger-dark) 80%, var(--text-primary));
  padding-inline: var(--space-4);
}

body.app-page[data-page="settings"] #toggle-danger-zone,
body.app-page[data-page="settings"] #open-reset-data-modal,
body.app-page[data-page="settings"] #open-delete-account-modal {
  scroll-margin-bottom: calc(156px + env(safe-area-inset-bottom, 0px));
}

body.app-page[data-page="settings"] .settings-danger-panel {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: scale(0.2) translateY(-8px);
  transform-origin: var(--danger-panel-origin-x, calc(100% - 14px)) var(--danger-panel-origin-y, 0%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: min(520px, 100%);
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger-light) 18%, var(--surface-primary));
  box-shadow: 0 18px 36px -30px rgba(185, 28, 28, 0.28);
}

body.app-page[data-page="settings"] .settings-danger-panel[hidden] {
  display: none !important;
}

body.app-page[data-page="settings"] .settings-danger-panel .ks-danger-inner {
  opacity: 1;
  transform: none;
}

body.app-page[data-page="settings"] .settings-danger-panel.is-open {
  max-height: 420px;
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible !important;
  pointer-events: auto !important;
  padding: var(--space-4);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border-default));
  animation: notificationsBubbleIn 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

body.app-page[data-page="settings"] .settings-danger-panel.closing {
  max-height: 420px;
  visibility: visible !important;
  pointer-events: none !important;
  padding: var(--space-4);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border-default));
  animation: notificationsBubbleOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

body.app-page[data-page="settings"] .settings-danger-copy {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.45;
}

body.app-page[data-page="settings"] .settings-danger-actions {
  margin-top: var(--space-3);
}

body.app-page[data-page="settings"] .settings-danger-confirm-row {
  margin-top: var(--space-3);
}

body.app-page[data-page="settings"] .settings-danger-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

body.app-page[data-page="settings"] .settings-danger-checkbox input[type="checkbox"] {
  margin-top: 3px;
}

body.app-page[data-page="settings"] #delete-account-feedback {
  min-height: 20px;
  margin-top: var(--space-2);
}

body.app-page[data-page="settings"] .settings-delete-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  body.app-page[data-page="settings"] .ks-settings-grid {
    grid-template-columns: 1fr;
  }

  body.app-page[data-page="settings"] .ks-settings-section {
    display: block;
  }

  body.app-page[data-page="settings"] .ks-settings-account-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.app-page[data-page="settings"] .ks-readonly-password {
    max-width: none;
  }

  body.app-page[data-page="settings"] .ks-password-toggle .btn {
    width: 100%;
  }

  body.app-page[data-page="settings"] .ks-password-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.app-page[data-page="settings"] .ks-password-current,
  body.app-page[data-page="settings"] .ks-password-new,
  body.app-page[data-page="settings"] .ks-confirm-submit-row {
    grid-column: 1;
  }

  body.app-page[data-page="settings"] .ks-confirm-submit-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.app-page[data-page="settings"] .ks-password-submit-wrap {
    justify-content: stretch;
  }

  body.app-page[data-page="settings"] .ks-password-submit {
    width: 100%;
    min-width: 0;
  }

  body.app-page[data-page="settings"] .ks-identity-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.app-page[data-page="settings"] .ks-identity-actions {
    justify-content: stretch;
  }

  body.app-page[data-page="settings"] .ks-identity-actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  body.app-page[data-page="settings"] .settings-danger-toggle-section {
    align-items: stretch;
  }

  body.app-page[data-page="settings"] .settings-danger-trigger,
  body.app-page[data-page="settings"] .settings-danger-panel {
    width: 100%;
  }
}

/* ============================================
   SMARTPHONE CALENDAR UX FIX (month/week only)
   Safe mobile layout: standard card, scroll containment
   ============================================ */
@media (max-width: 576px), (max-width: 640px) and (pointer: coarse) {

  /* Page-level overflow protection — prevent horizontal page scroll */
  body.app-page[data-page="calendar"] {
    overflow-x: clip;
  }
  body.app-page[data-page="calendar"] .app-main,
  body.app-page[data-page="calendar"] .app-content {
    overflow-x: clip;
  }

  /* P2: Reduce app-content horizontal padding to gain table width (no negative margins) */
  body.app-page[data-page="calendar"] .app-content {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.app-page[data-page="calendar"] .calendar-bottom-section {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Standard card — NO full-bleed, keep border-radius + shadow */
  body.app-page[data-page="calendar"] .ks-calendar-card {
    max-width: 100%;
  }

  /* Reduced internal padding */
  body.app-page[data-page="calendar"] .ks-calendar-card > .app-card-header {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card > .app-card-body {
    padding-left: 2px;
    padding-right: 2px;
  }

  body.app-page[data-page="calendar"] .calendar-topbar,
  body.app-page[data-page="calendar"] .calendar-controls {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Calendar board: responsive variables, hidden overflow (NOT visible) */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board {
    overflow: hidden;
    padding-top: var(--space-2);
    padding-bottom: var(--space-4);
    --ks-cal-mobile-habit-col: clamp(128px, 34vw, 150px);
    --ks-cal-mobile-day-cell: clamp(32px, 9vw, 38px);
    --habit-col: var(--ks-cal-mobile-habit-col);
    --cal-cell: var(--ks-cal-mobile-day-cell);
    --cal-gap: var(--space-1);
  }

  /* Calendar wrapper: NO transform, NO overflow:visible */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board .calendar-wrapper {
    transform: none;
    width: auto;
    max-width: 100%;
  }

  /* Scroll wrapper: extend to card edges with negative margin to reclaim space */
  body.app-page[data-page="calendar"] .ks-calendar-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 48%, transparent) transparent;
    max-width: 100%;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    isolation: auto;
  }

  body.app-page[data-page="calendar"] #habit-calendar td.habit-name-cell.habit-column-cell,
  body.app-page[data-page="calendar"] .cal-category-separator-cell--label,
  body.app-page[data-page="calendar"] .habit-calendar thead th.habit-header-cell,
  body.app-page[data-page="calendar"] .habit-calendar thead th.habit-header-spacer-cell {
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    will-change: auto !important;
    isolation: auto !important;
  }

  body.app-page[data-page="calendar"] .cal-today-btn,
  body.app-page[data-page="calendar"] .cal-minimap-btn,
  body.app-page[data-page="calendar"] .cal-filter-btn {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    will-change: auto;
  }

  body.app-page[data-page="calendar"] .cal-today-btn::before,
  body.app-page[data-page="calendar"] .cal-minimap-btn::before {
    display: none;
    animation: none;
  }

  body.app-page[data-page="calendar"] .cal-minimap-btn:hover {
    transform: none;
  }

  body.app-page[data-page="calendar"] .ks-calendar-scroll::-webkit-scrollbar {
    height: 12px;
  }

  /* Month grid: width:max-content inside scroll wrapper, NO fixed min-width */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.is-month .ks-calendar-grid {
    width: max-content;
    min-width: 100%;
  }

  /* Week grid: table-layout fixed, fills scroll wrapper */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.is-week .ks-calendar-grid {
    min-width: calc(var(--habit-col) + var(--cal-cell) * 7);
    width: 100%;
    table-layout: fixed;
  }

  /* Cell font sizing */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.is-month .ks-calendar-grid thead th,
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.is-month .ks-calendar-grid tbody td,
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.is-week .ks-calendar-grid thead th,
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.is-week .ks-calendar-grid tbody td {
    font-size: var(--text-sm);
    padding: var(--space-2);
  }

  /* Habit column sizing — responsive */
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid col.habit-column,
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid .habit-column-cell {
    width: var(--habit-col);
    min-width: var(--habit-col);
    max-width: var(--habit-col);
  }

  /* Icon-only mode: narrower habit column */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.icon-only-mode .ks-calendar-grid col.habit-column,
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.icon-only-mode .ks-calendar-grid .habit-column-cell {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
  }

  /* Day cell min sizes */
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid .day-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid thead th.calendar-day-header {
    min-width: var(--cal-cell);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid tbody td.day-cell {
    min-height: 48px;
    height: 48px;
    padding: var(--space-1-5);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.compact-mode {
    --ks-cal-mobile-habit-col: clamp(140px, 38vw, 150px);
    --ks-cal-mobile-day-cell: clamp(38px, 10vw, 42px);
    --cal-row: 40px;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.compact-mode .ks-calendar-grid tbody td.day-cell {
    min-height: var(--cal-row);
    height: var(--cal-row);
  }

  /* Sticky header — P4: remove backdrop-filter on mobile (expensive Chrome repaint/jank) */
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid thead th.calendar-day-header,
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid thead th.habit-header-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid thead th.habit-header-spacer-cell {
    position: sticky;
    top: 0;
    z-index: 48;
    background: var(--surface-secondary);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid thead th.habit-header-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card .ks-calendar-grid thead th.habit-header-spacer-cell {
    z-index: 200;
  }

  /* ======================================================
     SMARTPHONE: font scaling
     ====================================================== */
  body.app-page[data-page="calendar"] .ks-calendar-card
    .habit-name-cell .habit-title {
    font-size: 0.80rem;
    word-break: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    display: block;
    line-height: 1.12;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .habit-name-cell .habit-title.habit-title--long {
    font-size: 0.70rem;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .habit-name-cell .habit-title.habit-title--very-long {
    font-size: 0.61rem;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .habit-name-cell .habit-frequency {
    font-size: 0.60rem;
    white-space: nowrap;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board .habit-progress-row .habit-goal-pill,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board .habit-progress-row .habit-streak-pill {
    font-size: 0.60rem;
    height: 16px;
    padding: 0 var(--space-1);
    letter-spacing: 0;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .habit-name-cell .habit-icon {
    font-size: 0.82rem;
    width: 15px;
    height: 15px;
    line-height: 1;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board .habit-name-cell .habit-cell-grid {
    column-gap: 6px;
    row-gap: 2px;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    #habit-calendar td.habit-name-cell.habit-column-cell {
    padding: var(--space-1) var(--space-1-5);
    height: auto;
    min-height: 64px;
  }

  /* F) Header: vertical layout on mobile, centered, full width */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-stage-header {
    padding: var(--space-2) var(--space-2);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-header-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-view-toggle {
    width: 100%;
    justify-content: center;
    display: flex;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-view-toggle label {
    flex: 1;
    text-align: center;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .cal-pin-btn {
    position: static;
    transform: none !important;
    margin-left: var(--space-1);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-period-nav {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-period-label {
    font-size: var(--text-lg);
    flex: 1;
    text-align: center;
    min-width: 0;
    justify-content: center;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-period-label.label--long {
    font-size: var(--text-sm);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-period-label-text {
    min-width: 0;
  }

  /* F+G) Minimize calendar body padding — 2px allows max table width */
  body.app-page[data-page="calendar"] .ks-calendar-card > .app-card-body {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* Quote on mobile */
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-quote-card-inline {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .month-quote-text {
    font-size: 0.7rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-align: center;
  }

  /* Shared mobile density tokens for month + week */
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-month .ks-calendar-grid
    col.habit-column,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-month .ks-calendar-grid
    th.habit-header-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-month .ks-calendar-grid
    th.habit-header-spacer-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-month .ks-calendar-grid
    td.habit-name-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-week .ks-calendar-grid
    col.habit-column,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-week .ks-calendar-grid
    th.habit-header-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-week .ks-calendar-grid
    th.habit-header-spacer-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-week .ks-calendar-grid
    td.habit-name-cell {
    width: var(--habit-col);
    min-width: var(--habit-col);
    max-width: var(--habit-col);
    box-sizing: border-box;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-month .ks-calendar-grid
    th.calendar-day-header,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-month .ks-calendar-grid
    td.day-cell,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-week .ks-calendar-grid
    col.day-column,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-week .ks-calendar-grid
    th.calendar-day-header,
  body.app-page[data-page="calendar"] .ks-calendar-card
    .calendar-board.is-week .ks-calendar-grid
    td.day-cell {
    width: var(--cal-cell);
    min-width: var(--cal-cell);
    max-width: var(--cal-cell);
  }
}

@media (max-width: 932px) and (orientation: landscape) and (pointer: coarse) {
  body.app-page[data-page="calendar"] .ks-calendar-card,
  body.app-page[data-page="calendar"] .calendar-board,
  body.app-page[data-page="calendar"] .ks-calendar-scroll,
  body.app-page[data-page="calendar"] .calendar-wrapper,
  body.app-page[data-page="calendar"] .habit-calendar {
    padding-right: 0 !important;
    margin-right: 0 !important;
    right: auto !important;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.app-page[data-page="calendar"] .app-shell,
  body.app-page[data-page="calendar"] .app-main,
  body.app-page[data-page="calendar"] .app-content {
    overflow-x: clip !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.app-page[data-page="calendar"] .app-content {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  body.app-page[data-page="calendar"] .calendar-bottom-section {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  body.app-page[data-page="calendar"] .calendar-board {
    overflow: hidden !important;
  }

  body.app-page[data-page="calendar"] .ks-calendar-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  body.app-page[data-page="calendar"] .calendar-board.is-month .ks-calendar-grid {
    width: max-content !important;
    min-width: 100% !important;
  }

  body.app-page[data-page="calendar"] .calendar-board.is-week .ks-calendar-grid {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  body.app-page[data-page="calendar"] .calendar-board.is-week .ks-calendar-grid col.day-column,
  body.app-page[data-page="calendar"] .calendar-board.is-week .ks-calendar-grid thead th:not(:first-child),
  body.app-page[data-page="calendar"] .calendar-board.is-week .ks-calendar-grid tbody td:not(:first-child) {
    width: auto !important;
    max-width: none !important;
  }

  body.app-page[data-page="calendar"] .calendar-board.is-week .ks-calendar-grid .day-cell,
  body.app-page[data-page="calendar"] .calendar-board.is-week .ks-calendar-grid thead th.calendar-day-header {
    min-width: 56px !important;
    width: auto !important;
  }

  body.app-page[data-page="calendar"] .mobile-menu-toggle,
  body.app-page[data-page="calendar"] #mobile-menu-toggle {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 576px) and (orientation: portrait),
  (max-width: 640px) and (pointer: coarse) and (orientation: portrait) {
  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board {
    --ks-cal-mobile-habit-col: clamp(126px, 36vw, 142px);
    --ks-cal-mobile-day-cell: clamp(32px, 8.8vw, 36px);
  }

  body.app-page[data-page="calendar"] .ks-calendar-card .calendar-board.compact-mode {
    --ks-cal-mobile-habit-col: clamp(140px, 38vw, 150px);
    --ks-cal-mobile-day-cell: clamp(38px, 10vw, 42px);
    --cal-row: 40px;
  }

  body.app-page[data-page="calendar"] .ks-calendar-card>.app-card-header,
  body.app-page[data-page="calendar"] .ks-calendar-card>.app-card-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

body.app-page[data-page="calendar"] .ks-calendar-scroll {
  scrollbar-width: thin !important;
}

body.app-page[data-page="calendar"] .ks-calendar-scroll::-webkit-scrollbar {
  height: 12px;
}

/* ============================================
   STATS V5.0 — RESPONSIVE + UX OVERHAUL
   Scoped to body.app-page[data-page="stats"]
   ============================================ */

/* TASK 2: Sticky period pill */
body.app-page[data-page="stats"] .stats-v4-period-active-label {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  border-color: color-mix(in srgb, var(--border-default) 60%, transparent);
  transition: box-shadow 200ms ease;
}

body.app-page[data-page="stats"] .stats-v4-period-active-label.is-stuck {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* TASK 4: Heatmap sizing — scalable cells */
body.app-page[data-page="stats"] .stats-v2-heatmap-cell {
  --heat-cell: clamp(12px, 1.15vw, 18px);
  width: var(--heat-cell);
  height: var(--heat-cell);
  border-radius: clamp(2px, 0.3vw, 4px);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-label-col span {
  height: var(--heat-cell, 12px);
  font-size: clamp(9px, 0.85vw, 11px);
  line-height: var(--heat-cell, 12px);
}

body.app-page[data-page="stats"] .stats-v2-heatmap-grid {
  min-width: 720px;
}

/* Heatmap palette — light theme coherent (no acid greens) */
body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-0,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-0 {
  background: #e67e5a;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-1,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-1 {
  background: #e8a44c;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-2,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-2 {
  background: #5ba3d9;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-3,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-3 {
  background: #49a05e;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-cell.level-4,
body.app-page[data-page="stats"] .stats-v2-legend-swatch.level-4 {
  background: #d4a232;
}

/* TASK 8: Density / legibility — compact cards, better typography */
body.app-page[data-page="stats"] .stats-v4-period-tile strong {
  font-size: 16px;
}

body.app-page[data-page="stats"] .stats-v4-period-tile span {
  font-size: 12px;
}

body.app-page[data-page="stats"] .stats-v4-subsection-title {
  font-size: 18px;
  font-weight: 700;
}

body.app-page[data-page="stats"] .stats-v4-subsection-subtitle {
  font-size: 13px;
}

body.app-page[data-page="stats"] .stats-v4-period-main-stat strong {
  font-size: 20px;
}

body.app-page[data-page="stats"] .stats-v4-period-main-stat span {
  font-size: 12px;
}

body.app-page[data-page="stats"] .stats-v2-section .app-card-header,
body.app-page[data-page="stats"] .stats-v2-section .app-card-body {
  padding: 16px;
}

body.app-page[data-page="stats"] .stats-v2-metric-cell .stats-v2-metric-value {
  font-size: 14px;
}

body.app-page[data-page="stats"] .stats-v2-metric-cell .stats-v2-metric-label {
  font-size: 11px;
}

body.app-page[data-page="stats"] .stats-v2-category-legend {
  font-size: 12px;
}

/* TASK 7: Unified categories + habits section */
body.app-page[data-page="stats"] .stats-v5-cat-habits {
  display: grid;
  gap: 0;
}

body.app-page[data-page="stats"] .stats-v5-cat-habits-inner {
  display: grid;
  gap: 18px;
}

@media (min-width: 980px) {
  body.app-page[data-page="stats"] .stats-v5-cat-habits-inner {
    grid-template-columns: 360px 1fr;
    gap: 20px;
  }
}

body.app-page[data-page="stats"] .stats-v5-cat-habits-left,
body.app-page[data-page="stats"] .stats-v5-cat-habits-right {
  min-width: 0;
}

/* Category card: clickable + selected state */
body.app-page[data-page="stats"] .stats-v2-category-card {
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

body.app-page[data-page="stats"] .stats-v2-category-card:hover {
  box-shadow: 0 0 0 1px var(--accent-500);
}

body.app-page[data-page="stats"] .stats-v2-category-card.is-selected {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-500) 30%, transparent);
}

/* Weight snapshot card (1 point) */
body.app-page[data-page="stats"] .stats-v2-weight-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

body.app-page[data-page="stats"] .stats-v2-weight-snapshot-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  padding: 12px;
  display: grid;
  gap: 3px;
}

body.app-page[data-page="stats"] .stats-v2-weight-snapshot-item strong {
  font-size: 18px;
  color: var(--text-primary);
}

body.app-page[data-page="stats"] .stats-v2-weight-snapshot-item span {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Mission card — habit association */
body.app-page[data-page="stats"] .stats-v2-mission-habit {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

body.app-page[data-page="stats"] .stats-v2-mission-habit-icon {
  font-size: 13px;
}

/* Mobile: missions single column */
@media (max-width: 767px) {
  body.app-page[data-page="stats"] .stats-v2-missions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: weight chart responsive */
body.app-page[data-page="stats"] .stats-v2-weight-layout {
  display: grid;
  gap: 16px;
}

@media (max-width: 767px) {
  body.app-page[data-page="stats"] .stats-v2-weight-layout {
    grid-template-columns: 1fr;
  }

  body.app-page[data-page="stats"] .stats-v2-weight-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.app-page[data-page="stats"] .stats-v2-weight-chart svg {
    min-width: 500px;
  }
}

/* ============================================
   STATS V5.1 — MOBILE-FIRST FIX (root cause: hardcoded min-widths)
   Only stats.php is broken on mobile; other pages are fine.
   ============================================ */

/* TASK 3.1: Override ALL hardcoded heatmap min-widths from earlier CSS blocks */
body.app-page[data-page="stats"] .stats-v2-heatmap-grid {
  min-width: 0 !important;
  width: 100%;
}

body.app-page[data-page="stats"] .stats-v2-heatmap-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Heatmap grid inside scroll: use actual content width, not forced min */
body.app-page[data-page="stats"] .stats-v2-heatmap-scroll .stats-v2-heatmap-grid {
  min-width: max-content;
}

/* TASK 3.2 + 3.3: Mobile-specific overrides */
@media (max-width: 767px) {
  /* Layout: single column, tighter gaps */
  body.app-page[data-page="stats"] .stats-v2-layout {
    gap: 20px;
    padding: 0 2px;
  }

  /* Card padding: compact but readable */
  body.app-page[data-page="stats"] .stats-v2-section .app-card-header,
  body.app-page[data-page="stats"] .stats-v2-section .app-card-body {
    padding: 12px !important;
  }

  /* Section heads: tighter */
  body.app-page[data-page="stats"] .stats-v2-section-head {
    margin-bottom: 10px;
  }

  body.app-page[data-page="stats"] .stats-v2-section-title {
    font-size: 16px;
  }

  body.app-page[data-page="stats"] .stats-v2-section-subtitle {
    font-size: 12px;
  }

  /* Period wrapper: column layout */
  body.app-page[data-page="stats"] .stats-v4-period-wrapper {
    gap: 14px;
  }

  body.app-page[data-page="stats"] .stats-v4-period-wrapper-head {
    flex-direction: column;
    gap: 8px;
  }

  /* Sticky pill: account for mobile header height */
  body.app-page[data-page="stats"] .stats-v4-period-active-label {
    top: 56px;
    font-size: 10px;
    padding: 5px 10px;
    align-self: flex-start;
  }

  /* Period tiles grid: 1 column on narrow */
  body.app-page[data-page="stats"] .stats-v4-period-tiles {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Subsection titles */
  body.app-page[data-page="stats"] .stats-v4-subsection-title {
    font-size: 15px;
  }

  body.app-page[data-page="stats"] .stats-v4-subsection-subtitle {
    font-size: 11px;
  }

  /* Deep dive: tighter gap */
  body.app-page[data-page="stats"] .stats-v4-deep-dive {
    gap: 14px;
  }

  /* Heatmap: allow natural scroll */
  body.app-page[data-page="stats"] .stats-v2-heatmap-cell {
    --heat-cell: 11px;
  }

  /* Filter head: stack vertically */
  body.app-page[data-page="stats"] .stats-v2-filters-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }

  /* Month grid: 3 columns on mobile */
  body.app-page[data-page="stats"] .stats-v2-month-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Categories+Habits: stack */
  body.app-page[data-page="stats"] .stats-v5-cat-habits-inner {
    grid-template-columns: 1fr !important;
  }

  /* Habit controls: stack */
  body.app-page[data-page="stats"] .stats-v2-habits-controls {
    flex-direction: column;
    gap: 8px;
  }

  /* Category chips: wrap */
  body.app-page[data-page="stats"] .stats-v2-category-chips {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Page header: compact */
  body.app-page[data-page="stats"] .page-header-body {
    padding: 12px 0;
  }

  body.app-page[data-page="stats"] .page-title {
    font-size: 20px;
  }

  body.app-page[data-page="stats"] .page-subtitle {
    font-size: 12px;
  }

  /* Prevent ANY child from causing horizontal overflow */
  body.app-page[data-page="stats"] .app-content {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body.app-page[data-page="stats"] .stats-v2-layout,
  body.app-page[data-page="stats"] .stats-v2-layout > *,
  body.app-page[data-page="stats"] .stats-v4-period-wrapper,
  body.app-page[data-page="stats"] .stats-v4-deep-dive {
    min-width: 0;
    max-width: 100%;
  }
}

/* Tablet refinements */
@media (min-width: 768px) and (max-width: 1023px) {
  body.app-page[data-page="stats"] .stats-v2-layout {
    gap: 24px;
  }

  body.app-page[data-page="stats"] .stats-v4-period-active-label {
    top: 60px;
  }

  body.app-page[data-page="stats"] .stats-v4-period-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop: heatmap uses full width */
@media (min-width: 1024px) {
  body.app-page[data-page="stats"] .stats-v4-period-active-label {
    top: 64px;
  }

  body.app-page[data-page="stats"] .stats-v2-heatmap-cell {
    --heat-cell: clamp(13px, 1.2vw, 18px);
  }
}

/* Settings Hub dropdown */
.profile-dropdown--settings {
  min-width: 260px;
  max-width: 320px;
}

.settings-hub-section {
  padding: 8px 0;
}

@media (max-width: 768px) {
  .settings-hub-section--layout {
    display: none;
  }
}

.settings-hub-section + .settings-hub-section {
  border-top: 1px solid var(--border-subtle);
}

.settings-hub-section-title {
  display: block;
  padding: 4px 16px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.settings-hub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
}

.settings-hub-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}

.settings-hub-row-label svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.settings-hub-row .theme-switch,
.settings-hub-row .sound-switch {
  flex-shrink: 0;
}

/* Layout segmented inside settings hub: full-width */
.settings-hub-row--layout {
  display: block;
  padding: 6px 16px 10px;
}

.settings-hub-layout-segmented {
  display: flex;
  width: 100%;
}

.settings-hub-layout-segmented .layout-segment-btn {
  flex: 1 1 0;
  justify-content: center;
  padding: 7px 10px;
  font-size: 12px;
}

.settings-hub-layout-segmented .layout-label {
  display: inline !important;
}

.settings-hub-lang {
  padding: 6px 16px 8px;
}

.settings-hub-lang .ks-locale-pill {
  width: 100%;
}

.settings-hub-lang .ks-locale-pill__item {
  flex: 1 1 0;
  min-width: 0;
}

.settings-hub-lang .ks-locale-pill__label {
  letter-spacing: 0.05em;
}

[data-theme="light"] .settings-hub-lang .ks-locale-pill,
body:not([data-theme="dark"]) .settings-hub-lang .ks-locale-pill {
  border-color: color-mix(in srgb, var(--border-default) 32%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.9) 0%,
      color-mix(in srgb, var(--surface-secondary) 74%, var(--surface-primary)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 10px 18px -20px rgba(109, 73, 24, 0.12);
}

[data-theme="light"] .settings-hub-lang .ks-locale-pill__item,
body:not([data-theme="dark"]) .settings-hub-lang .ks-locale-pill__item {
  color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary));
  border-color: transparent;
}

[data-theme="light"] .settings-hub-lang .ks-locale-pill__item:hover,
[data-theme="light"] .settings-hub-lang .ks-locale-pill__item:focus-visible,
body:not([data-theme="dark"]) .settings-hub-lang .ks-locale-pill__item:hover,
body:not([data-theme="dark"]) .settings-hub-lang .ks-locale-pill__item:focus-visible {
  color: var(--text-primary);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      color-mix(in srgb, var(--surface-primary) 90%, transparent) 100%);
  border-color: color-mix(in srgb, var(--border-default) 18%, transparent);
}

[data-theme="light"] .settings-hub-lang .ks-locale-pill__item.is-active,
body:not([data-theme="dark"]) .settings-hub-lang .ks-locale-pill__item.is-active {
  color: color-mix(in srgb, var(--text-primary) 92%, #6f4819 8%);
  background:
    linear-gradient(180deg,
      rgba(248, 213, 151, 0.78) 0%,
      rgba(232, 176, 84, 0.4) 100%);
  border-color: color-mix(in srgb, var(--accent-500) 28%, var(--border-default));
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 245, 0.6),
    0 8px 14px -12px rgba(109, 73, 24, 0.18);
}

[data-theme="light"] .settings-hub-lang .ks-locale-pill__label,
body:not([data-theme="dark"]) .settings-hub-lang .ks-locale-pill__label {
  color: inherit;
}

/* Layout switch animation: smooth header↔sidebar transition */
.app-header,
.app-sidebar {
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-main {
  transition: margin-left 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.ks-layout-animating .app-main {
  transition: none !important;
}

body.ks-layout-animating .app-content {
  will-change: transform;
}

body.ks-layout-animating .app-shell .app-header {
  display: block !important;
}

body.ks-layout-animating .app-shell .app-sidebar {
  display: flex !important;
}

body.ks-layout-animating .app-header,
body.ks-layout-animating .app-sidebar {
  will-change: transform, opacity;
}

body.ks-layout-animating[data-layout-from="header"][data-layout-to="sidebar"] .app-header {
  transform: translateY(0);
  opacity: 1;
}
body.ks-layout-animating[data-layout-from="header"][data-layout-to="sidebar"] .app-sidebar {
  transform: translateX(-20px);
  opacity: 0;
}
body.ks-layout-animating--run[data-layout-from="header"][data-layout-to="sidebar"] .app-header {
  transform: translateY(-20px);
  opacity: 0;
}
body.ks-layout-animating--run[data-layout-from="header"][data-layout-to="sidebar"] .app-sidebar {
  transform: translateX(0);
  opacity: 1;
}

body.ks-layout-animating[data-layout-from="sidebar"][data-layout-to="header"] .app-sidebar {
  transform: translateX(0);
  opacity: 1;
}
body.ks-layout-animating[data-layout-from="sidebar"][data-layout-to="header"] .app-header {
  transform: translateY(-20px);
  opacity: 0;
}
body.ks-layout-animating--run[data-layout-from="sidebar"][data-layout-to="header"] .app-sidebar {
  transform: translateX(-20px);
  opacity: 0;
}
body.ks-layout-animating--run[data-layout-from="sidebar"][data-layout-to="header"] .app-header {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .app-header,
  .app-sidebar,
  .app-main {
    transition: none;
  }
}

/* Sidebar PREFERENZE section */
.sidebar-nav .sidebar-nav-section--preferences {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.sidebar-nav .sidebar-nav-section--preferences .sidebar-nav-title {
  font-size: 10px;
}

.sidebar-nav .sidebar-admin-group {
  margin-top: auto;
  padding-top: var(--space-4);
  margin-bottom: var(--space-5);
  width: 100%;
  border-top: none;
}

.sidebar-nav .sidebar-admin-toggle {
  width: 100%;
  justify-content: flex-start;
}

/* Settings trigger in sidebar: match nav link style exactly */
.sidebar-nav .sidebar-settings-btn[data-settings-hub-toggle] {
  width: 100%;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm, 13px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: var(--radius-md, 6px);
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: left;
}

.sidebar-nav .sidebar-settings-btn[data-settings-hub-toggle]:hover,
.sidebar-nav .sidebar-settings-btn[data-settings-hub-toggle]:focus-visible {
  background: var(--interactive-hover);
  color: var(--text-primary);
}

.sidebar-nav .sidebar-settings-btn[data-settings-hub-toggle] svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.7;
}

.sidebar-nav .sidebar-settings-btn[data-settings-hub-toggle]:hover svg,
.sidebar-nav .sidebar-settings-btn[data-settings-hub-toggle]:focus-visible svg {
  opacity: 1;
}

/* ============================================
   NOTIFICATIONS — IMPROVED HIERARCHY & READABILITY
   ============================================ */

/* Remove stacked card pseudo-elements */
.profile-dropdown.notifications-dropdown .notifications-item--group::before,
.profile-dropdown.notifications-dropdown .notifications-item--group::after,
.profile-dropdown.notifications-dropdown .notifications-item--stack::before,
.profile-dropdown.notifications-dropdown .notifications-item--stack::after {
  display: none !important;
  content: none !important;
}

/* Reset stacking offsets */
.profile-dropdown.notifications-dropdown .notifications-item--group,
.profile-dropdown.notifications-dropdown .notifications-item--stack {
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  --notifications-item-bg: color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary));
  --notifications-item-border: color-mix(in srgb, var(--border-subtle) 92%, transparent);
  --notifications-item-rail: color-mix(in srgb, var(--text-tertiary) 38%, transparent);
  --notifications-item-rail-width: 2px;
}

/* Dividers: restrained surfaces + controlled rail */
.profile-dropdown.notifications-dropdown .notifications-item {
  --notifications-item-bg: transparent;
  --notifications-item-border: var(--border-subtle);
  --notifications-item-rail: transparent;
  --notifications-item-rail-width: 0px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 11px 14px 11px 16px;
  margin: 0;
  border-radius: 0;
  gap: 6px;
  background: var(--notifications-item-bg);
  box-shadow: inset var(--notifications-item-rail-width) 0 0 var(--notifications-item-rail);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  border-bottom-color: var(--notifications-item-border);
}

.profile-dropdown.notifications-dropdown .notifications-item:last-child {
  border-bottom: none;
}

/* Hover/focus: subtle elevation without looking selected */
.profile-dropdown.notifications-dropdown .notifications-item:hover {
  background: color-mix(in srgb, var(--interactive-hover) 88%, var(--notifications-item-bg));
  transform: none;
  box-shadow: inset var(--notifications-item-rail-width) 0 0 var(--notifications-item-rail);
}

.profile-dropdown.notifications-dropdown .notifications-item:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

/* Single unread items: clearer attention, controlled accent rail */
.profile-dropdown.notifications-dropdown .notifications-item.is-unread:not(.notifications-item--group):not(.notifications-item--stack) {
  --notifications-item-bg: color-mix(in srgb, var(--accent-500) 6%, var(--surface-primary));
  --notifications-item-border: color-mix(in srgb, var(--accent-500) 18%, var(--border-subtle));
  --notifications-item-rail: color-mix(in srgb, var(--accent-500) 72%, transparent);
  --notifications-item-rail-width: 2px;
}

[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item.is-unread:not(.notifications-item--group):not(.notifications-item--stack) {
  --notifications-item-bg: rgba(var(--accent-rgb, 255, 208, 97), 0.08);
  --notifications-item-border: rgba(var(--accent-rgb, 255, 208, 97), 0.14);
  --notifications-item-rail: rgba(var(--accent-rgb, 255, 208, 97), 0.72);
}

/* Group items: differentiated cluster surface without redesigning the list */
.profile-dropdown.notifications-dropdown .notifications-item--group,
.profile-dropdown.notifications-dropdown .notifications-item--stack {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-tertiary) 74%, transparent) 0%, transparent 100%);
  background-origin: border-box;
  --notifications-item-bg: color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary));
  --notifications-item-border: color-mix(in srgb, var(--border-subtle) 92%, transparent);
  --notifications-item-rail: color-mix(in srgb, var(--text-tertiary) 38%, transparent);
  --notifications-item-rail-width: 2px;
}

.profile-dropdown.notifications-dropdown .notifications-item--group.is-unread,
.profile-dropdown.notifications-dropdown .notifications-item--stack.is-unread {
  --notifications-item-bg: color-mix(in srgb, var(--accent-500) 8%, var(--surface-secondary));
  --notifications-item-border: color-mix(in srgb, var(--accent-500) 24%, var(--border-subtle));
  --notifications-item-rail: color-mix(in srgb, var(--accent-500) 82%, transparent);
}

[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--group,
[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--stack {
  --notifications-item-bg: rgba(255, 255, 255, 0.04);
  --notifications-item-border: rgba(255, 255, 255, 0.08);
  --notifications-item-rail: rgba(255, 255, 255, 0.2);
  --notifications-item-rail-width: 2px;
}

[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--group.is-unread,
[data-theme="dark"] .profile-dropdown.notifications-dropdown .notifications-item--stack.is-unread {
  --notifications-item-bg: rgba(var(--accent-rgb, 255, 208, 97), 0.09);
  --notifications-item-border: rgba(var(--accent-rgb, 255, 208, 97), 0.16);
  --notifications-item-rail: rgba(var(--accent-rgb, 255, 208, 97), 0.78);
}

/* Title and body hierarchy */
.profile-dropdown.notifications-dropdown .notifications-item-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--text-primary);
  gap: 10px;
}

.profile-dropdown.notifications-dropdown .notifications-item-snippet {
  font-size: 12px;
  line-height: 1.48;
  color: var(--text-secondary);
  margin-top: 1px;
}

.profile-dropdown.notifications-dropdown .notifications-item--group .notifications-item-title-text,
.profile-dropdown.notifications-dropdown .notifications-item--stack .notifications-item-title-text {
  letter-spacing: 0.01em;
}

.profile-dropdown.notifications-dropdown .notifications-item--group .notifications-item-snippet,
.profile-dropdown.notifications-dropdown .notifications-item--stack .notifications-item-snippet {
  color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
}

.profile-dropdown.notifications-dropdown .notifications-item-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.3;
  margin-top: 3px;
}

.profile-dropdown.notifications-dropdown .notifications-item-meta--stack {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-dropdown.notifications-dropdown .notifications-item-cta {
  color: color-mix(in srgb, var(--accent-400) 78%, var(--text-primary));
}

/* Badge +N: volume always visible, color only communicates unread attention */
.notifications-dropdown .notifications-stack-badge.notifications-stack-badge--unread,
.notifications-stack-badge--unread {
  background: rgba(var(--accent-rgb, 255, 208, 97), 0.16);
  border-color: rgba(var(--accent-rgb, 255, 208, 97), 0.28);
  color: var(--accent-700);
}

.notifications-dropdown .notifications-stack-badge.notifications-stack-badge--read,
.notifications-stack-badge--read {
  background: color-mix(in srgb, var(--surface-tertiary) 84%, var(--surface-secondary));
  border-color: color-mix(in srgb, var(--border-subtle) 92%, transparent);
  color: var(--text-secondary);
}

[data-theme="dark"] .notifications-dropdown .notifications-stack-badge.notifications-stack-badge--unread,
[data-theme="dark"] .notifications-stack-badge--unread {
  background: rgba(var(--accent-rgb, 255, 208, 97), 0.16);
  border-color: rgba(var(--accent-rgb, 255, 208, 97), 0.24);
  color: var(--accent-300);
}

[data-theme="dark"] .notifications-dropdown .notifications-stack-badge.notifications-stack-badge--read,
[data-theme="dark"] .notifications-stack-badge--read {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}

.profile-dropdown.notifications-dropdown .notifications-stack-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

/* Habit reminders */
.habits-reminders-btn {
  flex-shrink: 0;
}

.habit-modal__header {
  gap: 16px;
  flex-wrap: nowrap;
  align-items: center;
}

.habit-modal__header-main,
.habit-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.habit-modal__header-main {
  flex: 1 1 auto;
  min-width: 0;
}

.habit-modal__header-actions {
  margin-left: auto;
  flex: 0 0 auto;
}

.habit-reminder-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 46%),
    rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.habit-reminder-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 165, 233, 0.34);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.habit-reminder-trigger.is-enabled {
  border-color: rgba(16, 185, 129, 0.42);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 44%),
    rgba(236, 253, 245, 0.94);
}

.habit-reminder-trigger.is-unscheduled {
  border-style: dashed;
  opacity: 0.78;
}

.habit-reminder-trigger__icon {
  font-size: 1.15rem;
  line-height: 1;
}

html[data-theme="dark"] .habit-reminder-trigger {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 46%),
    rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.34);
}

html[data-theme="dark"] .habit-reminder-trigger.is-enabled {
  border-color: rgba(16, 185, 129, 0.36);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.2), transparent 44%),
    rgba(6, 78, 59, 0.58);
}

.habit-reminder-popover {
  width: min(360px, calc(100vw - 16px));
  max-width: 360px;
  padding: 14px;
}

.habit-reminder-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.habit-reminder-popover__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.habit-reminder-popover__subtitle {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(71, 85, 105, 0.88);
}

html[data-theme="dark"] .habit-reminder-popover__subtitle {
  color: rgba(203, 213, 225, 0.78);
}

.habit-reminder-popover__header-switch {
  flex: 0 0 auto;
}

.habit-reminder-popover__panel {
  display: grid;
  gap: 12px;
}

.habit-reminder-popover__panel.is-disabled {
  opacity: 0.78;
}

.habit-reminder-popover__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.habit-reminder-popover__time-row {
  display: grid;
  gap: 8px;
}

.habit-reminder-popover__time-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
}

.habit-reminder-popover__time-label,
.habit-reminder-timezone {
  font-size: 0.84rem;
  color: rgba(71, 85, 105, 0.9);
}

html[data-theme="dark"] .habit-reminder-popover__time-label,
html[data-theme="dark"] .habit-reminder-timezone {
  color: rgba(203, 213, 225, 0.82);
}

.habit-reminder-popover__time-input {
  width: 152px;
  min-width: 0;
  max-width: 100%;
}

.habit-reminder-popover__meta {
  display: grid;
  gap: 6px;
}

.habit-reminder-popover__panel.is-collapsed .habit-reminder-popover__time-row,
.habit-reminder-popover__panel.is-collapsed .habit-reminder-popover__meta {
  display: none;
}

.habit-reminder-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-width: 180px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  background: rgba(148, 163, 184, 0.16);
  color: rgba(51, 65, 85, 0.9);
}

.habit-reminder-status-badge.is-active {
  background: rgba(16, 185, 129, 0.14);
  color: rgba(5, 122, 85, 0.96);
}

.habit-reminder-status-badge.is-disabled {
  background: rgba(148, 163, 184, 0.14);
  color: rgba(71, 85, 105, 0.88);
}

html[data-theme="dark"] .habit-reminder-status-badge {
  background: rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] .habit-reminder-status-badge.is-active {
  background: rgba(16, 185, 129, 0.18);
  color: rgba(167, 243, 208, 0.96);
}

.habit-reminder-popover__helper {
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(71, 85, 105, 0.92);
}

.habit-reminder-popover__helper[hidden] {
  display: none;
}

html[data-theme="dark"] .habit-reminder-popover__helper {
  color: rgba(203, 213, 225, 0.84);
}

.habit-reminder-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}

.habit-reminder-switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.habit-reminder-switch__track {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.36);
  transition: background 0.18s ease;
}

.habit-reminder-switch__track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.2);
  transition: transform 0.18s ease;
}

.habit-reminder-switch input:checked + .habit-reminder-switch__track {
  background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.habit-reminder-switch input:checked + .habit-reminder-switch__track::after {
  transform: translateX(20px);
}

.habit-reminder-switch input:disabled + .habit-reminder-switch__track {
  opacity: 0.55;
}

.habit-reminder-switch--inline .habit-reminder-switch__track,
.habit-reminder-switch--compact .habit-reminder-switch__track {
  width: 46px;
  height: 28px;
}

.habit-reminder-switch--inline .habit-reminder-switch__track::after,
.habit-reminder-switch--compact .habit-reminder-switch__track::after {
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
}

.habit-reminder-switch--inline input:checked + .habit-reminder-switch__track::after,
.habit-reminder-switch--compact input:checked + .habit-reminder-switch__track::after {
  transform: translateX(18px);
}

.habit-reminders-modal__header {
  align-items: flex-start;
  gap: 16px;
}

.habit-reminders-modal__header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.habit-reminders-modal__header-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(71, 85, 105, 0.86);
}

html[data-theme="dark"] .habit-reminders-modal__header-note {
  color: rgba(203, 213, 225, 0.74);
}

.habit-reminders-modal .ks-modal__body {
  padding-top: 18px;
  padding-bottom: 18px;
}

.habit-reminders-modal .ks-modal__footer {
  padding: 14px var(--space-5);
  background: color-mix(in srgb, var(--surface-primary) 72%, var(--surface-secondary));
  border-top-color: color-mix(in srgb, var(--border-default) 72%, transparent);
  box-shadow: 0 -10px 24px -26px rgba(15, 23, 42, 0.18);
}

html[data-theme="dark"] .habit-reminders-modal .ks-modal__footer,
body.dark-theme .habit-reminders-modal .ks-modal__footer {
  background: color-mix(in srgb, var(--surface-primary) 84%, var(--surface-tertiary));
  box-shadow: 0 -12px 28px -28px rgba(2, 6, 23, 0.72);
}

.habit-reminders-permission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 36%),
    rgba(248, 250, 252, 0.82);
  margin-bottom: 14px;
}

html[data-theme="dark"] .habit-reminders-permission {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 36%),
    rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.16);
}

.habit-reminders-permission__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.habit-reminders-permission__label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(71, 85, 105, 0.7);
}

.habit-reminders-permission__status {
  font-size: 0.92rem;
  font-weight: 700;
}

.habit-reminders-permission__hint {
  font-size: 0.82rem;
  color: rgba(71, 85, 105, 0.9);
}

html[data-theme="dark"] .habit-reminders-permission__label {
  color: rgba(203, 213, 225, 0.62);
}

html[data-theme="dark"] .habit-reminders-permission__hint {
  color: rgba(203, 213, 225, 0.82);
}

.habit-reminders-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
}

.habit-bulk-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 84%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-secondary) 82%, var(--surface-primary));
}

.habit-bulk-toolbar__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.habit-bulk-toolbar__title {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--text-primary);
}

.habit-bulk-toolbar__hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.habit-bulk-toolbar__actions,
.habit-reminders-group__actions,
.habit-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.habit-reminders-group {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 86%, transparent);
  border-left: 3px solid var(--cat-color, var(--neutral-400));
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-primary);
}

html[data-theme="dark"] .habit-reminders-group,
body.dark-theme .habit-reminders-group {
  border-color: color-mix(in srgb, var(--border-subtle) 74%, transparent);
}

.habit-reminders-group__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px 12px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--cat-color, var(--border-subtle)) 14%, var(--border-subtle));
  background: color-mix(in srgb, var(--cat-color, var(--surface-secondary)) 8%, var(--surface-secondary));
}

.habit-reminders-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.habit-reminders-group__title {
  line-height: 1.2;
  min-width: 0;
}

.habit-reminders-group__actions {
  margin-left: auto;
}

.habit-reminders-group__rows {
  display: flex;
  flex-direction: column;
}

.habit-reminder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(92px, 13vw, 106px) minmax(196px, 0.78fr);
  column-gap: 16px;
  row-gap: 10px;
  padding: 14px 16px;
  align-items: center;
}

.habit-reminder-row + .habit-reminder-row {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.habit-reminder-row__identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.habit-reminder-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 1.35rem;
  font-size: 1.18rem;
  line-height: 1;
  margin-top: 2px;
  flex: 0 0 auto;
}

.habit-reminder-row__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.habit-reminder-row__title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.habit-reminder-row__name {
  font-weight: 700;
  font-size: 0.96rem;
}

.habit-reminder-row__dirty {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #f59e0b 24%, var(--border-default));
  background: color-mix(in srgb, #f59e0b 9%, var(--surface-secondary));
  color: color-mix(in srgb, #b45309 72%, var(--text-secondary));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

html[data-theme="dark"] .habit-reminder-row__dirty,
body.dark-theme .habit-reminder-row__dirty {
  border-color: color-mix(in srgb, #f59e0b 30%, rgba(255, 255, 255, 0.14));
  background: color-mix(in srgb, #f59e0b 11%, rgba(255, 255, 255, 0.03));
  color: color-mix(in srgb, #fbbf24 78%, #e2e8f0);
}

.habit-reminder-row__frequency {
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(71, 85, 105, 0.92);
}

html[data-theme="dark"] .habit-reminder-row__frequency,
body.dark-theme .habit-reminder-row__frequency {
  color: rgba(203, 213, 225, 0.82);
}

.habit-reminder-row__toggle-slot {
  grid-column: 2;
  justify-self: start;
  align-self: center;
  width: 100%;
}

.habit-reminder-row__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}

.habit-reminder-row__toggle .habit-reminder-switch__label {
  min-width: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-tertiary);
  text-align: left;
}

.habit-reminder-row__unsupported {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 76%, transparent);
  color: var(--text-tertiary);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.2;
}

.habit-reminder-row__schedule {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  grid-column: 3;
  justify-self: stretch;
  align-self: center;
  min-width: 0;
}

.habit-reminder-row__schedule.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.habit-reminder-row__time {
  width: 104px;
  min-width: 0;
  margin: 0;
}

.habit-reminder-row__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 174px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 84%, transparent);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  color: var(--text-secondary);
}

.habit-reminder-row.is-enabled .habit-reminder-row__status {
  border-color: color-mix(in srgb, #10b981 18%, var(--border-default));
  background: color-mix(in srgb, #10b981 9%, var(--surface-secondary));
  color: color-mix(in srgb, #047857 76%, var(--text-secondary));
}

.habit-reminder-row.is-unscheduled .habit-reminder-row__status {
  background: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  color: rgba(71, 85, 105, 0.88);
}

.habit-reminders-empty {
  padding: 28px 16px;
  border-radius: 18px;
  background: rgba(148, 163, 184, 0.08);
  text-align: center;
  color: rgba(71, 85, 105, 0.9);
}

.habit-bulk-pause-modal {
  max-height: min(92vh, 860px);
}

.habit-bulk-pause-modal .ks-modal__body {
  min-height: 0;
  max-height: calc(min(92vh, 860px) - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.habit-bulk-stepper {
  display: inline-grid;
  grid-template-columns: auto 42px auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.habit-bulk-stepper__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--surface-secondary);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 750;
}

.habit-bulk-stepper__item.is-active {
  border-color: color-mix(in srgb, var(--accent-500) 42%, var(--border-default));
  background: color-mix(in srgb, var(--accent-bg) 74%, var(--surface-primary));
  color: var(--text-primary);
}

.habit-bulk-stepper__line {
  height: 1px;
  background: var(--border-subtle);
}

.habit-bulk-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.habit-bulk-panel[hidden] {
  display: none !important;
}

.habit-bulk-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.habit-bulk-panel__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.habit-bulk-panel__header h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.98rem;
}

.habit-bulk-panel__hint {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.35;
}

.habit-bulk-list {
  display: grid;
  gap: 14px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.habit-bulk-category-count {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 750;
  color: var(--text-tertiary);
}

.habit-reminders-group__header .habit-bulk-category-count + .habit-reminders-group__actions {
  margin-left: 0;
}

.habit-bulk-category-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--border-default)) 20%, var(--border-default));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.habit-bulk-category-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.habit-bulk-group.is-collapsed .habit-bulk-category-toggle svg {
  transform: rotate(-90deg);
}

.habit-bulk-category-toggle:hover,
.habit-bulk-category-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 38%, var(--border-default));
  background: color-mix(in srgb, var(--cat-color, var(--surface-secondary)) 8%, var(--surface-primary));
  outline: none;
}

.habit-bulk-category-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 80%, transparent);
  color: var(--text-tertiary);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1;
}

.habit-bulk-category-state[data-bulk-pause-category-state="all"] {
  border-color: color-mix(in srgb, var(--cat-color, var(--success)) 34%, var(--border-default));
  background: color-mix(in srgb, var(--cat-color, var(--success)) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--cat-color, var(--success)) 68%, var(--text-primary));
}

.habit-bulk-category-state[data-bulk-pause-category-state="partial"] {
  border-color: color-mix(in srgb, var(--warning) 32%, var(--border-default));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 68%, var(--text-primary));
}

.habit-bulk-group__rows {
  background: color-mix(in srgb, var(--surface-primary) 92%, var(--surface-secondary));
}

.habit-bulk-group__rows[hidden] {
  display: none;
}

.habit-bulk-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.habit-bulk-row + .habit-bulk-row {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.habit-bulk-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.habit-bulk-row__check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
  background: var(--surface-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.habit-bulk-row.is-selected {
  background: color-mix(in srgb, var(--cat-color, var(--accent-500)) 7%, transparent);
}

.habit-bulk-row.is-selected .habit-bulk-row__check {
  border-color: color-mix(in srgb, var(--cat-color, var(--accent-500)) 68%, var(--accent-500));
  background: color-mix(in srgb, var(--cat-color, var(--accent-500)) 76%, var(--accent-500));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, var(--accent-500)) 16%, transparent);
}

.habit-bulk-row.is-selected .habit-bulk-row__check::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  margin: 3px auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.habit-bulk-row__identity {
  display: contents;
}

.habit-bulk-row__icon {
  font-size: 1.12rem;
  line-height: 1;
}

.habit-bulk-row__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.habit-bulk-row__copy strong {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.2;
}

.habit-bulk-row__copy span {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.25;
}

@media (max-width: 991px) {
  .habit-modal__header {
    flex-wrap: nowrap;
    align-items: center;
  }

  .habit-reminders-permission {
    grid-template-columns: 1fr;
  }

  .habit-modal__header-actions {
    width: auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .habit-bulk-flow {
    grid-template-columns: 1fr;
  }

  .habit-bulk-list {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .habits-reminders-btn {
    margin-left: 0;
    min-height: 32px;
    padding: 0 8px;
  }

  .habit-reminders-modal .ks-modal__body {
    padding: 14px;
  }

  .habit-bulk-pause-modal {
    max-height: calc(100svh - 18px);
  }

  .habit-bulk-pause-modal .ks-modal__body {
    max-height: calc(100svh - 170px);
  }

  .habit-bulk-toolbar,
  .habit-bulk-panel__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .habit-bulk-toolbar__actions,
  .habit-reminders-group__actions,
  .habit-bulk-actions {
    justify-content: flex-end;
  }

  .habit-reminders-group__header {
    flex-wrap: wrap;
  }

  .habit-reminders-modal__header-note {
    max-width: none;
    margin-top: 2px;
  }

  .habit-reminder-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity toggle"
      "schedule schedule";
    padding: 12px;
    row-gap: 10px;
  }

  .habit-reminder-row__identity {
    grid-area: identity;
    gap: 10px;
  }

  .habit-reminder-popover {
    width: min(360px, calc(100vw - 12px));
    padding: 12px;
  }

  .habit-reminder-popover__time-row {
    gap: 6px;
  }

  .habit-reminder-row__toggle .habit-reminder-switch__label {
    display: inline;
  }

  .habit-reminder-row__toggle-slot {
    grid-area: toggle;
    width: auto;
    justify-self: end;
    align-self: start;
  }

  .habit-reminder-row__toggle {
    grid-area: toggle;
    justify-self: end;
    align-self: start;
    width: auto;
  }

  .habit-reminder-row__schedule {
    grid-area: schedule;
    justify-self: stretch;
    justify-content: flex-end;
    gap: 8px;
  }

  .habit-reminder-row__time {
    width: 96px;
  }

  .habit-reminder-row__status {
    max-width: 124px;
    font-size: 0.74rem;
  }

  .habit-reminder-popover__header {
    align-items: center;
  }

  .habit-reminder-popover__heading {
    gap: 10px;
  }

  .habit-reminder-popover__time-input {
    width: 136px;
  }

  .habit-reminder-status-badge {
    max-width: 140px;
    font-size: 0.76rem;
  }
}

@media (max-width: 380px) {
  .habit-bulk-toolbar,
  .habit-bulk-panel__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-bulk-toolbar__actions,
  .habit-reminders-group__actions,
  .habit-bulk-actions {
    justify-content: flex-start;
  }
}

/* =============================================
   MISSION REFACTOR FINAL
   Shared card grammar across profile, missions, calendar, stats.
   ============================================= */

.mission-card {
  gap: 0;
  min-height: 252px;
  padding: 22px 24px;
}

.mission-card--history {
  min-height: 244px;
}

.mission-card--calendar,
.mission-card--stats-readonly {
  min-height: 252px;
}

.mission-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.25em);
  word-break: break-word;
}

.mission-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.mission-card-header-main {
  min-width: 0;
}

.mission-card-header-status {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 28px;
}

.mission-card-status-placeholder {
  display: block;
  width: 1px;
  min-height: 28px;
}

.mission-card-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
}

.mission-card-status-badge--active {
  background: color-mix(in srgb, var(--accent-500) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--accent-500) 74%, var(--text-primary));
  border-color: color-mix(in srgb, var(--accent-500) 26%, var(--border-default));
}

.mission-card-status-badge--completed {
  background: color-mix(in srgb, var(--success) 11%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 78%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 26%, var(--border-default));
}

.mission-card-status-badge--failed {
  background: color-mix(in srgb, var(--danger) 11%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border-default));
}

.mission-card-status-badge--archived {
  background: color-mix(in srgb, var(--surface-primary) 90%, transparent);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--border-default) 78%, transparent);
}

.mission-card-habit-slot {
  display: flex;
  align-items: flex-start;
  min-height: 34px;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.mission-card-slot-placeholder--habit {
  display: block;
  min-height: 32px;
  min-width: 132px;
  visibility: hidden;
}

.mission-card-meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  min-height: 0;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.mission-card-meta-row--history {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.mission-card-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
}

.mission-card--refined-active {
  min-height: 236px;
  padding: 16px 18px 14px;
}

.mission-card--refined-active .mission-card-title {
  font-size: calc(var(--text-base) * 1.08);
  min-height: calc(2 * 1.18em);
}

.mission-card--refined-active .mission-card-habit-slot {
  min-height: 30px;
  margin-bottom: 8px;
}

.mission-card--refined-active .mission-card-meta-row {
  gap: 8px;
  min-height: 0;
  margin-bottom: 8px;
}

.mission-card--refined-active .mission-card-meta-item {
  min-height: 0;
  padding: 10px 11px;
}

.mission-card--refined-active .mission-card-footer {
  gap: 8px;
  min-height: 0;
  padding-top: 8px;
}

.mission-card--refined-active.has-cover .mission-card-meta-item--deadline-critical {
  background: rgba(127, 29, 29, 0.2);
  border-color: rgba(254, 202, 202, 0.18);
}

.mission-card--refined-active.has-cover .mission-card-meta-item--deadline-warning {
  background: rgba(133, 77, 14, 0.2);
  border-color: rgba(253, 230, 138, 0.17);
}

.mission-card--refined-active.has-cover .mission-card-meta-item--deadline-info {
  background: rgba(30, 64, 175, 0.2);
  border-color: rgba(191, 219, 254, 0.17);
}

.mission-card--refined-active.has-cover .mission-card-meta-item--deadline-neutral,
.mission-card--refined-active.has-cover .mission-card-meta-item--deadline-none {
  background: rgba(15, 23, 42, 0.28);
  border-color: rgba(248, 250, 252, 0.14);
}

.mission-card--refined-active.has-cover .mission-card-meta-item--deadline-expired {
  background: rgba(127, 29, 29, 0.22);
  border-color: rgba(254, 202, 202, 0.18);
}

.mission-card--refined-active .mission-card-header {
  grid-template-columns: minmax(0, 1fr) fit-content(22ch);
  gap: 8px;
  margin-bottom: 8px;
}

.mission-card--refined-active .mission-card-header-status {
  width: auto;
  min-width: 0;
  max-width: 22ch;
  justify-self: end;
}

.mission-card--refined-active .mission-card-header-status .mission-habit-badge {
  width: fit-content;
  max-width: min(44vw, 22ch);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.12;
  justify-content: flex-start;
  text-align: left;
}

.mission-card-meta-row--refined {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.94fr);
}

.mission-card-meta-item--timeline {
  justify-content: space-between;
  gap: 6px;
}

.mission-card-meta-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.mission-card-meta-split .mission-card-meta-value {
  text-align: right;
}

.mission-card-meta-item--deadline {
  justify-content: center;
  backdrop-filter: blur(9px) saturate(1.02);
}

.mission-card-meta-item--deadline-critical {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 78%, var(--text-primary));
}

.mission-card-meta-item--deadline-warning {
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 21%, var(--border-default));
  color: color-mix(in srgb, var(--warning) 78%, var(--text-primary));
}

.mission-card-meta-item--deadline-info {
  background: color-mix(in srgb, var(--accent-500) 7%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--accent-500) 20%, var(--border-default));
  color: color-mix(in srgb, var(--accent-500) 80%, var(--text-primary));
}

.mission-card-meta-item--deadline-neutral,
.mission-card-meta-item--deadline-none {
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
  border-color: color-mix(in srgb, var(--border-default) 74%, transparent);
  color: var(--text-secondary);
}

.mission-card-meta-item--deadline-expired {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
}

.mission-card-meta-item--deadline .mission-card-meta-label,
.mission-card-meta-item--deadline .mission-card-meta-value {
  color: inherit;
}

.mission-card-meta-item--placeholder {
  visibility: hidden;
}

.mission-card-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mission-card-meta-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.28;
  color: var(--text-primary);
}

.mission-card-meta-subvalue {
  display: block;
  margin-top: 3px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-secondary);
}

.mission-card-deadline-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 34px;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

.mission-card-deadline-row .mission-deadline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.08;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.mission-card-deadline-row .mission-deadline-badge.mission-deadline-badge--critical {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 78%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border-default));
}

.mission-card-deadline-row .mission-deadline-badge.mission-deadline-badge--warning {
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 74%, var(--text-primary));
  border-color: color-mix(in srgb, var(--warning) 26%, var(--border-default));
}

.mission-card-deadline-row .mission-deadline-badge.mission-deadline-badge--info {
  background: color-mix(in srgb, var(--accent-500) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--accent-500) 78%, var(--text-primary));
  border-color: color-mix(in srgb, var(--accent-500) 24%, var(--border-default));
}

.mission-card-deadline-row .mission-deadline-badge.mission-deadline-badge--neutral,
.mission-card-deadline-row .mission-deadline-badge.mission-deadline-badge--none {
  background: color-mix(in srgb, var(--surface-primary) 92%, transparent);
  color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--border-default) 82%, transparent);
}

.mission-card-deadline-row .mission-deadline-badge.mission-deadline-badge--expired {
  background: color-mix(in srgb, var(--danger) 11%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border-default));
}

.mission-card-footer {
  display: grid;
  grid-template-rows: minmax(24px, auto) auto;
  gap: var(--space-2);
  margin-top: auto;
  min-height: 78px;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  flex-shrink: 0;
}

.mission-card-footer--readonly {
  min-height: 72px;
}

.mission-card-utility-slot {
  min-height: 24px;
  display: flex;
  align-items: center;
}

.mission-card-utility-slot--readonly {
  min-height: 0;
}

.mission-card-slot-placeholder--utility {
  display: block;
  width: 100%;
  min-height: 24px;
  visibility: hidden;
}

.mission-card-footer-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: 100%;
}

.mission-card-footer-main--readonly {
  display: block;
}

.mission-card-footer--refined {
  display: block;
  grid-template-rows: auto;
  gap: 0;
  width: 100%;
}

.mission-card-footer-main--refined {
  container-type: inline-size;
  container-name: mission-footer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
  width: 100%;
}

.mission-card-footer-main--manual-progress {
  grid-template-columns: minmax(0, 3fr) minmax(88px, 1fr);
  align-items: stretch;
}

.mission-card-footer-main--progress {
  display: block;
}

.mission-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

.mission-card-actions .btn,
.mission-footer-right .btn {
  min-height: 34px;
}

.mission-footer-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.mission-footer-right--cluster {
  gap: var(--space-2);
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-self: center;
}

.mission-card-actions--primary {
  min-width: 0;
  justify-content: flex-start;
}

.mission-card-footer-primary {
  min-width: 0;
  flex: 1 1 auto;
  justify-self: start;
}

.mission-card-footer-secondary {
  margin-left: auto;
  flex: 0 1 auto;
  justify-self: end;
}

.mission-card-footer-main--manual-progress .mission-card-footer-primary,
.mission-card-footer-main--manual-progress .mission-card-footer-secondary {
  align-self: stretch;
}

.mission-card-footer-primary--progress-actions {
  width: 100%;
}

.mission-card-footer-secondary--manual-progress {
  width: auto;
  min-width: 46px;
  margin-left: 0;
}

.mission-card-footer-secondary--manual-target-reached {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  width: auto;
  min-width: 0;
  margin-left: auto;
}

.mission-card-footer-secondary--manual-progress .mission-card-actions-trigger {
  width: 44px;
  min-width: 44px;
  padding-inline: 0;
  justify-content: center;
}

.mission-card-footer-secondary--manual-target-reached .mission-progress-action,
.mission-card-footer-secondary--manual-target-reached .mission-card-actions-trigger {
  min-width: 44px;
  width: 44px;
  padding-inline: 0;
  justify-content: center;
}

.mission-card--refined-active .mission-card-actions {
  width: auto;
  margin-left: 0;
}

.mission-card--refined-active .mission-footer-right {
  width: auto;
  margin-left: auto;
}

.mission-card--refined-active .mission-card-actions .btn,
.mission-card--refined-active .mission-footer-right .btn {
  flex: 0 1 auto;
}

.mission-complete-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  text-align: left;
  overflow: hidden;
}

.mission-complete-action__full {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.mission-complete-action__label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.mission-complete-action__compact {
  display: none;
  white-space: nowrap;
}

.mission-target-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border-default));
  background: color-mix(in srgb, var(--success) 9%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 78%, var(--text-primary));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-target-status--progress {
  border-color: color-mix(in srgb, var(--accent-500) 26%, var(--border-default));
  background: color-mix(in srgb, var(--accent-500) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--accent-700, var(--accent-500)) 72%, var(--text-primary));
}

.mission-target-status--mode {
  border-color: color-mix(in srgb, var(--border-default) 74%, transparent);
  background: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  color: var(--text-secondary);
}

.mission-card-progress-shell {
  display: grid;
  gap: 8px;
  width: 100%;
}

.mission-card-footer-main--refined > * {
  min-width: 0;
}

.mission-card-footer-main--refined .mission-card-footer-primary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
}

.mission-card-footer-main--refined .mission-card-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.mission-card-footer-main--refined .mission-target-status--inline {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

@container mission-footer (max-width: 420px) {
  .mission-complete-action.has-responsive-label {
    justify-content: center;
    text-align: center;
  }

  .mission-complete-action.has-responsive-label .mission-complete-action__full {
    display: none;
  }

  .mission-complete-action.has-responsive-label .mission-complete-action__compact {
    display: inline-flex;
    align-items: center;
  }
}

@container (max-width: 420px) {
  .mission-complete-action.has-responsive-label {
    justify-content: center;
    text-align: center;
  }

  .mission-complete-action.has-responsive-label .mission-complete-action__full {
    display: none;
  }

  .mission-complete-action.has-responsive-label .mission-complete-action__compact {
    display: inline-flex;
    align-items: center;
  }
}

@container mission-footer (max-width: 320px) {
  .mission-card-footer-main--refined .mission-footer-right {
    gap: 6px;
  }

  .mission-complete-action.has-responsive-label {
    padding-inline: 10px;
  }
}

.mission-card-footer-main--refined .mission-footer-right {
  margin-left: auto;
  flex: 0 0 auto;
}

.mission-card-footer-main--refined .mission-footer-right .btn {
  flex: 0 0 auto;
}

.mission-card-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mission-card-progress-summary {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.3;
}

.mission-card-progress-value {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-primary);
  text-align: right;
}

.mission-card-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 82%, rgba(15, 23, 42, 0.12));
  border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent);
}

.mission-card-progress-track > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-500) 72%, #ffffff 28%), color-mix(in srgb, var(--success) 72%, #ffffff 28%));
}

.mission-card-progress-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-tertiary);
}

.mission-card-progress-secondary span {
  min-width: 0;
}

.mission-card .btn-history-reactivate {
  background: color-mix(in srgb, var(--success) 7%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border-default));
  box-shadow: none;
}

.mission-card .btn-history-reactivate:hover,
.mission-card .btn-history-reactivate:focus-visible {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 42%, var(--border-default));
}

.mission-card.has-cover .mission-card-meta-item,
.mission-card.has-cover .mission-card-status-badge,
.mission-card.has-cover .mission-card-deadline-row .mission-deadline-badge,
.mission-card.has-cover .mission-target-status,
.mission-card.has-cover .mission-card-progress-track {
  backdrop-filter: blur(10px) saturate(1.02);
}

.mission-card.has-cover .mission-card-meta-item {
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(248, 250, 252, 0.16);
}

.mission-card.has-cover .mission-card-meta-label,
.mission-card.has-cover .mission-card-meta-value,
.mission-card.has-cover .mission-card-meta-subvalue,
.mission-card.has-cover .mission-card-progress-summary,
.mission-card.has-cover .mission-card-progress-value {
  color: #F8FAFC;
  text-shadow: 0 1px 10px rgba(15, 23, 42, 0.24);
}

.mission-card.has-cover .mission-card-progress-track {
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(248, 250, 252, 0.18);
}

.mission-card.has-cover .mission-card-meta-item--deadline-critical {
  background: rgba(127, 29, 29, 0.24);
  border-color: rgba(254, 202, 202, 0.22);
}

.mission-card.has-cover .mission-card-meta-item--deadline-warning {
  background: rgba(133, 77, 14, 0.24);
  border-color: rgba(253, 230, 138, 0.2);
}

.mission-card.has-cover .mission-card-meta-item--deadline-info {
  background: rgba(30, 64, 175, 0.24);
  border-color: rgba(191, 219, 254, 0.2);
}

.mission-card.has-cover .mission-card-meta-item--deadline-neutral,
.mission-card.has-cover .mission-card-meta-item--deadline-none {
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(248, 250, 252, 0.16);
}

.mission-card.has-cover .mission-card-meta-item--deadline-expired {
  background: rgba(127, 29, 29, 0.28);
  border-color: rgba(254, 202, 202, 0.24);
}

.mission-card.has-cover .mission-complete-action .mission-target-status--inline {
  background: transparent;
  border: 0;
  color: inherit;
}

.mission-card--history.has-cover::after {
  background:
    linear-gradient(180deg, rgba(7, 12, 21, 0.34) 0%, rgba(7, 12, 21, 0.08) 18%, rgba(7, 12, 21, 0.18) 62%, rgba(7, 12, 21, 0.48) 100%),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.14) 0%, transparent 42%);
}

.missions-card-grid {
  display: grid;
  gap: clamp(var(--space-3), 1.2vw, var(--space-4));
  align-items: start;
}

.missions-card-grid > .mission-card {
  height: auto;
  align-self: start;
}

.missions-card-grid--dual-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.missions-page-toolbar {
  padding: clamp(var(--space-3), 1vw + var(--space-2), var(--space-4));
}

.missions-page-toolbar__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  align-items: center;
  gap: var(--space-4);
}

.missions-page-toolbar__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 208px);
  gap: var(--space-3);
  align-items: center;
}

.missions-page-state-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-secondary) 96%, transparent) 0%,
      color-mix(in srgb, var(--surface-primary) 92%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 30px -34px rgba(15, 23, 42, 0.34);
  min-width: 0;
}

.missions-page-state-toggle--chips {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.missions-page-state-toggle--chips .mission-segment-btn {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: calc(var(--text-sm) * 0.97);
  font-weight: 700;
  white-space: nowrap;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.missions-page-state-toggle--chips .mission-segment-btn::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-accent, var(--warning)) 88%, #ffffff 12%);
  opacity: 0;
  transform: scaleX(0.32);
  transform-origin: center;
  transition: opacity 180ms ease, transform 220ms ease;
}

.missions-page-state-toggle--chips .mission-segment-btn:hover,
.missions-page-state-toggle--chips .mission-segment-btn:focus-visible {
  transform: translateY(-1px);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--chip-accent, var(--warning)) 22%, var(--border-default));
  background: color-mix(in srgb, var(--chip-accent, var(--warning)) 8%, transparent);
}

.missions-page-state-toggle--chips .mission-segment-btn.is-active {
  background: color-mix(in srgb, var(--chip-accent, var(--warning)) 16%, rgba(15, 23, 42, 0.84));
  border-color: color-mix(in srgb, var(--chip-accent, var(--warning)) 36%, var(--border-default));
  color: color-mix(in srgb, var(--chip-accent, var(--warning)) 70%, #ffffff 30%);
  box-shadow: 0 12px 24px -20px color-mix(in srgb, var(--chip-accent, var(--warning)) 28%, transparent);
}

.missions-page-state-toggle--chips .mission-segment-btn.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.missions-page-search .form-input,
.missions-page-sort .form-input {
  min-height: 46px;
  border-radius: var(--radius-lg);
}

body.app-page[data-page="calendar"] #calendar-missions-section.missions-card,
body.app-page[data-page="stats"] #stats-v2-missions,
body.app-page[data-page="missions"] #missions-page-grid {
  min-height: 0;
}

@media (max-width: 1119px) {
  .missions-card-grid--dual-column,
  body.app-page[data-page="stats"] .stats-v2-missions-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-page[data-page="stats"] .stats-v2-user-summary-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-period-layout,
  body.app-page[data-page="stats"] .stats-v5-cat-habits-inner {
    grid-template-columns: 1fr;
  }

  body.app-page[data-page="stats"] .stats-v2-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-page[data-page="stats"] .stats-v2-habits-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.app-page[data-page="stats"] .stats-v2-month-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .mission-card-meta-row--history {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-card-meta-row--history .mission-card-meta-item:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .mission-card {
    min-height: 252px;
    padding: 18px;
  }

  .mission-card-meta-row,
  .mission-card-meta-row--history {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
  }

  .mission-card-footer {
    min-height: 0;
  }

  .mission-card-footer-main {
    flex-direction: column;
    align-items: stretch;
  }

  .mission-card-footer-main--refined {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .mission-card-actions,
  .mission-footer-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .mission-card-footer-main--refined {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .mission-card-footer-secondary,
  .mission-footer-right--cluster {
    justify-content: flex-end;
  }

  .mission-card-actions .btn,
  .mission-footer-right .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .mission-card-footer-main--refined .mission-complete-action {
    width: auto;
  }

  .mission-card-footer-main--refined .mission-footer-right .btn {
    flex: 0 0 auto;
  }

  .mission-card-footer-main--refined .mission-card-actions,
  .mission-card-footer-main--refined .mission-footer-right {
    width: auto;
  }

  .mission-card-footer-main--refined .mission-card-actions {
    margin-left: 0;
    justify-content: flex-start;
  }

  .mission-card-footer-main--refined .mission-footer-right {
    margin-left: auto;
    justify-content: flex-end;
  }

  .mission-card-footer-main--refined .mission-card-actions .btn {
    flex: 0 1 auto;
  }

  .mission-card--refined-active .mission-card-header {
    grid-template-columns: minmax(0, 1fr) fit-content(min(42vw, 20ch));
    gap: 8px;
  }

  .mission-card--refined-active .mission-card-header-status {
    justify-self: end;
    align-self: start;
    max-width: min(42vw, 20ch);
  }

  .mission-card--refined-active .mission-card-header-status .mission-habit-badge {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mission-card-meta-row--refined {
    grid-template-columns: 1fr;
  }

  .mission-card-meta-split {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .mission-card-meta-split .mission-card-meta-value {
    text-align: left;
  }

  .missions-page-toolbar__bar {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .missions-page-toolbar__controls {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 40%);
    gap: var(--space-2);
  }

  .missions-card-grid--dual-column {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 479px) {
  .mission-card-meta-row,
  .mission-card-meta-row--history {
    grid-template-columns: 1fr;
  }

  .mission-card-meta-row--refined {
    grid-template-columns: 1fr;
  }

  .mission-card-meta-item {
    min-height: 0;
  }

  .mission-card-deadline-row {
    justify-content: flex-start;
  }

  .missions-page-toolbar__controls {
    grid-template-columns: 1fr;
  }

  .missions-page-state-toggle {
    padding: 6px 6px 8px;
  }
}

/* ============================================
   PROFILE / MISSION HISTORY FINAL REFINEMENTS
   Scoped to profile/history without touching calendar or stats
   ============================================ */

.btn-card-secondary {
  border-color: color-mix(in srgb, var(--border-default) 76%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
  color: var(--text-secondary);
  box-shadow: none;
}

.btn-card-secondary:hover,
.btn-card-secondary:focus-visible {
  border-color: color-mix(in srgb, var(--accent-500) 24%, var(--border-default));
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
  color: var(--text-primary);
}

.btn.btn-card-danger-soft,
.btn-card-danger-soft {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border-default));
  box-shadow: none;
}

.btn.btn-card-danger-soft:hover,
.btn.btn-card-danger-soft:focus-visible,
.btn-card-danger-soft:hover,
.btn-card-danger-soft:focus-visible {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border-default));
}

.btn.btn-card-warn-soft,
.btn-card-warn-soft {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-default));
  box-shadow: none;
}

.btn.btn-card-warn-soft:hover,
.btn.btn-card-warn-soft:focus-visible,
.btn-card-warn-soft:hover,
.btn-card-warn-soft:focus-visible {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
  border-color: color-mix(in srgb, var(--warning) 44%, var(--border-default));
}

body.app-page[data-page="profile"] #active-goal-card .weight-card-header,
body.app-page[data-page="profile"] #missions-card .missions-card-header {
  min-height: 60px;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

body.app-page[data-page="profile"] #active-goal-card .app-card-title,
body.app-page[data-page="profile"] #missions-card .app-card-title {
  font-size: calc(var(--text-lg) * 1.02);
  line-height: 1.05;
  font-weight: var(--font-semibold);
  letter-spacing: normal;
}

body.app-page[data-page="profile"] #active-goal-card .weight-card-title-row,
body.app-page[data-page="profile"] #missions-card .missions-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  min-width: 0;
}

body.app-page[data-page="profile"] #missions-card .missions-card-title-row {
  justify-content: flex-start;
}

body.app-page[data-page="profile"] #missions-card .missions-card-title-main {
  flex: 0 1 auto;
}

.mission-card--history {
  padding: 18px 18px 16px;
}

.mission-card--history .mission-card-header {
  grid-template-columns: minmax(0, 1fr) fit-content(24ch);
  gap: 12px;
  margin-bottom: 10px;
}

.mission-card--history .mission-card-title {
  font-size: calc(var(--text-base) * 1.08);
  min-height: calc(2 * 1.18em);
}

.mission-card--history .mission-card-header-badge {
  width: auto;
  min-width: 0;
  max-width: 24ch;
  justify-self: end;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.mission-card--history .mission-card-header-badge .mission-habit-badge {
  width: fit-content;
  max-width: 24ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
  text-align: left;
}

.mission-card--history .mission-card-habit-slot {
  display: none;
}

.mission-card--history .mission-card-meta-row--history {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.24fr) minmax(0, 0.86fr);
  gap: 10px;
  min-height: 0;
  margin-bottom: 10px;
}

.mission-card--history .mission-card-meta-item {
  min-height: 0;
  padding: 10px 11px;
}

.mission-card-meta-item--history-main {
  justify-content: space-between;
  gap: 8px;
}

.mission-card-meta-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mission-card-meta-stack--secondary {
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--border-default) 62%, transparent);
}

.mission-card-meta-item--history-main .mission-card-meta-value,
.mission-card-meta-item--history-deadline .mission-card-meta-value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-card-footer--history {
  display: block;
  grid-template-rows: auto;
  gap: 0;
  width: 100%;
}

.mission-card--history .mission-card-footer {
  min-height: 0;
  padding-top: 10px;
}

.mission-card-footer-main--history {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px 12px;
  width: 100%;
  flex-wrap: wrap;
}

.mission-card-footer-primary--status {
  min-width: 0;
  padding-bottom: 2px;
}

.mission-card-footer-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.28;
}

.mission-card-footer-status--completed {
  color: color-mix(in srgb, var(--success) 76%, var(--text-primary));
}

.mission-card-footer-status--archived {
  color: var(--text-secondary);
}

.mission-card-footer-status--failed {
  color: color-mix(in srgb, var(--danger) 76%, var(--text-primary));
}

.mission-card--history .mission-footer-right .btn.btn-card-danger-soft,
.mission-card--history .mission-footer-right .btn-card-danger-soft,
.goal-history-actions .btn.btn-card-danger-soft,
.goal-history-actions .btn-card-danger-soft {
  background-image: none;
  background-color: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
}

.mission-card--history .mission-footer-right .btn.btn-card-danger-soft:hover,
.mission-card--history .mission-footer-right .btn.btn-card-danger-soft:focus-visible,
.mission-card--history .mission-footer-right .btn-card-danger-soft:hover,
.mission-card--history .mission-footer-right .btn-card-danger-soft:focus-visible,
.goal-history-actions .btn.btn-card-danger-soft:hover,
.goal-history-actions .btn.btn-card-danger-soft:focus-visible,
.goal-history-actions .btn-card-danger-soft:hover,
.goal-history-actions .btn-card-danger-soft:focus-visible {
  background-image: none;
  background-color: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
}

.mission-card--history .mission-footer-right .btn.btn-card-warn-soft,
.mission-card--history .mission-footer-right .btn-card-warn-soft,
.goal-history-actions .btn.btn-card-warn-soft,
.goal-history-actions .btn-card-warn-soft {
  background-image: none;
  background-color: color-mix(in srgb, var(--warning) 8%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border-default));
  color: color-mix(in srgb, var(--warning) 72%, var(--text-primary));
}

.mission-card--history .mission-footer-right .btn.btn-card-warn-soft:hover,
.mission-card--history .mission-footer-right .btn.btn-card-warn-soft:focus-visible,
.mission-card--history .mission-footer-right .btn-card-warn-soft:hover,
.mission-card--history .mission-footer-right .btn-card-warn-soft:focus-visible,
.goal-history-actions .btn.btn-card-warn-soft:hover,
.goal-history-actions .btn.btn-card-warn-soft:focus-visible,
.goal-history-actions .btn-card-warn-soft:hover,
.goal-history-actions .btn-card-warn-soft:focus-visible {
  background-image: none;
  background-color: color-mix(in srgb, var(--warning) 14%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 44%, var(--border-default));
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
}

.goal-history-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin-top: var(--space-1);
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-default) 62%, transparent);
}

.goal-history-actions {
  margin-top: 0;
  margin-left: auto;
}

.goal-history-result {
  display: inline-flex;
  align-items: center;
  align-self: auto;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: 0;
}

.goal-history-result.completed {
  color: color-mix(in srgb, var(--success) 74%, var(--text-primary));
  background: transparent;
}

.goal-history-result.abandoned {
  color: color-mix(in srgb, var(--warning) 54%, var(--text-primary));
  background: transparent;
}

.goal-history-result.failed {
  color: color-mix(in srgb, var(--danger) 74%, var(--text-primary));
}

.goal-history-actions .btn-history-reactivate {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-default));
}

.goal-history-actions .btn-history-reactivate:hover,
.goal-history-actions .btn-history-reactivate:focus-visible {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-primary));
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
  border-color: color-mix(in srgb, var(--warning) 44%, var(--border-default));
}

.goal-history-actions .btn-danger {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border-default));
  box-shadow: none;
}

.goal-history-actions .btn-danger:hover,
.goal-history-actions .btn-danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border-default));
}

@media (max-width: 767px) {
  body.app-page[data-page="profile"] .profile-col-missions {
    margin-top: var(--space-6);
  }

  body.app-page[data-page="profile"] .profile-col-missions .section-divider {
    margin-top: 0;
  }

  body.app-page[data-page="profile"] #missions-card .app-card-header.missions-card-header {
    flex-direction: row;
    align-items: center;
  }

  body.app-page[data-page="profile"] #missions-card .missions-card-copy,
  body.app-page[data-page="profile"] #missions-card .missions-card-title-row,
  body.app-page[data-page="profile"] #missions-card .missions-card-actions {
    width: auto;
  }

  body.app-page[data-page="profile"] #missions-card .missions-card-title-row {
    flex-wrap: nowrap;
    align-items: center;
  }

  body.app-page[data-page="profile"] #missions-card .missions-card-title-main {
    min-width: 0;
    white-space: nowrap;
  }

  body.app-page[data-page="profile"] .missions-card-actions {
    justify-content: flex-end;
  }

  body.app-page[data-page="profile"] #new-mission-btn {
    align-self: auto;
  }

  body.app-page[data-page="profile"] .mission-card--profile.mission-card--refined-active .mission-card-header,
  body.app-page[data-page="profile"] .mission-card--collection.mission-card--refined-active .mission-card-header,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-header {
    grid-template-columns: minmax(0, 1fr) fit-content(22ch);
    gap: 8px;
  }

  body.app-page[data-page="profile"] .mission-card--profile.mission-card--refined-active .mission-card-header-status,
  body.app-page[data-page="profile"] .mission-card--collection.mission-card--refined-active .mission-card-header-status,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-header-badge {
    justify-self: end;
    max-width: 22ch;
  }

  body.app-page[data-page="profile"] .mission-card--profile.mission-card--refined-active .mission-card-header-status .mission-habit-badge,
  body.app-page[data-page="profile"] .mission-card--collection.mission-card--refined-active .mission-card-header-status .mission-habit-badge,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-header-badge .mission-habit-badge {
    max-width: min(44vw, 22ch);
    white-space: nowrap;
  }

  body.app-page[data-page="profile"] .mission-card-meta-row--refined {
    grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.94fr);
  }

  body.app-page[data-page="profile"] .mission-card--history .mission-card-meta-row--history {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.18fr) minmax(0, 0.88fr);
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-meta-split,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-meta-split {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-meta-split .mission-card-meta-value,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-meta-split .mission-card-meta-value {
    text-align: right;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-main--refined,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-main--refined,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-main--history {
    flex-direction: row;
    align-items: flex-end;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-primary,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-primary,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-primary {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-secondary,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-secondary,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-secondary {
    margin-left: auto;
    flex: 0 1 auto;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-actions,
  body.app-page[data-page="profile"] .mission-card--profile .mission-footer-right,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-actions,
  body.app-page[data-page="profile"] .mission-card--collection .mission-footer-right,
  body.app-page[data-page="profile"] .mission-card--history .mission-footer-right {
    width: auto;
    margin-left: auto;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-actions .btn,
  body.app-page[data-page="profile"] .mission-card--profile .mission-footer-right .btn,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-actions .btn,
  body.app-page[data-page="profile"] .mission-card--collection .mission-footer-right .btn,
  body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn {
    flex: 0 1 auto;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-complete-action,
  body.app-page[data-page="profile"] .mission-card--collection .mission-complete-action {
    width: auto;
  }
}

@media (max-width: 479px) {
  body.app-page[data-page="profile"] .mission-card-meta-row--refined {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.92fr);
  }

  body.app-page[data-page="profile"] .mission-card--history .mission-card-meta-row--history {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.12fr) minmax(0, 0.84fr);
  }

  body.app-page[data-page="profile"] .mission-card--history .mission-card-meta-item,
  body.app-page[data-page="profile"] .mission-card--profile .mission-card-meta-item,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-meta-item {
    padding: 9px 10px;
  }

  body.app-page[data-page="profile"] .mission-card-meta-label {
    font-size: 9px;
  }

  body.app-page[data-page="profile"] .mission-card-meta-value,
  body.app-page[data-page="profile"] .mission-card-footer-status {
    font-size: 12px;
  }
}

.mission-detail-cover-header-btn {
  position: absolute !important;
  top: var(--space-2) !important;
  right: var(--space-2) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 3;
  opacity: 1;
}

.mission-detail-footer {
  justify-content: flex-end;
}

.mission-detail-footer #mission-detail-edit-btn {
  margin-right: auto;
  background: color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary));
  border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mission-detail-footer #mission-detail-edit-btn:hover,
.mission-detail-footer #mission-detail-edit-btn:focus-visible {
  background: color-mix(in srgb, var(--surface-secondary) 96%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--accent-500) 30%, var(--border-default));
  box-shadow: 0 8px 18px -18px color-mix(in srgb, var(--accent-500) 30%, transparent);
}

html:not([data-theme="dark"]) body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft,
[data-theme="light"] body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft,
body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft,
body.app-page[data-page="profile"] .goal-history-actions .btn.btn-card-danger-soft {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
}

html:not([data-theme="dark"]) body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft:hover,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft:focus-visible,
[data-theme="light"] body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft:hover,
[data-theme="light"] body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft:focus-visible,
body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft:hover,
body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-danger-soft:focus-visible,
body.app-page[data-page="profile"] .goal-history-actions .btn.btn-card-danger-soft:hover,
body.app-page[data-page="profile"] .goal-history-actions .btn.btn-card-danger-soft:focus-visible {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 80%, var(--text-primary));
}

html:not([data-theme="dark"]) body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft,
[data-theme="light"] body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft,
body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft,
body.app-page[data-page="profile"] .goal-history-actions .btn.btn-card-warn-soft {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border-default));
  color: color-mix(in srgb, var(--warning) 72%, var(--text-primary));
}

html:not([data-theme="dark"]) body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft:hover,
html:not([data-theme="dark"]) body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft:focus-visible,
[data-theme="light"] body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft:hover,
[data-theme="light"] body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft:focus-visible,
body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft:hover,
body.app-page[data-page="profile"] .mission-card--history .mission-footer-right .btn.btn-card-warn-soft:focus-visible,
body.app-page[data-page="profile"] .goal-history-actions .btn.btn-card-warn-soft:hover,
body.app-page[data-page="profile"] .goal-history-actions .btn.btn-card-warn-soft:focus-visible {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--warning) 44%, var(--border-default));
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
}

@media (max-width: 767px) {
  body.app-page[data-page="profile"] .mission-card--profile .mission-card-meta-split,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-meta-split,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-meta-split {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  body.app-page[data-page="profile"] .mission-card--profile .mission-card-meta-split .mission-card-meta-value,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-meta-split .mission-card-meta-value,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-meta-split .mission-card-meta-value {
    text-align: left;
  }

  .mission-card-title {
    display: block;
    min-height: 0;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    line-height: 1.18;
  }

  .mission-card--refined-active .mission-card-header,
  .mission-card--history .mission-card-header {
    grid-template-columns: minmax(0, 1fr) fit-content(min(42vw, 20ch));
    gap: 8px;
  }

  .mission-card--refined-active .mission-card-header-status,
  .mission-card--history .mission-card-header-badge {
    justify-self: end;
    align-self: start;
    max-width: min(42vw, 20ch);
  }

  .mission-card--refined-active .mission-card-header-status .mission-habit-badge,
  .mission-card--history .mission-card-header-badge .mission-habit-badge {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mission-card-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-card-meta-row--refined {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
  }

  .mission-card-meta-row--history {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr) minmax(0, 0.88fr);
  }

  .mission-card-meta-row--history .mission-card-meta-item:last-child {
    grid-column: auto;
  }

  .mission-card--refined-active .mission-card-meta-item,
  .mission-card--history .mission-card-meta-item {
    min-height: 0;
    padding: 9px 10px;
  }

  .mission-card-meta-split {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .mission-card-meta-split .mission-card-meta-value,
  .mission-card-meta-item--deadline .mission-card-meta-value,
  .mission-card--history .mission-card-meta-value {
    text-align: left;
  }

  .mission-card-meta-item--deadline {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .mission-card-meta-label {
    font-size: 9px;
  }

  .mission-card-meta-value,
  .mission-card-footer-status {
    font-size: 12px;
    line-height: 1.24;
  }

  .mission-card-footer-main,
  .mission-card-footer-main--history {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  .mission-card-footer-main--history {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mission-card-footer-primary,
  .mission-card-footer-primary--status {
    min-width: 0;
    flex: 1 1 auto;
  }

  .mission-card-footer-secondary,
  .mission-card-footer-right {
    margin-left: auto;
    flex: 0 0 auto;
    width: auto;
  }

  .mission-card-actions,
  .mission-footer-right,
  .mission-footer-right--cluster {
    width: auto;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .mission-card-footer-secondary .mission-footer-right,
  .mission-card-footer-main--history .mission-footer-right {
    margin-left: auto;
    justify-content: flex-end;
  }

  .mission-card-actions .btn,
  .mission-footer-right .btn {
    flex: 0 1 auto;
    text-align: center;
  }

  .mission-card-footer-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-page[data-page="profile"] #active-missions-list,
  body.app-page[data-page="profile"] #missions-history-list,
  body.app-page[data-page="calendar"] #calendar-active-missions-list,
  body.app-page[data-page="stats"] #stats-v2-missions .missions-card-grid,
  body.app-page[data-page="missions"] #missions-page-grid {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 479px) {
  .mission-card {
    padding: 15px 15px 14px;
  }

  .mission-card-title {
    font-size: calc(var(--text-sm) * 1.04);
  }

  .mission-card-meta-row--refined {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .mission-card-meta-row--history {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.08fr) minmax(0, 0.82fr);
    gap: 7px;
  }

  .mission-card--refined-active .mission-card-meta-item,
  .mission-card--history .mission-card-meta-item {
    padding: 8px 9px;
  }

  .mission-card-footer-main--refined,
  .mission-card-footer-main--history {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  body.app-page[data-page="calendar"] #calendar-missions-section.missions-card.has-scrollable-missions {
    max-height: min(84vh, 760px) !important;
  }

  body.app-page[data-page="calendar"] #calendar-missions-section.missions-card .missions-list.missions-list--scrollable {
    max-height: clamp(440px, 62vh, 540px);
  }

  body.app-page[data-page="calendar"] #calendar-active-missions-list .mission-card--calendar.mission-card--refined-active {
    min-height: 210px;
    padding: 14px 15px 12px;
  }

  body.app-page[data-page="calendar"] #calendar-active-missions-list .mission-card--calendar.mission-card--refined-active .mission-card-header {
    margin-bottom: 7px;
  }

  body.app-page[data-page="calendar"] #calendar-active-missions-list .mission-card--calendar.mission-card--refined-active .mission-card-title {
    font-size: 0.98rem;
    min-height: calc(2 * 1.12em);
  }

  body.app-page[data-page="calendar"] #calendar-active-missions-list .mission-card--calendar.mission-card--refined-active .mission-card-habit-slot {
    min-height: 24px;
    margin-bottom: 7px;
  }

  body.app-page[data-page="calendar"] #calendar-active-missions-list .mission-card--calendar.mission-card--refined-active .mission-card-meta-row {
    gap: 7px;
    margin-bottom: 7px;
  }

  body.app-page[data-page="calendar"] #calendar-active-missions-list .mission-card--calendar.mission-card--refined-active .mission-card-meta-item {
    padding: 7px 8px;
  }

  body.app-page[data-page="calendar"] #calendar-active-missions-list .mission-card--calendar.mission-card--refined-active .mission-card-footer {
    padding-top: 7px;
  }
}

/* Mission footer canonical split: primary action left, all other actions right. */
.mission-card[data-mission-card-click-action] {
  cursor: pointer;
}

.mission-card[data-mission-card-click-action]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-500) 72%, #ffffff 28%);
  outline-offset: 3px;
}

.mission-card .mission-card-footer-main,
.mission-card .mission-card-footer-main--refined,
.mission-card .mission-card-footer-main--history,
body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-main--refined,
body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-main--refined,
body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-main--history {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  min-width: 0;
}

.mission-card .mission-card-footer-main--progress {
  display: block;
}

.mission-card .mission-card-footer-main--secondary-only {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.mission-card .mission-card-footer-main--has-primary {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.mission-card .mission-card-footer-main--has-primary .mission-card-footer-secondary {
  width: auto;
}

.mission-card .mission-card-footer-primary,
.mission-card .mission-card-footer-secondary,
body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-primary,
body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-primary,
body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-primary,
body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-secondary,
body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-secondary,
body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-secondary {
  min-width: 0;
  width: auto;
  margin-left: 0;
}

.mission-card .mission-card-footer-primary {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}

.mission-card .mission-card-footer-primary--progress {
  display: block;
  width: 100%;
}

.mission-card .mission-card-footer-secondary,
body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-secondary,
body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-secondary,
body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-secondary {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: nowrap;
  max-width: 100%;
}

.mission-card .mission-card-footer-main--progress .mission-card-footer-primary,
.mission-card .mission-card-footer-main--progress .mission-card-progress-shell {
  grid-column: 1 / -1;
  width: 100%;
}

.mission-card .mission-footer-right,
.mission-card .mission-card-actions,
body.app-page[data-page="profile"] .mission-card--profile .mission-card-actions,
body.app-page[data-page="profile"] .mission-card--profile .mission-footer-right,
body.app-page[data-page="profile"] .mission-card--collection .mission-card-actions,
body.app-page[data-page="profile"] .mission-card--collection .mission-footer-right,
body.app-page[data-page="profile"] .mission-card--history .mission-footer-right {
  width: auto;
  min-width: 0;
  margin-left: 0;
}

.mission-card .mission-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.mission-card .mission-action-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

.mission-card .mission-action-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mission-card .mission-action-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-progress-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
}

.mission-progress-action-group--card {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(44px, 0.42fr);
  gap: 6px;
  width: 100%;
}

.mission-progress-action-group--card .mission-progress-action {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.mission-progress-action-group--card .mission-progress-action--decrement {
  min-width: 0;
}

.mission-progress-action-group--card .mission-progress-action--increment {
  min-width: 0;
}

.mission-progress-action {
  white-space: nowrap;
}

.mission-progress-action--card-primary {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.mission-progress-action--increment {
  background: color-mix(in srgb, var(--info) 14%, var(--surface-primary));
  color: color-mix(in srgb, var(--info-dark) 82%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--info) 34%, var(--border-default));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--info) 12%, transparent);
}

.mission-progress-action--increment:hover,
.mission-progress-action--increment:focus-visible {
  background: color-mix(in srgb, var(--info) 20%, var(--surface-primary));
  color: color-mix(in srgb, var(--info-dark) 92%, var(--text-primary));
  border-color: color-mix(in srgb, var(--info) 52%, var(--border-default));
}

.mission-progress-action--increment.is-disabled,
.mission-progress-action--increment:disabled {
  background: color-mix(in srgb, var(--info) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--info-dark) 56%, var(--text-primary));
  border-color: color-mix(in srgb, var(--info) 24%, var(--border-default));
  box-shadow: none;
  opacity: 1;
}

.mission-progress-action--decrement {
  min-width: 48px;
  padding-inline: 9px;
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 78%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border-default));
  box-shadow: none;
}

.mission-progress-action--decrement:hover,
.mission-progress-action--decrement:focus-visible {
  background: color-mix(in srgb, var(--danger) 13%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-default));
  color: color-mix(in srgb, var(--danger) 86%, var(--text-primary));
}

.mission-progress-action--decrement.is-disabled,
.mission-progress-action--decrement:disabled {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-primary));
  color: color-mix(in srgb, var(--danger) 52%, var(--text-primary));
  border-color: color-mix(in srgb, var(--danger) 20%, var(--border-default));
  opacity: 1;
}

.mission-detail-footer .mission-progress-action-group {
  width: 100%;
}

.mission-detail-footer .mission-progress-action .mission-action-btn__label,
.mission-card .mission-progress-action .mission-action-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-card .mission-card-actions-trigger {
  min-width: 44px;
  min-height: 40px;
  padding-inline: 12px;
  justify-self: end;
}

.mission-card .mission-card-actions-trigger .mission-action-btn__icon {
  width: 18px;
  height: 18px;
}

.mission-card .mission-complete-action,
.mission-card .mission-progress-action,
body.app-page[data-page="profile"] .mission-card--profile .mission-complete-action,
body.app-page[data-page="profile"] .mission-card--profile .mission-progress-action,
body.app-page[data-page="profile"] .mission-card--collection .mission-complete-action,
body.app-page[data-page="profile"] .mission-card--collection .mission-progress-action {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  justify-self: start;
}

.mission-card .mission-progress-action-group--card .mission-progress-action {
  min-width: 0;
}

.mission-card .mission-complete-action,
.mission-card .mission-card-footer-primary [data-action="complete-mission"] {
  background: color-mix(in srgb, var(--success) 16%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 82%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border-default));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--success) 12%, transparent);
}

.mission-card .mission-progress-action--increment,
.mission-card .mission-card-footer-primary [data-action="increment-mission-progress"] {
  background: color-mix(in srgb, var(--info) 14%, var(--surface-primary));
  color: color-mix(in srgb, var(--info-dark) 82%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--info) 34%, var(--border-default));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--info) 12%, transparent);
}

.mission-card .mission-complete-action:hover,
.mission-card .mission-complete-action:focus-visible,
.mission-card .mission-card-footer-primary [data-action="complete-mission"]:hover,
.mission-card .mission-card-footer-primary [data-action="complete-mission"]:focus-visible {
  background: color-mix(in srgb, var(--success) 24%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 90%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 62%, var(--border-default));
}

.mission-card .mission-progress-action--increment:hover,
.mission-card .mission-progress-action--increment:focus-visible,
.mission-card .mission-card-footer-primary [data-action="increment-mission-progress"]:hover,
.mission-card .mission-card-footer-primary [data-action="increment-mission-progress"]:focus-visible {
  background: color-mix(in srgb, var(--info) 20%, var(--surface-primary));
  color: color-mix(in srgb, var(--info-dark) 92%, var(--text-primary));
  border-color: color-mix(in srgb, var(--info) 52%, var(--border-default));
}

.mission-card .mission-progress-action--increment.is-disabled,
.mission-card .mission-progress-action--increment:disabled,
.mission-card .mission-card-footer-primary [data-action="increment-mission-progress"].is-disabled,
.mission-card .mission-card-footer-primary [data-action="increment-mission-progress"]:disabled {
  background: color-mix(in srgb, var(--info) 10%, var(--surface-primary));
  color: color-mix(in srgb, var(--info-dark) 56%, var(--text-primary));
  border-color: color-mix(in srgb, var(--info) 24%, var(--border-default));
  box-shadow: none;
  opacity: 1;
}

.mission-card .mission-complete-action.is-disabled,
.mission-card .mission-complete-action:disabled {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-primary));
  color: color-mix(in srgb, var(--success) 58%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-default));
  box-shadow: none;
  opacity: 1;
}

.mission-card.has-cover .mission-card-footer-primary .btn,
.mission-card.has-cover .mission-card-footer-secondary .btn {
  background: rgba(15, 23, 42, 0.38);
  color: #F8FAFC;
  border-color: rgba(248, 250, 252, 0.24);
  backdrop-filter: blur(8px);
}

.mission-card.has-cover .mission-card-footer-primary .btn:hover,
.mission-card.has-cover .mission-card-footer-primary .btn:focus-visible,
.mission-card.has-cover .mission-card-footer-secondary .btn:hover,
.mission-card.has-cover .mission-card-footer-secondary .btn:focus-visible {
  background: rgba(15, 23, 42, 0.52);
  color: #FFFFFF;
  border-color: rgba(248, 250, 252, 0.32);
}

.mission-card.has-cover .mission-card-footer-primary [data-action="complete-mission"] {
  background: rgba(22, 163, 74, 0.28);
  color: #ECFDF5;
  border-color: rgba(134, 239, 172, 0.42);
}

.mission-card.has-cover .mission-card-footer-primary [data-action="increment-mission-progress"] {
  background: rgba(37, 99, 235, 0.3);
  color: #DBEAFE;
  border-color: rgba(147, 197, 253, 0.42);
}

.mission-card.has-cover .mission-card-footer-primary [data-action="decrement-mission-progress"] {
  background: rgba(127, 29, 29, 0.28);
  color: #FECACA;
  border-color: rgba(248, 113, 113, 0.34);
}

[data-theme="light"] .mission-card.has-cover .mission-card-footer-primary .btn,
[data-theme="light"] .mission-card.has-cover .mission-card-footer-secondary .btn,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-footer-primary .btn,
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-footer-secondary .btn {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.84) 0%, rgba(247, 239, 227, 0.72) 100%);
  color: #382515;
  border-color: rgba(198, 170, 127, 0.34);
  backdrop-filter: blur(8px) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 22px -24px rgba(94, 67, 28, 0.14);
}

[data-theme="light"] .mission-card.has-cover .mission-card-footer-primary [data-action="complete-mission"],
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-footer-primary [data-action="complete-mission"] {
  background: linear-gradient(180deg, rgba(243, 252, 246, 0.88) 0%, rgba(232, 247, 238, 0.8) 100%);
  color: #166534;
  border-color: rgba(74, 222, 128, 0.24);
}

[data-theme="light"] .mission-card.has-cover .mission-card-footer-primary [data-action="increment-mission-progress"],
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-footer-primary [data-action="increment-mission-progress"] {
  background: linear-gradient(180deg, rgba(241, 247, 255, 0.9) 0%, rgba(229, 239, 255, 0.82) 100%);
  color: #1d4ed8;
  border-color: rgba(96, 165, 250, 0.24);
}

[data-theme="light"] .mission-card.has-cover .mission-card-footer-primary [data-action="decrement-mission-progress"],
html:not([data-theme="dark"]) .mission-card.has-cover .mission-card-footer-primary [data-action="decrement-mission-progress"] {
  background: linear-gradient(180deg, rgba(255, 244, 244, 0.9) 0%, rgba(254, 234, 234, 0.82) 100%);
  color: #b91c1c;
  border-color: rgba(248, 113, 113, 0.24);
}

@media (max-width: 767px) {
  .mission-mode-segmented {
    gap: 3px;
  }

  .mission-mode-segment {
    min-height: 58px;
    padding: 10px 6px;
  }

  .mission-mode-segment__text,
  .mission-mode-segment__line {
    font-size: 11px;
  }

  .mission-mode-panel {
    padding: 14px;
  }

  .mission-mode-panel__target-row {
    grid-template-columns: 1fr;
  }

  .mission-detail-progress-form {
    grid-template-columns: 1fr;
  }

  .mission-detail-progress-history__date-edit,
  .mission-detail-progress-history__actions {
    width: 100%;
  }

  .mission-detail-progress-history__date-trigger {
    width: 100%;
    min-width: 0;
  }

  .mission-detail-progress-history__summary {
    grid-template-columns: 1fr;
  }

  .mission-detail-header__badge-slot {
    top: var(--space-2);
    max-width: calc(50% - 8px);
  }

  .mission-detail-header__badge-stack {
    top: var(--space-2);
    left: var(--space-2);
    width: min(58%, 360px);
  }

  .mission-detail-header__badge-stack .mission-detail-header__badge-slot {
    max-width: 100%;
  }

  .mission-detail-header__badge-slot--status {
    left: var(--space-2);
  }

  .mission-detail-header__badge-slot--mode {
    right: var(--space-2);
  }

  .mission-detail-progress-history__summary-side {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .mission-detail-progress-history__actions {
    justify-content: flex-end;
  }

  .mission-detail-progress-history__date-input {
    width: 100%;
    min-width: 0;
  }

  .mission-detail-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-detail-footer__main:has(> :only-child) {
    grid-template-columns: 1fr;
  }

  .mission-detail-footer__secondary {
    justify-self: stretch;
  }

  .mission-detail-footer .mission-card-actions-trigger {
    width: 100%;
    justify-content: center;
  }

  .mission-card .mission-card-footer-main,
  .mission-card .mission-card-footer-main--refined,
  .mission-card .mission-card-footer-main--manual-progress,
  .mission-card .mission-card-footer-main--history,
  body.app-page[data-page="profile"] .mission-card--profile .mission-card-footer-main--refined,
  body.app-page[data-page="profile"] .mission-card--collection .mission-card-footer-main--refined,
  body.app-page[data-page="profile"] .mission-card--history .mission-card-footer-main--history {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px 10px;
  }

  .mission-card .mission-card-footer-secondary {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .mission-card-footer-primary--progress-actions .mission-progress-action-group--card {
    grid-template-columns: minmax(0, 1fr) minmax(44px, 0.42fr);
  }

  .mission-progress-action-group--detail-panel {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .mission-card .mission-action-btn--secondary {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 10px;
    gap: 7px;
    flex: 0 0 auto;
  }

  .mission-card .mission-action-btn--secondary .mission-action-btn__icon {
    width: 18px;
    height: 18px;
  }

  .mission-card .mission-complete-action {
    min-height: 44px;
    padding-inline: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .mission-card .mission-card-footer-main--has-primary {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .mission-card .mission-card-footer-main--has-primary .mission-card-footer-secondary {
    grid-column: 2;
    justify-self: end;
  }

  .mission-card .mission-action-btn--secondary {
    width: 44px;
    padding-inline: 0;
    gap: 0;
    flex-basis: 44px;
  }

  .mission-card .mission-action-btn--secondary .mission-action-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 359px) {
  .mission-modal .ks-modal__footer {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-date-picker-row,
  .mission-detail-dates,
  .mission-detail-dates:has(.mission-detail-date:nth-child(2):last-child),
  .mission-detail-dates:has(.mission-detail-date:nth-child(3):last-child),
  .mission-complete-date-field,
  .mission-detail-footer__main {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mission status/actions refinements */
.mission-action-btn--fail {
  color: color-mix(in srgb, var(--danger) 74%, var(--text-primary));
}

.mission-compact-action-btn--radial[data-compact-action-index="3"] {
  right: 75px;
  bottom: 18px;
}

.mission-compact-action-btn--danger {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: color-mix(in srgb, var(--danger) 82%, white);
}

.mission-compact-action-btn--card-menu.mission-compact-action-btn--danger:hover,
.mission-compact-action-btn--card-menu.mission-compact-action-btn--danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}

.mission-modal .form-group.is-invalid .form-input {
  border-color: color-mix(in srgb, var(--danger) 64%, var(--border-default));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}

.mission-modal .form-group.is-invalid .mission-date-trigger {
  border-color: color-mix(in srgb, var(--danger) 64%, var(--border-default));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}

.mission-modal .form-field-error {
  display: block;
  min-height: 0;
  margin-top: 6px;
  color: color-mix(in srgb, var(--danger) 78%, var(--text-primary));
  font-size: var(--text-sm);
  line-height: 1.35;
}

.mission-modal .form-field-error:empty {
  display: none;
}

.mission-date-picker-row__error {
  grid-column: 1 / -1;
  margin-top: -2px;
}

body.app-page[data-page="profile"] #missions-card .app-card-body.missions-card-body--count-0,
body.app-page[data-page="profile"] #missions-card .missions-list.missions-card-body--count-0 {
  min-height: clamp(150px, 24vh, 220px);
}

body.app-page[data-page="profile"] #missions-card .app-card-body.missions-card-body--count-1,
body.app-page[data-page="profile"] #missions-card .missions-list.missions-card-body--count-1,
body.app-page[data-page="profile"] #missions-card .app-card-body.missions-card-body--count-2,
body.app-page[data-page="profile"] #missions-card .missions-list.missions-card-body--count-2 {
  min-height: auto;
}

body.app-page[data-page="profile"] #missions-card .missions-list.missions-card-body--count-1,
body.app-page[data-page="profile"] #missions-card .missions-list.missions-card-body--count-2 {
  overflow-y: hidden;
}

body.app-page[data-page="profile"] #missions-card .missions-list.missions-card-body--count-many {
  overflow-y: auto;
}

.weight-trend-caption__item {
  align-items: flex-start;
}

.weight-trend-caption__item::before {
  margin-top: 0.52em;
  align-self: flex-start;
}

@media (max-width: 640px) {
  .weight-trend-caption__row {
    justify-content: center;
    gap: 0.45rem 0.7rem;
  }

  .weight-trend-caption__item,
  .weight-trend-caption__item--real,
  .weight-trend-caption__item--objective,
  .weight-trend-caption__item--projection {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .weight-trend-caption__row {
    gap: 0.38rem;
  }
}

/* Settings: devices and sessions */
.ks-settings-card--sessions {
  grid-column: 1 / -1;
  scroll-margin-top: 96px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ks-settings-card--highlight {
  border-color: rgba(var(--accent-rgb, 255, 208, 97), 0.72);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 255, 208, 97), 0.18);
}

.ks-sessions-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ks-sessions-card-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ks-sessions-feedback {
  margin: 0;
}

.ks-sessions-revoke-all {
  border-color: rgba(220, 38, 38, 0.72);
  box-shadow: 0 10px 22px -18px rgba(220, 38, 38, 0.58);
}

.ks-sessions-loading {
  color: var(--text-muted);
  font-size: 0.92rem;
  padding: 6px 0;
}

.ks-sessions-readonly-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: rgba(14, 165, 233, 0.08);
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.42;
}

.ks-sessions-estimate-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ks-sessions-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 6px;
  margin: 0;
}

.ks-sessions-stat {
  --ks-session-accent: var(--accent-500);
  position: relative;
  overflow: hidden;
  width: 100%;
  appearance: none;
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 74px;
  padding: 10px 12px;
  padding-right: 60px;
  border: 1px solid color-mix(in srgb, var(--ks-session-accent) 16%, var(--border-color));
  border-radius: 12px;
  font: inherit;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.18)),
    var(--surface-secondary);
  box-shadow: inset 0 3px 0 var(--ks-session-accent);
}

[data-theme="dark"] .ks-sessions-stat {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.ks-sessions-stat--active {
  --ks-session-accent: #16a34a;
}

.ks-sessions-stat--devices {
  --ks-session-accent: #0ea5e9;
}

.ks-sessions-stat--browsers {
  --ks-session-accent: #8b5cf6;
}

.ks-sessions-stat--systems {
  --ks-session-accent: #6366f1;
}

.ks-sessions-stat--locations {
  --ks-session-accent: #14b8a6;
}

.ks-sessions-stat--revoked {
  --ks-session-accent: #f43f5e;
}

.ks-sessions-stat--expired {
  --ks-session-accent: #f59e0b;
}

.ks-sessions-stat--interactive {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ks-sessions-stat--interactive:hover,
.ks-sessions-stat--interactive:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ks-session-accent) 42%, var(--border-color));
  box-shadow: inset 0 3px 0 var(--ks-session-accent), 0 12px 28px rgba(15, 23, 42, 0.08);
}

.ks-sessions-stat:disabled {
  cursor: default;
  opacity: 0.64;
  box-shadow: none;
}

.ks-sessions-stat__value {
  color: color-mix(in srgb, var(--ks-session-accent) 72%, var(--text-primary));
  font-size: 1.02rem;
  line-height: 1.1;
}

.ks-sessions-stat__label {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.ks-sessions-stat-icons {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  max-width: 40px;
  height: 40px;
  max-height: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 18px;
  align-content: start;
  justify-items: center;
  gap: 2px;
  overflow: hidden;
  z-index: 1;
}

.ks-sessions-stat-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  line-height: 1;
  background: color-mix(in srgb, var(--surface-primary) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 64%, transparent);
  color: color-mix(in srgb, var(--ks-session-accent) 58%, var(--text-primary));
  overflow: hidden;
}

.ks-sessions-stat-icon-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-primary) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-default) 64%, transparent);
}

.ks-sessions-stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.ks-sessions-expanded {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--surface-secondary) 78%, transparent);
}

[data-theme="dark"] .ks-sessions-expanded {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    color-mix(in srgb, var(--surface-secondary) 84%, transparent);
}

.ks-sessions-controls-row {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ks-sessions-filter-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ks-sessions-filter-groups,
.ks-sessions-filter-options {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.ks-sessions-filter-groups::-webkit-scrollbar,
.ks-sessions-filter-options::-webkit-scrollbar {
  display: none;
}

.ks-sessions-filter-pill,
.ks-sessions-subpill {
  --ks-session-filter-accent: var(--accent-500);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ks-sessions-filter-pill[data-session-filter-group="status"],
.ks-sessions-subpill[data-session-subfilter-group="status"] {
  --ks-session-filter-accent: #d97706;
}

.ks-sessions-filter-pill[data-session-filter-group="device"],
.ks-sessions-subpill[data-session-subfilter-group="device"] {
  --ks-session-filter-accent: #0ea5e9;
}

.ks-sessions-filter-pill[data-session-filter-group="browser"],
.ks-sessions-subpill[data-session-subfilter-group="browser"] {
  --ks-session-filter-accent: #8b5cf6;
}

.ks-sessions-filter-pill[data-session-filter-group="operating-system"],
.ks-sessions-subpill[data-session-subfilter-group="operating-system"] {
  --ks-session-filter-accent: #6366f1;
}

.ks-sessions-filter-pill[data-session-filter-group="location"],
.ks-sessions-subpill[data-session-subfilter-group="location"] {
  --ks-session-filter-accent: #14b8a6;
}

.ks-sessions-filter-pill:hover,
.ks-sessions-filter-pill:focus-visible,
.ks-sessions-subpill:hover,
.ks-sessions-subpill:focus-visible {
  border-color: color-mix(in srgb, var(--ks-session-filter-accent) 26%, var(--border-default));
  background: var(--surface-hover, var(--surface-secondary));
  outline: none;
}

.ks-sessions-filter-pill.is-open,
.ks-sessions-filter-pill.is-active,
.ks-sessions-subpill.is-active {
  border-color: color-mix(in srgb, var(--ks-session-filter-accent) 40%, var(--border-default));
  background: color-mix(in srgb, var(--ks-session-filter-accent) 12%, var(--surface-secondary));
  color: color-mix(in srgb, var(--ks-session-filter-accent) 78%, var(--text-primary));
  box-shadow: 0 10px 18px -18px rgba(15, 23, 42, 0.32);
}

.ks-sessions-filter-pill__label {
  font-size: 0.86rem;
  font-weight: 600;
}

.ks-sessions-filter-pill__value {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-primary) 76%, transparent);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.ks-sessions-results-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
}

.ks-sessions-results-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  min-width: 0;
}

.ks-sessions-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ks-sessions-page-info {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.ks-sessions-revoke-other {
  white-space: nowrap;
  flex: 0 0 auto;
}

.ks-sessions-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border-default) 50%, transparent);
}

.ks-sessions-footer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

.ks-session-flag {
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
}

.ks-sessions-stat-icon.ks-session-flag {
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ks-sessions-clear-revoked {
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(255, 247, 237, 0.84);
  color: #92400e;
}

.ks-sessions-clear-revoked:hover,
.ks-sessions-clear-revoked:focus-visible {
  border-color: rgba(245, 158, 11, 0.52);
  background: rgba(255, 237, 213, 0.92);
  color: #78350f;
}

[data-theme="dark"] .ks-sessions-clear-revoked {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(146, 64, 14, 0.2);
  color: #fde68a;
}

.ks-sessions-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ks-sessions-list--expanded {
  max-height: min(60vh, 600px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.ks-session-item {
  border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16)),
    rgba(var(--surface-rgb, 255, 255, 255), 0.56);
  padding: 10px 12px;
}

[data-theme="dark"] .ks-session-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    rgba(255, 255, 255, 0.03);
}

.ks-session-item.is-current {
  border-color: rgba(var(--accent-rgb, 255, 208, 97), 0.5);
}

.ks-session-item.is-targeted,
.ks-session-item--highlight {
  border-color: rgba(14, 165, 233, 0.72);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14);
}

.ks-session-item.is-revoked,
.ks-session-item.is-expired {
  box-shadow: inset 3px 0 0 rgba(244, 63, 94, 0.5);
}

.ks-session-item.is-expired {
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.5);
}

.ks-session-item__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 6px;
}

.ks-session-item__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ks-session-item__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  color: var(--text-primary);
  font-size: 0.98rem;
  line-height: 1.25;
}

.ks-session-item__summary {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.38;
}

.ks-session-icon,
.ks-session-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-width: 16px;
  line-height: 1;
  color: color-mix(in srgb, var(--text-secondary) 74%, var(--text-primary));
  transform: translateY(1px);
}

.ks-session-icon svg,
.ks-session-title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ks-session-title-icon--device,
.ks-session-title-icon--browser {
  color: color-mix(in srgb, var(--text-primary) 74%, var(--ks-session-accent));
}

.ks-session-item__support {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.34;
}

.ks-session-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.ks-session-fact {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ks-session-fact__label {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ks-session-fact__value {
  color: var(--text-primary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.ks-session-item__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.ks-session-status {
  border: 1px solid var(--border-color);
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.ks-session-status--revoked {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.ks-session-status--expired {
  background: rgba(107, 114, 128, 0.12);
  color: var(--text-muted);
}

[data-theme="dark"] .ks-session-status {
  color: #86efac;
}

[data-theme="dark"] .ks-session-status--revoked {
  color: #fca5a5;
}

.ks-session-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent);
}

.ks-session-detail {
  min-width: 0;
}

.ks-session-detail dt {
  margin: 0 0 3px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ks-session-detail dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.ks-session-item__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.ks-session-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ks-session-action-details {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}

.ks-session-action-details::after {
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.16s ease;
}

.ks-session-action-details[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.ks-session-action-details:hover,
.ks-session-action-details:focus-visible {
  color: var(--text-primary);
  background: transparent;
  outline: none;
}

.ks-session-action-revoke {
  border-color: rgba(245, 158, 11, 0.28);
  color: #92400e;
  background: rgba(255, 247, 237, 0.82);
}

.ks-session-action-delete {
  border-color: rgba(244, 63, 94, 0.28);
  color: #be123c;
  background: rgba(255, 241, 242, 0.86);
}

.ks-session-context-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.ks-session-context-actions:empty {
  display: none;
}

.ks-session-context-actions .btn {
  min-height: 34px;
  padding: 7px 11px;
}

[data-theme="dark"] .ks-session-action-revoke {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(146, 64, 14, 0.18);
  color: #fde68a;
}

[data-theme="dark"] .ks-session-action-delete {
  border-color: rgba(244, 63, 94, 0.34);
  background: rgba(136, 19, 55, 0.18);
  color: #fda4af;
}

.ks-session-action-current {
  border-color: rgba(220, 38, 38, 0.34);
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.72);
}

.ks-session-action-current:hover,
.ks-session-action-current:focus-visible {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(254, 226, 226, 0.88);
  color: #991b1b;
}

[data-theme="dark"] .ks-session-action-current {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(127, 29, 29, 0.16);
  color: #fecaca;
}

@media (max-width: 900px) {
  .ks-sessions-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ks-sessions-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ks-sessions-stat {
    padding-right: 54px;
  }

  .ks-sessions-stat-icon,
  .ks-sessions-stat-icon-more {
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: 0.56rem;
  }

  .ks-sessions-stat-icons {
    top: 7px;
    right: 7px;
    width: 34px;
    max-width: 34px;
    height: 34px;
    max-height: 34px;
    grid-auto-rows: 16px;
    gap: 1px;
  }

  /* item__head: keep 2-column grid so badges stay top-right */
  .ks-session-item__head {
    gap: 8px;
  }

  .ks-session-item__badges {
    min-width: 0;
  }

  /* item__footer: keep 2-column grid, shrink action buttons */
  .ks-session-context-actions .btn {
    padding: 5px 8px;
    font-size: 0.82rem;
  }

  .ks-sessions-list--expanded {
    max-height: min(58vh, 440px);
    padding-right: 2px;
  }

  .ks-session-details {
    grid-template-columns: 1fr;
  }

  /* Footer: pagination first, actions row below, each ~50% */
  .ks-sessions-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .ks-sessions-footer__actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
  }

  .ks-sessions-footer__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ks-sessions-pagination {
    justify-content: center;
  }

  .ks-sessions-revoke-other {
    font-size: 0.82rem;
    padding: 5px 10px;
  }

  .ks-session-icon,
  .ks-session-title-icon {
    width: 15px;
    height: 15px;
    min-width: 15px;
  }
}

/* Notifications filters: state, category, progress subtype */
.notifications-page-actions {
  align-items: flex-start;
  gap: 10px;
}

.notifications-filter-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.notifications-category-filter,
.notifications-progress-subtype-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notifications-category-chip,
.notifications-progress-chip {
  white-space: nowrap;
  border-color: var(--border-color);
}

.notifications-category-chip--active,
.notifications-progress-chip--active {
  border-color: rgba(var(--accent-rgb, 255, 208, 97), 0.72);
  background: rgba(var(--accent-rgb, 255, 208, 97), 0.14);
  color: var(--text-primary);
}

.notifications-category-chip--progress-active {
  position: relative;
  border-color: rgba(16, 185, 129, 0.46);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(var(--accent-rgb, 255, 208, 97), 0.08));
}

.notifications-category-chip--progress-active::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.48);
}

.notifications-category-chip--security-active {
  border-color: rgba(14, 165, 233, 0.55);
  background: rgba(14, 165, 233, 0.12);
}

.notifications-category-chip--billing-active {
  border-color: rgba(var(--accent-rgb, 255, 208, 97), 0.68);
  background: linear-gradient(135deg, rgba(var(--accent-rgb, 255, 208, 97), 0.16), rgba(34, 197, 94, 0.08));
}

.notifications-progress-subtype-filter[hidden] {
  display: none;
}

.notifications-progress-subtype-filter {
  position: relative;
  align-items: center;
  margin-left: 16px;
  padding: 9px 10px 9px 18px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(16, 185, 129, 0.06), rgba(var(--accent-rgb, 255, 208, 97), 0.035)),
    var(--surface-secondary);
}

.notifications-progress-subtype-filter::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.52);
}

.notifications-progress-chip {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--text-secondary);
  font-size: 0.82rem;
}

[data-theme="dark"] .notifications-progress-subtype-filter {
  border-color: rgba(52, 211, 153, 0.18);
  background:
    linear-gradient(180deg, rgba(5, 150, 105, 0.16), rgba(245, 158, 11, 0.055)),
    rgba(255, 255, 255, 0.035);
}

[data-theme="dark"] .notifications-progress-chip {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.11);
  color: var(--text-secondary);
}

.notifications-progress-chip:hover,
.notifications-progress-chip:focus-visible {
  border-color: rgba(16, 185, 129, 0.44);
  background: rgba(16, 185, 129, 0.1);
  color: var(--text-primary);
}

.notifications-progress-chip--active {
  border-color: rgba(16, 185, 129, 0.62);
  background: rgba(16, 185, 129, 0.18);
  color: var(--text-primary);
  font-weight: 650;
}

.notif-type--security {
  background: rgba(14, 165, 233, 0.14);
  color: #0369a1;
}

[data-theme="dark"] .notif-type--security {
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}

.notif-type--billing {
  background: rgba(var(--accent-rgb, 255, 208, 97), 0.16);
  color: #8a5a00;
}

[data-theme="dark"] .notif-type--billing {
  background: rgba(var(--accent-rgb, 255, 208, 97), 0.18);
  color: #fde68a;
}

.notifications-item--security {
  border-color: rgba(14, 165, 233, 0.22);
  box-shadow: inset 3px 0 0 rgba(14, 165, 233, 0.46);
}

.notifications-item--security.is-unread {
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.1), transparent 44%),
    var(--accent-bg);
}

.notifications-item-detail--security {
  color: #0369a1;
}

[data-theme="dark"] .notifications-item-detail--security {
  color: #7dd3fc;
}

.notifications-item--billing {
  border-color: rgba(var(--accent-rgb, 255, 208, 97), 0.24);
  box-shadow: inset 3px 0 0 rgba(var(--accent-rgb, 255, 208, 97), 0.5);
}

.notifications-item--billing.is-unread {
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb, 255, 208, 97), 0.11), transparent 46%),
    var(--accent-bg);
}

.notifications-security-modal {
  display: grid;
  gap: 14px;
}

.notifications-security-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(224, 242, 254, 0.8), rgba(240, 249, 255, 0.56));
}

[data-theme="dark"] .notifications-security-intro {
  border-color: rgba(56, 189, 248, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 74, 110, 0.24), rgba(8, 47, 73, 0.14));
}

.notifications-security-intro__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.14);
  color: #0369a1;
  line-height: 1;
}

.notifications-security-intro__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.notifications-security-intro__copy strong {
  color: #0369a1;
  font-size: 0.98rem;
  line-height: 1.25;
}

[data-theme="dark"] .notifications-security-intro__copy strong {
  color: #bae6fd;
}

.notifications-security-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.notifications-security-row {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(14, 165, 233, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
}

[data-theme="dark"] .notifications-security-row {
  border-color: rgba(56, 189, 248, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.notifications-security-row dt {
  margin: 0 0 3px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.notifications-security-row dd {
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.notifications-security-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.notifications-security-estimate-note {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 0.81rem;
  line-height: 1.4;
}

.notifications-security-action-report {
  margin-left: auto;
}

@media (max-width: 900px) {
  .ks-session-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ks-sessions-card-header,
  .ks-session-item__head {
    align-items: stretch;
  }

  .notifications-security-actions {
    justify-content: stretch;
  }

  .notifications-security-actions .btn {
    width: 100%;
  }

  .notifications-security-details {
    grid-template-columns: 1fr;
  }

  .notifications-page-actions,
  .notifications-filter-stack {
    width: 100%;
  }

  .notifications-category-filter,
  .notifications-progress-subtype-filter {
    flex-wrap: nowrap;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .notifications-progress-subtype-filter {
    margin-left: 8px;
    padding: 8px 8px 8px 15px;
    max-width: calc(100vw - 40px);
  }
}