/* style.css (Beta 10 - FINAL - Merged Add Button + All Features) */
/* ======================================================================== */
/* Base Variables & Setup */
/* ======================================================================== */
 :root {
    /* Color Palette */
     --primary-color: #400082;
     --primary-color-light: #8A5CFE;
     --primary-color-dark: #320066;
     --primary-color-rgb: 64, 0, 130;
    /* Added for RGBA */
     --danger-color: #e53e3e;
     --danger-color-dark: #c53030;
     --sticky-note-bg: #fffbeb;
     --sticky-note-text: #713f12;
    /* Priority Colors */
     --priority-low-color: #a0aec0;
     --priority-medium-color-dot: var(--primary-color-light);
     --priority-high-color-dot: var(--primary-color);
     --priority-medium-color-slider: #ffc914;
     --priority-high-color-slider: #fe346e;
    /* Status Colors (Main color for borders, active buttons) */
     --status-todo-color: #f0ad4e;
     --status-inprogress-color: #5bc0de;
     --status-inreview-color: var(--primary-color-light);
     --status-done-color: #5cb85c;
     --status-canceled-color: var(--priority-low-color);
    /* Status Background Colors (Lighter tints for badges) */
     --status-todo-bg: #feedcc;
     --status-inprogress-bg: #d1ecf1;
     --status-inreview-bg: #e5d9fe;
     --status-done-bg: #d4edda;
     --status-canceled-bg: #e9ecef;
    /* Neutrals & Layout */
     --body-bg: #f8f9fc;
     --container-bg: #ffffff;
     --input-bg: #ffffff;
     --input-border-color: #d1d5db;
     --border-color: #e2e8f0;
     --text-color: #2d3748;
     --text-color-light: #ffffff;
     --text-muted-color: #718096;
     --text-placeholder-color: #cbd5e0;
    /* Font, Sizing, Shadows, Spacing, Transitions */
     --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     --border-radius-base: 8px;
     --border-radius-large: 14px;
     --border-radius-xl: 22px;
     --border-radius-pill: 9999px;
     --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
     --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
     --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05);
     --shadow-focus: 0 0 0 3px rgba(64, 0, 130, 0.3);
     --spacing-xs: 4px;
     --spacing-sm: 8px;
     --spacing-md: 16px;
     --spacing-lg: 24px;
     --spacing-xl: 32px;
     --spacing-xxl: 48px;
     --transition-speed: 0.2s;
     --transition-ease: ease-in-out;
}
/* ======================================================================== */
/* Global Styles & Layout */
/* ======================================================================== */
 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 html {
     font-size: 16px;
     scroll-behavior: smooth;
}
 body {
     font-family: var(--font-family);
     color: var(--text-color);
     background-color: var(--body-bg);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     padding: var(--spacing-lg) var(--spacing-md);
}
 h1, h2, h3, h4, h5, h6 {
     font-weight: 600;
     margin-bottom: var(--spacing-md);
     line-height: 1.3;
}
 h1 {
     font-size: 1.8rem;
}
 h2 {
     font-size: 1.5rem;
}
 h3 {
     font-size: 1.25rem;
}
 a {
     color: var(--primary-color);
     text-decoration: none;
     transition: color var(--transition-speed) var(--transition-ease);
}
 a:hover {
     color: var(--primary-color-dark);
     text-decoration: underline;
}
 ul {
     list-style: none;
}
 textarea {
     font-family: inherit;
     font-size: inherit;
}
 .app-container {
     max-width: 850px;
     margin: 0 auto;
     background-color: var(--container-bg);
     border-radius: var(--border-radius-xl);
     box-shadow: var(--shadow-md);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     min-height: 80vh;
}
 .app-header, .app-main, .app-footer {
     padding: var(--spacing-lg);
}
 .app-header {
     padding-bottom: 0;
     border-bottom: 1px solid var(--border-color);
}
 .app-main {
     flex-grow: 1;
     display: block;
}
 .app-footer {
     background-color: var(--body-bg);
     border-top: 1px solid var(--border-color);
     padding: var(--spacing-md) var(--spacing-lg);
     display: flex;
     justify-content: flex-end;
     border-bottom-left-radius: var(--border-radius-xl);
     border-bottom-right-radius: var(--border-radius-xl);
}
/* ======================================================================== */
/* Header Components */
/* ======================================================================== */
 .header-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: var(--spacing-md);
}
 #settings-btn.button {
    /* Using standard button styles */
}
 .progress-bar-container {
     width: 100%;
     height: 10px;
     background-color: var(--border-color);
     border-radius: var(--border-radius-pill);
     overflow: hidden;
     position: relative;
     margin-bottom: var(--spacing-lg);
}
 .progress-bar {
     height: 100%;
     background-color: var(--primary-color);
     border-radius: var(--border-radius-pill);
     transition: width var(--transition-speed) var(--transition-ease);
}
 .progress-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 0.65rem;
     font-weight: 500;
     color: var(--text-color);
     white-space: nowrap;
     mix-blend-mode: difference;
     filter: invert(1) grayscale(1) contrast(10);
}
 .date-filter-bar {
     overflow-x: auto;
     overflow-y: hidden;
     padding-bottom: var(--spacing-md);
     margin-bottom: calc(-1 * var(--spacing-md));
     position: relative;
     white-space: nowrap;
     -ms-overflow-style: none;
     scrollbar-width: none;
}
 .date-filter-bar::-webkit-scrollbar {
     display: none;
}
 .date-filter-scroll-container {
     display: inline-flex;
     gap: var(--spacing-sm);
     padding: var(--spacing-xs) 0;
}
 .date-filter-button, .calendar-button {
     padding: var(--spacing-sm) var(--spacing-md);
     border-radius: var(--border-radius-pill);
     background-color: transparent;
     color: var(--text-muted-color);
     border: 1px solid var(--border-color);
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 500;
     transition: all var(--transition-speed) var(--transition-ease);
     position: relative;
}
 .date-filter-button:hover, .calendar-button:hover {
     background-color: var(--border-color);
     color: var(--text-color);
     border-color: var(--border-color);
}
 .date-filter-button.active, .calendar-button.active {
     background-color: var(--primary-color);
     color: var(--text-color-light);
     border-color: var(--primary-color);
     font-weight: 600;
}
 .date-filter-button.has-due-tasks::after {
     content: '';
     position: absolute;
     bottom: 4px;
     left: 50%;
     transform: translateX(-50%);
     width: 5px;
     height: 5px;
     background-color: var(--primary-color-light);
     border-radius: 50%;
     box-shadow: var(--shadow-sm);
}
 .date-filter-button.active.has-due-tasks::after {
     background-color: var(--text-color-light);
     opacity: 0.8;
}
 .calendar-button {
     font-style: italic;
}
/* ======================================================================== */
/* General Buttons & Loader */
/* ======================================================================== */
 .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--spacing-sm) var(--spacing-lg);
     border: 1px solid transparent;
     border-radius: var(--border-radius-large);
     font-family: inherit;
     font-size: 0.95rem;
     font-weight: 500;
     cursor: pointer;
     transition: all var(--transition-speed) var(--transition-ease);
     white-space: nowrap;
     position: relative;
}
 .button:focus-visible {
     outline: none;
     box-shadow: var(--shadow-focus);
     z-index: 1;
}
 .button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
}
 .button.primary {
     background-color: var(--primary-color);
     color: var(--text-color-light);
     border-color: var(--primary-color);
}
 .button.primary:hover:not(:disabled) {
     background-color: var(--primary-color-dark);
     border-color: var(--primary-color-dark);
     box-shadow: var(--shadow-sm);
}
 .button.secondary {
     background-color: var(--container-bg);
     color: var(--text-color);
     border-color: var(--input-border-color);
}
 .button.secondary:hover:not(:disabled) {
     background-color: var(--body-bg);
     border-color: var(--text-muted-color);
}
 .button.danger {
     background-color: var(--danger-color);
     color: var(--text-color-light);
     border-color: var(--danger-color);
}
 .button.danger:hover:not(:disabled) {
     background-color: var(--danger-color-dark);
     border-color: var(--danger-color-dark);
     box-shadow: var(--shadow-sm);
}
 .icon-button {
     padding: var(--spacing-sm);
     background-color: transparent;
     border-radius: var(--border-radius-pill);
     line-height: 0;
     border: none;
}
 .icon-button svg {
     width: 20px;
     height: 20px;
     fill: currentColor;
}
 .icon-button:hover {
     background-color: rgba(0, 0, 0, 0.05);
}
 .icon-text-button {
     gap: var(--spacing-sm);
}
 .icon-text-button svg {
     width: 18px;
     height: 18px;
     fill: currentColor;
     flex-shrink: 0;
}
 .button.small {
     font-size: 0.875rem;
     padding: var(--spacing-xs) var(--spacing-md);
     border-radius: var(--border-radius-base);
}
 .button.very-small {
     font-size: 0.75rem;
     padding: var(--spacing-xs) var(--spacing-sm);
     border-radius: var(--border-radius-base);
}
 .icon-button.small svg {
     width: 16px;
     height: 16px;
}
 .icon-button.very-small {
     padding: var(--spacing-xs);
}
 .icon-button.very-small svg {
     width: 14px;
     height: 14px;
}
 .button-loader {
     display: inline-block;
     width: 1em;
     height: 1em;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     border-top-color: var(--text-color-light);
     animation: spin 1s ease-in-out infinite;
     margin-left: var(--spacing-sm);
     vertical-align: middle;
}
 @keyframes spin {
     to {
         transform: rotate(360deg);
    }
}
/* ======================================================================== */
/* Main Content Area: Add Task, Sticky Note, Task List */
/* ======================================================================== */
/* --- Add Task Form (Merged Input/Button Look) --- */
 #add-task-form {
     display: flex;
     gap: 0;
    /* No gap, container handles spacing */
     margin-top: var(--spacing-lg);
     margin-bottom: var(--spacing-sm);
     align-items: stretch;
}
/* Container Styles */
 .input-with-button-container {
     display: flex;
     align-items: center;
     background-color: var(--input-bg);
     border: 1px solid var(--input-border-color);
     border-radius: var(--border-radius-large);
     padding-left: var(--spacing-md);
     padding-right: var(--spacing-xs);
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
     box-shadow: var(--shadow-inner);
     transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
     flex-grow: 1;
}
/* Input Reset */
 #new-task-title {
     flex-grow: 1;
     min-width: 0;
     height: auto;
    /* Adjust vertical padding to align roughly with button */
     padding-top: calc(var(--spacing-sm) + 2px);
     padding-bottom: calc(var(--spacing-sm) + 2px);
     padding-left: 0;
     padding-right: var(--spacing-sm);
     border: none;
     background: transparent;
     box-shadow: none;
     border-radius: 0;
     font-size: 1rem;
     font-family: inherit;
     color: var(--text-color);
     outline: none;
     line-height: 1.5;
}
 #new-task-title::placeholder {
     color: var(--text-placeholder-color);
     opacity: 1;
     font-style: italic;
}
/* Merged Button Style (+ Add Text) */
 #add-task-button.add-task-merged-button {
    /* Be specific */
    /* Inherits .button.primary.icon-text-button */
     flex-shrink: 0;
    /* Adjust padding slightly */
     padding: var(--spacing-sm) var(--spacing-md);
     margin: 0;
    /* Remove potential default button margin */
    /* Match container rounding if desired, or keep default */
     border-radius: var(--border-radius-large);
     height: auto;
    /* Let content define height */
    /* Ensure loader aligns */
     line-height: normal;
    /* Override potential icon-button line-height */
}
 #add-task-button.add-task-merged-button:hover:not(:disabled) {
     background-color: var(--primary-color-dark);
     box-shadow: var(--shadow-sm);
}
 #add-task-button.add-task-merged-button .button-loader {
     margin-left: var(--spacing-sm);
    /* Ensure space after text */
}
 #add-task-button.add-task-merged-button:disabled .button-loader {
     opacity: 1;
}
/* Focus state for the container */
 .input-with-button-container:focus-within {
     border-color: var(--primary-color);
     box-shadow: var(--shadow-focus), var(--shadow-inner);
}
/* Remove focus from input itself */
 #new-task-title:focus {
     box-shadow: none;
     border-color: transparent;
}
/* Keyboard focus on button */
 #add-task-button.add-task-merged-button:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 2px var(--text-color-light);
}
/* Smart date feedback text */
 .smart-date-feedback {
     font-size: 0.8rem;
     color: var(--text-muted-color);
     margin-left: 0;
     margin-top: var(--spacing-xs);
     height: 1.2em;
     text-align: left;
}
/* --- Sticky Note Area --- */
 #sticky-note-area {
     margin-bottom: var(--spacing-lg);
     position: relative;
}
 #sticky-note-content {
     display: block;
     width: 100%;
     min-height: 80px;
     max-height: 150px;
     padding: var(--spacing-md);
     border: none;
     resize: vertical;
     outline: none;
     background-color: var(--sticky-note-bg);
     color: var(--sticky-note-text);
     border-radius: var(--border-radius-large);
     box-shadow: var(--shadow-sm);
     font-family: inherit;
     font-size: 0.95rem;
     line-height: 1.5;
     transition: box-shadow var(--transition-speed) var(--transition-ease);
}
 #sticky-note-content:focus {
     box-shadow: var(--shadow-md), 0 0 0 2px rgba(245, 158, 11, 0.3);
}
 #sticky-note-content::placeholder {
     color: rgba(113, 63, 18, 0.5);
     font-style: italic;
}
 .sticky-note-status {
     position: absolute;
     bottom: var(--spacing-sm);
     right: var(--spacing-md);
     font-size: 0.75rem;
     color: var(--text-muted-color);
     background-color: rgba(255,255,255,0.7);
     padding: 2px 6px;
     border-radius: var(--border-radius-pill);
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--transition-speed) var(--transition-ease), visibility 0s var(--transition-speed) linear;
}
 .sticky-note-status.visible {
     opacity: 1;
     visibility: visible;
     transition-delay: 0s;
}
/* --- Task List & Items --- */
 #task-list {
     margin-top: var(--spacing-lg);
}
 .task-item {
     display: flex;
     align-items: center;
     padding: var(--spacing-md);
     border-bottom: 1px solid var(--border-color);
     background-color: var(--container-bg);
     border-radius: var(--border-radius-base);
     border-left: 4px solid var(--border-color);
     margin-left: -4px;
     padding-left: calc(var(--spacing-md) + 4px);
     position: relative;
     transition: background-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease), border-left-color var(--transition-speed) var(--transition-ease), opacity 0.5s ease;
}
 .task-item:last-child {
     border-bottom: none;
}
 .task-item:not(.task-status-canceled):hover {
     background-color: var(--body-bg);
}
 .task-item.sortable-ghost {
     opacity: 0.4;
     background-color: var(--primary-color-light);
     border-radius: var(--border-radius-large);
}
 .task-item.sortable-chosen {
     cursor: grabbing;
     box-shadow: var(--shadow-lg);
     background-color: var(--container-bg);
     border-radius: var(--border-radius-large);
}
 .task-item.done-animation {
     opacity: 0;
     transform: scale(0.95);
}
 .drag-handle {
     cursor: grab;
     padding: var(--spacing-sm) var(--spacing-sm);
     margin-right: var(--spacing-sm);
     color: var(--text-muted-color);
     font-size: 3rem;
     line-height: 0.5;
     opacity: 0.4;
     transition: opacity var(--transition-speed) var(--transition-ease);
}
 .task-item:hover .drag-handle {
     opacity: 1;
}
 .drag-handle::before {
     content: '⠿';
}
 .task-content {
     flex-grow: 1;
     min-width: 0;
}
 .task-line-1, .task-line-2 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: var(--spacing-md);
}
 .task-line-2 {
     margin-top: var(--spacing-xs);
}
 .task-title {
     font-weight: 500;
     color: var(--text-color);
     text-decoration: none;
     transition: color 0.2s ease, text-decoration 0.2s ease;
     flex-grow: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-right: var(--spacing-sm);
}
 .task-description {
     color: var(--text-muted-color);
     font-size: 0.875rem;
     flex-grow: 1;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
}
 .task-meta {
     display: flex;
     align-items: center;
     gap: var(--spacing-md);
     flex-shrink: 0;
}
 .due-date {
     font-size: 0.8rem;
     color: var(--text-muted-color);
     white-space: nowrap;
}
 .status-badge {
     padding: 2px var(--spacing-sm);
     font-size: 0.75rem;
     font-weight: 500;
     border-radius: var(--border-radius-pill);
     white-space: nowrap;
     border: 1px solid transparent;
     vertical-align: middle;
}
 .priority-dots {
     display: flex;
     flex-shrink: 0;
}
 .priority-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     margin-left: 4px;
}
 .priority-low .priority-dot:nth-child(1) {
     background-color: var(--priority-low-color);
}
 .priority-low .priority-dot:nth-child(n+2) {
     background-color: transparent;
}
 .priority-medium .priority-dot:nth-child(1), .priority-medium .priority-dot:nth-child(2) {
     background-color: var(--priority-medium-color-dot);
}
 .priority-medium .priority-dot:nth-child(3) {
     background-color: transparent;
}
 .priority-high .priority-dot {
     background-color: var(--priority-high-color-dot);
}
/* Task Item Status Styling (Refactored) */
 .task-item.task-status-todo {
     border-left-color: var(--status-todo-color);
}
 .task-item.task-status-todo .status-badge {
     background-color: var(--status-todo-bg);
     color: var(--status-todo-color);
     border-color: var(--status-todo-bg);
}
 .task-item.task-status-inprogress {
     border-left-color: var(--status-inprogress-color);
}
 .task-item.task-status-inprogress .status-badge {
     background-color: var(--status-inprogress-bg);
     border-color: var(--status-inprogress-bg);
     color: var(--status-inprogress-color);
     position: relative;
     padding-right: calc(var(--spacing-sm) + 2.1em);
}
 .task-item.task-status-inprogress .status-badge::after {
     content: '.';
     position: absolute;
     right: var(--spacing-sm);
     top: 30%;
     transform: translateY(-50%);
     font-weight: bold;
     font-size: 1.8em;
     line-height: 1;
     color: var(--status-inprogress-color);
     animation: ellipsis 1.4s infinite steps(3, start);
}
 @keyframes ellipsis {
     0% {
         content: '.';
    }
     33% {
         content: '..';
    }
     66% {
         content: '...';
    }
}
 .task-item.task-status-inreview {
     border-left-color: var(--status-inreview-color);
}
 .task-item.task-status-inreview .status-badge {
     background-color: var(--status-inreview-bg);
     color: var(--status-inreview-color);
     border-color: var(--status-inreview-bg);
}
 .task-item.task-status-done {
     border-left-color: var(--status-done-color);
     border-bottom-color: var(--status-done-color);
     background-color: var(--status-done-bg);
}
 .task-item.task-status-done .task-title {
     color: var(--text-muted-color);
}
 .task-item.task-status-done .status-badge {
     color: var(--status-done-bg);
     background-color: var(--status-done-color);
     border-color: var(--status-done-bg);
}
 .task-item.task-status-done:hover {
     background-color: color-mix(in srgb, var(--status-done-bg) 95%, #000000);
}
 .task-item.task-status-canceled {
     border-left-color: var(--status-canceled-color);
     background-color: var(--status-canceled-bg);
     opacity: 0.6;
}
 .task-item.task-status-canceled .task-title {
     color: var(--text-muted-color);
     text-decoration: line-through;
}
 .task-item.task-status-canceled .task-description {
     color: var(--text-muted-color);
}
 .task-item.task-status-canceled .status-badge {
     background-color: var(--status-canceled-color);
     color: var(--text-color-light);
     border-color: var(--status-canceled-color);
}
 .task-item.task-status-canceled:hover {
     background-color: color-mix(in srgb, var(--status-canceled-bg) 95%, #000000);
}
/* Dynamic Keyword Style (Dot Indicator) */
 .keyword-indicator-dot {
     display: inline-block;
     width: 9px;
     height: 9px;
     border-radius: 50%;
     margin-right: var(--spacing-sm);
     vertical-align: middle;
     background-color: transparent;
     flex-shrink: 0;
     transition: background-color var(--transition-speed) var(--transition-ease);
}
 .task-item.has-dynamic-keyword-style .keyword-indicator-dot {
     background-color: var(--dynamic-keyword-color, transparent);
     box-shadow: var(--shadow-sm);
}
 .task-item .task-line-1 {
     align-items: center;
}
/* Loading Placeholder */
 .task-item.placeholder {
     border-left-color: transparent;
     margin-left: 0;
     padding-left: var(--spacing-md);
}
 .placeholder .drag-handle-placeholder, .placeholder .text-placeholder {
     background-color: var(--border-color);
     border-radius: var(--border-radius-base);
     animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
 @keyframes pulse {
     0%, 100% {
         opacity: 1;
    }
     50% {
         opacity: 0.5;
    }
}
 .placeholder .drag-handle-placeholder {
     width: 20px;
     height: 30px;
     margin-right: calc(var(--spacing-sm) + var(--spacing-md));
     opacity: 0.3;
}
 .placeholder .task-content-placeholder {
     flex-grow: 1;
}
 .placeholder .line1, .placeholder .line2 {
     display: flex;
     height: 0.8em;
     margin-bottom: var(--spacing-sm);
}
 .placeholder .line2 {
     height: 0.7em;
     margin-bottom: 0;
}
 .placeholder .text-placeholder.short {
     width: 30%;
}
 .placeholder .text-placeholder.medium {
     width: 50%;
}
 .placeholder .text-placeholder.long {
     width: 80%;
}
/* ======================================================================== */
/* Modals & Forms */
/* ======================================================================== */
/* (Modal, Form, Priority Slider, Recurring, Settings Modal styles remain the same as previous full CSS) */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--spacing-md);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--transition-speed) var(--transition-ease), visibility 0s var(--transition-speed);
}
 .modal-overlay.visible {
     opacity: 1;
     visibility: visible;
     transition-delay: 0s;
}
 .modal-content {
     background-color: var(--container-bg);
     border-radius: var(--border-radius-xl);
     box-shadow: var(--shadow-lg);
     padding: var(--spacing-xl);
     width: 100%;
     max-width: 600px;
     position: relative;
     max-height: 90vh;
     overflow-y: auto;
     transform: scale(0.95);
     transition: transform var(--transition-speed) var(--transition-ease), opacity var(--transition-speed) var(--transition-ease);
}
 .modal-overlay.visible .modal-content {
     transform: scale(1);
}
 .modal-close-button {
     position: absolute;
     top: var(--spacing-md);
     right: var(--spacing-md);
     font-size: 1.8rem;
     color: var(--text-muted-color);
     background: none;
     border: none;
     padding: 0 var(--spacing-sm);
     line-height: 1;
     cursor: pointer;
}
 .modal-close-button:hover {
     color: var(--text-color);
}
 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: var(--spacing-lg);
     border-bottom: 1px solid var(--border-color);
     padding-bottom: var(--spacing-md);
}
 .modal-header h2 {
     margin-bottom: 0;
}
 #recurring-modal .modal-content {
     max-width: 700px;
}
 #settings-modal .modal-content {
     max-width: 550px;
}
 .form-style .form-group {
     margin-bottom: var(--spacing-lg);
}
 .form-style label {
     display: block;
     font-weight: 500;
     margin-bottom: var(--spacing-sm);
     font-size: 0.9rem;
}
 .form-style input[type="text"], .form-style input[type="date"], .form-style input[type="number"], .form-style input[type="color"], .form-style textarea, .form-style select {
     width: 100%;
     padding: var(--spacing-sm) var(--spacing-md);
     border: 1px solid var(--input-border-color);
     border-radius: var(--border-radius-large);
     font-size: 1rem;
     font-family: inherit;
     background-color: var(--input-bg);
     transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
}
 .form-style input:focus, .form-style textarea:focus, .form-style select:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: var(--shadow-focus);
}
 .form-style textarea {
     resize: vertical;
     min-height: 80px;
}
 .form-style select {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a0aec0'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right var(--spacing-md) center;
     background-size: 1.2em 1.2em;
     padding-right: calc(var(--spacing-md) * 2 + 1.2em);
}
 .form-group.readonly span {
     display: block;
     padding: var(--spacing-sm) 0;
     color: var(--text-muted-color);
     font-size: 0.9rem;
}
 .form-actions {
     margin-top: var(--spacing-xl);
     display: flex;
     justify-content: flex-end;
     gap: var(--spacing-md);
     padding-top: var(--spacing-lg);
     border-top: 1px solid var(--border-color);
}
 .form-actions .modal-cancel-button, #cancel-recurring-edit-btn {
     order: -1;
     margin-right: auto;
}
 .priority-slider-container {
     padding: var(--spacing-sm) 0;
     position: relative;
}
 .priority-slider-input {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
}
 .custom-slider.temperature-style {
     position: relative;
     width: 100%;
     height: 10px;
     cursor: pointer;
     margin-top: var(--spacing-sm);
     margin-bottom: var(--spacing-xs);
}
 .slider-track {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to right, var(--priority-low-color), var(--priority-medium-color-slider) 50%, var(--priority-high-color-slider) 100%);
     border-radius: var(--border-radius-pill);
}
 .slider-thumb {
     position: absolute;
     top: 50%;
     left: 0;
     width: 20px;
     height: 20px;
     background-color: var(--container-bg);
     border-radius: 50%;
     border: 1px solid var(--border-color);
     box-shadow: var(--shadow-md);
     transform: translateY(-50%);
     transition: left 0.05s linear;
     pointer-events: none;
     z-index: 1;
}
 .priority-slider-input:focus + .custom-slider .slider-track {
     box-shadow: var(--shadow-focus);
}
 .priority-slider-input:focus + .custom-slider .slider-thumb {
     border-color: var(--primary-color);
     box-shadow: var(--shadow-md), var(--shadow-focus);
}
 .priority-labels {
     display: flex;
     justify-content: space-between;
     font-size: 0.8rem;
     color: var(--text-muted-color);
     padding: 0 2px;
     margin-top: var(--spacing-sm);
}
 .priority-value-text {
     display: block;
     text-align: center;
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--text-muted-color);
     margin-top: var(--spacing-sm);
     height: 1.2em;
}
 #recurring-task-form {
     margin-top: var(--spacing-lg);
     border: 1px solid var(--border-color);
     padding: var(--spacing-lg);
     border-radius: var(--border-radius-large);
     background-color: var(--body-bg);
}
 #recurring-task-form .form-actions {
     border-top: none;
     padding-top: 0;
     margin-top: var(--spacing-lg);
}
 .days-selector .checkbox-group {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-md);
}
 .days-selector label {
     display: inline-flex;
     align-items: center;
     margin-bottom: 0;
     font-weight: normal;
     font-size: 0.9rem;
}
 .days-selector input[type="checkbox"] {
     margin-right: var(--spacing-sm);
     width: auto;
     height: 1em;
     width: 1em;
     accent-color: var(--primary-color);
}
 #recurring-task-list {
     margin-top: var(--spacing-lg);
     max-height: 300px;
     overflow-y: auto;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-large);
}
 .recurring-list-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--spacing-md);
     border-bottom: 1px solid var(--border-color);
}
 .recurring-list-item:last-child {
     border-bottom: none;
}
 .recurring-list-item .item-content {
     flex-grow: 1;
     margin-right: var(--spacing-md);
}
 .recurring-list-item .item-content strong {
     font-weight: 500;
}
 .recurring-list-item .item-content small {
     font-size: 0.85rem;
     color: var(--text-muted-color);
     display: block;
}
 .recurring-list-item .item-actions {
     display: flex;
     gap: var(--spacing-sm);
}
 .settings-section {
     margin-bottom: var(--spacing-xl);
}
 .settings-section h3 {
     margin-bottom: var(--spacing-xs);
     font-size: 1.1rem;
}
 .settings-section p {
     font-size: 0.9rem;
     color: var(--text-muted-color);
     margin-bottom: var(--spacing-lg);
}
 .keyword-form {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-md);
     align-items: flex-end;
     background-color: var(--body-bg);
     padding: var(--spacing-md);
     border-radius: var(--border-radius-large);
     margin-bottom: var(--spacing-lg);
}
 .keyword-form .form-group {
     margin-bottom: 0;
     flex-grow: 1;
}
 .keyword-form label {
     font-size: 0.8rem;
}
 .keyword-form button {
     flex-shrink: 0;
}
 #keyword-rules-list {
     margin-top: var(--spacing-md);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-large);
     max-height: 200px;
     overflow-y: auto;
}
 #keyword-rules-list li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: 0.9rem;
     border-bottom: 1px solid var(--border-color);
}
 #keyword-rules-list li:last-child {
     border-bottom: none;
}
 #keyword-rules-list li span {
     margin-right: var(--spacing-md);
     display: inline-flex;
     align-items: center;
}
 #keyword-rules-list li strong {
     font-weight: 500;
}
 #keyword-color-input {
     padding: var(--spacing-xs);
     height: auto;
     min-height: 38px;
     border-radius: var(--border-radius-large);
     cursor: pointer;
     width: 60px;
     flex-grow: 0;
     border: 1px solid var(--input-border-color);
     background-color: var(--input-bg);
}
 #keyword-color-input:focus-visible {
     outline: none;
     box-shadow: var(--shadow-focus);
}
 .keyword-color-swatch {
     display: inline-block;
     width: 1.1em;
     height: 1.1em;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-base);
     margin-left: var(--spacing-sm);
     vertical-align: middle;
     box-shadow: var(--shadow-inner);
}
/* Status Toggle Buttons */
 .status-button-group {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-sm);
}
 .status-toggle-button {
     flex-grow: 1;
     flex-basis: auto;
     min-width: 80px;
     padding: var(--spacing-sm) var(--spacing-md);
     border: 1px solid var(--input-border-color);
     background-color: var(--container-bg);
     color: var(--text-muted-color);
     cursor: pointer;
     font-size: 0.85rem;
     font-weight: 500;
     text-align: center;
     border-radius: var(--border-radius-large);
     transition: all var(--transition-speed) var(--transition-ease);
     appearance: none;
}
 .status-toggle-button:hover:not(.active) {
     background-color: var(--body-bg);
     border-color: var(--text-muted-color);
     color: var(--text-color);
}
 .status-toggle-button.active, .status-toggle-button[aria-checked="true"] {
     color: var(--text-color-light);
     border-width: 1px;
     box-shadow: var(--shadow-inner);
     font-weight: 600;
}
 .status-toggle-button.status-todo.active, .status-toggle-button.status-todo[aria-checked="true"] {
     background-color: var(--status-todo-color);
     border-color: var(--status-todo-color);
     color: var(--text-color);
}
 .status-toggle-button.status-inprogress.active, .status-toggle-button.status-inprogress[aria-checked="true"] {
     background-color: var(--status-inprogress-color);
     border-color: var(--status-inprogress-color);
}
 .status-toggle-button.status-inreview.active, .status-toggle-button.status-inreview[aria-checked="true"] {
     background-color: var(--status-inreview-color);
     border-color: var(--status-inreview-color);
}
 .status-toggle-button.status-done.active, .status-toggle-button.status-done[aria-checked="true"] {
     background-color: var(--status-done-color);
     border-color: var(--status-done-color);
}
 .status-toggle-button.status-canceled.active, .status-toggle-button.status-canceled[aria-checked="true"] {
     background-color: var(--status-canceled-color);
     border-color: var(--status-canceled-color);
     color: var(--text-color);
}
 .status-toggle-button:focus-visible {
     outline: none;
     box-shadow: var(--shadow-focus);
     z-index: 1;
}
 .status-toggle-button:disabled {
     opacity: 0.7;
     cursor: not-allowed;
     background-color: var(--border-color);
}
 #edit-task-status-value {
     display: none;
}
/* ======================================================================== */
/* Utility & Loading */
/* ======================================================================== */
 .loading-indicator {
     text-align: center;
     padding: var(--spacing-xl);
     color: var(--text-muted-color);
     font-style: italic;
}
 .empty-list-message {
     text-align: center;
     padding: var(--spacing-lg);
     color: var(--text-muted-color);
     font-style: italic;
}
/* ======================================================================== */
/* Responsiveness */
/* ======================================================================== */
 @media (max-width: 768px) {
     body {
         padding: var(--spacing-md) var(--spacing-sm);
    }
     .app-container {
         border-radius: var(--border-radius-large);
    }
     .app-header, .app-main, .app-footer {
         padding: var(--spacing-md);
    }
     h1 {
         font-size: 1.6rem;
    }
     #add-task-form {
         flex-direction: column;
         align-items: stretch;
    }
     .smart-date-feedback {
         text-align: center;
         margin-left: 0;
    }
     .task-item {
         padding: var(--spacing-md) var(--spacing-sm);
         align-items: flex-start;
         margin-left: 0;
         padding-left: var(--spacing-sm);
         border-left-width: 4px;
         margin-left: -4px;
         padding-left: calc(var(--spacing-sm) + 4px);
    }
     .drag-handle {
         padding: var(--spacing-sm);
         margin-right: var(--spacing-sm);
         padding-top: calc(var(--spacing-sm) + 2px);
    }
     .task-line-1, .task-line-2 {
         flex-direction: column;
         align-items: flex-start;
         gap: var(--spacing-xs);
    }
     .task-line-1 .priority-dots, .task-line-2 .task-meta {
         margin-left: 0;
         width: 100%;
         margin-top: var(--spacing-xs);
    }
     .task-line-2 .task-meta {
         justify-content: space-between;
         flex-direction: row-reverse;
         align-items: center;
    }
     .task-description {
         -webkit-line-clamp: 3;
         margin-top: var(--spacing-xs);
    }
     .modal-content {
         padding: var(--spacing-lg);
         max-width: 95%;
         border-radius: var(--border-radius-large);
    }
     .form-actions {
         flex-direction: column-reverse;
         gap: var(--spacing-sm);
         align-items: stretch;
    }
     .form-actions .modal-cancel-button {
         margin-right: 0;
    }
     .status-button-group {
         justify-content: center;
    }
}