styles.css

:root {
  --bg: #0e1726;
  --bg-soft: radial-gradient(circle at top left, rgba(85, 167, 255, 0.22), transparent 34%), radial-gradient(circle at bottom right, rgba(255, 166, 92, 0.18), transparent 26%), #0e1726;
  --surface: rgba(14, 25, 40, 0.72);
  --surface-strong: rgba(18, 31, 49, 0.92);
  --border: rgba(255, 255, 255, 0.09);
  --text: #edf4ff;
  --muted: #9fb3ca;
  --primary: #69b1ff;
  --primary-strong: #4596f1;
  --success: #59d8a1;
  --warning: #ffbd73;
  --danger: #ff7d7d;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-bg-strong: #132033;
  --select-arrow: #dce8fb;
  --toggle-track-bg: rgba(255, 255, 255, 0.14);
  --toggle-track-border: rgba(255, 255, 255, 0.1);
  --calendar-icon: #dce8fb;
  --status-pending-bg: rgba(255, 189, 115, 0.18);
  --status-pending-text: #ffbd73;
  --status-progress-bg: rgba(105, 177, 255, 0.18);
  --status-progress-text: #69b1ff;
  --status-done-bg: rgba(89, 216, 161, 0.18);
  --status-done-text: #59d8a1;
  --error-bg: rgba(255, 125, 125, 0.08);
  --error-border: rgba(255, 125, 125, 0.72);
  --error-text: #ff9b9b;
  --compact-table-columns: minmax(300px, 2.6fr) minmax(120px, 0.9fr) minmax(110px, 0.85fr) minmax(130px, 1fr) minmax(120px, 0.9fr) minmax(110px, 0.85fr) minmax(132px, 1fr);
}

