@import url("styles_root.php");

* {
    box-sizing: border-box;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.text-input--multiline {
    min-height: 96px;
    resize: vertical;
}

:root {
    --skeleton-base: rgba(255, 255, 255, 0.16);
    --skeleton-highlight: rgba(255, 255, 255, 0.32);
    --collapsible-duration: 280ms;
    --starfield-color: rgba(255, 255, 255, 0.8);
    --starfield-color-soft: rgba(255, 255, 255, 0.45);
    --starfield-tint: rgba(var(--color-accent-rgb, 80, 142, 255), 0.25);
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    background: radial-gradient(circle at 20% 20%, var(--background-radial-primary), transparent 55%),
        radial-gradient(circle at 85% 30%, var(--background-radial-secondary), transparent 60%),
        var(--color-background);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
    background-size: cover, cover, auto;
    display: flex;
    flex-direction: column;
}

body.overlay-mode {
    --skeleton-base: rgba(0, 0, 0, 0.36);
    --skeleton-highlight: rgba(255, 255, 255, 0.26);
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
}

.background-grid {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: linear-gradient(0deg, var(--background-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--background-grid-line) 1px, transparent 1px);
    background-size: 120px 120px;
    pointer-events: none;
    z-index: 0;
}

.background-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.background-stars__cluster {
    position: absolute;
    inset: -30%;
    mix-blend-mode: screen;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

.background-stars__cluster--far {
    z-index: 0;
    animation-name: starfieldParallaxFar;
    animation-duration: 160s;
}

.background-stars__cluster--mid {
    z-index: 1;
    animation-name: starfieldParallaxMid;
    animation-duration: 120s;
}

.background-stars__cluster--near {
    z-index: 2;
    animation-name: starfieldParallaxNear;
    animation-duration: 90s;
}

.background-stars__cluster::before,
.background-stars__cluster::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 999px;
    opacity: 0.75;
    animation: starfieldTwinkleSlow 10s ease-in-out infinite;
}

.background-stars__cluster::after {
    opacity: 0.55;
    animation: starfieldTwinkleFast 7s ease-in-out infinite;
}

.background-stars__cluster--near::before {
    width: 2px;
    height: 2px;
    background: var(--starfield-color);
    filter: drop-shadow(0 0 5px var(--starfield-tint));
    box-shadow:
        120px 40px currentColor,
        310px -60px currentColor,
        520px 180px currentColor,
        760px -20px currentColor,
        980px 260px currentColor,
        1230px 60px currentColor,
        1500px -110px currentColor,
        1720px 140px currentColor,
        1920px -40px currentColor,
        210px 360px currentColor,
        470px 540px currentColor,
        690px 380px currentColor,
        930px 520px currentColor,
        1180px 420px currentColor,
        1420px 640px currentColor,
        1660px 460px currentColor,
        1860px 620px currentColor,
        80px 620px currentColor,
        340px 720px currentColor,
        600px 900px currentColor,
        860px 760px currentColor,
        1110px 940px currentColor,
        1370px 780px currentColor,
        1610px 980px currentColor,
        1860px 840px currentColor,
        -40px 320px currentColor,
        -220px 540px currentColor,
        -120px 780px currentColor,
        220px 1040px currentColor,
        520px 1160px currentColor,
        820px 1080px currentColor,
        1120px 1220px currentColor,
        1420px 1100px currentColor,
        1740px 1260px currentColor,
        1980px 1120px currentColor;
}

.background-stars__cluster--near::after {
    width: 1px;
    height: 1px;
    background: var(--starfield-color-soft);
    animation-delay: -3s;
    box-shadow:
        60px 180px currentColor,
        260px 60px currentColor,
        420px 320px currentColor,
        640px 120px currentColor,
        860px 300px currentColor,
        1080px 100px currentColor,
        1320px 320px currentColor,
        1560px 140px currentColor,
        1780px 360px currentColor,
        2000px 140px currentColor,
        -80px 120px currentColor,
        -200px 340px currentColor,
        20px 460px currentColor,
        260px 540px currentColor,
        520px 460px currentColor,
        760px 620px currentColor,
        960px 460px currentColor,
        1200px 620px currentColor,
        1440px 520px currentColor,
        1680px 660px currentColor,
        1900px 500px currentColor,
        -40px 700px currentColor,
        180px 860px currentColor,
        420px 720px currentColor,
        660px 920px currentColor,
        900px 760px currentColor,
        1180px 940px currentColor,
        1420px 820px currentColor,
        1680px 960px currentColor,
        1920px 840px currentColor,
        40px 1020px currentColor,
        280px 1140px currentColor,
        540px 1040px currentColor,
        820px 1180px currentColor,
        1060px 1060px currentColor,
        1340px 1200px currentColor,
        1600px 1080px currentColor,
        1860px 1260px currentColor,
        -120px 1080px currentColor,
        120px 1320px currentColor;
}

.background-stars__cluster--mid::before {
    width: 1.5px;
    height: 1.5px;
    background: var(--starfield-color-soft);
    filter: drop-shadow(0 0 3px var(--starfield-tint));
    box-shadow:
        30px 20px currentColor,
        200px -90px currentColor,
        360px 140px currentColor,
        520px -40px currentColor,
        700px 220px currentColor,
        880px 20px currentColor,
        1080px 260px currentColor,
        1260px 40px currentColor,
        1440px 260px currentColor,
        1620px 60px currentColor,
        1800px 280px currentColor,
        1980px 100px currentColor,
        -120px 80px currentColor,
        -260px 260px currentColor,
        -20px 360px currentColor,
        200px 320px currentColor,
        420px 460px currentColor,
        640px 340px currentColor,
        860px 480px currentColor,
        1080px 360px currentColor,
        1300px 520px currentColor,
        1520px 420px currentColor,
        1740px 560px currentColor,
        1960px 420px currentColor,
        20px 560px currentColor,
        240px 700px currentColor,
        460px 600px currentColor,
        700px 760px currentColor,
        940px 620px currentColor,
        1180px 780px currentColor,
        1400px 660px currentColor,
        1640px 820px currentColor,
        1860px 660px currentColor,
        -60px 760px currentColor,
        180px 920px currentColor,
        420px 820px currentColor,
        660px 980px currentColor,
        900px 860px currentColor,
        1160px 1020px currentColor,
        1400px 900px currentColor,
        1640px 1060px currentColor,
        1880px 940px currentColor,
        -180px 940px currentColor,
        60px 1120px currentColor,
        320px 1000px currentColor,
        580px 1180px currentColor,
        860px 1040px currentColor,
        1120px 1220px currentColor,
        1380px 1080px currentColor,
        1640px 1240px currentColor,
        1900px 1100px currentColor;
}

.background-stars__cluster--mid::after {
    width: 1px;
    height: 1px;
    background: var(--starfield-color);
    animation-delay: -1.5s;
    box-shadow:
        100px 140px currentColor,
        260px 20px currentColor,
        440px 240px currentColor,
        620px 60px currentColor,
        820px 280px currentColor,
        1000px 80px currentColor,
        1200px 300px currentColor,
        1400px 120px currentColor,
        1620px 320px currentColor,
        1820px 140px currentColor,
        2020px 320px currentColor,
        -60px 200px currentColor,
        -200px 380px currentColor,
        40px 460px currentColor,
        260px 520px currentColor,
        480px 460px currentColor,
        700px 620px currentColor,
        920px 500px currentColor,
        1140px 660px currentColor,
        1360px 520px currentColor,
        1580px 700px currentColor,
        1800px 540px currentColor,
        -120px 600px currentColor,
        80px 760px currentColor,
        300px 680px currentColor,
        520px 820px currentColor,
        760px 700px currentColor,
        980px 860px currentColor,
        1220px 720px currentColor,
        1460px 900px currentColor,
        1700px 760px currentColor,
        1940px 920px currentColor,
        -20px 900px currentColor,
        220px 1040px currentColor,
        460px 940px currentColor,
        700px 1100px currentColor,
        960px 980px currentColor,
        1220px 1140px currentColor,
        1480px 1000px currentColor,
        1740px 1180px currentColor,
        1980px 1040px currentColor,
        -140px 1080px currentColor,
        80px 1240px currentColor,
        340px 1120px currentColor,
        620px 1280px currentColor,
        900px 1160px currentColor,
        1180px 1320px currentColor,
        1460px 1180px currentColor,
        1720px 1340px currentColor,
        1980px 1200px currentColor;
}

.background-stars__cluster--far::before {
    width: 1px;
    height: 1px;
    background: var(--starfield-color-soft);
    opacity: 0.6;
    box-shadow:
        20px 40px currentColor,
        200px -60px currentColor,
        360px 120px currentColor,
        520px -20px currentColor,
        700px 200px currentColor,
        860px 0 currentColor,
        1020px 220px currentColor,
        1180px 40px currentColor,
        1360px 240px currentColor,
        1540px 20px currentColor,
        1720px 220px currentColor,
        1900px 20px currentColor,
        2080px 200px currentColor,
        -120px 40px currentColor,
        -260px 240px currentColor,
        -40px 320px currentColor,
        140px 280px currentColor,
        320px 420px currentColor,
        500px 320px currentColor,
        700px 460px currentColor,
        900px 340px currentColor,
        1100px 500px currentColor,
        1300px 360px currentColor,
        1500px 520px currentColor,
        1700px 380px currentColor,
        1900px 540px currentColor,
        2100px 400px currentColor,
        -200px 500px currentColor,
        0 640px currentColor,
        200px 520px currentColor,
        400px 680px currentColor,
        620px 540px currentColor,
        820px 700px currentColor,
        1040px 560px currentColor,
        1240px 720px currentColor,
        1460px 580px currentColor,
        1680px 740px currentColor,
        1880px 620px currentColor,
        2100px 760px currentColor,
        -140px 720px currentColor,
        60px 880px currentColor,
        260px 760px currentColor,
        460px 920px currentColor,
        660px 800px currentColor,
        880px 960px currentColor,
        1080px 820px currentColor,
        1300px 980px currentColor,
        1500px 840px currentColor,
        1720px 1000px currentColor,
        1920px 860px currentColor,
        2140px 1020px currentColor,
        -80px 940px currentColor,
        120px 1100px currentColor,
        340px 960px currentColor,
        560px 1120px currentColor,
        780px 980px currentColor,
        1000px 1140px currentColor,
        1220px 1000px currentColor,
        1440px 1180px currentColor,
        1660px 1020px currentColor,
        1880px 1200px currentColor,
        2100px 1040px currentColor,
        -200px 1180px currentColor,
        20px 1320px currentColor,
        240px 1180px currentColor,
        460px 1340px currentColor,
        700px 1200px currentColor,
        920px 1360px currentColor,
        1160px 1220px currentColor,
        1380px 1380px currentColor,
        1600px 1240px currentColor,
        1820px 1400px currentColor,
        2040px 1260px currentColor;
}

.background-stars__cluster--far::after {
    width: 1px;
    height: 1px;
    background: var(--starfield-color);
    opacity: 0.45;
    animation-delay: -4s;
    box-shadow:
        80px 160px currentColor,
        240px 20px currentColor,
        420px 220px currentColor,
        600px 60px currentColor,
        780px 260px currentColor,
        960px 80px currentColor,
        1140px 280px currentColor,
        1320px 100px currentColor,
        1500px 300px currentColor,
        1680px 120px currentColor,
        1860px 320px currentColor,
        2040px 140px currentColor,
        -60px 200px currentColor,
        -220px 380px currentColor,
        0 420px currentColor,
        180px 480px currentColor,
        360px 420px currentColor,
        540px 580px currentColor,
        720px 440px currentColor,
        900px 600px currentColor,
        1080px 460px currentColor,
        1260px 620px currentColor,
        1440px 480px currentColor,
        1620px 640px currentColor,
        1800px 500px currentColor,
        1980px 660px currentColor,
        2160px 520px currentColor,
        -100px 640px currentColor,
        80px 780px currentColor,
        260px 660px currentColor,
        440px 820px currentColor,
        620px 680px currentColor,
        800px 840px currentColor,
        980px 700px currentColor,
        1160px 860px currentColor,
        1340px 720px currentColor,
        1520px 900px currentColor,
        1700px 740px currentColor,
        1880px 900px currentColor,
        2060px 760px currentColor,
        -20px 900px currentColor,
        160px 1040px currentColor,
        340px 900px currentColor,
        520px 1060px currentColor,
        700px 920px currentColor,
        900px 1080px currentColor,
        1080px 940px currentColor,
        1260px 1100px currentColor,
        1440px 960px currentColor,
        1620px 1140px currentColor,
        1800px 980px currentColor,
        1980px 1160px currentColor,
        2160px 1000px currentColor,
        -180px 1080px currentColor,
        0 1220px currentColor,
        200px 1080px currentColor,
        400px 1240px currentColor,
        600px 1100px currentColor,
        820px 1260px currentColor,
        1020px 1120px currentColor,
        1240px 1280px currentColor,
        1460px 1140px currentColor,
        1680px 1320px currentColor,
        1900px 1180px currentColor,
        2120px 1340px currentColor;
}

@keyframes starfieldParallaxFar {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(-180px, -220px, 0) rotate(-6deg);
    }
}

