@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800&display=swap');

/* Fonts loaded async in HTML (preconnect + link media=print onload) to avoid blocking LCP. */
:root {
  /* --- THEME MAPPING FROM LANDING.HTML --- */
  
  /* Primary Colors */
  --theme-primary: #56A8FF;
  --theme-secondary: #A86CFF;
  --theme-accent: #5EEAD4;
  
  /* Backgrounds: Dark Gradient & Glass */
  --theme-background: linear-gradient(180deg, #070A14 0%, #0B1030 100%);
  --theme-widget-bg: rgba(255, 255, 255, 0.06);
  --theme-widget-header-bg: rgba(255, 255, 255, 0.03);
  --theme-card-bg: rgba(255, 255, 255, 0.06);
  
  /* Borders & Shadows */
  --theme-border: rgba(255, 255, 255, 0.12);
  --theme-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  
  /* Text: Inverted to Light for Dark Theme */
  --theme-text: #F2F5FF;
  --theme-text-secondary: rgba(242, 245, 255, 0.78);
  --theme-text-dark: #F2F5FF; /* Variable mapped to Light color because widgets are now dark */
  /* Match secondary so caption-sized text stays readable before theme-mode runs */
  --theme-text-muted: rgba(242, 245, 255, 0.78);
  
  /* Inputs */
  --theme-input-bg: rgba(0, 0, 0, 0.35);
  --theme-input-border: rgba(255, 255, 255, 0.14);
  
  /* Buttons */
  --theme-button-primary: #56A8FF; /* Solid fallback */
  --theme-button-primary-gradient: linear-gradient(135deg, #56A8FF, #A86CFF);
  --theme-button-primary-hover: #4a90db;
  --theme-button-secondary: rgba(255, 255, 255, 0.08);
  --theme-button-secondary-hover: rgba(255, 255, 255, 0.18);
  /** Text on solid / gradient primary fills (contrast with --theme-button-primary-gradient). */
  --theme-button-on-primary: #ffffff;
  
  /* Functional */
  --theme-success: #3FE7A7;
  --theme-error: #FF5C7A;
  --theme-error-bg: rgba(255, 92, 122, 0.1);
  
  /* Scrollbars */
  --theme-scrollbar-track: #0B1030;
  --theme-scrollbar-thumb: #56A8FF;
  /* Shared dashboard chrome heights for maximize/layout math. */
  --dashboard-weather-bar-height: 60px;
  --dashboard-ticker-bar-height: 44px;
}

/* Email Verification Reminder Banner */
.email-verification-banner {
  position: fixed;
  top: calc(var(--dashboard-weather-bar-height) + 10px);
  right: 16px;
  left: auto;
  z-index: 10002;
  width: min(460px, calc(100vw - 24px));
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  animation: slideDown 0.3s ease-out;
}

.email-verification-banner.hide {
  display: none;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.email-verification-content {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}

.email-verification-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.email-verification-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-verification-text strong {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.email-verification-text span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  line-height: 1.35;
}

.email-verification-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.email-verification-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.email-verification-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.email-verification-btn:active {
  transform: translateY(0);
}

.email-verification-dismiss {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.email-verification-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 768px) {
  .email-verification-content {
    padding: 10px 10px;
    gap: 8px;
  }
  .email-verification-actions {
    flex-direction: column;
  }
}

/* Trial ending soon banner */
.trial-ending-banner {
  position: fixed;
  top: calc(var(--dashboard-weather-bar-height) + 10px);
  right: 16px;
  left: auto;
  z-index: 10001;
  width: min(460px, calc(100vw - 24px));
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  animation: slideDown 0.3s ease-out;
}

.trial-ending-banner.hide {
  display: none;
}

/* Calendar reconnect banner */
.calendar-reconnect-banner {
  position: fixed;
  top: calc(var(--dashboard-weather-bar-height) + 10px);
  right: 16px;
  left: auto;
  z-index: 10003;
  width: min(460px, calc(100vw - 24px));
  background: linear-gradient(135deg, #f97316, #ef4444);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  animation: slideDown 0.3s ease-out;
}

.calendar-reconnect-banner.hide {
  display: none;
}

.calendar-reconnect-content {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

.calendar-reconnect-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.calendar-reconnect-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calendar-reconnect-text strong {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.calendar-reconnect-text span {
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  line-height: 1.35;
}

.calendar-reconnect-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-reconnect-list-item {
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
}

.calendar-reconnect-list-item strong {
  color: #fff;
  font-weight: 700;
}

.calendar-reconnect-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.calendar-reconnect-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.calendar-reconnect-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.calendar-reconnect-dismiss {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.calendar-reconnect-dismiss:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.trial-ending-content {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

.trial-ending-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.trial-ending-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trial-ending-text strong {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.trial-ending-text span {
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
  line-height: 1.35;
}

.trial-ending-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.trial-ending-btn {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.trial-ending-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
  transform: translateY(-1px);
}

.trial-ending-dismiss {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.trial-ending-dismiss:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

@media (max-width: 768px) {
  .trial-ending-content {
    padding: 10px 10px;
    gap: 8px;
  }
  .trial-ending-actions {
    flex-direction: column;
  }
  .calendar-reconnect-content {
    padding: 10px 10px;
    gap: 8px;
  }
  .calendar-reconnect-actions {
    flex-direction: column;
  }
}

/* If reconnect notice is visible, stack other notices below it */
body:has(.calendar-reconnect-banner:not(.hide)) .email-verification-banner:not(.hide) {
  top: calc(var(--dashboard-weather-bar-height) + 116px);
}
body:has(.calendar-reconnect-banner:not(.hide)) .trial-ending-banner:not(.hide) {
  top: calc(var(--dashboard-weather-bar-height) + 116px);
}
body:has(.calendar-reconnect-banner:not(.hide)):has(.email-verification-banner:not(.hide)) .trial-ending-banner:not(.hide) {
  top: calc(var(--dashboard-weather-bar-height) + 222px);
}

/* If both are visible, stack trial popup below email popup */
body:has(.email-verification-banner:not(.hide)) .trial-ending-banner:not(.hide) {
  top: calc(var(--dashboard-weather-bar-height) + 116px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Apply background to html element for full viewport coverage */
html {
  min-height: 100vh;
  width: 100%;
  background: var(--theme-background);
  background-color: #000; /* Fallback color for gradients */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom background image support - professional full-screen coverage */
html[data-has-custom-bg="true"] {
  /* Cover the entire viewport - scales to cover at least viewport dimensions */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  /* Ensure full viewport coverage */
  min-width: 100vw;
  min-height: 100vh;
  /* Force background to cover at least common display resolutions */
  /* cover will scale image to cover entire container, maintaining aspect ratio */
}

/* Dedicated custom background layer - behind weather bar, ticker, content (all layouts) */
#customBackgroundLayer {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  pointer-events: none !important;
}

body {
  font-family: var(--theme-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent; /* Let html handle background */
  color: var(--theme-text);
  min-height: 100vh;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative; /* Ensure proper stacking */
}

/* Mobile shell (index-mobile.html): not dashboard freeform; chrome lives in mobile.css (loads last there). */
body.mobile-dashboard {
  padding: 0;
  overflow: hidden;
  min-height: 100dvh;
}
.copilot-command-guide {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.1);
  max-height: 200px;
  overflow-y: auto;
  text-align: left;
  display: block; /* Always visible or toggle with JS */
}

.guide-section {
  margin-bottom: 12px;
}

.guide-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #3FE7A7;
  font-weight: 700;
  margin-bottom: 4px;
}

.guide-item {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
}

/* Custom Scrollbar for the guide */
.copilot-command-guide::-webkit-scrollbar {
  width: 4px;
}
.copilot-command-guide::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
}

/* Dashboard styles - only apply to freeform layout */
.dashboard.layout-freeform {
  position: relative;
  width: 100%;
  height: auto;
  min-height: calc(100vh - var(--dashboard-weather-bar-height)); /* Account for fixed weather bar */
  overflow: visible; /* Allow widgets to be positioned anywhere, even off-screen when zoomed */
  padding-top: var(--dashboard-weather-bar-height); /* Account for fixed weather bar height */
  max-width: none; /* Ensure no max-width constraint */
  background: transparent; /* Let custom background show through */
  /* Removed contain: layout - it was causing widgets to be clipped when zoomed */
}

/* Tabbed and premium layouts use their own container systems - dashboard is just a wrapper */
.dashboard.layout-tabbed,
.dashboard.layout-premium {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-width: none;
}

/* No widgets visible until saved layout is restored from DB (avoids flash + loading unused widgets) */
.dashboard[data-layout-pending] .widget {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.admin-locked .widget-header-actions .widget-max-btn,
body.admin-locked .widget-header-actions .refresh-btn {
  display: none;
}

body.admin-locked .widget-resize-handle,
body.admin-locked .widget-resize-handle-bl {
  display: none;
}

.weather-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--dashboard-weather-bar-height);
  background: var(--theme-widget-header-bg, var(--theme-card-bg, rgba(10, 12, 22, 0.65)));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  z-index: 10000; /* Above freeform widgets so icons never get trapped underneath */
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--theme-border);
  color: var(--theme-widget-header-text, var(--theme-text));
}

.weather-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.weather-bar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.weather-bar-center {
  display: none; /* Buttons are now floating, so center section is hidden */
}

/* Hide weather navigation buttons when admin lock is enabled */
body.admin-locked .weather-bar button[class*="nav"],
body.admin-locked .weather-bar button[class*="prev"],
body.admin-locked .weather-bar button[class*="next"],
body.admin-locked .weather-bar .weather-nav-prev,
body.admin-locked .weather-bar .weather-nav-next,
body.admin-locked .weather-bar .weather-nav-button {
  display: none !important;
}

.weather-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: flex-end;
}

.weather-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--theme-widget-header-text, var(--theme-text));
}

.weather-bar-temp {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--theme-widget-header-text, var(--theme-text));
  line-height: 1.2;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.weather-bar-icon {
  font-size: 2.25rem;
  line-height: 1;
}

.weather-bar-details {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-left: 20px;
}

.weather-bar-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.85rem;
}

.weather-bar-detail-label {
  color: var(--theme-widget-header-text, var(--theme-text-muted));
  opacity: 0.8;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.weather-bar-detail-value {
  font-weight: 600;
  color: var(--theme-widget-header-text, var(--theme-text));
  font-size: 0.9rem;
}

.weather-bar-refresh {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  background: var(--theme-button-secondary);
  color: var(--theme-text-secondary);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather-bar-refresh:hover {
  background: var(--theme-button-secondary-hover);
  border-color: var(--theme-primary);
  opacity: 0.8;
}
.weather-bar-refresh:active { transform: scale(0.95); }

.weather-container {
  color: var(--theme-widget-header-text, var(--theme-text));
}

.weather-main-line {
  color: var(--theme-widget-header-text, var(--theme-text)) !important;
}

.weather-sub-line {
  color: var(--theme-widget-header-text, var(--theme-text)) !important;
  opacity: 0.9;
}

.weather-alert-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 193, 7, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 193, 7, 0.4);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-left: 12px;
}

.weather-alert-indicator:hover {
  background: rgba(255, 193, 7, 0.3);
  transform: scale(1.05);
}

.weather-alert-indicator:active {
  transform: scale(0.98);
}

/* NWS alert wrapper: pushes badge to the right so it doesn't cover weather data */
.weather-alert-wrapper {
  flex-shrink: 0;
  margin-left: 20px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* NWS alert badge: fancy clickable bubble */
.weather-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.25) 0%, rgba(255, 149, 0, 0.2) 100%);
  border: 2px solid rgba(255, 180, 0, 0.6);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffd54f;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 180, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
}

.weather-alert-badge:hover {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.35) 0%, rgba(255, 149, 0, 0.3) 100%);
  border-color: rgba(255, 180, 0, 0.9);
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(255, 180, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.weather-alert-badge:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(255, 180, 0, 0.3);
}

body.light-mode .weather-alert-wrapper {
  border-left-color: rgba(0, 0, 0, 0.12);
}

.weather-alert-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.weather-alert-modal.show {
  display: flex;
}

.weather-alert-content {
  background: var(--theme-card-bg); /* Glass */
  backdrop-filter: blur(16px);
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  padding: 24px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  color: var(--theme-text);
}

.weather-alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--theme-border);
}

.weather-alert-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--theme-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-alert-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--theme-text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.weather-alert-close:hover {
  background: var(--theme-button-secondary-hover);
  color: var(--theme-text);
}

.weather-alert-item {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--theme-input-bg);
  border-radius: 12px;
  border-left: 4px solid #ffc107;
}

.weather-alert-event {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--theme-text);
  margin-bottom: 8px;
}

.weather-alert-headline {
  font-size: 1rem;
  font-weight: 600;
  color: #ffb74d;
  margin-bottom: 12px;
}

.weather-alert-description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--theme-text-secondary);
  white-space: pre-wrap;
  margin-bottom: 12px;
}

.weather-alert-meta {
  font-size: 0.8rem;
  color: var(--theme-text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Clickable weather bar (opens forecast modal) — no layout change, pointer + focus only */
.weather-container.weather-bar-interactive {
  cursor: pointer;
  border-radius: 10px;
}
.weather-container.weather-bar-interactive:focus-visible {
  outline: 2px solid var(--theme-accent, #56a8ff);
  outline-offset: 3px;
}

/* Full forecast modal (same `/api/weather` payload as the bar) */
.weather-forecast-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.weather-forecast-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(8px);
}

.weather-forecast-modal__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--theme-card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--theme-border);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  color: var(--theme-text);
  overflow: hidden;
}

.weather-forecast-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--theme-border);
  flex-shrink: 0;
}

.weather-forecast-modal__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--theme-text);
}

.weather-forecast-modal__subtitle {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--theme-text-muted);
}

.weather-forecast-modal__close {
  flex-shrink: 0;
  background: var(--theme-input-bg);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--theme-text-muted);
  padding: 8px 12px;
  transition: background 0.15s, color 0.15s;
}
.weather-forecast-modal__close:hover {
  background: var(--theme-button-secondary-hover);
  color: var(--theme-text);
}

.weather-forecast-modal__body {
  padding: 0 24px 12px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.weather-forecast-modal__foot {
  padding: 12px 24px 18px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--theme-text-muted);
  border-top: 1px solid var(--theme-border);
  flex-shrink: 0;
}

.wf-section {
  margin-top: 20px;
}
.wf-section:first-child {
  margin-top: 12px;
}

.wf-h3 {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--theme-text-muted);
}

.wf-sub {
  margin: -6px 0 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--theme-text-secondary);
  line-height: 1.35;
}

.wf-section .wf-h3 + .wf-sub {
  margin-top: -8px;
}

.wf-count {
  font-weight: 600;
  opacity: 0.85;
}

.wf-current-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.wf-current-icon {
  font-size: 3rem;
  line-height: 1;
}

.wf-current-temp {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.wf-current-cond {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--theme-text-secondary);
  margin-top: 4px;
}

.wf-dl {
  margin: 0;
  display: grid;
  gap: 10px;
}

.wf-dl-row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 0.95rem;
  padding: 10px 12px;
  background: var(--theme-input-bg);
  border-radius: 10px;
  border: 1px solid var(--theme-border);
}

