:root {
  --control-height: 40px;
  --control-radius: 8px;
  --control-bg: rgba(255, 255, 255, .045);
  --control-bg-hover: rgba(255, 255, 255, .085);
  --control-border: rgba(255, 255, 255, .12);
  --control-border-hover: rgba(255, 255, 255, .2);
  --control-focus: rgba(167, 139, 250, .9);
  --control-primary: #8b5cf6;
  --control-primary-pressed: #7c3aed;
  --icon-neutral: #a1a1aa;
}

/* Shared action surface. */
.fookus-ui .action-button,
.fookus-ui .scale-choice,
.fookus-ui .icon-choice,
.fookus-ui #reset-layout,
.fookus-ui [data-card-toggle],
.fookus-ui #save-profile,
.fookus-ui #auth-form #submit,
.fookus-ui #task-form button,
.fookus-ui #details-task-form button {
  min-height: var(--control-height);
  border: 1px solid var(--control-border) !important;
  border-radius: var(--control-radius) !important;
  background: var(--control-bg) !important;
  color: var(--text-heading) !important;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.fookus-ui .action-button:hover,
.fookus-ui .scale-choice:hover,
.fookus-ui .icon-choice:hover,
.fookus-ui #reset-layout:hover,
.fookus-ui [data-card-toggle]:hover,
.fookus-ui #save-profile:hover {
  border-color: var(--control-border-hover) !important;
  background: var(--control-bg-hover) !important;
}

/* Only a submit or add action receives the solid violet treatment. */
.fookus-ui #auth-form #submit,
.fookus-ui #task-form button,
.fookus-ui #details-task-form button {
  border-color: var(--control-primary) !important;
  background: var(--control-primary) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(124, 58, 237, .2);
}

.fookus-ui #auth-form #submit:hover,
.fookus-ui #task-form button:hover,
.fookus-ui #details-task-form button:hover {
  background: var(--control-primary-pressed) !important;
  border-color: var(--control-primary-pressed) !important;
}

/* Chosen settings and completed tasks use the same quiet enabled state. */
.fookus-ui .scale-choice[aria-pressed="true"],
.fookus-ui .icon-choice[aria-pressed="true"],
.fookus-ui [data-card-toggle][aria-pressed="true"],
.fookus-ui .task-icon-button.bg-violet,
.fookus-ui [data-detail-task-id].bg-violet {
  border-color: rgba(139, 92, 246, .72) !important;
  background: rgba(139, 92, 246, .18) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, .14);
}

/* Text-only actions remain light but keep the same keyboard and touch behaviour. */
.fookus-ui #mode-toggle,
.fookus-ui #logout,
.fookus-ui #admin-link,
.fookus-ui a[href="/"],
.fookus-ui a[href="/auth.html"] {
  border-radius: var(--control-radius);
  color: var(--text-accent) !important;
}

.fookus-ui #mode-toggle:hover,
.fookus-ui #logout:hover,
.fookus-ui #admin-link:hover,
.fookus-ui a[href="/"]:hover,
.fookus-ui a[href="/auth.html"]:hover {
  color: #ddd6fe !important;
}

/* Fields use a single surface, placeholder and focus treatment. */
.fookus-ui #task-input,
.fookus-ui #details-task-input,
.fookus-ui #auth-form input,
.fookus-ui #new-name,
.fookus-ui .account-input,
.fookus-ui #city-select {
  height: var(--control-height) !important;
  border: 1px solid var(--control-border) !important;
  border-radius: var(--control-radius) !important;
  background: rgba(31, 31, 31, .78) !important;
  color: var(--text-heading) !important;
  box-shadow: none !important;
  transform: none !important;
  will-change: auto !important;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.fookus-ui #task-input::placeholder,
.fookus-ui #details-task-input::placeholder,
.fookus-ui input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

.fookus-ui #task-input:hover,
.fookus-ui #details-task-input:hover,
.fookus-ui #auth-form input:hover,
.fookus-ui #new-name:hover,
.fookus-ui .account-input:hover,
.fookus-ui #city-select:hover {
  border-color: var(--control-border-hover) !important;
  background: rgba(31, 31, 31, .94) !important;
}

.fookus-ui #task-input:focus,
.fookus-ui #details-task-input:focus,
.fookus-ui #auth-form input:focus,
.fookus-ui #new-name:focus,
.fookus-ui .account-input:focus,
.fookus-ui #city-select:focus {
  border-color: var(--control-focus) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .22) !important;
  outline: none !important;
}