@keyframes starfieldParallaxMid {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(-200px, -320px, 0) rotate(4deg);
    }
}

@keyframes starfieldParallaxNear {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(-260px, -420px, 0) rotate(-8deg);
    }
}

@keyframes starfieldTwinkleSlow {
    0% {
        opacity: 0.25;
    }
    45% {
        opacity: 0.65;
    }
    70% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.25;
    }
}

@keyframes starfieldTwinkleFast {
    0% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px var(--starfield-tint));
    }
    40% {
        opacity: 0.8;
        filter: drop-shadow(0 0 6px var(--starfield-tint));
    }
    80% {
        opacity: 0.45;
        filter: drop-shadow(0 0 3px var(--starfield-tint));
    }
    100% {
        opacity: 0.3;
        filter: drop-shadow(0 0 2px var(--starfield-tint));
    }
}

.task-board {
    width: min(600px, 90vw);
    padding: 32px;
    background: linear-gradient(145deg, var(--surface-board-gradient-start), var(--surface-board-gradient-end));
    border-radius: 18px;
    border: 1px solid var(--color-panel-border);
    position: relative;
    box-shadow: 0 15px 40px var(--shadow-strong);
    z-index: 1;
}

body.overlay-mode .task-board {
    background: linear-gradient(
        145deg,
        rgba(var(--surface-board-start-rgb), var(--overlay-board-opacity)),
        rgba(var(--surface-board-end-rgb), var(--overlay-board-opacity))
    );
}

