@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --background-color: #f2f5fb;
  --font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  --timer-font-family: 'JetBrains Mono', 'Consolas', monospace;
  --text-color: #121926;
  --muted-text-color: rgba(18, 25, 38, 0.68);
  --sidebar-bg: #f7f9fd;
  --sidebar-link-color: #20283a;
  --sidebar-link-active-bg: #e8eefc;
  --card-bg: #ffffff;
  --card-shadow: 0 14px 32px rgba(18, 25, 38, 0.08);
  --hover-shadow: 0 18px 36px rgba(18, 25, 38, 0.14);
  --primary-color: #2d6df6;
  --primary-color-hover: #1f58d4;
  --danger-color: #d64545;
  --success-color: #2ea66f;
  --warning-color: #f3b439;
  --progress-bg: #e8edf8;
  --material-icon-color: #6b7386;
  --material-icon-hover: #1f58d4;
  --border-color: rgba(18, 25, 38, 0.12);
  --app-bg-gradient: radial-gradient(circle at 10% 0%, rgba(45, 109, 246, 0.12), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(46, 166, 111, 0.08), transparent 35%);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100svh;
  background-color: var(--background-color);
  background-image: var(--app-bg-gradient);
  color: var(--text-color);
  font-family: var(--font-family);
  letter-spacing: 0.01em;
}

.auth-preview-layout {
  display: grid;
  gap: 24px;
}

.landing-preview-page {
  display: grid;
  gap: 24px;
}

.landing-preview-hero,
.landing-preview-features,
.landing-preview-flow,
.landing-preview-bottom-cta {
  border: 1px solid rgba(18, 25, 38, 0.1);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 48px rgba(18, 25, 38, 0.08);
}

.landing-preview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 24px;
  overflow: hidden;
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(46, 166, 111, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(45, 109, 246, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.94));
}

.landing-preview-eyebrow {
  margin-bottom: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45, 109, 246, 0.9);
}

.landing-preview-title,
.landing-preview-section-title {
  margin: 0;
  letter-spacing: -0.035em;
}

.landing-preview-title {
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 0.98;
}

.landing-preview-copy,
.landing-preview-feature-copy,
.landing-preview-timeline-copy,
.landing-preview-surface-note,
.landing-preview-stat-label {
  color: rgba(18, 25, 38, 0.68);
}

.landing-preview-copy {
  max-width: 42rem;
  margin: 16px 0 0;
  font-size: 1.02rem;
}

.landing-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.landing-preview-cta {
  min-height: 48px;
  padding-inline: 18px;
  border-radius: 14px;
  font-weight: 600;
}

.landing-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.landing-preview-stat {
  padding: 14px 16px;
  border: 1px solid rgba(18, 25, 38, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.landing-preview-stat-value,
.landing-preview-feature-title,
.landing-preview-timeline-title {
  display: block;
}

.landing-preview-stat-value {
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.landing-preview-hero-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.landing-preview-surface {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(18, 25, 38, 0.1);
}

.landing-preview-surface--primary {
  background: linear-gradient(160deg, rgba(18, 48, 108, 0.96), rgba(45, 109, 246, 0.92));
  color: #f7f9fe;
  box-shadow: 0 18px 38px rgba(18, 48, 108, 0.22);
}

.landing-preview-surface--secondary {
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.94), rgba(255, 255, 255, 0.94));
}

.landing-preview-surface-header,
.landing-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.landing-preview-surface-header {
  margin-bottom: 14px;
  font-size: 0.92rem;
}

.landing-preview-surface-list {
  display: grid;
  gap: 10px;
}

.landing-preview-row {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.landing-preview-row--active {
  background: rgba(255, 255, 255, 0.16);
}

.landing-preview-bars {
  display: grid;
  gap: 10px;
}

.landing-preview-bar {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(45, 109, 246, 0.24), rgba(45, 109, 246, 0.78));
}

.landing-preview-bar--lg { width: 92%; }
.landing-preview-bar--md { width: 70%; }
.landing-preview-bar--sm { width: 48%; }

.landing-preview-surface-note {
  margin: 14px 0 0;
}

.landing-preview-features,
.landing-preview-flow,
.landing-preview-bottom-cta {
  padding: 24px 28px;
}

.landing-preview-section-header {
  margin-bottom: 18px;
}

.landing-preview-section-title {
  font-size: clamp(1.55rem, 2.7vw, 2.1rem);
}

.landing-preview-feature-grid,
.landing-preview-timeline {
  display: grid;
  gap: 16px;
}

.landing-preview-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-preview-feature-card,
.landing-preview-timeline-item {
  padding: 18px;
  border: 1px solid rgba(18, 25, 38, 0.08);
  border-radius: 20px;
  background: rgba(248, 250, 255, 0.86);
}

.landing-preview-feature-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #2d6df6, #5e91ff);
}

.landing-preview-feature-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.landing-preview-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-preview-timeline-step {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45, 109, 246, 0.84);
}

.landing-preview-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ui-harness-loading-preview {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(18, 25, 38, 0.1);
  border-radius: 28px;
  box-shadow: 0 22px 48px rgba(18, 25, 38, 0.08);
}

.ui-harness-loading-preview .app-loading-screen {
  position: absolute;
}

.auth-preview-screen {
  overflow: hidden;
  border: 1px solid rgba(18, 25, 38, 0.1);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9)),
    radial-gradient(circle at top right, rgba(45, 109, 246, 0.12), transparent 34%);
  box-shadow: 0 24px 52px rgba(18, 25, 38, 0.1);
}

.auth-preview-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(320px, 1.05fr);
}

.auth-preview-hero {
  padding: 28px;
  color: #f6f8fd;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(145deg, #12306c, #2d6df6 62%, #68a3ff);
}

.auth-preview-panel,
.auth-preview-screen--account {
  padding: 28px;
}

.auth-preview-screen--account {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 251, 255, 0.94)),
    radial-gradient(circle at top right, rgba(46, 166, 111, 0.12), transparent 30%);
}