/* Every compact icon action receives an equal hit target. */
.fookus-ui .header-icon-button,
.fookus-ui .layout-mobile-control,
.fookus-ui .task-icon-button,
.fookus-ui [data-detail-task-id],
.fookus-ui [data-remove-id],
.fookus-ui [data-detail-remove-id],
.fookus-ui #close-details,
.fookus-ui [data-calendar-nav] {
  display: inline-grid;
  width: var(--control-height) !important;
  height: var(--control-height) !important;
  min-width: var(--control-height);
  min-height: var(--control-height);
  place-items: center;
  border: 1px solid var(--control-border) !important;
  border-radius: var(--control-radius) !important;
  background: var(--control-bg) !important;
  color: var(--text-body) !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}

.fookus-ui .header-icon-button:hover,
.fookus-ui .layout-mobile-control:hover,
.fookus-ui .task-icon-button:hover,
.fookus-ui [data-detail-task-id]:hover,
.fookus-ui [data-remove-id]:hover,
.fookus-ui [data-detail-remove-id]:hover,
.fookus-ui #close-details:hover,
.fookus-ui [data-calendar-nav]:hover {
  border-color: var(--control-border-hover) !important;
  background: var(--control-bg-hover) !important;
  color: var(--text-heading) !important;
}

.fookus-ui .layout-mobile-control.is-hide,
.fookus-ui [data-layout-action="hide"] {
  color: #fda4af !important;
}

/* Deleting a task is a quiet icon action, not a separate button surface. */
.fookus-ui .task-icon-button[data-remove-id],
.fookus-ui [data-detail-remove-id] {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-faint) !important;
}

.fookus-ui .task-icon-button[data-remove-id]:hover,
.fookus-ui [data-detail-remove-id]:hover {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text-body) !important;
}

/* Inline task-editing controls share one quiet style. */
.fookus-ui [data-task-edit-save],
.fookus-ui [data-detail-task-edit-save] {
  border-color: transparent !important;
  background: transparent !important;
  color: #fff !important;
}

/* Uniform compact hit target for every inline task-edit control. */
.fookus-ui [data-detail-task-id],
.fookus-ui [data-task-edit-save],
.fookus-ui [data-detail-task-edit-save],
.fookus-ui [data-remove-id],
.fookus-ui [data-detail-remove-id] {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  border: none !important;
  box-shadow: none !important;
}

/* Match the task checkboxes in the full tasks dialog. */
.fookus-ui #task-list .task-icon-button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  flex: 0 0 28px;
}

/* The delete action keeps a quiet surface. */
.fookus-ui [data-remove-id],
.fookus-ui [data-detail-remove-id] {
  background: transparent !important;
  color: var(--icon-neutral) !important;
}

.fookus-ui [data-remove-id]:hover,
.fookus-ui [data-detail-remove-id]:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--text-heading) !important;
}

.fookus-ui [data-task-edit-form] input,
.fookus-ui [data-detail-task-edit-form] input {
  height: 28px !important;
  min-height: 28px;
  border: none !important;
  box-shadow: none !important;
}

.fookus-ui .task-text-button {
  width: 0;
  min-width: 0;
  flex: 1 1 0%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  line-height: inherit;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  cursor: text;
  appearance: none;
  -webkit-appearance: none;
}

/* Lucide replaces <i> with <svg>, so target the final rendered icon. */
.fookus-ui [data-lucide] {
  color: var(--icon-neutral) !important;
  stroke: currentColor !important;
}

.fookus-ui #task-form button [data-lucide],
.fookus-ui #details-task-form button [data-lucide] {
  color: #fff !important;
}

.fookus-ui #account-link {
  color: #fff !important;
}

.fookus-ui .action-button:active,
.fookus-ui .scale-choice:active,
.fookus-ui .icon-choice:active,
.fookus-ui #reset-layout:active,
.fookus-ui [data-card-toggle]:active,
.fookus-ui .layout-mobile-control:active,
.fookus-ui .task-icon-button:active,
.fookus-ui [data-detail-task-id]:active,
.fookus-ui [data-remove-id]:active,
.fookus-ui [data-detail-remove-id]:active,
.fookus-ui #close-details:active,
.fookus-ui [data-calendar-nav]:active {
  transform: scale(.97);
}