.task-board::before,
.task-board::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
}

.task-board::before {
    inset: -2px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
}

.task-board::after {
    inset: -10px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    filter: blur(12px);
}

.task-board__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.task-board__header--with-nav {
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.task-board__title {
    letter-spacing: 0.2em;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background-position: 0 0;
    transition: transform 0.35s ease;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    background: var(--surface-glass);
    color: var(--text-bright);
    animation: progressShift 1.2s linear 1;
}

.task-board__nav {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.task-board__nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--accent-border-medium);
    background: var(--surface-glass);
    color: var(--text-strong);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.task-board__nav-link:hover {
    background: var(--surface-hover);
    border-color: var(--accent-border-hover);
}

.task-board__nav-link.is-active {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: rgba(var(--color-accent-rgb), 0.75);
    color: var(--text-ice);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.35);
}

.task-board__nav-link--admin {
    border-color: var(--admin-nav-border);
    color: var(--admin-nav-text);
}

.task-board__nav-link--admin:hover,
.task-board__nav-link--admin:focus {
    border-color: var(--admin-nav-border-strong);
    color: var(--admin-nav-text-strong);
    background: var(--surface-admin-nav-hover);
}

.task-board__collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent-border-medium);
    background: var(--surface-glass);
    color: var(--text-strong);
    padding: 0 16px;
    height: 30px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
    gap: 8px;
}

.task-board__collapse-toggle:hover,
.task-board__collapse-toggle:focus-visible {
    background: var(--surface-hover);
    border-color: var(--accent-border-hover);
    color: var(--text-ice);
}

.task-board__collapse-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.task-board__collapse-toggle::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--color-checkbox-border);
    background: var(--color-checkbox-bg);
    box-shadow: inset 0 0 6px rgba(var(--color-accent-rgb), 0.25);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.task-board__collapse-toggle[aria-pressed="true"]::before {
    background: var(--color-checkbox-fill);
    border-color: rgba(var(--color-accent-rgb), 0.9);
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.45);
}

.refresh-button {
    border: 1px solid var(--accent-border-medium);
    background: var(--surface-glass-light);
    color: var(--color-text-primary);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.refresh-button:hover {
    background: var(--surface-refresh-hover);
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@keyframes skeletonCardIntro {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progressShift {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 24px 0;
    }
}

.task-list.is-showing-skeletons {
    gap: 24px;
}

body.overlay-mode .task-list.is-showing-skeletons {
    gap: 16px;
}

.task-card--skeleton {
    position: relative;
    pointer-events: none;
    padding: 22px 24px 26px;
    border-radius: 16px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    background: rgba(var(--surface-glass-rgb), 0.38);
    box-shadow: 0 16px 34px var(--shadow-soft);
    overflow: hidden;
    opacity: 0;
    animation: skeletonCardIntro 0.38s ease forwards;
    backdrop-filter: blur(6px);
}

body.overlay-mode .task-card--skeleton {
    padding: 18px 20px 22px;
    border-radius: 14px;
    background: rgba(var(--surface-overlay-rgb), 0.55);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(var(--color-panel-border-rgb, 255, 255, 255), 0.35);
}

.task-card--skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
    pointer-events: none;
}

.task-card--skeleton * {
    pointer-events: none;
}

.skeleton-block,
.skeleton-circle,
.skeleton-pill {
    display: block;
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%);
    background-size: 280% 100%;
    animation: skeletonShimmer 1.25s ease-in-out infinite;
}

.skeleton-circle {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    flex: 0 0 auto;
}

body.overlay-mode .skeleton-circle {
    width: 22px;
    height: 22px;
}

.skeleton-block {
    height: 14px;
    border-radius: 999px;
    width: var(--skeleton-line-width, 100%);
}

.skeleton-block--title {
    height: 20px;
}