.auth-preview-eyebrow,
.auth-preview-panel-eyebrow {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-preview-eyebrow {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.auth-preview-panel-eyebrow {
  margin-bottom: 10px;
  color: rgba(45, 109, 246, 0.9);
}

.auth-preview-hero-title,
.auth-preview-title {
  margin: 0;
  letter-spacing: -0.03em;
}

.auth-preview-hero-title {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}

.auth-preview-title {
  font-size: clamp(1.55rem, 2.6vw, 2rem);
}

.auth-preview-hero-copy,
.auth-preview-description,
.auth-preview-footer-note,
.auth-account-section-copy,
.auth-preview-field-hint {
  color: rgba(18, 25, 38, 0.68);
}

.auth-preview-hero-copy {
  margin: 12px 0 18px;
  color: rgba(246, 248, 253, 0.82);
}

.auth-preview-description {
  margin: 10px 0 20px;
}

.auth-preview-hero-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.auth-preview-hero-list li {
  color: rgba(246, 248, 253, 0.9);
}

.auth-preview-inline-row,
.auth-account-metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.auth-preview-inline-row--spread {
  align-items: center;
  justify-content: space-between;
}

.auth-preview-form {
  display: grid;
  gap: 16px;
}

.auth-preview-field {
  display: grid;
  gap: 8px;
}

.auth-preview-field-label {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.auth-preview-input {
  min-height: 48px;
  border-radius: 14px;
  border-color: rgba(18, 25, 38, 0.14);
  background: rgba(248, 250, 255, 0.9);
}

.auth-preview-input:focus {
  border-color: rgba(45, 109, 246, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(45, 109, 246, 0.16);
}

.auth-preview-field-hint,
.auth-preview-footer-note {
  font-size: 0.85rem;
}

.auth-preview-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: rgba(18, 25, 38, 0.78);
}

.auth-preview-callout {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(45, 109, 246, 0.14);
  border-radius: 16px;
  background: rgba(45, 109, 246, 0.08);
}

.auth-preview-callout p,
.auth-account-section-copy {
  margin: 0;
}

.auth-preview-callout--subtle {
  border-color: rgba(18, 25, 38, 0.08);
  background: rgba(18, 25, 38, 0.04);
}

.auth-preview-action {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 600;
}

.auth-preview-alt-actions,
.auth-account-stack {
  display: grid;
  gap: 10px;
}

.auth-preview-text-button {
  padding: 0;
  font-weight: 600;
  text-decoration: none;
}

.auth-account-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}

.auth-account-avatar {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(145deg, #2d6df6, #5e91ff);
  box-shadow: 0 16px 28px rgba(45, 109, 246, 0.24);
}

.auth-account-title-wrap {
  min-width: 0;
}

.auth-account-metrics-row {
  margin-top: 20px;
}

.auth-account-metric {
  flex: 1 1 180px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(18, 25, 38, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.auth-account-metric.is-good {
  border-color: rgba(46, 166, 111, 0.18);
  background: rgba(46, 166, 111, 0.08);
}

.auth-account-metric.is-warn {
  border-color: rgba(243, 180, 57, 0.18);
  background: rgba(243, 180, 57, 0.08);
}

.auth-account-metric-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: rgba(18, 25, 38, 0.62);
}

.auth-account-metric-value {
  display: block;
  font-size: 1rem;
}

.auth-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.auth-account-section {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(18, 25, 38, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
}

.auth-account-section-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

@media (max-width: 992px) {
  .landing-preview-hero,
  .landing-preview-feature-grid,
  .landing-preview-timeline,
  .auth-preview-shell,
  .auth-account-grid,
  .auth-account-header {
    grid-template-columns: 1fr;
  }

  .landing-preview-bottom-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-preview-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .landing-preview-hero,
  .landing-preview-features,
  .landing-preview-flow,
  .landing-preview-bottom-cta,
  .auth-preview-hero,
  .auth-preview-panel,
  .auth-preview-screen--account {
    padding: 22px;
  }

  .auth-preview-inline-row--spread {
    align-items: flex-start;
    flex-direction: column;
  }
}

.timelog-time-cell {
  min-width: 15rem;
}

.timelog-time-button {
  color: inherit;
  text-align: left;
}

.timelog-time-button:hover,
.timelog-time-button:focus {
  text-decoration: underline;
}

.timelog-time-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 14rem;
}

.timelog-time-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.app-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 18%, rgba(45, 109, 246, 0.22), transparent 30%),
    radial-gradient(circle at 84% 0%, rgba(46, 166, 111, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(247, 249, 253, 0.98), rgba(242, 245, 251, 0.99));
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.app-loading-card {
  width: min(100%, 420px);
  padding: 28px 26px 24px;
  border-radius: 24px;
  border: 1px solid rgba(18, 25, 38, 0.1);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(18, 25, 38, 0.14);
}

.app-loading-mark {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #2d6df6, #5e91ff);
  box-shadow: 0 14px 30px rgba(45, 109, 246, 0.24);
}

.app-loading-mark .material-icons {
  font-size: 30px;
}

.app-loading-eyebrow {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(45, 109, 246, 0.92);
}

.app-loading-title {
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 3vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-loading-message {
  margin: 0 0 18px;
  color: rgba(18, 25, 38, 0.72);
}

.app-loading-progress {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(45, 109, 246, 0.12);
}

.app-loading-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(45, 109, 246, 0.2), #2d6df6, rgba(94, 145, 255, 0.92));
  animation: app-loading-slide 1.1s ease-in-out infinite;
}

.app-loading-screen.is-error .app-loading-mark {
  background: linear-gradient(135deg, #d64545, #ef7d7d);
  box-shadow: 0 14px 30px rgba(214, 69, 69, 0.24);
}

.app-loading-screen.is-error .app-loading-progress {
  display: none;
}

html.app-ready .app-loading-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html[data-app-skin='dark'] .app-loading-screen {
  background:
    radial-gradient(circle at 16% 18%, rgba(75, 135, 255, 0.2), transparent 30%),
    radial-gradient(circle at 84% 0%, rgba(64, 180, 127, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(21, 25, 32, 0.98), rgba(24, 27, 32, 0.995));
}

html[data-app-skin='dark'] .app-loading-card {
  border-color: rgba(240, 243, 250, 0.12);
  background: rgba(35, 42, 55, 0.82);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

html[data-app-skin='dark'] .app-loading-eyebrow {
  color: rgba(155, 188, 255, 0.96);
}

html[data-app-skin='dark'] .app-loading-title {
  color: #f0f3fa;
}

html[data-app-skin='dark'] .app-loading-message {
  color: rgba(240, 243, 250, 0.76);
}

html[data-app-skin='dark'] .app-loading-progress {
  background: rgba(75, 135, 255, 0.16);
}

small,
.small {
  color: var(--muted-text-color) !important;
}

@keyframes app-loading-slide {
  0% {
    transform: translateX(-108%);
  }
  50% {
    transform: translateX(95%);
  }
  100% {
    transform: translateX(230%);
  }
}

.sidebar {
  height: 100svh;
  position: sticky;
  top: 0;
  padding: 18px 12px;
  background: linear-gradient(180deg, #f9fbff, var(--sidebar-bg));
  border-right: 1px solid var(--border-color);
}

.sidebar-sticky {
  padding-top: 4px;
}

.sidebar .nav-link,
.offcanvas .nav-link {
  color: var(--sidebar-link-color);
  padding: 10px 12px;
  font-size: 1.18rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar .nav-link .material-icons,
.offcanvas .nav-link .material-icons {
  margin-right: 0;
}

.sidebar .nav-link.active,
.offcanvas .nav-link.active {
  background-color: var(--sidebar-link-active-bg);
  box-shadow: inset 3px 0 0 var(--primary-color);
  color: var(--text-color);
}

main {
  padding: 24px 28px;
}

.app-header {
  border-bottom-color: var(--border-color) !important;
  margin-bottom: 0.7rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.7rem !important;
  gap: 12px;
}

#pageTitle {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 2.35vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

#workControl {
  display: grid;
  gap: 6px;
  justify-items: end;
  min-width: min(100%, 720px);
}

#workControl .btn {
  border-radius: 12px;
  padding-inline: 13px;
  min-height: 40px;
}

.work-control-secondary,
.work-control-primary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.work-control-secondary {
  justify-content: flex-end;
}

.work-control-primary {
  justify-content: flex-end;
}

#workControl .header-action-secondary {
  border-color: rgba(45, 109, 246, 0.55);
  color: #1f58d4;
  background: transparent;
  font-size: 0.9rem;
}

#workControl .header-action-secondary:hover {
  border-color: rgba(31, 88, 212, 0.85);
  background: rgba(45, 109, 246, 0.08);
  color: #1b4ebc;
}

.context-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.context-mode-label {
  display: none;
}

.context-mode-switch .form-select {
  min-width: 124px;
  border-radius: 12px;
}

.undo-banner {
  border: 1px solid rgba(45, 109, 246, 0.28);
  border-radius: 12px;
  background: rgba(45, 109, 246, 0.12);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
}

.undo-banner-message {
  min-width: 0;
  font-size: 0.86rem;
}

.undo-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.undo-banner-actions .btn {
  border-radius: 9px;
}

.card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  background-color: var(--card-bg);
}

.active-summary {
  border-radius: var(--radius-md);
}

.active-summary .card-body {
  padding: 10px 12px;
}

.active-summary-top {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.45fr);
  gap: 8px;
  align-items: stretch;
}

.active-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.active-summary-stat {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 7px 9px;
  background-color: rgba(255, 255, 255, 0.7);
}

.active-summary-stat-primary {
  border-color: rgba(45, 109, 246, 0.35);
  background-color: rgba(45, 109, 246, 0.1);
}

.active-summary-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted-text-color);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.active-summary-value {
  margin: 2px 0 0;
  font-family: var(--timer-font-family);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-color);
}

.active-summary-next {
  border: 1px solid rgba(45, 109, 246, 0.16);
  border-radius: 12px;
  background: rgba(45, 109, 246, 0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.active-summary-next-main {
  min-width: 0;
  flex: 1;
}

.active-summary-next-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(45, 109, 246, 0.14);
  color: #225bd2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.active-summary-next-name {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-color);
}

.active-summary-next-meta,
.active-summary-next-empty {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: var(--muted-text-color);
}

.active-summary-next-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.active-summary-next-actions .btn {
  min-height: 34px;
  padding-inline: 11px;
}

.active-view-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(0, auto);
  gap: 6px 10px;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), var(--card-bg));
  box-shadow: var(--card-shadow);
  padding: 8px 12px;
}

.active-toolbar-item {
  min-width: 0;
}

.active-toolbar-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.active-toolbar-cluster-primary {
  min-width: 0;
}

.active-toolbar-cluster-secondary,
.active-toolbar-cluster-utility {
  justify-content: flex-end;
}

.active-toolbar-cluster-secondary {
  margin-left: auto;
}

.active-toolbar-search .form-control,
.active-toolbar-item .form-select {
  border-radius: 10px;
}

.active-toolbar-search {
  min-width: min(100%, 360px);
}

.active-toolbar-item .form-select {
  min-width: 180px;
}

.active-toolbar-count {
  font-size: 0.83rem;
  color: var(--muted-text-color);
  white-space: nowrap;
  margin-left: 4px;
}

.active-toolbar-toggle {
  margin-bottom: 0;
  white-space: nowrap;
}

.active-toolbar-toggle .form-check-label {
  font-size: 0.95rem;
}

.active-bulk-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
}

.active-bulk-count {
  font-size: 0.83rem;
  color: var(--muted-text-color);
  margin-right: 2px;
}

.active-template-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.template-task-list {
  display: grid;
  gap: 8px;
}

.template-task-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 130px auto 130px auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px;
}

.template-task-row .form-check {
  margin: 0;
}

.template-variable-fields {
  display: grid;
  gap: 10px;
}

.template-variable-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.template-variable-key {
  font-size: 0.72rem;
  color: var(--muted-text-color);
}

.ai-planner-status-muted {
  color: var(--muted-text-color);
}

.ai-planner-status-success {
  color: var(--success-color);
}

.ai-planner-status-danger {
  color: var(--danger-color);
}

.ai-plan-result {
  display: grid;
  gap: 10px;
}

.ai-plan-summary {
  margin: 0;
  font-size: 0.9rem;
}

.ai-plan-list {
  display: grid;
  gap: 8px;
}

.ai-plan-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 9px 10px;
}

.ai-plan-item-content {
  min-width: 0;
}

.ai-plan-item-content strong {
  font-size: 0.91rem;
}

.ai-plan-item-meta {
  font-size: 0.76rem;
  color: var(--muted-text-color);
}

.ai-plan-item-reason {
  margin: 4px 0 0;
  font-size: 0.79rem;
  color: var(--text-color);
}

.active-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.active-toolbar-toggle .form-check-input {
  margin: 0;
}

.active-toolbar-count {
  justify-self: end;
  font-size: 0.78rem;
  color: var(--muted-text-color);
  white-space: nowrap;
}

.active-bulk-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--border-color);
}

.active-recovery-banner {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}

.active-recovery-text {
  font-size: 0.82rem;
  color: var(--text-color);
}

.active-recovery-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.active-bulk-count {
  font-size: 0.78rem;
  color: var(--muted-text-color);
  margin-right: 4px;
}

.active-milestone-group-header-col {
  display: block;
}

.active-milestone-shell-col {
  display: block;
}

.active-milestone-shell {
  display: grid;
  gap: 10px;
  padding: 10px 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(76, 196, 151, 0.34);
  background:
    linear-gradient(180deg, rgba(76, 196, 151, 0.08), rgba(76, 196, 151, 0.04)),
    rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.active-milestone-shell.is-complete {
  border-color: rgba(76, 196, 151, 0.24);
  background:
    linear-gradient(180deg, rgba(76, 196, 151, 0.06), rgba(76, 196, 151, 0.02)),
    rgba(255, 255, 255, 0.48);
}

.active-milestone-shell-grid {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.active-milestone-group-header {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(76, 196, 151, 0.42);
  background: rgba(76, 196, 151, 0.14);
}

.active-milestone-group-header.is-other {
  border-color: rgba(93, 113, 153, 0.45);
  background: rgba(93, 113, 153, 0.12);
}

.active-milestone-group-title {
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a5a45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-milestone-group-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a5a45;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.active-milestone-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.active-milestone-group-summary,
.active-milestone-group-meta,
.active-milestone-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.active-milestone-group-summary {
  row-gap: 8px;
}

.active-milestone-group-progress {
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(25, 79, 60, 0.18);
}

.active-milestone-group-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #43b88c, #7adab8);
}

.active-milestone-group-header.is-other .active-milestone-group-title,
.active-milestone-group-header.is-other .active-milestone-group-count {
  color: #3f4d67;
}

.active-milestone-group-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1b5d49;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(25, 79, 60, 0.14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-milestone-group-pill-next {
  background: rgba(255, 255, 255, 0.6);
}

.active-milestone-group-pill-risk-low,
.active-milestone-group-pill-risk-complete {
  background: rgba(83, 191, 139, 0.16);
}

.active-milestone-group-pill-risk-medium {
  color: #805400;
  background: rgba(255, 210, 112, 0.28);
  border-color: rgba(180, 126, 0, 0.18);
}

.active-milestone-group-pill-risk-high {
  color: #8a2929;
  background: rgba(214, 69, 69, 0.16);
  border-color: rgba(214, 69, 69, 0.2);
}

.active-milestone-group-pill-blocked {
  color: #8b5b00;
  background: rgba(255, 210, 112, 0.28);
  border-color: rgba(180, 126, 0, 0.18);
}

.active-milestone-group-actions {
  justify-content: flex-end;
}

.active-milestone-group-action {
  min-height: 30px;
  padding-inline: 10px;
  border-radius: 10px;
}

@media (max-width: 991.98px) {
  .active-milestone-group-head,
  .active-milestone-group-actions {
    justify-content: flex-start;
  }
}

.milestone-order-wrap {
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}

.milestone-order-list {
  display: grid;
  gap: 6px;
}

.milestone-order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(45, 109, 246, 0.06);
}

.milestone-order-index {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary-color);
  background: rgba(45, 109, 246, 0.14);
}

.milestone-order-name {
  min-width: 0;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.milestone-order-controls {
  display: inline-flex;
  gap: 4px;
}

.milestone-order-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(45, 109, 246, 0.35);
  background: transparent;
  color: var(--primary-color);
  padding: 0;
}

.milestone-order-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.milestone-order-btn .material-icons {
  font-size: 18px;
}

#mainContainer {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
  align-items: stretch;
}

