:root {
    /* Dark Mode (Default) — OKLCH colour space */
    --bg-gradient: linear-gradient(
        -45deg,
        oklch(0.232 0.026 226.4),
        oklch(0.332 0.036 222.2),
        oklch(0.421 0.052 228.2),
        oklch(0.230 0 0)
    );
    --glass-bg: oklch(0.280 0 0 / 0.4);
    --glass-border: oklch(1 0 0 / 0.1);
    --text-primary: oklch(0.99 0.01 100);
    --text-secondary: oklch(0.738 0 0);
    --card-bg: oklch(1 0 0 / 0.05);
    --card-linked-bg: oklch(0.623 0.188 259.8 / 0.2);
    --card-archived-bg: oklch(0 0 0 / 0.3);
    --card-important-bg: oklch(0.900 0.160 95 / 0.15);
    --card-important-border: oklch(0.900 0.160 95 / 0.5);
    --accent-blue: oklch(0.623 0.188 259.8);
    --accent-red: oklch(0.637 0.208 25.3);
    --accent-green: oklch(0.723 0.192 149.6);
    --accent-yellow: oklch(0.795 0.162 86.0);
    --accent-orange: oklch(0.705 0.187 47.6);
    --accent-purple: oklch(0.627 0.233 303.9);
    --accent-pink: oklch(0.656 0.212 354.3);
    --on-accent: oklch(0.99 0.01 100);
    --on-accent-dark: oklch(0.22 0.03 260);
    --radius: 18px;
    --shadow: 0 4px 30px oklch(0 0 0 / 0.3);
    --dropdown-bg: oklch(0.218 0 0);
    --dropdown-bg-glass: oklch(0.210 0 0 / 0.98);
    --input-bg: oklch(0 0 0 / 0.3);
    --input-border: oklch(1 0 0 / 0.1);
    --input-text: oklch(0.99 0.01 100);
}

[data-theme="light"] {
    --bg-gradient: linear-gradient(
        -45deg,
        oklch(1 0 0),
        oklch(0.960 0 0),
        oklch(0.930 0 0),
        oklch(1 0 0)
    );
    --glass-bg: oklch(1 0 0 / 0.85);
    --glass-border: oklch(0 0 0 / 0.1);
    --text-primary: oklch(0.278 0.030 256.8);
    --text-secondary: oklch(0.446 0.026 256.8);
    --card-bg: oklch(1 0 0);
    --card-linked-bg: oklch(0.623 0.188 259.8 / 0.15);
    --card-archived-bg: oklch(0 0 0 / 0.03);
    --card-important-bg: oklch(0.900 0.160 95 / 0.15);
    --card-important-border: oklch(0.840 0.150 85 / 0.5);
    --shadow: 0 4px 20px oklch(0 0 0 / 0.08);
    --dropdown-bg: oklch(1 0 0);
    --dropdown-bg-glass: oklch(1 0 0 / 0.98);
    --input-bg: oklch(0.967 0.003 264.5);
    --input-border: oklch(0.872 0.009 258.3);
    --input-text: oklch(0.278 0.030 256.8);
}

[data-theme="oled"] {
    --bg-gradient: oklch(0 0 0);
    --glass-bg: oklch(0.220 0 0 / 0.6);
    --glass-border: oklch(1 0 0 / 0.15);
    --text-primary: oklch(0.99 0.01 100);
    --text-secondary: oklch(0.792 0 0);
    --card-bg: oklch(0 0 0);
    --card-linked-bg: oklch(0.623 0.188 259.8 / 0.2);
    --card-archived-bg: oklch(1 0 0 / 0.05);
    --card-important-bg: oklch(0.900 0.160 95 / 0.1);
    --card-important-border: oklch(0.900 0.160 95 / 0.5);
    --shadow: none;
    --dropdown-bg: oklch(0 0 0);
    --dropdown-bg-glass: oklch(0 0 0);
    --input-bg: oklch(0.180 0 0);
    --input-border: oklch(0.320 0 0);
    --input-text: oklch(0.99 0.01 100);
}

[data-theme="oled"] body {
    background: oklch(0 0 0);
    animation: none;
}

/* ===================================================================
   iOS STATUS BAR BLACK BOX
   ===================================================================
   With viewport-fit=cover + black-translucent status bar, iOS expands
   the app behind the notch. #ios-status-bar-bg is a fixed, full-width
   div positioned at the very top of the screen. It is always solid
   black, so iOS's "Website Tinting" samples BLACK pixels and keeps
   the status bar (clock, battery, wifi) black with white text.
   env(safe-area-inset-top) gives us the exact pixel height of the
   status bar on any iPhone (notched or Dynamic Island).
   =================================================================== */
/* ios-status-bar-bg removed as it was causing layout issues on some browsers. 
   Safe area is now handled via body padding. */
#ios-status-bar-bg {
    display: none !important;
}

/* app content sits below the status bar naturally via body padding-top */

/* Ensure the login overlay fills correctly */
#login-overlay {
    box-sizing: border-box;
}

/* ===================================================================
   LOADING ANIMATION
   =================================================================== */
:root {
    --loader-duration: 2s;
    --loader-path-length: 157px;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: oklch(0 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity 0.5s ease, visibility 0.5s;
}

#loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.premium-loader {
    overflow: visible;
    width: 100px;
    height: 150px;
    filter: drop-shadow(0 0 15px oklch(0.623 0.188 259.8 / 0.4));
}

.premium-loader g {
    animation: slide var(--loader-duration) linear infinite;
}

.premium-loader g:nth-child(2) {
    animation-delay: calc(var(--loader-duration) / -4);
}

.premium-loader g:nth-child(2) path {
    animation-delay: calc(var(--loader-duration) / -4);
    stroke-dasharray: 0px calc(var(--loader-path-length) + 1px);
    stroke-dashoffset: 1px;
}

.premium-loader path {
    stroke: url(#loader-gradient);
    stroke-width: 20px;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 0 var(--loader-path-length);
    stroke-dashoffset: 0;
    animation: escalade var(--loader-duration) cubic-bezier(0.8, 0, 0.2, 1) infinite;
}

/* Login Loader Specifics */
.login-loader {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    opacity: 0.8;
}

.login-loader .premium-loader {
    width: 60px;
    height: 90px;
}

@keyframes slide {
    0% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(-50px);
    }
}

@keyframes escalade {
    0% {
        stroke-dasharray: var(--loader-path-length) var(--loader-path-length);
        stroke-dashoffset: calc(-1 * (var(--loader-path-length) - 1px));
    }

    50% {
        stroke-dasharray: var(--loader-path-length) var(--loader-path-length);
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 0 var(--loader-path-length);
        stroke-dashoffset: 0;
    }
}

/* ===== FANCY THEME: Futuristic Glassmorphism ===== */
[data-theme="fancy"] {
    --bg-gradient: linear-gradient(
        135deg,
        oklch(0 0 0) 0%,
        oklch(0.180 0.060 300) 20%,
        oklch(0.220 0.040 250) 40%,
        oklch(0.200 0.080 310) 60%,
        oklch(0.220 0.040 250) 80%,
        oklch(0 0 0) 100%
    );
    --glass-bg: oklch(1 0 0 / 0.06);
    --glass-border: oklch(1 0 0 / 0.12);
    --text-primary: oklch(0.929 0.014 295.3);
    --text-secondary: oklch(0.641 0.030 287.8);
    --card-bg: oklch(1 0 0 / 0.04);
    --card-linked-bg: oklch(0.580 0.200 280 / 0.15);
    --card-archived-bg: oklch(0 0 0 / 0.35);
    --card-important-bg: oklch(0.860 0.150 85 / 0.12);
    --card-important-border: oklch(0.860 0.150 85 / 0.4);
    --accent-blue: oklch(0.680 0.158 276.9);
    --accent-red: oklch(0.711 0.166 22.2);
    --accent-green: oklch(0.723 0.192 149.6);
    --accent-yellow: oklch(0.795 0.162 86.0);
    --accent-orange: oklch(0.705 0.187 47.6);
    --accent-purple: oklch(0.627 0.233 303.9);
    --accent-pink: oklch(0.656 0.212 354.3);
    /* --radius inherited from :root (shared layout); fancy only changes colours */
    --shadow: 0 8px 40px oklch(0 0 0 / 0.5), 0 0 80px oklch(0.580 0.200 280 / 0.05);
    --dropdown-bg: oklch(0.180 0.050 300 / 0.95);
    --dropdown-bg-glass: oklch(0.180 0.050 300 / 0.92);
    --input-bg: oklch(0 0 0 / 0.45);
    --input-border: oklch(1 0 0 / 0.1);
    --input-text: oklch(0.929 0.014 295.3);
    --fancy-glow-1: oklch(0.680 0.158 276.9 / 0.65);
    --fancy-glow-2: oklch(0.700 0.180 305 / 0.6);
    --fancy-glow-3: oklch(0.750 0.140 230 / 0.55);
    --fancy-speed-mult: 1;
}

#fancy-speed-control {
    display: none;
}

[data-theme="fancy"] #fancy-speed-control {
    display: flex !important;
}

/* Black failsafe behind everything in fancy mode — covers Safari overscroll / status bar gaps */
[data-theme="fancy"] html {
    background: oklch(0 0 0);
}

[data-theme="fancy"] body {
    background: var(--bg-gradient);
    background-size: 300% 300%;
    animation: fancyGradient calc(20s / var(--fancy-speed-mult)) ease infinite;
}

@keyframes fancyGradient {
    0% {
        background-position: 0% 0%;
    }

    25% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 50% 100%;
    }

    75% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* Animated Glowing Orbs (via pseudo-elements on body) */
[data-theme="fancy"] .fancy-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

[data-theme="fancy"] .fancy-orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--fancy-glow-1) 0%, transparent 80%);
    top: -10%;
    left: -5%;
    animation: fancyOrbDrift1 calc(8s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

[data-theme="fancy"] .fancy-orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--fancy-glow-2) 0%, transparent 80%);
    bottom: -15%;
    right: -8%;
    animation: fancyOrbDrift2 calc(10s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

[data-theme="fancy"] .fancy-orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--fancy-glow-3) 0%, transparent 80%);
    top: 40%;
    left: 50%;
    animation: fancyOrbDrift3 calc(6s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

@keyframes fancyOrbDrift1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(80px, 60px) scale(1.15);
    }

    100% {
        transform: translate(-30px, 100px) scale(0.95);
    }
}

@keyframes fancyOrbDrift2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-70px, -50px) scale(1.1);
    }

    100% {
        transform: translate(40px, -80px) scale(0.9);
    }
}

@keyframes fancyOrbDrift3 {
    0% {
        transform: translate(-50%, 0) scale(0.9);
    }

    50% {
        transform: translate(-30%, -40px) scale(1.1);
    }

    100% {
        transform: translate(-60%, 50px) scale(1);
    }
}

/* Mobile-Specific Orb & Gradient Dynamics */
@media (max-width: 600px) {
    [data-theme="fancy"] {
        background-size: 300% 300%;
        animation: fancyGradient calc(7s / var(--fancy-speed-mult)) ease infinite;
    }

    [data-theme="fancy"] .fancy-orb-1 {
        animation: fancyOrbDrift1Mobile calc(4s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
        width: 200px;
        height: 200px;
    }

    [data-theme="fancy"] .fancy-orb-2 {
        animation: fancyOrbDrift2Mobile calc(5s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
        width: 180px;
        height: 180px;
    }

    [data-theme="fancy"] .fancy-orb-3 {
        animation: fancyOrbDrift3Mobile calc(3s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
        width: 150px;
        height: 150px;
    }
}

@keyframes fancyOrbDrift1Mobile {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(120px, 100px) scale(1.3);
    }

    100% {
        transform: translate(-60px, 150px) scale(0.8);
    }
}

@keyframes fancyOrbDrift2Mobile {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-100px, -80px) scale(1.2);
    }

    100% {
        transform: translate(80px, -140px) scale(0.85);
    }
}

@keyframes fancyOrbDrift3Mobile {
    0% {
        transform: translate(-50%, 0) scale(0.9);
    }

    50% {
        transform: translate(-20%, -70px) scale(1.2);
    }

    100% {
        transform: translate(-80%, 90px) scale(0.95);
    }
}

/* Fancy Glass Panel Override (colours / blur only — layout is shared) */
[data-theme="fancy"] .glass-panel {
    background: oklch(0 0 0 / 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid oklch(1 0 0 / 0.1);
    box-shadow: 0 8px 32px oklch(0 0 0 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.06);
}

[data-theme="fancy"] .glass-panel::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, oklch(1 0 0 / 0.2), oklch(1 0 0 / 0.02), oklch(1 0 0 / 0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Fancy List Column */
[data-theme="fancy"] .list-column {
    background: oklch(0 0 0 / 0.32);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid oklch(1 0 0 / 0.25);
    box-shadow: 0 8px 40px oklch(0 0 0 / 0.3), inset 0 1px 0 oklch(1 0 0 / 0.05);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

/* Antigravity Hover: Lift & Glow */
[data-theme="fancy"] .task-card {
    background: oklch(1 0 0 / 0.04);
    border: 1px solid oklch(1 0 0 / 0.06);
    transition: box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

[data-theme="fancy"] .task-card:hover {
    background: oklch(1 0 0 / 0.08);
    border-color: oklch(0.680 0.158 276.9 / 0.3);
    box-shadow: 0 8px 25px oklch(0.580 0.200 280 / 0.15), 0 0 15px oklch(0.580 0.200 280 / 0.08);
}

/* Fancy Buttons Base Refinement (motion / glow only) */
[data-theme="fancy"] .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

[data-theme="fancy"] .btn:active {
    transform: scale(0.96) !important;
}

/* Fancy Buttons: Condensed Light Neon */
[data-theme="fancy"] .btn.primary {
    background: linear-gradient(135deg, oklch(0.680 0.158 276.9 / 0.8), oklch(0.700 0.180 305 / 0.8));
    background-size: 200% 200%;
    animation: neonShift 4s ease infinite;
    backdrop-filter: blur(8px);
    color: oklch(1 0 0);
    border: 1px solid oklch(1 0 0 / 0.2);
    box-shadow: 0 0 20px oklch(0.680 0.158 276.9 / 0.3),
        0 0 40px oklch(0.680 0.158 276.9 / 0.05),
        inset 0 0 12px oklch(1 0 0 / 0.2);
    text-shadow: 0 0 8px oklch(1 0 0 / 0.3);
}

/* Specific Glassmorphism for Add Task Button inside form (fancy colours only) */
[data-theme="fancy"] .add-task-form .btn.primary {
    background: oklch(1 0 0 / 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid oklch(0.680 0.158 276.9 / 0.4);
    color: var(--accent-blue);
}

[data-theme="fancy"] .add-task-form .btn.primary:hover {
    background: oklch(0.680 0.158 276.9 / 0.15);
    border-color: var(--accent-blue);
    color: oklch(1 0 0);
    box-shadow: 0 0 15px oklch(0.680 0.158 276.9 / 0.4);
}

[data-theme="fancy"] .btn.primary:hover {
    box-shadow: 0 0 35px oklch(0.680 0.158 276.9 / 0.6),
        0 0 15px oklch(0.680 0.158 276.9 / 0.4),
        inset 0 0 15px oklch(1 0 0 / 0.35);
    filter: brightness(1.1);
}

@keyframes neonShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

[data-theme="fancy"] .btn.secondary,
[data-theme="fancy"] #modal-add-image-btn {
    background: oklch(1 0 0 / 0.08);
    /* Translucent, no blur */
    border: 1px solid oklch(1 0 0 / 0.15);
    color: var(--text-primary);
    box-shadow: 0 4px 15px oklch(0 0 0 / 0.1),
        inset 0 1px 0 oklch(1 0 0 / 0.1);
}

[data-theme="fancy"] .btn.secondary:hover,
[data-theme="fancy"] #modal-add-image-btn:hover {
    background: oklch(1 0 0 / 0.15);
    border-color: oklch(0.680 0.158 276.9 / 0.35);
}

[data-theme="fancy"] .btn.danger {
    background: linear-gradient(135deg, oklch(0.715 0.165 22), var(--accent-red));
    box-shadow: 0 0 20px oklch(0.715 0.165 22 / 0.35),
        inset 0 0 10px oklch(1 0 0 / 0.15);
}

[data-theme="fancy"] .btn.danger:hover {
    box-shadow: 0 0 35px oklch(0.715 0.165 22 / 0.55),
        inset 0 0 15px oklch(1 0 0 / 0.2);
}

/* Fancy Menu Action Items */
[data-theme="fancy"] .menu-action-item {
    background: oklch(1 0 0 / 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid oklch(1 0 0 / 0.08);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05);
}

[data-theme="fancy"] .menu-action-item:hover {
    background: oklch(1 0 0 / 0.1);
    border-color: oklch(0.680 0.158 276.9 / 0.3);
    box-shadow: 0 6px 20px oklch(0 0 0 / 0.2),
        inset 0 1px 0 oklch(1 0 0 / 0.1);
}

/* Fancy Toggle Items */
[data-theme="fancy"] .dropdown-item-toggle {
    background: oklch(1 0 0 / 0.04);
    border: 1px solid oklch(1 0 0 / 0.08);
}

[data-theme="fancy"] .mode-btn.active {
    background: oklch(0.680 0.158 276.9 / 0.25);
    color: oklch(1 0 0);
    box-shadow: 0 0 15px oklch(0.680 0.158 276.9 / 0.2),
        inset 0 0 8px oklch(1 0 0 / 0.1);
    font-weight: 700;
}

[data-theme="fancy"] .toggle-group {
    background: oklch(0 0 0 / 0.4);
    border: 1px solid oklch(1 0 0 / 0.08);
    backdrop-filter: blur(8px);
}

/* Fancy Modal Override */
[data-theme="fancy"] .modal-overlay {
    background: oklch(0.120 0.040 300 / 0.8);
    backdrop-filter: blur(8px);
}

[data-theme="fancy"] .confirm-box {
    background: oklch(0.180 0.050 300 / 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid oklch(1 0 0 / 0.1);
    box-shadow: 0 25px 70px oklch(0 0 0 / 0.6), 0 0 40px oklch(0.580 0.200 280 / 0.08);
}

/* Fancy Input */
[data-theme="fancy"] .add-task-input {
    background: oklch(1 0 0 / 0.04);
    border: 1px solid oklch(1 0 0 / 0.08);
    color: var(--text-primary);
    transition: border-color 0.3s, box-shadow 0.3s;
}

[data-theme="fancy"] .add-task-input:focus {
    border-color: oklch(0.680 0.158 276.9 / 0.5);
    box-shadow: 0 0 15px oklch(0.680 0.158 276.9 / 0.15);
}

/* Fancy Scrollbar */
[data-theme="fancy"] .task-list::-webkit-scrollbar-thumb {
    background-color: oklch(0.680 0.158 276.9 / 0.3);
}

[data-theme="fancy"] .task-list::-webkit-scrollbar-track {
    background: oklch(1 0 0 / 0.02);
}

[data-theme="fancy"] .board-container::-webkit-scrollbar-thumb {
    background: oklch(0.680 0.158 276.9 / 0.3);
}

/* Fancy Checkbox */
[data-theme="fancy"] .task-checkbox {
    border-color: oklch(0.680 0.158 276.9 / 0.4);
}

[data-theme="fancy"] .task-checkbox:checked {
    border-color: var(--accent-blue);
}

[data-theme="fancy"] .task-checkbox::before {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
}

/* Fancy Toast */
[data-theme="fancy"] .toast {
    background: oklch(0.180 0.050 300 / 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid oklch(0.680 0.158 276.9 / 0.2);
    box-shadow: 0 10px 40px oklch(0 0 0 / 0.4), 0 0 20px oklch(0.580 0.200 280 / 0.1);
}

/* Fancy Login */
[data-theme="fancy"] #google-login-btn {
    background: oklch(1 0 0 / 0.06);
    border: 1px solid oklch(0.680 0.158 276.9 / 0.3);
    box-shadow: 0 0 25px oklch(0.680 0.158 276.9 / 0.3);
    animation: fancyGlowPulse 3s infinite alternate;
}

[data-theme="fancy"] #google-login-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px oklch(0.680 0.158 276.9 / 0.5);
    background: oklch(0.680 0.158 276.9 / 0.1);
}

@keyframes fancyGlowPulse {
    from {
        box-shadow: 0 0 15px oklch(0.680 0.158 276.9 / 0.25);
    }

    to {
        box-shadow: 0 0 35px oklch(0.680 0.158 276.9 / 0.5);
    }
}

/* Fancy Icon Btn */
[data-theme="fancy"] .icon-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="fancy"] .icon-btn:hover {
    background: oklch(1 0 0 / 0.08);
    color: var(--accent-blue);
    transform: scale(1.1);
}

/* Specific Glass Look for Task Actions (fancy colours only) */
[data-theme="fancy"] .edit-task-btn,
[data-theme="fancy"] .archive-task-btn,
[data-theme="fancy"] .unarchive-task-btn,
[data-theme="fancy"] .delete-task-btn,
[data-theme="fancy"] .copy-task-btn,
[data-theme="fancy"] .move-task-btn,
[data-theme="fancy"] .reassign-tag-btn {
    background: oklch(1 0 0 / 0.08);
    border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: 8px;
}

[data-theme="fancy"] .icon-btn:active {
    transform: scale(0.9);
}

[data-theme="fancy"] .icon-btn-large:hover {
    color: var(--accent-blue);
    filter: drop-shadow(0 0 8px oklch(0.680 0.158 276.9 / 0.6));
}

/* Fancy Glass Select */
[data-theme="fancy"] .glass-select {
    background: oklch(1 0 0 / 0.04);
    border: 1px solid oklch(1 0 0 / 0.1);
}

[data-theme="fancy"] .glass-select:focus {
    border-color: oklch(0.680 0.158 276.9 / 0.4);
    box-shadow: 0 0 10px oklch(0.680 0.158 276.9 / 0.1);
}

/* Fancy Orphan List */
[data-theme="fancy"] .list-column.orphan-list {
    border-color: oklch(0.715 0.165 22 / 0.3);
    background: oklch(0.715 0.165 22 / 0.03);
}

/* Fancy Header App */
[data-theme="fancy"] .app-header {
    background: oklch(0 0 0 / 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Fancy Slider Toggle Switches */
[data-theme="fancy"] input:checked+.slider-small {
    background-color: var(--accent-blue);
    box-shadow: 0 0 10px oklch(0.680 0.158 276.9 / 0.4);
}

/* Fancy Total Count Badge */
[data-theme="fancy"] .total-count-badge {
    background: oklch(0.680 0.158 276.9 / 0.1);
    border-color: oklch(0.680 0.158 276.9 / 0.2);
    color: oklch(0.780 0.100 275);
}

/* Fancy Sync Pill */
[data-theme="fancy"] .sync-pill {
    background: oklch(0.180 0.050 300 / 0.8);
    backdrop-filter: blur(16px);
    border-color: oklch(0.680 0.158 276.9 / 0.15);
}

/* Fancy Location Item */
[data-theme="fancy"] .location-item {
    background: oklch(1 0 0 / 0.03);
    border-color: oklch(1 0 0 / 0.06);
}

/* Fancy Task Metadata */
[data-theme="fancy"] .task-metadata {
    background: oklch(1 0 0 / 0.03);
    border-color: oklch(1 0 0 / 0.06);
}

/* Fancy multi-select row inside header */
[data-theme="fancy"] .floating-action-bar.header-multi-select {
    border-bottom-color: oklch(0.680 0.158 276.9 / 0.2);
}

/* Fancy Board Dropdown */
[data-theme="fancy"] .board-dropdown-menu {
    background: oklch(0.159 0.028 294.9 / 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid oklch(1 0 0 / 0.08);
    box-shadow: 0 15px 50px oklch(0 0 0 / 0.6);
}

[data-theme="fancy"] .board-item:hover {
    background: oklch(0.680 0.158 276.9 / 0.1);
}

[data-theme="fancy"] .board-item.active {
    background: oklch(0.680 0.158 276.9 / 0.15);
    color: var(--accent-blue);
}

/* Fancy Mobile Reorder */
[data-theme="fancy"] .mobile-reorder-list-item {
    background: oklch(1 0 0 / 0.04);
    border-color: oklch(1 0 0 / 0.08);
}

/* Fancy Search Badge */
[data-theme="fancy"] .search-context-badge {
    background: oklch(0.680 0.158 276.9 / 0.15);
    color: oklch(0.780 0.100 275);
    border-color: oklch(0.680 0.158 276.9 / 0.25);
}

/* Fancy Auto-Moved */
[data-theme="fancy"] .auto-moved-recently {
    border-left-color: oklch(0.520 0.180 260) !important;
    background-color: oklch(0.773 0.153 163.2 / 0.05) !important;
}

/* Fancy Slider Container (Slide to Delete) */
[data-theme="fancy"] .slider-container {
    background: oklch(1 0 0 / 0.04);
    border-color: oklch(1 0 0 / 0.1);
}

[data-theme="fancy"] .slider-handle {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    color: oklch(1 0 0);
    box-shadow: 0 0 15px oklch(0.680 0.158 276.9 / 0.4),
        inset 0 0 8px oklch(1 0 0 / 0.2);
}

[data-theme="fancy"] .slider-handle:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Fancy Toggle Switch Track: colours only (size is shared) */
[data-theme="fancy"] .slider-small {
    background-color: oklch(1 0 0 / 0.1);
    border: 1px solid oklch(1 0 0 / 0.05);
}

[data-theme="fancy"] .slider-small:before {
    background: oklch(0.940 0.010 290);
    box-shadow: 0 2px 4px oklch(0 0 0 / 0.4);
}

[data-theme="fancy"] input:checked+.slider-small {
    background-color: oklch(0.680 0.158 276.9 / 0.35);
    border-color: oklch(0.680 0.158 276.9 / 0.5);
    box-shadow: 0 0 15px oklch(0.680 0.158 276.9 / 0.2);
}

[data-theme="fancy"] input:checked+.slider-small:before {
    background: oklch(1 0 0);
    box-shadow: 0 0 10px oklch(0.680 0.158 276.9 / 0.6);
}

/* Mobile Fancy Scrollbar */
@media (max-width: 600px) {
    [data-theme="fancy"] .task-list::-webkit-scrollbar-thumb {
        background-color: oklch(0.680 0.158 276.9 / 0.4);
    }

    [data-theme="fancy"] .task-list::-webkit-scrollbar-track,
    [data-theme="fancy"] .task-list::-webkit-scrollbar {
        background: oklch(0.680 0.158 276.9 / 0.03);
    }

    [data-theme="fancy"] .board-container::-webkit-scrollbar {
        background: oklch(0.680 0.158 276.9 / 0.03);
    }

    [data-theme="fancy"] .board-container::-webkit-scrollbar-thumb {
        background-color: oklch(0.680 0.158 276.9 / 0.4);
    }
}

/* Fancy Project Title */
[data-theme="fancy"] .project-title-input:hover {
    background: oklch(0.680 0.158 276.9 / 0.05);
    border-color: oklch(0.680 0.158 276.9 / 0.15);
}

[data-theme="fancy"] .project-title-input:focus {
    background: oklch(1 0 0 / 0.04);
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px oklch(0.680 0.158 276.9 / 0.15);
}

/* Fancy Color Btn */
[data-theme="fancy"] .color-btn {
    background: oklch(1 0 0 / 0.08);
    border: 1px solid oklch(1 0 0 / 0.1);
    box-shadow: 0 2px 8px oklch(0 0 0 / 0.2);
}

[data-theme="fancy"] .color-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.3),
        0 0 10px oklch(0.680 0.158 276.9 / 0.2);
    border-color: oklch(0.680 0.158 276.9 / 0.3);
}

/* Fancy Archived Task */
[data-theme="fancy"] .task-card.archived-task:hover {
    background: oklch(0.680 0.158 276.9 / 0.06);
}

[data-theme="fancy"] .task-card.archived-task .icon-btn {
    background: oklch(0.680 0.158 276.9 / 0.1);
}

/* Fancy Multi Edit */
[data-theme="fancy"] .multi-edit-active .task-card.selected {
    background: oklch(0.680 0.158 276.9 / 0.2) !important;
    border: 1px solid oklch(0.680 0.158 276.9 / 0.5) !important;
    box-shadow: 0 0 20px oklch(0.680 0.158 276.9 / 0.15);
}

/* z-index for orbs to be behind everything (fancy decoration only) */
[data-theme="fancy"] #login-overlay {
    background: var(--bg-gradient);
    background-size: 300% 300%;
    animation: fancyGradient 20s ease infinite;
}

/* Ensure no white gap ever shows behind the app on iOS (top, bottom, sides) */
html {
    background: oklch(0 0 0);
}

[data-theme="light"] html {
    background: oklch(0.960 0 0);
}

body {
    background: var(--bg-gradient);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: var(--text-primary);
    font-family: 'Outfit', 'Segoe UI', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* Use 100dvh so the full body fits on screen including safe areas */
    height: 100dvh;
    overflow: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* Push content below the iOS status bar, clear the home indicator at the bottom */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

.app-wrapper {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Removed padding-top: 0 — body now handles the safe-area offset */
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.glass-panel {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.app-header {
    margin: 10px 20px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    z-index: 10;
    flex-shrink: 0;
}

.header-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.action-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.project-title-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    font-family: inherit;
    padding: 5px;
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
    transition: all 0.2s;
}

.project-title-input:hover {
    border-color: var(--glass-border);
    background: oklch(1 0 0 / 0.05);
}

.project-title-input:focus {
    outline: none;
    background: var(--input-bg);
    border-color: var(--accent-blue);
}

.total-count-badge {
    background: oklch(1 0 0 / 0.1);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}

[data-theme="light"] .total-count-badge {
    background: oklch(0 0 0 / 0.05);
    color: var(--text-primary);
}

.list-count-badge {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: oklch(0 0 0 / 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    flex-shrink: 0;
}

[data-theme="light"] .list-count-badge {
    background: oklch(0 0 0 / 0.08);
}

.list-count-badge.all-done {
    background-color: var(--accent-green) !important;
    color: var(--on-accent-dark) !important;
    box-shadow: 0 0 10px color-mix(in oklch, var(--accent-green) 30%, transparent);
}

.empty-list-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    opacity: 0.5;
    font-style: italic;
    gap: 10px;
    text-align: center;
}

.empty-list-msg i {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.clean-list-btn {
    opacity: 0.7;
}

.clean-list-btn:hover {
    opacity: 1;
    color: var(--accent-green) !important;
}

.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex-shrink: 0;
    position: relative;
}

.btn.primary {
    background: var(--accent-blue);
    color: var(--on-accent);
    box-shadow: 0 0 15px oklch(0.623 0.188 259.8 / 0.4);
}

.btn.secondary {
    background: oklch(1 0 0 / 0.1);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .btn.secondary {
    background: oklch(0 0 0 / 0.05);
    border: 1px solid oklch(0 0 0 / 0.1);
}

[data-theme="light"] .btn.secondary:hover {
    background: oklch(0 0 0 / 0.1);
}

.btn.danger {
    background: var(--accent-red);
    color: var(--on-accent);
}

.multi-select-btn {
    background: var(--accent-blue) !important;
    color: var(--on-accent) !important;
    box-shadow: 0 0 10px oklch(0.623 0.188 259.8 / 0.5) !important;
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.multi-select-btn svg {
    width: 24px;
    height: 24px;
}

.multi-select-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 15px oklch(0.623 0.188 259.8 / 0.7) !important;
    transform: translateY(-2px);
}

.multi-select-btn.active {
    background: oklch(0.450 0.180 260) !important;
    /* Darker blue */
    box-shadow: 0 0 20px oklch(0.623 0.188 259.8 / 0.9) !important;
    transform: scale(1.05);
}

.options-btn-styled {
    background: oklch(1 0 0 / 0.1) !important;
    color: var(--on-accent) !important;
    box-shadow: 0 0 10px oklch(1 0 0 / 0.1) !important;
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    border: 1px solid oklch(1 0 0 / 0.1) !important;
    transition: all 0.3s ease !important;
}

.options-btn-styled svg {
    width: 24px;
    height: 24px;
}

.options-btn-styled:hover {
    background: oklch(1 0 0 / 0.2) !important;
    box-shadow: 0 0 15px oklch(1 0 0 / 0.2) !important;
    transform: translateY(-2px);
}

[data-theme="light"] .options-btn-styled {
    background: oklch(0 0 0 / 0.05) !important;
    color: oklch(0.320 0.025 260) !important;
    border: 1px solid oklch(0 0 0 / 0.1) !important;
}

.icon-btn-large {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
}

.icon-btn-large.active {
    color: var(--accent-blue);
}

.toggle-group {
    background: oklch(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 3px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.toggle-group .switch-small {
    margin-right: 6px;
    margin-left: 2px;
}

.header-row-meta > .drag-fill,
[data-theme="light"] .header-row-meta > .drag-fill {
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 12px;
    min-width: 136px;
}

.header-row-meta > .drag-fill .drag-fill-switch {
    display: block;
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 136px;
    min-height: 34px;
    margin: 0;
    box-sizing: border-box;
    transform: none !important;
}

.drag-fill-slider {
    border-radius: 12px !important;
    border: none !important;
    box-sizing: border-box;
    background-color: var(--accent-red) !important;
    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.18);
    transition: background-color 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.drag-fill-switch input:checked + .drag-fill-slider {
    background-color: var(--accent-green) !important;
    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.18);
}

.drag-fill-slider:before {
    content: "" !important;
    width: calc(50% - 3px) !important;
    height: calc(100% - 6px) !important;
    top: 3px !important;
    bottom: auto !important;
    left: 3px !important;
    border-radius: 9px !important;
    background: white !important;
    z-index: 2 !important;
    box-shadow:
        0 2px 5px oklch(0 0 0 / 0.22),
        0 1px 0 oklch(1 0 0 / 0.7) inset !important;
    transform: translateX(0) !important;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.drag-fill-switch input:checked + .drag-fill-slider:before {
    transform: translateX(100%) !important;
}

.drag-fill-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    pointer-events: none;
    margin: 0;
    padding: 0;
    transform: none;
}

.drag-fill-half {
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    padding: 0 4px;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    color: white;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.drag-fill-half.is-on {
    transform: translateX(14px);
}

.drag-fill-half.is-off {
    transform: translateX(-14px);
}

.drag-fill-switch input:not(:checked) + .drag-fill-slider + .drag-fill-text .is-off,
.drag-fill-switch input:checked + .drag-fill-slider + .drag-fill-text .is-on {
    opacity: 1;
    transform: translateX(0);
}

[data-theme="light"] .toggle-group {
    background: oklch(0 0 0 / 0.05);
    border: 1px solid var(--glass-border);
}

.toggle-group .label {
    font-size: 0.75rem;
    margin-left: 6px;
    margin-right: 4px;
    color: var(--text-secondary);
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

.mode-btn.active {
    background: oklch(1 0 0 / 0.15);
    color: var(--text-primary);
    font-weight: bold;
}

[data-theme="light"] .mode-btn.active {
    background: oklch(1 0 0);
    box-shadow: 0 2px 5px oklch(0 0 0 / 0.1);
}

.glass-select {
    background: oklch(0 0 0 / 0.2);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

/* Board Dropdown */
.board-dropdown {
    position: relative;
    display: inline-block;
}

.board-dropdown-btn {
    gap: 8px;
    min-width: 140px;
    justify-content: space-between !important;
}

.board-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    padding: 8px;
    background: var(--dropdown-bg-glass);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 40px oklch(0 0 0 / 0.5);
    animation: fadeInScale 0.2s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.board-item {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.board-item:hover {
    background: oklch(1 0 0 / 0.1);
}

.board-item.active {
    background: oklch(0.623 0.188 259.8 / 0.2);
    color: var(--accent-blue);
    font-weight: 600;
}

.board-item i {
    font-size: 1.1rem;
    opacity: 0.8;
}

.board-dropdown-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 0;
}

.board-action-item {
    color: var(--accent-blue);
    font-weight: 600;
}

/* Board Manager Modal Styling */
#board-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
}

#board-list-container .board-item {
    background: oklch(1 0 0 / 0.05);
    border: 1px solid var(--glass-border);
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    cursor: pointer;
    font-size: 1rem;
}

#board-list-container .board-item:hover {
    background: oklch(1 0 0 / 0.1);
    border-color: var(--accent-blue);
}

#board-list-container .board-item.active {
    background: oklch(0.623 0.188 259.8 / 0.15);
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px oklch(0.623 0.188 259.8 / 0.2);
}

#board-list-container .board-item.active span {
    color: var(--accent-blue);
    font-weight: 700;
}

#board-list-container .board-item i {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

#board-list-container .board-item.active i {
    color: var(--accent-blue);
}

#board-list-container .mini-delete {
    opacity: 0.6;
    background: oklch(0.637 0.208 25.3 / 0.1);
    border: 1px solid oklch(0.637 0.208 25.3 / 0.2);
    color: var(--accent-red);
    padding: 8px !important;
    border-radius: 8px;
}

#board-list-container .mini-delete:hover {
    background: var(--accent-red);
    color: var(--on-accent);
    opacity: 1;
}

/* Board Statistics Layout */
.board-item-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.board-title {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.board-stats {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 12px;
}

@media (max-width: 450px) {
    #board-list-container .board-item {
        padding: 12px 15px;
    }

    .board-stats {
        gap: 8px;
    }

    .board-stats span {
        font-size: 0.7rem;
    }
}

/* Add Board Input Styling */
#new-board-title-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--text-primary);
    border-radius: 12px;
    transition: all 0.3s;
}