.skeleton-block--progress {
    height: 12px;
    border-radius: 999px;
    margin: 18px 0 12px;
}

.skeleton-block--line + .skeleton-block--line {
    margin-top: 10px;
}

.skeleton-block--image {
    width: 100%;
    height: var(--skeleton-image-height, 240px);
    border-radius: 18px;
}

.skeleton-block--caption {
    margin-top: 12px;
}

.skeleton-pill {
    border-radius: 999px;
    height: 18px;
    width: var(--skeleton-line-width, 36%);
}

.task-card--skeleton__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-card--skeleton__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.task-card--skeleton__paragraph,
.task-card--skeleton__subtasks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-card--skeleton__paragraph {
    margin-top: 18px;
}

.task-card--skeleton__subtasks {
    margin-top: 18px;
}

.task-card--skeleton__media {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 320px;
    max-width: 360px;
}

.task-card--skeleton--overview {
    padding: 24px 28px 30px;
}

.task-card--skeleton--overview .task-card--skeleton__body {
    margin-top: 28px;
}

.task-card--skeleton--overview .overview-card-media {
    align-self: stretch;
}

.task-card {
    padding-left: 6px;
    position: relative;
}

.overview main {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 0 96px;
}

.overview .task-board {
    width: min(1200px, 94vw);
    padding: 48px;
    margin: 0 auto;
}

.overview .task-board__header {
    margin-bottom: 32px;
}

.overview .task-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
}

.overview .task-card {
    padding: 20px 24px 28px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    border-radius: 16px;
    background: var(--surface-glass-solid);
    box-shadow: 0 18px 38px var(--shadow-medium);
}

.overview .task-card--skeleton {
    background: rgba(var(--surface-glass-rgb), 0.4);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    box-shadow: 0 16px 34px var(--shadow-soft);
    padding: 24px 28px 30px;
}

.overview .task-card--skeleton::after {
    border-color: rgba(var(--color-accent-rgb), 0.12);
}

.overview-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-top: 0;
}

.overview-card-content {
    flex: 1 1 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.overview-card-media {
    flex: 0 0 320px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.overview-card-media .task-description {
    margin-top: 0;
}

.overview .task-title-row {
    align-items: flex-start;
}

.overview .task-title-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.overview .task-title-text {
    white-space: normal;
    line-height: 1.3;
}

.overview .task-status-badge {
    margin-left: auto;
}

.overview .task-description {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 18px;
}

.overview .subtask-list {
    padding-left: 0;
}

.overview .subtask-item {
    background: var(--surface-subtask);
    border-radius: 10px;
    padding: 10px 14px;
}

.overview .subtask-list {
    gap: 14px;
    margin-top: 20px;
}

.overview .subtask-row {
    align-items: flex-start;
}

.overview .subtask-note {
    padding-left: 0;
}

.overview .board-message {
    margin-top: 36px;
}

.troubleshooting main {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 0 96px;
}

.troubleshooting .task-board {
    width: min(1200px, 94vw);
    padding: 48px;
    margin: 0 auto;
}

.troubleshooting-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.troubleshooting .board-message {
    margin-top: 36px;
}

.troubleshooting-item {
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    border-radius: 14px;
    background: var(--surface-troubleshooting);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 16px 32px var(--shadow-soft);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.troubleshooting-item[open] {
    border-color: var(--accent-border-hover);
    box-shadow: 0 18px 40px var(--shadow-hover);
}

.troubleshooting-question {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.troubleshooting-question::-webkit-details-marker {
    display: none;
}

.troubleshooting-question::after {
    content: '+';
    font-size: 1.2rem;
    transition: transform 0.4s ease;
}

.troubleshooting-item[open] .troubleshooting-question::after {
    transform: rotate(45deg);
}

.troubleshooting-answer__collapsible {
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0;
    border-top: 1px solid transparent;
    transition: grid-template-rows var(--collapsible-duration) ease, opacity var(--collapsible-duration) ease,
        border-color var(--collapsible-duration) ease;
}

.troubleshooting-answer__collapsible > .troubleshooting-answer {
    min-height: 0;
}

.troubleshooting-item[open] .troubleshooting-answer__collapsible {
    grid-template-rows: 1fr;
    opacity: 1;
    border-top-color: rgba(var(--color-accent-rgb), 0.18);
}

.troubleshooting-answer {
    padding: 10px 24px 24px;
    font-size: 0.95rem;
    color: var(--text-glow);
    line-height: 1.6;
    background: var(--surface-answer);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    border-top: none;
}

.troubleshooting-answer__text {
    flex: 1 1 260px;
    min-width: 200px;
    margin: 0;
    white-space: pre-line;
}

.troubleshooting-answer__media {
    flex: 0 0 auto;
    max-width: 320px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    background: var(--surface-overlay);
}

.troubleshooting-answer__media.is-hidden {
    display: none;
}

.troubleshooting-answer__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 320px;
}

.task-description {
    margin-top: 8px;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.task-description.is-hidden {
    display: none;
}

.task-card--done {
    border-color: rgba(var(--color-success-rgb), 0.42);
    background: var(--surface-task-done);
}

.task-card--done .task-title-text {
    color: var(--color-success);
}

.task-card--inactive {
    border-color: rgba(var(--color-warning-rgb), 0.32);
    background: var(--surface-task-inactive);
}

.task-card--inactive .task-title-text:not(.is-complete) {
    color: var(--text-task-inactive);
}

.task-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    border-radius: 999px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.45);
    background: var(--surface-status);
    color: var(--text-bright);
    text-transform: uppercase;
}

.task-status-badge--done {
    border-color: rgba(var(--color-success-rgb), 0.6);
    background: var(--surface-status-done);
    color: var(--text-status-done);
}

.task-status-badge--inactive {
    border-color: var(--border-status-inactive);
    background: var(--surface-status-inactive);
    color: var(--text-status-inactive);
}

.overview-task-image {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    background: var(--surface-image);
}

.overview-task-image.is-hidden {
    display: none;
}

.overview-task-image__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 260px;
}

.overview-task-image:not(.is-hidden) .overview-task-image__img {
    cursor: zoom-in;
}

.overview-task-image__img:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}