.wf-dl-row dt {
  margin: 0;
  font-weight: 600;
  color: var(--theme-text-muted);
  font-size: 0.88rem;
}

.wf-dl-row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.wf-table-wrap {
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  overflow: auto;
  max-height: min(360px, 42vh);
  background: var(--theme-input-bg);
}

.wf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.wf-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--theme-card-bg);
  box-shadow: 0 1px 0 var(--theme-border);
}

.wf-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-text-muted);
}

.wf-table td {
  padding: 9px 12px;
  border-top: 1px solid var(--theme-border);
  vertical-align: middle;
}

.wf-td-time,
.wf-td-day {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wf-td-icon {
  text-align: center;
  font-size: 1.1rem;
}

.wf-td-temp {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wf-td-cond {
  color: var(--theme-text-secondary);
}

.wf-muted {
  padding: 16px;
  text-align: center;
  color: var(--theme-text-muted);
}

.wf-alert-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wf-alert-li {
  padding: 12px 14px;
  background: var(--theme-input-bg);
  border-radius: 10px;
  border-left: 4px solid #ffb74d;
}

.wf-alert-ev {
  font-weight: 700;
  font-size: 0.95rem;
}

.wf-alert-meta {
  font-size: 0.85rem;
  color: var(--theme-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.wf-alert-sev {
  font-size: 0.75rem;
  color: var(--theme-text-muted);
  margin-top: 4px;
}

.wf-link-btn {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  background: var(--theme-card-bg);
  color: var(--theme-accent, #56a8ff);
  width: 100%;
}
.wf-link-btn:hover {
  background: var(--theme-button-secondary-hover);
}

/* Freeform branding: orbit mark + CALYXY text (see freeform-layout.css for bar sizing) */
.freeform-branding {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Animated orbit: use <img src="calyxy-mark.svg"> — SMIL is cheap at this size; avoid CSS mask+same SVG (mask would re-rasterize every frame). */
.calyxy-bar-orbit-img {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  pointer-events: none;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--theme-primary, #667eea) 38%, transparent));
  transition: transform 0.2s ease;
}

.freeform-branding:hover .calyxy-bar-orbit-img,
.tabbed-branding:hover .calyxy-bar-orbit-img,
.mobile-nav-left:hover .calyxy-bar-orbit-img {
  transform: scale(1.03);
}

.freeform-brand-text,
.tabbed-brand-text,
.mobile-brand-text {
  font-family: var(--theme-font-family, Orbitron, "Segoe UI", system-ui, sans-serif);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  transform: scaleX(0.96);
  transform-origin: left center;
  white-space: nowrap;
  text-transform: uppercase;
  font-synthesis: none;
  background: linear-gradient(
    135deg,
    var(--theme-widget-header-text, #fff),
    color-mix(in srgb, var(--theme-widget-header-text, #fff) 58%, var(--theme-accent, #56a8ff)),
    color-mix(in srgb, var(--theme-widget-header-text, #fff) 58%, var(--theme-primary, #667eea))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

body.light-mode .freeform-brand-text,
body.light-mode .tabbed-brand-text,
body.light-mode .mobile-brand-text {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}

.brand-logo-img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 8px rgba(86, 168, 255, 0.4));
  flex-shrink: 0;
}
/* CALYXY lettering (matches tabbed layout branding) - theme-aware, visible on any background */
.brand-name {
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: clamp(1px, 0.3vw, 3px);
  background: linear-gradient(135deg, var(--theme-accent, #5EEAD4) 0%, var(--theme-primary, #56A8FF) 50%, var(--theme-secondary, #A86CFF) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  white-space: nowrap;
  /* Subtle outline for visibility on any theme background */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)) drop-shadow(0 0 1px rgba(0,0,0,0.2));
}
body.dark-mode .brand-name {
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.15)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.profile-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: var(--theme-button-secondary);
  color: var(--theme-text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.profile-btn:hover {
  background: var(--theme-button-secondary-hover);
  border-color: rgba(86, 168, 255, 0.35);
}
.profile-btn:active { transform: scale(0.95); }

.profile-menu {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 280px;
  background: rgba(10, 12, 22, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  padding: 16px;
  display: none;
  z-index: 1001;
}
body.light-mode .profile-menu {
  background: var(--theme-card-bg, rgba(255,255,255,0.98));
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
  border-color: var(--theme-border);
}
body.dark-mode .profile-menu {
  background: rgba(17, 24, 39, 0.96);
  border-color: var(--theme-border);
}
.profile-menu.open {
  display: block;
  z-index: 2147483647 !important; /* Keep above any freeform widget stacking */
}
.profile-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-border);
}
.profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.profile-name {
  font-weight: 600;
  color: var(--theme-text);
}
.profile-email {
  font-size: 0.8rem;
  color: var(--theme-text-muted);
}
body.light-mode .profile-name {
  color: var(--theme-text-dark, #1a1a1a);
}
body.light-mode .profile-email {
  color: var(--theme-text-muted, #6b7280);
}
.profile-menu-section {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-menu-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  font-weight: 500;
}
body.light-mode .profile-menu-item {
  color: var(--theme-text-dark, #1a1a1a);
}
.profile-menu-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--theme-border);
}
body.light-mode .profile-menu-item:hover {
  background: rgba(0,0,0,0.06);
  border-color: var(--theme-border);
}
.profile-menu-item.logout {
  color: var(--theme-error);
}
.profile-menu-divider {
  height: 1px;
  background: var(--theme-border);
  margin: 4px 0;
}
.profile-menu-subscription {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--theme-border);
  font-size: 0.85rem;
  color: var(--theme-text-muted);
}
body.light-mode .profile-menu-subscription {
  color: var(--theme-text-muted, #6b7280);
}
.profile-menu-subtitle {
  font-weight: 600;
  color: var(--theme-text);
  margin-bottom: 6px;
}
body.light-mode .profile-menu-subtitle {
  color: var(--theme-text-dark, #1a1a1a);
}

/* Floating Apps button - always on top, centered */
.apps-fab {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -70px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--theme-border, rgba(255,255,255,0.1));
  background: var(--theme-card-bg, rgba(10, 12, 22, 0.65));
  backdrop-filter: blur(10px);
  color: var(--theme-text);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647 !important;
}

.apps-fab:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border-color: var(--theme-primary);
  transform: translateX(-50%) translateY(-2px);
  background: var(--theme-widget-header-bg, var(--theme-card-bg));
}

.apps-fab:active { 
  transform: translateX(-50%) scale(0.95);
}

.apps-menu {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 9999998;
  display: none;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  background: var(--theme-card-bg, rgba(10, 12, 22, 0.85));
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  border: 1px solid var(--theme-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 1;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.apps-menu.open {
  display: flex;
}

.apps-menu.idle-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-80px);
  pointer-events: none;
}

.app-btn {
  width: 90px;
  height: 76px;
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(255, 255, 255, 0.04));
  color: var(--theme-text);
  font-weight: 500;
  font-size: 13px;
  box-shadow: none;
  touch-action: manipulation;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.app-btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-2px);
  border-color: var(--theme-primary);
  background: var(--theme-widget-header-bg, rgba(255, 255, 255, 0.08));
}

.app-btn:active { transform: scale(0.95); }

.app-btn-icon {
  font-size: 1.8rem;
}

/* Floating Voice Assistant button */
.copilot-fab {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 70px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--theme-border, rgba(255,255,255,0.1));
  background: var(--theme-card-bg, rgba(10, 12, 22, 0.65));
  backdrop-filter: blur(10px);
  color: var(--theme-text);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}

.copilot-fab:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border-color: var(--theme-secondary);
  transform: translateX(-50%) translateY(-2px);
  background: var(--theme-widget-header-bg, var(--theme-card-bg));
}

.copilot-fab:active { 
  transform: translateX(-50%) scale(0.95);
}

/* Floating Layout Save button */
.layout-save-fab {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 140px; 
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(86, 168, 255, 0.25);
  touch-action: manipulation;
  cursor: pointer;
  transition: all 0.2s ease;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}

.layout-save-fab.dirty::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #f59e0b;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.45);
}

.layout-save-fab:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%) translateY(-2px);
  opacity: 0.95;
}

.layout-save-fab:active {
  transform: translateX(-50%) scale(0.95);
}

body.admin-locked .layout-save-fab {
  display: none;
}

/* Floating Zoom buttons */
.zoom-fab {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--theme-border, rgba(255,255,255,0.1));
  background: var(--theme-card-bg, rgba(10, 12, 22, 0.65));
  backdrop-filter: blur(10px);
  color: var(--theme-text);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}

.zoom-fab:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border-color: var(--theme-primary);
  transform: translateX(-50%) translateY(-2px);
  background: var(--theme-widget-header-bg, var(--theme-card-bg));
}

.zoom-fab:active { 
  transform: translateX(-50%) scale(0.95);
}

.zoom-fab.zoom-in {
  margin-left: 210px;
}

.zoom-fab.zoom-out {
  margin-left: 280px;
}

.kiosk-fab {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 350px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--theme-border, rgba(255,255,255,0.1));
  background: var(--theme-card-bg, rgba(10, 12, 22, 0.65));
  backdrop-filter: blur(10px);
  color: var(--theme-text);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kiosk-fab:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border-color: var(--theme-primary);
  transform: translateX(-50%) translateY(-2px);
  background: var(--theme-widget-header-bg, var(--theme-card-bg));
}

.kiosk-fab:active {
  transform: translateX(-50%) scale(0.95);
}

.kiosk-fab.active {
  border-color: var(--theme-primary);
  background: var(--theme-widget-header-bg, var(--theme-card-bg));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.layout-save-toast {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--theme-card-bg, rgba(10, 12, 22, 0.9));
  color: var(--theme-text);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  z-index: 9999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.layout-save-toast.show {
  opacity: 1;
}

.save-feedback-toast {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translate(-50%, -8px);
  background: color-mix(in srgb, var(--theme-card-bg, #111827) 90%, #22c55e 10%);
  color: var(--theme-text, #fff);
  border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,0.2)) 70%, #22c55e 30%);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 10000000;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.save-feedback-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.save-feedback-pulse {
  animation: save-feedback-pulse 0.42s ease;
}

@keyframes save-feedback-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* Ensure the lock screen is always on top of EVERYTHING */
#lockModal, .lock-overlay {
    z-index: 10000 !important;
}
/* Floating Lock/Unlock button */
.lock-fab {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0px; 
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--theme-border, rgba(255,255,255,0.1));
  background: var(--theme-card-bg, rgba(10, 12, 22, 0.65));
  backdrop-filter: blur(10px);
  color: var(--theme-text);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}

.lock-fab.unlocked {
  background: linear-gradient(135deg, #3FE7A7, #219d70);
  box-shadow: 0 4px 16px rgba(63, 231, 167, 0.4), 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none;
  color: #000;
}

.lock-fab:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border-color: var(--theme-primary);
  transform: translateX(-50%) translateY(-2px);
  background: var(--theme-widget-header-bg, var(--theme-card-bg));
}

.lock-fab.unlocked:hover {
  background: linear-gradient(135deg, #3FE7A7, #219d70);
  box-shadow: 0 6px 20px rgba(63, 231, 167, 0.5);
}

.lock-fab:active { 
  transform: translateX(-50%) scale(0.95);
}

/* Floating app bar: light-mode theme overrides */
body.light-mode .apps-fab,
body.light-mode .copilot-fab,
body.light-mode .zoom-fab,
body.light-mode .kiosk-fab,
body.light-mode .lock-fab {
  background: var(--theme-card-bg) !important;
  color: var(--theme-text-dark, #1a1a1a) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
body.light-mode .apps-fab:hover,
body.light-mode .copilot-fab:hover,
body.light-mode .zoom-fab:hover,
body.light-mode .kiosk-fab:hover,
body.light-mode .lock-fab:hover {
  background: var(--theme-widget-header-bg, var(--theme-card-bg)) !important;
  color: var(--theme-widget-header-text, var(--theme-text-dark, #1a1a1a)) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
body.light-mode .apps-menu {
  background: var(--theme-card-bg) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--theme-border);
}
body.light-mode .app-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--theme-text-dark, #1a1a1a) !important;
}
body.light-mode .app-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--theme-text-dark, #1a1a1a) !important;
}
body.light-mode .layout-save-toast {
  background: var(--theme-card-bg) !important;
  color: var(--theme-text-dark, #1a1a1a) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Admin Lock Password Modal - theme-aware for readability */
.lock-password-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* When open, force above all other UI (e.g. widgets, help, copilot) */
.lock-password-modal-overlay.lock-password-modal-open {
  z-index: 2147483647 !important;
  display: flex !important;
  visibility: visible !important;
}

.lock-password-modal {
  background: var(--theme-card-bg, rgba(17, 24, 39, 0.95));
  border: 1px solid var(--theme-border);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lock-password-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.lock-password-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--theme-text);
}

.lock-password-modal-close {
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.15));
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: background 0.2s;
}

.lock-password-modal-close:hover {
  background: var(--theme-input-border, rgba(0, 0, 0, 0.25));
}

.lock-password-modal-body {
  padding: 0;
}

.lock-password-keypad-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lock-password-keypad-display {
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-text);
}

.lock-password-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.lock-password-keypad-btn {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.1));
  color: var(--theme-text);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 50px;
}

.lock-password-keypad-btn:hover {
  background: var(--theme-input-border, rgba(0, 0, 0, 0.2));
  border-color: var(--theme-accent);
}

.lock-password-keypad-btn:active {
  transform: scale(0.95);
}

.lock-password-keypad-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.lock-password-keypad-clear {
  flex: 1;
  background: var(--theme-error-bg, rgba(239, 68, 68, 0.15));
  border-color: var(--theme-error);
  color: var(--theme-error);
}

.lock-password-keypad-submit {
  flex: 1;
  background: var(--theme-success-bg, rgba(34, 197, 94, 0.15));
  border-color: var(--theme-success);
  color: var(--theme-success);
}

.copilot-panel {
  position: fixed;
  top: 88px;
  right: 24px;
  z-index: 9999997;
  width: min(520px, calc(100vw - 48px));
  background: rgba(10, 12, 22, 0.85);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  border: 1px solid var(--theme-border);
  overflow: hidden;
  display: none;
  backdrop-filter: blur(16px);
}

.copilot-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--theme-text);
  font-weight: 800;
  border-bottom: 1px solid var(--theme-border);
}

.copilot-panel-header-actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}

.copilot-header-icon-btn {
  min-width: 40px;
  font-size: 1.05rem;
  line-height: 1;
}

.copilot-panel-header-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Voice assistant — full command reference popup (show commands / 📋) */
.assistant-cmd-ref-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.assistant-cmd-ref-panel {
  width: min(560px, 100%);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--theme-card-bg, rgba(18, 20, 32, 0.98));
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.assistant-cmd-ref-header {
  position: relative;
  padding: 16px 44px 12px 18px;
  border-bottom: 1px solid var(--theme-border);
  flex-shrink: 0;
  background: var(--theme-widget-header-bg, rgba(255, 255, 255, 0.04));
}

.assistant-cmd-ref-title {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.assistant-cmd-ref-subtitle {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--theme-text-muted);
  font-weight: 500;
}

.assistant-cmd-ref-subtitle strong {
  color: var(--theme-text);
  font-weight: 700;
}