#new-board-title-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px oklch(0.623 0.188 259.8 / 0.3);
    outline: none;
}

[data-theme="light"] .glass-select {
    background: oklch(1 0 0 / 0.5);
    border-color: oklch(0 0 0 / 0.1);
}

.board-container {
    flex-grow: 1;
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 20px;
    padding-top: var(--list-top-gap, 10px);
    margin-top: var(--list-top-pull, 0px);
    align-items: flex-start;
    box-sizing: border-box;
}

.board-container::-webkit-scrollbar {
    height: 8px;
}

.board-container::-webkit-scrollbar-thumb {
    background: oklch(1 0 0 / 0.2);
    border-radius: 4px;
}

[data-theme="light"] .board-container::-webkit-scrollbar-thumb {
    background: oklch(0 0 0 / 0.2);
}

.list-column {
    min-width: 300px;
    max-width: 300px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 10px);
    flex-shrink: 0;
}

.list-column.orphan-list {
    border: 1px dashed var(--accent-red);
    background: oklch(0.152 0.019 17.2 / 0.3);
}

[data-theme="light"] .list-column.orphan-list {
    background: oklch(0.628 0.258 29.2 / 0.05);
}

.add-list-placeholder {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: stretch;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    max-height: calc(100% - 10px);
    min-height: 240px;
    margin: 0;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: var(--radius);
    border: 1.5px dashed color-mix(in oklch, var(--text-secondary) 50%, var(--glass-border));
    background: color-mix(in oklch, var(--glass-bg) 70%, transparent);
    color: var(--text-secondary);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: center;
}

.add-list-placeholder:hover,
.add-list-placeholder:focus-visible {
    color: var(--text-primary);
    border-color: var(--accent-blue);
    background: color-mix(in oklch, var(--accent-blue) 14%, var(--glass-bg));
    outline: none;
}

.add-list-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--accent-blue);
}

.add-list-placeholder-icon i {
    line-height: 1;
}

.add-list-placeholder-label {
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.3;
    max-width: 14ch;
}

.list-header {
    padding: 8px 12px 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.list-header-left {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
}

.list-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    opacity: 0.5;
    padding: 2px;
}

.list-drag-handle:hover {
    opacity: 1;
    color: var(--text-primary);
}

.list-header-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.group-by-tag-btn:hover {
    color: var(--accent-blue);
}

.group-by-tag-btn.active,
.group-by-tag-btn[aria-pressed="true"] {
    color: var(--accent-blue);
    background: oklch(0.623 0.188 259.8 / 0.15);
}

.freeze-list-btn {
    transition: all 0.2s ease;
}

.freeze-list-btn.active {
    color: oklch(0.790 0.160 75);
}

.freeze-list-btn:hover {
    color: oklch(0.790 0.160 75);
}

[data-theme="light"] .freeze-list-btn.active,
[data-theme="light"] .freeze-list-btn:hover {
    color: oklch(0.550 0.140 55);
}

.list-title {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
    min-width: 0;
    /* Critical for flex shrinking */
}

.list-title {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
}

.list-title:focus {
    outline: none;
    border-bottom: 2px solid var(--accent-blue);
}

.confirm-box {
    text-align: center;
    padding: 35px 30px;
    max-width: 380px;
    border: 1px solid oklch(1 0 0 / 0.2);
    box-shadow: 0 25px 60px oklch(0 0 0 / 0.6), 0 0 30px oklch(0.623 0.188 259.8 / 0.15);
    background: oklch(0.069 0 0 / 0.5);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

[data-theme="light"] .confirm-box {
    background: oklch(1 0 0 / 0.9);
    border: 1px solid oklch(0 0 0 / 0.1);
    box-shadow: 0 15px 40px oklch(0 0 0 / 0.12);
}

.confirm-icon-area {
    font-size: 4rem;
    margin-bottom: 24px;
    color: var(--accent-blue);
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 0 15px currentColor);
    opacity: 0.9;
}

.confirm-box h2 {
    margin-bottom: 12px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
}

.confirm-box p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1rem;
    opacity: 0.85;
}

.centered-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.centered-actions .btn {
    min-width: 120px;
    padding: 12px 20px;
}

.automation-confirm-modal {
    max-width: 520px;
    width: min(92vw, 520px);
    padding: 30px;
    text-align: center;
    gap: 16px;
}

.automation-confirm-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 2px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    box-shadow: 0 18px 38px oklch(0.623 0.188 259.8 / 0.32);
    font-size: 2rem;
}

.automation-confirm-modal h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.55rem;
    line-height: 1.2;
}

.automation-confirm-modal p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.automation-confirm-list {
    max-height: min(38vh, 320px);
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}

.automation-move-item {
    padding: 12px;
    border-radius: 8px;
    background: oklch(1 0 0 / 0.07);
    border: 1px solid oklch(1 0 0 / 0.08);
}

[data-theme="light"] .automation-move-item {
    background: oklch(0 0 0 / 0.04);
    border-color: oklch(0 0 0 / 0.08);
}

.automation-move-task {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.automation-move-route {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.35;
}

.automation-move-route i {
    color: var(--accent-blue);
    font-size: 1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.automation-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.automation-confirm-actions .btn {
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    font-size: 1rem;
    gap: 8px;
}

.automation-confirm-actions .btn.primary {
    min-height: 58px;
    font-size: 1.08rem;
}

.task-list {
    padding: 4px 10px 10px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    flex-grow: 1;
    min-height: 50px;
    -webkit-overflow-scrolling: touch;
}

/* Thicker Scrollbar for Lists */
.task-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 16px;
}

.task-list::-webkit-scrollbar-thumb {
    background-color: oklch(1 0 0 / 0.3);
    border-radius: 8px;
    border: 4px solid transparent;
    background-clip: content-box;
}

.task-list::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="light"] .task-list::-webkit-scrollbar-thumb {
    background-color: oklch(0 0 0 / 0.2);
}

/* TASK CARDS */
.task-card {
    background: var(--card-bg);
    padding: 6px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    cursor: grab;
    transition: box-shadow 0.2s, border-color 0.2s;
    /* Removed transform transition */
    border: 1px solid transparent;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.1);

    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.task-card:hover {
    border-color: var(--glass-border);
}

.task-card:active,
.task-card.sortable-chosen {
    cursor: grabbing;
}

[data-theme="light"] .task-card {
    border: 1px solid oklch(0 0 0 / 0.05);
}

/* --- DRAG FIX STYLES --- */
.sortable-ghost {
    opacity: 0.4;
    background: oklch(0 0 0 / 0.1);
    border: 1px dashed var(--text-secondary);
}

.sortable-fallback {
    opacity: 1 !important;
    background: var(--glass-bg);
    border: 2px solid var(--accent-blue);
    box-shadow: 0 15px 30px oklch(0 0 0 / 0.5);
    cursor: grabbing;
    pointer-events: none;

    /* CRITICAL FIXES FOR MOUSE TRACKING */
    position: fixed !important;
    /* Detaches from the lists completely */
    z-index: 99999 !important;
    /* Floats above everything */
    left: 0;
    top: 0;
    /* Do NOT set transform: none here, Sortable needs to set it inline */
    will-change: transform;
}

.task-card.linked-task {
    background: var(--card-linked-bg);
    border: 1px solid oklch(0.623 0.188 259.8 / 0.3);
}

.task-card.archived-task {
    background: var(--card-archived-bg);
    border: 1px dashed var(--text-secondary);
    opacity: 0.9;
    /* Allow touch interactions for archived tasks since they need the unarchive button */
    touch-action: auto;
    cursor: default;
}

.task-card.archived-task .task-text {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Hover effect to hint interactivity */
.task-card.archived-task:hover {
    background: oklch(1 0 0 / 0.1);
    border-color: var(--glass-border);
}

[data-theme="light"] .task-card.archived-task:hover {
    background: oklch(0 0 0 / 0.08);
}

.task-card.archived-task .icon-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
    /* Prevent zoom delay but allow tap */

    /* Make buttons larger and more distinct everywhere for archived tasks */
    padding: 10px;
    margin-left: 5px;
    background: oklch(1 0 0 / 0.1);
    border-radius: 8px;
}

[data-theme="light"] .task-card.archived-task .icon-btn {
    background: oklch(0 0 0 / 0.05);
}

/* ===================================================================
   IMPORTANT TASKS - CATEGORY COLOR TO WHITE PULSE ANIMATION
   =================================================================== */

.task-card.important {
    background: var(--card-important-bg);
    border: 1px solid var(--card-important-border);
}

body:not(.disable-important-animation) .task-card.important {
    position: relative;
    --task-category-fallback: var(--task-category-color, var(--tag-color, oklch(0.850 0.160 85)));
    --important-pulse-peak: oklch(1 0 0);
    --important-pulse-peak-strong: oklch(1 0 0 / 0.95);
    --important-pulse-peak-soft: oklch(1 0 0 / 0.5);
    background-color: color-mix(in oklch, var(--task-category-fallback) 78%, white 22%);
    border: 2px solid var(--task-category-fallback);
    outline: 2px solid transparent;
    outline-offset: 1px;
}

body:not(.disable-important-animation) .nested-idea-display-item.important {
    --important-pulse-peak: oklch(1 0 0);
    --important-pulse-peak-strong: oklch(1 0 0 / 0.95);
    --important-pulse-peak-soft: oklch(1 0 0 / 0.5);
}

/* White categories are already the pulse colour, so they flash amber instead. */
body:not(.disable-important-animation) .task-card.important[data-tag-tone="white"],
body:not(.disable-important-animation) .task-card[data-tag-tone="white"] .nested-idea-display-item.important {
    --important-pulse-peak: oklch(0.78 0.16 75);
    --important-pulse-peak-strong: oklch(0.78 0.16 75 / 0.95);
    --important-pulse-peak-soft: oklch(0.78 0.16 75 / 0.5);
}

/* In dark modes: crisp black text for clear legibility on category colour and white */
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed),
[data-theme="oled"] body:not(.disable-important-animation) .task-card.important:not(.task-completed),
[data-theme="fancy"] body:not(.disable-important-animation) .task-card.important:not(.task-completed) {
    color: #000000 !important;
}

:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .task-text,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .task-number,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .task-summary,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .nested-idea-label,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) span,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) p,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) label,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .icon-btn,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .icon-btn i,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .kanban-arrow-btn,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .nested-kanban-arrow-btn,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .ph {
    color: #000000 !important;
}

:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .icon-btn:hover,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .kanban-arrow-btn:hover,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .nested-kanban-arrow-btn:hover {
    background: oklch(0 0 0 / 0.12) !important;
}

:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .task-checkbox,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .nested-idea-checkbox {
    border-color: #000000 !important;
}

:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .task-checkbox:checked,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .nested-idea-checkbox:checked {
    border-color: #000000 !important;
}

:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .task-checkbox:checked::before,
:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .nested-idea-checkbox:checked::before {
    background: #000000 !important;
}

:root:not([data-theme="light"]) body:not(.disable-important-animation) .task-card.important:not(.task-completed) .task-indicator-badge {
    color: #000000 !important;
    border-color: oklch(0 0 0 / 0.35) !important;
    background: oklch(0 0 0 / 0.08) !important;
}

/* Active Important Tasks: Dual pulse — 0.5s rest on category colour + quick fill pulse & out-of-sync border pulse */
body:not(.disable-important-animation) .task-card.important:not(.task-completed):not(.archived-task) {
    animation:
        importantFillGlowPulse 2.0s ease-in-out infinite,
        importantBorderPulse 2.0s ease-in-out infinite;
}

body:not(.disable-important-animation) .task-card.important:not(.task-completed):not(.archived-task):hover {
    animation-play-state: paused;
    box-shadow:
        0 0 18px var(--important-pulse-peak-strong),
        0 0 35px var(--task-category-fallback),
        0 2px 8px oklch(0 0 0 / 0.3);
    border-color: var(--important-pulse-peak);
    outline-color: color-mix(in oklch, var(--task-category-fallback) 80%, transparent);
}

.task-card.important.task-completed,
.task-card.important.archived-task {
    animation: none;
    opacity: 0.55;
    outline: none;
    background: var(--card-important-bg);
    border-color: color-mix(in oklch, var(--card-important-border) 40%, transparent);
}

/* Important nested subtasks */
body:not(.disable-important-animation) .nested-idea-display-item.important {
    border-radius: 6px;
    padding: 2px 6px;
    background: color-mix(in oklch, var(--task-category-fallback) 75%, white 25%);
    border: 1.5px solid var(--task-category-fallback);
}

body:not(.disable-important-animation) .nested-idea-display-item.important:not(.nested-idea-completed) {
    animation:
        importantFillGlowPulse 2.0s ease-in-out infinite,
        importantBorderPulse 2.0s ease-in-out infinite;
}

.nested-idea-display-item.important.nested-idea-completed {
    animation: none;
    opacity: 0.5;
    outline: none;
}

/* Disabled Important Task Pulse overrides */
body.disable-important-animation .task-card.important {
    animation: none !important;
    outline: none !important;
}

body.disable-important-animation .task-card.important:not(.tag-fill):not(.tag-glow) {
    background: var(--card-important-bg) !important;
    border: 1px solid var(--card-important-border) !important;
    box-shadow: none !important;
}

body.disable-important-animation .nested-idea-display-item.important {
    animation: none !important;
    outline: none !important;
    background: transparent !important;
    border: none !important;
}

/* Fill & Glow Pulse: Holds original category colour for 0.5s (0% to 25% of 2.0s cycle), then pulses to white */
@keyframes importantFillGlowPulse {
    0%, 25% {
        background-color: color-mix(in oklch, var(--task-category-fallback) 78%, white 22%);
        box-shadow:
            0 0 14px var(--task-category-fallback),
            0 0 28px color-mix(in oklch, var(--task-category-fallback) 50%, transparent),
            0 2px 6px oklch(0 0 0 / 0.25);
    }
    60% {
        background-color: var(--important-pulse-peak);
        box-shadow:
            0 0 20px var(--important-pulse-peak-strong),
            0 0 38px var(--important-pulse-peak-soft),
            0 2px 8px oklch(0 0 0 / 0.3);
    }
    100% {
        background-color: color-mix(in oklch, var(--task-category-fallback) 78%, white 22%);
        box-shadow:
            0 0 14px var(--task-category-fallback),
            0 0 28px color-mix(in oklch, var(--task-category-fallback) 50%, transparent),
            0 2px 6px oklch(0 0 0 / 0.25);
    }
}