@media (max-width: 1080px) {
    .overview-card-body {
        flex-direction: column;
    }

    .overview-card-content,
    .overview-card-media {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .overview-task-image__img {
        max-height: 320px;
    }
}

@media (max-width: 768px) {
    main {
        padding: 28px 16px;
    }

    body.overview main,
    body.troubleshooting main {
        padding: 28px 12px 64px;
        align-items: stretch;
    }

    body.overlay-mode main {
        display: block;
        min-height: 100vh;
    }

    .background-grid {
        display: none;
    }

    .task-board,
    .overview .task-board,
    .troubleshooting .task-board {
        width: 100%;
        padding: 28px 20px;
        margin: 0;
    }

    .task-board__header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .task-board__header--with-nav {
        align-items: stretch;
    }

    .task-board__title {
        width: 100%;
        text-align: center;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    body.overlay-mode .task-board__header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    body.overlay-mode .task-board__title {
        width: auto;
        flex: 0 0 auto;
        text-align: left;
        letter-spacing: 0.08em;
    }

    body.overlay-mode .task-board {
        display: flex;
        flex-direction: column;
    }

    .task-board__nav {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .task-board__nav-link {
        flex: 1 1 calc(50% - 10px);
        min-width: calc(50% - 10px);
        text-align: center;
    }

    .task-board__collapse-toggle {
        width: 100%;
        justify-content: center;
    }

    .task-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .task-title-main {
        flex-wrap: wrap;
    }

    .task-title-text {
        white-space: normal;
        line-height: 1.35;
    }

    .task-status-badge {
        margin-left: 0;
    }

    .overview .task-card {
        padding: 18px 20px 22px;
    }

    .overview .task-card--skeleton {
        padding: 20px 22px 24px;
    }

    .overview .task-card--skeleton .task-card--skeleton__body {
        margin-top: 22px;
    }

    .task-card--skeleton__media {
        max-width: none;
        width: 100%;
    }

    .task-card--skeleton .skeleton-block--image {
        height: var(--skeleton-image-height, 260px);
    }

    .overview-card-body {
        gap: 18px;
    }

    .overview-card-media {
        max-width: none;
    }

    .overview .subtask-list {
        gap: 12px;
    }

    .overview .subtask-item {
        padding: 10px 12px;
    }

    .troubleshooting-list {
        gap: 14px;
    }

    .troubleshooting-item {
        border-radius: 12px;
    }

    .troubleshooting-question {
        padding: 16px 18px;
        font-size: 1rem;
    }

    .troubleshooting-answer {
        flex-direction: column;
        padding: 12px 18px 20px;
    }

    .troubleshooting-answer__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .troubleshooting-answer__media {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 768px) {
    body.overlay-mode .task-title-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

body.overlay-mode .task-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 520px) {
    .task-board,
    .overview .task-board,
    .troubleshooting .task-board {
        padding: 24px 16px;
    }

    .task-board__nav {
        gap: 8px;
    }

    .task-board__nav-link {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .task-title-row {
        gap: 8px;
    }

    .task-title-main {
        gap: 10px;
    }

    .task-card__collapse-toggle {
        align-self: stretch;
        height: 36px;
    }

    .overview .task-card {
        padding: 16px;
    }

    .overview .task-card--skeleton {
        padding: 18px;
    }

    .overview .task-card--skeleton .task-card--skeleton__body {
        margin-top: 20px;
    }

    .task-card--skeleton .skeleton-block--image {
        height: var(--skeleton-image-height, 220px);
    }

    .overview .task-progress {
        gap: 8px;
    }

    .overview-task-image__img {
        max-height: 220px;
    }

    .troubleshooting-question {
        font-size: 0.95rem;
    }

    .troubleshooting-answer {
        gap: 14px;
    }

    .troubleshooting-answer__image {
        max-height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-card__collapsible,
    .troubleshooting-answer__collapsible {
        transition: none;
    }

    .background-stars__cluster,
    .background-stars__cluster::before,
    .background-stars__cluster::after {
        animation: none;
    }
}


.task-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.task-card__collapse-toggle {
    border: 1px solid var(--accent-border-medium);
    background: var(--surface-glass-light);
    color: var(--text-toggle);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.task-card__collapse-toggle:hover,
.task-card__collapse-toggle:focus-visible {
    background: var(--surface-hover);
    border-color: var(--accent-border-hover);
    color: var(--text-toggle-strong);
}

.task-card__collapse-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.35);
}

.task-card__collapse-icon {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.task-card__collapsible {
    margin-top: 20px;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--collapsible-duration) ease, opacity var(--collapsible-duration) ease;
}

.task-card__collapsible > .overview-card-body {
    min-height: 0;
}

.task-card--collapsed .task-card__collapsible {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.task-title-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.task-image-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-glow);
    opacity: 0.85;
}

.task-image-indicator svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.task-image-indicator.is-hidden {
    display: none;
}

.task-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.checkbox {
    appearance: none;
    border-radius: 4px;
    border: 2px solid var(--color-checkbox-border);
    background: var(--color-checkbox-bg);
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    min-width: 22px;
}

.checkbox:checked {
    border-color: rgba(var(--color-accent-rgb), 0.9);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.55);
}

.checkbox:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--color-checkbox-fill);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.65);
}

.checkbox[disabled] {
    cursor: not-allowed;
    opacity: 0.75;
}

.checkbox-animate {
    animation: checkboxPulse 0.32s ease;
}

.icon-button {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-glow);
    transition: background 0.2s ease, color 0.2s ease;
}

.icon-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.icon-button:hover {
    background: rgba(var(--color-accent-rgb), 0.08);
    color: rgba(var(--color-accent-rgb), 0.95);
}

.icon-button[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}

.task-delete-button,
.subtask-delete-button {
    flex: 0 0 auto;
}

.subtask-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 38px;
}

.subtask-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.subtask-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.subtask-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.subtask-row-main .subtask-title-text,
.subtask-row > .subtask-title-text {
    flex: 1 1 auto;
    min-width: 0;
}

.subtask-note {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding-left: 34px;
    max-width: 100%;
    line-height: 1.4;
}

.subtask-keys-inline {
    margin-left: auto;
    display: none;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
    justify-content: flex-end;
    text-align: right;
}