.assistant-cmd-ref-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--theme-text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.assistant-cmd-ref-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.assistant-cmd-ref-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 18px 20px;
  flex: 1;
  min-height: 0;
}

.assistant-cmd-ref-section {
  margin-bottom: 18px;
}

.assistant-cmd-ref-section:last-child {
  margin-bottom: 0;
}

.assistant-cmd-ref-section-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--theme-primary, #56a8ff);
}

.assistant-cmd-ref-list {
  margin: 0;
}

.assistant-cmd-ref-phrase {
  margin: 0 0 2px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--theme-text);
}

.assistant-cmd-ref-desc {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--theme-text-muted);
  padding-left: 0;
}

.assistant-cmd-ref-desc:last-child {
  margin-bottom: 0;
}

.copilot-speak-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--theme-text-muted);
  cursor: pointer;
  user-select: none;
}

.copilot-speak-toggle input {
  accent-color: var(--theme-primary);
}

.copilot-panel-body {
  padding: 14px 16px;
}

.copilot-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  margin-bottom: 10px;
}

.copilot-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--theme-button-secondary);
}

.copilot-dot.listening { background: var(--theme-success); }
.copilot-dot.armed { background: var(--theme-primary); }
.copilot-dot.error { background: var(--theme-error, #b91c1c); }

.copilot-transcript {
  padding: 12px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  min-height: 70px;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--theme-text);
  background: rgba(0, 0, 0, 0.3);
}

.copilot-transcript em {
  font-style: italic;
  color: var(--theme-text-muted);
  opacity: 0.8;
}

.copilot-hint {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--theme-text-muted);
}

.copilot-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.copilot-choice {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--theme-primary);
  background: rgba(86, 168, 255, 0.1);
  color: var(--theme-primary);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 48px;
  transition: all 0.2s;
}

.copilot-choice:hover {
  background: var(--theme-primary);
  color: #fff;
}

.copilot-choice:active { transform: scale(0.98); }

.widget {
  background: var(--theme-widget-bg);
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  padding: clamp(12px, 2vw, 20px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: none; /* we use custom handles; both caused conflicts */
  min-width: 300px;
  min-height: 250px;
  position: absolute;
  cursor: move;
  touch-action: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* Removed contain: layout style - it was interfering with widget positioning */
  /* Promote to own compositor layer during interaction for smooth transforms/resize */
  will-change: auto;
  /* Ensure inline styles take precedence */
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  /* Ensure widgets are always below app bar (z-index 9999998) but still accessible */
  /* Widgets should be at z-index 9999990 or lower, but maximized widgets are at 9999997 */
  z-index: 1000; /* Base z-index for widgets */
}

/* Maximized: JS controls position/size via inline styles (viewport-aware). CSS only: visual + stacking. */
.widget.maximized {
  position: fixed !important;
  z-index: 9999997 !important; /* Below app bar (9999998) */
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

.widget.maximized .widget-header {
  z-index: 10000 !important;
  position: relative !important;
  pointer-events: auto !important;
}

.widget.maximized .widget-header-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10001 !important;
  position: relative !important;
}

.widget.maximized .widget-max-btn,
.widget.maximized .widget-voice-btn,
.widget.maximized .widget-refresh-btn,
.widget.maximized .refresh-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10002 !important;
  position: relative !important;
}

/* Widget header should always be accessible - ensure it's not hidden */
.widget-header {
  position: relative;
  z-index: 1; /* Above widget content */
}

/* During resize: promote layer, drop blur for buttery-smooth resize */
.widget.widget-resizing {
  will-change: width, height;
  contain: layout paint;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none !important;
}

/* During drag: promote layer for smooth transform */
.widget.widget-dragging {
  will-change: transform;
  contain: layout paint;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none !important;
}

.widget:not(.maximized):hover {
   border-color: rgba(86, 168, 255, 0.35);
   background: rgba(255, 255, 255, 0.08);
}
body.light-mode .widget:not(.maximized):hover {
  background: rgba(0, 0, 0, 0.03);
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(10px, 1.5vw, 15px);
  padding-bottom: clamp(8px, 1.2vw, 10px);
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-widget-header-bg);
  flex-shrink: 0;
}

/* Custom resize handle — touch-friendly (min 44px; larger on small screens) */
.widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  cursor: nwse-resize;
  background: transparent;
  z-index: 1001;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Larger resize handle on smaller screens/touch devices */
@media (max-width: 768px) {
  .widget-resize-handle {
    width: 70px;
    height: 70px;
  }
}

/* Even larger on very small screens (phones in portrait) */
@media (max-width: 480px) {
  .widget-resize-handle {
    width: 90px;
    height: 90px;
  }
}

/* Visual indicator for resize handle */
.widget-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent rgba(255, 255, 255, 0.2) transparent;
  pointer-events: none;
}
body.light-mode .widget-resize-handle::after {
  border-color: transparent transparent rgba(0, 0, 0, 0.18) transparent;
}

@media (max-width: 768px) {
  .widget-resize-handle::after {
    border-width: 0 0 20px 20px;
    bottom: 6px;
    right: 6px;
  }
}

@media (max-width: 480px) {
  .widget-resize-handle::after {
    border-width: 0 0 24px 24px;
    bottom: 8px;
    right: 8px;
  }
}

.widget-resize-handle:hover::after {
  border-color: transparent transparent rgba(86, 168, 255, 0.6) transparent;
}
body.light-mode .widget-resize-handle:hover::after {
  border-color: transparent transparent rgba(0, 0, 0, 0.35) transparent;
}

.widget-title {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--theme-widget-header-text, var(--theme-text-dark));
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
}

.widget-icon {
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  color: var(--theme-primary);
}

.widget-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.widget-content::-webkit-scrollbar {
  width: 8px;
}

.widget-content::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
  border-radius: 4px;
}

.widget-content::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 4px;
}

.widget-content::-webkit-scrollbar-thumb:hover {
  background: var(--theme-primary);
}


/* Lists Widget */
.todo-item {
  padding: clamp(10px, 1.5vw, 12px);
  margin-bottom: clamp(6px, 1vw, 8px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 4px solid var(--theme-button-primary);
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 10px);
  transition: background 0.2s;
}

.todo-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.todo-item.completed {
  opacity: 0.6;
  text-decoration: line-through;
  border-left-color: var(--theme-success);
}

.todo-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-top: 2px;
}

.todo-item-content {
  flex: 1;
}