/* Border Pulse: Out of sync with the main fill color, rests on category colour for 0.5s then pulses */
@keyframes importantBorderPulse {
    0%, 25% {
        border-color: var(--task-category-fallback);
        outline-color: color-mix(in oklch, var(--task-category-fallback) 75%, transparent);
        outline-offset: 1px;
    }
    45% {
        border-color: var(--important-pulse-peak);
        outline-color: var(--important-pulse-peak-strong);
        outline-offset: 1px;
    }
    80% {
        border-color: var(--task-category-fallback);
        outline-color: color-mix(in oklch, var(--task-category-fallback) 75%, transparent);
        outline-offset: 2.5px;
    }
    100% {
        border-color: var(--task-category-fallback);
        outline-color: color-mix(in oklch, var(--task-category-fallback) 75%, transparent);
        outline-offset: 1px;
    }
}

/* Light Theme: Subtle light category pulse with clean contrast and 0.5s category hold */
[data-theme="light"] body:not(.disable-important-animation) .task-card.important:not(.task-completed):not(.archived-task),
[data-theme="light"] body:not(.disable-important-animation) .nested-idea-display-item.important:not(.nested-idea-completed) {
    animation:
        importantFillGlowPulseLight 2.0s ease-in-out infinite,
        importantBorderPulseLight 2.0s ease-in-out infinite;
    animation-delay:
        calc((sibling-index() - 1) * 0.22s),
        calc((sibling-index() - 1) * 0.22s);
}

/* Stagger the pulse by list position so a wave travels down the important tasks. */
body:not(.disable-important-animation) .task-card.important:not(.task-completed):not(.archived-task),
body:not(.disable-important-animation) .nested-idea-display-item.important:not(.nested-idea-completed) {
    animation-delay:
        calc((sibling-index() - 1) * 0.22s),
        calc((sibling-index() - 1) * 0.22s);
}

@keyframes importantFillGlowPulseLight {
    0%, 25% {
        background-color: color-mix(in oklch, var(--task-category-fallback) 35%, white 65%);
        box-shadow:
            0 0 10px color-mix(in oklch, var(--task-category-fallback) 45%, transparent),
            0 1px 4px oklch(0 0 0 / 0.1);
    }
    60% {
        background-color: var(--important-pulse-peak);
        box-shadow:
            0 0 0 1px var(--important-pulse-peak-strong),
            0 0 14px color-mix(in oklch, var(--task-category-fallback) 50%, transparent),
            0 3px 10px oklch(0 0 0 / 0.12);
    }
    100% {
        background-color: color-mix(in oklch, var(--task-category-fallback) 35%, white 65%);
        box-shadow:
            0 0 10px color-mix(in oklch, var(--task-category-fallback) 45%, transparent),
            0 1px 4px oklch(0 0 0 / 0.1);
    }
}

@keyframes importantBorderPulseLight {
    0%, 25% {
        border-color: var(--task-category-fallback);
        outline-color: color-mix(in oklch, var(--task-category-fallback) 60%, transparent);
        outline-offset: 1px;
    }
    45% {
        border-color: oklch(0.25 0 0 / 0.9);
        outline-color: oklch(1 0 0 / 0.8);
        outline-offset: 1px;
    }
    80% {
        border-color: var(--task-category-fallback);
        outline-color: color-mix(in oklch, var(--task-category-fallback) 60%, transparent);
        outline-offset: 2.5px;
    }
    100% {
        border-color: var(--task-category-fallback);
        outline-color: color-mix(in oklch, var(--task-category-fallback) 60%, transparent);
        outline-offset: 1px;
    }
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    body:not(.disable-important-animation) .task-card.important:not(.task-completed):not(.archived-task),
    body:not(.disable-important-animation) .nested-idea-display-item.important:not(.nested-idea-completed) {
        animation: none !important;
        background-color: color-mix(in oklch, var(--task-category-fallback) 78%, white 22%) !important;
        box-shadow: 0 0 14px var(--task-category-fallback) !important;
        border-color: var(--task-category-fallback) !important;
        outline: none !important;
    }
}


.task-number {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-secondary);
    margin-top: 3px;
    min-width: 18px;
}

.task-card.is-single-line .task-number {
    margin-top: 0;
}

.task-main-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.task-card.is-single-line .task-main-row {
    align-items: center;
}

.task-checkbox {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 3px solid var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    margin-top: 0;
    /* Adjusted alignment for larger box */
    display: grid;
    place-content: center;
    flex-shrink: 0;
}

.task-checkbox::before {
    content: "";
    width: 20px;
    height: 20px;
    transform: scale(0);
    background: var(--accent-blue);
    border-radius: 4px;
    transition: 0.1s;
}

.task-checkbox:checked {
    border-color: var(--accent-blue);
}

.task-checkbox:checked::before {
    transform: scale(1);
}

.task-content-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.task-text {
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
}

.task-summary {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--text-secondary);
    background: oklch(0.623 0.188 259.8 / 0.12);
    border: 1px solid oklch(0.623 0.188 259.8 / 0.22);
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.35;
    margin-top: 7px;
    padding: 6px 8px;
    word-break: break-word;
}

.task-summary i {
    color: var(--accent-blue);
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-modified-indicator {
    color: var(--accent-blue);
    display: inline-flex;
    font-size: 0.95rem;
    margin-right: 6px;
    vertical-align: -1px;
}

.task-completed .task-text {
    text-decoration: line-through;
    opacity: 0.5;
}

.task-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
}

.task-img-preview {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
}

.task-actions {
    display: none;
    /* Hide by default and remove from layout */
    flex-direction: row;
    gap: 8px;
    margin-left: auto;
    margin-bottom: 0;
    opacity: 0;
    transition: opacity 0.2s;
    align-self: center;
    flex-shrink: 0;
    pointer-events: none;
}

/* REVEAL LOGIC (Unified for Desktop Click and Mobile Touch) */
.task-card.show-actions .task-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    margin-top: 8px;
}

/* MOBILE SPECIFIC REFINEMENTS */
@media (hover: none) {
    /* Kept for consistency or specific mobile overrides if needed */
}

.task-card.vertical-actions .task-actions {
    flex-direction: row;
    gap: 8px;
}

.icon-btn {
    font-size: 1.2rem;
    padding: 4px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-task-btn,
.archive-task-btn,
.unarchive-task-btn,
.delete-task-btn,
.copy-task-btn,
.move-task-btn,
.reassign-tag-btn {
    margin-left: 4px;
}

.icon-btn:hover {
    color: var(--text-primary);
    background: oklch(1 0 0 / 0.1);
}

.icon-btn:disabled {
    cursor: wait;
    opacity: 0.5;
}

.ai-summary-btn {
    background: oklch(0.546 0.215 262.9 / 0.34) !important;
    color: oklch(1 0 0) !important;
}

.ai-summary-btn:hover {
    background: oklch(0.623 0.188 259.8 / 0.45) !important;
}

.ai-summary-btn.is-loading i {
    animation: aiSpin 1s linear infinite;
}

@keyframes aiSpin {
    to {
        transform: rotate(360deg);
    }
}

.ai-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: oklch(0 0 0 / 0.38);
    display: flex;
    justify-content: flex-end;
}

.ai-panel-overlay.hidden {
    display: none;
}

.ai-panel {
    width: min(440px, calc(100vw - 24px));
    height: calc(100vh - 24px);
    margin: 12px;
    padding: 18px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.ai-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px;
}

.ai-panel-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.ai-panel-header p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    word-break: break-word;
}

.ai-panel-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    flex: 0 0 auto;
}

.ai-panel-section h3 {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ai-task-preview,
.ai-output,
.ai-debug-log {
    background: oklch(0 0 0 / 0.22);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
}

[data-theme="light"] .ai-task-preview,
[data-theme="light"] .ai-output,
[data-theme="light"] .ai-debug-log {
    background: oklch(1 0 0 / 0.62);
}

.ai-task-preview {
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.45;
    max-height: 120px;
    overflow: auto;
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-log-section {
    flex: 1 1 auto;
    min-height: 120px;
}

.ai-debug-log {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px;
}

.ai-log-entry {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 6px 4px;
    border-bottom: 1px solid oklch(1 0 0 / 0.06);
}

.ai-log-entry.success {
    color: var(--accent-green);
}

.ai-log-entry.warning {
    color: var(--accent-yellow);
}

.ai-log-entry.error {
    color: var(--accent-red);
}

.ai-log-time {
    opacity: 0.68;
    font-variant-numeric: tabular-nums;
}

.ai-output {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.45;
    flex: 0 1 auto;
    min-height: 84px;
    max-height: min(28vh, 220px);
    overflow: auto;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-output.empty {
    color: var(--text-secondary);
}

.ai-output.success {
    border-color: oklch(0.723 0.192 149.6 / 0.36);
}

.ai-output.warning {
    border-color: oklch(0.795 0.162 86.0 / 0.45);
    color: var(--accent-yellow);
}

.ai-panel-actions {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 8px;
    justify-content: flex-end;
}

.ai-panel-actions .btn {
    gap: 6px;
}

.ai-panel-actions .btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

@media (max-width: 600px) {
    .ai-panel-overlay {
        align-items: flex-end;
    }

    .ai-panel {
        width: calc(100vw - 16px);
        height: min(86vh, 720px);
        margin: 8px;
        padding: 14px;
    }
}

.edit-task-btn {
    background: oklch(0.280 0 0 / 0.777) !important;
    color: oklch(1 0 0) !important;
}

.edit-task-btn:hover {
    background: oklch(0.391 0 0 / 0.617) !important;
}

.add-image-btn {
    background: oklch(0.605 0.217 257.2 / 0.1) !important;
    color: oklch(1 0 0) !important;
}

.add-image-btn:hover {
    background: oklch(0.605 0.217 257.2 / 0.1) !important;
}

.archive-task-btn {
    background: oklch(0.093 0 0 / 0.617) !important;
    color: oklch(1 0 0) !important;
}

.archive-task-btn:hover {
    background: oklch(0.223 0 0 / 0.617) !important;
}

.copy-task-btn {
    background: oklch(0.179 0 0 / 0.7) !important;
    color: oklch(1 0 0) !important;
}

.copy-task-btn:hover {
    background: oklch(0.320 0 0 / 0.7) !important;
}

.move-task-btn,
.reassign-tag-btn {
    background: oklch(0.220 0 0 / 0.72) !important;
    color: oklch(1 0 0) !important;
}

.move-task-btn:hover,
.reassign-tag-btn:hover {
    background: oklch(0.340 0 0 / 0.72) !important;
}

.reassign-tag-modal {
    max-width: 440px;
}

.reassign-tag-modal .modal-header-row h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reassign-tag-task-card {
    margin-bottom: 14px;
}


.add-task-container {
    padding: 6px 10px;
    border-top: 1px solid var(--glass-border);
}

.add-task-container.add-v-top {
    border-top: none;
    border-bottom: 1px solid var(--glass-border);
    padding: 4px 10px 6px;
}

.add-task-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.add-task-form .btn.primary {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    padding: 0;
    flex-shrink: 0;
}

.add-task-input {
    flex-grow: 1;
    background: oklch(0 0 0 / 0.2);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.35;
    min-width: 0;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    height: 42px;
    max-height: 42px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-break: break-word;
}

textarea.add-task-input.is-expanded {
    overflow-y: auto;
    max-height: min(45vh, 20rem);
}

[data-theme="light"] .add-task-input {
    background: oklch(0 0 0 / 0.05);
}

/* Add Task Countdown Bar Styles */
.add-task-countdown-bar-container {
    height: 6px;
    background: oklch(1 0 0 / 0.1);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
    position: relative;
    display: none; /* hidden by default */
}

[data-theme="light"] .add-task-countdown-bar-container {
    background: oklch(0 0 0 / 0.05);
}

.add-task-countdown-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--accent-blue), oklch(0.606 0.215 292));
    transform-origin: left;
    transform: scaleX(1);
    transition: transform 0.1s linear;
}

.countdown-marks {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.countdown-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: oklch(0.99 0.01 100);
    box-shadow: 0 0 0 1px oklch(0 0 0 / 0.55);
    pointer-events: none;
}

[data-theme="light"] .countdown-mark {
    background: oklch(0.18 0 0);
    box-shadow: 0 0 0 1px oklch(1 0 0 / 0.8);
}

.add-task-input:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 2px oklch(0.623 0.188 259.8 / 0.3) !important;
}

/* Input Alert Flash Animation */
@keyframes add-task-input-alert-glow {
    0%, 20%, 40%, 60%, 80%, 100% {
        border-color: var(--glass-border);
        box-shadow: none;
        outline: none;
    }
    10%, 30%, 50%, 70%, 90% {
        border-color: oklch(1 0 0);
        box-shadow: 0 0 0 6px oklch(1 0 0), 0 0 35px oklch(1 0 0 / 0.95);
        outline: none;
    }
}
.add-task-input.input-alert-flash,
.add-task-input.input-alert-flash:focus,
.add-task-composer-input.input-alert-flash,
.add-task-composer-input.input-alert-flash:focus {
    animation: add-task-input-alert-glow 3s ease-in-out !important;
}

/* Readonly only routes taps into the full-screen editor; keep the normal field look */
textarea.add-task-input[readonly] {
    cursor: pointer;
    opacity: 1;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

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

.add-task-composer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--bg-gradient);
    color: var(--text-primary);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden;
    min-height: 0;
    overscroll-behavior: none;
}

html.add-task-composer-open,
html.add-task-composer-open body {
    overflow: hidden;
}

.add-task-composer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 8px 4px;
}

.add-task-composer-fonts {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-self: start;
}

.add-task-composer-font-size {
    flex: 0 0 auto;
    min-width: 2.6ch;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-secondary);
}

.add-task-composer.is-editing-task .add-task-composer-footer {
    display: none;
}

.add-task-composer-dock {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.add-task-composer-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding: 4px 12px 6px;
    border-top: 1px solid var(--glass-border);
    background: var(--dropdown-bg, oklch(0.16 0 0));
    touch-action: manipulation;
}

.add-task-composer-shield {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10049;
    pointer-events: none;
    background: var(--dropdown-bg, oklch(0.16 0 0));
}

.add-task-composer-exit,
.add-task-composer-subtask,
.add-task-composer-add {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    padding: 0 8px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
    touch-action: manipulation;
}

.add-task-composer-exit {
    background: oklch(0.58 0.16 25);
    color: white;
}

.add-task-composer-subtask {
    background: oklch(0.78 0.14 85);
    color: oklch(0.22 0.04 70);
}

.add-task-composer-subtask:disabled,
.add-task-composer-subtask.is-disabled {
    background: oklch(0.45 0.012 270);
    color: oklch(0.74 0.01 270);
    opacity: 1;
    cursor: default;
}

.add-task-composer-add {
    background: var(--accent-blue);
    color: var(--on-accent, white);
}

.add-task-composer-add.is-empty {
    opacity: 0.45;
}

.add-task-composer-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    height: 1.15em;
    font-size: 0.85rem;
    overflow: hidden;
}

.add-task-composer-advance {
    justify-self: end;
    margin: 0;
    padding: 0 10px;
    height: 28px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: oklch(0.623 0.188 259.8 / 0.2);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.add-task-composer-advance[hidden] {
    display: none;
}

.add-task-composer-list {
    flex: 0 1 auto;
    display: block;
    min-width: 0;
    text-align: center;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-task-composer-category {
    flex: 0 1 auto;
    box-sizing: border-box;
    max-width: 46%;
    min-width: 0;
    height: 1.15em;
    margin: 0;
    padding: 0 0.45em;
    border: 1px solid var(--tag-btn-border, var(--glass-border));
    border-radius: 999px;
    background: var(--tag-btn-bg, var(--glass-bg));
    color: var(--tag-btn-text, var(--text-primary));
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.15em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-task-composer-font {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
    width: 2.15em;
    height: 1.15em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    touch-action: manipulation;
    cursor: pointer;
}

.add-task-composer-font::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
}

.add-task-composer-font:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.add-task-composer-stage {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.composer-outline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: min-content;
}

.composer-outline-spacer {
    flex: 0 0 auto;
    width: 100%;
    pointer-events: none;
}

.composer-outline-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.composer-outline-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.composer-outline-item.is-subtask {
    margin-left: 16px;
    padding-left: 10px;
    border-left: 2px solid color-mix(in oklch, var(--accent-blue) 55%, var(--glass-border));
}

.composer-outline-item.is-active .add-task-composer-input {
    outline: 2px solid color-mix(in oklch, var(--accent-blue) 70%, white);
    outline-offset: 1px;
}

.add-task-composer-input {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    outline: none;
    resize: none;
    field-sizing: fixed;
    background: var(--card-bg);
    color: var(--text-primary);
    caret-color: currentColor;
    font-family: inherit;
    font-size: 17px;
    line-height: 1.2;
    padding: 6px 8px;
    min-height: calc(1.2em + 12px);
    box-sizing: border-box;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: normal;
}

[data-theme="light"] .add-task-composer-input {
    color-scheme: light;
}

.add-task-composer-input:focus {
    outline: none;
    box-shadow: none;
}

.add-task-composer-input::placeholder {
    color: currentColor;
    opacity: 0.55;
}

.add-task-composer-footer {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.add-task-composer-countdown-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 4px;
    min-height: 16px;
}

.add-task-composer-countdown {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    min-width: 0;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.12);
    overflow: hidden;
}

[data-theme="light"] .add-task-composer-countdown {
    background: oklch(0 0 0 / 0.08);
}

.add-task-composer-countdown-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--accent-blue), oklch(0.606 0.215 292));
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}

.add-task-composer-countdown-time {
    flex: 0 0 auto;
    min-width: 4.5em;
    text-align: right;
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-primary);
}

.add-task-composer-tags {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0 12px 4px;
    overflow: visible;
    touch-action: manipulation;
}

.add-task-composer-tags .tag-mode-btn {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 24px;
    height: auto;
    padding: 2px 6px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ten categories: last two stay the same size, on the left of row 3.
   Add stays on the right, twice as tall, filling that side. */
.add-task-composer.tags-packed .add-task-composer-dock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 4px 12px 6px;
    border-top: 1px solid var(--glass-border);
    background: var(--dropdown-bg, oklch(0.16 0 0));
}

.add-task-composer.tags-packed .add-task-composer-tags {
    display: contents;
}

.add-task-composer.tags-packed .add-task-composer-bar {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 4;
    align-items: stretch;
}

.add-task-composer.tags-packed .add-task-composer-tags .tag-mode-btn:nth-child(9):last-child {
    grid-column: 1;
    grid-row: 3;
}

.add-task-composer.tags-packed .add-task-composer-tags .tag-mode-btn:nth-child(9):nth-last-child(2) {
    grid-column: 1;
    grid-row: 3;
}

.add-task-composer.tags-packed .add-task-composer-tags .tag-mode-btn:nth-child(10) {
    grid-column: 2;
    grid-row: 3;
}

.add-task-composer.tags-packed .add-task-composer-add,
.add-task-composer.tags-packed .add-task-composer-exit,
.add-task-composer.tags-packed .add-task-composer-subtask {
    grid-column: auto;
    grid-row: auto;
    height: 52px;
    min-height: 52px;
    align-self: stretch;
}


/* Archive View Clarity */
body.is-archived-view .app-header {
    background: oklch(0.351 0.045 65.5 / 0.6) !important;
    border-color: oklch(0.350 0.040 70) !important;
    box-shadow: 0 0 20px oklch(0.351 0.045 65.5 / 0.4) !important;
}

body.is-archived-view .project-title-input {
    color: oklch(0.870 0.170 95) !important;
}

.archive-view-badge {
    background: oklch(0.350 0.040 70);
    color: oklch(0.870 0.170 95);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid oklch(0.870 0.170 95);
    animation: pulse-gold 2s infinite;
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 2000;
    box-shadow: 0 4px 15px oklch(0 0 0 / 0.4);
}

body.is-tag-filter-view .app-header {
    border-color: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 55%, var(--glass-border)) !important;
    box-shadow:
        0 0 0 1px color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 40%, transparent),
        0 0 24px color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 28%, transparent) !important;
}

body.is-tag-filter-view .tag-mode-row {
    border-top-color: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 50%, var(--glass-border));
}

body.is-tag-filter-view .board-container {
    outline: 2px solid color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 45%, transparent);
    outline-offset: -2px;
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 oklch(0.861 0.173 91.9 / 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px oklch(0.861 0.173 91.9 / 0);
    }

    100% {
        box-shadow: 0 0 0 0 oklch(0.861 0.173 91.9 / 0);
    }
}

/* Options / Settings list — scrollable page body */
.options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    /* Extra space at bottom */
    overflow-y: auto;
    /* Content scrollable */
    flex: 1;
    /* Take up remaining space */
    scrollbar-width: thin;
    /* For Firefox */
}

/* Custom Scrollbar for Options List */
.options-list::-webkit-scrollbar {
    width: 6px;
}

.options-list::-webkit-scrollbar-thumb {
    background: oklch(0.680 0.158 276.9 / 0.3);
    border-radius: 10px;
}

.options-list::-webkit-scrollbar-track {
    background: transparent;
}

/* --- FULL-PAGE SETTINGS VIEW --- */
.settings-page {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    flex-direction: column;
    background: var(--bg-gradient, var(--bg-primary, oklch(0.180 0.025 260)));
    color: var(--text-primary);
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.settings-page.hidden {
    display: none !important;
}

/* Keep true modals above the settings page (and above the mobile dock) */
body.settings-page-open .modal-overlay {
    z-index: 9300;
}

body.settings-page-open #confirm-modal-overlay,
body.settings-page-open #automation-confirm-modal-overlay,
body.settings-page-open #reset-modal-overlay,
body.settings-page-open #backup-reminder-modal-overlay {
    z-index: 9400;
}

/* --- FEATURES HELP & GUIDES --- */
.features-help-modal {
    max-width: 560px;
    width: min(560px, 94vw);
    max-height: min(88vh, 820px);
    display: flex;
    flex-direction: column;
    /* Keep modal chrome from clipping accordion content */
    overflow: hidden;
}

.features-help-modal .modal-header-row,
.features-help-modal .features-help-intro,
.features-help-modal .modal-actions-bar {
    flex-shrink: 0;
}

.features-help-modal .modal-header-row h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.15rem;
}

.features-help-intro {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.4;
}

.features-help-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    /* Avoid display:flex here — details/summary expand unreliably as flex items */
    display: block;
    padding-right: 2px;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}

.features-help-section {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0;
    margin: 0 0 8px;
    background: oklch(1 0 0 / 0.03);
    overflow: visible;
    height: auto;
}

.features-help-section:last-child {
    margin-bottom: 0;
}

[data-theme="light"] .features-help-section {
    background: oklch(0 0 0 / 0.03);
}

.features-help-section summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    padding: 14px 14px;
    min-height: 48px;
    box-sizing: border-box;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.35;
    user-select: none;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.features-help-section summary::-webkit-details-marker,
.features-help-section summary::marker {
    display: none;
    content: '';
}

.features-help-section summary::after {
    content: '';
    margin-left: auto;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.features-help-section[open] > summary::after {
    transform: rotate(-135deg);
}

.features-help-section summary i {
    color: var(--accent-blue);
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1;
    pointer-events: none;
}

.features-help-section summary .features-help-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    pointer-events: none;
}

/* Force content visibility when open (robust against flex/overflow quirks) */
.features-help-section > .features-help-content {
    display: none;
    height: auto;
    overflow: visible;
}

.features-help-section[open] > .features-help-content {
    display: block;
    padding: 0 12px 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
    border-top: 1px solid var(--glass-border);
    padding-top: 10px;
}

.features-help-content h4 {
    margin: 10px 0 4px;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.features-help-content h4:first-child {
    margin-top: 0;
}

.features-help-content p,
.features-help-content ul,
.features-help-content ol {
    margin: 0 0 8px;
}

.features-help-content ul,
.features-help-content ol {
    padding-left: 1.2rem;
}

.features-help-content li + li {
    margin-top: 4px;
}

.features-help-content code {
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: 4px;
    background: oklch(0 0 0 / 0.2);
    color: var(--text-primary);
}

[data-theme="light"] .features-help-content code {
    background: oklch(0 0 0 / 0.06);
}

.features-help-tip {
    background: oklch(0 0 0 / 0.18);
    padding: 10px;
    border-radius: 8px;
    font-style: italic;
    margin: 8px 0 0 !important;
}

[data-theme="light"] .features-help-tip {
    background: oklch(0 0 0 / 0.05);
}

.settings-page-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 980px;
    height: 100%;
    margin: 0 auto;
    min-height: 0;
}

.settings-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--dropdown-bg-glass, oklch(0.208 0.040 266.8 / 0.72));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 2;
}

.settings-page-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    text-align: center;
    flex: 1;
}

.settings-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    flex-shrink: 0;
}

.settings-header-spacer {
    width: 88px;
    flex-shrink: 0;
}

.settings-page-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.settings-page-open {
    overflow: hidden;
}

body.settings-page-open .app-wrapper {
    visibility: hidden;
    pointer-events: none;
}

body.settings-page-open .sync-pill,
body.settings-page-open #sync-console {
    display: none !important;
}