.subtask-keys-inline.is-visible {
    display: inline-flex;
}

.subtask-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-left: 34px;
}

.key-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    background: var(--surface-glass);
    color: var(--text-bright);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.key-cap {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
    background: var(--surface-key-cap);
    box-shadow: inset 0 1px 1px rgba(var(--color-accent-rgb), 0.35);
}

.key-separator,
.key-combo-separator {
    font-size: 0.7rem;
    color: var(--text-faint);
}

.key-combo-separator {
    margin: 0 4px;
}

.subtask-meta {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 6px;
    padding-left: 34px;
    width: 100%;
}

.subtask-meta .subtask-note {
    padding-left: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.board-message:not(.is-hidden) {
    opacity: 0.95;
}

.board-message--error {
    color: var(--color-warning);
}

.status-bar {
    margin-top: 24px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.9;
}

.status-bar--error {
    color: var(--color-warning);
}

body.admin .status-bar {
    margin-top: 28px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.9;
}

body.admin .status-bar--error {
    color: var(--color-warning);
}
.status-bar--compact {
    margin-top: 18px;
    font-size: 0.75rem;
}

.admin-settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-soft);
    letter-spacing: 0.05em;
    margin: -6px 0 0;
}

.settings-preview {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-preview__label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-cool);
}

.settings-preview__value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    word-break: break-word;
}

/* Admin specific styling */

body.admin {
    align-items: center;
}

.admin main {
    justify-content: center;
    padding-top: 20px;
}
.admin-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    width: 100%;
}

body.admin-login {
    align-items: center;
}

.admin-login main {
    justify-content: center;
}

.admin .task-board {
    max-width: 780px;
}
.task-board--settings {
    width: min(420px, 90vw);
    max-width: 420px;
}

.task-board--tasks {
    width: min(820px, 95vw);
    max-width: 820px;
}

.task-board--troubleshooting {
    width: min(520px, 90vw);
    max-width: 520px;
}

.admin-troubleshooting-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
    position: relative;
}

.troubleshooting-card {
    border: 1px solid var(--accent-border-light);
    border-radius: 14px;
    background: var(--surface-glass-strong);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 28px var(--shadow-medium);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.troubleshooting-card.dragging {
    opacity: 0.8;
    transform: scale(0.98);
}

.troubleshooting-card.is-inactive {
    border-color: rgba(var(--color-warning-rgb), 0.35);
    background: var(--surface-troubleshooting-inactive);
}

.troubleshooting-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.troubleshooting-card__question {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.troubleshooting-card__question-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.troubleshooting-card__image-indicator {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-glow);
    opacity: 0.85;
}

.troubleshooting-card__image-indicator svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.troubleshooting-card__image-indicator.is-hidden {
    display: none;
}

.troubleshooting-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.troubleshooting-card__toggle {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    flex: 0 0 auto;
}

.troubleshooting-card__toggle .checkbox {
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1;
    min-width: 18px;
    flex: 0 0 18px;
}

.troubleshooting-active-toggle {
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1;
    min-width: 18px;
    flex: 0 0 18px;
}

.troubleshooting-card__answer {
    font-size: 0.95rem;
    color: var(--text-troubleshooting);
    line-height: 1.6;
    background: var(--surface-inset);
    border-radius: 10px;
    padding: 18px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.troubleshooting-card__answer-text {
    flex: 1 1 220px;
    min-width: 180px;
    margin: 0;
    white-space: pre-line;
}


.admin-controls {
    display: flex;
    gap: 12px;
}

.logout-form {
    margin: 0;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-admin-logout);
}

.logout-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.logout-button:hover {
    background: var(--surface-admin-logout-hover);
    color: var(--text-admin-logout-hover);
}

.admin-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.admin-footer .status-bar {
    flex: 1 1 auto;
    margin-top: 0;
}

.admin-footer .refresh-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

body.is-image-preview-open {
    overflow: hidden;
}

.image-preview-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1200;
}

.image-preview-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.image-preview-overlay__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: min(90vw, 1200px);
    max-height: min(90vh, 900px);
    border-radius: 18px;
    background: rgba(var(--surface-overlay-rgb), 0.9);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
}

.image-preview-overlay__img {
    width: 100%;
    height: auto;
    max-height: calc(90vh - 160px);
    object-fit: contain;
    border-radius: 12px;
    background: rgba(var(--surface-glass-rgb), 0.35);
}

.image-preview-overlay__caption {
    margin: 0;
    font-size: 0.95rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.image-preview-overlay__caption.is-hidden {
    display: none;
}

.image-preview-overlay__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.75);
    color: var(--text-bright);
    font-size: 1.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}

.image-preview-overlay__close:hover,
.image-preview-overlay__close:focus-visible {
    transform: scale(1.05);
    background: rgba(var(--color-accent-rgb), 0.9);
    outline: none;
}

@media (max-width: 640px) {
    .image-preview-overlay {
        padding: 16px;
    }

    .image-preview-overlay__dialog {
        max-width: 100%;
        padding: 16px;
        border-radius: 16px;
    }

    .image-preview-overlay__close {
        width: 32px;
        height: 32px;
        font-size: 1.4rem;
    }
}

.admin-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-cool);
}

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

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

.style-manager--loading {
    opacity: 0.6;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.style-manager__section {
    padding: 16px;
    border-radius: 12px;
    background: rgba(var(--surface-glass-rgb), 0.6);
    border: 1px solid rgba(var(--color-panel-border-rgb), 0.35);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.style-manager__section--collapsible {
    padding: 0;
    display: block;
    overflow: hidden;
}

.style-manager__section-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
}

.style-manager__section-title--secondary {
    font-size: 0.9rem;
}

.style-manager__section-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.2s ease;
    border-radius: 12px;
}

.style-manager__section-summary::-webkit-details-marker {
    display: none;
}

.style-manager__section-summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.style-manager__section-summary:hover {
    background: rgba(var(--surface-overlay-rgb), 0.35);
}

.style-manager__section-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(var(--color-panel-border-rgb), 0.28);
}

