:root,
html[data-theme="light"] {
    color-scheme: light;
    --app-bg: #f3f7fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-border: #dce5ef;
    --app-text: #10213a;
    --app-muted: #66768c;
    --app-brand: #1769e0;
    --app-brand-strong: #104ca8;
    --app-brand-soft: #e8f2ff;
    --app-accent: #0f9f91;
    --app-danger: #b42345;
    --app-warning: #ad6100;
    --app-shadow: 0 24px 60px -38px rgba(16, 33, 58, .42);
    --app-radius: 1.15rem;
}

html[data-theme="dark_navy"] {
    color-scheme: dark;
    --app-bg: #07111f;
    --app-surface: #0d1b2d;
    --app-surface-soft: #13243a;
    --app-border: #293c56;
    --app-text: #edf4fc;
    --app-muted: #9aabc0;
    --app-brand: #63a8ff;
    --app-brand-strong: #9bc8ff;
    --app-brand-soft: rgba(64, 145, 255, .15);
    --app-accent: #45d4c3;
    --app-danger: #ff829b;
    --app-warning: #ffc66d;
    --app-shadow: 0 28px 68px -38px rgba(0, 0, 0, .85);
}

html[data-theme="dark_neutral"] {
    color-scheme: dark;
    --app-bg: #111214;
    --app-surface: #1b1d20;
    --app-surface-soft: #24272b;
    --app-border: #3d4249;
    --app-text: #f5f6f7;
    --app-muted: #b0b6bf;
    --app-brand: #82b5ff;
    --app-brand-strong: #b7d4ff;
    --app-brand-soft: rgba(130, 181, 255, .14);
    --app-accent: #55d6c2;
    --app-danger: #ff8ca2;
    --app-warning: #ffd08a;
    --app-shadow: 0 28px 68px -38px rgba(0, 0, 0, .9);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --app-bg: #07111f;
        --app-surface: #0d1b2d;
        --app-surface-soft: #13243a;
        --app-border: #293c56;
        --app-text: #edf4fc;
        --app-muted: #9aabc0;
        --app-brand: #63a8ff;
        --app-brand-strong: #9bc8ff;
        --app-brand-soft: rgba(64, 145, 255, .15);
        --app-accent: #45d4c3;
        --app-danger: #ff829b;
        --app-warning: #ffc66d;
        --app-shadow: 0 28px 68px -38px rgba(0, 0, 0, .85);
    }
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--app-bg); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--app-text); background: var(--app-bg); font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: inherit; }
h1, h2, h3 { color: var(--app-text); letter-spacing: -.035em; }
h1 { font-size: clamp(1.85rem, 7vw, 3.25rem); line-height: 1.08; }
h2 { font-size: clamp(1.25rem, 4vw, 1.65rem); }
h3 { font-size: 1rem; }
.muted { color: var(--app-muted); }
.eyebrow { margin: 0 0 .45rem; color: var(--app-brand); font-size: .7rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.skip-link { position: fixed; z-index: 2000; top: .5rem; left: .5rem; padding: .7rem 1rem; color: #fff; background: #111; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-brand) 60%, transparent); outline-offset: 3px; }

.app-shell { min-height: 100vh; }
.app-sidebar { display: none; }
.app-column { min-width: 0; min-height: 100vh; }
.app-header { position: sticky; z-index: 40; top: 0; display: flex; height: 4.25rem; align-items: center; gap: .55rem; padding: 0 1rem; border-bottom: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-bg) 88%, transparent); backdrop-filter: blur(18px); }
.header-spacer { flex: 1; }
.app-header form { display: inline-flex; margin: 0; }
.app-content { width: min(100%, 91rem); margin: 0 auto; padding: 1.15rem 1rem calc(7.5rem + env(safe-area-inset-bottom)); }
.app-brand { display: inline-flex; min-width: 0; align-items: center; gap: .7rem; text-decoration: none; }
.app-brand-mark { display: grid; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; place-items: center; border-radius: .85rem; color: #fff; background: linear-gradient(145deg, #1769e0, #0f9f91); box-shadow: 0 14px 28px -17px #1769e0; font-weight: 900; }
.app-brand span:last-child { display: grid; min-width: 0; }
.app-brand strong { color: var(--app-text); font-size: .95rem; }
.app-brand small { color: var(--app-muted); font-size: .63rem; font-weight: 750; letter-spacing: .08em; }
.mobile-brand { align-items: center; gap: .55rem; text-decoration: none; }
.mobile-brand .app-brand-mark { width: 2rem; height: 2rem; border-radius: .65rem; }
.icon-button { display: inline-grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border: 1px solid var(--app-border); border-radius: .82rem; color: var(--app-text); background: var(--app-surface); }
.icon-button:hover { border-color: var(--app-brand); color: var(--app-brand-strong); background: var(--app-brand-soft); }
.logout-button { color: var(--app-danger); }
.app-nav { display: grid; gap: .35rem; }
.app-nav-link { display: flex; min-height: 3.25rem; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: .85rem; color: var(--app-muted); font-size: .88rem; font-weight: 700; text-decoration: none; }
.app-nav-link:hover, .app-nav-link.active { color: var(--app-brand-strong); background: var(--app-brand-soft); }
.app-nav-link.disabled { opacity: .55; }
.app-offcanvas { color: var(--app-text); background: var(--app-surface); }
.app-offcanvas .btn-close { filter: var(--bs-btn-close-white-filter, none); }

.page-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-heading { margin-bottom: 1.2rem; }
.page-heading h1, .page-heading p:last-child, .section-heading h2 { margin-bottom: 0; }
.count-pill, .version-pill { display: inline-flex; min-width: 2rem; min-height: 2rem; align-items: center; justify-content: center; padding: .25rem .6rem; border-radius: 999px; color: var(--app-brand-strong); background: var(--app-brand-soft); font-size: .72rem; font-weight: 850; }
.work-layout, .detail-layout { display: grid; gap: 1rem; }
.task-list { display: grid; gap: .75rem; margin-top: 1rem; }
.task-card { display: grid; gap: .6rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: 1rem; color: var(--app-text); background: var(--app-surface); box-shadow: var(--app-shadow); text-decoration: none; transition: border-color .15s, transform .15s; }
.task-card:hover { border-color: var(--app-brand); transform: translateY(-1px); }
.task-card h3 { margin: 0; overflow-wrap: anywhere; }
.task-expandable > summary { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.task-expandable > summary::-webkit-details-marker { display: none; }
.task-card-main { display: grid; min-width: 0; gap: .35rem; }
.task-card-main strong { overflow-wrap: anywhere; }
.expand-indicator { font-size: 1.2rem; transition: transform .15s; }
.task-expandable[open] .expand-indicator { transform: rotate(180deg); }
.task-compact-details { display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.task-compact-details dl { display: grid; gap: .75rem; margin: 0; }
.task-compact-details dl > div { display: grid; gap: .2rem; }
.task-compact-details dt { color: var(--app-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.task-compact-details dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.task-icon-actions { display: flex; align-items: flex-start; gap: .65rem; }
.icon-action { display: grid; width: 3rem; height: 3rem; cursor: pointer; place-items: center; border: 1px solid var(--app-border); border-radius: .8rem; color: var(--app-brand-strong); background: var(--app-surface-soft); text-decoration: none; }
.icon-action:hover { border-color: var(--app-brand); color: var(--app-brand-strong); background: var(--app-brand-soft); }
.icon-action-danger { border-color: color-mix(in srgb, var(--app-danger) 50%, var(--app-border)); color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface)); }
.icon-action-danger:hover { border-color: var(--app-danger); color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 16%, var(--app-surface)); }
.trash-icon { display: block; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-action span { font-size: 1.2rem; }
.app-modal { border: 1px solid var(--app-border); border-radius: 1rem; color: var(--app-text); background: var(--app-surface); box-shadow: var(--app-shadow); }
.app-modal .modal-header, .app-modal .modal-footer { border-color: var(--app-border); }
.app-modal .btn-close { filter: var(--bs-btn-close-white-filter, none); }
.modal-task-title { max-width: 28rem; margin: .2rem 0 0; overflow-wrap: anywhere; }
.advanced-fields { margin: .25rem 0 1rem; border: 1px solid var(--app-border); border-radius: .8rem; }
.advanced-fields > summary { cursor: pointer; padding: .8rem 1rem; color: var(--app-brand-strong); font-weight: 800; }
.advanced-fields-body { padding: 0 1rem 1rem; }
.note-toolbar { display: grid; gap: .75rem; align-items: end; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); }
.note-toolbar .form-field { margin: 0; }
.note-board { display: grid; grid-auto-columns: minmax(min(19rem, 85vw), 1fr); grid-auto-flow: column; gap: 1rem; overflow-x: auto; padding: .25rem .1rem 1rem; scroll-snap-type: x proximity; }
.note-column { min-height: 12rem; padding: .8rem; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface-soft); scroll-snap-align: start; }
.note-column > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.note-column h2 { margin: 0; font-size: 1rem; }
.note-dropzone { display: grid; min-height: 7rem; align-content: start; gap: .65rem; border-radius: .8rem; transition: background .15s, outline-color .15s; }
.note-dropzone.drag-over { outline: 2px dashed var(--app-brand); outline-offset: .2rem; background: var(--app-brand-soft); }
.note-column-empty { align-self: center; margin: 1.5rem .5rem; color: var(--app-muted); font-size: .75rem; text-align: center; }
.note-card { border: 1px solid var(--app-border); border-left: .25rem solid var(--app-brand); border-radius: .8rem; background: var(--app-surface); box-shadow: 0 12px 30px -26px rgba(16, 33, 58, .5); }
.note-card.status-in_progress { border-left-color: var(--app-warning); }
.note-card.status-done { border-left-color: var(--app-accent); }
.note-card.status-archived { border-left-color: var(--app-muted); opacity: .82; }
.note-card.dragging { opacity: .45; }
.note-card > summary { display: grid; cursor: pointer; gap: .6rem; padding: .8rem; list-style: none; }
.note-card > summary::-webkit-details-marker { display: none; }
.note-summary-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.note-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--app-muted); }
.note-status { font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.note-drag-handle { display: grid; width: 2.25rem; height: 2.25rem; cursor: grab; place-items: center; border: 0; border-radius: .6rem; color: var(--app-muted); background: transparent; font-size: 1.2rem; }
.note-drag-handle:active { cursor: grabbing; }
.note-details { display: grid; gap: .85rem; padding: .8rem; border-top: 1px solid var(--app-border); }
.note-long-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.tag-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-list a { padding: .18rem .45rem; border-radius: 999px; color: var(--app-brand-strong); background: var(--app-brand-soft); font-size: .7rem; font-weight: 800; text-decoration: none; }
.note-edit-form { display: grid; }
.note-files { display: grid; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--app-border); }
.note-files ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.note-files li { display: flex; align-items: center; justify-content: space-between; gap: .65rem; overflow-wrap: anywhere; }
.icon-action-small { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; }
.note-upload-form { display: grid; gap: .65rem; align-items: end; }
.note-upload-form .form-field { margin: 0; }
.note-search-results { display: grid; gap: .75rem; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; color: var(--app-muted); font-size: .76rem; }
.task-status { display: inline-flex; width: fit-content; align-items: center; gap: .4rem; color: var(--app-muted); font-size: .69rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.task-status > span { width: .55rem; height: .55rem; border-radius: 50%; background: #7b8a9d; }
.status-in_progress > span { background: #2a78e8; box-shadow: 0 0 0 .2rem rgba(42, 120, 232, .13); }
.status-completed > span { background: #0f9f70; }
.status-waiting > span, .status-paused > span { background: #dd8a16; }
.status-cancelled > span { background: #b42345; }
.priority { padding: .22rem .5rem; border-radius: 999px; background: var(--app-surface-soft); font-weight: 800; text-transform: uppercase; }
.priority-high, .priority-critical { color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface)); }
.empty-state { display: flex; gap: 1rem; align-items: center; padding: 1.2rem; border: 1px dashed var(--app-border); border-radius: 1rem; color: var(--app-muted); background: var(--app-surface-soft); }
.empty-state > span { display: grid; width: 3.2rem; height: 3.2rem; flex: 0 0 auto; place-items: center; border-radius: 1rem; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface)); font-size: 1.4rem; }
.empty-state h3, .empty-state p { margin: 0; }
.empty-state p { margin-top: .2rem; font-size: .82rem; }

.form-card { padding: clamp(1rem, 4vw, 1.5rem); border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); }
.form-card > h2 { margin-bottom: .35rem; }
.form-field { display: grid; gap: .38rem; margin-bottom: 1rem; }
.form-field label { color: var(--app-text); font-size: .82rem; font-weight: 800; }
.form-control, .form-select { min-height: 3rem; border-color: var(--app-border); border-radius: .78rem; color: var(--app-text); background-color: var(--app-surface-soft); }
.form-control:focus, .form-select:focus { border-color: var(--app-brand); color: var(--app-text); background-color: var(--app-surface); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--app-brand) 18%, transparent); }
.form-control::placeholder { color: var(--app-muted); }
.form-row { display: grid; gap: 0 1rem; }
.field-error { min-height: 1rem; color: var(--app-danger); font-size: .73rem; font-weight: 700; }
.form-message:empty { display: none; }
.form-message { margin-bottom: 1rem; }
.btn { min-height: 2.75rem; border-radius: .78rem; font-weight: 800; }
.btn-primary { border-color: var(--app-brand); background: var(--app-brand); }
.btn-primary:hover { border-color: var(--app-brand-strong); background: var(--app-brand-strong); }
.btn-outline-primary { border-color: var(--app-brand); color: var(--app-brand-strong); }
.btn-outline-primary:hover { border-color: var(--app-brand); background: var(--app-brand); }
.alert { border-radius: .85rem; }
.alert-success { border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-border)); color: var(--app-text); background: color-mix(in srgb, var(--app-accent) 11%, var(--app-surface)); }
.alert-danger { border-color: color-mix(in srgb, var(--app-danger) 40%, var(--app-border)); color: var(--app-text); background: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface)); }
.back-link { display: inline-flex; margin-bottom: 1rem; color: var(--app-brand-strong); font-size: .82rem; font-weight: 800; text-decoration: none; }
.task-hero { margin-bottom: 1rem; padding: clamp(1.15rem, 5vw, 2rem); border-radius: var(--app-radius); color: #fff; background: linear-gradient(135deg, #102b56, #1769e0 70%, #0f9f91); box-shadow: var(--app-shadow); }
.task-hero h1 { margin: 0 0 .7rem; color: #fff; overflow-wrap: anywhere; }
.task-hero .eyebrow, .task-hero .task-meta, .task-hero .task-status { color: #d9ecff; }
.status-card { align-self: start; }
.settings-grid, .settings-layout { display: grid; gap: 1rem; }
.management-list { display: grid; gap: .75rem; margin-top: 1rem; }
.management-card { overflow: hidden; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); box-shadow: var(--app-shadow); }
.management-card > summary { display: flex; min-height: 4.5rem; cursor: pointer; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem; list-style: none; }
.management-card > summary::-webkit-details-marker { display: none; }
.management-card > summary::after { content: "+"; flex: 0 0 auto; color: var(--app-brand-strong); font-size: 1.25rem; font-weight: 800; }
.management-card[open] > summary::after { content: "−"; }
.management-card[open] > summary { border-bottom: 1px solid var(--app-border); background: var(--app-surface-soft); }
.management-primary { display: grid; min-width: 0; }
.management-primary strong, .management-primary small { overflow-wrap: anywhere; }
.management-primary small, .management-meta { color: var(--app-muted); font-size: .7rem; }
.management-meta { display: none; align-items: center; gap: .55rem; }
.state-pill { display: inline-flex; padding: .2rem .5rem; border-radius: 999px; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 11%, var(--app-surface)); font-weight: 800; }
.state-pill.inactive { color: var(--app-muted); background: var(--app-surface-soft); }
.management-form { padding: 1rem; }
.sidebar-account { color: inherit; text-decoration: none; }
.sidebar-account:hover { outline: 1px solid var(--app-brand); }

.mobile-bottom-nav { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: .45rem max(.5rem, env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border-top: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-surface) 94%, transparent); backdrop-filter: blur(18px); }
.mobile-bottom-nav a, .mobile-bottom-nav > span, .mobile-bottom-nav button { display: grid; min-height: 3rem; place-items: center; align-content: center; gap: .15rem; border: 0; color: var(--app-muted); background: transparent; font-size: .92rem; text-decoration: none; }
.mobile-bottom-nav small { font-size: .61rem; font-weight: 750; }
.mobile-bottom-nav [aria-current="page"] { color: var(--app-brand-strong); }
.mobile-bottom-nav [aria-disabled="true"] { opacity: .48; }
.quick-add { position: fixed; z-index: 70; right: 1rem; bottom: calc(4.8rem + env(safe-area-inset-bottom)); display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: 1rem; color: #fff; background: var(--app-brand); box-shadow: 0 18px 38px -16px var(--app-brand); font-size: 1.75rem; font-weight: 500; text-decoration: none; }

.auth-body { overflow-x: hidden; }
.auth-shell { display: grid; min-height: 100svh; }
.auth-visual { display: none; }
.auth-panel { position: relative; display: grid; min-height: 100svh; place-items: center; padding: max(4.5rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
.auth-theme { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.auth-card { width: min(100%, 27rem); padding: clamp(1.25rem, 5vw, 2rem); border: 1px solid var(--app-border); border-radius: 1.35rem; background: var(--app-surface); box-shadow: var(--app-shadow); }
.auth-brand { margin-bottom: 2rem; }
.auth-card h1 { margin-bottom: .45rem; font-size: 2.2rem; }
.auth-card form { margin-top: 1.35rem; }
.auth-security { margin: 1.25rem 0 0; color: var(--app-muted); font-size: .7rem; text-align: center; }
.auth-kicker { display: inline-flex; margin-bottom: 1.2rem; padding: .4rem .7rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.error-card { width: min(100%, 42rem); margin: 4rem auto; padding: clamp(1.25rem, 6vw, 2.5rem); border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); text-align: center; }
.error-code { display: inline-grid; min-width: 4rem; min-height: 4rem; margin-bottom: 1rem; place-items: center; border-radius: 1.2rem; color: var(--app-brand-strong); background: var(--app-brand-soft); font-size: 1.25rem; font-weight: 900; }
.auth-error-card { margin: max(2rem, 15vh) auto; }
.toast-region { position: fixed; z-index: 2000; top: 1rem; right: 1rem; width: min(24rem, calc(100vw - 2rem)); }
.app-toast { margin-bottom: .5rem; padding: .8rem 1rem; border: 1px solid var(--app-border); border-radius: .85rem; color: var(--app-text); background: var(--app-surface); box-shadow: var(--app-shadow); font-size: .82rem; }

.collaboration-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.participant-list, .comment-list { display: grid; gap: .75rem; margin: 1rem 0; }
.participant-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 1px solid var(--app-border); border-radius: .8rem; }
.participant-row span { display: grid; }
.participant-row small, .comment-card small { color: var(--app-muted); }
.compact-form { display: grid; gap: .75rem; }
.comment-card { padding: .85rem 1rem; border-left: .25rem solid var(--app-border); border-radius: 0 .8rem .8rem 0; background: var(--app-surface-soft); }
.comment-card.comment-important { border-left-color: var(--app-warning); }
.comment-card header { display: flex; justify-content: space-between; gap: .75rem; }
.comment-body { margin: .65rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-mentions { color: var(--app-brand-strong); font-size: .875rem; }
.comment-card details { margin-top: .65rem; }
.mention-picker { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1rem; padding: 0; border: 0; }
.mention-picker legend { width: 100%; margin-bottom: .35rem; font-weight: 800; }
.heading-actions, .trash-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.danger-zone p { margin: .2rem 0 0; }
.trash-list { display: grid; gap: .8rem; }
.trash-card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); box-shadow: var(--app-shadow); }
.trash-card h2 { margin: .35rem 0 .2rem; overflow-wrap: anywhere; }
.trash-card p { margin: 0; }

@media (min-width: 40rem) {
    .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .task-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .task-card .task-status, .task-card h3 { grid-column: 1; }
    .task-card .task-meta { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
    .management-meta { display: flex; }
    .task-compact-details { grid-template-columns: minmax(0, 1fr) auto; }
    .trash-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .note-toolbar { grid-template-columns: minmax(10rem, .45fr) minmax(14rem, 1fr) auto auto; }
    .note-search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .note-upload-form { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 62rem) {
    .app-shell { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); }
    .app-sidebar { position: sticky; top: 0; display: flex; height: 100vh; min-height: 0; flex-direction: column; padding: 1.4rem 1rem; border-right: 1px solid var(--app-border); background: var(--app-surface); }
    .app-sidebar .app-nav { margin-top: 2rem; }
    .sidebar-account { display: grid; margin-top: auto; padding: .9rem; border-radius: .9rem; background: var(--app-surface-soft); overflow-wrap: anywhere; }
    .sidebar-account small, .sidebar-account span { color: var(--app-muted); font-size: .68rem; }
    .sidebar-account strong { margin: .16rem 0; font-size: .8rem; }
    .app-header { height: 4.8rem; padding: 0 2rem; }
    .app-content { padding: 2rem 2rem 4rem; }
    .work-layout { grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .72fr); gap: 1.25rem; }
    .detail-layout { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .6fr); gap: 1.25rem; }
    .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .settings-layout { grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .72fr); gap: 1.25rem; }
    .collaboration-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .compact-form { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) auto; align-items: end; }
    .note-search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-card { scroll-margin-top: 6rem; }
    .auth-shell { grid-template-columns: minmax(0, 1.25fr) minmax(27rem, .75fr); }
    .auth-visual { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 4rem; color: #fff; background: linear-gradient(135deg, #091b35, #154f9e 58%, #0c8c83); }
    .auth-visual::after { position: absolute; right: -7rem; bottom: -15rem; content: "A"; color: rgba(255,255,255,.055); font-size: 35rem; font-weight: 900; line-height: 1; }
    .auth-visual > div { position: relative; z-index: 1; max-width: 40rem; }
    .auth-visual h1 { margin-bottom: 1rem; color: #fff; }
    .auth-visual p { color: #cfe6ff; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}