@media (min-width: 900px) {
    .settings-page-shell {
        max-width: 1100px;
    }

    .settings-page-header {
        padding: 16px 24px;
    }

    .settings-page-content {
        padding: 20px 24px 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
        align-content: start;
        align-items: start;
        grid-auto-rows: min-content;
    }

    .settings-page-content > * {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .settings-page-content > hr.dropdown-divider,
    .settings-page-content > .options-span-all,
    .settings-page-content > .settings-drag-link,
    .settings-page-content > #kanban-labels-settings,
    .settings-page-content > .sync-info-menu-item,
    .settings-page-content > .app-version-menu-item,
    .settings-page-content > .tags-settings-section,
    .settings-page-content > .settings-slider-block {
        grid-column: 1 / -1;
        min-height: min-content;
    }
}

@media (max-width: 500px) {
    .settings-page-header {
        padding: 12px 12px;
    }

    .settings-page-header h2 {
        font-size: 1.05rem;
    }

    .settings-header-spacer {
        width: 72px;
    }

    .settings-page-content {
        padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
    }

    .settings-page-content > * {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .menu-action-item,
    .dropdown-item-toggle {
        max-width: 100%;
        box-sizing: border-box;
    }
}

.menu-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 12px;
    background: oklch(0 0 0 / 0.2);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .menu-action-item {
    background: oklch(0 0 0 / 0.05);
}

.menu-action-item.danger-text {
    color: var(--accent-red);
    border-color: oklch(0.637 0.208 25.3 / 0.3);
}

.menu-action-item.danger-text:hover {
    background: oklch(0.637 0.208 25.3 / 0.1);
}

.dropdown-divider {
    border: 0;
    border-top: 1px solid var(--glass-border);
    margin: 5px 0;
}

.dropdown-item-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 8px;
    background: oklch(0 0 0 / 0.2);
    border: 1px solid var(--glass-border);
}

.settings-slider-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-shrink: 0;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: min-content;
    box-sizing: border-box;
    overflow: visible;
    align-self: start;
}

.settings-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.settings-slider-header > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-slider-block .kanban-labels-hint {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.settings-slider-track {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 2px;
    box-sizing: border-box;
}

.settings-slider {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    accent-color: var(--accent-blue);
    touch-action: none;
}

.settings-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.18);
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid oklch(1 0 0 / 0.85);
    box-shadow: 0 1px 4px oklch(0 0 0 / 0.35);
}

.settings-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.18);
}

.settings-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: 2px solid oklch(1 0 0 / 0.85);
    box-shadow: 0 1px 4px oklch(0 0 0 / 0.35);
}

[data-theme="light"] .settings-slider::-webkit-slider-runnable-track,
[data-theme="light"] .settings-slider::-moz-range-track {
    background: oklch(0 0 0 / 0.12);
}

.settings-slider-value {
    flex: 0 0 auto;
    min-width: 3.25rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--text-secondary);
}

[data-theme="light"] .dropdown-item-toggle {
    background: oklch(0 0 0 / 0.05);
}

.switch-small {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch-small input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-small {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: oklch(0.450 0 0);
    transition: .4s;
}

.slider-small:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 3px;
    background-color: var(--on-accent);
    transition: .4s;
}

input:checked+.slider-small {
    background-color: var(--accent-blue);
}

input:checked+.slider-small:before {
    transform: translateX(20px);
}

.slider-small.round {
    border-radius: 34px;
}

.slider-small.round:before {
    border-radius: 50%;
}

.task-metadata {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px;
    background: oklch(0 0 0 / 0.15);
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .task-metadata {
    background: oklch(0 0 0 / 0.03);
}

.timestamp-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.timestamp-label {
    font-weight: 600;
}

.timestamp-value {
    color: var(--text-primary);
    opacity: 0.9;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: oklch(0 0 0 / 0.7);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

html.add-task-composer-open .modal-overlay {
    z-index: 10060;
}

#confirm-modal-overlay,
#automation-confirm-modal-overlay,
#reset-modal-overlay,
#backup-reminder-modal-overlay {
    z-index: 4000;
    /* Higher than regular modal overlays */
}

html.add-task-composer-open #confirm-modal-overlay,
html.add-task-composer-open #automation-confirm-modal-overlay,
html.add-task-composer-open #reset-modal-overlay,
html.add-task-composer-open #backup-reminder-modal-overlay {
    z-index: 10070;
}

/* List search keeps the board visible so reordered lists show through */
#search-modal-overlay.is-searching-lists {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: oklch(0 0 0 / 0.12);
}

.search-mode-switch {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 3px;
    border-radius: 10px;
    background: oklch(0 0 0 / 0.25);
}

.search-mode-btn {
    flex: 1 1 0;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.search-mode-btn.is-active {
    background: var(--accent-blue);
    color: white;
}

.search-list-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.mobile-tool-menu {
    display: none;
}

.mobile-tool-trigger {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    border: none;
    border-radius: inherit;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-tool-trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    flex: 0 0 auto;
}

.mobile-tool-trigger.is-open::after {
    transform: translateY(2px) rotate(-135deg);
}

.mobile-tool-dropup {
    position: fixed;
    z-index: 9600;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: oklch(0.18 0.015 270 / 0.98);
    box-shadow: 0 -16px 36px oklch(0 0 0 / 0.45);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tool-dropup[hidden] {
    display: none !important;
}

.mobile-tool-dropup-item {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-tool-dropup-item:active,
.mobile-tool-dropup-item:focus-visible {
    background: color-mix(in oklch, var(--accent-blue) 28%, transparent);
}

.mobile-tool-dropup-item.is-settings {
    gap: 10px;
    margin-top: 6px;
    color: oklch(0.8 0.08 250);
    font-weight: 800;
    background: color-mix(in oklch, var(--accent-blue) 18%, transparent);
}

.mobile-tool-settings-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("setting-icon.svg") center / contain no-repeat;
    mask: url("setting-icon.svg") center / contain no-repeat;
}

[data-theme="light"] .mobile-tool-dropup-item.is-settings {
    color: oklch(0.48 0.14 259);
    background: color-mix(in oklch, var(--accent-blue) 14%, white);
}

[data-theme="light"] .mobile-tool-dropup {
    background: oklch(0.98 0.005 270 / 0.98);
}

.mobile-tool-drag-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 4px;
    padding: 8px;
    border-radius: 12px;
    background: color-mix(in oklch, var(--accent-red) 16%, transparent);
}

.mobile-tool-drag-slot.is-on {
    background: color-mix(in oklch, var(--accent-green) 18%, transparent);
}

.mobile-tool-drag-caption {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.mobile-tool-drag-caption.is-off,
.settings-drag-state.is-off {
    color: var(--accent-red);
}

.mobile-tool-drag-caption.is-on,
.settings-drag-state.is-on {
    color: var(--accent-green);
}

.mobile-tool-drag-slot .drag-fill,
.settings-drag-link .drag-fill {
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 12px;
}

.settings-drag-link .drag-fill {
    width: min(100%, 280px);
}

.mobile-tool-drag-slot .drag-fill-switch,
.settings-drag-link .drag-fill-switch {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    transform: none !important;
}

.mobile-tool-drag-slot .drag-fill-half,
.settings-drag-link .drag-fill-half {
    font-size: 0.82rem;
}

.settings-drag-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in oklch, var(--accent-red) 45%, var(--glass-border));
    background: color-mix(in oklch, var(--accent-red) 12%, oklch(0 0 0 / 0.2));
}

.settings-drag-link.is-on {
    border-color: color-mix(in oklch, var(--accent-green) 50%, var(--glass-border));
    background: color-mix(in oklch, var(--accent-green) 12%, oklch(0 0 0 / 0.2));
}

.settings-drag-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.settings-drag-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.settings-drag-state {
    font-size: 0.85rem;
    font-weight: 800;
}

.mobile-dock-label {
    display: none;
}

.mobile-dock-grid,
.settings-mobile-summary {
    display: none;
}

/* VERSION INDICATOR */
.app-version-menu-item {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.5;
    text-align: center;
    padding: 15px 0 5px 0;
    width: 100%;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.modal {
    width: 90%;
    max-width: 450px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 85vh;
    overflow-y: auto;
    /* Allow scrolling for long lists */
}

.features-help-modal.modal {
    overflow: hidden;
    max-height: min(88vh, 820px);
}

/* Edit modal: keep chrome/border on the outer frame; scroll inside */
#modal-overlay .modal {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.modal-scroll {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    flex: 1 1 auto;
}

/* Fancy gradient outline must not scroll with modal content (cuts through sections).
   Keep it only when the modal chrome itself does not scroll (has .modal-scroll child). */
[data-theme="fancy"] .modal.glass-panel:not(:has(> .modal-scroll))::after {
    display: none;
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    /* Keep title fixed */
}

.modal-header-row h2 {
    margin: 0;
    font-size: 1.2rem;
}

#modal-task-input,
#bulk-add-input {
    min-height: 180px;
}

.glass-input {
    min-height: 80px;
}

#modal-task-input,
#bulk-add-input,
.glass-input {
    width: 100%;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    font-size: 1rem;
    line-height: 1.5;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border 0.2s;
}

#modal-task-input:focus,
#bulk-add-input:focus,
.glass-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.modal-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 5px;
}

.modal-divider {
    border-top: 1px solid var(--glass-border);
    margin: 15px 0;
}

.manual-move-section h3 {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-picker-section h3 {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    background: oklch(0.320 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    transition: transform 0.2s;
}

.color-btn:hover {
    transform: scale(1.1);
    border-color: var(--on-accent);
}

.current-locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.location-tag {
    background: oklch(1 0 0 / 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.full-width {
    width: 100%;
}

.move-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manual-transfer-mode-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.manual-transfer-mode-label select {
    min-width: 140px;
    flex: 1;
    max-width: 220px;
}

.move-buttons {
    display: flex;
    gap: 10px;
}

.move-buttons .btn {
    flex: 1;
}



/* Multi-select actions live inside .app-header (top row), not a separate floating panel */
.floating-action-bar.header-multi-select {
    position: relative;
    width: 100%;
    flex: 1 0 100%;
    order: -1;
    margin: 0;
    padding: 8px 4px 10px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 1;
    flex-shrink: 0;
}

.floating-action-bar.header-multi-select.hidden {
    display: none !important;
}

.floating-bar-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Quick Move List Styles */
.quick-move-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 5px;
}

.quick-move-board-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-left: 5px;
    opacity: 0.8;
}

.quick-move-board-header:first-child {
    margin-top: 0;
}

.quick-move-item {
    width: 100%;
    text-align: left;
    background: oklch(1 0 0 / 0.05);
    border: 1px solid var(--glass-border);
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quick-move-item:hover {
    background: oklch(1 0 0 / 0.1);
    transform: translateX(4px);
    border-color: var(--accent-blue);
}

.quick-move-item:active {
    transform: scale(0.98);
}

.quick-move-item i {
    opacity: 0.5;
    font-size: 1.1rem;
}



.color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(1 0 0 / 0.1);
    color: var(--text-secondary);
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.selected {
    border-color: var(--on-accent);
    box-shadow: 0 0 10px oklch(1 0 0 / 0.5);
}

.current-locations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: oklch(0 0 0 / 0.2);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .location-item {
    background: oklch(0 0 0 / 0.05);
}

.location-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.location-remove-btn {
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.location-remove-btn:hover {
    color: var(--accent-red);
}

.move-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.full-width {
    width: 100%;
}

.move-buttons {
    display: flex;
    gap: 10px;
}

.move-buttons .btn {
    flex: 1;
    font-size: 0.85rem;
}

.image-modal-content {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#full-size-image {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 0 30px oklch(0 0 0 / 0.5);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 50px;
    background: oklch(0 0 0 / 0.3);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    margin-top: 10px;
    overflow: hidden;
    touch-action: none;
    transition: border-color 0.3s, background 0.3s;
}

.slider-container.unlocked {
    border-color: var(--accent-red);
    background: oklch(0.637 0.208 25.3 / 0.1);
}

.slider-container.unlocked .slider-text {
    color: var(--accent-red);
    font-weight: bold;
}

.slider-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
    transition: opacity 0.2s;
}

.slider-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 46px;
    height: 46px;
    background: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(0 0 0);
    font-size: 1.2rem;
    cursor: grab;
}

@media (max-width: 600px) {
    .app-header {
        padding: 10px;
    }

    h1 {
        font-size: 1.2rem;
    }

    .header-controls {
        gap: 8px;
        width: 100%;
        justify-content: space-between;
        margin-top: 5px;
    }

    .control-item {
        margin-bottom: 0;
    }

    .list-column {
        min-width: 85vw;
        max-width: 85vw;
    }

    .kanban-columns {
        --kanban-col-width: 85vw;
        scroll-snap-type: x mandatory;
        padding-left: 0;
        padding-right: 0;
    }

    .kanban-column,
    .kanban-column-pane {
        scroll-snap-align: center;
    }

    .board-container {
        scroll-snap-type: x mandatory;
        padding-left: 10px;
        padding-right: 10px;
    }

    .list-column,
    .add-list-placeholder {
        scroll-snap-align: center;
    }

    .add-list-placeholder {
        width: 85vw;
        min-width: 85vw;
        max-width: 85vw;
    }

    /* Floating Bottom Header for Slim Mobile (Phone App Style) */
    @media (max-width: 500px) {
        .app-header {
            position: fixed !important;
            top: auto !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            margin: 0 !important;
            padding-top: 8px !important;
            padding-right: var(--tool-panel-side-padding, 14px) !important;
            padding-bottom: var(--tool-panel-bottom-offset, 8px) !important;
            padding-left: var(--tool-panel-side-padding, 14px) !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 3px !important;
            z-index: 9000 !important;
            border-radius: 18px 18px 0 0 !important;
            background: var(--dropdown-bg-glass) !important;
            border: 1px solid var(--glass-border) !important;
            border-bottom: none !important;
            box-shadow: 0 10px 40px oklch(0 0 0 / 0.6) !important;
            backdrop-filter: blur(25px) !important;
            -webkit-backdrop-filter: blur(25px) !important;
            width: auto !important;
        }

        .header-row {
            display: flex !important;
            width: 100% !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 5px !important;
            min-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .header-row.tag-mode-row {
            align-items: stretch !important;
            overflow: visible !important;
            padding: 0 !important;
            order: 2 !important;
            border-top: none !important;
            margin: 0 !important;
            flex-direction: column !important;
            gap: 0 !important;
            flex: 0 0 auto !important;
            width: 100% !important;
        }

        .tag-tools-block {
            order: 1 !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 3px !important;
            border-top: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .header-row.tag-mode-row.is-filtering {
            gap: 3px !important;
        }

        .tag-tools-block.is-filtering .tag-filter-label:not([hidden]),
        .tag-mode-row.is-filtering .tag-filter-label:not([hidden]) {
            margin-bottom: 2px !important;
        }

        .tag-mode-row.is-filtering .tag-mode-buttons {
            padding-bottom: 2px !important;
        }

        /* Mobile dock (header at bottom): filter label above tag buttons */
        .tag-tools-block > .tag-filter-label,
        .tag-mode-row .tag-filter-label {
            order: 1 !important;
            align-self: center !important;
            text-align: center !important;
        }

        .tag-mode-row .tag-mode-buttons {
            order: 2 !important;
        }

        .header-row-meta {
            order: 3 !important;
            width: 100% !important;
            justify-content: stretch !important;
            gap: 6px !important;
        }

        .header-row-meta .header-meta-control {
            flex: 1 1 0 !important;
            justify-content: center !important;
            min-width: 0 !important;
        }

        /* 8+ tags: Custom + Drag match tag size (¼ width) so two extra tags fit on the right */
        .app-header.has-dense-tags .tag-tools-block {
            flex-direction: row !important;
            flex-wrap: wrap !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
            column-gap: 4px !important;
            row-gap: 3px !important;
        }

        .app-header.has-dense-tags .header-row-meta,
        .app-header.has-dense-tags .header-row.tag-mode-row,
        .app-header.has-dense-tags .tag-mode-buttons {
            display: contents !important;
        }

        .app-header.has-dense-tags .tag-filter-label:not([hidden]) {
            flex: 1 1 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            order: 0 !important;
            margin-bottom: 2px !important;
        }

        .app-header.has-dense-tags .header-meta-control,
        .app-header.has-dense-tags .tag-mode-btn-compact {
            flex: 1 1 calc(25% - 4px) !important;
            min-width: 0 !important;
            max-width: calc(25% - 3px) !important;
            width: auto !important;
            min-height: 24px !important;
            height: 24px !important;
            max-height: 24px !important;
            box-sizing: border-box !important;
        }

        .app-header.has-dense-tags .header-meta-control {
            padding: 0 3px !important;
            gap: 2px !important;
            justify-content: center !important;
            overflow: hidden !important;
        }

        .app-header.has-dense-tags .sort-container label {
            display: none !important;
        }

        .app-header.has-dense-tags .header-meta-control .glass-select {
            width: 100% !important;
            max-width: 100% !important;
            font-size: 0.58rem !important;
            padding: 0 !important;
            text-overflow: ellipsis !important;
        }

        .app-header.has-dense-tags .header-meta-control .label {
            font-size: 0.55rem !important;
            margin: 0 !important;
        }

        .app-header.has-dense-tags .header-meta-control .switch-small {
            transform: scale(0.72);
            margin: 0 !important;
        }

        .header-action-slots {
            order: 3 !important;
            width: 100% !important;
        }

        /* Board selector + stats sit at the bottom of the dock */
        .header-row-1 {
            order: 4 !important;
        }

        /* Dynamic equal slots — column count from JS (--slot-cols) */
        .header-action-slots.is-slot-layout {
            display: grid !important;
            grid-template-columns: repeat(var(--slot-cols, 4), minmax(0, 1fr)) !important;
            grid-auto-rows: var(--slot-row-h, 30px) !important;
            grid-auto-flow: dense !important;
            gap: var(--slot-gap, 4px) !important;
            align-items: stretch !important;
            justify-content: stretch !important;
        }

        .header-action-slots.is-slot-layout > [data-slot-id] {
            width: 100% !important;
            min-width: 0 !important;
            height: var(--slot-row-h, 30px) !important;
            min-height: var(--slot-row-h, 30px) !important;
            max-height: var(--slot-row-h, 30px) !important;
            box-sizing: border-box !important;
        }

        .header-action-slots.is-slot-layout > #add-list-btn {
            font-size: 0.65rem !important;
            padding: 0 4px !important;
        }

        .tag-mode-buttons {
            flex-wrap: wrap !important;
            overflow: visible !important;
            justify-content: center !important;
            row-gap: 3px !important;
            column-gap: 4px !important;
            padding: 0 !important;
        }

        .control-item {
            margin-bottom: 0 !important;
        }

        /* --- Unified header ACTION buttons (tappable) --- */
        .app-header button.btn:not(.multi-select-btn),
        .app-header button.icon-btn-large,
        .app-header .options-btn-styled,
        .app-header .board-dropdown-btn {
            min-height: 30px !important;
            height: 30px !important;
            min-width: 30px !important;
            padding: 0 9px !important;
            margin: 0 !important;
            border-radius: 9px !important;
            border: 1px solid color-mix(in oklch, var(--glass-border) 70%, white) !important;
            background: color-mix(in oklch, var(--accent-blue) 22%, oklch(1 0 0 / 0.12)) !important;
            color: var(--text-primary) !important;
            box-shadow: none !important;
            font-size: 0.7rem !important;
            font-weight: 650 !important;
            line-height: 1 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
            transform: none !important;
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }

        .app-header button.icon-btn-large {
            width: 30px !important;
            padding: 0 !important;
            font-size: 1.2rem !important;
        }

        .app-header button.icon-btn-large.active {
            color: var(--accent-blue) !important;
            border-color: color-mix(in oklch, var(--accent-blue) 55%, var(--glass-border)) !important;
            background: color-mix(in oklch, var(--accent-blue) 28%, oklch(1 0 0 / 0.08)) !important;
        }

        .app-header .options-btn-styled {
            width: 32px !important;
            min-width: 32px !important;
            height: 32px !important;
            min-height: 32px !important;
            padding: 0 !important;
        }

        .app-header .options-btn-styled svg {
            width: 17px !important;
            height: 17px !important;
        }

        /* Multi-select: exclude from unified 1px border — bolder blue chrome */
        .app-header button.btn.multi-select-btn:not(.is-featured-slot),
        .app-header .header-action-slots button.btn.multi-select-btn:not(.is-featured-slot) {
            min-height: 30px !important;
            height: 30px !important;
            width: 32px !important;
            min-width: 32px !important;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 9px !important;
            border: 2.5px solid var(--accent-blue) !important;
            background: color-mix(in oklch, var(--accent-blue) 42%, oklch(1 0 0 / 0.08)) !important;
            color: var(--text-primary) !important;
            box-shadow: 0 0 10px color-mix(in oklch, var(--accent-blue) 35%, transparent) !important;
            font-size: 0.7rem !important;
            line-height: 1 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            transform: none !important;
            flex-shrink: 0 !important;
        }

        /* Featured multi-select keeps blue chrome but uses double-row height */
        .app-header .header-action-slots.is-slot-layout > button.btn.multi-select-btn.is-featured-slot {
            border: 2.5px solid var(--accent-blue) !important;
            background: color-mix(in oklch, var(--accent-blue) 42%, oklch(1 0 0 / 0.08)) !important;
            box-shadow: 0 0 10px color-mix(in oklch, var(--accent-blue) 35%, transparent) !important;
            width: 100% !important;
            min-width: 0 !important;
            padding: 0 !important;
            border-radius: 9px !important;
        }

        .app-header .header-action-slots.is-slot-layout > [data-slot-id] {
            width: 100% !important;
            min-width: 0 !important;
        }

        .app-header .header-action-slots.is-slot-layout > button.btn.multi-select-btn:not(.is-featured-slot),
        .app-header .header-action-slots.is-slot-layout > button.btn:not(.is-featured-slot),
        .app-header .header-action-slots.is-slot-layout > button.icon-btn-large:not(.is-featured-slot),
        .app-header .header-action-slots.is-slot-layout > .options-btn-styled:not(.is-featured-slot) {
            width: 100% !important;
            min-width: 0 !important;
            height: var(--slot-row-h, 30px) !important;
            min-height: var(--slot-row-h, 30px) !important;
            max-height: var(--slot-row-h, 30px) !important;
        }

        /* Featured double-row slot — must win over unified button height rules */
        .app-header .header-action-slots.is-slot-layout > button.is-featured-slot,
        .app-header .header-action-slots.is-slot-layout > button.btn.is-featured-slot,
        .app-header .header-action-slots.is-slot-layout > button.btn.multi-select-btn.is-featured-slot,
        .app-header .header-action-slots.is-slot-layout > button.icon-btn-large.is-featured-slot,
        .app-header .header-action-slots.is-slot-layout > button.options-btn-styled.is-featured-slot {
            grid-row: 1 / span 2 !important;
            grid-column: 1 !important;
            width: 100% !important;
            height: calc(var(--slot-row-h, 30px) * 2 + var(--slot-gap, 4px)) !important;
            min-height: calc(var(--slot-row-h, 30px) * 2 + var(--slot-gap, 4px)) !important;
            max-height: none !important;
            align-self: stretch !important;
        }

        .app-header .header-action-slots.is-slot-layout > button.is-featured-slot svg {
            width: 22px !important;
            height: 22px !important;
        }

        .app-header .header-action-slots.is-slot-layout > button.is-featured-slot.icon-btn-large {
            font-size: 1.35rem !important;
        }

        .app-header button.btn.multi-select-btn svg {
            width: 20px !important;
            height: 20px !important;
        }

        .app-header button.btn.multi-select-btn.active {
            background: color-mix(in oklch, var(--accent-blue) 58%, oklch(1 0 0 / 0.06)) !important;
            border: 2.5px solid color-mix(in oklch, var(--accent-blue) 80%, white) !important;
            box-shadow: 0 0 14px color-mix(in oklch, var(--accent-blue) 55%, transparent) !important;
            transform: none !important;
        }

        .app-header .board-dropdown-btn {
            max-width: 42vw !important;
        }

        .app-header .board-dropdown-btn span {
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            max-width: 28vw !important;
        }

        .app-header .tag-mode-btn {
            min-height: 39px !important;
            padding: 2px 7px !important;
            font-size: 0.62rem !important;
            box-shadow: none !important;
        }

        .app-header .tag-mode-btn.is-selected {
            border-color: currentColor !important;
            box-shadow:
                inset 0 0 0 1.5px currentColor,
                inset 0 0 6px color-mix(in srgb, currentColor 30%, transparent) !important;
            animation: tagSelectedPulse 2.8s ease-in-out infinite !important;
        }

        .app-header .floating-bar-buttons {
            gap: 4px !important;
        }

        /* --- Unified header META (stats / non-buttons) --- */
        .app-header .header-meta:not([hidden]),
        .app-header .total-count-badge:not([hidden]),
        .app-header .tag-filter-label.header-meta:not([hidden]) {
            min-height: 24px !important;
            height: auto !important;
            padding: 3px 8px !important;
            margin: 0 !important;
            border-radius: 7px !important;
            border: 1px dashed color-mix(in oklch, var(--text-secondary) 35%, transparent) !important;
            background: oklch(1 0 0 / 0.04) !important;
            color: var(--text-secondary) !important;
            box-shadow: none !important;
            font-size: 0.62rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.01em !important;
            line-height: 1.2 !important;
            text-transform: none !important;
            cursor: default !important;
            pointer-events: none !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 4px !important;
            align-self: center !important;
        }

        .app-header .header-meta[hidden],
        .app-header .tag-filter-label[hidden] {
            display: none !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            min-height: 0 !important;
            height: 0 !important;
        }

        .app-header #daily-completed-count.header-meta:not([hidden]) {
            color: var(--accent-green) !important;
            border-color: color-mix(in oklch, var(--accent-green) 40%, transparent) !important;
        }

        .app-header .tag-filter-label.header-meta:not([hidden]) {
            color: var(--tag-filter-color, var(--accent-blue)) !important;
            border-style: solid !important;
            border-color: var(--tag-filter-color, var(--accent-blue)) !important;
            background: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 12%, transparent) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.04em !important;
            font-size: 0.6rem !important;
            margin-bottom: 2px !important;
        }

        .app-header .tag-mode-row.is-filtering .tag-mode-buttons {
            padding-bottom: 2px !important;
        }

        /* Meta controls (interactive but not action buttons): recessed look */
        .app-header .header-meta-control {
            min-height: 30px !important;
            height: 30px !important;
            padding: 0 6px !important;
            margin: 0 !important;
            border-radius: 9px !important;
            border: 1px solid color-mix(in oklch, var(--glass-border) 80%, transparent) !important;
            background: oklch(0 0 0 / 0.22) !important;
            box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.25) !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 4px !important;
        }

        [data-theme="light"] .app-header .header-meta-control {
            background: oklch(0 0 0 / 0.05) !important;
            box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.06) !important;
        }

        .app-header .header-meta-control .glass-select {
            background: transparent !important;
            border: none !important;
            padding: 0 2px !important;
            font-size: 0.68rem !important;
            min-height: 0 !important;
            height: auto !important;
            color: var(--text-secondary) !important;
        }

        .app-header .header-meta-control .label,
        .app-header .header-meta-control label {
            font-size: 0.65rem !important;
            color: var(--text-secondary) !important;
            margin: 0 !important;
        }

        .app-header .header-meta-control.toggle-group,
        .app-header .toggle-group.header-meta-control {
            background: oklch(0 0 0 / 0.22) !important;
            padding: 0 6px !important;
            gap: 4px !important;
        }

        [data-theme="light"] .app-header .toggle-group.header-meta-control {
            background: oklch(0 0 0 / 0.05) !important;
        }

        .app-header .header-meta-control .switch-small {
            margin: 0 !important;
            transform: scale(0.85);
            transform-origin: center;
        }

        .app-header .action-group {
            gap: 4px !important;
        }

        /* Adjust main container to fill more height */
        .board-container {
            /* Fallback matches prior magic number; JS sets --slim-bottom-clearance from measured header */
            padding-top: var(--list-top-gap, 10px) !important;
            margin-top: var(--list-top-pull, 0px) !important;
            padding-bottom: var(--slim-bottom-clearance, 200px) !important;
            height: 100% !important;
            align-items: stretch !important;
        }

        .list-column,
        .add-list-placeholder {
            height: 100% !important;
            max-height: none !important;
        }

        /* Kanban uses the same clearance as normal lists — do not override padding/margins */

        body.kanban-focus-mode .kanban-focus-shell {
            height: 100% !important;
            min-height: 0 !important;
            display: flex !important;
            flex-direction: column !important;
        }

        body.kanban-focus-mode .kanban-columns {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            height: auto !important;
            max-height: 100% !important;
            align-items: stretch !important;
            padding-bottom: 0 !important;
            overflow-x: auto !important;
            overflow-y: auto !important;
        }

        body.kanban-focus-mode .kanban-column.list-column,
        body.kanban-focus-mode .kanban-column-pane,
        body.kanban-focus-mode .kanban-panes-row {
            height: auto !important;
            max-height: none !important;
            align-self: stretch !important;
        }

        /* Move Sync Indicator to the top */
        .sync-indicator {
            top: calc(10px + env(safe-area-inset-top, 0px)) !important;
            bottom: auto !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            z-index: 9500 !important;
        }

        .sync-pill {
            padding: 4px 12px !important;
            font-size: 0.75rem !important;
        }

        /* Multi-select is inside the header panel — no separate floating bar clearance */
        .floating-action-bar.header-multi-select {
            margin: 0 !important;
            padding: 0 0 4px !important;
            width: 100% !important;
            border-bottom: 1px solid var(--glass-border) !important;
            z-index: 1 !important;
            gap: 5px !important;
        }

        /* When multi-select row is visible the header is taller; JS remeasures --slim-bottom-clearance.
           Keep board filling remaining space (same height:100% as normal). */
        body.multi-bar-visible .board-container {
            padding-bottom: var(--slim-bottom-clearance, 200px) !important;
            height: 100% !important;
        }

        /* Hide the redundant board title input on mobile only */
        .project-title-input {
            display: none !important;
        }

        .header-left {
            width: auto !important;
            justify-content: center !important;
            gap: 5px !important;
            flex-wrap: wrap !important;
        }

        .toast {
            bottom: calc(var(--slim-bottom-clearance, 160px) + 12px) !important;
            z-index: 10001 !important;
        }
    }
}