.timer-card-col {
  display: flex;
}

.timer-card-col--compact {
  --timer-card-min-height: 228px;
}

.timer-card-col .timer-card,
.timer-card-col .add-card {
  width: 100%;
}

.timer-card {
  min-height: var(--timer-card-min-height, 280px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

@keyframes timerCardPulse {
  0% {
    box-shadow: 0 0 0 1px rgba(79, 134, 255, 0.35), 0 14px 30px rgba(79, 134, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(79, 134, 255, 0.55), 0 18px 36px rgba(79, 134, 255, 0.32);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(79, 134, 255, 0.35), 0 14px 30px rgba(79, 134, 255, 0.2);
  }
}

.timer-card.is-selected {
  border-color: rgba(45, 109, 246, 0.62);
  box-shadow: 0 0 0 1px rgba(45, 109, 246, 0.35), var(--card-shadow);
}

.timer-card.calendar-focus-target {
  box-shadow: 0 0 0 2px rgba(45, 109, 246, 0.7), 0 0 24px rgba(45, 109, 246, 0.28), var(--card-shadow);
}

.timer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hover-shadow);
}

.timer-card.is-active {
  border-color: rgba(79, 134, 255, 0.88);
  animation: timerCardPulse 2.6s ease-in-out infinite;
}

.timer-card .card-body {
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timer-card--compact .card-body {
  padding: 10px;
  gap: 6px;
  min-width: 0;
}

.timer-content-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.timer-card--compact .timer-content-main {
  gap: 6px;
  width: 100%;
  max-width: 100%;
}

.timer-card--compact .timer-card-header {
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.timer-card-header {
  gap: 10px;
}

.timer-select-checkbox {
  margin-top: 4px;
}

.timer-card-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.timer-card--compact .timer-card-title-wrap {
  gap: 3px;
}

.timer-card-title {
  font-size: 1.04rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timer-card--compact .timer-card-title {
  font-size: 0.9rem;
  line-height: 1.12;
  min-height: 0;
  max-height: 2.24em;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.timer-badge-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 56px;
  align-content: flex-start;
  min-width: 0;
}

.timer-badge-rail--compact {
  min-height: 0;
  gap: 4px;
}

.priority-badge {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a4a00;
  background: rgba(243, 180, 57, 0.28);
  border: 1px solid rgba(243, 180, 57, 0.5);
}

.energy-badge {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.energy-badge.energy-deep {
  color: #0d4586;
  background: rgba(84, 152, 255, 0.18);
  border-color: rgba(84, 152, 255, 0.38);
}

.energy-badge.energy-admin {
  color: #4d495f;
  background: rgba(156, 145, 186, 0.18);
  border-color: rgba(156, 145, 186, 0.36);
}

.energy-badge.energy-light {
  color: #2f6645;
  background: rgba(87, 191, 132, 0.18);
  border-color: rgba(87, 191, 132, 0.36);
}

.routine-step-badge {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f4b94;
  background: rgba(84, 152, 255, 0.16);
  border: 1px solid rgba(84, 152, 255, 0.3);
}

.timer-overflow-badge {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text-color);
  background: rgba(45, 109, 246, 0.1);
  border: 1px solid rgba(45, 109, 246, 0.28);
}

.timer-running-badge {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #12553e;
  background: rgba(87, 191, 132, 0.2);
  border: 1px solid rgba(87, 191, 132, 0.44);
}

.timer-card--compact .priority-badge,
.timer-card--compact .energy-badge,
.timer-card--compact .routine-step-badge,
.timer-card--compact .timer-overflow-badge,
.timer-card--compact .timer-running-badge {
  font-size: 0.62rem;
  padding: 2px 6px;
}

.timer-meta-section {
  display: grid;
  gap: 4px;
  min-height: 54px;
}

.timer-card-actions {
  flex-shrink: 0;
}

.timer-action-btn,
.timer-menu-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  color: var(--material-icon-color);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.timer-card--compact .timer-action-btn,
.timer-card--compact .timer-menu-btn {
  width: 24px;
  height: 24px;
}

.timer-action-btn:hover,
.timer-menu-btn:hover {
  background-color: rgba(45, 109, 246, 0.12);
  border-color: rgba(45, 109, 246, 0.25);
  color: var(--primary-color);
}

.timer-action-btn:active,
.timer-menu-btn:active {
  transform: translateY(1px) scale(0.98);
}

.timer-action-btn.is-danger:hover {
  background-color: rgba(214, 69, 69, 0.12);
  border-color: rgba(214, 69, 69, 0.28);
  color: var(--danger-color);
}

.timer-action-btn .material-icons,
.timer-menu-btn .material-icons {
  font-size: 18px;
}

.timer-card--compact .timer-action-btn .material-icons,
.timer-card--compact .timer-menu-btn .material-icons {
  font-size: 16px;
}

.timer-card-menu .dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
  padding: 6px;
  min-width: 180px;
}

.timer-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.timer-menu-item .material-icons {
  font-size: 18px;
}

.timer-elapsed {
  margin-top: 2px;
  font-family: var(--timer-font-family);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.timer-card--compact .timer-elapsed {
  font-size: 1.24rem;
  max-width: 100%;
}

.timer-meta-section--compact {
  min-height: 0;
  gap: 2px;
}

.timer-card--compact .timer-meta {
  gap: 4px;
  font-size: 0.75rem;
}

.timer-card--compact .timer-meta-label {
  font-size: 0.63rem;
}

.timer-card--compact .timer-meta--compact {
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 4px;
  max-width: 100%;
}

.timer-meta {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted-text-color);
  min-width: 0;
}

.timer-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 600;
}

.timer-meta-value {
  font-family: var(--timer-font-family);
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

.timer-blocked-hint {
  margin: 0;
  font-size: 0.78rem;
}

.timer-eta {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted-text-color);
}

.milestone-blocked-hint {
  color: #8f4e00;
}

.timer-completion-diff {
  margin: 0;
}

.timer-progress-wrap {
  min-height: 16px;
  min-width: 0;
}

.timer-progress-wrap--compact .timer-progress {
  height: 14px;
  width: 100%;
  max-width: 100%;
}

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

.timer-progress .progress-bar,
.progress .progress-bar {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1rem;
  transition: width 0.35s ease;
  background: linear-gradient(90deg, var(--success-color), #65cb98);
}

.timer-progress .progress-bar.progress-state-good {
  background: linear-gradient(90deg, var(--success-color), #65cb98);
}

.timer-progress .progress-bar.progress-state-warning {
  background: linear-gradient(90deg, #f3b439, #ffd271);
  color: #2f2400;
}

.timer-progress .progress-bar.progress-state-over {
  background: linear-gradient(90deg, #d64545, #f17272);
}

.timer-toggle-btn {
  margin-top: 0;
  border-radius: 12px;
  font-weight: 600;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.timer-card--compact .timer-toggle-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 0.92rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

.timer-toggle-btn:active {
  transform: translateY(1px) scale(0.995);
  filter: brightness(0.98);
}

.timer-action-zone {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.timer-action-zone--compact {
  gap: 5px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.timer-edit-form {
  display: grid;
  gap: 6px;
}

.timer-edit-actions {
  display: flex;
  justify-content: flex-end;
}

.timer-edit-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.timer-edit-done-btn .material-icons {
  font-size: 16px;
}

.timer-quick-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.timer-footer {
  margin-top: auto;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.timer-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.timer-card--compact .timer-footer-row {
  gap: 6px;
}

.timer-footer-row--compact {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.timer-footer-row-quick-only {
  justify-content: flex-end;
}

.timer-quick-add-inline {
  margin-left: auto;
  justify-content: flex-end;
}

.timer-quick-add-inline--compact {
  margin-left: 0;
}

.quick-add {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--primary-color);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(45, 109, 246, 0.3);
  background: rgba(45, 109, 246, 0.08);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.timer-card--compact .quick-add {
  font-size: 0.76rem;
  padding: 2px 7px;
}

.timer-card--compact .timer-progress .progress-bar,
.timer-card--compact .progress .progress-bar {
  font-size: 0.66rem;
  line-height: 14px;
}

.timer-card--compact .timer-progress-wrap,
.timer-card--compact .timer-progress,
.timer-card--compact .timer-card-header,
.timer-card--compact .timer-card-title-wrap,
.timer-card--compact .timer-card-actions {
  min-width: 0;
  box-sizing: border-box;
}

.quick-add:hover {
  color: var(--primary-color-hover);
  border-color: rgba(31, 88, 212, 0.45);
  background: rgba(31, 88, 212, 0.14);
}

.quick-add:active {
  transform: translateY(1px);
}

.timer-timeline-btn {
  margin-top: 0;
  align-self: flex-start;
}

.add-card {
  min-height: var(--timer-card-min-height, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--primary-color);
  cursor: pointer;
  border: 2px dashed rgba(45, 109, 246, 0.6);
  background: rgba(45, 109, 246, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.add-card--compact {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  .timer-card-col--compact {
    flex: 0 0 232px !important;
    max-width: 232px !important;
    width: 232px !important;
  }
}

@media (min-width: 1600px) {
  .timer-card-col:not(.timer-card-col--compact) {
    flex: 0 0 320px !important;
    max-width: 320px !important;
    width: 320px !important;
  }

  .timer-card-col--compact {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    width: 240px !important;
  }
}

.add-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  background: rgba(45, 109, 246, 0.14);
}

.archive-group-header {
  width: 100%;
  padding: 7px 11px;
  background: rgba(232, 238, 252, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}

.material-icons {
  color: var(--material-icon-color);
  transition: color 0.2s ease;
  vertical-align: middle;
}

.material-icons:hover {
  color: var(--material-icon-hover);
}

.delete-icon:hover {
  color: var(--danger-color);
}

.timeline-icon {
  color: var(--material-icon-color);
}

.timeline-icon:hover {
  color: var(--material-icon-hover);
}

.menu-icon-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--material-icon-color);
  font-size: 24px;
}

.menu-icon-btn:hover {
  color: var(--material-icon-hover);
}

.menu-icon-btn:focus {
  outline: none;
  box-shadow: none;
}

.timer-card.completed {
  background: linear-gradient(180deg, rgba(46, 166, 111, 0.12), var(--card-bg));
  border-color: rgba(46, 166, 111, 0.4);
}

.faster {
  color: var(--success-color);
  font-weight: 600;
}

.slower {
  color: var(--danger-color);
  font-weight: 600;
}

.ontime,
.noplanned {
  color: var(--muted-text-color);
}

.timer-card.high-priority {
  border-color: rgba(243, 180, 57, 0.9);
  background: linear-gradient(180deg, rgba(243, 180, 57, 0.14), var(--card-bg));
  box-shadow: 0 0 0 1px rgba(243, 180, 57, 0.55), 0 14px 28px rgba(243, 180, 57, 0.2), var(--card-shadow);
}

.timer-card.high-priority .timer-card-title {
  color: #7a4a00;
}

.timer-card.high-priority .timer-action-btn[data-timer-action='togglePriority'] {
  color: #b86a00;
}

.timer-card.high-priority .timer-action-btn[data-timer-action='togglePriority']:hover {
  color: #8f5200;
  background-color: rgba(243, 180, 57, 0.18);
  border-color: rgba(243, 180, 57, 0.45);
}

.dashboard-card {
  margin-bottom: 20px;
}

.dashboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-mode-switch {
  display: inline-flex;
  gap: 8px;
}

.dashboard-period-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-period-label {
  min-width: 140px;
  font-weight: 600;
  text-align: center;
}

.dashboard-date-picker {
  position: relative;
}

.dashboard-picker-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 0.85rem;
}

.dashboard-picker-summary::-webkit-details-marker {
  display: none;
}

.dashboard-date-picker[open] .dashboard-picker-summary {
  border-color: rgba(45, 109, 246, 0.55);
}

.dashboard-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  width: 240px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: 0 12px 24px rgba(18, 25, 38, 0.18);
}

.dashboard-picker-month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dashboard-picker-month-label {
  font-size: 0.88rem;
  font-weight: 600;
}

.dashboard-picker-weekdays,
.dashboard-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.dashboard-picker-legend {
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted-text-color);
}

.dashboard-picker-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

.dashboard-picker-weekdays {
  margin-bottom: 6px;
  font-size: 0.7rem;
  color: var(--muted-text-color);
  text-align: center;
}

.dashboard-picker-empty {
  min-height: 28px;
}

.dashboard-picker-day {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0.76rem;
  color: var(--text-color);
}

.dashboard-picker-day i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary-color);
}

.dashboard-picker-day:hover:not(:disabled) {
  border-color: rgba(45, 109, 246, 0.35);
  background: rgba(45, 109, 246, 0.1);
}

.dashboard-picker-day.is-selected {
  border-color: rgba(45, 109, 246, 0.6);
  background: rgba(45, 109, 246, 0.18);
}

.dashboard-picker-day:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}

.dashboard-picker-day:disabled {
  opacity: 0.38;
}

.dashboard-v2-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dashboard-widget-customizer {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.dashboard-widget-customizer-summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  list-style: none;
}

.dashboard-widget-customizer-summary::-webkit-details-marker {
  display: none;
}

.dashboard-widget-customizer-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.dashboard-widget-customizer-hint {
  margin: 0;
  color: var(--muted-text-color);
  font-size: 0.88rem;
}

.dashboard-widget-customizer-section {
  display: grid;
  gap: 8px;
}

.dashboard-widget-list {
  display: grid;
  gap: 8px;
}

.dashboard-widget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
}

.dashboard-widget-row-label {
  font-weight: 600;
}

.dashboard-widget-row-actions,
.dashboard-widget-hidden-list,
.dashboard-widget-customizer-reset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.dashboard-widget-slot--full {
  grid-column: 1 / -1;
}

.dashboard-v2-grid {
  display: grid;
  gap: 14px;
}

.dashboard-v2-grid-hero {
  grid-template-columns: minmax(340px, 1.45fr) minmax(260px, 1fr);
}

.dashboard-v2-grid-middle {
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.2fr);
}

.dashboard-v2-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), var(--card-bg));
  box-shadow: var(--card-shadow);
}