body.light {
  --bg: #eef3f8;
  --bg-soft: radial-gradient(circle at top left, rgba(0, 140, 255, 0.16), transparent 30%), radial-gradient(circle at bottom right, rgba(255, 153, 0, 0.18), transparent 28%), #eef3f8;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --border: rgba(12, 27, 52, 0.08);
  --text: #142136;
  --muted: #5b6980;
  --primary: #0e79d1;
  --primary-strong: #0a68b6;
  --success: #1aa36f;
  --warning: #c67a18;
  --danger: #cd4242;
  --shadow: 0 24px 45px rgba(45, 76, 117, 0.12);
  --field-bg: rgba(245, 248, 252, 0.96);
  --field-bg-strong: #ffffff;
  --select-arrow: #18324e;
  --toggle-track-bg: linear-gradient(135deg, #d8e3f0, #c3d4e7);
  --toggle-track-border: rgba(24, 50, 78, 0.15);
  --calendar-icon: #18324e;
  --error-bg: rgba(205, 66, 66, 0.08);
  --error-border: rgba(205, 66, 66, 0.45);
  --error-text: #b33131;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: 'Outfit', sans-serif;
  background: var(--bg-soft);
  color: var(--text);
  color-scheme: dark;
}

body {
  min-height: 100vh;
}

body.light {
  color-scheme: light;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  padding: 24px;
  align-items: start;
  transition: grid-template-columns 0.32s ease, gap 0.32s ease;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 92px 1fr;
}

.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.sidebar,
.hero,
.panel,
.stat-card {
  border-radius: 28px;
}

.sidebar {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: padding 0.28s ease, border-radius 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sidebar-copy {
  min-width: 0;
  transition: opacity 0.22s ease, transform 0.28s ease;
}

.sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 0.18s ease, transform 0.24s ease;
}

.sidebar-toggle {
  flex: 0 0 auto;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.sidebar-toggle .panel-toggle-icon {
  transform: rotate(-90deg);
}

.app-shell.sidebar-collapsed .sidebar {
  padding: 18px 12px;
}

.sidebar.is-collapsed .sidebar-copy h1,
.sidebar.is-collapsed .sidebar-copy .muted,
.sidebar.is-collapsed .sidebar-body {
  display: none;
}

.sidebar.is-collapsed .sidebar-header {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-height: 100%;
}

.sidebar.is-collapsed .sidebar-copy {
  text-align: center;
  margin-top: 0;
  transform: translateY(0);
}

.sidebar.is-collapsed .eyebrow {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  letter-spacing: 0.12em;
}

.sidebar.is-collapsed .sidebar-toggle {
  order: -1;
  align-self: center;
}

.sidebar.is-collapsed {
  align-items: center;
}

.sidebar.is-collapsed .sidebar-toggle .panel-toggle-icon {
  transform: rotate(90deg);
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero {
  padding: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.hero-actions select {
  width: auto;
  min-width: 170px;
  margin-top: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.analytics-card {
  padding: 24px;
  border-radius: 28px;
}

.analytics-heading {
  margin-bottom: 20px;
}

.chart-heading-actions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.chart-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-summary-item {
  min-width: 120px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.chart-summary-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.chart-summary-item strong {
  font-size: 1.15rem;
}

.chart-shell {
  position: relative;
  padding: 14px 16px 10px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
}

.workload-chart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 145;
}

.chart-dots-layer {
  position: absolute;
  inset: 14px 16px auto 16px;
  height: auto;
  aspect-ratio: 760 / 145;
  pointer-events: none;
}

.chart-grid-line {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

body.light .chart-grid-line {
  stroke: rgba(20, 33, 54, 0.08);
}

.chart-area-blur {
  fill: url(#chartAreaGradient);
  opacity: 0.9;
}

.chart-area {
  fill: url(#chartAreaGradient);
}

.chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  margin-top: -5.5px;
  border-radius: 50%;
  fill: var(--primary);
  background: var(--primary);
  stroke: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

body.light .chart-dot {
  box-shadow: 0 0 0 2px rgba(20, 33, 54, 0.14);
}

.chart-point {
  fill: var(--primary);
  stroke-width: 2;
}

.chart-labels {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
}

.chart-panel.is-collapsed .analytics-heading {
  margin-bottom: 0;
}

.chart-panel.is-collapsed .panel-toggle-icon {
  transform: rotate(180deg);
}

.stat-card {
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  inset: auto -20px -20px auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.stat-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 10px;
}

.stat-card strong {
  font-size: 2rem;
}

.accent-blue { background: linear-gradient(135deg, rgba(79, 155, 255, 0.18), var(--surface-strong)); }
.accent-gold { background: linear-gradient(135deg, rgba(255, 175, 74, 0.18), var(--surface-strong)); }
.accent-coral { background: linear-gradient(135deg, rgba(255, 104, 111, 0.16), var(--surface-strong)); }
.accent-green { background: linear-gradient(135deg, rgba(65, 207, 147, 0.16), var(--surface-strong)); }

.content-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 24px;
}

.list-stack {
  display: grid;
  gap: 24px;
  align-content: start;
}

.panel {
  padding: 24px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.panel-toggle:hover {
  transform: translateY(-1px);
  background: rgba(105, 177, 255, 0.12);
  color: var(--primary);
}

.panel-toggle-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.panel-toggle-icon::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.51a.75.75 0 0 1-1.08 0l-4.25-4.51a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.51a.75.75 0 0 1-1.08 0l-4.25-4.51a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex: 0 0 auto;
}

.section-icon::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.filters-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 5.75A.75.75 0 0 1 3.75 5h16.5a.75.75 0 0 1 .53 1.28L14 13.06v5.19a.75.75 0 0 1-1.16.63l-2-1.25a.75.75 0 0 1-.34-.63v-3.94L3.22 6.28A.75.75 0 0 1 3 5.75Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 5.75A.75.75 0 0 1 3.75 5h16.5a.75.75 0 0 1 .53 1.28L14 13.06v5.19a.75.75 0 0 1-1.16.63l-2-1.25a.75.75 0 0 1-.34-.63v-3.94L3.22 6.28A.75.75 0 0 1 3 5.75Z'/%3E%3C/svg%3E");
}

.grouping-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4.5 4A1.5 1.5 0 0 0 3 5.5v3A1.5 1.5 0 0 0 4.5 10h3A1.5 1.5 0 0 0 9 8.5v-3A1.5 1.5 0 0 0 7.5 4h-3Zm6.75.75a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75ZM12 8a.75.75 0 0 1 .75-.75H18a.75.75 0 0 1 0 1.5h-5.25A.75.75 0 0 1 12 8ZM4.5 14A1.5 1.5 0 0 0 3 15.5v3A1.5 1.5 0 0 0 4.5 20h3A1.5 1.5 0 0 0 9 18.5v-3A1.5 1.5 0 0 0 7.5 14h-3Zm6.75.75A.75.75 0 0 1 12 14h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75ZM12 18a.75.75 0 0 1 .75-.75H18a.75.75 0 0 1 0 1.5h-5.25A.75.75 0 0 1 12 18Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4.5 4A1.5 1.5 0 0 0 3 5.5v3A1.5 1.5 0 0 0 4.5 10h3A1.5 1.5 0 0 0 9 8.5v-3A1.5 1.5 0 0 0 7.5 4h-3Zm6.75.75a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75ZM12 8a.75.75 0 0 1 .75-.75H18a.75.75 0 0 1 0 1.5h-5.25A.75.75 0 0 1 12 8ZM4.5 14A1.5 1.5 0 0 0 3 15.5v3A1.5 1.5 0 0 0 4.5 20h3A1.5 1.5 0 0 0 9 18.5v-3A1.5 1.5 0 0 0 7.5 14h-3Zm6.75.75A.75.75 0 0 1 12 14h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75ZM12 18a.75.75 0 0 1 .75-.75H18a.75.75 0 0 1 0 1.5h-5.25A.75.75 0 0 1 12 18Z'/%3E%3C/svg%3E");
}

.tasks-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 4.75A.75.75 0 0 1 9.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 9 4.75ZM5.5 3A2.5 2.5 0 0 0 3 5.5v13A2.5 2.5 0 0 0 5.5 21h13a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 18.5 3h-1.69a.75.75 0 0 0-.53.22l-.53.53A1.25 1.25 0 0 1 14.87 4.5H9.13a1.25 1.25 0 0 1-.88-.37l-.53-.53A.75.75 0 0 0 7.19 3H5.5Zm1.78 7.22a.75.75 0 0 1 1.06 0l1.16 1.16 3.16-3.16a.75.75 0 1 1 1.06 1.06l-3.69 3.69a.75.75 0 0 1-1.06 0L7.28 11.28a.75.75 0 0 1 0-1.06Zm0 5a.75.75 0 0 1 1.06 0l1.16 1.16 3.16-3.16a.75.75 0 0 1 1.06 1.06l-3.69 3.69a.75.75 0 0 1-1.06 0l-1.69-1.69a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 4.75A.75.75 0 0 1 9.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 9 4.75ZM5.5 3A2.5 2.5 0 0 0 3 5.5v13A2.5 2.5 0 0 0 5.5 21h13a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 18.5 3h-1.69a.75.75 0 0 0-.53.22l-.53.53A1.25 1.25 0 0 1 14.87 4.5H9.13a1.25 1.25 0 0 1-.88-.37l-.53-.53A.75.75 0 0 0 7.19 3H5.5Zm1.78 7.22a.75.75 0 0 1 1.06 0l1.16 1.16 3.16-3.16a.75.75 0 1 1 1.06 1.06l-3.69 3.69a.75.75 0 0 1-1.06 0L7.28 11.28a.75.75 0 0 1 0-1.06Zm0 5a.75.75 0 0 1 1.06 0l1.16 1.16 3.16-3.16a.75.75 0 0 1 1.06 1.06l-3.69 3.69a.75.75 0 0 1-1.06 0l-1.69-1.69a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
}

.section-note {
  margin: 8px 0 0;
  max-width: 58ch;
  font-size: 0.92rem;
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--primary);
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  font-size: 2.35rem;
  line-height: 1.05;
  margin-bottom: 14px;
}

h2 {
  margin-bottom: 10px;
  font-size: 1.8rem;
}

h3 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.muted {
  color: var(--muted);
  line-height: 1.65;
}

.theme-switcher,
.api-box,
.theme-palette {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.theme-switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.appearance-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.theme-palette {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compact-palette {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.theme-palette label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.theme-palette select {
  margin-top: 0;
}

.compact-palette label {
  display: none;
}

.compact-palette select {
  width: 100%;
}

.study-guide-box .secondary-button,
.api-actions .secondary-button {
  width: 100%;
}

.api-actions {
  display: grid;
  gap: 10px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  border: 1px solid var(--border);
}

.toggle-track {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--toggle-track-bg);
  border: 1px solid var(--toggle-track-border);
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--warning), var(--primary));
  transition: transform 0.25s ease;
}

body.light .toggle-thumb {
  transform: translateX(20px);
}

.icon-only-toggle {
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  min-width: 108px;
  padding: 8px 10px;
}

.theme-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.78;
  flex: 0 0 auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.moon-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 14.2A9 9 0 0 1 9.8 3a1 1 0 0 0-1.28 1.28A9 9 0 1 0 19.72 15.5 1 1 0 0 0 21 14.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 14.2A9 9 0 0 1 9.8 3a1 1 0 0 0-1.28 1.28A9 9 0 1 0 19.72 15.5 1 1 0 0 0 21 14.2Z'/%3E%3C/svg%3E");
}

.sun-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0-16a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 19a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Zm10-9a1 1 0 0 1-1 1h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1ZM5 12a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1Zm12.66 6.24a1 1 0 0 1 1.42 0l.7.71a1 1 0 0 1-1.41 1.41l-.71-.7a1 1 0 0 1 0-1.42ZM5.63 5.63a1 1 0 0 1 1.41 0l.71.71A1 1 0 1 1 6.34 7.75l-.71-.71a1 1 0 0 1 0-1.41Zm12.02-1.42a1 1 0 0 1 0 1.42l-.71.71a1 1 0 0 1-1.41-1.42l.7-.71a1 1 0 0 1 1.42 0ZM7.05 16.95a1 1 0 0 1 0 1.41l-.71.7a1 1 0 0 1-1.41-1.41l.7-.71a1 1 0 0 1 1.42 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0-16a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 19a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Zm10-9a1 1 0 0 1-1 1h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1ZM5 12a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1Zm12.66 6.24a1 1 0 0 1 1.42 0l.7.71a1 1 0 0 1-1.41 1.41l-.71-.7a1 1 0 0 1 0-1.42ZM5.63 5.63a1 1 0 0 1 1.41 0l.71.71A1 1 0 1 1 6.34 7.75l-.71-.71a1 1 0 0 1 0-1.41Zm12.02-1.42a1 1 0 0 1 0 1.42l-.71.71a1 1 0 0 1-1.41-1.42l.7-.71a1 1 0 0 1 1.42 0ZM7.05 16.95a1 1 0 0 1 0 1.41l-.71.7a1 1 0 0 1-1.41-1.41l.7-.71a1 1 0 0 1 1.42 0Z'/%3E%3C/svg%3E");
}

body[data-color-scheme='aurora'] {
  --bg: #11162b;
  --bg-soft: radial-gradient(circle at top left, rgba(48, 224, 210, 0.24), transparent 32%), radial-gradient(circle at bottom right, rgba(163, 109, 255, 0.22), transparent 30%), #11162b;
  --surface: rgba(17, 28, 47, 0.76);
  --surface-strong: rgba(21, 34, 58, 0.94);
  --text: #eef7ff;
  --muted: #a4b9d8;
  --primary: #6fe2d7;
  --primary-strong: #4bc9bd;
  --success: #6de3b5;
  --warning: #f7c96c;
  --danger: #ff8c96;
  --shadow: 0 24px 60px rgba(5, 10, 26, 0.34);
  --field-bg: rgba(255, 255, 255, 0.07);
  --field-bg-strong: #17243b;
  --select-arrow: #dff7f4;
  --calendar-icon: #dff7f4;
  --status-pending-bg: rgba(247, 201, 108, 0.16);
  --status-pending-text: #f7c96c;
  --status-progress-bg: rgba(111, 226, 215, 0.18);
  --status-progress-text: #6fe2d7;
  --status-done-bg: rgba(109, 227, 181, 0.18);
  --status-done-text: #6de3b5;
}

body.light[data-color-scheme='aurora'] {
  --bg: #eef6fb;
  --bg-soft: radial-gradient(circle at top left, rgba(55, 207, 193, 0.18), transparent 34%), radial-gradient(circle at bottom right, rgba(152, 110, 255, 0.16), transparent 28%), #eef6fb;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-strong: rgba(255, 255, 255, 0.97);
  --text: #143043;
  --muted: #58708a;
  --primary: #1caa9d;
  --primary-strong: #159487;
  --success: #1d9f77;
  --warning: #bb7d1b;
  --danger: #cf5562;
  --field-bg: rgba(244, 250, 252, 0.98);
  --field-bg-strong: #ffffff;
  --select-arrow: #173948;
  --calendar-icon: #173948;
}

body[data-color-scheme='eighties'] {
  --bg: #12081c;
  --bg-soft: radial-gradient(circle at top left, rgba(255, 65, 173, 0.26), transparent 32%), radial-gradient(circle at top right, rgba(0, 234, 255, 0.2), transparent 28%), radial-gradient(circle at bottom center, rgba(255, 146, 43, 0.18), transparent 30%), #12081c;
  --surface: rgba(26, 14, 42, 0.8);
  --surface-strong: rgba(34, 18, 54, 0.96);
  --border: rgba(255, 114, 196, 0.14);
  --text: #fff2fb;
  --muted: #d4afd1;
  --primary: #ff4fb0;
  --primary-strong: #ea2a96;
  --success: #41f0d0;
  --warning: #ffb84d;
  --danger: #ff6d8f;
  --shadow: 0 24px 72px rgba(6, 2, 16, 0.45);
  --field-bg: rgba(255, 255, 255, 0.07);
  --field-bg-strong: #211238;
  --select-arrow: #ffe0f4;
  --toggle-track-bg: linear-gradient(135deg, rgba(255, 79, 176, 0.26), rgba(65, 240, 208, 0.22));
  --toggle-track-border: rgba(255, 114, 196, 0.16);
  --calendar-icon: #ffe0f4;
  --status-pending-bg: rgba(255, 184, 77, 0.16);
  --status-pending-text: #ffb84d;
  --status-progress-bg: rgba(255, 79, 176, 0.18);
  --status-progress-text: #ff4fb0;
  --status-done-bg: rgba(65, 240, 208, 0.18);
  --status-done-text: #41f0d0;
  --error-bg: rgba(255, 109, 143, 0.08);
  --error-border: rgba(255, 109, 143, 0.52);
  --error-text: #ff9ab2;
}

body.light[data-color-scheme='eighties'] {
  --bg: #fff0fb;
  --bg-soft: radial-gradient(circle at top left, rgba(255, 79, 176, 0.16), transparent 34%), radial-gradient(circle at top right, rgba(65, 240, 208, 0.14), transparent 30%), radial-gradient(circle at bottom center, rgba(255, 184, 77, 0.12), transparent 32%), #fff0fb;
  --surface: rgba(255, 255, 255, 0.89);
  --surface-strong: rgba(255, 255, 255, 0.99);
  --border: rgba(194, 82, 152, 0.12);
  --text: #361b43;
  --muted: #7f638a;
  --primary: #d73c95;
  --primary-strong: #bc267e;
  --success: #10a69d;
  --warning: #c9821e;
  --danger: #d64d71;
  --shadow: 0 24px 48px rgba(149, 92, 163, 0.14);
  --field-bg: rgba(255, 248, 253, 0.98);
  --field-bg-strong: #ffffff;
  --select-arrow: #43285a;
  --toggle-track-bg: linear-gradient(135deg, rgba(255, 79, 176, 0.18), rgba(65, 240, 208, 0.14));
  --toggle-track-border: rgba(159, 86, 158, 0.14);
  --calendar-icon: #43285a;
  --error-bg: rgba(214, 77, 113, 0.08);
  --error-border: rgba(214, 77, 113, 0.34);
  --error-text: #bf315b;
}

body[data-color-scheme='cyberpunk'] {
  --bg: #0b0b10;
  --bg-soft: radial-gradient(circle at top left, rgba(255, 226, 61, 0.22), transparent 28%), radial-gradient(circle at top right, rgba(0, 245, 255, 0.18), transparent 26%), radial-gradient(circle at bottom center, rgba(255, 0, 122, 0.14), transparent 30%), #0b0b10;
  --surface: rgba(20, 21, 28, 0.84);
  --surface-strong: rgba(26, 27, 36, 0.97);
  --border: rgba(255, 226, 61, 0.14);
  --text: #fffde7;
  --muted: #c9c3a2;
  --primary: #ffe23d;
  --primary-strong: #f0c800;
  --success: #00f0ff;
  --warning: #ffb400;
  --danger: #ff4d8d;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.48);
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-bg-strong: #1b1d25;
  --select-arrow: #fff9c7;
  --toggle-track-bg: linear-gradient(135deg, rgba(255, 226, 61, 0.28), rgba(0, 240, 255, 0.16));
  --toggle-track-border: rgba(255, 226, 61, 0.18);
  --calendar-icon: #fff9c7;
  --status-pending-bg: rgba(255, 180, 0, 0.16);
  --status-pending-text: #ffb400;
  --status-progress-bg: rgba(255, 226, 61, 0.18);
  --status-progress-text: #ffe23d;
  --status-done-bg: rgba(0, 240, 255, 0.18);
  --status-done-text: #00f0ff;
  --error-bg: rgba(255, 77, 141, 0.08);
  --error-border: rgba(255, 77, 141, 0.5);
  --error-text: #ff8bb6;
}

body.light[data-color-scheme='cyberpunk'] {
  --bg: #fffdf2;
  --bg-soft: radial-gradient(circle at top left, rgba(255, 226, 61, 0.16), transparent 30%), radial-gradient(circle at top right, rgba(0, 240, 255, 0.12), transparent 26%), radial-gradient(circle at bottom center, rgba(255, 77, 141, 0.1), transparent 30%), #fffdf2;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.99);
  --border: rgba(187, 161, 30, 0.14);
  --text: #282410;
  --muted: #736c45;
  --primary: #c9a900;
  --primary-strong: #ae9100;
  --success: #009ea8;
  --warning: #cc8d00;
  --danger: #d4457b;
  --shadow: 0 24px 48px rgba(150, 136, 47, 0.14);
  --field-bg: rgba(255, 254, 245, 0.98);
  --field-bg-strong: #ffffff;
  --select-arrow: #3b3513;
  --toggle-track-bg: linear-gradient(135deg, rgba(255, 226, 61, 0.18), rgba(0, 240, 255, 0.12));
  --toggle-track-border: rgba(172, 154, 42, 0.14);
  --calendar-icon: #3b3513;
  --error-bg: rgba(212, 69, 123, 0.08);
  --error-border: rgba(212, 69, 123, 0.34);
  --error-text: #bc2e67;
}

body[data-color-scheme='ember'] {
  --bg: #17131b;
  --bg-soft: radial-gradient(circle at top left, rgba(255, 140, 92, 0.26), transparent 34%), radial-gradient(circle at bottom right, rgba(255, 87, 114, 0.18), transparent 28%), #17131b;
  --surface: rgba(28, 21, 28, 0.78);
  --surface-strong: rgba(37, 27, 34, 0.95);
  --text: #fff1ea;
  --muted: #d0b1a6;
  --primary: #ff9a62;
  --primary-strong: #ff7b47;
  --success: #ffb26b;
  --warning: #ffd166;
  --danger: #ff6f7b;
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-bg-strong: #271d27;
  --select-arrow: #ffe6d4;
  --calendar-icon: #ffe6d4;
  --status-pending-bg: rgba(255, 209, 102, 0.16);
  --status-pending-text: #ffd166;
  --status-progress-bg: rgba(255, 154, 98, 0.18);
  --status-progress-text: #ff9a62;
  --status-done-bg: rgba(255, 178, 107, 0.18);
  --status-done-text: #ffb26b;
}

body.light[data-color-scheme='ember'] {
  --bg: #fff3ee;
  --bg-soft: radial-gradient(circle at top left, rgba(255, 127, 80, 0.16), transparent 34%), radial-gradient(circle at bottom right, rgba(255, 99, 132, 0.14), transparent 28%), #fff3ee;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --text: #3a221f;
  --muted: #7a5b58;
  --primary: #e36c37;
  --primary-strong: #cb5a28;
  --success: #c97b2c;
  --warning: #b28922;
  --danger: #d14f5d;
  --field-bg: rgba(255, 248, 245, 0.98);
  --field-bg-strong: #ffffff;
  --select-arrow: #3c2623;
  --calendar-icon: #3c2623;
}

body[data-color-scheme='forest'] {
  --bg: #0f1916;
  --bg-soft: radial-gradient(circle at top left, rgba(71, 186, 140, 0.22), transparent 32%), radial-gradient(circle at bottom right, rgba(188, 232, 112, 0.16), transparent 28%), #0f1916;
  --surface: rgba(16, 30, 26, 0.78);
  --surface-strong: rgba(19, 38, 33, 0.95);
  --text: #edf8f2;
  --muted: #a7c5b9;
  --primary: #59c79d;
  --primary-strong: #3fae85;
  --success: #8dde8f;
  --warning: #d4d56f;
  --danger: #ff8f8a;
  --field-bg: rgba(255, 255, 255, 0.05);
  --field-bg-strong: #183128;
  --select-arrow: #e0f4e8;
  --calendar-icon: #e0f4e8;
  --status-pending-bg: rgba(212, 213, 111, 0.16);
  --status-pending-text: #d4d56f;
  --status-progress-bg: rgba(89, 199, 157, 0.18);
  --status-progress-text: #59c79d;
  --status-done-bg: rgba(141, 222, 143, 0.18);
  --status-done-text: #8dde8f;
}

body.light[data-color-scheme='forest'] {
  --bg: #eff7f1;
  --bg-soft: radial-gradient(circle at top left, rgba(74, 170, 127, 0.16), transparent 34%), radial-gradient(circle at bottom right, rgba(178, 211, 92, 0.14), transparent 28%), #eff7f1;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --text: #163127;
  --muted: #5d786d;
  --primary: #278961;
  --primary-strong: #1f7652;
  --success: #3c9463;
  --warning: #8f9332;
  --danger: #ca5f5b;
  --field-bg: rgba(246, 251, 247, 0.98);
  --field-bg-strong: #ffffff;
  --select-arrow: #20392f;
  --calendar-icon: #20392f;
}

body[data-color-scheme='neon'] {
  --bg: #090811;
  --bg-soft: radial-gradient(circle at top left, rgba(0, 255, 214, 0.28), transparent 30%), radial-gradient(circle at top right, rgba(255, 58, 186, 0.22), transparent 28%), radial-gradient(circle at bottom center, rgba(144, 86, 255, 0.2), transparent 30%), #090811;
  --surface: rgba(15, 14, 28, 0.82);
  --surface-strong: rgba(21, 19, 36, 0.96);
  --border: rgba(127, 255, 240, 0.12);
  --text: #f5f3ff;
  --muted: #b6afd8;
  --primary: #00f5d4;
  --primary-strong: #00d7bc;
  --success: #72ffa7;
  --warning: #ffe66d;
  --danger: #ff6ad5;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
  --field-bg: rgba(255, 255, 255, 0.07);
  --field-bg-strong: #16142a;
  --select-arrow: #dffffa;
  --toggle-track-bg: linear-gradient(135deg, rgba(0, 245, 212, 0.26), rgba(255, 106, 213, 0.24));
  --toggle-track-border: rgba(127, 255, 240, 0.16);
  --calendar-icon: #dffffa;
  --status-pending-bg: rgba(255, 230, 109, 0.16);
  --status-pending-text: #ffe66d;
  --status-progress-bg: rgba(0, 245, 212, 0.18);
  --status-progress-text: #00f5d4;
  --status-done-bg: rgba(114, 255, 167, 0.18);
  --status-done-text: #72ffa7;
  --error-bg: rgba(255, 106, 213, 0.08);
  --error-border: rgba(255, 106, 213, 0.55);
  --error-text: #ff9ce4;
}

body.light[data-color-scheme='neon'] {
  --bg: #f7f4ff;
  --bg-soft: radial-gradient(circle at top left, rgba(0, 245, 212, 0.16), transparent 32%), radial-gradient(circle at top right, rgba(255, 106, 213, 0.14), transparent 28%), radial-gradient(circle at bottom center, rgba(148, 98, 255, 0.12), transparent 30%), #f7f4ff;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: rgba(255, 255, 255, 0.99);
  --border: rgba(101, 75, 156, 0.12);
  --text: #24183f;
  --muted: #756994;
  --primary: #00bfa5;
  --primary-strong: #00a08b;
  --success: #2fbc6d;
  --warning: #b89a13;
  --danger: #d94bb3;
  --shadow: 0 24px 45px rgba(92, 72, 147, 0.14);
  --field-bg: rgba(251, 248, 255, 0.98);
  --field-bg-strong: #ffffff;
  --select-arrow: #2f2350;
  --toggle-track-bg: linear-gradient(135deg, rgba(0, 245, 212, 0.18), rgba(255, 106, 213, 0.16));
  --toggle-track-border: rgba(108, 82, 160, 0.14);
  --calendar-icon: #2f2350;
  --error-bg: rgba(217, 75, 179, 0.08);
  --error-border: rgba(217, 75, 179, 0.35);
  --error-text: #bb2f92;
}

body[data-color-scheme='rose'] {
  --bg: #171320;
  --bg-soft: radial-gradient(circle at top left, rgba(240, 119, 191, 0.22), transparent 34%), radial-gradient(circle at bottom right, rgba(154, 128, 255, 0.18), transparent 28%), #171320;
  --surface: rgba(27, 21, 39, 0.78);
  --surface-strong: rgba(36, 27, 50, 0.95);
  --text: #fff0f9;
  --muted: #c7b0c7;
  --primary: #f286c3;
  --primary-strong: #de62aa;
  --success: #8eddb2;
  --warning: #ffc483;
  --danger: #ff8bab;
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-bg-strong: #241c33;
  --select-arrow: #ffe2f1;
  --calendar-icon: #ffe2f1;
  --status-pending-bg: rgba(255, 196, 131, 0.16);
  --status-pending-text: #ffc483;
  --status-progress-bg: rgba(242, 134, 195, 0.18);
  --status-progress-text: #f286c3;
  --status-done-bg: rgba(142, 221, 178, 0.18);
  --status-done-text: #8eddb2;
}

body.light[data-color-scheme='rose'] {
  --bg: #fcf0f7;
  --bg-soft: radial-gradient(circle at top left, rgba(240, 128, 194, 0.16), transparent 34%), radial-gradient(circle at bottom right, rgba(155, 133, 255, 0.12), transparent 28%), #fcf0f7;
  --surface: rgba(255, 255, 255, 0.87);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --text: #3b2236;
  --muted: #795f78;
  --primary: #cf5ea3;
  --primary-strong: #b84b90;
  --success: #4d9b72;
  --warning: #c4873d;
  --danger: #d95c81;
  --field-bg: rgba(255, 247, 251, 0.98);
  --field-bg-strong: #ffffff;
  --select-arrow: #3f2540;
  --calendar-icon: #3f2540;
}

.api-box ul:not(.api-link-list) {
  padding-left: 18px;
  margin: 12px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.storage-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.storage-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.storage-status span {
  color: var(--muted);
}

.storage-status strong {
  font-size: 1.05rem;
}

.storage-note {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

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

.todo-form,
.filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.collapsible-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.28s ease;
}

.collapsible-body-inner {
  min-height: 0;
  overflow: hidden;
}

.search-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
}

.filter-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.search-field input {
  margin-top: 0;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.date-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.filter-date-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-date-field input {
  margin-top: 0;
}

.quick-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.quick-filter-legend {
  margin: 2px 0 0;
  font-size: 0.83rem;
}

.todo-form label,
.filters input,
.filters select {
  color: var(--muted);
}

.quick-filter {
  position: relative;
  display: inline-flex;
  margin-top: 8px;
}

.quick-filter span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.quick-filter span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(159, 179, 202, 0.45);
  transition: background 0.2s ease, transform 0.2s ease;
}

.quick-filter input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.quick-filter:hover span {
  transform: translateY(-1px);
  border-color: rgba(105, 177, 255, 0.28);
}

.quick-filter input:focus-visible + span {
  outline: 2px solid rgba(105, 177, 255, 0.45);
  outline-offset: 2px;
}

.quick-filter input:checked + span {
  background: rgba(105, 177, 255, 0.16);
  border-color: rgba(105, 177, 255, 0.35);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(105, 177, 255, 0.12);
}

.quick-filter input:checked + span::before {
  background: currentColor;
  transform: scale(1.1);
}

input,
select,
textarea {
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 48px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-arrow) 50%),
    linear-gradient(135deg, var(--select-arrow) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select option,
select optgroup {
  background: var(--field-bg-strong);
  color: var(--text);
}

body.light select option,
body.light select optgroup {
  background: #ffffff;
  color: #142136;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(105, 177, 255, 0.75);
  transform: translateY(-1px);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.chip {
  border-radius: 16px;
  padding: 12px 16px;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.primary-button,
.secondary-button {
  font-weight: 600;
}

.primary-button {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: white;
}

.secondary-button {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.ghost-button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.danger-button {
  background: rgba(255, 125, 125, 0.12);
  color: var(--danger);
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.danger-button:hover,
.chip:hover {
  transform: translateY(-1px);
}

.group-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--muted);
}

.chip {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.chip.active {
  background: rgba(105, 177, 255, 0.18);
  color: var(--primary);
}

.group-results {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.results-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.task-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.view-toggle,
.density-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.view-toggle-button,
.density-toggle-button {
  padding: 10px 14px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.view-toggle-button:hover,
.density-toggle-button:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.view-toggle-button.active,
.density-toggle-button.active {
  background: rgba(105, 177, 255, 0.16);
  color: var(--primary);
  border-color: rgba(105, 177, 255, 0.22);
}

.results-stat {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.results-stat span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.results-stat strong {
  font-size: 1.2rem;
}

.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(105, 177, 255, 0.14);
  border: 1px solid rgba(105, 177, 255, 0.24);
  color: var(--primary);
  font-size: 0.82rem;
}

.active-filter-pill:hover {
  background: rgba(105, 177, 255, 0.2);
  transform: translateY(-1px);
}

.filter-pill-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(105, 177, 255, 0.18);
  font-size: 0.9rem;
  line-height: 1;
}

.clear-filters-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.82rem;
}

.clear-filters-button:hover {
  color: var(--text);
  border-style: solid;
  transform: translateY(-1px);
}

.group-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
}

.group-pill.pending {
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
}

.group-pill.in_progress {
  background: var(--status-progress-bg);
  color: var(--status-progress-text);
}

.group-pill.done {
  background: var(--status-done-bg);
  color: var(--status-done-text);
}

.task-list-shell {
  display: flex;
  flex-direction: column;
  max-height: min(58vh, 780px);
  overflow-y: auto;
  padding-right: 6px;
}

.task-list-shell::-webkit-scrollbar {
  width: 10px;
}

.task-list-shell::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.task-list-shell::-webkit-scrollbar-thumb {
  background: rgba(105, 177, 255, 0.26);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.light .task-list-shell::-webkit-scrollbar-track {
  background: rgba(24, 50, 78, 0.06);
}

body.light .task-list-shell::-webkit-scrollbar-thumb {
  background: rgba(14, 121, 209, 0.24);
  background-clip: padding-box;
}

.todo-list {
  display: grid;
  gap: 14px;
  overflow: visible;
}

.todo-card {
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  animation: fadeInUp 0.35s ease;
}

.todo-row {
  display: grid;
  grid-template-columns: var(--compact-table-columns);
  gap: 14px;
  align-items: center;
  justify-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  animation: fadeInUp 0.25s ease;
}

.todo-row-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  justify-self: start;
  width: 100%;
}

.todo-row-title {
  margin-bottom: 0;
  font-size: 1rem;
}

.todo-row-description {
  color: var(--muted);
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compact-pill,
.due-pill,
.todo-row .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
}

.compact-pill,
.due-pill {
  min-height: 34px;
  justify-content: center;
  white-space: nowrap;
}

.compact-pill {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  max-width: 100%;
}

.compact-pill-muted {
  opacity: 0.8;
}

.todo-row-status,
.todo-row-priority,
.todo-row-category,
.todo-row-due,
.todo-row-flag {
  min-width: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.todo-row-priority .compact-pill,
.todo-row-category .compact-pill,
.todo-row-due .compact-pill,
.todo-row-flag .compact-pill,
.todo-row-flag .due-pill {
  width: max-content;
  max-width: 100%;
}

.todo-row-actions {
  display: flex;
  align-items: center;
  justify-self: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
}

.todo-list.compact-mode {
  gap: 10px;
}

.todo-list.density-compact {
  gap: 8px;
}

.compact-header.density-compact {
  padding-bottom: 8px;
}

.todo-list.density-compact .todo-row {
  padding: 8px 12px;
  gap: 10px;
  border-radius: 14px;
}

.todo-list.density-compact .todo-row-description {
  display: none;
}

.todo-list.density-compact .todo-row-title {
  font-size: 0.92rem;
}

.todo-list.density-compact .compact-pill,
.todo-list.density-compact .todo-row .status-badge,
.todo-list.density-compact .due-pill {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.72rem;
}

.todo-list.density-compact .todo-row-actions {
  gap: 8px;
}

.todo-list.density-compact .todo-row-actions .ghost-button,
.todo-list.density-compact .todo-row-actions .danger-button {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
}

.todo-list.density-compact .todo-row-title-wrap {
  gap: 0;
}

.todo-card.is-overdue {
  border-color: rgba(255, 125, 125, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 125, 125, 0.12);
}

.todo-card.is-due-today {
  border-color: rgba(255, 189, 115, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 189, 115, 0.12);
}

.todo-card.is-due-soon {
  border-color: rgba(105, 177, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(105, 177, 255, 0.12);
}

.todo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.todo-title {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.todo-description {
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 0;
}

.todo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.todo-meta span,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.status-badge.pending { background: var(--status-pending-bg); color: var(--status-pending-text); }
.status-badge.in_progress { background: var(--status-progress-bg); color: var(--status-progress-text); }
.status-badge.done { background: var(--status-done-bg); color: var(--status-done-text); }

.todo-meta span {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.due-pill.overdue {
  background: rgba(255, 125, 125, 0.14);
  color: var(--danger);
}

.due-pill.due-today {
  background: rgba(255, 189, 115, 0.16);
  color: var(--warning);
}

.due-pill.due-soon {
  background: rgba(105, 177, 255, 0.16);
  color: var(--primary);
}

.date-input-wrap {
  position: relative;
}

.date-input-wrap input {
  padding-right: 48px;
}

.date-input-wrap.is-invalid input {
  border-color: var(--error-border);
  background: var(--error-bg);
}

.field-input.is-invalid {
  border-color: var(--error-border);
  background: var(--error-bg);
}

.date-input-wrap.is-invalid .date-icon-button {
  color: var(--error-text);
}

.date-picker-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.date-icon-button {
  position: absolute;
  right: 8px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translateY(-38%);
  border-radius: 10px;
  background: transparent;
  color: var(--calendar-icon);
}

.date-icon-button:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.light .date-icon-button:hover {
  background: rgba(24, 50, 78, 0.08);
}

.date-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--calendar-icon);
}

.date-icon::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.field-error {
  display: block;
  margin-top: 8px;
  color: var(--error-text);
  font-size: 0.84rem;
  line-height: 1.4;
}

.todo-actions {
  display: flex;
  gap: 10px;
}

.feedback {
  margin: 16px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(89, 216, 161, 0.12);
  color: var(--success);
}

.compact-header {
  display: grid;
  grid-template-columns: var(--compact-table-columns);
  gap: 14px;
  align-items: center;
  justify-items: center;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 10px;
  padding: 10px 16px 12px;
  background: color-mix(in srgb, var(--surface-strong) 86%, white 14%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compact-header-actions {
  justify-self: center;
}

.compact-header-title {
  justify-self: start;
}

.compact-header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.compact-header-title.compact-header-button {
  justify-content: flex-start;
}

.compact-header-button:hover {
  color: var(--text);
}

.compact-header-button.active {
  color: var(--primary);
}

.compact-header-button.active::after {
  font-size: 0.72rem;
  line-height: 1;
}

.compact-header-button.active[data-sort-direction='asc']::after {
  content: '↑';
}

.compact-header-button.active[data-sort-direction='desc']::after {
  content: '↓';
}

body.light .compact-header {
  background: color-mix(in srgb, var(--surface-strong) 90%, white 10%);
}

.filters-panel,
.grouping-panel,
.list-panel {
  position: relative;
}

.filters-panel.is-collapsed .collapsible-body,
.grouping-panel.is-collapsed .collapsible-body,
.chart-panel.is-collapsed .collapsible-body {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
}

.filters-panel.is-collapsed .panel-toggle-icon,
.grouping-panel.is-collapsed .panel-toggle-icon,
.chart-panel.is-collapsed .panel-toggle-icon {
  transform: rotate(180deg);
}

.filters-panel.is-collapsed .panel-heading,
.grouping-panel.is-collapsed .panel-heading,
.chart-panel.is-collapsed .panel-heading {
  margin-bottom: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 10, 18, 0.54);
  backdrop-filter: blur(12px);
  z-index: 1000;
  animation: modalFadeIn 0.2s ease;
}

.modal-backdrop.is-closing {
  animation: modalFadeOut 0.18s ease forwards;
}

body.light .modal-backdrop {
  background: rgba(44, 62, 96, 0.22);
}

.modal-card {
  width: min(100%, 440px);
  padding: 24px;
  border-radius: 24px;
  animation: modalScaleIn 0.22s ease;
}

.modal-backdrop.is-closing .modal-card {
  animation: modalScaleOut 0.18s ease forwards;
}

.modal-header {
  margin-bottom: 10px;
}

.modal-task-name {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.modal-actions .danger-button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.hidden {
  display: none;
}

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

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

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

@media (max-width: 1100px) {
  .app-shell,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: none;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px;
  }

  .hero,
  .panel,
  .sidebar {
    padding: 20px;
    border-radius: 24px;
  }

  .hero,
  .panel-heading,
  .todo-card-header,
  .todo-actions,
  .todo-row-actions,
  .theme-switcher,
  .sidebar-header,
  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-grid,
  .form-row,
  .filter-grid,
  .date-range-grid {
    grid-template-columns: 1fr;
  }

  .appearance-controls {
    grid-template-columns: 1fr;
  }

  .task-toolbar,
  .view-toggle,
  .density-toggle {
    width: 100%;
  }

  .view-toggle-button,
  .density-toggle-button {
    flex: 1 1 0;
  }

  .task-list-shell {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .todo-row {
    grid-template-columns: 1fr;
  }

  .compact-header {
    display: none;
  }

  .quick-filters-row {
    flex-direction: column;
  }
}