.todo-title {
  font-weight: 600;
  color: var(--theme-text-dark);
  margin-bottom: clamp(3px, 0.5vw, 4px);
  font-size: clamp(0.85rem, 2vw, 1rem);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.todo-body {
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  color: var(--theme-text-secondary);
  margin-top: clamp(3px, 0.5vw, 4px);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.todo-due {
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  color: var(--theme-text-muted);
  margin-top: clamp(3px, 0.5vw, 4px);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--theme-text-muted);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.todo-list-selector {
  margin-bottom: clamp(10px, 1.5vw, 15px);
  padding-bottom: clamp(8px, 1.2vw, 12px);
  border-bottom: 1px solid var(--theme-border);
}

.todo-list-select {
  width: 100%;
  padding: clamp(8px, 1.2vw, 12px);
  border: 1px solid var(--theme-input-border);
  border-radius: 8px;
  font-size: clamp(0.85rem, 2vw, 1rem);
  background: var(--theme-input-bg, var(--theme-card-bg));
  color: var(--theme-text, var(--theme-text-dark));
  cursor: pointer;
  touch-action: manipulation;
  font-weight: 600;
  transition: border-color 0.2s;
}
body.light-mode .todo-list-select {
  background: var(--theme-card-bg, #ffffff) !important;
  color: var(--theme-text-dark, #1a1a1a) !important;
  border-color: var(--theme-input-border, var(--theme-border));
}

.todo-list-select:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 2px rgba(86, 168, 255, 0.2);
}

.todo-list-select option {
  background: var(--theme-card-bg, var(--theme-input-bg, #0B1030));
  color: var(--theme-text, var(--theme-text-dark, #ffffff));
}
body.light-mode .todo-list-select option {
  background: var(--theme-card-bg, #ffffff);
  color: var(--theme-text-dark, #1a1a1a);
}
body.dark-mode .todo-list-select option {
  background: var(--theme-card-bg, #1a1f35);
  color: var(--theme-text, #f3f4f6);
}

.todo-list-info {
  font-size: clamp(0.7rem, 1.3vw, 0.85rem);
  color: var(--theme-text-muted);
  margin-top: clamp(4px, 0.6vw, 6px);
}

.todo-add-form {
  margin-bottom: clamp(10px, 1.5vw, 15px);
  padding: clamp(8px, 1.2vw, 12px);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.todo-add-input {
  flex: 1;
  min-width: 0;
  width: 0;
  padding: clamp(8px, 1.2vw, 12px);
  border: 1px solid var(--theme-input-border);
  border-radius: 8px;
  font-size: clamp(0.85rem, 2vw, 1rem);
  box-sizing: border-box;
  background: var(--theme-input-bg);
  color: var(--theme-text);
  transition: border-color 0.2s;
}

.todo-add-input:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 2px rgba(86, 168, 255, 0.2);
}

.todo-add-button {
  flex: 0 0 auto;
  width: auto;
  max-width: 100px;
  padding: clamp(8px, 1.2vw, 12px) 14px;
  background: var(--theme-button-primary-gradient);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(86, 168, 255, 0.2);
}

.todo-add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(86, 168, 255, 0.3);
}

.todo-add-button:active {
  transform: scale(0.98);
}

.todo-item-checkbox {
  width: clamp(18px, 2.5vw, 24px);
  height: clamp(18px, 2.5vw, 24px);
  cursor: pointer;
  margin-right: clamp(8px, 1.2vw, 12px);
  margin-top: 2px;
  flex-shrink: 0;
}

.todo-link {
  color: var(--theme-primary);
  text-decoration: underline;
  cursor: pointer;
}

.todo-link:hover {
  color: var(--theme-button-primary-hover);
}

/* Webview Widget */
.webview-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-widget-header-bg);
}

.webview-btn {
  padding: 8px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-button-secondary);
  color: var(--theme-text);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px;
  transition: all 0.2s;
}

.webview-btn:hover {
  background: var(--theme-button-secondary-hover);
  border-color: rgba(86, 168, 255, 0.3);
}

.webview-btn:active {
  transform: scale(0.98);
}

.webview-url {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--theme-input-border);
  border-radius: 10px;
  font-size: 0.9rem;
  min-height: 44px;
  background: var(--theme-input-bg);
  color: var(--theme-text);
  transition: border-color 0.2s;
}

.webview-url:focus {
  outline: none;
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 2px rgba(86, 168, 255, 0.2);
}

.webview-frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* Calendar Widget */
.event-item {
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border-left: 4px solid var(--theme-accent);
}

.event-time {
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  color: var(--theme-text-muted);
  margin-bottom: clamp(4px, 0.6vw, 6px);
  font-weight: 600;
}

.event-title {
  font-weight: 600;
  color: var(--theme-text-dark);
  margin-bottom: clamp(3px, 0.5vw, 4px);
  font-size: clamp(0.85rem, 2vw, 1rem);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.event-location {
  font-size: clamp(0.7rem, 1.3vw, 0.85rem);
  color: var(--theme-text-muted);
  margin-top: clamp(3px, 0.5vw, 4px);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* SoundCloud widget */

/* Weather Widget */
.weather-main {
  text-align: center;
  padding: 20px;
}

.weather-temp {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  color: var(--theme-text-dark);
  margin: clamp(15px, 2.5vw, 20px) 0;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.weather-desc {
  font-size: clamp(0.9rem, 2.2vw, 1.3rem);
  color: var(--theme-text-muted);
  margin-bottom: clamp(15px, 2.5vw, 20px);
  text-transform: capitalize;
}

.weather-icon {
  font-size: clamp(3rem, 8vw, 5rem);
  margin: clamp(15px, 2.5vw, 20px) 0;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

.weather-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.weather-detail-item {
  padding: 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  text-align: center;
}

.weather-detail-label {
  color: var(--theme-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.weather-detail-value {
  font-weight: 500;
  color: var(--theme-text-dark);
  font-size: 0.9rem;
}

.loading {
  text-align: center;
  padding: 40px;
  color: var(--theme-text-muted);
  font-size: 1.1rem;
}

.error {
  text-align: center;
  padding: 20px;
  color: var(--theme-error);
  background: var(--theme-error-bg);
  border-radius: 8px;
  margin: 10px 0;
}

.refresh-btn,
.widget-refresh-btn {
  background: var(--theme-button-secondary);
  color: var(--theme-text-secondary);
  border: 1px solid transparent;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  touch-action: manipulation;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.refresh-btn:hover {
  background: var(--theme-button-secondary-hover);
  border-color: rgba(86, 168, 255, 0.35);
  color: var(--theme-text);
}

.refresh-btn:active {
  transform: scale(0.95);
}

.auth-btn-small {
  background: var(--theme-button-primary-gradient);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  touch-action: manipulation;
  margin-left: 10px;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(86, 168, 255, 0.2);
}

.auth-btn-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(86, 168, 255, 0.3);
}

.auth-btn-small:active {
  transform: scale(0.95);
}

.widget-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Touch-friendly header buttons: min 44px tap target (accessibility + touch) */
.widget-header-btn,
.widget-max-btn,
.widget-voice-btn,
.widget-refresh-btn,
.refresh-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Fullscreen/maximize button for widget headers */
.widget-max-btn {
  background: var(--theme-button-secondary);
  color: var(--theme-text-secondary);
  border: 1px solid transparent;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 4px;
}

.widget-voice-btn {
  background: var(--theme-button-secondary);
  color: var(--theme-text-secondary);
  border: 1px solid transparent;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  touch-action: manipulation;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
body.light-mode .widget-header-actions .widget-max-btn,
body.light-mode .widget-header-actions .widget-voice-btn,
body.light-mode .widget-header-actions .widget-refresh-btn,
body.light-mode .widget-header-actions .refresh-btn {
  color: #1a1a1a !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.widget-max-btn:hover {
  background: var(--theme-button-secondary-hover);
  color: var(--theme-text);
  border-color: rgba(86, 168, 255, 0.3);
}
body.light-mode .widget-header-actions .widget-voice-btn:hover,
body.light-mode .widget-header-actions .widget-max-btn:hover,
body.light-mode .widget-header-actions .widget-refresh-btn:hover,
body.light-mode .widget-header-actions .refresh-btn:hover {
  color: #1a1a1a !important;
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.widget-max-btn:active { transform: scale(0.98); }

@media (max-width: 768px) {
  .dashboard.layout-freeform {
    grid-template-columns: 1fr;
    height: auto;
    overflow-y: auto;
  }
  .widget {
    min-width: 100%;
    resize: none;
  }
}

/* Dual-Corner Resize Handles (bottom-left) - base styles for all screens */
.widget-resize-handle-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  cursor: nesw-resize;
  z-index: 1001;
  pointer-events: auto;
  background: transparent;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.widget-resize-handle-bl::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
  pointer-events: none;
}
body.light-mode .widget-resize-handle-bl::after {
  border-color: transparent rgba(0, 0, 0, 0.18) transparent transparent;
}
@media (max-width: 768px) {
  .widget-resize-handle-bl { width: 70px; height: 70px; }
  .widget-resize-handle-bl::after { border-width: 0 20px 20px 0; bottom: 6px; left: 6px; }
}
@media (max-width: 480px) {
  .widget-resize-handle-bl { width: 90px; height: 90px; }
  .widget-resize-handle-bl::after { border-width: 0 24px 24px 0; bottom: 8px; left: 8px; }
}
.widget-resize-handle-bl:hover::after {
  border-color: transparent rgba(86, 168, 255, 0.6) transparent transparent;
}
body.light-mode .widget-resize-handle-bl:hover::after {
  border-color: transparent rgba(0, 0, 0, 0.35) transparent transparent;
}

.help-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 99999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.help-content { background: var(--theme-card-bg, #1a1f35); border: 1px solid var(--theme-border, rgba(255,255,255,0.1)); width: 90%; max-width: 600px; max-height: 80vh; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.help-header { padding: 20px; border-bottom: 1px solid var(--theme-border, rgba(255,255,255,0.1)); display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); }
.help-header h2 { margin: 0; color: var(--theme-primary, #56A8FF); font-size: 1.5rem; }
.help-body { padding: 20px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.help-section h3 { margin: 0 0 10px 0; color: var(--theme-text, #fff); border-bottom: 2px solid var(--theme-button-secondary, rgba(255,255,255,0.1)); padding-bottom: 5px; font-size: 1rem; }
.help-section p { margin: 5px 0; color: var(--theme-text-muted, #aaa); font-size: 0.9rem; line-height: 1.4; }
@media (max-width: 768px) { .help-body { grid-template-columns: 1fr; } }

/* --- Notes widget (Fetch-DOM) - matches /notes.html --- */
.notes-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--theme-card-bg);
}
.notes-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-card-bg);
}
.notes-toolbar .btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: var(--theme-button-primary);
  color: white;
}
.notes-toolbar .btn:hover { opacity: 0.9; }
.notes-toolbar .btn-secondary { background: var(--theme-button-secondary); color: var(--theme-text); }
.notes-toolbar .btn-danger { background: transparent; color: var(--theme-error); margin-left: auto; }
.notes-main { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.notes-sidebar {
  width: 220px; min-width: 160px; flex-shrink: 0;
  border-right: 1px solid var(--theme-border);
  background: var(--theme-card-bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.notes-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.notes-list-item {
  padding: 10px 14px; cursor: pointer;
  border-left: 3px solid transparent; margin: 2px 8px; border-radius: 6px;
  font-size: 14px; font-weight: 500;
  color: var(--theme-text, var(--theme-text-dark));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
}
.notes-list-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.notes-list-pin {
  font-size: 11px;
  font-weight: 600;
  color: var(--theme-secondary, #8b5cf6);
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.notes-list-item:hover { background: rgba(255,255,255,0.04); }
.notes-list-item.active { background: rgba(86, 168, 255, 0.1); border-left-color: var(--theme-button-primary); }
body.light-mode .notes-list-item { color: var(--theme-text-dark, #1a1a1a); }
body.light-mode .notes-list-item:hover { background: rgba(0,0,0,0.04); }
body.light-mode .notes-list-item.active { background: rgba(102, 126, 234, 0.12); border-left-color: var(--theme-button-primary); }
.notes-list-empty { padding: 24px 16px; text-align: center; color: var(--theme-text-muted); font-size: 14px; }
.notes-editor { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--theme-card-bg); }
.notes-editor-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--theme-text-muted); font-size: 16px; padding: 24px;
}
.notes-editor-inner { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 16px 24px; min-height: 0; }
.notes-due-toggle-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.notes-due-toggle-btn {
  min-height: 40px !important;
  border-radius: 10px !important;
}
.notes-timeline-pin-card {
  flex-shrink: 0;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  background: rgba(139, 92, 246, 0.08);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-secondary, #8b5cf6) 14%, transparent),
    var(--theme-card-bg, transparent) 55%
  );
}
.notes-timeline-pin-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.notes-timeline-pin-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 2px;
}
.notes-timeline-pin-copy {
  min-width: 0;
  flex: 1;
}
.notes-timeline-pin-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--theme-text, var(--theme-text-dark));
  margin-bottom: 4px;
}
.notes-timeline-pin-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--theme-text-muted, #888);
}
.notes-timeline-pin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
/* Touch-first: same pattern as Lists due-date sheet entry point */
.notes-timeline-date-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  background: var(--theme-card-bg);
  color: var(--theme-text, var(--theme-text-dark));
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex: 1 1 200px;
}
.notes-timeline-date-btn:focus-visible {
  outline: 2px solid var(--theme-button-primary);
  outline-offset: 2px;
}
.notes-timeline-date-btn:active {
  opacity: 0.94;
  filter: brightness(1.06);
}
.notes-timeline-date-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.notes-timeline-date-btn-primary {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.notes-timeline-date-btn-secondary {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.78;
  line-height: 1.35;
}
.notes-timeline-date-btn-secondary[hidden] {
  display: none !important;
}
.notes-timeline-date-btn-chevron {
  flex-shrink: 0;
  opacity: 0.5;
  font-size: 0.7rem;
  line-height: 1;
  padding-top: 2px;
}
.notes-timeline-clear-btn {
  min-height: 44px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.notes-title-input {
  font-size: 22px; font-weight: 700; border: none; background: transparent;
  color: var(--theme-text, var(--theme-text-dark)); padding: 0 0 12px 0; margin-bottom: 12px;
  border-bottom: 1px solid var(--theme-border); outline: none; width: 100%;
}
.notes-title-input::placeholder { color: var(--theme-text-muted); opacity: 0.8; }
.notes-format-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--theme-border);
}
.notes-format-select {
  padding: 6px 8px; border-radius: 8px; border: 1px solid var(--theme-border);
  background: var(--theme-card-bg); color: var(--theme-text, var(--theme-text-dark));
  font-size: 13px; cursor: pointer; max-width: 100px;
}
.notes-fmt-btn {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--theme-border);
  background: var(--theme-button-secondary, rgba(255,255,255,0.08));
  color: var(--theme-text, var(--theme-text-dark));
  font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.2;
}
.notes-fmt-btn:hover { opacity: 0.92; filter: brightness(1.08); }
.notes-fmt-u { text-decoration: underline; }
.notes-fmt-sep {
  display: inline-block; width: 1px; height: 22px; background: var(--theme-border);
  margin: 0 2px; flex-shrink: 0;
}
.notes-hl-btn {
  width: 28px; height: 28px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;
}
body.light-mode .notes-hl-btn { border-color: rgba(0,0,0,0.2); }
.notes-rich-editor {
  flex: 1; min-height: 200px; overflow-y: auto; width: 100%;
  font-size: 18px; line-height: 1.7; border: none; background: transparent;
  color: var(--theme-text, var(--theme-text-dark)); padding: 4px 0 8px;
  outline: none; position: relative;
}
.notes-rich-editor:focus-visible { outline: 2px solid var(--theme-button-primary); outline-offset: 2px; border-radius: 4px; }
.notes-rich-editor.notes-rich-editor-empty::before {
  content: attr(data-placeholder);
  color: var(--theme-text-muted); opacity: 0.85; pointer-events: none;
  position: absolute; left: 0; top: 4px;
}
.notes-rich-editor p { margin: 0 0 0.6em; }
.notes-rich-editor p:last-child { margin-bottom: 0; }
.notes-rich-editor ul, .notes-rich-editor ol { margin: 0.4em 0; padding-left: 1.4em; }
.notes-rich-editor li { margin: 0.2em 0; }
.notes-rich-editor mark { background: rgba(254, 240, 138, 0.55); padding: 0 2px; border-radius: 2px; }
body.light-mode .notes-rich-editor mark { background: rgba(234, 179, 8, 0.35); }
.notes-rich-editor font[size="1"] { font-size: 0.7rem; }
.notes-rich-editor font[size="2"] { font-size: 0.85rem; }
.notes-rich-editor font[size="3"] { font-size: 1rem; }
.notes-rich-editor font[size="4"] { font-size: 1.2rem; }
.notes-rich-editor font[size="5"] { font-size: 1.45rem; }
.notes-rich-editor font[size="6"] { font-size: 1.75rem; }
.notes-rich-editor font[size="7"] { font-size: 2rem; }
body.light-mode .notes-title-input,
body.light-mode .notes-rich-editor,
body.light-mode .notes-format-select,
body.light-mode .notes-fmt-btn {
  color: var(--theme-text-dark, #1a1a1a) !important;
}
.notes-save-status { font-size: 12px; color: var(--theme-text-muted); padding: 4px 0; }
body.light-mode .notes-wrap,
body.light-mode .notes-toolbar,
body.light-mode .notes-sidebar,
body.light-mode .notes-editor {
  background: var(--theme-card-bg, #ffffff) !important;
}
body.light-mode .notes-editor-empty,
body.light-mode .notes-list-empty {
  color: var(--theme-text-muted, #6b7280) !important;
}
body.light-mode .notes-toolbar .btn-secondary {
  color: var(--theme-text-dark, #1a1a1a) !important;
  background: var(--theme-button-secondary, #e5e7eb) !important;
}
body.light-mode .notes-timeline-pin-card {
  background: rgba(124, 58, 237, 0.06);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-secondary, #7c3aed) 12%, transparent),
    var(--theme-card-bg, #fff) 58%
  );
}
body.light-mode .notes-list-pin {
  color: var(--theme-secondary, #6d28d9);
}
@media (max-width: 480px) { .notes-sidebar { width: 100%; min-width: 0; } .notes-main { flex-direction: column; } }
@media (max-width: 768px) {
  .notes-toolbar { flex-wrap: wrap; }
  .notes-toolbar .btn-danger { margin-left: 0; }
  .notes-editor-inner { padding: 12px; }
}

/* --- Maintenance widget (Fetch-DOM) --- */
.maint-wrap .scroll { overflow-y: auto; overflow-x: hidden; padding: 12px 14px; }
.maint-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; flex-shrink: 0; border-bottom: 1px solid var(--theme-border); background: var(--theme-widget-header-bg, var(--theme-card-bg)); }
.maint-top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.maint-title { font-weight: 700; font-size: 16px; color: var(--theme-widget-header-text, var(--theme-text)); white-space: nowrap; }
.health-ring { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.health-ring.good { background: rgba(34, 197, 94, 0.2); color: var(--theme-success, #22c55e); border: 2px solid rgba(34, 197, 94, 0.5); }
.health-ring.warn { background: rgba(234, 179, 8, 0.2); color: #eab308; border: 2px solid rgba(234, 179, 8, 0.5); }
.health-ring.alert { background: rgba(239, 68, 68, 0.2); color: var(--theme-error, #ef4444); border: 2px solid rgba(239, 68, 68, 0.5); }
.maint-view-bar { display: flex; gap: 4px; flex-shrink: 0; }
.maint-view-btn { min-width: 44px; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--theme-border); background: var(--theme-button-secondary); color: var(--theme-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.maint-view-btn:hover { background: var(--theme-button-secondary-hover); color: var(--theme-text); border-color: rgba(86, 168, 255, 0.3); }
.maint-view-btn.active { background: var(--theme-button-primary); color: var(--theme-widget-header-text, #fff); border-color: var(--theme-primary); }
body.light-mode .maint-view-btn { background: rgba(0,0,0,0.06); color: #1a1a1a; border-color: rgba(0,0,0,0.12); }
body.light-mode .maint-view-btn:hover { background: rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.18); }
body.light-mode .maint-view-btn.active { background: var(--theme-button-primary); color: #fff; border-color: var(--theme-primary); }
.maint-add-task-btn { background: var(--theme-button-primary); color: var(--theme-widget-header-text, #fff); border-color: var(--theme-primary); }
.maint-add-task-btn:hover { opacity: 0.94; background: var(--theme-button-primary-hover, var(--theme-button-primary)); color: var(--theme-widget-header-text, #fff); }
body.light-mode .maint-add-task-btn { color: #fff; border-color: var(--theme-primary); }
/* When view buttons are in widget header, add spacing from other header buttons */
.widget-header-actions .maint-view-btn { margin-right: 4px; }
.maint-card { border-radius: 16px; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 100px; justify-content: space-between; border: 2px solid; }
.maint-card.good { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.5); }
.maint-card.upcoming { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.5); }
.maint-card.overdue { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.6); }
.maint-card-main { display: flex; align-items: flex-start; gap: 10px; position: relative; }
.maint-card .icon { font-size: 28px; flex-shrink: 0; }
.maint-card-body { flex: 1; min-width: 0; }
.maint-card .name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.maint-card .name .asset { font-weight: 400; color: var(--theme-text-muted); }
.maint-dashboard-row { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; color: var(--theme-text-muted); margin-top: 4px; }
.maint-dash-item { white-space: nowrap; }
.maint-dash-label { font-weight: 600; margin-right: 2px; }
.maint-remove-btn { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--theme-border); background: var(--theme-input-bg,rgba(0,0,0,0.2)); color: var(--theme-text-muted); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; }
.maint-remove-btn:hover { opacity: 1; color: var(--theme-error); background: rgba(239,68,68,0.15); }
.maint-card .meta { font-size: 12px; color: var(--theme-text-muted); margin-top: 2px; }
.maint-card .meta.overdue { color: var(--theme-error); font-weight: 600; }
.maint-card .actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.maint-card .actions button { flex: 1; min-width: 70px; padding: 8px 10px; border-radius: 10px; border: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.maint-card .actions .maint-edit-btn { flex: 0 0 auto; background: rgba(86, 168, 255, 0.15); color: var(--theme-button-primary); border: 1px solid rgba(86, 168, 255, 0.3); }
.maint-card .actions .maint-edit-btn:hover { background: rgba(86, 168, 255, 0.25); }
.maint-card .actions .btn-done { background: var(--theme-success, #22c55e); color: #fff; }
.maint-card .actions .btn-done:disabled { opacity: 0.85; cursor: wait; }
.maint-card .actions .btn-snooze { background: var(--theme-input-bg,rgba(255,255,255,0.15)); color: var(--theme-text); border: 1px solid var(--theme-border); }

/* Life Timeline sheet — instant “you did it” feedback after ✓ Done */
@keyframes maint-card-complete-pop {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); transform: scale(1); }
  40% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); transform: scale(1.01); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); }
}
.maint-card.maint-card--completed-flash {
  animation: maint-card-complete-pop 0.55s ease-out;
  border-color: rgba(34, 197, 94, 0.85) !important;
  background: rgba(34, 197, 94, 0.22) !important;
}
.maint-card.maint-card--done-reorder {
  z-index: 2;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
@keyframes maint-done-celebrate {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
}
.maint-card.maint-card--done-celebrate {
  animation: maint-done-celebrate 0.32s ease-out;
  border-color: rgba(34, 197, 94, 0.9) !important;
}
@keyframes btn-done-success-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.12); transform: scale(1.04); }
}
.maint-card .actions .btn-done.btn-done--success-pulse {
  animation: btn-done-success-pulse 0.45s ease-in-out 2;
  font-weight: 800;
}
.maint-reminder-section { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.maint-reminder-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; color: var(--theme-text); }
.maint-reminder-icon { font-size: 20px; }
.maint-send-reminder-btn { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--theme-border); background: var(--theme-button-primary); color: var(--theme-widget-header-text,#fff); font-weight: 600; cursor: pointer; font-size: 14px; }
.maint-send-reminder-btn:hover:not(:disabled) { opacity: 0.9; }
.maint-send-reminder-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.maint-template-empty { padding: 20px; text-align: center; color: var(--theme-text-muted); font-size: 14px; }
/* Modal portaled to body — always centered on viewport, never scrolled out of view */
.maint-modal-overlay { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 28px); padding-left: max(clamp(12px, 4vw, 28px), env(safe-area-inset-left)); padding-right: max(clamp(12px, 4vw, 28px), env(safe-area-inset-right)); padding-bottom: max(clamp(12px, 4vw, 28px), env(safe-area-inset-bottom)); background: rgba(0,0,0,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.maint-modal-overlay .modal { background: var(--theme-card-bg, #1a1a2e); border: 1px solid var(--theme-border); border-radius: clamp(14px, 2vw, 18px); padding: clamp(18px, 3.5vw, 26px); max-width: min(920px, 100%); width: 100%; max-height: min(92vh, 100%); overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.45); box-sizing: border-box; }
.maint-modal-body { display: flex; flex-direction: column; gap: clamp(16px, 2.5vw, 22px); }
.maint-modal-section { display: flex; flex-direction: column; gap: 2px; }
.maint-section-kicker { font-size: clamp(11px, 1.8vw, 12px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-text-muted); margin: 0 0 8px; }
.maint-label-hint { font-weight: 500; color: var(--theme-text-muted); text-transform: none; letter-spacing: normal; font-size: 0.92em; }
.maint-field-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--theme-text-muted); }
.maint-freq-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 14px); }
.maint-icon-form-group .maint-icon-picker-trigger { margin-top: 2px; }
.maint-icon-picker-trigger {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: 100%;
  min-height: clamp(52px, 12vw, 60px); padding: 10px 14px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(0,0,0,0.22)); color: var(--theme-text);
  cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s;
}
.maint-icon-picker-trigger:hover { border-color: var(--theme-text-muted); background: rgba(255,255,255,0.04); }
.maint-icon-picker-trigger:focus { outline: 2px solid var(--theme-primary, #4285f4); outline-offset: 2px; }
.maint-icon-picker-emoji {
  font-size: clamp(28px, 7vw, 36px); line-height: 1; flex-shrink: 0;
  width: clamp(44px, 11vw, 52px); height: clamp(44px, 11vw, 52px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(0,0,0,0.18); border: 1px solid var(--theme-border);
}
.maint-icon-picker-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.maint-icon-picker-title { font-size: clamp(14px, 2.2vw, 15px); font-weight: 600; color: var(--theme-text); }
.maint-icon-picker-meta { font-size: clamp(12px, 2vw, 13px); color: var(--theme-text-muted); line-height: 1.35; }
.maint-icon-reset-btn {
  margin-top: 8px; padding: 0; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--theme-button-primary, #4285f4); text-decoration: underline; text-underline-offset: 3px;
}
.maint-icon-reset-btn:hover { opacity: 0.9; }
.maint-icon-reset-btn[hidden] { display: none !important; }
.maint-template-block .maint-template-lede { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--theme-text-muted); }
.maint-template-toolbar {
  display: grid; grid-template-columns: 1fr minmax(160px, 220px); gap: clamp(12px, 2.5vw, 16px);
  margin-bottom: 12px; align-items: end;
}
.maint-template-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.maint-field-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--theme-text-muted);
}
.maint-template-search-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--theme-border); background: var(--theme-input-bg, rgba(0,0,0,0.25)); color: var(--theme-text);
  font-size: clamp(14px, 2.2vw, 15px);
}
.maint-template-search-input::placeholder { color: var(--theme-text-muted); opacity: 0.85; }
.maint-template-category-select {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--theme-border); background: var(--theme-input-bg, rgba(0,0,0,0.25)); color: var(--theme-text);
  font-size: clamp(14px, 2.2vw, 15px);
}
.maint-modal-overlay .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--theme-border); }
.maint-modal-overlay .modal-title { font-size: clamp(1.1rem, 2.8vw, 1.25rem); font-weight: 700; color: var(--theme-text); }
.maint-modal-overlay .modal-close { background: var(--theme-button-secondary); border: 1px solid var(--theme-border); color: var(--theme-text); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.maint-modal-overlay .modal-close:hover { background: var(--theme-button-secondary-hover); }
.maint-primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; border: none; background: var(--theme-button-primary); color: var(--theme-widget-header-text, #fff); font-size: clamp(14px, 2.2vw, 15px); font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.1s; min-height: 48px; box-sizing: border-box; }
.maint-modal-overlay .maint-primary-btn { width: 100%; max-width: 100%; margin-top: 4px; }
.maint-primary-btn:hover { opacity: 0.95; }
.maint-primary-btn:active { transform: scale(0.98); }
body.light-mode .maint-primary-btn { color: #fff; }
.maint-item-search-wrap { margin-bottom: 12px; }
.maint-item-search { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--theme-border); background: var(--theme-input-bg,rgba(0,0,0,0.3)); color: var(--theme-text); font-size: 15px; box-sizing: border-box; }
.maint-item-search::placeholder { color: var(--theme-text-muted); }
.maint-search-empty { padding: 24px; text-align: center; color: var(--theme-text-muted); }
.maint-clear-search { background: none; border: none; color: var(--theme-button-primary); cursor: pointer; text-decoration: underline; font-size: inherit; padding: 0; }
.maint-modal-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 2.5vw, 20px); align-items: start; }
.maint-modal-col { min-width: 0; }
.maint-modal .template-grid {
  max-height: min(280px, 38vh); overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 8px;
}
.maint-instructions-block label { margin-bottom: 8px; }
.focus-section { margin-bottom: 16px; }
.focus-section h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--theme-text-muted); margin: 0 0 10px; text-transform: uppercase; }
.template-btn { padding: 12px; border-radius: 12px; border: 1px solid var(--theme-border); background: rgba(0,0,0,0.2); color: var(--theme-text); cursor: pointer; text-align: center; font-size: 14px; }
.template-btn.template-btn--selected { border-color: var(--theme-primary); box-shadow: inset 0 0 0 1px var(--theme-primary); background: rgba(86, 168, 255, 0.15); }
.template-btn .tpl-icon { font-size: 24px; display: block; margin-bottom: 4px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--theme-text-muted); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--theme-border); background: rgba(0,0,0,0.3); color: var(--theme-text); font-size: 16px; box-sizing: border-box; }
.maint-instructions-input { min-height: min(320px, 42vh); resize: vertical; line-height: 1.45; font-size: clamp(13px, 1.8vw, 14px); }
.maint-instructions-disclaimer { margin-top: 8px; border: 1px solid var(--theme-border); border-radius: 10px; padding: 8px 10px; background: rgba(0,0,0,0.15); }
.maint-instructions-disclaimer--prominent { margin-top: 4px; margin-bottom: 12px; border-color: var(--theme-border); }
.maint-instructions-disclaimer summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--theme-text-muted); }
.maint-instructions-disclaimer p { margin: 8px 0 2px; font-size: 12px; color: var(--theme-text-muted); line-height: 1.45; }
@media (max-width: 900px) {
  .maint-modal-grid { grid-template-columns: 1fr; }
  .maint-instructions-input { min-height: min(220px, 36vh); }
  .maint-template-toolbar { grid-template-columns: 1fr; }
  .maint-template-field--category { max-width: 100%; }
}
@media (max-width: 480px) {
  .maint-freq-row { grid-template-columns: 1fr; }
  .maint-modal .template-grid { max-height: min(240px, 34vh); grid-template-columns: repeat(2, 1fr); }
}

/* --- Chores widget (Fetch-DOM) --- */
.chores-renderer .wrap, .widget-chores .wrap { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; box-sizing: border-box; }
.chores-renderer .top, .widget-chores .top { background: var(--theme-card-bg); border: 1px solid var(--theme-border); border-radius: 14px; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.chores-renderer .top-left, .widget-chores .top-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.chores-renderer .top .row, .widget-chores .top .row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chores-renderer .top .btn, .widget-chores .top .btn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--theme-button-secondary, #111827); color: var(--theme-text, #fff); font-weight: 700; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.chores-renderer .top .btn.btn-text, .widget-chores .top .btn.btn-text { width: auto; padding: 0 10px; font-size: 13px; }
.chores-renderer .top .btn.primary, .widget-chores .top .btn.primary { background: var(--theme-button-primary, #4285f4); }
.chores-renderer .top .title, .widget-chores .top .title { font-weight: 700; font-size: 18px; letter-spacing: 0.2px; white-space: nowrap; }
.chores-renderer .top .subtitle, .widget-chores .top .subtitle { color: var(--theme-text-muted); font-weight: 400; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chores-renderer .top .top-divider, .widget-chores .top .top-divider { color: var(--theme-border); font-weight: 300; user-select: none; }
.chores-renderer .grid, .widget-chores .grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; overflow: auto; padding: 4px; }
.chores-renderer .grid.chores-grid-columns, .widget-chores .grid.chores-grid-columns { 
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  width: 100%;
}
.chores-renderer .grid.chores-grid-columns .kidCard, .widget-chores .grid.chores-grid-columns .kidCard {
  flex: 1 1 0;
  min-width: 200px;
  width: 0;
}

/* Edit mode: horizontal rail — fixed comfortable card width, scroll for large families */
.chores-renderer .grid.chores-grid-edit,
.widget-chores .grid.chores-grid-edit {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 14px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
  overscroll-behavior-x: contain;
}
.chores-renderer .grid.chores-grid-edit .kidCard,
.widget-chores .grid.chores-grid-edit .kidCard {
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(272px, 40vw, 420px);
  min-width: 272px;
  max-width: min(420px, 94vw);
  max-height: min(calc(100vh - 200px), 920px);
  min-height: 220px;
  scroll-snap-align: start;
}
.chores-renderer .grid.chores-grid-edit .kidCard .list,
.widget-chores .grid.chores-grid-edit .kidCard .list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.chores-edit-rail-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 2px;
  flex-shrink: 0;
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  box-sizing: border-box;
}
.chores-edit-rail-nav[hidden] {
  display: none !important;
}
.chores-edit-rail-meta {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-text-muted);
  min-width: 0;
  line-height: 1.35;
}
.chores-edit-rail-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.2));
  color: var(--theme-text);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}
.chores-edit-rail-btn:hover:not(:disabled) {
  border-color: var(--theme-primary, #4285f4);
  background: var(--theme-button-secondary, rgba(0, 0, 0, 0.25));
}
.chores-edit-rail-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chores-renderer .kidCard, .widget-chores .kidCard { 
  background: var(--theme-card-bg); 
  border: 1px solid var(--theme-border); 
  border-radius: 18px; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  min-height: 200px;
  max-height: 100%;
  transition: all 0.2s ease;
}
.chores-renderer .kidCard.chores-kid-bubble, .widget-chores .kidCard.chores-kid-bubble {
  border-left: 4px solid var(--kid-color, #4285f4);
}
.chores-layout-btn.active,
.chores-show-times-btn.active { 
  background: var(--theme-button-primary) !important; 
  color: var(--theme-widget-header-text, #fff) !important; 
  border-color: var(--theme-primary) !important; 
  box-shadow: 0 2px 8px rgba(86, 168, 255, 0.3);
}
.chores-weekday-nav {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.chores-weekday-btn {
  flex: 1 1 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: rgba(0,0,0,0.2);
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.chores-weekday-btn:hover {
  background: rgba(0,0,0,0.3);
  color: var(--theme-text);
}
.chores-weekday-btn.active {
  background: var(--theme-primary);
  color: var(--theme-widget-header-text, #fff);
  border-color: var(--theme-primary);
}
.chores-weekday-btn.today.active {
  box-shadow: 0 0 0 2px var(--theme-primary);
}
@media (hover: none) and (pointer: coarse) {
  .chores-weekday-nav {
    gap: 8px;
  }
  .chores-weekday-btn {
    flex: 1 1 calc(25% - 8px);
    font-size: 15px;
    border-radius: 10px;
  }
}
.chores-edit-reorder-hint {
  font-size: 12px;
  color: var(--theme-text-muted);
  margin: 0 0 8px;
  padding: 0 2px;
  line-height: 1.35;
}
.chores-edit-reorder-hint[hidden] {
  display: none !important;
}
/* Edit mode: drag the header strip to reorder (avoids horizontal scroll stealing the gesture). */
.chores-renderer .kidCard.chores-kid-card-reorderable,
.widget-chores .kidCard.chores-kid-card-reorderable {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.chores-renderer .kidCard.chores-kid-card-reorderable .kidHead,
.widget-chores .kidCard.chores-kid-card-reorderable .kidHead {
  cursor: grab;
}
.chores-renderer .kidCard.chores-kid-card-reorderable .kidHead:active,
.widget-chores .kidCard.chores-kid-card-reorderable .kidHead:active {
  cursor: grabbing;
}
.chores-renderer .kidCard.chores-kid-card-reorderable input,
.chores-renderer .kidCard.chores-kid-card-reorderable textarea,
.widget-chores .kidCard.chores-kid-card-reorderable input,
.widget-chores .kidCard.chores-kid-card-reorderable textarea {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.chores-renderer .kidCard.chores-kid-card-drag,
.widget-chores .kidCard.chores-kid-card-drag {
  opacity: 0.72;
}
.chores-renderer .kidCard.chores-kid-card-drop-over,
.widget-chores .kidCard.chores-kid-card-drop-over {
  box-shadow: 0 0 0 2px var(--theme-button-primary, var(--theme-primary));
  border-radius: var(--radius-lg, 12px);
}
.chores-renderer .kidHead, .widget-chores .kidHead { padding: 6px 10px; border-bottom: 1px solid var(--theme-border); background: var(--theme-input-bg, rgba(0,0,0,0.2)); }
.chores-renderer .kidName, .widget-chores .kidName { font-weight: 500; font-size: 18px; color: var(--theme-text); }
.chores-renderer .kidHead .progress, .widget-chores .kidHead .progress { color: var(--theme-text-muted); }

/* --- Chores bubble header: progress bar as background, content on top --- */
.chores-renderer .kidHead-bubble, .widget-chores .kidHead-bubble {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  border-bottom: 1px solid var(--theme-border);
  min-height: 64px;
  background: var(--theme-input-bg, rgba(0,0,0,0.15));
}
.chores-renderer .kidHead-progress-bg, .widget-chores .kidHead-progress-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left center;
  opacity: 0.35;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.chores-renderer .kidHead-row-content, .widget-chores .kidHead-row-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chores-renderer .kidHead-avatar, .widget-chores .kidHead-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid;
  background: var(--theme-card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.chores-renderer .kidHead-icon, .widget-chores .kidHead-icon {
  font-size: 26px;
  line-height: 1;
}
.chores-renderer .kidHead-name, .widget-chores .kidHead-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--theme-text);
  line-height: 1.2;
}
.chores-renderer .kidHead-progress-count, .widget-chores .kidHead-progress-count {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--theme-text-muted);
  padding: 4px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}
.chores-renderer .kidHead-stars, .widget-chores .kidHead-stars {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text);
  padding: 5px 12px;
  background: rgba(255,193,7,0.25);
  border-radius: 999px;
  border: 1px solid rgba(255,193,7,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.chores-renderer .kidHead-stars-icon, .widget-chores .kidHead-stars-icon { font-size: 16px; }
.chores-renderer .kidCard.chores-all-done .kidHead-bubble,
.widget-chores .kidCard.chores-all-done .kidHead-bubble {
  animation: chores-header-glow 2s ease-in-out;
}
.chores-renderer .kidCard.chores-all-done .kidHead-progress-bg,
.widget-chores .kidCard.chores-all-done .kidHead-progress-bg {
  animation: chores-progress-pulse 1.5s ease-in-out;
}
@keyframes chores-header-glow {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 20px rgba(66, 133, 244, 0.25); }
}
@keyframes chores-progress-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.5; }
}

/* --- Task completion celebration (reusable) --- */
@keyframes task-celebration-border {
  0% { opacity: 0; background-position: 0% 50%; }
  12% { opacity: 1; }
  88% { opacity: 1; background-position: 300% 50%; }
  100% { opacity: 0; background-position: 300% 50%; }
}
@keyframes task-celebration-glow {
  0% { opacity: 0; }
  20% { opacity: 0.8; }
  50% { opacity: 0.6; }
  80% { opacity: 0.3; }
  100% { opacity: 0; }
}
@keyframes task-celebration-particle-top {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(0, -35px) scale(0.3); opacity: 0; }
}
@keyframes task-celebration-particle-right {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(35px, 0) scale(0.3); opacity: 0; }
}
@keyframes task-celebration-particle-bottom {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(0, 35px) scale(0.3); opacity: 0; }
}
@keyframes task-celebration-particle-left {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-35px, 0) scale(0.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .task-celebration-wrap { display: none !important; }
}

/* Responsive: compact header on narrow viewports */
@media (max-width: 480px) {
  .chores-renderer .kidHead-bubble, .widget-chores .kidHead-bubble { padding: 10px 12px; min-height: 56px; }
  .chores-renderer .kidHead-row-content, .widget-chores .kidHead-row-content { gap: 8px; }
  .chores-renderer .kidHead-avatar, .widget-chores .kidHead-avatar { width: 40px; height: 40px; border-radius: 10px; }
  .chores-renderer .kidHead-icon, .widget-chores .kidHead-icon { font-size: 22px; }
  .chores-renderer .kidHead-name, .widget-chores .kidHead-name { font-size: 17px; }
  .chores-renderer .kidHead-stars, .widget-chores .kidHead-stars { font-size: 12px; padding: 4px 8px; }
}
.chores-renderer .list, .widget-chores .list { padding: 12px 14px; overflow: auto; }
.chores-renderer .chore, .widget-chores .chore { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; margin-bottom: 6px; border: 1px solid var(--theme-border); }
.chores-renderer .chore.editing, .widget-chores .chore.editing { flex-wrap: wrap; }
.chores-renderer .chore.chore-edit-row, .widget-chores .chore.chore-edit-row {
  gap: 10px;
}
.chores-renderer .chore-edit-control-btn, .widget-chores .chore-edit-control-btn {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--theme-text);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.chores-renderer .chore-edit-control-btn:disabled, .widget-chores .chore-edit-control-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.chores-renderer .chore-edit-emoji-btn, .widget-chores .chore-edit-emoji-btn {
  min-width: 46px;
  padding: 6px 8px;
  font-size: 20px;
}
.chores-renderer .chore-edit-label-input, .widget-chores .chore-edit-label-input {
  flex: 1 1 auto;
  min-width: min(100%, 280px);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--theme-text);
}
.chores-renderer .chore-edit-time, .widget-chores .chore-edit-time {
  width: 8.25rem;
  max-width: 9rem;
  flex-shrink: 0;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.25));
  color: var(--theme-text);
  font-size: 15px;
  line-height: 1.2;
  touch-action: manipulation;
}
.chores-renderer .chore-edit-save-btn, .widget-chores .chore-edit-save-btn {
  border-color: var(--theme-success);
  color: var(--theme-success);
  background: transparent;
  min-width: 42px;
  padding: 6px 12px;
}
.chores-renderer .chore-edit-delete-btn, .widget-chores .chore-edit-delete-btn {
  border-color: var(--theme-error);
  color: var(--theme-error);
  background: transparent;
  min-width: 42px;
  padding: 6px 12px;
}
.chores-renderer .chore-edit-copy-btn,
.widget-chores .chore-edit-copy-btn,
.chore-expand-copy-btn {
  border-color: var(--theme-button-primary, #4f46e5);
  color: var(--theme-button-primary, #4f46e5);
  background: transparent;
  min-width: 44px;
  padding: 6px 10px;
  font-weight: 700;
}
.chores-renderer .chores-edit-head-btn, .widget-chores .chores-edit-head-btn {
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  color: var(--theme-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.chores-renderer .chores-edit-stars-btn, .widget-chores .chores-edit-stars-btn {
  background: rgba(255, 193, 7, 0.2);
}
.chores-renderer .chores-edit-expand-btn, .widget-chores .chores-edit-expand-btn {
  background: rgba(0, 0, 0, 0.25);
  font-size: 16px;
  line-height: 1;
  padding: 6px 10px;
}
.chores-renderer .chore-edit-add-btn, .widget-chores .chore-edit-add-btn {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 2px dashed var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.15));
  color: var(--theme-text-muted);
  cursor: pointer;
}
.chores-renderer .chore.done, .widget-chores .chore.done { opacity: 0.6; text-decoration: line-through; }
.chores-renderer .chore.chore-future-day, .widget-chores .chore.chore-future-day {
  opacity: 0.9;
  cursor: not-allowed;
}
.chores-renderer .chore .emoji, .widget-chores .chore .emoji { font-size: 24px; width: 36px; text-align: center; flex-shrink: 0; }
.chores-renderer .chore .label, .widget-chores .chore .label { flex: 1; color: var(--theme-text); }
.chores-renderer .chore .chore-time, .widget-chores .chore .chore-time { font-size: 11px; font-weight: 600; color: var(--theme-text-muted); background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 6px; flex-shrink: 0; white-space: nowrap; }
.chores-renderer .chore .check, .widget-chores .chore .check { width: 30px; height: 30px; border-radius: 999px; border: 2px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chores-renderer .doneZone, .widget-chores .doneZone { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--theme-border); }
.chores-renderer .doneTitle, .widget-chores .doneTitle { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--theme-text-muted); margin-bottom: 8px; }

/* Shared dashboard modal primitives (incremental adoption by widget overlays). */
.dashboard-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  box-sizing: border-box;
}
.dashboard-modal-panel {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border-radius: 16px;
  border: 1px solid var(--theme-border);
  background: var(--theme-card-bg);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chore-modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.chore-modal-panel {
  background: var(--theme-card-bg, #1a1f2e);
}
.chore-modal-panel-log {
  max-width: min(600px, 100vw);
  max-height: 85vh;
}
.chores-log-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.chores-log-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chores-log-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.chores-log-subtitle {
  color: var(--theme-text-muted);
  font-size: 12px;
}
.chores-log-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chores-log-select-label {
  color: var(--theme-text-muted);
  font-size: 12px;
  font-weight: 600;
}
.chores-log-date-select {
  min-width: 180px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.25));
  color: var(--theme-text);
  padding: 0 10px;
  font-size: 13px;
}
.chores-log-date-select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.chores-log-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: rgba(0, 0, 0, 0.3);
  color: var(--theme-text);
  cursor: pointer;
  font-size: 18px;
}
.chores-log-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.chores-log-date-banner {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--theme-text);
}
.chores-log-kid-grid {
  display: grid;
  gap: 10px;
}
.chores-log-kid-card {
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.2));
  padding: 10px 12px;
}
.chores-log-kid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.chores-log-kid-name {
  font-weight: 700;
  font-size: 14px;
}
.chores-log-kid-progress {
  font-size: 12px;
  color: var(--theme-text-muted);
}
.chores-log-item-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.chores-log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-text);
  font-size: 13px;
}
.chores-log-item.done {
  color: var(--theme-text-muted);
}
.chores-log-item.done .chores-log-item-label {
  text-decoration: line-through;
}
.chores-log-item-status {
  width: 16px;
  text-align: center;
  font-weight: 700;
}
.chores-log-no-items,
.chores-log-empty,
.chores-log-error {
  color: var(--theme-text-muted);
  font-size: 13px;
}
.chores-log-error {
  color: var(--theme-error);
}
@media (max-width: 640px) {
  .chores-log-controls {
    width: 100%;
  }
  .chores-log-date-select {
    flex: 1;
    min-width: 0;
  }
}
.chore-modal-panel-rewards {
  max-width: min(500px, 100vw);
  max-height: 85vh;
}
.chore-modal-panel-icon-picker {
  max-width: min(420px, 100vw);
  max-height: 85vh;
  border: 2px solid var(--theme-border);
}
.chore-modal-panel-stars {
  max-width: min(420px, 92vw);
}
.chore-modal-panel-keypad {
  max-width: min(320px, 92vw);
}
.settings-pin-modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}
.settings-pin-modal-panel {
  max-width: min(420px, 92vw);
  width: 100%;
  border-radius: 14px;
}
.settings-totp-modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.settings-totp-modal-panel {
  max-width: min(360px, 92vw);
  width: 100%;
  border-radius: 12px;
}
.meals-modal .meals-modal-panel-dayedit {
  max-width: min(600px, 95vw);
}
.meals-modal .meals-modal-panel-shop {
  max-width: min(520px, 95vw);
}

/* Expanded single-person chore editor (Edit -> maximize icon): scale by viewport, keep controls readable. */
.chore-expand-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3.5vw, 28px);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}
.chore-expand-modal {
  width: min(1320px, calc(100vw - clamp(24px, 7vw, 64px)));
  max-height: calc(100vh - clamp(24px, 8vh, 88px));
  min-height: min(560px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  background: var(--theme-card-bg, #1a1f2e);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.chore-expand-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--theme-border);
}
.chore-expand-kid-icon { font-size: 28px; }
.chore-expand-kid-name {
  flex: 1;
  min-width: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--theme-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chore-expand-kid-progress,
.chore-expand-kid-stars {
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-text-muted);
  white-space: nowrap;
}
.chore-expand-kid-stars { color: var(--theme-text); }
.chore-expand-list {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chore-expand-add-btn {
  width: 100%;
  padding: 13px;
  margin-bottom: 4px;
  border-radius: 12px;
  border: 2px dashed var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.15));
  color: var(--theme-text-muted);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.chore-expand-done-title {
  padding: 12px 2px 6px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--theme-text-muted);
}
.chore-expand-modal .chore.chore-expand-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}
.chore-expand-control-btn {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--theme-text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.chore-expand-modal .chore-expand-control-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.chore-expand-modal .chore-move-up-btn,
.chore-expand-modal .chore-move-down-btn {
  min-width: 42px;
  padding: 8px 10px;
}
.chore-expand-emoji-btn { min-width: 46px; font-size: 22px; padding: 6px 8px; }
.chore-expand-save-btn {
  min-width: 42px;
  border-color: var(--theme-success);
  color: var(--theme-success);
  background: transparent;
}
.chore-expand-delete-btn {
  min-width: 42px;
  border-color: var(--theme-error);
  color: var(--theme-error);
  background: transparent;
}
.chore-expand-close {
  flex-shrink: 0;
  min-width: 44px;
  padding: 8px 12px;
  font-size: 18px;
}
.chore-expand-label {
  flex: 1 1 auto;
  min-width: clamp(280px, 36vw, 760px);
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--theme-text);
  font-size: 15px;
}
.chore-expand-time {
  width: 8.25rem;
  max-width: 9rem;
  flex-shrink: 0;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.25));
  color: var(--theme-text);
  font-size: 15px;
  line-height: 1.2;
  touch-action: manipulation;
}
.chores-renderer .chore-edit-time::-webkit-calendar-picker-indicator,
.widget-chores .chore-edit-time::-webkit-calendar-picker-indicator,
.chore-expand-time::-webkit-calendar-picker-indicator {
  transform: scale(1.25);
  cursor: pointer;
}
@media (pointer: coarse) {
  .chores-renderer .chore-edit-time,
  .widget-chores .chore-edit-time,
  .chore-expand-time {
    min-height: 48px;
    width: 8.5rem;
    font-size: 16px;
  }
}
@media (max-width: 1366px) {
  .chore-expand-modal .chore.chore-expand-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .chore-expand-label { min-width: min(100%, 420px); }
}