@media (max-width: 600px) {
    #automation-confirm-modal-overlay {
        align-items: flex-start;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        overflow-y: auto;
    }

    .automation-confirm-modal {
        width: 100%;
        max-width: none;
        padding: 22px 16px;
        max-height: none;
        margin: 0 auto;
    }

    .automation-confirm-icon {
        width: 56px;
        height: 56px;
        font-size: 1.65rem;
    }

    .automation-confirm-modal h2 {
        font-size: 1.35rem;
    }

    .automation-confirm-modal p {
        font-size: 0.92rem;
    }

    .automation-confirm-list {
        max-height: 45vh;
        gap: 8px;
    }

    .automation-confirm-actions .btn,
    .automation-confirm-actions .btn.primary {
        min-height: 52px;
        white-space: normal !important;
        line-height: 1.2;
    }
}

.header-row-1 {
    flex: 1;
    order: 1;
}

.header-row-meta {
    flex-shrink: 0;
    order: 1;
}

.tag-filter-toggle {
    appearance: none;
    border: 1px solid var(--glass-border);
    background: oklch(0 0 0 / 0.2);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.tag-filter-toggle.is-on {
    color: var(--tag-filter-color, var(--accent-blue));
    border-color: var(--tag-filter-color, var(--accent-blue));
    background: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 18%, transparent);
}

[data-theme="light"] .tag-filter-toggle {
    background: oklch(0 0 0 / 0.05);
}

.header-action-slots {
    flex-shrink: 0;
    order: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.header-action-slots .action-group {
    display: contents;
}

/* Desktop keeps a familiar toolbar flow */
@media (min-width: 501px) {
    .header-action-slots {
        justify-content: flex-end;
    }

    .tag-tools-block {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .tag-tools-block > .tag-filter-label {
        order: 3;
        flex: 1 1 100%;
        align-self: flex-start;
    }

    .tag-tools-block .header-row-meta {
        order: 1;
        flex: 0 0 auto;
        width: auto;
        justify-content: flex-start;
        gap: 8px;
    }

    .tag-tools-block .tag-mode-row {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        padding: 0;
    }
}

/* --- TAG MODE & TAG PICKERS --- */
.tag-tools-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    padding: 4px 0 0;
    margin: 0;
    min-height: 0;
    overflow: visible;
    order: 4;
    flex: 1 0 100%;
    border-top: 1px solid var(--glass-border);
    padding-top: 10px;
    margin-top: 2px;
    gap: 6px;
}

.tag-mode-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 1;
    min-width: 0;
    width: auto;
    padding: 0;
    margin: 0;
    min-height: 0;
    overflow: visible;
    gap: 0;
}

.tag-mode-with-add {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.tag-mode-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px;
    order: 1;
}

.header-add-task-btn {
    appearance: none;
    -webkit-appearance: none;
    order: 3;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 39px;
    min-width: 39px;
    height: 39px;
    min-height: 39px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--accent-blue);
    color: var(--on-accent, white);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.header-add-task-btn:hover,
.header-add-task-btn:focus-visible {
    filter: brightness(1.08);
    outline: none;
}

.board-container > .list-column.is-add-target {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent-blue) 62%, transparent);
}

/* Desktop (header at top): filter label sits below the tag buttons */
.tag-filter-label {
    order: 2;
    display: none;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tag-filter-color, var(--accent-blue));
    margin: 0;
    padding: 4px 10px;
    line-height: 1.2;
    text-align: left;
    border: 1.5px solid var(--tag-filter-color, var(--accent-blue));
    border-radius: 8px;
    background: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 14%, transparent);
    box-sizing: border-box;
}

.tag-tools-block.is-filtering .tag-filter-label:not([hidden]),
.tag-mode-row.is-filtering .tag-filter-label:not([hidden]) {
    display: inline-block;
    margin-bottom: 2px;
}

.tag-filter-label[hidden] {
    display: none !important;
}

[data-theme="light"] .tag-filter-label {
    background: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 10%, white);
}

.tag-tools-block.is-filtering .tag-mode-buttons,
.tag-mode-row.is-filtering .tag-mode-buttons {
    padding-bottom: 2px;
}

.tag-picker-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    overflow: visible;
    padding: 4px 2px;
}

.quick-tag-section-hint {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.quick-tag-modal {
    max-width: 480px;
}

.quick-tag-progress {
    margin: 0 0 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-tag-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: oklch(0 0 0 / 0.2);
    overflow: hidden;
    margin-bottom: 14px;
}

[data-theme="light"] .quick-tag-progress-bar {
    background: oklch(0 0 0 / 0.08);
}

.quick-tag-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--accent-blue);
    transition: width 0.2s ease;
}

.quick-tag-task-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    margin-bottom: 14px;
}

.quick-tag-current-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.quick-tag-current-tag {
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
}

.quick-tag-task-text {
    margin: 4px 0 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 28vh;
    overflow-y: auto;
}

.quick-tag-picker-heading {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.quick-tag-helper {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.quick-tag-actions {
    margin-top: 16px;
    justify-content: stretch;
}

.quick-tag-actions .btn {
    flex: 1;
}

.quick-tag-actions .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.quick-tag-task-card.is-step-enter {
    animation: quick-tag-step-in 0.22s ease;
}

@keyframes quick-tag-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tag-mode-buttons::-webkit-scrollbar {
    display: none;
}

.tag-mode-btn {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--tag-btn-border, var(--glass-border));
    background: var(--tag-btn-bg, var(--glass-bg));
    color: var(--tag-btn-text, var(--text-primary));
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.tag-mode-btn-compact {
    min-height: 26px;
    padding: 3px 9px;
    font-size: 0.68rem;
}

.app-header #tag-mode-buttons .tag-mode-btn {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
}

.tag-mode-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

.tag-mode-btn.is-selected {
    border-color: currentColor;
    box-shadow:
        inset 0 0 0 1.5px currentColor,
        inset 0 0 6px color-mix(in srgb, currentColor 30%, transparent);
    transform: none;
    animation: tagSelectedPulse 2.8s ease-in-out infinite;
}

.tag-mode-btn.is-selected:hover {
    transform: none;
}

.tag-mode-btn.is-selected::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, currentColor 28%, transparent) 0,
        color-mix(in srgb, currentColor 28%, transparent) 2.5px,
        transparent 2.5px,
        transparent 6.5px
    );
    opacity: 0.75;
    animation: tagSelectedOverlayPulse 2.8s ease-in-out infinite;
}

#tag-mode-buttons .tag-mode-btn.is-all {
    border-color: oklch(1 0 0 / 0.55) !important;
    color: white !important;
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%) !important;
}

#tag-mode-buttons .tag-mode-btn.is-all.is-selected {
    box-shadow:
        inset 0 0 0 2px oklch(1 0 0 / 0.82),
        0 8px 22px -16px oklch(0 0 0 / 0.7) !important;
}

#tag-mode-buttons .tag-mode-btn.is-all.is-selected::before {
    display: none !important;
}

@keyframes tagSelectedPulse {
    0%, 100% {
        filter: brightness(1) saturate(1);
        box-shadow:
            inset 0 0 0 1.5px currentColor,
            inset 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
    }
    50% {
        filter: brightness(1.22) saturate(1.28);
        box-shadow:
            inset 0 0 0 1.75px currentColor,
            inset 0 0 10px color-mix(in srgb, currentColor 45%, transparent);
    }
}

@keyframes tagSelectedOverlayPulse {
    0%, 100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tag-mode-btn.is-selected,
    .app-header .tag-mode-btn.is-selected,
    .tag-mode-btn.is-selected::before {
        animation: none !important;
    }
}

.tag-mode-btn.is-filtering {
    border-color: var(--tag-filter-color, var(--accent-blue));
    box-shadow:
        0 0 0 2px color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 70%, transparent),
        0 0 12px color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 45%, transparent);
    outline: 2px dashed color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 80%, white);
    outline-offset: 2px;
}

.tag-tools-block.is-filtering {
    gap: 4px;
}

.tag-tools-block:not(.is-filtering) {
    gap: 6px;
}

.tag-mode-row.is-filtering {
    gap: 4px;
}

.tag-mode-row:not(.is-filtering) {
    gap: 0;
}

.tag-picker-section {
    margin: 12px 0;
}

.task-card.tag-glow.tag-glow-black {
    box-shadow:
        0 0 0 1.5px oklch(1 0 0 / 0.45),
        0 0 10px oklch(1 0 0 / 0.18),
        inset 0 0 5px oklch(1 0 0 / 0.08);
    border-color: oklch(1 0 0 / 0.4);
}

[data-theme="light"] .task-card.tag-glow.tag-glow-black {
    box-shadow:
        0 0 0 1.5px oklch(0 0 0 / 0.65),
        0 0 8px oklch(0 0 0 / 0.2);
    border-color: oklch(0 0 0 / 0.7);
}

.task-card.tag-glow.tag-glow-white {
    box-shadow:
        0 0 12px oklch(1 0 0 / 0.55),
        0 0 0 1.5px oklch(1 0 0 / 0.7);
    border-color: oklch(1 0 0 / 0.75);
}

[data-theme="light"] .task-card.tag-glow.tag-glow-white {
    box-shadow:
        0 0 0 1.5px oklch(0 0 0 / 0.3),
        0 0 8px oklch(0 0 0 / 0.1);
    border-color: oklch(0 0 0 / 0.35);
}

.task-card.tag-fill[data-tag-tone="white"] .task-checkbox,
.task-card.tag-fill[data-tag-tone="white"] .nested-idea-checkbox {
    border-color: oklch(0 0 0);
}

.task-card.tag-fill[data-tag-tone="white"] input[type="checkbox"] {
    accent-color: oklch(0 0 0);
}

.task-card.tag-fill[data-tag-tone="white"] .task-checkbox::before,
.task-card.tag-fill[data-tag-tone="white"] .nested-idea-checkbox::before {
    background: oklch(0 0 0);
}

[data-theme="fancy"] .task-card.tag-fill[data-tag-tone="white"] .task-checkbox::before,
[data-theme="fancy"] .task-card.tag-fill[data-tag-tone="white"] .nested-idea-checkbox::before {
    background: oklch(0 0 0);
}

.tags-settings-swatch[data-tag-tone="white"],
.tags-settings-free-swatch[data-tag-tone="white"] {
    border-color: oklch(0 0 0 / 0.45);
}

.tags-settings-swatch[data-tag-tone="black"],
.tags-settings-free-swatch[data-tag-tone="black"] {
    border-color: oklch(1 0 0 / 0.4);
}

.tag-picker-section h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.tags-settings-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.tags-settings-header {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.tags-help-btn {
    flex-shrink: 0;
}

.tags-settings-hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.tags-display-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: oklch(0 0 0 / 0.2);
    border: 1px solid var(--glass-border);
    flex-wrap: wrap;
}

[data-theme="light"] .tags-display-mode {
    background: oklch(0 0 0 / 0.05);
}

.tags-display-mode-label {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.tags-display-mode-toggle {
    background: oklch(0 0 0 / 0.2);
    padding: 2px;
    border-radius: 8px;
    display: flex;
    flex-shrink: 0;
}

.tags-display-mode-toggle .mode-btn {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.task-card.tag-fill {
    color: var(--tag-fill-ink, var(--on-accent));
    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
}

.task-card.tag-fill .task-text,
.task-card.tag-fill .task-number,
.task-card.tag-fill .nested-idea-display-item,
.task-card.tag-fill .nested-kanban-stage-label,
.task-card.tag-fill .nested-idea-text,
.task-card.tag-fill .list-description,
.task-card.tag-fill span,
.task-card.tag-fill p,
.task-card.tag-fill label {
    color: var(--tag-fill-ink, var(--on-accent));
}

.task-card.tag-fill .icon-btn,
.task-card.tag-fill .icon-btn i,
.task-card.tag-fill .kanban-arrow-btn,
.task-card.tag-fill .ph {
    color: var(--tag-fill-ink, var(--on-accent));
}

.task-card.tag-fill input[type="checkbox"] {
    accent-color: oklch(1 0 0);
}

.task-card.tag-fill .task-checkbox,
.task-card.tag-fill .nested-idea-checkbox {
    border-color: oklch(1 0 0);
}

.task-card.tag-fill .task-checkbox:checked,
.task-card.tag-fill .nested-idea-checkbox:checked {
    border-color: oklch(1 0 0);
}

.task-card.tag-fill .task-checkbox::before,
.task-card.tag-fill .nested-idea-checkbox::before {
    background: oklch(1 0 0);
}

[data-theme="fancy"] .task-card.tag-fill .task-checkbox::before,
[data-theme="fancy"] .task-card.tag-fill .nested-idea-checkbox::before {
    background: oklch(1 0 0);
}

.task-card.tag-fill.task-completed {
    opacity: 0.78;
}

.task-card.tag-fill.task-completed .task-text {
    color: color-mix(in oklch, var(--tag-fill-ink, var(--on-accent)) 85%, transparent);
    text-decoration-color: color-mix(in oklch, var(--tag-fill-ink, var(--on-accent)) 70%, transparent);
}

.task-card.tag-fill:hover {
    border-color: color-mix(in oklch, var(--tag-fill-ink, var(--on-accent)) 45%, transparent);
    filter: brightness(1.04);
}

.task-card.tag-fill.selected {
    outline: 2px solid var(--tag-fill-ink, var(--on-accent));
    outline-offset: 1px;
}

.task-card.tag-fill.important {
    box-shadow:
        0 0 0 1px color-mix(in oklch, var(--tag-fill-ink, var(--on-accent)) 35%, transparent),
        0 1px 4px color-mix(in oklch, var(--tag-fill-color, var(--accent-blue)) 40%, transparent);
}

/* Subtasks inherit parent tag colour (board + Kanban) */
.task-card.tag-glow .nested-idea-display-item,
.task-card.tag-fill .nested-idea-display-item {
    border-radius: 8px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.task-card.tag-glow .nested-idea-display-item {
    border: 1px solid var(--tag-color, var(--accent-blue));
    background: color-mix(in oklch, var(--tag-color, var(--accent-blue)) 12%, transparent);
    box-shadow: 0 0 8px color-mix(in oklch, var(--tag-color, var(--accent-blue)) 35%, transparent);
    color: var(--text-primary);
}

.task-card.tag-glow .nested-idea-display-item .nested-idea-label,
.task-card.tag-glow .nested-idea-display-item .nested-idea-drag-handle,
.task-card.tag-glow .nested-idea-display-item .nested-kanban-arrow-btn,
.task-card.tag-glow .nested-idea-display-item .ph {
    color: var(--text-primary);
}

.task-card.tag-fill .nested-idea-display-item {
    border: 1px solid color-mix(in oklch, var(--tag-fill-ink, var(--on-accent)) 28%, transparent);
    background: color-mix(in oklch, var(--tag-fill-ink, var(--on-accent)) 12%, transparent);
    color: var(--tag-fill-ink, var(--on-accent));
}

.task-card.tag-fill .nested-idea-display-item .nested-idea-label,
.task-card.tag-fill .nested-idea-display-item .nested-idea-drag-handle,
.task-card.tag-fill .nested-idea-display-item .nested-kanban-arrow-btn,
.task-card.tag-fill .nested-idea-display-item .nested-kanban-arrow-btn .ph,
.task-card.tag-fill .nested-idea-display-item .ph {
    color: var(--tag-fill-ink, var(--on-accent));
}

.task-card.tag-fill .nested-kanban-stage-label {
    color: var(--tag-fill-ink, var(--on-accent));
    opacity: 0.85;
}

.task-card.tag-glow .nested-kanban-stage-label {
    color: var(--tag-color, var(--accent-blue));
}

.task-card.tag-fill .nested-idea-checkbox,
.task-card.tag-glow .nested-idea-checkbox {
    border-color: currentColor;
}

.task-card.tag-fill .nested-idea-checkbox:checked,
.task-card.tag-glow .nested-idea-checkbox:checked {
    border-color: currentColor;
}

.task-card.tag-fill .nested-idea-checkbox::before {
    background: var(--tag-fill-ink, var(--on-accent));
}

.task-card.tag-glow .nested-idea-checkbox::before {
    background: var(--tag-color, var(--accent-blue));
}

.task-card.tag-fill .nested-idea-completed .nested-idea-label,
.task-card.tag-glow .nested-idea-completed .nested-idea-label {
    opacity: 0.7;
}

.tags-settings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tags-settings-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 0;
    touch-action: pan-y;
}

.tags-settings-drag-handle {
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
}

.tags-settings-drag-handle:hover,
.tags-settings-drag-handle:focus-visible {
    opacity: 1;
    color: var(--text-primary);
}

.tags-settings-drag-handle:active {
    cursor: grabbing;
}

.tags-settings-move {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}

.tags-settings-move-btn {
    min-width: 32px;
    min-height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.tags-settings-move-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.tags-settings-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--glass-border);
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

button.tags-settings-swatch:hover {
    transform: scale(1.08);
}

button.tags-settings-swatch.is-selected {
    border-color: var(--on-accent);
    box-shadow:
        0 0 0 2px var(--accent-blue),
        0 0 0 4px color-mix(in oklch, var(--accent-blue) 35%, transparent);
    transform: scale(1.1);
}

.tags-settings-item.is-color-swap-target .tags-settings-swatch {
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--text-primary) 25%, transparent);
}

.tags-settings-item.is-color-swap-target .tags-settings-swatch:hover {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--text-primary) 40%, transparent);
}

.tags-settings-swatch.is-misc {
    background: var(--glass-bg);
    cursor: default;
}

.tags-settings-free-colors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: oklch(0 0 0 / 0.2);
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .tags-settings-free-colors {
    background: oklch(0 0 0 / 0.05);
}

.tags-settings-free-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-right: 2px;
}

.tags-settings-free-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.15s ease;
}

.tags-settings-free-swatch:hover {
    transform: scale(1.1);
    border-color: var(--text-primary);
}

.tags-settings-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
}

.tags-settings-name-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    font-size: 0.9rem;
}

.tags-settings-delete {
    flex-shrink: 0;
}

.tags-add-btn {
    align-self: flex-start;
}

.add-tag-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.add-tag-form-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 500px) {
    .tag-tools-block {
        padding: 0;
        overflow: visible;
        order: 1;
        border-top: none;
        margin-top: 0;
        flex-direction: column;
        gap: 3px;
    }

    .tag-mode-row {
        padding: 0;
        overflow: visible;
        order: 2;
        border-top: none;
        margin-top: 0;
        flex-direction: column;
        gap: 3px;
        width: 100%;
        flex: 0 0 auto;
    }

    /* Mobile dock: label above buttons so pills shift down when filtering */
    .tag-tools-block > .tag-filter-label {
        order: 1;
        align-self: center;
        text-align: center;
    }

    .tag-mode-row .tag-mode-buttons {
        order: 2;
    }

    .header-row-meta {
        order: 3;
        width: 100%;
    }

    .header-action-slots {
        order: 3;
    }

    .header-row-1 {
        order: 4;
    }

    .tag-mode-buttons {
        flex-wrap: wrap;
        overflow: visible;
        justify-content: center;
        align-content: flex-start;
        row-gap: 3px;
        column-gap: 4px;
        padding: 0;
    }

    .tag-mode-btn-compact {
        flex: 1 1 calc(25% - 4px);
        min-width: 4rem;
        max-width: calc(50% - 2px);
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.62rem;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-header.has-dense-tags .tag-mode-btn-compact {
        min-width: 0;
        max-width: calc(25% - 3px);
    }

    .list-header {
        padding: 6px 10px 2px;
        gap: 4px;
        flex-wrap: wrap;
    }

    .list-header-right {
        gap: 4px;
    }

    .list-header-right .icon-btn {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tags-settings-item {
        gap: 6px;
        padding: 6px 0;
    }

    .tags-settings-name-input {
        min-width: 0;
        flex: 1 1 auto;
    }

    .tags-settings-drag-handle,
    .tags-settings-move-btn,
    .tags-settings-delete {
        min-width: 40px;
        min-height: 40px;
    }

    .tags-settings-move-btn {
        min-height: 32px;
    }
}

.hidden {
    display: none !important;
}

/* --- LOGIN OVERLAY --- */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-gradient);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#login-overlay h1 {
    font-size: 3rem;
    margin: 0;
    text-shadow: 0 4px 10px oklch(0 0 0 / 0.3);
}

#google-login-btn {
    background: oklch(1 0 0 / 0.1);
    color: var(--on-accent);
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    box-shadow: 0 0 15px oklch(0.623 0.188 259.8 / 0.5);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    animation: glowPulseBtn 2s infinite alternate;
}

#google-login-btn:hover {
    transform: scale(1.05);
    background: oklch(1 0 0 / 0.15);
    box-shadow: 0 0 25px oklch(0.623 0.188 259.8 / 0.8);
}

@keyframes glowPulseBtn {
    from {
        box-shadow: 0 0 10px oklch(0.623 0.188 259.8 / 0.4);
    }

    to {
        box-shadow: 0 0 20px oklch(0.623 0.188 259.8 / 0.7);
    }
}

[data-theme="light"] #google-login-btn {
    background: oklch(1 0 0);
    color: oklch(0.320 0 0);
    border: none;
    box-shadow: 0 4px 15px oklch(0 0 0 / 0.1);
    animation: none;
}

[data-theme="light"] #google-login-btn:hover {
    transform: scale(1.05);
    background: oklch(1 0 0);
    box-shadow: 0 6px 20px oklch(0 0 0 / 0.15);
}

#logout-btn {
    margin-left: 10px;
    font-weight: bold;
    color: var(--accent-red);
}