.dashboard-v2-kicker {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-text-color);
}

.dashboard-v2-subtitle {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: var(--muted-text-color);
}

.dashboard-empty-state {
  margin: 0;
  color: var(--muted-text-color);
}

.pulse-main {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  align-items: center;
}

.pulse-score-ring {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  padding: 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at center, var(--card-bg) 62%, transparent 63%),
    conic-gradient(var(--primary-color) calc(var(--score) * 1%), rgba(45, 109, 246, 0.15) 0);
}

.pulse-score-ring strong {
  font-size: 2rem;
  line-height: 1;
  color: var(--text-color);
}

.pulse-score-ring span {
  margin-top: 4px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text-color);
}

.pulse-metrics-grid {
  display: grid;
  gap: 7px;
}

.pulse-metric-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.pulse-metric-row span {
  color: var(--muted-text-color);
}

.pulse-metric-row strong {
  color: var(--text-color);
}

.dashboard-insight {
  margin: 12px 0 0;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
  background: rgba(45, 109, 246, 0.1);
  border: 1px solid rgba(45, 109, 246, 0.24);
}

.commitment-legend {
  margin-bottom: 10px;
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--muted-text-color);
}

.commitment-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dot-planned {
  background: rgba(45, 109, 246, 0.34);
}

.dot-actual {
  background: rgba(46, 166, 111, 0.95);
}

.commitment-rows {
  display: grid;
  gap: 10px;
}

.commitment-row-top {
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
}

.commitment-name {
  font-weight: 600;
}

.commitment-totals {
  font-family: var(--timer-font-family);
  color: var(--muted-text-color);
}

.commitment-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(45, 109, 246, 0.12);
  overflow: hidden;
}

.commitment-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
}

.commitment-bar.planned {
  background: rgba(45, 109, 246, 0.36);
}

.commitment-bar.actual {
  background: linear-gradient(90deg, var(--success-color), #65cb98);
}

.commitment-bar.actual.overrun {
  background: linear-gradient(90deg, #c76f5d, #dd8a77);
}

.time-river-axis {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted-text-color);
}

.time-river {
  position: relative;
  min-height: calc(var(--lane-count) * 34px + 26px);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(45, 109, 246, 0.06), transparent);
  overflow: hidden;
}

.time-river::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(45, 109, 246, 0.18) 25%,
    transparent calc(25% + 1px),
    transparent calc(50% - 1px),
    rgba(45, 109, 246, 0.18) 50%,
    transparent calc(50% + 1px),
    transparent calc(75% - 1px),
    rgba(45, 109, 246, 0.18) 75%,
    transparent calc(75% + 1px)
  );
  pointer-events: none;
}

.river-segment {
  position: absolute;
  height: 26px;
  border-radius: 8px;
  padding: 4px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(90deg, #4f86ff, #3f71dd);
  box-shadow: 0 6px 14px rgba(63, 113, 221, 0.35);
}

.river-segment.is-priority {
  background: linear-gradient(90deg, #ffb54f, #e89b38);
  box-shadow: 0 6px 14px rgba(232, 155, 56, 0.38);
  color: #2a1a00;
}

.river-segment.is-active {
  outline: 1px dashed rgba(255, 255, 255, 0.8);
}

.momentum-strip {
  margin-top: 6px;
  height: 180px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.momentum-day {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.momentum-bar {
  width: 100%;
  min-height: 8px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #6e97ff, #3f71dd);
  box-shadow: 0 8px 16px rgba(63, 113, 221, 0.34);
}

.momentum-score {
  font-family: var(--timer-font-family);
  font-size: 0.8rem;
  color: var(--muted-text-color);
}

.momentum-label {
  font-size: 0.76rem;
  color: var(--muted-text-color);
}

.dashboard-v2-footer {
  display: flex;
  justify-content: flex-end;
  font-size: 0.85rem;
  color: var(--muted-text-color);
}

.dashboard-v2-footer strong {
  color: var(--text-color);
}

.dashboard-weekly-card {
  padding: 16px;
}

.weekly-progress-wrap {
  display: grid;
  gap: 8px;
}

.weekly-progress-meta,
.weekly-priority-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
}

.weekly-progress-meta span,
.weekly-priority-meta span,
.weekly-progress-secondary span {
  color: var(--muted-text-color);
}

.weekly-progress-meta strong,
.weekly-priority-meta strong,
.weekly-progress-secondary strong {
  color: var(--text-color);
  font-family: var(--timer-font-family);
}

.weekly-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(45, 109, 246, 0.16);
  overflow: hidden;
}

.weekly-progress-track.is-met {
  background: rgba(46, 166, 111, 0.18);
}

.weekly-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f86ff, #6fa2ff);
}

.weekly-progress-track.is-met .weekly-progress-bar {
  background: linear-gradient(90deg, #2ea66f, #6bc99a);
}

.weekly-progress-secondary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
}

.weekly-priority-track {
  position: relative;
  margin-top: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(235, 179, 85, 0.2);
  overflow: hidden;
}

.weekly-priority-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffbe5d, #f7a63a);
}

.weekly-priority-target {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: rgba(25, 32, 46, 0.6);
  transform: translateX(-1px);
}

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

.streak-item {
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 6px 8px;
  display: grid;
  gap: 3px;
}

.streak-item span {
  font-size: 0.72rem;
  color: var(--muted-text-color);
}

.streak-item strong {
  font-family: var(--timer-font-family);
  font-size: 0.9rem;
}

.routine-stats-list {
  display: grid;
  gap: 8px;
}

.routine-stats-row {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.routine-stats-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.routine-stats-main strong {
  font-size: 0.9rem;
}

.routine-stats-main span {
  font-size: 0.77rem;
  color: var(--muted-text-color);
}

.routine-stats-streak {
  text-align: right;
  display: grid;
  gap: 2px;
  justify-items: end;
}

.routine-stats-streak span {
  font-family: var(--timer-font-family);
  font-size: 0.95rem;
  font-weight: 700;
}

.routine-stats-streak small {
  font-size: 0.72rem;
  color: var(--muted-text-color);
}

.milestone-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.milestone-summary-item {
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 6px 8px;
  display: grid;
  gap: 3px;
}

.milestone-summary-item span {
  font-size: 0.72rem;
  color: var(--muted-text-color);
}

.milestone-summary-item strong {
  font-family: var(--timer-font-family);
  font-size: 0.9rem;
}

.milestone-summary-list {
  display: grid;
  gap: 8px;
}

.milestone-summary-row {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: baseline;
}

.milestone-summary-row[role="button"] {
  cursor: pointer;
}

.milestone-summary-row[role="button"]:hover,
.milestone-summary-row[role="button"]:focus-visible {
  border-color: rgba(45, 109, 246, 0.45);
  box-shadow: 0 0 0 2px rgba(45, 109, 246, 0.14);
  outline: none;
}

.milestone-summary-status {
  font-family: var(--timer-font-family);
  font-size: 0.78rem;
  color: var(--muted-text-color);
}

.milestone-summary-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted-text-color);
}

.template-analytics-list {
  display: grid;
  gap: 10px;
}