/* Chore/Kid icon picker modal - responsive for tabbed, freeform, mobile */
.chore-icon-picker-overlay {
  align-items: center;
  justify-content: center;
}
.chore-icon-picker-panel {
  width: 100%;
}
.chore-icon-picker-search {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg, rgba(0, 0, 0, 0.2));
  color: var(--theme-text);
  padding: 9px 11px;
  margin: 2px 0 8px;
  box-sizing: border-box;
}
.chore-icon-picker-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.chore-icon-tab {
  border: 1px solid var(--theme-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--theme-text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}
.chore-icon-tab.active {
  border-color: var(--theme-primary, #4285F4);
  background: rgba(66, 133, 244, 0.2);
}
.chore-icon-picker-grid {
  grid-template-columns: repeat(8, 1fr);
}
.chore-icon-picker-btn {
  padding: 8px;
  border-radius: 10px;
  border: 2px solid var(--theme-border);
  background: rgba(0,0,0,0.2);
  font-size: 22px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: inherit;
}
.chore-icon-picker-btn:hover {
  border-color: var(--theme-text-muted);
}
.chore-icon-picker-btn.selected {
  border-color: var(--theme-success,#22c55e);
  background: rgba(34,197,94,0.15);
}
.chore-icon-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--theme-text-muted);
  padding: 10px 6px;
  font-size: 13px;
}
@media (max-width: 480px) {
  .chore-icon-picker-overlay {
    padding: 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .chore-icon-picker-panel {
    padding: 16px;
    max-height: 80vh;
    width: 100%;
  }
  .chore-icon-picker-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    max-height: min(360px, 55vh);
    -webkit-overflow-scrolling: touch;
  }
  .chore-icon-picker-btn {
    padding: 10px;
    font-size: 24px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .chore-icon-tab {
    min-height: 36px;
    font-size: 12px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .chore-icon-picker-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* Chores age select - theme-friendly for all color themes */
.chores-renderer .chores-age-select, .widget-chores .chores-age-select,
.chores-renderer .new-kid-age-select, .widget-chores .new-kid-age-select {
  background-color: var(--theme-card-bg) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}
.chores-renderer .chores-age-select option, .widget-chores .chores-age-select option,
.chores-renderer .new-kid-age-select option, .widget-chores .new-kid-age-select option {
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
}

/* --- Lists (Todo) widget (Fetch-DOM) --- */
.todo-wrap {
  --todo-accent: var(--theme-button-primary, #56a8ff);
  --todo-accent-strong: color-mix(in srgb, var(--todo-accent) 70%, #ffffff 30%);
  --todo-glass: color-mix(in srgb, var(--theme-card-bg, #121829) 88%, var(--todo-accent) 12%);
}
.todo-wrap .todo-list-selector,
.todo-wrap .todo-add-form {
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-card-bg) 82%, transparent), color-mix(in srgb, var(--theme-card-bg) 96%, var(--todo-accent) 4%));
}
.todo-wrap .todo-list-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.todo-wrap .todo-list-select,
.todo-wrap .todo-add-input {
  flex: 1;
  min-width: 120px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--todo-accent) 46%, var(--theme-border) 54%);
  background: color-mix(in srgb, var(--theme-card-bg) 90%, #ffffff 10%);
  color: var(--theme-text, var(--theme-text-dark));
  min-height: 44px;
  font-size: 15px;
  box-sizing: border-box;
  touch-action: manipulation;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.light-mode .todo-wrap .todo-list-select { background: var(--theme-card-bg, #ffffff) !important; color: var(--theme-text-dark, #1a1a1a) !important; }
.todo-wrap .todo-list-select:focus,
.todo-wrap .todo-add-input:focus,
.todo-wrap .todo-edit-input:focus {
  outline: none;
  border-color: var(--todo-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--todo-accent) 26%, transparent);
}
.todo-wrap .todo-default-list-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--theme-text-muted); cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.todo-wrap .todo-default-list-cb { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; accent-color: var(--todo-accent); }
.todo-wrap .todo-add-form { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.todo-wrap .todo-add-input { min-width: 0; width: 0; }
.todo-wrap .todo-add-button {
  flex: 0 0 auto;
  width: auto;
  max-width: 100px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--todo-accent), color-mix(in srgb, var(--todo-accent) 70%, #ffffff 30%));
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  font-size: 15px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--todo-accent) 38%, transparent);
  transition: transform 0.16s ease, filter 0.16s ease;
}
.todo-wrap .todo-add-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.todo-wrap .todo-add-button:active { transform: translateY(0); filter: brightness(0.96); }
.todo-wrap .todo-overview {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.todo-wrap .todo-overview-main,
.todo-wrap .todo-kpi-grid {
  border-radius: 14px;
  border: 1px solid var(--theme-border);
  background: var(--todo-glass);
}
.todo-wrap .todo-overview-main { padding: 12px; }
.todo-wrap .todo-overview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.todo-wrap .todo-overview-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-text-muted); margin-bottom: 2px; }
.todo-wrap .todo-overview-title { font-size: 16px; font-weight: 700; color: var(--theme-text); margin-bottom: 8px; }
.todo-wrap .todo-overview-progress-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--theme-text-muted); margin-bottom: 7px; }
.todo-wrap .todo-progress-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--theme-border) 75%, transparent); overflow: hidden; }
.todo-wrap .todo-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--todo-accent), var(--todo-accent-strong)); }
.todo-wrap .todo-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 75%, transparent);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-card-bg) 90%, transparent);
}
.todo-wrap .todo-provider-microsoft { border-color: color-mix(in srgb, #3b82f6 45%, var(--theme-border) 55%); }
.todo-wrap .todo-provider-google_tasks { border-color: color-mix(in srgb, #22c55e 45%, var(--theme-border) 55%); }
.todo-wrap .todo-provider-todoist { border-color: color-mix(in srgb, #ef4444 45%, var(--theme-border) 55%); }
.todo-wrap .todo-provider-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--theme-border) 75%, transparent);
  background: color-mix(in srgb, var(--theme-card-bg) 90%, transparent);
}
.todo-wrap .todo-provider-hint {
  font-size: 12px;
  color: var(--theme-text-muted);
}
.todo-wrap .todo-connect-button {
  min-width: 180px;
}
.todo-wrap .todo-kpi-grid {
  display: grid;
  gap: 6px;
  padding: 8px;
}
.todo-wrap .todo-kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
  background: color-mix(in srgb, var(--theme-card-bg) 88%, transparent);
  padding: 8px 10px;
}
.todo-wrap .todo-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--theme-text-muted); }
.todo-wrap .todo-kpi-value { font-size: 16px; font-weight: 700; color: var(--theme-text); }
.todo-wrap .todo-kpi-alert .todo-kpi-value { color: var(--theme-error, #ff5c7a); }
.todo-wrap .todo-items-list { flex: 1; overflow: auto; padding: 0 2px 8px; -webkit-overflow-scrolling: touch; }
.todo-wrap .todo-section-card {
  border-radius: 14px;
  border: 1px solid var(--theme-border);
  background: color-mix(in srgb, var(--theme-card-bg) 90%, transparent);
  margin-bottom: 10px;
  padding: 10px;
}
.todo-wrap .todo-section-heading { font-weight: 700; color: var(--theme-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.todo-wrap .todo-item {
  position: relative;
  padding: 12px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--theme-card-bg) 92%, #ffffff 8%);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--todo-accent) 75%, transparent);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.todo-wrap .todo-item:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
.todo-wrap .todo-item.completed { opacity: 0.6; text-decoration: line-through; border-left-color: var(--theme-success, #3fe7a7); }
.todo-wrap .todo-item.due-overdue { border-left-color: var(--theme-error, #ff5c7a); background: color-mix(in srgb, var(--theme-card-bg) 88%, var(--theme-error, #ff5c7a) 12%); }
.todo-wrap .todo-item.due-today { border-left-color: #f59e0b; }
.todo-wrap .todo-item-checkbox { width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin-top: 2px; cursor: pointer; flex-shrink: 0; touch-action: manipulation; accent-color: var(--todo-accent); }
.todo-wrap .todo-title { font-weight: 600; font-size: 15px; line-height: 1.35; }
.todo-wrap .todo-due { font-size: 12px; color: var(--theme-text-muted); margin-top: 5px; }
.todo-wrap .todo-due.due-overdue { color: var(--theme-error, #ff5c7a); font-weight: 700; }
.todo-wrap .todo-due.due-today { color: #f59e0b; font-weight: 700; }
.todo-wrap .todo-edit-btn { flex-shrink: 0; min-width: 38px; min-height: 38px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--todo-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--todo-accent) 36%, transparent); color: var(--todo-accent); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; }
.todo-wrap .todo-edit-btn:hover { background: color-mix(in srgb, var(--todo-accent) 22%, transparent); }
.todo-wrap .todo-edit-inline { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.todo-wrap .todo-edit-input { flex: 1; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--todo-accent) 40%, var(--theme-border) 60%); background: var(--theme-card-bg); color: var(--theme-text); font-size: 14px; }
.todo-wrap .todo-edit-save-btn, .todo-wrap .todo-edit-cancel-btn { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation; min-height: 36px; }
.todo-wrap .todo-edit-save-btn { background: var(--todo-accent); color: #fff; border: none; }
.todo-wrap .todo-edit-cancel-btn { background: var(--theme-button-secondary); color: var(--theme-text); border: 1px solid var(--theme-border); }
.todo-wrap .todo-item-text-block { flex: 1; min-width: 0; }
.todo-wrap .todo-item-edit-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.todo-wrap .todo-edit-due-row { display: flex; align-items: stretch; }
.todo-wrap .todo-due-cal-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--theme-border);
  background: var(--theme-card-bg);
  color: var(--theme-text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.todo-wrap .todo-due-cal-btn:active { opacity: 0.92; }
.todo-wrap .todo-due-cal-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.todo-wrap .todo-due-cal-label { flex: 1; min-width: 0; line-height: 1.25; }
@media (max-width: 768px) {
  .todo-wrap .todo-overview { grid-template-columns: 1fr; }
  .todo-wrap .todo-overview-top { align-items: flex-start; flex-direction: column; }
  .todo-wrap .todo-add-form { flex-wrap: wrap; }
  .todo-wrap .todo-add-input { width: 100%; min-width: 100%; }
  .todo-wrap .todo-add-button { width: 100%; max-width: none; }
  .todo-wrap .todo-item { flex-wrap: wrap; }
}

.todo-due-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.todo-due-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--theme-card-bg, #1e1e1e);
  color: var(--theme-text, #fff);
  border-radius: 16px 16px 12px 12px;
  padding: 20px 18px 18px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--theme-border);
  box-sizing: border-box;
}
.todo-due-sheet-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
  padding-right: 36px;
}
.todo-due-sheet-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 18px;
  border-radius: 10px;
  border: 2px solid var(--theme-button-primary);
  background: var(--theme-input-bg, var(--theme-card-bg));
  color: var(--theme-text);
  box-sizing: border-box;
  margin-bottom: 12px;
  touch-action: manipulation;
}
.todo-due-sheet-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.todo-due-sheet-chip {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 90px;
  min-height: 48px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  background: rgba(86, 168, 255, 0.12);
  color: var(--theme-button-primary);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.todo-due-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.todo-due-sheet-clear {
  min-height: 48px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
  background: transparent;
  color: var(--theme-text-muted);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}
.todo-due-sheet-apply {
  min-height: 52px;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: var(--theme-button-primary);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}
.todo-due-sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--theme-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
body.light-mode .todo-due-sheet { background: var(--theme-card-bg, #fff); color: var(--theme-text-dark, #1a1a1a); }

/* ========================================
   LAYOUT SYSTEM - BASE STYLES ONLY
   Layout-specific styles moved to:
   - freeform-layout.css
   - tabbed-layout.css
   - premium-layout.css
   ======================================== */

/* Base dashboard styles - layout-specific overrides in separate files */
#freeformContainer,
#tabbedContainer,
#premiumContainer {
  display: none;
}

/* Ensure profile menu is always on top */
.profile-menu.open {
  z-index: 2147483647 !important;
}

/* ========================================
   LAYOUTS WIDGET (Shared across all layouts)
   ======================================== */

.layouts-widget {
  padding: 24px;
  color: var(--theme-text);
}

.layouts-header {
  margin-bottom: 24px;
}

.layouts-header h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--theme-text);
}

.layouts-subtitle {
  font-size: 14px;
  color: var(--theme-text-muted);
  margin: 0;
}

.layouts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.layout-card {
  background: var(--theme-card-bg);
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.layout-card:hover {
  border-color: var(--theme-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.layout-card.active {
  border-color: var(--theme-primary);
  background: rgba(86, 168, 255, 0.1);
}

.layout-card.premium {
  border-color: var(--theme-accent);
}

.layout-card.coming-soon {
  opacity: 0.75;
}

.layout-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.layout-card-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.layout-card-info {
  flex: 1;
}

.layout-card-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--theme-text);
}

.layout-card-description {
  font-size: 14px;
  color: var(--theme-text-muted);
  line-height: 1.4;
}

.layout-premium-badge {
  background: var(--theme-accent);
  color: #000;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.layout-card-active-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--theme-success);
  color: #000;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.layout-card-action {
  width: 100%;
  padding: 12px 20px;
  background: var(--theme-button-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 12px;
}

.layout-card-action:hover:not(:disabled) {
  background: var(--theme-button-primary-hover);
  transform: scale(1.02);
}

.layout-card-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.layout-card-action.active {
  background: var(--theme-button-secondary);
  color: var(--theme-text);
  cursor: default;
}

.layouts-premium-settings {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--theme-border);
}

.layouts-premium-settings h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--theme-text);
}

.premium-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.premium-theme-card {
  background: var(--theme-card-bg);
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.premium-theme-card:hover {
  border-color: var(--theme-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.premium-theme-card.active {
  border-color: var(--theme-accent);
  background: rgba(94, 234, 212, 0.1);
}

.premium-theme-icon {
  font-size: 40px;
  margin-bottom: 4px;
}

.premium-theme-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme-text);
}

.premium-theme-description {
  font-size: 12px;
  color: var(--theme-text-muted);
  line-height: 1.4;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .layouts-widget {
    padding: 16px;
  }

  .layout-card {
    padding: 16px;
  }

  .layout-card-icon {
    font-size: 28px;
  }

  .premium-themes-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   TABBED WEATHER (inline bar)
   ======================================== */
.tabbed-weather-container .tabbed-weather-inline .weather-icon {
  font-size: 1.8rem !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.tabbed-weather-container .weather-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tabbed-weather-container .weather-main-line {
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--theme-text);
  line-height: 1.2;
}

.tabbed-weather-container .weather-sub-line {
  font-size: 0.75rem !important;
  color: var(--theme-text-muted);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.tabbed-time-wrapper {
  margin-left: auto;
  flex-shrink: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tabbed-time {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--theme-text);
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(86, 168, 255, 0.15) 0%, rgba(168, 108, 255, 0.15) 100%);
  border-radius: 12px;
  border: 1px solid rgba(86, 168, 255, 0.3);
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(86, 168, 255, 0.2), 0 0 20px rgba(86, 168, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  visibility: visible !important;
  opacity: 1 !important;
}

.tabbed-time::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(86, 168, 255, 0.2) 0%, transparent 70%);
  opacity: 0.6;
  z-index: -1;
  filter: blur(8px);
  animation: pulse-halo 3s ease-in-out infinite;
}

/* PERFORMANCE: Pause decorative infinite animations during widget drag/resize */
body.widget-interacting .current-time-display .time-display-wrapper::before,
body.widget-interacting .tabbed-time::before,
body.widget-interacting .tabbed-placeholder-icon {
  animation-play-state: paused !important;
}

@keyframes pulse-halo {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.current-time-display {
  position: relative;
}

.current-time-display .time-display-wrapper {
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(86, 168, 255, 0.15) 0%, rgba(168, 108, 255, 0.15) 100%);
  border-radius: 12px;
  border: 1px solid rgba(86, 168, 255, 0.3);
  box-shadow: 0 2px 12px rgba(86, 168, 255, 0.2), 0 0 20px rgba(86, 168, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  transition: all 0.3s ease;
}

.current-time-display .time-display-wrapper::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(86, 168, 255, 0.2) 0%, transparent 70%);
  opacity: 0.6;
  z-index: -1;
  filter: blur(8px);
  animation: pulse-halo 3s ease-in-out infinite;
}

.current-time-display .time-display-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(86, 168, 255, 0.3), 0 0 25px rgba(86, 168, 255, 0.2);
  border-color: rgba(86, 168, 255, 0.5);
}

.tabbed-time:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(86, 168, 255, 0.3);
  border-color: rgba(86, 168, 255, 0.5);
}

.tabbed-time-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 0 4px rgba(86, 168, 255, 0.6));
}

.tabbed-time-text {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #56A8FF 0%, #A86CFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tabbed-tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  margin-left: 32px;
  padding-right: 16px;
}

.tabbed-tabs {
  display: flex;
  gap: 10px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 4px 0;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}

.tabbed-tabs::-webkit-scrollbar {
  height: 4px;
}

.tabbed-tabs::-webkit-scrollbar-thumb {
  background: var(--theme-border);
  border-radius: 2px;
}

.tabbed-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  cursor: grab;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-text);
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: fit-content;
}