/* --- SYNC INDICATOR --- */
.sync-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.sync-indicator.sync-indicator-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.sync-info-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sync-info-menu-item .sync-dot {
    flex-shrink: 0;
}


.sync-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    /* Pill shape */
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 15px oklch(0 0 0 / 0.2);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: oklch(0.820 0 0);
    box-shadow: 0 0 5px oklch(0 0 0 / 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.sync-dot.active {
    background: var(--accent-blue);
    box-shadow: 0 0 8px var(--accent-blue);
}

.sync-dot.online {
    background: var(--accent-green);
    /* Green */
    box-shadow: 0 0 8px var(--accent-green);
}

.sync-dot.offline {
    background: var(--accent-red);
    /* Red */
    box-shadow: 0 0 8px var(--accent-red);
}

.sync-dot.syncing {
    background: var(--accent-yellow);
    /* Yellow */
    box-shadow: 0 0 8px var(--accent-yellow);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* --- SEARCH STYLES --- */
.search-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    background: oklch(0.623 0.188 259.8 / 0.2);
    color: var(--accent-blue);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    flex-shrink: 0;
    border: 1px solid oklch(0.623 0.188 259.8 / 0.3);
}

.search-context-badge i {
    font-size: 0.8rem;
}

[data-theme="light"] .search-context-badge {
    background: oklch(0.623 0.188 259.8 / 0.1);
}

#search-results-container {
    padding-right: 5px;
    /* Scrollbar space */
}

#search-results-container .task-card {
    cursor: default;
    /* No drag in search */
}

/* --- RESET MODAL: BACKUP REQUIRED STYLES --- */
.backup-reminder {
    color: var(--accent-red);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
    font-weight: 500;
}

.backup-reminder.hidden {
    display: none !important;
}

.slider-container.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
}

.slider-container.disabled .slider-handle {
    cursor: not-allowed;
}

#reset-download-backup-btn i {
    font-size: 1.1rem;
}

#reset-download-backup-btn.downloaded {
    background: oklch(0.723 0.192 149.6 / 0.2);
    border-color: oklch(0.723 0.192 149.6 / 0.5);
    color: var(--accent-green);
}

#reset-download-backup-btn.downloaded:hover {
    background: oklch(0.723 0.192 149.6 / 0.3);
}

.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    background: oklch(0.320 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    transition: transform 0.2s;
}

.color-btn:hover {
    transform: scale(1.1);
    border-color: var(--on-accent);
}

.current-locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.location-tag {
    background: oklch(1 0 0 / 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.full-width {
    width: 100%;
}

.move-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.move-buttons {
    display: flex;
    gap: 10px;
}

.move-buttons .btn {
    flex: 1;
}

.multi-kanban-stage-buttons {
    flex-wrap: wrap;
    gap: 12px;
}

.multi-kanban-stage-btn {
    flex: 1 1 calc(50% - 12px);
    min-width: 140px;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
    line-height: 1.3;
    white-space: normal !important;
    text-align: center;
}

/* --- MULTI EDIT MODE --- */
.multi-edit-active .task-checkbox {
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(100%);
}

.multi-edit-active .task-actions {
    display: none !important;
}

.multi-edit-active .kanban-stage-moves {
    display: none !important;
}

.multi-edit-active .task-card {
    cursor: pointer;
}

.multi-edit-active .task-card:hover {
    background: var(--glass-bg);
    /* Highlight on hover to show clickability */
    border-color: var(--accent-blue);
}

.multi-edit-active .task-card.selected {
    background: oklch(0.627 0.233 303.9 / 0.3) !important;
    border: 1px solid var(--accent-purple) !important;
    box-shadow: 0 0 10px oklch(0.627 0.233 303.9 / 0.2);
}

/* Legacy standalone floating-action-bar styles removed — multi-select is .header-multi-select in .app-header */

@keyframes floatUp {
    from {
        transform: translate(-50%, 50px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@media (max-width: 500px) {
    .floating-action-bar.header-multi-select .btn {
        /* Match unified mobile header action buttons */
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 9px !important;
        font-size: 0.7rem !important;
    }

    #multi-selected-count {
        font-size: 0.62rem !important;
        white-space: nowrap;
    }
}

#multi-selected-count {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 1.1rem;
}


#multi-edit-btn.active {
    background: var(--accent-blue);
    color: var(--on-accent);
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px oklch(0.623 0.188 259.8 / 0.4);
}

/* Toggle Buttons for Multi-Edit */
.multi-select-all-btn {
    display: none;
}

.multi-edit-active .multi-select-all-btn {
    display: inline-flex;
    color: var(--accent-blue);
}

.multi-edit-active .list-action-btn {
    display: none;
    /* Hide Bulk Add / Delete List in multi mode */
}

.multi-edit-active .group-by-tag-btn {
    display: none;
}

.multi-edit-active .freeze-list-btn {
    display: none;
}

/* --- MOBILE SCROLLBAR OVERRIDES --- */
@media (max-width: 600px) {

    .task-list {
        overflow-y: scroll !important;
        /* Force scrollbar visibility */
    }

    /* Force permanent and thick scrollbar on mobile lists */
    .task-list::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 14px;
        /* Extra thick for easy touch */
        background: oklch(0 0 0 / 0.05);
        /* Slight track color to force persistence */
        border-radius: 8px;
        display: block;
    }

    .task-list::-webkit-scrollbar-thumb {
        background-color: oklch(1 0 0 / 0.6);
        border-radius: 8px;
    }

    .task-list::-webkit-scrollbar-track {
        background: oklch(0 0 0 / 0.05);
        border-radius: 8px;
    }

    /* Light mode mobile scrollbar */
    [data-theme="light"] .task-list::-webkit-scrollbar-thumb {
        background-color: oklch(0 0 0 / 0.4);
    }

    [data-theme="light"] .task-list::-webkit-scrollbar-track,
    [data-theme="light"] .task-list::-webkit-scrollbar {
        background: oklch(0 0 0 / 0.05);
    }

    /* OLED mode mobile scrollbar */
    [data-theme="oled"] .task-list::-webkit-scrollbar-thumb {
        background-color: oklch(1 0 0 / 0.7);
    }

    [data-theme="oled"] .task-list::-webkit-scrollbar-track,
    [data-theme="oled"] .task-list::-webkit-scrollbar {
        background: oklch(1 0 0 / 0.05);
    }

    .board-container {
        overflow-x: scroll !important;
        /* Force scrollbar visibility */
    }

    /* Board Horizontal Scrollbar (Mobile) */
    .board-container::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 12px;
        display: block;
        background: oklch(0 0 0 / 0.05);
        border-radius: 6px;
    }

    .board-container::-webkit-scrollbar-thumb {
        background-color: oklch(1 0 0 / 0.6);
        border-radius: 6px;
    }

    [data-theme="light"] .board-container::-webkit-scrollbar {
        background: oklch(0 0 0 / 0.05);
    }

    [data-theme="light"] .board-container::-webkit-scrollbar-thumb {
        background-color: oklch(0 0 0 / 0.4);
    }

    [data-theme="oled"] .board-container::-webkit-scrollbar {
        background: oklch(1 0 0 / 0.05);
    }

    [data-theme="oled"] .board-container::-webkit-scrollbar-thumb {
        background-color: oklch(1 0 0 / 0.7);
    }

    /* --- ARCHIVED TASK MOBILE FIXES --- */
    /* Handled globally now for better touch support on all devices */
}

/* --- TOAST NOTIFICATION --- */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px oklch(0 0 0 / 0.3);
    z-index: 10000;
    font-weight: 500;
    color: var(--text-primary);
    animation: slideUpFade 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 200px;
    justify-content: center;
}

[data-theme="oled"] .toast {
    background: oklch(0.180 0 0);
    border: 1px solid oklch(0.320 0 0);
}

.toast i {
    font-size: 1.2rem;
}

.toast.success {
    border-color: oklch(0.723 0.192 149.6 / 0.5);
    background: oklch(0.723 0.192 149.6 / 0.1);
    backdrop-filter: blur(12px);
}

.toast.success i {
    color: var(--accent-green);
}

.toast.warning {
    border-color: oklch(0.795 0.162 86.0 / 0.5);
    background: oklch(0.795 0.162 86.0 / 0.1);
}

.toast.warning i {
    color: var(--accent-yellow);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* MOBILE REORDER FIXES */

.mobile-reorder-list-item {
    background: var(--card-bg);
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-primary);
    cursor: grab;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme="light"] .mobile-reorder-list-item {
    border-color: oklch(0 0 0 / 0.1);
}

.mobile-reorder-list-item:active {
    cursor: grabbing;
}

/* Board reorder modal — mobile-first, sticky save, large hit targets */
.board-reorder-modal {
    width: min(480px, calc(100vw - 24px));
    max-height: min(85dvh, 640px);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow: hidden; /* scroll only inside .board-reorder-list */
}

.board-reorder-help {
    color: var(--text-secondary);
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.board-reorder-list {
    flex: 1 1 auto;
    min-height: 0; /* required for flex child to scroll */
    max-height: min(55dvh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 2px 2px 8px;
    margin-bottom: 12px;
    touch-action: pan-y;
}

.board-reorder-actions {
    flex-shrink: 0;
    margin-top: 0;
}

.board-reorder-actions .btn {
    min-height: 48px;
    width: 100%;
    font-size: 1rem;
}

.board-reorder-item {
    min-height: 52px;
    padding: 10px 12px;
    gap: 8px;
    /* Allow vertical scroll on the row; drag starts from the handle */
    touch-action: pan-y;
}

.board-reorder-handle {
    flex-shrink: 0;
    opacity: 0.55;
    font-size: 1.25rem;
    padding: 6px 2px;
    cursor: grab;
    touch-action: none;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}

.board-reorder-title-text {
    flex: 1 1 auto;
    min-width: 0;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
}

.board-reorder-title-text em {
    font-style: normal;
    font-weight: 500;
    opacity: 0.65;
    font-size: 0.85em;
}

.board-reorder-move {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}

.board-reorder-move-btn {
    min-width: 40px;
    min-height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.board-reorder-move-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.board-reorder-item.sortable-ghost {
    opacity: 0.35;
}

.board-reorder-item.sortable-fallback {
    max-width: min(420px, calc(100vw - 32px));
}

body.board-reorder-open {
    overflow: hidden;
}

@media (max-width: 500px) {
    .board-reorder-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
        padding: 14px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        border-radius: 14px;
    }

    .board-reorder-list {
        max-height: min(58dvh, 480px);
    }

    .board-reorder-item {
        min-height: 56px;
        margin-bottom: 10px;
    }

    .board-reorder-move-btn {
        min-width: 44px;
        min-height: 32px;
    }

    .board-reorder-handle {
        font-size: 1.35rem;
        padding: 8px 4px;
        min-width: 36px;
    }
}

/* AUTO-MOVED RECENTLY */
.auto-moved-recently {
    border-left: 3px solid var(--accent-green) !important;
    background-color: oklch(0.723 0.192 149.6 / 0.05) !important;
}

[data-theme="light"] .auto-moved-recently {
    background-color: oklch(0.723 0.192 149.6 / 0.1) !important;
}




/* --- STORY MANAGER THEME OVERRIDE --- */
body.theme-story-manager {
    --bg-gradient: oklch(0 0 0);
    --glass-bg: oklch(0 0 0 / 0.7);
    --glass-border: oklch(0.750 0.180 55 / 0.25);
    --accent-blue: oklch(0.680 0.190 45);
    /* override blue with orange */
    --accent-purple: var(--accent-orange);
    /* override purple with lighter orange */
    --text-primary: oklch(1 0 0);
    --text-secondary: oklch(0.940 0.040 75);
    --card-bg: oklch(0.220 0 0 / 0.6);
    --dropdown-bg-glass: oklch(0.120 0.020 60 / 0.95);
    --dropdown-bg: oklch(0 0 0);
    /* Fancy Orbs - All Orange */
    --fancy-glow-1: oklch(0.750 0.180 55 / 0.7);
    /* Bright Orange */
    --fancy-glow-2: oklch(0.680 0.210 40 / 0.6);
    /* Mid Orange */
    --fancy-glow-3: oklch(0.550 0.180 40 / 0.55);
    /* Dark Orange */
}

html[data-theme="fancy"] body.theme-story-manager .modal-overlay {
    background: oklch(0 0 0 / 0.85);
}

html[data-theme="fancy"] body.theme-story-manager .confirm-box,
html[data-theme="fancy"] body.theme-story-manager .modal,
html[data-theme="fancy"] body.theme-story-manager .toast {
    background: oklch(0.220 0 0 / 0.9) !important;
    border-color: oklch(0.750 0.180 55 / 0.35) !important;
    box-shadow: 0 15px 40px oklch(0 0 0 / 0.7), 0 0 30px oklch(0.680 0.190 45 / 0.2) !important;
}

body.theme-story-manager .app-header {
    background: var(--glass-bg);
}

body.theme-story-manager .btn.primary {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    box-shadow: 0 4px 15px oklch(0.680 0.190 45 / 0.3);
    color: oklch(1 0 0) !important;
    font-weight: 800;
}

body.theme-story-manager .task-card {
    /* Bracket removed as requested */
}

body.theme-story-manager .list-column {
    background: oklch(0 0 0 / 0.7);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 15px oklch(0 0 0 / 0.3);
}

body.theme-story-manager .menu-action-item i {
    color: var(--accent-blue);
}

body.theme-story-manager .menu-action-item:hover {
    background: oklch(0.680 0.190 45 / 0.1);
    border-color: var(--accent-blue);
}

html[data-theme="fancy"] body.theme-story-manager .menu-action-item:hover {
    background: oklch(0.680 0.190 45 / 0.15);
    border-color: var(--accent-blue);
    box-shadow: 0 6px 20px oklch(0 0 0 / 0.2), 0 0 10px oklch(0.680 0.190 45 / 0.1);
}

body.theme-story-manager .dropdown-item-toggle:hover {
    background: oklch(0.680 0.190 45 / 0.05);
}

body.theme-story-manager input:checked+.slider-small {
    background-color: var(--accent-blue) !important;
}

html[data-theme="fancy"] body.theme-story-manager input:checked+.slider-small {
    background-color: oklch(0.680 0.190 45 / 0.4) !important;
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px oklch(0.680 0.190 45 / 0.2);
}

/* ===================================================================
   STORY MANAGER FANCY THEME FIXES 
   =================================================================== */

html[data-theme="fancy"] body.theme-story-manager {
    background: oklch(0 0 0) !important;
    animation: none;
}

/* Centralized Glowing Orbs (Story Manager specific positions) */
html[data-theme="fancy"] body.theme-story-manager .fancy-orb-1 {
    width: 350px;
    height: 350px;
    top: 15%;
    left: 15%;
    background: radial-gradient(circle, var(--fancy-glow-1) 0%, transparent 80%);
    animation: fancyOrbDrift1 calc(12s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

html[data-theme="fancy"] body.theme-story-manager .fancy-orb-2 {
    width: 300px;
    height: 300px;
    bottom: 25%;
    right: 15%;
    background: radial-gradient(circle, var(--fancy-glow-2) 0%, transparent 80%);
    animation: fancyOrbDrift2 calc(15s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

html[data-theme="fancy"] body.theme-story-manager .fancy-orb-3 {
    width: 250px;
    height: 250px;
    top: 45%;
    left: 35%;
    background: radial-gradient(circle, var(--fancy-glow-3) 0%, transparent 80%);
    animation: fancyOrbDrift3 calc(10s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

html[data-theme="fancy"] body.theme-story-manager .fancy-orb-4 {
    width: 220px;
    height: 220px;
    top: 25%;
    right: 25%;
    background: radial-gradient(circle, var(--fancy-glow-1) 0%, transparent 80%);
    animation: fancyOrbDrift1 calc(14s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

html[data-theme="fancy"] body.theme-story-manager .fancy-orb-5 {
    width: 280px;
    height: 280px;
    bottom: 35%;
    left: 20%;
    background: radial-gradient(circle, var(--fancy-glow-2) 0%, transparent 80%);
    animation: fancyOrbDrift2 calc(11s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

html[data-theme="fancy"] body.theme-story-manager .fancy-orb-6 {
    width: 180px;
    height: 180px;
    top: 55%;
    left: 60%;
    background: radial-gradient(circle, var(--fancy-glow-3) 0%, transparent 80%);
    animation: fancyOrbDrift3 calc(13s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

html[data-theme="fancy"] body.theme-story-manager .task-card:hover {
    border-color: oklch(0.861 0.173 91.9 / 0.4);
    /* Yellow tint border */
    box-shadow: 0 8px 25px oklch(0.861 0.173 91.9 / 0.15), 0 0 15px oklch(0.861 0.173 91.9 / 0.08);
    /* Yellow glow */
}

html[data-theme="fancy"] body.theme-story-manager .add-task-form .btn.primary {
    border-color: oklch(1 0 0 / 0.5);
    color: oklch(1 0 0) !important;
    background: oklch(0.680 0.190 45 / 0.2);
}

html[data-theme="fancy"] body.theme-story-manager .add-task-form .btn.primary:hover {
    background: oklch(0.680 0.190 45 / 0.15);
    border-color: oklch(0.680 0.190 45);
    color: oklch(1 0 0);
    box-shadow: 0 0 15px oklch(0.680 0.190 45 / 0.4);
}

html[data-theme="fancy"] body.theme-story-manager .total-count-badge {
    background: oklch(0.680 0.190 45 / 0.1);
    border-color: oklch(0.680 0.190 45 / 0.2);
    color: oklch(0.860 0.100 80);
    /* lighter orange/yellow text */
}

html[data-theme="fancy"] body.theme-story-manager .mode-btn.active {
    background: oklch(0.680 0.190 45 / 0.25);
    color: oklch(1 0 0);
    box-shadow: 0 0 15px oklch(0.680 0.190 45 / 0.2), inset 0 0 8px oklch(1 0 0 / 0.1);
}

/* Mobile Spread for Story Manager Orbs */
@media (max-width: 600px) {
    html[data-theme="fancy"] body.theme-story-manager .fancy-orb-1 {
        top: 2%;
        left: -10%;
        width: 200px;
        height: 200px;
    }

    html[data-theme="fancy"] body.theme-story-manager .fancy-orb-2 {
        top: 85%;
        right: -10%;
        width: 180px;
        height: 180px;
    }

    html[data-theme="fancy"] body.theme-story-manager .fancy-orb-3 {
        top: 25%;
        left: 5%;
        width: 160px;
        height: 160px;
    }

    html[data-theme="fancy"] body.theme-story-manager .fancy-orb-4 {
        top: 45%;
        right: 5%;
        width: 140px;
        height: 140px;
    }

    html[data-theme="fancy"] body.theme-story-manager .fancy-orb-5 {
        top: 65%;
        left: -5%;
        width: 190px;
        height: 190px;
    }

    html[data-theme="fancy"] body.theme-story-manager .fancy-orb-6 {
        top: 55%;
        right: 10%;
        width: 130px;
        height: 130px;
    }
}

/* Additional UI Elements Overrides for Story Manager Orange */
body.theme-story-manager .icon-btn:hover,
body.theme-story-manager .icon-btn-large:hover {
    color: var(--accent-blue);
}

body.theme-story-manager .icon-btn-large:hover {
    filter: drop-shadow(0 0 8px oklch(0.680 0.190 45 / 0.6));
}

body.theme-story-manager .btn.secondary:hover,
body.theme-story-manager #modal-add-image-btn:hover {
    border-color: var(--accent-blue);
}

body.theme-story-manager .board-item:hover,
body.theme-story-manager .board-item.active {
    background: oklch(0.680 0.190 45 / 0.1);
}

body.theme-story-manager .board-item.active {
    color: var(--accent-blue);
    border-left: 2px solid var(--accent-blue);
}

html[data-theme="fancy"] body.theme-story-manager .icon-btn:hover {
    color: var(--accent-orange);
}

html[data-theme="fancy"] body.theme-story-manager .icon-btn-large:hover {
    color: var(--accent-orange);
    filter: drop-shadow(0 0 8px oklch(0.680 0.190 45 / 0.6));
}

html[data-theme="fancy"] body.theme-story-manager .btn.primary {
    background: linear-gradient(135deg, oklch(0.680 0.190 45 / 0.8), oklch(0.705 0.187 47.6 / 0.8));
    border-color: oklch(0.680 0.190 45 / 0.4);
    box-shadow: 0 0 20px oklch(0.680 0.190 45 / 0.3), 0 0 40px oklch(0.680 0.190 45 / 0.05), inset 0 0 12px oklch(1 0 0 / 0.2);
}

html[data-theme="fancy"] body.theme-story-manager .btn.primary:hover {
    box-shadow: 0 0 35px oklch(0.680 0.190 45 / 0.6), 0 0 15px oklch(0.680 0.190 45 / 0.4), inset 0 0 15px oklch(1 0 0 / 0.35);
}

html[data-theme="fancy"] body.theme-story-manager .btn.secondary:hover,
html[data-theme="fancy"] body.theme-story-manager #modal-add-image-btn:hover {
    border-color: oklch(0.680 0.190 45 / 0.4);
}

html[data-theme="fancy"] body.theme-story-manager .board-item:hover {
    background: oklch(0.680 0.190 45 / 0.15);
}

html[data-theme="fancy"] body.theme-story-manager .board-item.active {
    background: oklch(0.680 0.190 45 / 0.2);
    color: var(--accent-orange);
}

html[data-theme="fancy"] body.theme-story-manager #google-login-btn {
    border-color: oklch(0.680 0.190 45 / 0.3);
    box-shadow: 0 0 25px oklch(0.680 0.190 45 / 0.3);
}

html[data-theme="fancy"] body.theme-story-manager #google-login-btn:hover {
    box-shadow: 0 0 40px oklch(0.680 0.190 45 / 0.5);
    background: oklch(0.680 0.190 45 / 0.1);
}

html[data-theme="fancy"] body.theme-story-manager .slider-handle {
    background: linear-gradient(135deg, oklch(0.680 0.190 45), var(--accent-orange));
    box-shadow: 0 0 15px oklch(0.680 0.190 45 / 0.4), inset 0 0 8px oklch(1 0 0 / 0.2);
}

body.theme-story-manager .sync-pill {
    background: oklch(0.188 0.028 52.7 / 0.8) !important;
    border: 1px solid var(--accent-blue) !important;
    color: var(--text-secondary);
}

html[data-theme="fancy"] body.theme-story-manager .sync-pill {
    background: oklch(0.173 0.021 46.4 / 0.85) !important;
    border-color: oklch(0.680 0.190 45 / 0.3) !important;
    box-shadow: 0 0 15px oklch(0.680 0.190 45 / 0.1);
}

body.theme-story-manager #board-list-container .board-item:hover,
body.theme-story-manager #board-list-container .board-item.active {
    background: oklch(0.680 0.190 45 / 0.15) !important;
    border-color: var(--accent-blue) !important;
}

body.theme-story-manager #board-list-container .board-item.active {
    box-shadow: 0 0 15px oklch(0.680 0.190 45 / 0.2);
}

body.theme-story-manager #board-list-container .board-item.active span,
body.theme-story-manager #board-list-container .board-item.active i {
    color: var(--accent-blue) !important;
}

/* Scrollbar Orange Overrides */
body.theme-story-manager *::-webkit-scrollbar-thumb {
    background-color: var(--accent-blue) !important;
}

body.theme-story-manager *::-webkit-scrollbar-track {
    background: oklch(0.220 0 0 / 0.4) !important;
}

/* Force the body gradient to cover the bottom safe area in the Home Screen app */
@media all and (display-mode: standalone) {
    body {
        height: 100vh !important;
    }
}

/* Nested Ideas Styles — no indent; depth shown via text style */
.nested-ideas-list {
    margin-top: 8px;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.compact-view .nested-ideas-list {
    display: none !important;
}

.nested-idea-display-item {
    font-size: 0.9em;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.nested-idea-display-item.nested-depth-2 .nested-idea-label {
    font-size: 0.92em;
    opacity: 0.88;
    font-weight: 400;
}

.nested-idea-display-item.nested-depth-3 .nested-idea-label {
    font-size: 0.85em;
    opacity: 0.75;
    font-style: italic;
    font-weight: 400;
}

.nested-idea-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.nested-idea-drag-handle,
.nested-idea-editor-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: grab;
    flex-shrink: 0;
    opacity: 0.55;
    touch-action: none;
}

.nested-idea-drag-handle:hover,
.nested-idea-drag-handle:focus-visible,
.nested-idea-editor-drag-handle:hover,
.nested-idea-editor-drag-handle:focus-visible {
    opacity: 1;
    background: oklch(1 0 0 / 0.06);
}

.nested-idea-drag-handle:active,
.nested-idea-editor-drag-handle:active {
    cursor: grabbing;
}

.nested-idea-display-item.sortable-ghost {
    opacity: 0.45;
}

.nested-idea-display-item.sortable-ghost .nested-idea-row {
    background: oklch(0.754 0.139 232.7 / 0.08);
    border-radius: 6px;
}

.nested-idea-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    margin-top: 1px;
    display: grid;
    place-content: center;
    flex-shrink: 0;
}

.nested-idea-checkbox::before {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    background: var(--accent-blue);
    border-radius: 2px;
    transition: 0.1s;
}

.nested-idea-checkbox:checked {
    border-color: var(--accent-blue);
}

.nested-idea-checkbox:checked::before {
    transform: scale(1);
}

.nested-idea-label {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    cursor: pointer;
}

.nested-idea-completed .nested-idea-label {
    text-decoration: line-through;
    opacity: 0.65;
    color: var(--text-secondary);
}

.nested-ideas-list-nested {
    margin: 2px 0 0;
    padding: 0;
    border: none;
}

.nested-idea-deeper-hint {
    font-size: 0.8em;
    font-style: italic;
    color: var(--text-secondary);
    margin: 2px 0;
    opacity: 0.85;
}

.nested-idea-editor-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding-left: 15px;
    border-left: 2px solid var(--border-color);
}

.nested-idea-editor-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.nested-idea-editor-row .nested-idea-editor-drag-handle,
.nested-idea-editor-row .nested-level-badge,
.nested-idea-editor-row .icon-btn {
    margin-top: 6px;
    flex-shrink: 0;
}

.nested-idea-input {
    flex-grow: 1;
    min-width: 0;
    box-sizing: border-box;
    background: oklch(0 0 0 / 0.1);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.35;
    resize: none;
    overflow: hidden;
    height: 2.5rem;
    max-height: 2.5rem;
    word-break: break-word;
    white-space: pre-wrap;
}

.nested-idea-input.is-expanded {
    overflow-y: auto;
    max-height: min(45vh, 20rem);
}

.nested-idea-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.nested-idea-actions {
    display: flex;
    gap: 5px;
}


.nested-indicator {
    display: none;
    font-size: 0.9rem;
    color: var(--accent-blue);
    margin-left: 5px;
    vertical-align: middle;
}

body.compact-view .nested-indicator {
    display: inline-block;
}

.nested-level-badge {
    background: oklch(1 0 0 / 0.1);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 2px;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}

body.theme-story-manager .nested-level-badge {
    background: oklch(0.680 0.190 45 / 0.1);
    border-color: oklch(0.680 0.190 45 / 0.3);
    color: var(--accent-blue);
}

/* Sticky Modal Header Styles */
.modal-header-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: -25px -25px 0 -25px;
    padding: 20px 25px 15px 25px;
    background: var(--dropdown-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

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

.modal-header-sticky .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.modal-header-sticky .mini-action {
    opacity: 0.8;
}

.modal-header-sticky .mini-action:hover {
    opacity: 1;
}

.modal-header-extra-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.modal-header-extra-actions .mini-action {
    flex: 1;
    width: auto;
}

#modal-ai-summary-btn.is-loading i {
    animation: aiSpin 1s linear infinite;
}

#modal-ai-summary-btn:disabled {
    cursor: wait;
    opacity: 0.6;
}

/* --- SPELLCHECK HIGHLIGHT --- */
input[spellcheck="true"]:focus,
textarea[spellcheck="true"]:focus,
[contenteditable="true"][spellcheck="true"]:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 8px oklch(0.623 0.188 259.8 / 0.4) !important;
    outline: none;
}

/* --- STORY MANAGER MULTI-SELECT OVERRIDE --- */
body.theme-story-manager .task-card.selected {
    border-color: var(--accent-orange) !important;
    box-shadow: 0 0 0 3px oklch(0.705 0.187 47.6 / 0.4) !important;
    background: oklch(0.705 0.187 47.6 / 0.1) !important;
}

/* --- NESTED MULTI-SELECT --- */
.nested-idea-editor-row.selected {
    background: oklch(0.623 0.188 259.8 / 0.2) !important;
    border: 1px solid var(--accent-blue) !important;
    border-radius: 8px;
}

body.theme-story-manager .nested-idea-editor-row.selected {
    background: oklch(0.705 0.187 47.6 / 0.2) !important;
    border-color: var(--accent-orange) !important;
}

.nested-multi-select-active .nested-idea-input {
    pointer-events: none;
    opacity: 0.8;
}

.nested-multi-select-active .nested-idea-editor-row {
    cursor: pointer;
    transition: background 0.2s ease;
}

.nested-multi-select-active .nested-idea-editor-row:hover {
    background: oklch(1 0 0 / 0.05);
}

.nested-multi-action-bar {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--dropdown-bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-top: 10px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -4px 20px oklch(0 0 0 / 0.2);
    justify-content: center;
    transition: all 0.3s ease;
}

.nested-multi-action-bar.hidden {
    display: none;
}

.nested-multi-action-bar .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* --- LIST DESCRIPTION STYLING --- */
.list-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 12px 6px 12px;
    padding: 0 5px;
    line-height: 1.4;
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 2px solid var(--glass-border);
}

[data-theme="light"] .list-description {
    color: oklch(0.550 0.015 260);
}

/* --- FROZEN PINNED TASKS STYLING (STICKY AT TOP) --- */
.frozen-tasks-container {
    position: sticky;
    top: -4px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -4px -6px 12px -6px;
    padding: 8px 8px 10px 8px;
    background: color-mix(in oklch, var(--glass-bg, oklch(0.20 0.015 260)) 90%, oklch(0.837 0.164 84.4 / 0.12));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px dashed oklch(0.837 0.164 84.4 / 0.4);
    border-bottom: 2px solid oklch(0.837 0.164 84.4 / 0.65);
    border-radius: 10px;
    box-shadow: 0 6px 18px oklch(0 0 0 / 0.45);
    max-height: 48vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hide completely when empty */
.frozen-tasks-container:empty {
    display: none !important;
}

.frozen-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(0.790 0.160 75); /* Golden/Amber color */
    margin-bottom: 4px;
    padding: 0 2px;
    user-select: none;
}

.frozen-tasks-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.frozen-unpin-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.frozen-unpin-btn:hover {
    color: oklch(0.790 0.160 75);
    background: oklch(0.790 0.160 75 / 0.15);
}

[data-theme="oled"] .frozen-tasks-container {
    background: oklch(0.06 0 0 / 0.96);
    border: 1px dashed oklch(0.837 0.164 84.4 / 0.45);
    border-bottom: 2px solid oklch(0.837 0.164 84.4 / 0.7);
    box-shadow: 0 6px 20px oklch(0 0 0 / 0.85);
}

[data-theme="fancy"] .frozen-tasks-container {
    background: color-mix(in oklch, oklch(0.16 0.03 285 / 0.94) 88%, oklch(0.837 0.164 84.4 / 0.12));
    border-bottom: 2px solid oklch(0.837 0.164 84.4 / 0.65);
    box-shadow: 0 6px 18px oklch(0 0 0 / 0.5);
}

[data-theme="light"] .frozen-tasks-container {
    background: color-mix(in oklch, oklch(0.96 0 0 / 0.96) 88%, oklch(0.666 0.157 58.3 / 0.1));
    border: 1px dashed oklch(0.666 0.157 58.3 / 0.35);
    border-bottom: 2px solid oklch(0.666 0.157 58.3 / 0.6);
    box-shadow: 0 4px 14px oklch(0 0 0 / 0.15);
}

[data-theme="light"] .frozen-tasks-header {
    color: oklch(0.550 0.140 55);
}

[data-theme="light"] .frozen-unpin-btn:hover {
    color: oklch(0.550 0.140 55);
    background: oklch(0.666 0.157 58.3 / 0.15);
}

/* --- WORK TOOLS / KANBAN FOCUS (Phase 2 shell) --- */
.kanban-toggle-btn.is-active,
.kanban-toggle-btn[aria-pressed="true"] {
    color: var(--accent-blue);
    background: oklch(0.623 0.188 259.8 / 0.15);
}

body.kanban-focus-mode .board-container.kanban-focus-board {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: hidden;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    /* padding-bottom comes from slim-mobile / multi-bar rules (same as normal lists) */
}

.kanban-focus-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    gap: 10px;
}

.nested-kanban-view {
    gap: 10px;
}

.nested-kanban-stage-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nested-kanban-stage-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-blue);
    opacity: 0.9;
}