.style-manager__section-caret {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.style-manager__section[open] > .style-manager__section-summary .style-manager__section-caret {
    transform: rotate(225deg);
}

.style-manager__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.style-manager__row--actions {
    flex-wrap: wrap;
}

.style-manager__label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.style-manager__select {
    min-width: 220px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-panel-border-rgb), 0.45);
    background: rgba(var(--surface-overlay-rgb), 0.45);
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.style-manager__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    background: rgba(var(--surface-glass-rgb), 0.55);
    color: var(--text-shared);
}

.style-manager__button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.style-manager__button--primary {
    border-color: rgba(var(--color-accent-rgb), 0.65);
    background: rgba(var(--color-accent-rgb), 0.18);
    color: var(--text-ice);
}

.style-manager__button--primary:hover:not(:disabled),
.style-manager__button--primary:focus-visible:not(:disabled) {
    background: rgba(var(--color-accent-rgb), 0.28);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.25);
}

.style-manager__button--secondary {
    border-color: rgba(var(--color-accent-rgb), 0.35);
}

.style-manager__button--secondary:hover:not(:disabled),
.style-manager__button--secondary:focus-visible:not(:disabled) {
    border-color: rgba(var(--color-accent-rgb), 0.55);
    background: rgba(var(--surface-overlay-rgb), 0.45);
}

.style-manager__button--danger {
    border-color: rgba(228, 72, 94, 0.65);
    color: var(--text-on-danger);
    background: rgba(var(--danger-gradient-end-rgb, 176, 36, 56), 0.35);
}

.style-manager__button--danger:hover:not(:disabled),
.style-manager__button--danger:focus-visible:not(:disabled) {
    background: rgba(var(--danger-gradient-end-rgb, 176, 36, 56), 0.5);
}

.style-manager__button--ghost {
    background: transparent;
    border-color: rgba(var(--color-panel-border-rgb), 0.35);
}

.style-manager__button--ghost:hover:not(:disabled),
.style-manager__button--ghost:focus-visible:not(:disabled) {
    border-color: rgba(var(--color-panel-border-rgb), 0.6);
    background: rgba(var(--surface-overlay-rgb), 0.4);
}

.style-manager__hint {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.style-manager__palette-list,
.style-manager__preset-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.style-manager__palette {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.style-manager__palette-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.style-manager__color-row,
.style-manager__swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.style-manager__swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: var(--swatch-color, #000);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.style-manager__swatch:hover,
.style-manager__swatch:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(var(--color-accent-rgb), 0.85);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.35);
}

.style-manager__preset-button {
    align-self: flex-start;
}

.style-manager__group {
    border: 1px solid rgba(var(--color-panel-border-rgb), 0.3);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(var(--surface-overlay-rgb), 0.45);
}

.style-manager__group + .style-manager__group {
    margin-top: 12px;
}

.style-manager__group-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.style-manager__group[open] .style-manager__group-summary {
    background: rgba(var(--surface-hover-rgb), 0.35);
}

.style-manager__group-title {
    font-weight: 600;
    color: var(--color-text-primary);
}

.style-manager__group-description {
    font-size: 0.76rem;
    color: var(--color-text-secondary);
}

.style-manager__group-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 18px;
}

.style-manager__token {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(var(--surface-glass-rgb), 0.4);
    border: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.style-manager__token--modified {
    border-color: rgba(var(--color-accent-rgb), 0.45);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.2);
}

.style-manager__token-label {
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--color-text-primary);
}

.style-manager__token-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.style-manager__color-input {
    width: 48px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.style-manager__hex-input,
.style-manager__number-input,
.style-manager__text-input {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-panel-border-rgb), 0.45);
    background: rgba(var(--surface-overlay-rgb), 0.6);
    color: var(--color-text-primary);
    font-size: 0.85rem;
    min-width: 120px;
}

.style-manager__token-value {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

.style-manager__token-reset {
    font-size: 0.7rem;
    padding: 4px 10px;
}

.style-manager__status {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(var(--surface-overlay-rgb), 0.4);
    border: 1px solid rgba(var(--color-panel-border-rgb), 0.35);
    min-height: 24px;
}

.style-manager__status--error {
    border-color: rgba(228, 72, 94, 0.6);
    color: var(--text-on-danger);
    background: rgba(var(--danger-gradient-end-rgb, 176, 36, 56), 0.4);
}

.task-meta .meta-label {
    color: var(--text-cool-faint);
}

.task-meta a {
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-border-bright);
    padding-bottom: 2px;
}

.task-meta a:hover {
    border-bottom-color: rgba(var(--color-accent-rgb), 0.8);
}

.task-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 8px;
}

.task-progress.is-hidden {
    display: none;
}

.task-progress.is-hidden .task-progress__value {
    animation-play-state: paused;
}

.task-progress__track {
    flex: 1;
    height: 14px;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--progress-track-border);
    background: var(--progress-track-bg);
    box-shadow: inset 0 0 12px var(--progress-track-shadow);
}

.task-progress__value {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(var(--progress-ratio, 0) * 100%);
    max-width: 100%;
    border-radius: inherit;
    background: var(--progress-value-bg);
    overflow: hidden;
    transition: width 0.35s ease;
    will-change: width;
    box-shadow: inset 0 0 16px var(--progress-value-shadow);
}

.task-progress__value::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, var(--progress-stripe-primary) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(-45deg, var(--progress-stripe-secondary) 0 6px, transparent 6px 12px);
    background-size: 12px 12px;
    background-position: 0 0;
    animation: none;
    opacity: 0.9;
}

.task-progress__value.progress-changed::after {
    animation: progressStripes 1.6s linear 1;
}

body.overlay-mode .task-progress__value::after,
body.overlay-mode .task-progress__value.progress-changed::after {
    animation: none !important;
}

.task-progress__label {
    flex: 0 0 auto;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-progress-label);
}

.task-progress__title {
    flex: 0 0 auto;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-progress-title);
}

@keyframes progressStripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 24px 0;
    }
}

.admin .task-title-row {
    font-size: 1.25rem;
}

.admin .task-description {
    color: var(--text-admin-description);
}

.admin .subtask-item {
    font-size: 0.95rem;
}

.admin .checkbox:not([disabled]) {
    cursor: pointer;
}

.task-action-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--text-soft);
    cursor: grab;
    transition: background 0.2s ease, color 0.2s ease;
}