.tabbed-tab:active {
  cursor: grabbing;
}

.tabbed-tab:hover {
  background: linear-gradient(135deg, rgba(86, 168, 255, 0.15) 0%, rgba(168, 108, 255, 0.15) 100%);
  border-color: rgba(86, 168, 255, 0.6);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(86, 168, 255, 0.3);
}

.tabbed-tab.active {
  background: linear-gradient(135deg, rgba(86, 168, 255, 0.95) 0%, rgba(168, 108, 255, 0.95) 100%);
  border-color: rgba(86, 168, 255, 1);
  color: #fff;
  box-shadow: 0 6px 24px rgba(86, 168, 255, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
  transform: translateY(-2px) scale(1.03);
  font-weight: 700;
}

.tabbed-tab.active .tabbed-tab-icon {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  transform: scale(1.1);
}

.tabbed-tab.active .tabbed-tab-name {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tabbed-tab-dragging {
  opacity: 0.6;
  transform: scale(0.95);
  z-index: 1000;
  cursor: grabbing !important;
}

.tabbed-tab-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tabbed-tab-name {
  font-weight: 500;
}

.tab-close {
  margin-left: 4px;
  padding: 2px 6px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
  font-size: 14px;
  line-height: 1;
}

.tab-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.tabbed-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(86, 168, 255, 0.9) 0%, rgba(168, 108, 255, 0.9) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(86, 168, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tabbed-add-btn:hover {
  background: linear-gradient(135deg, rgba(86, 168, 255, 1) 0%, rgba(168, 108, 255, 1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(86, 168, 255, 0.5);
}

.tabbed-add-btn:active {
  transform: translateY(0);
}

.tabbed-add-btn-icon {
  font-size: 18px;
  line-height: 1;
}

.tabbed-add-btn-text {
  font-size: 14px;
}

.tabbed-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--theme-background);
  width: 100%;
  height: 100%;
}

.tabbed-content-area {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: auto;
  z-index: 1;
  background: var(--theme-background);
  animation: fadeInContent 0.3s ease-in;
}

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

.tabbed-content-area[style*="display: block"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tabbed-content-area iframe,
.tabbed-content-area .widget-fetch-dom {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
}

/* Make widgets pop more in full screen */
.tabbed-content-area .widget-fetch-dom {
  padding: 24px;
  background: var(--theme-background);
}

.tabbed-content-area iframe {
  background: var(--theme-background);
}

.tabbed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--theme-text-muted);
  gap: 20px;
  padding: 40px;
  text-align: center;
}

.tabbed-placeholder-icon {
  font-size: 80px;
  opacity: 0.4;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  animation: float 3s ease-in-out infinite;
}

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

.tabbed-placeholder-text {
  font-size: 24px;
  font-weight: 600;
  color: var(--theme-text);
  opacity: 0.8;
}

.tabbed-placeholder-hint {
  font-size: 14px;
  color: var(--theme-text-muted);
  opacity: 0.7;
  margin-top: 8px;
}

.tabbed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--theme-text-muted);
  font-size: 16px;
  gap: 16px;
}