.template-analytics-row {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.template-analytics-row strong {
  font-size: 0.9rem;
}

.template-analytics-meta {
  font-size: 0.77rem;
  color: var(--muted-text-color);
}

.template-analytics-hotspot {
  font-size: 0.76rem;
  color: #8f4f00;
}

.template-analytics-suggestion {
  font-size: 0.76rem;
  color: #1c5ea8;
}

.dashboard-energy-meta {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--muted-text-color);
}

.energy-queue-list {
  display: grid;
  gap: 8px;
}

.energy-queue-row {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.energy-queue-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.energy-queue-main strong {
  font-size: 0.9rem;
}

.energy-queue-main span {
  font-size: 0.77rem;
  color: var(--muted-text-color);
}

.energy-queue-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.monthly-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.monthly-overview-item {
  display: grid;
  gap: 2px;
}

.monthly-overview-item span {
  font-size: 0.78rem;
  color: var(--muted-text-color);
}

.monthly-overview-item strong {
  font-family: var(--timer-font-family);
}

.monthly-delta-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.monthly-delta-item {
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 6px 8px;
  display: grid;
  gap: 2px;
}

.monthly-delta-item span {
  font-size: 0.72rem;
  color: var(--muted-text-color);
}

.monthly-delta-item strong {
  font-family: var(--timer-font-family);
  font-size: 0.84rem;
}

.monthly-delta-item.is-up strong {
  color: var(--success-color);
}

.monthly-delta-item.is-down strong {
  color: var(--danger-color);
}

.monthly-top-list {
  display: grid;
  gap: 8px;
}

.monthly-top-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
}

.monthly-top-item strong {
  font-family: var(--timer-font-family);
}

.monthly-trend-strip {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  min-height: 190px;
}

.monthly-trend-day {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
}

.monthly-trend-day.is-future {
  opacity: 0.32;
}

.monthly-trend-day:not(:disabled) {
  cursor: pointer;
}

.monthly-trend-day:not(:disabled):hover .monthly-trend-bar {
  filter: brightness(1.06);
}

.monthly-trend-day:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 6px;
}

.monthly-trend-bar {
  width: 100%;
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #7ea5ff, #4677e3);
}

.monthly-trend-day.has-record .monthly-trend-bar {
  box-shadow: 0 6px 10px rgba(70, 119, 227, 0.34);
}

.monthly-trend-label {
  font-size: 0.65rem;
  color: var(--muted-text-color);
}

.monthly-extremes-section + .monthly-extremes-section {
  margin-top: 10px;
}

.monthly-extremes-title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted-text-color);
}

.monthly-extremes-list {
  display: grid;
  gap: 6px;
}

.monthly-extremes-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.84rem;
}

.monthly-extremes-row strong {
  font-family: var(--timer-font-family);
}

.calendar-shell {
  position: relative;
  display: grid;
  gap: 12px;
}

.planning-shell {
  display: grid;
  gap: 16px;
}

.planning-toolbar,
.planning-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.planning-toolbar-nav,
.planning-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.planning-toolbar-title {
  font-weight: 700;
  min-width: 160px;
}

.planning-summary-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
}

.planning-summary-label,
.planning-column-meta,
.planning-card-meta {
  color: var(--muted-text-color);
  font-size: 0.88rem;
}

.planning-board {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 14px;
}

.planning-side-rail,
.planning-week-grid {
  display: grid;
  gap: 14px;
}

.planning-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.planning-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.planning-panel-actions,
.planning-goal-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planning-goal-form .form-control {
  min-width: 0;
  flex: 1;
}

.planning-goal-list,
.planning-review-stats {
  display: grid;
  gap: 8px;
}

.planning-ai-block,
.planning-ai-list {
  display: grid;
  gap: 8px;
}

.planning-ai-item {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.planning-ai-item span,
.planning-ai-item small,
.planning-ai-error {
  color: var(--muted-text-color);
  font-size: 0.88rem;
}

.planning-ai-error {
  margin: 0;
  color: #b24b00;
}

.planning-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.planning-milestone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
  color: var(--text-color);
}

.planning-milestone-row:hover,
.planning-milestone-row:focus-visible {
  border-color: rgba(45, 109, 246, 0.45);
  box-shadow: 0 0 0 2px rgba(45, 109, 246, 0.14);
  outline: none;
}

.planning-milestone-risk {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.planning-milestone-risk--high {
  color: #8d2f00;
  background: rgba(242, 141, 86, 0.2);
}

.planning-milestone-risk--medium {
  color: #8b5b00;
  background: rgba(255, 210, 112, 0.24);
}

.planning-milestone-risk--low,
.planning-milestone-risk--complete {
  color: #1a5a45;
  background: rgba(76, 196, 151, 0.18);
}

.planning-goal-text {
  display: grid;
  gap: 2px;
}

.planning-goal-text span,
.planning-review-note {
  color: var(--muted-text-color);
  font-size: 0.88rem;
}

.planning-week-grid {
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  overflow-x: auto;
}

.planning-column {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  min-height: 240px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.planning-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.planning-column-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 80px;
  padding: 2px;
  border-radius: 12px;
}

.planning-column-list.is-drag-target,
.planning-card.is-drag-target {
  outline: 2px dashed rgba(45, 109, 246, 0.45);
  outline-offset: 2px;
}

.planning-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.planning-card-title {
  line-height: 1.3;
}

.planning-card-milestone {
  font-size: 0.84rem;
  color: #2956bf;
}

.planning-card-milestone.is-blocked {
  color: #b24b00;
}

.milestones-shell {
  display: grid;
  gap: 12px;
}

.milestones-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 12px;
}

.milestones-list-shell,
.milestones-detail {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--card-shadow);
}

.milestones-list-shell {
  align-self: start;
  position: sticky;
  top: 12px;
}

.milestones-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.milestones-list-filter-pill,
.milestones-compact-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--text-color);
}

.milestones-list-filter-pill.is-active {
  border-color: rgba(45, 109, 246, 0.46);
  background: rgba(45, 109, 246, 0.12);
  color: #1f55c5;
}

.milestones-compact-pill-label {
  color: var(--muted-text-color);
}

.milestones-compact-pill--high {
  border-color: rgba(242, 141, 86, 0.36);
}

.milestones-compact-pill--medium,
.milestones-compact-pill--warning {
  border-color: rgba(255, 210, 112, 0.36);
}

.milestones-compact-pill--low,
.milestones-compact-pill--complete,
.milestones-compact-pill--success {
  border-color: rgba(76, 196, 151, 0.32);
}

.milestones-list {
  display: grid;
  gap: 8px;
  max-height: calc(100svh - 220px);
  overflow: auto;
  padding-right: 2px;
}

.milestones-list-item {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  color: var(--text-color);
}

.milestones-list-item:hover,
.milestones-list-item:focus-visible,
.milestones-list-item.is-active {
  border-color: rgba(45, 109, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(45, 109, 246, 0.14);
  outline: none;
}

.milestones-list-item-top,
.milestones-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.milestones-list-item-hint,
.milestones-detail-subtitle {
  margin: 0;
  color: var(--muted-text-color);
  font-size: 0.84rem;
}

.milestones-list-item-stats,
.milestones-detail-status-row,
.milestones-summary-strip,
.milestones-step-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.milestones-risk {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.milestones-risk--high {
  color: #8d2f00;
  background: rgba(242, 141, 86, 0.2);
}

.milestones-risk--medium {
  color: #8b5b00;
  background: rgba(255, 210, 112, 0.24);
}

.milestones-risk--low,
.milestones-risk--complete {
  color: #1a5a45;
  background: rgba(76, 196, 151, 0.18);
}

.milestones-detail {
  gap: 12px;
}

.milestones-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.milestones-detail-title,
.milestones-section-heading strong {
  margin: 0;
}

.milestones-detail-title-wrap {
  display: grid;
  gap: 8px;
}

.milestones-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.milestones-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.milestones-section-heading-meta {
  font-size: 0.8rem;
  color: var(--muted-text-color);
}

.milestones-due-row,
.milestones-timeline,
.milestones-steps {
  display: grid;
  gap: 8px;
}

.milestones-due-row span {
  font-size: 0.8rem;
  font-weight: 600;
}

.milestones-create-trigger {
  margin-left: auto;
}

.milestones-due-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.milestones-due-editor-copy {
  display: grid;
  gap: 4px;
}

.milestones-due-editor-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-text-color);
}

.milestones-due-editor-value {
  font-size: 0.98rem;
}

.milestones-due-editor-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.milestones-due-editor-controls .form-control {
  width: 180px;
}

.milestones-detail--create {
  gap: 16px;
}

.milestones-create-form {
  display: grid;
  gap: 14px;
}

.milestones-create-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
}

.milestones-create-ai-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}

.milestones-create-ai-note {
  margin: 0;
}

.milestones-create-ai-error {
  margin: 0;
}

.milestones-create-tasks {
  display: grid;
  gap: 10px;
}

.milestones-create-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 110px 110px auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.milestones-create-task-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

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

.milestones-timeline-row,
.milestones-step {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.milestones-timeline-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.milestones-timeline-row-main {
  display: grid;
  gap: 2px;
}

.milestones-timeline-row-main span {
  color: var(--muted-text-color);
  font-size: 0.8rem;
}

.milestones-step-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.milestones-step.is-complete {
  border-color: rgba(76, 196, 151, 0.32);
}

.milestones-step.is-blocked {
  border-color: rgba(255, 210, 112, 0.36);
}

.milestones-step-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(45, 109, 246, 0.12);
  color: #225bd2;
  font-weight: 700;
  flex-shrink: 0;
}

.milestones-step-main {
  min-width: 0;
}

.milestones-step-content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.milestones-step-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

.milestones-step-details {
  color: var(--muted-text-color);
  font-size: 0.82rem;
}

.milestones-step-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.milestones-step-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #22505f;
  background: rgba(122, 164, 255, 0.12);
}

.milestones-step-pill--blocked {
  color: #8b5b00;
  background: rgba(255, 210, 112, 0.24);
}

.planning-card-goal {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted-text-color);
}

.planning-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.calendar-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-date-input {
  width: 150px;
  border-radius: 10px;
}

.calendar-zoom-controls {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--border-color);
}

.calendar-period-label {
  justify-self: center;
  font-size: 0.92rem;
}

.calendar-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, auto));
  gap: 8px;
}

.calendar-summary-item {
  border: 1px solid var(--border-color);
  border-radius: 11px;
  padding: 7px 9px;
  display: grid;
  gap: 2px;
  background: rgba(45, 109, 246, 0.06);
}

.calendar-summary-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-text-color);
}

.calendar-summary-value {
  font-family: var(--timer-font-family);
  font-size: 0.9rem;
}

.calendar-grid-wrap {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(45, 109, 246, 0.06), transparent);
  overflow: auto;
  max-height: calc(100svh - 225px);
}

.calendar-grid {
  min-width: 100%;
  display: grid;
  grid-auto-rows: auto;
}

