.focus-card,
.summary-card,
.info-card,
.tasks-panel,
.quick-panel,
.calendar-shell,
.bookmark-card,
.task-card {
  border: 1px solid var(--surface-border, var(--focus-border-glass));
  border-radius: var(--focus-radius-lg);
  background: var(--surface-glass, var(--focus-surface-glass));
  box-shadow: var(--focus-shadow-main);
  backdrop-filter: blur(var(--focus-blur-md));
}

.button,
.quick-action,
.logout-button,
.side-button,
.icon-button {
  min-height: var(--focus-touch-target);
  border-radius: var(--focus-radius-md);
  transition:
    transform var(--focus-motion-standard),
    box-shadow var(--focus-motion-standard),
    background var(--focus-motion-standard),
    border-color var(--focus-motion-standard);
}

.button:hover,
.quick-action:hover,
.logout-button:hover,
.side-button:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: linear-gradient(135deg, var(--focus-accent-blue-strong), #5d83ff);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary, var(--focus-accent-blue)) 24%, transparent);
}

.button.secondary,
.quick-action,
.logout-button {
  background: color-mix(in srgb, var(--surface-glass, var(--focus-surface-glass)) 88%, transparent);
  border-color: var(--surface-border, var(--focus-border-glass));
}

.icon-button,
.icon-action {
  width: var(--focus-icon-button-size);
  min-width: var(--focus-icon-button-size);
  height: var(--focus-icon-button-size);
  display: inline-grid;
  place-items: center;
}

.sidebar {
  width: var(--focus-sidebar-expanded);
}

.app-shell.sidebar-collapsed .sidebar {
  width: var(--focus-sidebar-collapsed);
}

.side-button {
  gap: var(--focus-space-3);
}

.calendar-day {
  border-radius: var(--focus-radius-md);
  border: 1px solid color-mix(in srgb, var(--surface-border, var(--focus-border-glass)) 78%, transparent);
  background: color-mix(in srgb, var(--surface-glass, var(--focus-surface-glass)) 76%, transparent);
  backdrop-filter: blur(var(--focus-blur-sm));
}

.calendar-day:hover {
  transform: translateY(-2px);
  box-shadow: var(--focus-glow-soft);
}

.summary-card,
.task-card {
  padding: var(--focus-space-5);
}

.task-card {
  display: grid;
  gap: var(--focus-space-3);
}

.chip,
.label-chip,
.filter-chip {
  border-radius: 999px;
  min-height: var(--focus-control-height-sm);
  padding-inline: var(--focus-space-4);
}