.tabbed-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(86, 168, 255, 0.2);
  border-top-color: rgba(86, 168, 255, 0.8);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.tabbed-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--theme-error);
  padding: 40px;
  text-align: center;
}

.tabbed-error-icon {
  font-size: 64px;
  opacity: 0.8;
}

.tabbed-error-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--theme-text);
}

.tabbed-retry-btn {
  margin-top: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(86, 168, 255, 0.9) 0%, rgba(168, 108, 255, 0.9) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.tabbed-retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(86, 168, 255, 0.4);
}

.tabbed-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Add tab menu */
.tabbed-add-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  padding: 0;
  box-shadow: var(--theme-shadow);
  z-index: 10000;
  min-width: 280px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.tabbed-add-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--theme-border);
  font-weight: 600;
  font-size: 16px;
  color: var(--theme-text);
}

.tabbed-add-menu-close {
  background: transparent;
  border: none;
  color: var(--theme-text-muted);
  cursor: pointer;
  font-size: 20px;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.2s;
}

.tabbed-add-menu-close:hover {
  background: var(--theme-button-secondary);
  color: var(--theme-text);
}

.tabbed-add-menu-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
}

.tabbed-add-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--theme-text);
  text-align: left;
  transition: all 0.2s;
  font-size: 15px;
}