.calendar-header-spacer {
  min-height: 52px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
  background: #f5f8ff;
  box-shadow: 1px 0 0 rgba(18, 25, 38, 0.08), 0 1px 0 rgba(18, 25, 38, 0.08);
}

.calendar-day-header {
  min-height: 52px;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 8px 7px;
  display: grid;
  gap: 2px;
  background: #f8faff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(18, 25, 38, 0.08);
}

.calendar-day-header.is-today {
  background: #dee9ff;
}

.calendar-day-weekday {
  font-size: 0.74rem;
  color: var(--muted-text-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-day-date {
  font-size: 0.88rem;
}

.calendar-day-summary {
  font-family: var(--timer-font-family);
  font-size: 0.64rem;
  color: var(--muted-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-time-axis {
  position: relative;
  height: calc(var(--calendar-hour-height) * 24);
  border-right: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.62);
  position: sticky;
  left: 0;
  z-index: 10;
  box-shadow: 1px 0 0 rgba(18, 25, 38, 0.08);
}

.calendar-time-marker {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  padding-right: 8px;
  text-align: right;
  font-family: var(--timer-font-family);
  font-size: 0.68rem;
  color: var(--muted-text-color);
}

.calendar-day-column {
  position: relative;
  border-left: 1px solid var(--border-color);
  height: calc(var(--calendar-hour-height) * 24);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-hour-height) / 2 - 1px),
      rgba(45, 109, 246, 0.1) calc(var(--calendar-hour-height) / 2 - 1px),
      rgba(45, 109, 246, 0.1) calc(var(--calendar-hour-height) / 2)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-hour-height) - 1px),
      rgba(45, 109, 246, 0.2) calc(var(--calendar-hour-height) - 1px),
      rgba(45, 109, 246, 0.2) var(--calendar-hour-height)
    );
}

.calendar-day-event-layer {
  position: relative;
  width: 100%;
  height: 100%;
}

.calendar-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(214, 69, 69, 0.9);
  pointer-events: none;
  z-index: 4;
}

.calendar-event {
  position: absolute;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid rgba(45, 109, 246, 0.58);
  background: linear-gradient(180deg, rgba(77, 139, 255, 0.93), rgba(49, 101, 214, 0.94));
  box-shadow: 0 4px 10px rgba(49, 101, 214, 0.24);
  padding: 5px 6px;
  display: grid;
  gap: 2px;
  overflow: hidden;
  z-index: 3;
}

.calendar-event:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: -2px;
}

.calendar-event.is-priority {
  border-color: rgba(243, 180, 57, 0.7);
  background: linear-gradient(180deg, rgba(243, 180, 57, 0.94), rgba(214, 137, 27, 0.95));
  box-shadow: 0 4px 10px rgba(214, 137, 27, 0.24);
}

.calendar-event.is-other {
  border-color: rgba(136, 150, 184, 0.7);
  background: linear-gradient(180deg, rgba(121, 135, 165, 0.92), rgba(91, 104, 139, 0.94));
  box-shadow: 0 4px 10px rgba(74, 83, 111, 0.24);
}

.calendar-event.is-active {
  outline: 1px dashed rgba(255, 255, 255, 0.86);
  outline-offset: -3px;
}