.nested-kanban-completed-group .nested-kanban-stage-label {
    color: var(--text-secondary);
}

.nested-kanban-stage-select {
    display: none;
}

.nested-kanban-stage-moves {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.nested-kanban-arrow-btn.icon-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 2px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    background: oklch(1 0 0 / 0.08);
    border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: 8px;
    opacity: 1;
}

.nested-kanban-arrow-btn.icon-btn:hover {
    color: var(--text-primary);
    background: oklch(1 0 0 / 0.14);
    border-color: oklch(1 0 0 / 0.22);
    opacity: 1;
}

.nested-kanban-arrow-btn.icon-btn:disabled,
.nested-kanban-arrow-btn.icon-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--text-secondary);
    background: oklch(1 0 0 / 0.04);
    border-color: oklch(1 0 0 / 0.06);
    pointer-events: none;
}

.nested-kanban-arrow-btn.icon-btn:disabled:hover,
.nested-kanban-arrow-btn.icon-btn.is-disabled:hover {
    color: var(--text-secondary);
    background: oklch(1 0 0 / 0.04);
    border-color: oklch(1 0 0 / 0.06);
}

[data-theme="light"] .nested-kanban-arrow-btn.icon-btn {
    background: oklch(0 0 0 / 0.04);
    border: 1px solid oklch(0 0 0 / 0.12);
}

[data-theme="light"] .nested-kanban-arrow-btn.icon-btn:hover {
    background: oklch(0 0 0 / 0.08);
    border-color: oklch(0 0 0 / 0.2);
    color: var(--text-primary);
}

[data-theme="light"] .nested-kanban-arrow-btn.icon-btn:disabled,
[data-theme="light"] .nested-kanban-arrow-btn.icon-btn.is-disabled {
    opacity: 0.4;
    background: oklch(0 0 0 / 0.03);
    border-color: oklch(0 0 0 / 0.08);
    color: oklch(0 0 0 / 0.35);
}

.search-subtask-match {
    color: var(--accent-blue);
}

/* Connected Kanban board: one frame, columns as panes, stretch lives inside */
.kanban-columns {
    --kanban-col-width: 300px;
    --kanban-task-gap: 8px;
    display: grid;
    grid-template-columns: repeat(4, var(--kanban-col-width));
    grid-template-rows: auto;
    grid-auto-rows: auto;
    column-gap: 0;
    row-gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: max-content;
    min-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    align-content: start;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(20px);
}

.kanban-board-add {
    flex-shrink: 0;
    width: 100%;
    padding: 0;
}

.kanban-board-add.hidden {
    display: none;
}

.kanban-board-add .add-task-container {
    padding: 8px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(20px);
}

.kanban-board-add[data-add-position="top"] {
    margin-bottom: 0;
}

.kanban-board-add[data-add-position="top"] .add-task-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.kanban-board-add[data-add-position="top"] + .kanban-columns {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.kanban-columns + .kanban-board-add[data-add-position="bottom"] .add-task-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    margin-top: 0;
}

.kanban-columns:has(+ .kanban-board-add[data-add-position="bottom"]:not(.hidden)) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.kanban-columns > .kanban-column-header {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 15px;
    border-right: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    background: oklch(1 0 0 / 0.03);
    border-radius: 0;
}

.kanban-columns > .kanban-column-header[data-stage="finished"] {
    border-right: none;
}

.kanban-panes-row {
    display: grid;
    grid-template-columns: subgrid;
    min-height: 160px;
    align-self: stretch;
    align-items: start;
    overflow: visible;
}

@supports not (grid-template-columns: subgrid) {
    .kanban-panes-row {
        grid-template-columns: repeat(4, var(--kanban-col-width));
    }
}

.kanban-body-stack {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--kanban-task-gap);
    min-height: 160px;
    min-width: 0;
    overflow: visible;
}

.kanban-pinned-band:not(.hidden) + .kanban-body-stack {
    margin-top: var(--kanban-task-gap);
}

.kanban-body-stack > .kanban-panes-row {
    grid-column: unset;
    flex: 1 1 auto;
    min-height: 160px;
    display: grid;
    grid-template-columns: repeat(4, var(--kanban-col-width));
}

/* Board-wide pinned section — stretches across all columns */
.kanban-pinned-band {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--kanban-task-gap);
    padding: 8px 12px 12px;
    background: color-mix(in oklch, var(--glass-bg, oklch(0.20 0.015 260)) 92%, oklch(0.837 0.164 84.4 / 0.12));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 2px solid oklch(0.837 0.164 84.4 / 0.45);
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.35);
}

.kanban-pinned-band.hidden {
    display: none !important;
}

.kanban-pinned-band > .kanban-pinned-header {
    padding: 0 14px 2px;
}

.kanban-pinned-stretch-grid,
.kanban-stretch-grid,
.kanban-pinned-zones-row {
    display: grid;
    grid-template-columns: repeat(4, var(--kanban-col-width));
    column-gap: 0;
    row-gap: var(--kanban-task-gap);
    align-items: stretch;
}

.kanban-pinned-stretch-grid.hidden,
.kanban-stretch-grid.hidden,
.kanban-stretch-grid:empty,
.kanban-pinned-stretch-grid:empty,
.kanban-pinned-zones-row.hidden {
    display: none;
}

/* While dragging, keep pinned drop targets available across the board */
body.kanban-dragging .kanban-pinned-band.hidden {
    display: flex !important;
}

body.kanban-dragging .kanban-pinned-zones-row.hidden {
    display: grid !important;
}

.kanban-panes-row > .kanban-column-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: auto;
    border-right: 1px solid var(--glass-border);
    background: transparent;
    overflow: visible;
}

.kanban-panes-row > .kanban-column-pane[data-stage="finished"] {
    border-right: none;
}

.kanban-column-pane .kanban-column-body {
    flex: 1 1 auto;
    overflow: visible;
    min-height: 0;
}

/* Stretched cards span columns via CSS grid-column (set inline).
   Outer inset matches .kanban-stage-tasks (12px); inner padding matches .task-card. */
.kanban-stretched-card {
    min-width: 0;
    margin: 0 12px;
    align-self: stretch;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.04);
    background: var(--glass-bg);
    padding: 6px 8px;
    box-sizing: border-box;
    z-index: 2;
}

/* Keep parent tag colour on stretched Kanban cards (don't let stretch chrome override) */
.kanban-stretched-card.tag-fill {
    background: var(--tag-fill-color, var(--tag-color)) !important;
    border-color: var(--tag-fill-color, var(--tag-color)) !important;
    color: var(--tag-fill-ink, var(--on-accent));
}

.kanban-stretched-card.tag-glow {
    border-color: var(--tag-color, var(--accent-blue)) !important;
}

.kanban-pinned-stretch-grid .kanban-stretched-card:not(.tag-fill) {
    background: oklch(0.837 0.164 84.4 / 0.08);
    border-color: oklch(0.837 0.164 84.4 / 0.3);
}

.kanban-stretch-grid .kanban-stretched-card:not(.tag-fill) {
    background: oklch(0.754 0.139 232.7 / 0.07);
    border-color: oklch(0.754 0.139 232.7 / 0.28);
}

[data-theme="light"] .kanban-pinned-stretch-grid .kanban-stretched-card:not(.tag-fill) {
    background: oklch(0.666 0.157 58.3 / 0.08);
    border-color: oklch(0.666 0.157 58.3 / 0.28);
}

[data-theme="light"] .kanban-stretch-grid .kanban-stretched-card:not(.tag-fill) {
    background: oklch(0.685 0.148 237.3 / 0.08);
    border-color: oklch(0.685 0.148 237.3 / 0.28);
}

.kanban-stretched-card .task-content-wrapper {
    width: 100%;
}

.kanban-stretched-card .nested-kanban-span-grid {
    display: grid;
    grid-template-columns: repeat(var(--kanban-span, 2), minmax(0, 1fr));
    gap: 0;
    margin: 10px 0 0;
    padding: 8px 0 0;
    border: none;
    border-top: 1px solid var(--glass-border);
    border-left: none;
}

.kanban-stretched-card .nested-kanban-stage-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0 8px;
    border-left: 1px solid var(--glass-border);
}

.kanban-stretched-card .nested-kanban-stage-col:first-child {
    border-left: none;
}

.kanban-stretched-card .nested-kanban-stage-empty {
    font-size: 0.8em;
    opacity: 0.35;
    padding: 4px 0;
}

.kanban-stretched-card .nested-kanban-completed-span {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 8px 8px 0;
    border-top: 1px solid var(--glass-border);
}

.kanban-focus-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(20px);
    flex-shrink: 0;
}

.kanban-focus-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.kanban-focus-bar-left .kanban-close-btn {
    flex-shrink: 0;
    margin-right: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1.25rem;
    border: 1px solid oklch(1 0 0 / 0.14);
    border-radius: 10px;
    background: oklch(1 0 0 / 0.08);
}

.kanban-focus-bar-left .kanban-close-btn:hover {
    background: oklch(1 0 0 / 0.14);
    border-color: oklch(1 0 0 / 0.28);
}

[data-theme="light"] .kanban-focus-bar-left .kanban-close-btn {
    background: oklch(0 0 0 / 0.04);
    border-color: oklch(0 0 0 / 0.12);
}

[data-theme="light"] .kanban-focus-bar-left .kanban-close-btn:hover {
    background: oklch(0 0 0 / 0.08);
    border-color: oklch(0 0 0 / 0.2);
}

.kanban-focus-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-blue);
    white-space: nowrap;
    flex-shrink: 0;
}

.kanban-focus-title {
    font-size: 1.15rem;
}

.kanban-focus-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.kanban-column,
.kanban-column-pane {
    /* Width/snap match .list-column (element also has list-column class) */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.kanban-column-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow-x: visible;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.kanban-column-pane .kanban-column-body {
    flex: 1 1 auto;
    overflow-x: visible;
}

.kanban-pinned-zone,
.kanban-stage-tasks {
    overflow: visible;
}

.kanban-pinned-zones-row .kanban-pinned-zone {
    display: flex;
    flex-direction: column;
    gap: var(--kanban-task-gap);
    margin: 0;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.kanban-pinned-zones-row .kanban-pinned-zone:not(.has-pinned) {
    display: flex;
    min-height: 0;
}

.kanban-pinned-zone .task-card {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Allow dropping into empty pinned zone when dragging */
body.kanban-dragging .kanban-pinned-zones-row .kanban-pinned-zone {
    min-height: 44px;
    border-radius: 8px;
    border: 1px dashed oklch(0.837 0.164 84.4 / 0.35);
    background: oklch(0.837 0.164 84.4 / 0.04);
}

body.kanban-dragging .kanban-pinned-zones-row .kanban-pinned-zone:not(.has-pinned):empty::before {
    content: "Pinned";
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(0.790 0.160 75);
    opacity: 0.7;
    padding: 4px 2px;
}

.kanban-pinned-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: oklch(0.790 0.160 75);
    padding: 0 2px 2px;
    pointer-events: none;
}

[data-theme="light"] .kanban-pinned-band {
    background: oklch(0.666 0.157 58.3 / 0.05);
    border-bottom-color: oklch(0.666 0.157 58.3 / 0.22);
}

[data-theme="light"] .kanban-pinned-header {
    color: oklch(0.550 0.140 55);
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 15px 4px;
}

.kanban-column-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.kanban-column-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.8;
}

.kanban-stage-tasks {
    flex: 1 1 auto;
    min-height: 80px;
    padding: 0 12px 12px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--kanban-task-gap);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Kanban uses gap/row-gap only — no extra card margin stacking */
body.kanban-focus-mode .kanban-columns .task-card {
    margin-bottom: 0;
}

.kanban-stage-tasks.is-empty::before {
    content: "Drop here";
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 88px;
    opacity: 0.45;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border: 1px dashed var(--glass-border);
    border-radius: 8px;
    pointer-events: none;
}

.kanban-column.is-column-empty .kanban-stage-tasks.is-empty::before,
.kanban-column-pane.is-column-empty .kanban-stage-tasks.is-empty::before {
    content: "Drop here";
}

body.kanban-dragging .kanban-stage-tasks {
    box-shadow: inset 0 0 0 1px oklch(0.623 0.188 259.8 / 0.25);
}

body.kanban-dragging .kanban-stage-tasks.is-empty::before {
    opacity: 0.8;
    color: var(--accent-blue);
    border-color: oklch(0.623 0.188 259.8 / 0.45);
}

.kanban-empty-msg {
    opacity: 0.55;
    font-size: 0.85rem;
}

.kanban-labels-settings {
    width: 100%;
}

.kanban-labels-settings.hidden {
    display: none !important;
}

.kanban-labels-hint {
    margin: 0;
    font-size: 0.75rem;
    opacity: 0.7;
    line-height: 1.35;
}

.kanban-label-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.kanban-label-field input {
    color: var(--text-primary);
}

/* Legacy global pin tray removed — pinned tasks live per-column */

.kanban-column .add-task-slot .add-task-container,
.kanban-column-pane .add-task-slot .add-task-container {
    padding: 0 12px 8px;
}

.kanban-stage-moves {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 8px 8px;
}

.kanban-arrow-btn.icon-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 4px;
    font-size: 1.2rem;
    color: var(--text-secondary);
    background: oklch(1 0 0 / 0.08);
    border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: 8px;
}

.kanban-arrow-btn.icon-btn:hover {
    color: var(--text-primary);
    background: oklch(1 0 0 / 0.14);
    border-color: oklch(1 0 0 / 0.22);
}

.kanban-arrow-btn.icon-btn:disabled,
.kanban-arrow-btn.icon-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--text-secondary);
    background: oklch(1 0 0 / 0.04);
    border-color: oklch(1 0 0 / 0.06);
    pointer-events: none;
}

.kanban-arrow-btn.icon-btn:disabled:hover,
.kanban-arrow-btn.icon-btn.is-disabled:hover {
    color: var(--text-secondary);
    background: oklch(1 0 0 / 0.04);
    border-color: oklch(1 0 0 / 0.06);
}

[data-theme="light"] .kanban-arrow-btn.icon-btn {
    background: oklch(0 0 0 / 0.04);
    border: 1px solid oklch(0 0 0 / 0.12);
}

[data-theme="light"] .kanban-arrow-btn.icon-btn:hover {
    background: oklch(0 0 0 / 0.08);
    border-color: oklch(0 0 0 / 0.2);
    color: var(--text-primary);
}

[data-theme="light"] .kanban-arrow-btn.icon-btn:disabled,
[data-theme="light"] .kanban-arrow-btn.icon-btn.is-disabled {
    opacity: 0.4;
    background: oklch(0 0 0 / 0.03);
    border-color: oklch(0 0 0 / 0.08);
    color: oklch(0 0 0 / 0.35);
}

body.kanban-focus-mode .task-card {
    margin-bottom: 0;
    cursor: grab;
}

body.kanban-focus-mode .task-card:active {
    cursor: grabbing;
}

body.kanban-dragging .task-card {
    opacity: 0.95;
}

.kanban-column,
.kanban-column-pane {
    transition: transform 0.15s ease, border-color 0.15s ease;
}

body.kanban-dragging .kanban-column,
body.kanban-dragging .kanban-column-pane {
    border-color: oklch(0.623 0.188 259.8 / 0.35);
}

@media (max-width: 768px) {
    .kanban-focus-eyebrow {
        display: none;
    }

    .kanban-pinned-band.has-pinned {
        flex: 0 0 auto;
        overflow: visible;
        max-height: none;
    }

    .kanban-stage-tasks {
        min-height: 60px;
    }
}