.tabbed-add-menu-item:hover {
  background: var(--theme-button-secondary-hover);
}

.tabbed-add-menu-icon {
  font-size: 20px;
}

.tabbed-add-menu-name {
  font-weight: 500;
}

/* ========================================
   PREMIUM LAYOUT
   ======================================== */

.premium-layout-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #050509;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}

.premium-scene {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-scene svg,
.premium-scene > div {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}

.premium-window-wrapper {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: 24%;
  height: 28%;
  overflow: hidden;
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
}

.premium-window-time-gradient {
  position: absolute;
  inset: 0;
  transition: background 1.2s ease, opacity 0.8s ease;
  z-index: 0;
}

.premium-window-starfield {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.premium-window-starfield.visible {
  opacity: 1;
}

.premium-window-mountains {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  background-size: cover;
  background-position: center bottom;
  z-index: 1;
}

.premium-window-mountains.visible {
  opacity: 1;
}

.premium-window-weather-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.2) contrast(1.1);
  z-index: 2;
  transition: opacity 0.4s ease;
}

.premium-window-weather-video.hidden {
  display: none;
}

.premium-window-ambient {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 3;
  pointer-events: none;
}

.premium-window-frost {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(230,242,255,0.6) 35%, rgba(200,225,255,0.45) 70%, rgba(180,215,255,0.3) 100%);
  backdrop-filter: blur(0.5px);
  z-index: 4;
  pointer-events: none;
}

.premium-window-frost.visible {
  opacity: 0.85;
}

.premium-room-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.premium-clickable {
  cursor: pointer;
  transition: filter 0.25s ease;
}

.premium-clickable:hover {
  filter: brightness(1.15);
}

.premium-widgets-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.premium-widget-container {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--theme-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.premium-widget-header {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-border);
}

.premium-widget-close {
  background: transparent;
  border: none;
  color: var(--theme-text-muted);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.premium-widget-close:hover {
  background: var(--theme-button-secondary);
  color: var(--theme-text);
}

.premium-widget-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  min-height: 400px;
  position: relative;
}

/* Premium widget resize handles */
.premium-widget-container {
  position: relative;
  resize: both;
  overflow: auto;
  min-width: 400px;
  min-height: 300px;
}

.premium-widget-container[data-maximized="true"] {
  resize: none;
}

.premium-widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: transparent;
  z-index: 1000;
}

.premium-widget-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 12px 12px;
  border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
  pointer-events: none;
}

.premium-widget-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--theme-error);
  font-size: 16px;
}

/* ========================================
   LAYOUTS WIDGET
   ======================================== */

.layouts-widget {
  padding: 24px;
  color: var(--theme-text);
}

.layouts-header {
  margin-bottom: 24px;
}

.layouts-header h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--theme-text);
}

.layouts-subtitle {
  font-size: 14px;
  color: var(--theme-text-muted);
  margin: 0;
}

.layouts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.layout-card {
  background: var(--theme-card-bg);
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.layout-card:hover {
  border-color: var(--theme-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.layout-card.active {
  border-color: var(--theme-primary);
  background: rgba(86, 168, 255, 0.1);
}

.layout-card.premium {
  border-color: var(--theme-accent);
}

.layout-card.coming-soon {
  opacity: 0.75;
}

.layout-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.layout-card-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.layout-card-info {
  flex: 1;
}

.layout-card-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--theme-text);
}

.layout-card-description {
  font-size: 14px;
  color: var(--theme-text-muted);
  line-height: 1.4;
}

.layout-premium-badge {
  background: var(--theme-accent);
  color: #000;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.layout-card-active-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--theme-success);
  color: #000;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.layout-card-action {
  width: 100%;
  padding: 12px 20px;
  background: var(--theme-button-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 12px;
}

.layout-card-action:hover:not(:disabled) {
  background: var(--theme-button-primary-hover);
  transform: scale(1.02);
}

.layout-card-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.layout-card-action.active {
  background: var(--theme-button-secondary);
  color: var(--theme-text);
  cursor: default;
}

.layouts-premium-settings {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--theme-border);
}

.layouts-premium-settings h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--theme-text);
}

.premium-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.premium-theme-card {
  background: var(--theme-card-bg);
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.premium-theme-card:hover {
  border-color: var(--theme-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.premium-theme-card.active {
  border-color: var(--theme-accent);
  background: rgba(94, 234, 212, 0.1);
}

.premium-theme-icon {
  font-size: 40px;
  margin-bottom: 4px;
}

.premium-theme-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme-text);
}

.premium-theme-description {
  font-size: 12px;
  color: var(--theme-text-muted);
  line-height: 1.4;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  /* Tabbed Layout Mobile */
  .tabbed-header {
    padding: 6px 12px;
    flex-wrap: wrap;
  }

  .tabbed-tab {
    padding: 6px 12px;
    font-size: 13px;
    min-width: 48px;
  }

  .tabbed-tab-name {
    display: none; /* Hide names on mobile, show only icons */
  }

  .tabbed-add-btn {
    padding: 6px 12px;
    font-size: 16px;
  }

  .tabbed-content-area {
    padding: 0;
  }

  /* Premium Layout Mobile */
  .premium-layout-container {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .premium-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .premium-scene > div,
  .premium-scene #premium-scene-wrapper {
    position: relative;
    width: 1000px;
    height: 700px;
    flex-shrink: 0;
    max-width: 100vw;
    max-height: 100vh;
    transform: scale(min(calc(100vw / 1000), calc(100vh / 700)));
    transform-origin: center center;
  }

  .premium-scene svg {
    width: 100%;
    height: 100%;
  }

  .premium-window-wrapper {
    left: 71.2%;
    top: 12.6%;
    width: 24%;
    height: 28.6%;
  }

  .premium-widgets-overlay {
    padding: 10px;
    align-items: flex-start;
    padding-top: 20px;
  }

  .premium-widget-container {
    max-width: 100%;
    max-height: calc(100vh - 40px);
    width: 100%;
    margin: 0;
  }

  .premium-widget-content {
    min-height: 300px;
    padding: 16px;
  }

  /* Layouts Widget Mobile */
  .layouts-widget {
    padding: 16px;
  }

  .layout-card {
    padding: 16px;
  }

  .layout-card-icon {
    font-size: 28px;
  }

  .premium-themes-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .premium-theme-card {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  /* Extra small mobile */
  .tabbed-tab {
    padding: 6px 8px;
    min-width: 44px;
  }

  .tabbed-tab-icon {
    font-size: 18px;
  }

  .premium-scene {
    transform: scale(calc(100vw / 1000));
  }

  .premium-widget-container {
    border-radius: 12px;
  }

  .premium-widget-header {
    padding: 10px 12px;
  }

  .premium-widget-content {
    padding: 12px;
    min-height: 250px;
  }

  .layout-card {
    padding: 12px;
  }

  .layout-card-header {
    gap: 12px;
  }

  .layout-card-icon {
    font-size: 24px;
  }
}

/* Theme-specific overrides */

/* Dark theme: darker weather bar and banners (not bright blue) */
html[data-theme="dark"] .weather-bar,
body[data-theme="dark"] .weather-bar,
body.dark-mode .weather-bar {
  background: var(--theme-widget-header-bg) !important;
}

html[data-theme="dark"] .email-verification-banner,
html[data-theme="dark"] .trial-ending-banner,
body[data-theme="dark"] .email-verification-banner,
body[data-theme="dark"] .trial-ending-banner,
body.dark-mode .email-verification-banner,
body.dark-mode .trial-ending-banner {
  background: var(--theme-widget-header-bg) !important;
}

/* Midnight theme: charcoal black weather bar and banners */
html[data-theme="midnight"] .weather-bar,
body[data-theme="midnight"] .weather-bar {
  background: var(--theme-widget-header-bg) !important;
}

html[data-theme="midnight"] .email-verification-banner,
html[data-theme="midnight"] .trial-ending-banner,
body[data-theme="midnight"] .email-verification-banner,
body[data-theme="midnight"] .trial-ending-banner {
  background: var(--theme-widget-header-bg) !important;
}

/* Minimal theme: white maximize/refresh/close buttons */
html[data-theme="minimal"] .widget-header-actions .widget-max-btn,
html[data-theme="minimal"] .widget-header-actions .widget-voice-btn,
html[data-theme="minimal"] .widget-header-actions .widget-refresh-btn,
html[data-theme="minimal"] .widget-header-actions .refresh-btn,
body[data-theme="minimal"] .widget-header-actions .widget-max-btn,
body[data-theme="minimal"] .widget-header-actions .widget-voice-btn,
body[data-theme="minimal"] .widget-header-actions .widget-refresh-btn,
body[data-theme="minimal"] .widget-header-actions .refresh-btn {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html[data-theme="minimal"] .widget-header-actions .widget-max-btn:hover,
html[data-theme="minimal"] .widget-header-actions .widget-voice-btn:hover,
html[data-theme="minimal"] .widget-header-actions .widget-refresh-btn:hover,
html[data-theme="minimal"] .widget-header-actions .refresh-btn:hover,
body[data-theme="minimal"] .widget-header-actions .widget-max-btn:hover,
body[data-theme="minimal"] .widget-header-actions .widget-voice-btn:hover,
body[data-theme="minimal"] .widget-header-actions .widget-refresh-btn:hover,
body[data-theme="minimal"] .widget-header-actions .refresh-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Calendar toolbar/buttons: theme-aware (light=black, dark=white) - see calendar.css */

/* --- Calendar Person Tree (Settings) --- */
.calendar-person-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}
.calendar-person-group {
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--theme-card-bg, rgba(255,255,255,0.04));
}
.calendar-person-group.expanded .calendar-person-calendars {
  display: block;
}
.calendar-person-group:not(.expanded) .calendar-person-calendars {
  display: none;
}
.calendar-person-group:not(.expanded) .calendar-person-toggle {
  transform: rotate(-90deg);
}
.calendar-person-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--theme-widget-header-bg, rgba(0,0,0,0.06));
  transition: background 0.2s;
}
.calendar-person-header:hover {
  background: var(--theme-input-bg, rgba(0,0,0,0.08));
}
.calendar-person-toggle {
  font-size: 0.9rem;
  color: var(--theme-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.calendar-person-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}
.calendar-person-name {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.95rem;
  font-weight: 600;
  background: transparent;
  border: none;
  color: inherit;
  border-radius: 6px;
}
.calendar-person-name:focus {
  outline: none;
  background: var(--theme-input-bg, rgba(0,0,0,0.06));
}
.calendar-person-name[readonly] {
  cursor: default;
  opacity: 0.8;
}
.calendar-person-count {
  font-size: 0.8rem;
  color: var(--theme-text-muted);
  padding: 2px 8px;
  background: var(--theme-input-bg, rgba(0,0,0,0.1));
  border-radius: 10px;
}
.calendar-person-delete {
  padding: 4px 10px !important;
  font-size: 0.8rem !important;
  flex-shrink: 0;
}
.calendar-person-calendars {
  padding: 8px 14px 12px 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendar-person-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--theme-input-bg, rgba(0,0,0,0.06));
  border-radius: 8px;
  border: 1px solid var(--theme-border);
}
.calendar-person-drag {
  cursor: grab;
  color: var(--theme-text-muted);
  font-size: 0.85rem;
  user-select: none;
}
.calendar-person-item-badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.calendar-person-item-alias {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: var(--theme-card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  color: inherit;
}
.calendar-person-item-alias:focus {
  outline: none;
  border-color: var(--theme-accent, #56A8FF);
}
.calendar-person-move {
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--theme-input-bg);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
}
.calendar-person-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--theme-border);
}