.drag-handle svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle:hover {
    background: rgba(var(--color-accent-rgb), 0.16);
    color: rgba(var(--color-accent-rgb), 0.95);
}

.task-card.dragging,
.subtask-item.dragging,
.troubleshooting-card.dragging {
    opacity: 0.55;
}

.task-card.drop-target,
.subtask-item.drop-target,
.troubleshooting-card.drop-target {
    outline: 1px dashed rgba(var(--color-accent-rgb), 0.5);
    outline-offset: 4px;
}

.subtask-list.drag-origin {
    min-height: 46px;
}

.logout-form {
    margin: 0;
}

.logout-button {
    min-width: 0;
}

.admin-create-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.inline-field-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.inline-field {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-create-form--stacked .inline-field {
    flex: 1 1 100%;
}

.inline-field .text-input {
    width: 100%;
}

.inline-field .file-input {
    width: 100%;
}

.inline-checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 220px;
}

.inline-checkbox__body {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid var(--accent-border-soft);
    background: var(--surface-glass-light);
    color: var(--color-text-secondary);
    min-height: 42px;
}

.inline-checkbox__body .checkbox {
    margin: 0;
}

.inline-input {
    flex: 1 1 200px;
}

.inline-button {
    align-self: flex-end;
    flex: 0 0 auto;
}

.subtask-create-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.subtask-create-form .inline-input,
.subtask-create-form .text-input {
    border: 1px solid var(--accent-border-medium);
}

.entering {
    animation: fadeInUp 0.45s ease forwards;
}

.leaving {
    animation: fadeOutDown 0.45s ease forwards;
}

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

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

@keyframes checkboxPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(var(--accent-pulse-rgb), 0);
    }
    45% {
        transform: scale(1.08);
        box-shadow: 0 0 14px rgba(var(--accent-pulse-rgb), 0.55);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(var(--accent-pulse-rgb), 0);
    }
}

/* Installer */

body.install {
    align-items: center;
}

.install .task-board {
    max-width: 640px;
}

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

.setup-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.setup-message {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--surface-setup-message);
    border: 1px solid var(--accent-border-bright);
    font-size: 0.85rem;
    box-shadow: inset 0 1px 1px rgba(var(--color-accent-rgb), 0.35);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.setup-message--error {
    border-color: var(--warning-border-strong);
    color: var(--color-warning);
}

.form-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

.password-field {
    position: relative;
}

.password-field .text-input {
    width: 100%;
    padding-right: 46px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: var(--surface-glass);
    color: var(--text-soft);
    border-radius: 6px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.password-toggle:hover,
.password-toggle.is-visible {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.14);
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.18);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--accent-border-strong);
    outline-offset: 2px;
}

.password-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.field-hint {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text-faint);
}

.field-label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-cool-strong);
}

.text-input {
    background: var(--surface-glass-strong);
    border: 1px solid var(--accent-border-soft);
    border-radius: 6px;
    color: var(--color-text-primary);
    padding: 10px 12px;
    font-size: 0.95rem;
}

.text-input:focus {
    outline: none;
    border-color: var(--accent-border-strong);
    box-shadow: 0 0 0 2px var(--accent-glow-soft);
}

.range-input {
    width: 100%;
    accent-color: var(--color-checkbox-fill);
    background: transparent;
}

.file-input {
    width: 100%;
    background: var(--surface-glass-strong);
    border: 1px solid var(--accent-border-soft);
    border-radius: 6px;
    color: var(--color-text-primary);
    padding: 8px 10px;
    font-size: 0.9rem;
}

.file-input:focus {
    outline: none;
    border-color: var(--accent-border-strong);
    box-shadow: 0 0 0 2px var(--accent-glow-soft);
}

.file-input::file-selector-button {
    margin-right: 14px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.45);
    background: var(--surface-file);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.file-input::file-selector-button:hover {
    background: var(--surface-file-hover);
    border-color: var(--accent-border-highlight);
    color: var(--text-file-hover);
}

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

.primary-button {
    border: 1px solid var(--accent-border-strong);
    background: linear-gradient(90deg, var(--surface-primary-button), var(--surface-primary-button-accent));
    color: var(--color-text-primary);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px var(--shadow-medium);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--surface-modal-scrim);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-dialog {
    width: min(420px, 92vw);
    background: linear-gradient(145deg, var(--surface-modal-start), var(--surface-modal-end));
    border: 1px solid var(--accent-border-medium);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 18px 44px var(--shadow-strong);
}

.modal-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.modal-dialog__title {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.modal-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-dialog__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-image-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.modal-image-preview__img {
    width: 100%;
    height: auto;
    max-height: 220px;
    border-radius: 10px;
    border: 1px solid var(--accent-border-medium);
    background: var(--surface-glass);
    object-fit: cover;
}

.modal-image-preview__img.is-hidden {
    display: none;
}

.modal-image-preview__placeholder {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--text-modal-placeholder);
}

.modal-image-preview__placeholder.is-hidden {
    display: none;
}

.modal-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-dialog__message {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-modal-message);
}

.modal-dialog__confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
}

.danger-button {
    background: linear-gradient(135deg, var(--danger-gradient-start), var(--danger-gradient-end));
    color: var(--text-on-danger);
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow: 0 6px 16px var(--shadow-danger);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.danger-button:hover,
.danger-button:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px var(--shadow-danger-strong);
    opacity: 0.95;
}

.danger-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px var(--shadow-danger-active);
    opacity: 1;
}

.modal-input,
.modal-textarea {
    background: var(--surface-glass-strong);
    border: 1px solid var(--accent-border-light);
    border-radius: 6px;
    color: var(--color-text-primary);
    padding: 10px 12px;
    font-size: 0.95rem;
    resize: vertical;
}

.modal-textarea {
    min-height: 90px;
}

.modal-input:focus,
.modal-textarea:focus {
    outline: none;
    border-color: rgba(var(--color-accent-rgb), 0.65);
    box-shadow: 0 0 0 2px var(--accent-glow-soft);
}

.modal-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
}

.modal-checkbox.is-hidden {
    display: none;
}

.modal-backdrop .primary-button,
.modal-backdrop .refresh-button {
    min-width: 0;
}