.fookus-ui .action-button:focus-visible,
.fookus-ui .scale-choice:focus-visible,
.fookus-ui .icon-choice:focus-visible,
.fookus-ui #reset-layout:focus-visible,
.fookus-ui [data-card-toggle]:focus-visible,
.fookus-ui .layout-mobile-control:focus-visible,
.fookus-ui .task-icon-button:focus-visible,
.fookus-ui [data-detail-task-id]:focus-visible,
.fookus-ui [data-remove-id]:focus-visible,
.fookus-ui [data-detail-remove-id]:focus-visible,
.fookus-ui #close-details:focus-visible,
.fookus-ui [data-calendar-nav]:focus-visible,
.fookus-ui #mode-toggle:focus-visible,
.fookus-ui #logout:focus-visible,
.fookus-ui #admin-link:focus-visible,
.fookus-ui a[href="/"]:focus-visible,
.fookus-ui a[href="/auth.html"]:focus-visible {
  outline: 2px solid var(--control-focus) !important;
  outline-offset: 3px;
}

.fookus-ui button:disabled,
.fookus-ui [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .46;
  pointer-events: none;
}

/* Success notices follow the single-accent palette instead of introducing green. */
.fookus-ui #saved,
.fookus-ui #layout-saved {
  border: 1px solid rgba(139, 92, 246, .28);
  background: rgba(139, 92, 246, .12) !important;
  color: #ddd6fe !important;
}

@media (hover: none), (pointer: coarse) {
  .fookus-ui #account-link {
    height: 44px !important;
    min-height: 44px !important;
  }

  .fookus-ui .header-icon-button,
  .fookus-ui .layout-mobile-control,
  .fookus-ui .task-icon-button,
  .fookus-ui [data-detail-task-id],
  .fookus-ui [data-remove-id],
  .fookus-ui [data-detail-remove-id],
  .fookus-ui #close-details,
  .fookus-ui [data-calendar-nav] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }

  .fookus-ui #task-list .task-icon-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    flex-basis: 28px;
  }

  .fookus-ui [data-detail-task-id] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
  }

  .fookus-ui #task-list [data-remove-id],
  .fookus-ui .task-detail-list [data-detail-remove-id] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fookus-ui .action-button,
  .fookus-ui .scale-choice,
  .fookus-ui .icon-choice,
  .fookus-ui #reset-layout,
  .fookus-ui [data-card-toggle],
  .fookus-ui .layout-mobile-control,
  .fookus-ui .task-icon-button { transition: none; }
}

/* Shared settings toggle. */
.settings-switch { position: relative; width: 42px; min-width: 42px; height: 24px; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .18s ease; }
.settings-switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #a1a1aa; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease, background .18s ease; }
.settings-switch:checked { background: #824EF7; }
.settings-switch:checked::after { transform: translateX(18px); background: #fff; }
.settings-switch:hover { background: rgba(255,255,255,.18); }
.settings-switch:checked:hover { background: #9367f8; }
.settings-switch:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
.settings-switch { flex-shrink: 0; }
.settings-switch:disabled { cursor: not-allowed; opacity: .4; }

/* Profile and settings share one neutral button style. */
.fookus-ui.account-page :is(#logout, #admin-link, #mode-toggle),
.fookus-ui:is(.account-page, .settings-page, .admin-page) .action-button,
.fookus-ui.settings-page .scale-choice,
.fookus-ui.account-page #auth-form #submit {
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 12px;
  border: 1px solid var(--control-border) !important;
  border-radius: var(--control-radius) !important;
  background: var(--control-bg) !important;
  color: var(--text-heading) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.43;
  font-weight: 400;
  text-decoration: none;
}
.fookus-ui.account-page :is(#logout, #admin-link, #mode-toggle):hover,
.fookus-ui:is(.account-page, .settings-page, .admin-page) .action-button:hover,
.fookus-ui.settings-page .scale-choice:hover,
.fookus-ui.account-page #auth-form #submit:hover {
  border-color: var(--control-border-hover) !important;
  background: var(--control-bg-hover) !important;
  color: var(--text-heading) !important;
}
.fookus-ui.settings-page .scale-choice[aria-pressed="true"] {
  border-color: rgba(167,139,250,.7) !important;
  background: rgba(139,92,246,.15) !important;
}

.fookus-ui.account-page :is(#logout, #admin-link, #mode-toggle) {
  color: var(--text-accent) !important;
}
.fookus-ui.account-page :is(#logout, #admin-link):hover {
  color: #ddd6fe !important;
}

.fookus-ui.account-page #mode-toggle:is(:hover, :focus, :active) {
  color: var(--text-accent) !important;
}