@media (max-width: 500px) {
    body.kanban-focus-mode .kanban-column,
    body.kanban-focus-mode .kanban-column-pane {
        overflow: visible;
    }

    body.kanban-focus-mode .kanban-column-body {
        overflow-x: visible;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    body.kanban-focus-mode .kanban-pinned-band.has-pinned {
        flex: 0 0 auto;
        flex-shrink: 0;
        overflow: visible;
        max-height: none;
    }

    body.kanban-focus-mode .kanban-pinned-zone .task-card {
        overflow: visible;
    }

    body.kanban-focus-mode .kanban-stage-tasks {
        flex: 0 0 auto;
        min-height: 60px;
        overflow: visible;
    }

    .kanban-stage-moves {
        padding: 6px 8px 8px;
        gap: 8px;
    }

    .kanban-arrow-btn.icon-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

.task-import-modal {
    max-width: 760px;
    width: min(760px, 96vw);
}

.task-import-guide {
    margin-bottom: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: oklch(1 0 0 / 0.03);
}

.task-import-guide summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}

.task-import-instructions {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.task-import-instructions li + li {
    margin-top: 6px;
}

.task-import-prompt-details {
    margin-bottom: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: oklch(1 0 0 / 0.03);
}

.task-import-prompt-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}

.task-import-prompt-preview {
    width: 100%;
    min-height: 180px;
    max-height: 34vh;
    margin-top: 10px;
    background: var(--input-bg);
    color: var(--text-secondary);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    font-size: 0.82rem;
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    resize: vertical;
    box-sizing: border-box;
}

.task-import-lead {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 16px;
}

.task-import-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.task-import-file-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.task-import-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.task-import-textarea {
    width: 100%;
    min-height: 220px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    font-size: 0.92rem;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.task-import-textarea:focus {
    outline: none;
    border-color: oklch(0.754 0.139 232.7 / 0.65);
}

.task-import-summary {
    margin-bottom: 14px;
}

.task-import-report {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: oklch(1 0 0 / 0.04);
}

.task-import-report-headline {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.task-import-report-headline.is-success {
    color: oklch(0.860 0.120 150);
}

.task-import-report-headline.is-error {
    color: oklch(0.820 0.100 25);
}

.task-import-report-subheadline {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.task-import-stat-success strong {
    color: oklch(0.860 0.120 150);
}

.task-import-stat-fail strong {
    color: oklch(0.820 0.100 25);
}

.task-import-stat-muted strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.task-import-skipped {
    background: oklch(0.758 0.159 55.9 / 0.12);
    border: 1px solid oklch(0.758 0.159 55.9 / 0.35);
    color: oklch(0.820 0.120 55);
}

.task-import-debug {
    margin-bottom: 14px;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: oklch(1 0 0 / 0.02);
}

.task-import-debug summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
}

.task-import-debug-body {
    margin-top: 10px;
    max-height: 24vh;
    overflow-y: auto;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.task-import-debug-body ul {
    margin: 0;
    padding-left: 18px;
}

.task-import-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.task-import-stat-grid div {
    background: oklch(1 0 0 / 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 12px;
}

.task-import-stat-grid span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.task-import-stat-grid strong {
    font-size: 1rem;
}

.task-import-summary-error {
    color: oklch(0.715 0.165 22);
    margin: 0;
}

.task-import-message {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.task-import-message ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.task-import-message li + li {
    margin-top: 4px;
}

.task-import-errors {
    background: oklch(0.637 0.208 25.3 / 0.12);
    border: 1px solid oklch(0.637 0.208 25.3 / 0.35);
    color: oklch(0.890 0.060 25);
}

.task-import-warnings {
    background: oklch(0.795 0.162 86.0 / 0.12);
    border: 1px solid oklch(0.795 0.162 86.0 / 0.35);
    color: oklch(0.920 0.100 95);
}

.task-import-target-panel {
    margin-bottom: 16px;
}

.task-import-preview-wrap {
    margin-bottom: 16px;
}

.task-import-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.task-import-preview-header h3 {
    margin: 0;
    font-size: 1rem;
}

.task-import-preview-count {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.task-import-preview-list {
    max-height: 34vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-import-preview-card {
    background: oklch(1 0 0 / 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px;
}

.task-import-preview-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.task-import-preview-card p {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.task-import-preview-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.task-import-more {
    font-style: italic;
}

.task-import-progress {
    margin-bottom: 14px;
}

.task-import-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.08);
    overflow: hidden;
    margin-bottom: 8px;
}

.task-import-progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, oklch(0.746 0.140 230), var(--accent-blue));
    transition: width 0.2s ease;
}

#task-import-progress-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ==========================================================================
   DUPLICATE CLEANER MODAL
   ========================================================================== */

.dedup-modal {
    max-width: 860px;
    width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
    background: var(--bg-surface, rgba(20, 24, 33, 0.85));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.dedup-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.dedup-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dedup-title-icon {
    font-size: 1.8rem;
    color: oklch(0.72 0.16 160);
}

.dedup-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dedup-subtitle {
    margin: 3px 0 0;
    font-size: 0.84rem;
    color: var(--text-secondary);
    opacity: 0.85;
}

.dedup-tabs-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dedup-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.dedup-tab-btn.active {
    background: var(--accent-blue, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}

.dedup-badge {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}

.dedup-refresh-btn {
    margin-left: auto;
    font-size: 0.85rem;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dedup-modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 250px;
    max-height: 58vh;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dedup-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dedup-section-header {
    margin-bottom: 4px;
}

.dedup-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.dedup-section-desc {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.dedup-card {
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, background 0.2s;
}

.dedup-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
}

.dedup-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dedup-card-title {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dedup-card-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dedup-board-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dedup-board-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.82rem;
}

.dedup-board-tag.active-board {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.15);
}

.dedup-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.dedup-action-pill {
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.dedup-action-pill.danger {
    color: oklch(0.65 0.22 25);
    border-color: rgba(255, 75, 75, 0.25);
    background: rgba(255, 75, 75, 0.08);
}

.dedup-action-pill.danger:hover {
    background: rgba(255, 75, 75, 0.18);
}

.dedup-action-pill.success {
    color: oklch(0.72 0.18 150);
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
}

.dedup-action-pill.success:hover {
    background: rgba(34, 197, 94, 0.18);
}

.dedup-task-instances-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dedup-task-instance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}

.dedup-task-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.dedup-status-badge {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.dedup-status-badge.completed {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.dedup-status-badge.archived {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.dedup-status-badge.active {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.dedup-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    flex-wrap: wrap;
    gap: 12px;
}

.dedup-summary-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.dedup-footer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dedup-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
}

.dedup-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dedup-empty-state i {
    font-size: 2.8rem;
    color: oklch(0.72 0.18 150);
}

.dedup-empty-state h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.dedup-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

/* Orphan Lists Alert Banner */
.orphan-alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    margin: 8px 16px 16px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fca5a5;
    flex-wrap: wrap;
    width: calc(100% - 32px);
    box-sizing: border-box;
}

.orphan-alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.orphan-alert-icon {
    font-size: 1.6rem;
    color: #ef4444;
}

.orphan-alert-content strong {
    color: #fee2e2;
    display: block;
    font-size: 0.95rem;
}

.orphan-alert-content p {
    margin: 2px 0 0 0;
    font-size: 0.82rem;
    color: #fca5a5;
}

/* List header duplicate & multi-board indicator badges */
.list-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 6px 0;
    width: 100%;
}

.list-indicator-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    line-height: 1.4;
    text-decoration: none;
    font-family: inherit;
}

.list-indicator-badge.multi-board {
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
    border-color: rgba(20, 184, 166, 0.35);
}

.list-indicator-badge.multi-board:hover {
    background: rgba(20, 184, 166, 0.28);
    border-color: #2dd4bf;
    transform: translateY(-1px);
}

.list-indicator-badge.duplicate-name {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.35);
}

.list-indicator-badge.duplicate-name:hover {
    background: rgba(168, 85, 247, 0.28);
    border-color: #c084fc;
    transform: translateY(-1px);
}

/* Task Card Duplicate Badges */
.task-indicator-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.task-indicator-badge.unlinked-duplicate {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.task-indicator-badge.unlinked-duplicate:hover {
    background: rgba(245, 158, 11, 0.3);
    border-color: #fbbf24;
}

.task-indicator-badge.linked-task {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.task-indicator-badge.linked-task:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: #60a5fa;
}

/* Merge Direction Chooser Styles */
.dedup-merge-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dedup-merge-box-header {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dedup-merge-direction-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
}

.dedup-merge-direction-btn:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: #34d399;
    color: #34d399;
    transform: translateY(-1px);
}

.dedup-merge-direction-btn .merge-arrow-icon {
    font-size: 1.1rem;
    color: #34d399;
}

.dedup-task-preview-toggle {
    background: none;
    border: none;
    color: var(--accent-blue, #60a5fa);
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    font-family: inherit;
}

.dedup-task-preview-toggle:hover {
    text-decoration: underline;
}

.dedup-task-preview-list {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-size: 0.8rem;
    max-height: 120px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dedup-task-preview-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.dedup-task-preview-item.is-shared {
    color: #fbbf24;
    font-weight: 500;
}

.masonry-layout-icon,
.group-by-tag-icon {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    flex-shrink: 0;
}

.masonry-layout-btn.active,
.masonry-layout-btn[aria-pressed="true"] {
    color: var(--accent-blue);
    background: oklch(0.623 0.188 259.8 / 0.15);
}

.masonry-font-btn {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.masonry-font-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

body.masonry-focus-mode .task-text {
    font-size: var(--masonry-task-font, 0.9rem);
    line-height: 1.35;
}

body.masonry-focus-mode .board-container.masonry-focus-board {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    scroll-snap-type: none;
}

body.masonry-focus-mode .list-column {
    min-width: 0;
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    scroll-snap-align: none;
}

body.masonry-focus-mode .task-list {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}

body.masonry-focus-mode .normal-tasks-container {
    column-width: 280px;
    column-gap: 12px;
    width: 100%;
}

body.masonry-focus-mode .normal-tasks-container > .task-card,
body.masonry-focus-mode .normal-tasks-container > .empty-list-msg {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    width: 100%;
    display: inline-flex;
    box-sizing: border-box;
    margin-bottom: 10px;
}

@media (max-width: 500px) {
    body.masonry-focus-mode .board-container.masonry-focus-board {
        overflow: hidden !important;
    }

    body.masonry-focus-mode .task-list {
        overflow: auto;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }

    body.masonry-focus-mode .normal-tasks-container {
        column-count: 4;
        column-gap: 8px;
        column-width: auto;
        width: calc(4 * 240px + 3 * 8px);
        max-width: none;
    }
}

/* Slim full-screen editor: one large category, press-drag drop-up for the rest. */
.add-task-composer-tag-slot {
    display: contents;
}

@media (max-width: 500px) {
    .add-task-composer-tag-slot {
        display: block;
        position: relative;
        flex: 0 0 auto;
        min-height: 44px;
        margin: 4px 12px;
    }

    .add-task-composer.tags-packed .add-task-composer-dock {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0;
        background: transparent;
        border-top: 0;
    }

    .add-task-composer.tags-packed .add-task-composer-tag-slot {
        display: block;
    }

    .add-task-composer.tags-packed .add-task-composer-tags,
    .add-task-composer.tags-packed .add-task-composer-bar {
        display: flex;
    }

    .add-task-composer.tags-packed .add-task-composer-tags .tag-mode-btn {
        grid-column: auto;
        grid-row: auto;
    }

    .add-task-composer.tags-packed .add-task-composer-add,
    .add-task-composer.tags-packed .add-task-composer-exit,
    .add-task-composer.tags-packed .add-task-composer-subtask {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
    }

    .add-task-composer-bar {
        align-items: flex-end;
    }

    .add-task-composer-exit,
    .add-task-composer-subtask,
    .add-task-composer-add,
    .add-task-composer.tags-packed .add-task-composer-exit,
    .add-task-composer.tags-packed .add-task-composer-subtask,
    .add-task-composer.tags-packed .add-task-composer-add {
        height: 76px;
        min-height: 76px;
        padding: 0 8px;
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.1;
        border-radius: 14px;
    }

    .add-task-composer-tags {
        position: relative;
        display: block;
        min-height: 44px;
        margin: 0;
        touch-action: none;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .add-task-composer-tags .tag-mode-btn:not(.is-selected) {
        display: none;
    }

    .add-task-composer-tags .tag-mode-btn.is-selected {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        height: 44px;
        padding: 0 16px;
        border-radius: 14px;
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        animation: none;
        box-shadow: 0 8px 22px -16px oklch(0 0 0 / 0.7);
    }

    .add-task-composer-tags .tag-mode-btn.is-selected::after {
        content: "";
        width: 9px;
        height: 9px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: translateY(2px) rotate(-45deg);
        opacity: 0.8;
        flex: 0 0 auto;
    }

    .add-task-composer-tags:not(.is-picking) .tag-mode-btn.is-selected:active {
        transform: scale(0.985);
    }

    .add-task-composer-tags.is-picking {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 4px;
        min-height: 0;
        margin: 0;
        padding: 6px;
        border-radius: 16px;
        border: 1px solid var(--glass-border);
        background: color-mix(in oklch, var(--dropdown-bg, oklch(0.16 0 0)) 94%, transparent);
        box-shadow:
            0 -18px 40px oklch(0 0 0 / 0.45),
            0 0 0 1px color-mix(in oklch, var(--glass-border) 70%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        overflow: hidden;
    }

    .add-task-composer-tags.is-picking .tag-mode-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--category-row-h, 44px);
        height: var(--category-row-h, 44px);
        max-width: none;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        animation: category-drop-up 140ms ease-out;
    }

    .add-task-composer-tags.is-picking .tag-mode-btn.is-selected {
        order: 1;
        box-shadow: inset 0 0 0 2px currentColor;
    }

    .add-task-composer-tags.is-picking .tag-mode-btn.is-selected::after {
        opacity: 0;
    }

    .add-task-composer-tags.is-picking .tag-mode-btn.is-drag-over {
        outline: 3px solid var(--text-primary);
        outline-offset: -3px;
        transform: none;
        filter: brightness(1.12);
    }

    .add-task-composer.is-category-picking .add-task-composer-stage,
    .add-task-composer.is-category-picking .add-task-composer-input {
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
        overflow: hidden;
    }
}

@keyframes category-drop-up {
    from {
        opacity: 0.35;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .add-task-composer-tags.is-picking .tag-mode-btn,
    #tag-mode-buttons.is-picking .tag-mode-btn {
        animation: none;
    }
}

/* Slim tool panel: one large category, same press-drag drop-up as the editor. */
@media (max-width: 500px) {
    .app-header.has-dense-tags .tag-tools-block {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .app-header.has-dense-tags .header-row-meta,
    .app-header.has-dense-tags .header-row.tag-mode-row,
    .app-header.has-dense-tags .tag-mode-buttons {
        display: flex !important;
    }

    .app-header .header-row-meta .header-meta-control,
    .app-header.has-dense-tags .header-row-meta .header-meta-control {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 40px !important;
        height: 40px !important;
        max-height: none !important;
    }

    .app-header .header-row-meta .glass-select,
    .app-header .header-row-meta .label,
    .app-header .tag-filter-toggle {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
    }

    .app-header .header-row-meta .sort-container label {
        display: none !important;
    }

    .app-header .header-row-meta .sort-container,
    .app-header .header-row-meta .mobile-tool-menu {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .app-header .header-row-meta .glass-select {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

        .app-header .header-action-slots.is-mobile-pair > .is-mobile-dock-hidden {
            display: none !important;
        }

        .app-header .header-action-slots.is-mobile-pair .mobile-dock-label {
            display: inline;
            font-size: 0.82rem;
            font-weight: 750;
            line-height: 1;
        }

        .app-header .header-action-slots.is-mobile-pair > button.icon-btn-large,
        .app-header .header-action-slots.is-mobile-pair > button.btn.multi-select-btn {
            width: 100% !important;
            min-width: 0 !important;
            height: 40px !important;
            min-height: 40px !important;
            max-height: none !important;
            gap: 6px !important;
            font-size: 1.05rem !important;
        }

        .app-header .mobile-tool-menu {
            display: inline-flex !important;
        }

        .app-header .tag-filter-toggle.is-on {
        color: var(--tag-filter-color, var(--accent-blue)) !important;
        border-color: var(--tag-filter-color, var(--accent-blue)) !important;
        background: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 22%, transparent) !important;
    }

    .app-header.is-category-picking {
        overflow: visible !important;
    }

    .header-row.tag-mode-row {
        position: relative;
        min-height: 66px;
        z-index: 2;
    }

    .tag-mode-with-add {
        align-items: stretch;
        min-height: 66px;
    }

    .tag-mode-with-add > #tag-mode-buttons {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    #tag-mode-buttons {
        position: relative;
        display: block !important;
        width: 100% !important;
        min-height: 66px;
        margin: 0;
        overflow: visible !important;
        flex-wrap: nowrap !important;
        touch-action: none;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .header-add-task-btn {
        order: 3 !important;
        align-self: stretch !important;
        width: 66px !important;
        min-width: 66px !important;
        height: 66px !important;
        min-height: 66px !important;
        max-height: 66px !important;
        border-radius: 18px !important;
        font-size: 2.15rem !important;
    }

    #tag-mode-buttons .tag-mode-btn:not(.is-selected) {
        display: none !important;
    }

    #tag-mode-buttons .tag-mode-btn.is-selected {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        min-height: 66px !important;
        height: 66px !important;
        max-height: none !important;
        padding: 0 16px !important;
        border-radius: 18px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap;
        overflow: hidden;
        animation: none !important;
        box-shadow: 0 8px 22px -16px oklch(0 0 0 / 0.7) !important;
    }

    #tag-mode-buttons .tag-mode-btn.is-selected::after {
        content: "";
        width: 9px;
        height: 9px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: translateY(2px) rotate(-45deg);
        opacity: 0.8;
        flex: 0 0 auto;
    }

    #tag-mode-buttons:not(.is-picking) .tag-mode-btn.is-selected {
        justify-content: center;
        padding: 0 16px !important;
    }

    #tag-mode-buttons:not(.is-picking) .tag-mode-btn.is-selected::after {
        position: absolute;
        right: 16px;
        left: auto;
        top: 50%;
        margin: 0;
        transform: translateY(calc(-50% + 2px)) rotate(-45deg);
    }

    #tag-mode-buttons:not(.is-picking) .tag-mode-btn.is-selected:active {
        transform: scale(0.985);
    }

    #tag-mode-buttons.is-picking {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        gap: 4px;
        min-height: 0;
        padding: 6px;
        border-radius: 16px;
        border: 1px solid var(--glass-border);
        background: color-mix(in oklch, var(--dropdown-bg, oklch(0.16 0 0)) 94%, transparent);
        box-shadow:
            0 -18px 40px oklch(0 0 0 / 0.45),
            0 0 0 1px color-mix(in oklch, var(--glass-border) 70%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        overflow: hidden !important;
    }

    #tag-mode-buttons.is-picking .tag-mode-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        min-height: var(--category-row-h, 44px) !important;
        height: var(--category-row-h, 44px) !important;
        max-height: none !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap;
        overflow: hidden;
        animation: category-drop-up 140ms ease-out;
    }

    #tag-mode-buttons.is-picking .tag-mode-btn.is-selected {
        order: 1;
        box-shadow: inset 0 0 0 2px currentColor !important;
    }

    #tag-mode-buttons.is-picking .tag-mode-btn.is-all {
        order: 2;
    }

    #tag-mode-buttons.is-picking .tag-mode-btn.is-selected::after {
        opacity: 0;
    }

    #tag-mode-buttons.is-picking .tag-mode-btn.is-drag-over {
        outline: 3px solid var(--text-primary);
        outline-offset: -3px;
        filter: brightness(1.12);
    }

    /* Three equal dock rows: menus, buttons, then board / stats / today. */
    .app-header .header-row-meta,
    .app-header .header-row-1 .header-left {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .app-header .header-row-1 {
        width: 100% !important;
    }

    .app-header .header-row-meta > .header-meta-control,
    .app-header .header-row-1 .header-left > #board-toggle-container,
    .app-header .header-row-1 .header-left > .total-count-badge,
    .app-header .header-action-slots.is-mobile-pair > button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border-radius: 10px !important;
        justify-content: center !important;
    }

    /* Buttons: Select, Filter, Recent */
    .app-header .header-action-slots.is-mobile-pair > button.icon-btn-large,
    .app-header .header-action-slots.is-mobile-pair > button.btn.multi-select-btn,
    .app-header .header-action-slots.is-mobile-pair > #tag-filter-toggle {
        padding: 0 8px !important;
        border: 1px solid color-mix(in oklch, var(--accent-blue) 55%, var(--glass-border)) !important;
        background: color-mix(in oklch, var(--accent-blue) 26%, oklch(1 0 0 / 0.08)) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
        font-size: 0.78rem !important;
        font-weight: 750 !important;
        gap: 5px !important;
        flex-shrink: 1 !important;
    }

    .app-header .header-action-slots.is-mobile-pair > button svg,
    .app-header .header-action-slots.is-mobile-pair > button i {
        width: 15px !important;
        height: 15px !important;
        font-size: 15px !important;
        flex: 0 0 auto !important;
    }

    .app-header .header-action-slots.is-mobile-pair > button.icon-btn-large.active,
    .app-header .header-action-slots.is-mobile-pair > button.btn.multi-select-btn.active,
    .app-header .header-action-slots.is-mobile-pair > #tag-filter-toggle.is-on {
        background: color-mix(in oklch, var(--accent-blue) 48%, oklch(1 0 0 / 0.06)) !important;
        border-color: color-mix(in oklch, var(--accent-blue) 80%, white) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
    }

    .app-header .header-action-slots.is-mobile-pair > #tag-filter-toggle.is-on {
        color: var(--tag-filter-color, var(--text-primary)) !important;
        border-color: var(--tag-filter-color, var(--accent-blue)) !important;
        background: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 34%, transparent) !important;
    }

    /* Dropdowns: Order, More, board selector */
    .app-header .header-row-meta > .sort-container,
    .app-header .header-row-1 button.btn.board-dropdown-btn {
        border: 1px solid color-mix(in oklch, var(--glass-border) 85%, white) !important;
        background: oklch(0.2 0.025 270 / 0.72) !important;
        box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08) !important;
        color: var(--text-primary) !important;
        padding: 0 8px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    [data-theme="light"] .app-header .header-row-meta > .sort-container,
    [data-theme="light"] .app-header .header-row-1 button.btn.board-dropdown-btn {
        background: oklch(0.96 0.01 270 / 0.9) !important;
        box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7) !important;
    }

    .app-header .header-row-meta > .mobile-tool-menu {
        padding: 0 !important;
    }

    .app-header .header-row-meta > .mobile-tool-menu .mobile-tool-trigger {
        flex: 1 1 auto !important;
        align-self: stretch !important;
    }

    .app-header .header-row-meta > .sort-container .glass-select,
    .app-header .header-row-meta > .mobile-tool-menu .mobile-tool-trigger {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        text-align: center !important;
        text-align-last: center !important;
        font-size: 0.78rem !important;
        font-weight: 750 !important;
        color: var(--text-primary) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .app-header .header-row-1 #board-toggle-container,
    .app-header .header-row-1 .board-dropdown {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .app-header .header-row-1 button.btn.board-dropdown-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        justify-content: space-between !important;
        font-size: 0.78rem !important;
        font-weight: 750 !important;
        flex-shrink: 1 !important;
    }

    .app-header .header-row-1 .board-dropdown-btn span {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }

    /* Readouts: Drag, task count, completed today */
    .app-header .header-row-meta > .toggle-group,
    .app-header .header-row-1 #total-task-count,
    .app-header .header-row-1 #daily-completed-count {
        display: inline-flex !important;
        align-items: center !important;
        border: 1px dashed color-mix(in oklch, var(--text-secondary) 48%, transparent) !important;
        background: oklch(1 0 0 / 0.04) !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .app-header .header-row-meta > .toggle-group.drag-fill {
        pointer-events: auto !important;
        cursor: pointer !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .app-header .header-row-meta > .drag-fill .drag-fill-switch {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
        align-self: stretch !important;
        flex: 1 1 auto !important;
    }

    .app-header .header-row-meta > .drag-fill .drag-fill-slider {
        border-radius: 12px !important;
        border: none !important;
    }

    .app-header .header-row-1 #total-task-count,
    .app-header .header-row-1 #daily-completed-count {
        pointer-events: none !important;
        padding: 0 6px !important;
    }

    .app-header .header-row-1 #daily-completed-count {
        color: var(--accent-green) !important;
        border-color: color-mix(in oklch, var(--accent-green) 55%, transparent) !important;
    }

    /* Phone: two rows of two. Stats and order move into Settings. */
    .app-header.is-phone-dock .header-row-1,
    .app-header.is-phone-dock .header-row-meta,
    .app-header.is-phone-dock #header-action-slots {
        display: none !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: auto;
        margin-inline: 0;
        order: 4;
    }

    .app-header.is-phone-dock #mobile-dock-grid > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > button.icon-btn-large,
    .app-header.is-phone-dock #mobile-dock-grid > button.btn.multi-select-btn,
    .app-header.is-phone-dock #mobile-dock-grid > #tag-filter-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        border-radius: 10px !important;
        border: 1px solid color-mix(in oklch, var(--accent-blue) 55%, var(--glass-border)) !important;
        background: color-mix(in oklch, var(--accent-blue) 26%, oklch(1 0 0 / 0.08)) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
        font-size: 0.78rem !important;
        font-weight: 750 !important;
        gap: 5px !important;
        flex-shrink: 1 !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > button svg,
    .app-header.is-phone-dock #mobile-dock-grid > button i {
        width: 15px !important;
        height: 15px !important;
        font-size: 15px !important;
        flex: 0 0 auto !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid .mobile-dock-label {
        display: inline;
        font-size: 0.82rem;
        font-weight: 750;
        line-height: 1;
    }

    .app-header.is-phone-dock #mobile-dock-grid > button.icon-btn-large.active,
    .app-header.is-phone-dock #mobile-dock-grid > button.btn.multi-select-btn.active,
    .app-header.is-phone-dock #mobile-dock-grid > #tag-filter-toggle.is-on {
        background: color-mix(in oklch, var(--accent-blue) 48%, oklch(1 0 0 / 0.06)) !important;
        border-color: color-mix(in oklch, var(--accent-blue) 80%, white) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > #tag-filter-toggle.is-on {
        color: var(--tag-filter-color, var(--text-primary)) !important;
        border-color: var(--tag-filter-color, var(--accent-blue)) !important;
        background: color-mix(in oklch, var(--tag-filter-color, var(--accent-blue)) 34%, transparent) !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > .mobile-tool-menu,
    .app-header.is-phone-dock #mobile-dock-grid .board-dropdown-btn {
        border: 1px solid color-mix(in oklch, var(--glass-border) 85%, white) !important;
        background: oklch(0.2 0.025 270 / 0.72) !important;
        box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08) !important;
        color: var(--text-primary) !important;
        border-radius: 10px !important;
        padding: 0 !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > #board-toggle-container,
    .app-header.is-phone-dock #mobile-dock-grid .board-dropdown {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid button.btn.board-dropdown-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        font-weight: 750 !important;
        gap: 4px !important;
        padding: 0 8px !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid .board-dropdown-btn span {
        min-width: 0 !important;
        max-width: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid .board-dropdown-btn > i.ph-layout {
        display: none !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > .mobile-tool-menu {
        display: flex !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid .mobile-tool-trigger {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--text-primary) !important;
        font-size: 0.78rem !important;
        font-weight: 750 !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > .drag-fill {
        display: flex !important;
        align-items: stretch !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > .drag-fill .drag-fill-switch {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > .drag-fill .drag-fill-slider {
        border-radius: 10px !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > .drag-fill .drag-fill-slider:before {
        border-radius: 7px !important;
    }

    .app-header.is-phone-dock #mobile-dock-grid > .drag-fill .drag-fill-half {
        font-size: 0.58rem;
        padding: 0 2px;
    }

    .settings-mobile-summary {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin: 0 0 6px;
        padding: 2px 2px 8px;
    }

    .settings-stat-line {
        margin: 0;
        font-size: 1rem;
        font-weight: 650;
        line-height: 1.35;
        color: var(--text-secondary);
    }

    .settings-stat-line.is-primary {
        font-size: 1.45rem;
        font-weight: 800;
        line-height: 1.2;
        color: var(--text-primary);
    }

    .settings-mobile-order-label {
        display: block;
        margin: 0 0 6px;
        font-size: 0.78rem;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

    #settings-mobile-order .sort-container {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 0 12px;
        box-sizing: border-box;
        border-radius: 12px;
        border: 1px solid color-mix(in oklch, var(--glass-border) 85%, white);
        background: oklch(0.2 0.025 270 / 0.55);
    }

    #settings-mobile-order .sort-container label {
        display: none;
    }

    #settings-mobile-order .glass-select {
        width: 100%;
        min-height: 48px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--text-primary);
        font-size: 16px;
        font-weight: 750;
    }
}