.calendar-event-title {
  font-size: 0.76rem;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event-meta {
  font-family: var(--timer-font-family);
  font-size: 0.63rem;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event.tier-medium {
  align-content: center;
}

.calendar-event.tier-medium .calendar-event-title {
  font-size: 0.69rem;
  line-height: 1.15;
}

.calendar-event.tier-tiny {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 4px;
}

.calendar-event-time-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 1px 5px;
  border-radius: 999px;
  font-family: var(--timer-font-family);
  font-size: 0.58rem;
  line-height: 1.1;
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event-popover {
  position: absolute;
  z-index: 95;
  width: min(320px, calc(100% - 20px));
  border-radius: 12px;
  border: 1px solid rgba(45, 109, 246, 0.35);
  background: #f7fbff;
  box-shadow: 0 14px 30px rgba(18, 25, 38, 0.26);
  padding: 10px 11px;
  display: grid;
  gap: 7px;
}

.calendar-event-popover-title {
  font-size: 0.9rem;
  line-height: 1.25;
}

.calendar-event-popover-meta {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted-text-color);
}

.calendar-event-popover-details {
  display: grid;
  gap: 4px;
  font-family: var(--timer-font-family);
  font-size: 0.72rem;
}

.calendar-event-popover-details strong {
  font-weight: 700;
}

.calendar-event-popover-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-btn {
  background: none;
  border: none;
  box-shadow: none;
  color: inherit;
}

.nav-btn:hover,
.nav-btn:focus {
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

body.dark-skin {
  --background-color: #181b20;
  --text-color: #f0f3fa;
  --muted-text-color: rgba(240, 243, 250, 0.72);
  --border-color: rgba(240, 243, 250, 0.14);
  --app-bg-gradient: radial-gradient(circle at 12% 0%, rgba(45, 109, 246, 0.22), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(46, 166, 111, 0.16), transparent 36%);
  --primary-color-hover: #8fb4ff;
}

body.dark-skin,
body.dark-skin h1,
body.dark-skin h2,
body.dark-skin h3,
body.dark-skin h4,
body.dark-skin h5,
body.dark-skin h6,
body.dark-skin th,
body.dark-skin td {
  color: var(--text-color) !important;
}

body.dark-skin .card,
body.dark-skin .card-body,
body.dark-skin .table,
body.dark-skin .offcanvas {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

body.dark-skin .sidebar {
  background: linear-gradient(180deg, #252d3d, var(--sidebar-bg)) !important;
  border-right-color: rgba(240, 243, 250, 0.12);
}

body.dark-skin .sidebar .nav-link,
body.dark-skin .offcanvas .nav-link {
  color: #d3dcf2;
}

body.dark-skin .sidebar .nav-link.active,
body.dark-skin .offcanvas .nav-link.active {
  background-color: rgba(75, 135, 255, 0.22);
  box-shadow: inset 3px 0 0 #7aa4ff;
  color: #f0f3fa;
}

body.dark-skin .active-summary {
  background-color: rgba(27, 33, 44, 0.92) !important;
}

body.dark-skin .active-summary-stat {
  background-color: rgba(53, 62, 79, 0.92);
  border-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .active-summary-stat-primary {
  background-color: rgba(75, 135, 255, 0.24);
  border-color: rgba(122, 164, 255, 0.5);
}

body.dark-skin .active-summary-next {
  background: rgba(75, 135, 255, 0.08);
  border-color: rgba(122, 164, 255, 0.26);
}

body.dark-skin .active-summary-next-chip {
  background: rgba(122, 164, 255, 0.16);
  color: #d7e5ff;
}

body.dark-skin .undo-banner {
  border-color: rgba(122, 164, 255, 0.38);
  background: rgba(75, 135, 255, 0.16);
}

body.dark-skin .active-view-toolbar {
  background: linear-gradient(180deg, rgba(37, 45, 61, 0.95), var(--card-bg));
}

body.dark-skin .active-bulk-toolbar {
  border-top-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .active-toolbar-count,
body.dark-skin .active-bulk-count {
  color: rgba(213, 223, 245, 0.76);
}

body.dark-skin .active-recovery-banner {
  border-top-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .active-recovery-text {
  color: #f0f3fa;
}

body.dark-skin .milestone-order-wrap {
  border-top-color: rgba(240, 243, 250, 0.22);
}

body.dark-skin .milestone-order-row {
  border-color: rgba(122, 164, 255, 0.32);
  background: rgba(75, 135, 255, 0.14);
}

body.dark-skin .milestone-order-index {
  color: #d7e6ff;
  background: rgba(122, 164, 255, 0.22);
}

body.dark-skin .milestone-order-name {
  color: #e4ebfa;
}

body.dark-skin .milestone-order-btn {
  border-color: rgba(122, 164, 255, 0.46);
  color: #bfd6ff;
}

body.dark-skin .active-milestone-group-header {
  border-color: rgba(102, 214, 172, 0.42);
  background: rgba(76, 196, 151, 0.16);
}

body.dark-skin .active-milestone-shell {
  border-color: rgba(102, 214, 172, 0.34);
  background:
    linear-gradient(180deg, rgba(45, 105, 84, 0.24), rgba(20, 38, 31, 0.18)),
    rgba(22, 28, 38, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.dark-skin .active-milestone-shell.is-complete {
  border-color: rgba(102, 214, 172, 0.22);
  background:
    linear-gradient(180deg, rgba(45, 105, 84, 0.18), rgba(20, 38, 31, 0.14)),
    rgba(22, 28, 38, 0.72);
}

body.dark-skin .active-milestone-group-progress {
  background: rgba(117, 210, 156, 0.22);
}

body.dark-skin .active-milestone-group-progress-fill {
  background: linear-gradient(90deg, #56c79b, #8ae3c4);
}

body.dark-skin .active-milestone-group-header.is-other {
  border-color: rgba(136, 156, 201, 0.4);
  background: rgba(113, 136, 189, 0.2);
}

body.dark-skin .active-milestone-group-title,
body.dark-skin .active-milestone-group-count {
  color: #c6f7de;
}

body.dark-skin .active-milestone-group-pill {
  color: #cff7e5;
  background: rgba(8, 26, 31, 0.34);
  border-color: rgba(155, 238, 207, 0.18);
}

body.dark-skin .active-milestone-group-pill-risk-low,
body.dark-skin .active-milestone-group-pill-risk-complete {
  background: rgba(51, 130, 97, 0.24);
}

body.dark-skin .active-milestone-group-pill-risk-medium {
  color: #ffe2a6;
  background: rgba(143, 96, 4, 0.26);
  border-color: rgba(245, 197, 106, 0.2);
}

body.dark-skin .active-milestone-group-pill-risk-high {
  color: #ffc0c0;
  background: rgba(153, 44, 44, 0.3);
  border-color: rgba(245, 125, 125, 0.24);
}

body.dark-skin .active-milestone-group-pill-blocked {
  color: #ffe2a6;
  background: rgba(143, 96, 4, 0.26);
  border-color: rgba(245, 197, 106, 0.2);
}

body.dark-skin .active-milestone-group-header.is-other .active-milestone-group-title,
body.dark-skin .active-milestone-group-header.is-other .active-milestone-group-count {
  color: #d4e0ff;
}

body.dark-skin .template-task-row {
  border-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .template-variable-key {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .ai-plan-item {
  border-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .ai-plan-item-meta {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .active-summary-label {
  color: rgba(213, 223, 245, 0.78) !important;
}

body.dark-skin .active-summary-value {
  color: #f5f8ff !important;
}

body.dark-skin .active-summary-next {
  border-top-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin #workControl .header-action-secondary {
  border-color: rgba(122, 164, 255, 0.55);
  color: #8fb4ff;
}

body.dark-skin #workControl .header-action-secondary:hover {
  border-color: rgba(143, 180, 255, 0.9);
  background: rgba(143, 180, 255, 0.12);
  color: #c3d9ff;
}

body.dark-skin .modal-content {
  background-color: #252d3d;
  color: var(--text-color);
  border: 1px solid rgba(240, 243, 250, 0.16);
}

body.dark-skin .modal-header,
body.dark-skin .modal-footer {
  border-color: rgba(240, 243, 250, 0.16);
}

body.dark-skin .modal .modal-title,
body.dark-skin .modal .form-label,
body.dark-skin .modal .form-check-label {
  color: var(--text-color);
}

body.dark-skin .modal .small,
body.dark-skin .modal .text-muted {
  color: rgba(213, 223, 245, 0.78) !important;
}

body.dark-skin .modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

body.dark-skin .form-control {
  background-color: #2a313f;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.dark-skin .form-control::placeholder {
  color: rgba(213, 223, 245, 0.56);
}

body.dark-skin .form-control:focus {
  background-color: #2a313f;
  color: var(--text-color);
  border-color: var(--primary-color);
  box-shadow: none;
}

body.dark-skin .timer-meta {
  color: rgba(213, 223, 245, 0.78) !important;
}

body.dark-skin .timer-meta-value {
  color: #f0f3fa;
}

body.dark-skin .timer-card-menu .dropdown-menu {
  background-color: #283145;
}

body.dark-skin .timer-menu-item {
  color: #e2e8f8;
}

body.dark-skin .timer-menu-item:hover,
body.dark-skin .timer-menu-item:focus {
  background-color: rgba(75, 135, 255, 0.18);
}

body.dark-skin .priority-badge {
  color: #ffdca1;
  background: rgba(243, 180, 57, 0.2);
  border-color: rgba(243, 180, 57, 0.45);
}

body.dark-skin .energy-badge.energy-deep {
  color: #b9d8ff;
  background: rgba(84, 152, 255, 0.24);
  border-color: rgba(122, 177, 255, 0.48);
}

body.dark-skin .energy-badge.energy-admin {
  color: #d7caed;
  background: rgba(156, 145, 186, 0.24);
  border-color: rgba(180, 168, 212, 0.48);
}

body.dark-skin .energy-badge.energy-light {
  color: #b8f0cf;
  background: rgba(87, 191, 132, 0.24);
  border-color: rgba(117, 210, 156, 0.48);
}

body.dark-skin .routine-step-badge {
  color: #a9d0ff;
  background: rgba(84, 152, 255, 0.2);
  border-color: rgba(84, 152, 255, 0.45);
}

body.dark-skin .timer-overflow-badge {
  color: #bfd6ff;
  background: rgba(122, 164, 255, 0.2);
  border-color: rgba(122, 164, 255, 0.42);
}

body.dark-skin .timer-running-badge {
  color: #c6f7de;
  background: rgba(87, 191, 132, 0.28);
  border-color: rgba(117, 210, 156, 0.52);
}

body.dark-skin .timer-eta {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .milestone-blocked-hint {
  color: #ffd38c;
}

body.dark-skin .timer-card.high-priority {
  border-color: rgba(246, 197, 95, 0.95);
  background: linear-gradient(180deg, rgba(246, 197, 95, 0.14), var(--card-bg));
  box-shadow: 0 0 0 1px rgba(246, 197, 95, 0.55), 0 16px 30px rgba(246, 197, 95, 0.15), var(--card-shadow);
}

body.dark-skin .timer-card.is-selected {
  border-color: rgba(122, 164, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(122, 164, 255, 0.42), var(--card-shadow);
}

body.dark-skin .timer-card.calendar-focus-target {
  box-shadow: 0 0 0 2px rgba(122, 164, 255, 0.78), 0 0 24px rgba(122, 164, 255, 0.24), var(--card-shadow);
}

body.dark-skin .timer-card.is-active {
  border-color: rgba(122, 177, 255, 0.9);
}

body.dark-skin .timer-card.high-priority .timer-card-title {
  color: #ffe6ba;
}

body.dark-skin .timer-card.high-priority .timer-action-btn[data-timer-action='togglePriority'] {
  color: #ffd582;
}

body.dark-skin .dashboard-v2-card {
  background: linear-gradient(180deg, rgba(37, 45, 61, 0.95), var(--card-bg));
}

body.dark-skin .pulse-score-ring {
  background:
    radial-gradient(circle at center, var(--card-bg) 62%, transparent 63%),
    conic-gradient(var(--primary-color) calc(var(--score) * 1%), rgba(122, 164, 255, 0.16) 0);
}

body.dark-skin .dashboard-insight {
  background: rgba(75, 135, 255, 0.18);
  border-color: rgba(122, 164, 255, 0.35);
}

body.dark-skin .dot-planned {
  background: rgba(122, 164, 255, 0.5);
}

body.dark-skin .commitment-track {
  background: rgba(122, 164, 255, 0.16);
}

body.dark-skin .commitment-bar.planned {
  background: rgba(122, 164, 255, 0.52);
}

body.dark-skin .time-river {
  background: linear-gradient(180deg, rgba(122, 164, 255, 0.08), transparent);
}

body.dark-skin .time-river::before {
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(122, 164, 255, 0.22) 25%,
    transparent calc(25% + 1px),
    transparent calc(50% - 1px),
    rgba(122, 164, 255, 0.22) 50%,
    transparent calc(50% + 1px),
    transparent calc(75% - 1px),
    rgba(122, 164, 255, 0.22) 75%,
    transparent calc(75% + 1px)
  );
}

body.dark-skin .river-segment {
  color: #eef3ff;
}

body.dark-skin .river-segment.is-priority {
  color: #3b2a00;
}

body.dark-skin .momentum-bar {
  background: linear-gradient(180deg, #8eb1ff, #4f86ff);
}

body.dark-skin .dashboard-v2-footer strong {
  color: #f4f7ff !important;
}

body.dark-skin .dashboard-picker-summary {
  background: #283145;
  border-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .dashboard-picker-panel {
  background: #283145;
  border-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .dashboard-widget-customizer {
  background: linear-gradient(180deg, rgba(37, 45, 61, 0.95), var(--card-bg));
  border-color: rgba(240, 243, 250, 0.2);
  box-shadow: var(--card-shadow);
}

body.dark-skin .dashboard-widget-customizer-summary {
  color: #eef3ff;
}

body.dark-skin .dashboard-widget-customizer-hint {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .dashboard-widget-row {
  background: rgba(122, 164, 255, 0.08);
  border-color: rgba(240, 243, 250, 0.18);
}

body.dark-skin .dashboard-widget-row-label,
body.dark-skin .dashboard-widget-customizer-section strong {
  color: #eef3ff;
}

body.dark-skin .dashboard-picker-day {
  color: #e6ecfb;
}

body.dark-skin .dashboard-picker-day:hover:not(:disabled) {
  border-color: rgba(122, 164, 255, 0.5);
  background: rgba(122, 164, 255, 0.2);
}

body.dark-skin .dashboard-picker-day.is-selected {
  border-color: rgba(122, 164, 255, 0.7);
  background: rgba(122, 164, 255, 0.3);
}

body.dark-skin .dashboard-picker-legend {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .monthly-trend-bar {
  background: linear-gradient(180deg, #9bbcff, #5d8cf3);
}

body.dark-skin .weekly-progress-track {
  background: rgba(122, 164, 255, 0.2);
}

body.dark-skin .weekly-progress-track.is-met {
  background: rgba(89, 193, 137, 0.24);
}

body.dark-skin .weekly-priority-track {
  background: rgba(243, 180, 57, 0.22);
}

body.dark-skin .weekly-priority-target {
  background: rgba(240, 243, 250, 0.8);
}

body.dark-skin .routine-stats-main span,
body.dark-skin .routine-stats-streak small {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .milestone-summary-item span,
body.dark-skin .milestone-summary-status,
body.dark-skin .milestone-summary-hint {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .template-analytics-meta {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .template-analytics-hotspot {
  color: #ffc77c;
}

body.dark-skin .template-analytics-suggestion {
  color: #9fc5ff;
}

body.dark-skin .energy-queue-main span,
body.dark-skin .dashboard-energy-meta {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .calendar-summary-item {
  border-color: rgba(122, 164, 255, 0.26);
  background: rgba(122, 164, 255, 0.14);
}

body.dark-skin .calendar-zoom-controls {
  border-left-color: rgba(240, 243, 250, 0.2);
}

body.dark-skin .calendar-grid-wrap {
  border-color: rgba(240, 243, 250, 0.2);
  background: linear-gradient(180deg, rgba(122, 164, 255, 0.1), transparent);
}

body.dark-skin .planning-summary-pill,
body.dark-skin .planning-column,
body.dark-skin .planning-panel {
  background: linear-gradient(180deg, rgba(37, 45, 61, 0.95), var(--card-bg));
  border-color: rgba(240, 243, 250, 0.18);
  box-shadow: var(--card-shadow);
}

body.dark-skin .planning-toolbar-title,
body.dark-skin .planning-summary-pill strong,
body.dark-skin .planning-column-header strong,
body.dark-skin .planning-panel-header strong,
body.dark-skin .planning-card-title {
  color: #eef3ff;
}

body.dark-skin .planning-summary-label,
body.dark-skin .planning-column-meta,
body.dark-skin .planning-card-meta,
body.dark-skin .planning-card-goal,
body.dark-skin .planning-goal-text span,
body.dark-skin .planning-review-note {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .planning-card {
  background: rgba(122, 164, 255, 0.08);
  border-color: rgba(240, 243, 250, 0.16);
}

body.dark-skin .planning-goal-row,
body.dark-skin .planning-milestone-row,
body.dark-skin .milestones-list-shell,
body.dark-skin .milestones-list-filter-pill,
body.dark-skin .milestones-compact-pill,
body.dark-skin .milestones-detail,
body.dark-skin .milestones-list-item,
body.dark-skin .milestones-timeline-row,
body.dark-skin .milestones-step,
body.dark-skin .milestones-due-editor,
body.dark-skin .milestones-create-task-row {
  background: rgba(122, 164, 255, 0.08);
  border-color: rgba(240, 243, 250, 0.16);
}

body.dark-skin .planning-ai-item {
  background: rgba(122, 164, 255, 0.08);
  border-color: rgba(240, 243, 250, 0.16);
}

body.dark-skin .planning-card-milestone {
  color: #9fc5ff;
}

body.dark-skin .planning-card-milestone.is-blocked {
  color: #ffc77c;
}

body.dark-skin .planning-milestone-row:hover,
body.dark-skin .planning-milestone-row:focus-visible,
body.dark-skin .milestones-list-filter-pill.is-active,
body.dark-skin .milestones-list-item:hover,
body.dark-skin .milestones-list-item:focus-visible,
body.dark-skin .milestones-list-item.is-active,
body.dark-skin .milestone-summary-row[role="button"]:hover,
body.dark-skin .milestone-summary-row[role="button"]:focus-visible {
  border-color: rgba(122, 164, 255, 0.46);
  box-shadow: 0 0 0 2px rgba(122, 164, 255, 0.18);
}

body.dark-skin .milestones-list-item-hint,
body.dark-skin .milestones-detail-subtitle,
body.dark-skin .milestones-compact-pill-label,
body.dark-skin .milestones-section-heading-meta,
body.dark-skin .milestones-timeline-row-main span,
body.dark-skin .milestones-step-details,
body.dark-skin .milestones-due-editor-label {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .planning-milestone-risk--high,
body.dark-skin .milestones-risk--high {
  color: #ffd3bf;
  background: rgba(164, 78, 31, 0.34);
}

body.dark-skin .planning-milestone-risk--medium,
body.dark-skin .milestones-risk--medium,
body.dark-skin .milestones-step-pill--blocked {
  color: #ffe2a6;
  background: rgba(143, 96, 4, 0.26);
}

body.dark-skin .planning-milestone-risk--low,
body.dark-skin .planning-milestone-risk--complete,
body.dark-skin .milestones-risk--low,
body.dark-skin .milestones-risk--complete {
  color: #cff7e5;
  background: rgba(27, 97, 74, 0.28);
}

body.dark-skin .milestones-compact-pill--warning {
  border-color: rgba(143, 96, 4, 0.34);
}

body.dark-skin .milestones-compact-pill--success {
  border-color: rgba(27, 97, 74, 0.34);
}

body.dark-skin .milestones-step-pill {
  color: #cfe0ff;
  background: rgba(122, 164, 255, 0.16);
}

body.dark-skin .planning-ai-item span,
body.dark-skin .planning-ai-item small,
body.dark-skin .planning-ai-error {
  color: rgba(213, 223, 245, 0.78);
}

body.dark-skin .planning-ai-error {
  color: #ffc77c;
}

body.dark-skin .calendar-header-spacer,
body.dark-skin .calendar-day-header,
body.dark-skin .calendar-time-axis,
body.dark-skin .calendar-day-column {
  border-color: rgba(240, 243, 250, 0.16);
}

body.dark-skin .calendar-day-header {
  background: #252d3d;
}

body.dark-skin .calendar-day-header.is-today {
  background: #31486f;
}

body.dark-skin .calendar-day-summary {
  color: rgba(213, 223, 245, 0.8);
}

body.dark-skin .calendar-time-axis {
  background: rgba(28, 35, 49, 0.92);
  box-shadow: 1px 0 0 rgba(240, 243, 250, 0.14);
}

body.dark-skin .calendar-header-spacer {
  background: #252d3d;
  box-shadow: 1px 0 0 rgba(240, 243, 250, 0.14), 0 1px 0 rgba(240, 243, 250, 0.14);
}

body.dark-skin .calendar-day-header {
  box-shadow: 0 1px 0 rgba(240, 243, 250, 0.14);
}

body.dark-skin .calendar-day-column {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-hour-height) / 2 - 1px),
      rgba(122, 164, 255, 0.09) calc(var(--calendar-hour-height) / 2 - 1px),
      rgba(122, 164, 255, 0.09) calc(var(--calendar-hour-height) / 2)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-hour-height) - 1px),
      rgba(122, 164, 255, 0.18) calc(var(--calendar-hour-height) - 1px),
      rgba(122, 164, 255, 0.18) var(--calendar-hour-height)
    );
}

body.dark-skin .calendar-event {
  border-color: rgba(144, 184, 255, 0.62);
  background: linear-gradient(180deg, rgba(95, 152, 255, 0.94), rgba(65, 118, 226, 0.94));
  box-shadow: 0 4px 10px rgba(65, 118, 226, 0.26);
}

body.dark-skin .calendar-event.is-priority {
  border-color: rgba(246, 197, 95, 0.7);
  background: linear-gradient(180deg, rgba(246, 197, 95, 0.95), rgba(227, 153, 46, 0.95));
  box-shadow: 0 4px 10px rgba(227, 153, 46, 0.26);
}

body.dark-skin .calendar-event.is-other {
  border-color: rgba(167, 185, 229, 0.6);
  background: linear-gradient(180deg, rgba(134, 152, 189, 0.93), rgba(102, 119, 156, 0.94));
  box-shadow: 0 4px 10px rgba(102, 119, 156, 0.26);
}

body.dark-skin .calendar-event-time-chip {
  background: rgba(240, 243, 250, 0.2);
  color: #f7faff;
}

body.dark-skin .calendar-event-popover {
  border-color: rgba(122, 164, 255, 0.35);
  background: #2a3346;
  box-shadow: 0 14px 30px rgba(5, 8, 14, 0.5);
}

body.dark-skin .calendar-event-popover-meta {
  color: rgba(213, 223, 245, 0.8);
}

body.dark-skin .table th,
body.dark-skin .table td {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

body.dark-skin .quick-add {
  color: #8fb4ff;
  border-color: rgba(143, 180, 255, 0.4);
  background: rgba(143, 180, 255, 0.12);
}

body.dark-skin .quick-add:hover {
  color: #c5d9ff;
  border-color: rgba(197, 217, 255, 0.6);
  background: rgba(197, 217, 255, 0.18);
}

body.dark-skin .form-select {
  background-color: #2a313f;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

body.dark-skin .form-select:focus {
  background-color: #2a313f;
  color: var(--text-color);
  border-color: var(--primary-color);
  box-shadow: none;
}

body.dark-skin .bg-danger {
  background: #ba4b43 !important;
}

.settings-panel-shell {
  max-width: 960px;
  margin: 0 auto;
}

.settings-panel-card {
  border-radius: 20px;
  overflow: hidden;
}

.timer-card--compact .timer-card-title {
  font-size: 0.96rem;
  min-height: 2.35em;
}

.settings-panel-card .card-body {
  padding: 1.5rem;
}

.settings-panel-meta {
  margin-bottom: 0.35rem;
  color: rgba(86, 98, 126, 0.92);
  font-size: 0.92rem;
}

.settings-panel-intro {
  margin-bottom: 1.1rem;
  color: rgba(38, 48, 73, 0.86);
}

.settings-tabs {
  gap: 0.55rem;
  border-bottom: 1px solid rgba(21, 33, 59, 0.14);
  margin-bottom: 0;
}

.settings-tabs .nav-link {
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  padding: 0.8rem 1rem 0.7rem;
  color: #44557c;
  font-weight: 600;
  line-height: 1.2;
}

.settings-tabs .nav-link:hover {
  border-color: rgba(42, 102, 255, 0.18);
  background: rgba(42, 102, 255, 0.06);
  color: #264ea8;
}

.settings-tabs .nav-link.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.98));
  border-color: rgba(21, 33, 59, 0.14);
  border-bottom-color: transparent;
  color: #172643;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset;
}

.settings-tab-content {
  padding-top: 0.2rem;
}

.settings-subsection {
  padding: 1rem 1rem 0.85rem;
  border: 1px solid rgba(21, 33, 59, 0.08);
  border-radius: 14px;
  background: rgba(245, 248, 255, 0.55);
  margin-bottom: 1rem;
}

.settings-subsection:last-child {
  margin-bottom: 0;
}

.settings-subsection .text-muted,
.settings-tab-content .text-muted {
  color: rgba(58, 70, 97, 0.82) !important;
}

.settings-subsection h6 {
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

.settings-subsection .form-check {
  margin-bottom: 0.45rem;
}

body.dark-skin .settings-panel-meta {
  color: rgba(197, 209, 235, 0.8);
}

body.dark-skin .settings-panel-intro {
  color: rgba(229, 236, 251, 0.88);
}

body.dark-skin .settings-tabs {
  border-bottom-color: rgba(240, 243, 250, 0.18);
}

body.dark-skin .settings-tabs .nav-link {
  color: rgba(191, 208, 245, 0.9);
}

body.dark-skin .settings-tabs .nav-link:hover {
  border-color: rgba(122, 164, 255, 0.28);
  background: rgba(122, 164, 255, 0.12);
  color: #eef3ff;
}

body.dark-skin .settings-tabs .nav-link.active {
  background: linear-gradient(180deg, rgba(53, 67, 97, 0.98), rgba(36, 46, 66, 0.98));
  border-color: rgba(240, 243, 250, 0.16);
  color: #ffffff;
}

body.dark-skin .settings-subsection {
  background: rgba(32, 42, 62, 0.72);
  border-color: rgba(240, 243, 250, 0.12);
}

body.dark-skin .settings-subsection .text-muted,
body.dark-skin .settings-tab-content .text-muted {
  color: rgba(213, 223, 245, 0.84) !important;
}

@media (max-width: 991px) {
  main {
    padding: 16px;
  }

  .app-header {
    align-items: flex-start !important;
  }

  #workControl {
    width: 100%;
    justify-items: stretch;
  }

  .work-control-secondary,
  .work-control-primary {
    justify-content: flex-start;
  }

  .active-summary-top {
    grid-template-columns: 1fr;
  }

  .active-summary-grid {
    grid-template-columns: 1fr;
  }

  .active-view-toolbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .active-toolbar-cluster-secondary,
  .active-toolbar-cluster-utility {
    justify-content: flex-start;
  }

  .active-toolbar-item .form-select,
  .active-toolbar-search {
    min-width: 0;
    width: 100%;
  }

  .active-summary-next {
    flex-direction: column;
    align-items: flex-start;
  }

  .active-summary-next-actions {
    justify-content: flex-start;
  }

  .active-toolbar-count {
    justify-self: start;
  }

  .active-recovery-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  #pageTitle {
    font-size: 1.9rem;
  }

  .dashboard-widget-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-widget-slot--full {
    grid-column: auto;
  }

  .dashboard-v2-grid-hero,
  .dashboard-v2-grid-middle {
    grid-template-columns: 1fr;
  }

  .planning-board {
    grid-template-columns: 1fr;
  }

  .planning-week-grid {
    grid-template-columns: 1fr;
  }

  .milestones-layout {
    grid-template-columns: 1fr;
  }

  .milestones-list-shell {
    position: static;
  }

  .milestones-detail-header {
    grid-template-columns: 1fr;
  }

  .milestones-create-top-row,
  .milestones-create-task-row {
    grid-template-columns: 1fr;
  }

  .milestones-due-editor-controls .form-control {
    width: 100%;
  }

  .dashboard-toolbar {
    align-items: stretch;
  }

  .dashboard-period-controls {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .dashboard-period-label {
    min-width: auto;
    flex: 1;
  }

  .pulse-main {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pulse-score-ring {
    width: 126px;
    height: 126px;
  }

  .momentum-strip {
    height: 150px;
  }

  .monthly-trend-strip {
    overflow-x: auto;
    padding-bottom: 4px;
  }

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

  .undo-banner {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .timer-footer-row {
    flex-wrap: wrap;
  }

  .timer-quick-add-inline {
    margin-left: 0;
    justify-content: flex-start;
  }

  .calendar-toolbar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .calendar-period-label {
    justify-self: start;
  }

  .calendar-grid-wrap {
    max-height: calc(100svh - 265px);
  }
}