:root {
    --bg-main: #1b1f26;
    --bg-column: #242b35;
    --bg-card: #2a313d;
    --text-main: #e4e9f2;
    --text-muted: #a4afbe;
    --primary: #6f8fb3;
    --primary-dark: #5a799b;
    --primary-soft: #2b3543;
    --border: #3e4757;
    --danger: #de5472;
    --success: #22a447;
    --completed-bg: #1f3b2a;
    --completed-border: #2f6a48;
    --completed-text: #d8f4e2;
    --completed-muted: #add7bf;
    --shadow-soft: 0 8px 28px rgba(10, 13, 18, 0.38);

    --app-bg: #181c23;
    --topbar-bg: #20252d;
    --topbar-border: #313846;
    --topbar-text: #e5e9f1;
    --menu-bg: #222830;
    --menu-border: #343d4b;
    --menu-link: #e1e7f0;
    --menu-link-hover: #2d3542;
    --menu-item-border: #3a4454;
    --menu-item-hover-text: #edf2fa;
    --menu-item-active-bg: #253656;
    --menu-item-active-border: #4f7fc2;
    --menu-item-active-text: #f1f6ff;
    --sidebar-bg: #1c2129;
    --sidebar-border: #313948;
    --sidebar-card-bg: #242b35;
    --sidebar-card-border: #394252;
    --sidebar-card-active-bg: #2c3b4d;
    --sidebar-card-active-border: #7ea0c9;
    --sidebar-text: #e3e9f2;
    --toggle-bg: #39414f;
    --toggle-bg-hover: #475061;
    --board-title: #f0f4fb;
    --board-subtitle: #aeb8c7;
    --input-bg: #252d38;
    --input-border: #3b4555;
    --input-text: #ebf0f8;
    --column-bg-theme: #212833;
    --column-border-theme: #3a4454;
    --task-bg-theme: #262e3a;
    --task-border-theme: #3d4758;
    --task-title-theme: #edf2fa;
    --task-desc-theme: #b7c0cf;
    --scroll-track: #262f3b;
    --scroll-thumb: #647b9a;
    --modal-backdrop: rgba(9, 13, 20, 0.58);
    --modal-bg: #252d39;
    --modal-shadow: 0 18px 44px rgba(7, 10, 15, 0.46);
    --modal-text: #ebf1f9;
    --modal-muted: #aeb8c8;
    --cancel-bg: #364150;
    --cancel-text: #dbe3f0;
    --cancel-hover: #424f61;
    --body-text: #dce3ef;
    --gantt-today: #f2c24a;
    --gantt-today-soft: #f8d878;
    --gantt-pending: #2f7ee6;
    --gantt-pending-dark: #1f5fbb;
    --gantt-completed: #1f883d;
    --gantt-completed-dark: #166b2f;
    --gantt-overdue: #cf222e;
    --gantt-overdue-dark: #a40e26;
    --gantt-overdue-soft: #ffc0c5;
    --content-bg: var(--app-bg);
    --column-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
    --task-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    --epic-color-azul: #1d4ed8;
    --epic-color-roxo: #7e22ce;
    --epic-color-verde: #15803d;
    --epic-color-laranja: #ea580c;
    --epic-color-rosa: #db2777;
    --epic-color-vermelho: #dc2626;
    --epic-color-cinza: #475569;
}

body.theme-light {
    --app-bg: #f6f8fa;
    --topbar-bg: #ffffff;
    --topbar-border: #d8dee4;
    --topbar-text: #1f2328;
    --menu-bg: #ffffff;
    --menu-border: #d0d7de;
    --menu-link: #24292f;
    --menu-link-hover: #f3f4f6;
    --menu-item-border: #d8dee4;
    --menu-item-hover-text: #1f2328;
    --menu-item-active-bg: #ddf4ff;
    --menu-item-active-border: #54aeff;
    --menu-item-active-text: #0969da;
    --sidebar-bg: #f6f8fa;
    --sidebar-border: #d8dee4;
    --sidebar-card-bg: #ffffff;
    --sidebar-card-border: #d0d7de;
    --sidebar-card-active-bg: #ddf4ff;
    --sidebar-card-active-border: #54aeff;
    --sidebar-text: #24292f;
    --toggle-bg: #eaeef2;
    --toggle-bg-hover: #dde4ea;
    --board-title: #1f2328;
    --board-subtitle: #57606a;
    --input-bg: #ffffff;
    --input-border: #d0d7de;
    --input-text: #1f2328;
    --column-bg-theme: #f3f5f8;
    --column-border-theme: #c9d1da;
    --task-bg-theme: #ffffff;
    --task-border-theme: #d8dee4;
    --task-title-theme: #1f2328;
    --task-desc-theme: #57606a;
    --scroll-track: #f3f4f6;
    --scroll-thumb: #8c959f;
    --modal-backdrop: rgba(31, 35, 40, 0.3);
    --modal-bg: #ffffff;
    --modal-shadow: 0 12px 30px rgba(31, 35, 40, 0.18);
    --modal-text: #1f2328;
    --modal-muted: #57606a;
    --cancel-bg: #d0d7de;
    --cancel-text: #24292f;
    --cancel-hover: #c2c9d1;
    --body-text: #24292f;
    --text-muted: #57606a;
    --primary: #0969da;
    --primary-dark: #0550ae;
    --primary-soft: #ddf4ff;
    --border: #d0d7de;
    --danger: #cf222e;
    --success: #1f883d;
    --completed-bg: color-mix(in srgb, var(--success) 16%, #ffffff 84%);
    --completed-border: color-mix(in srgb, var(--success) 42%, #d0d7de 58%);
    --completed-text: #1f4d33;
    --completed-muted: #33684a;
    --gantt-today: #b7831f;
    --gantt-today-soft: #8a5e16;
    --gantt-pending: #0969da;
    --gantt-pending-dark: #0550ae;
    --gantt-completed: #1f883d;
    --gantt-completed-dark: #166b2f;
    --gantt-overdue: #cf222e;
    --gantt-overdue-dark: #a40e26;
    --gantt-overdue-soft: #cf6672;
    --content-bg: #f6f8fa;
    --column-shadow: 0 6px 14px rgba(31, 35, 40, 0.06);
    --task-shadow: 0 1px 4px rgba(31, 35, 40, 0.08);
}

body.theme-dark {
    --app-bg: #13151a;
    --topbar-bg: #171a21;
    --topbar-border: #232734;
    --topbar-text: #f0f2f7;
    --menu-bg: #1c2029;
    --menu-border: #2d3240;
    --menu-link: #ecf0fa;
    --menu-link-hover: #2a3040;
    --menu-item-border: #373e4f;
    --menu-item-hover-text: #f0f4fc;
    --menu-item-active-bg: #2a3862;
    --menu-item-active-border: #6f8fb3;
    --menu-item-active-text: #f4f7ff;
    --sidebar-bg: #171b23;
    --sidebar-border: #252b38;
    --sidebar-card-bg: #202530;
    --sidebar-card-border: #2f3646;
    --sidebar-card-active-bg: #3a2747;
    --sidebar-card-active-border: #b347d9;
    --sidebar-text: #e7ebf6;
    --toggle-bg: #3d3149;
    --toggle-bg-hover: #4b3c5a;
    --board-title: #f3f6ff;
    --board-subtitle: #aeb7cb;
    --input-bg: #1f2430;
    --input-border: #4f3f62;
    --input-text: #ebeffa;
    --column-bg-theme: #181d27;
    --column-border-theme: #4a3a5d;
    --task-bg-theme: #232a37;
    --task-border-theme: #4f3f62;
    --task-title-theme: #eef2fc;
    --task-desc-theme: #b8c0d3;
    --scroll-track: #2a2135;
    --scroll-thumb: #a45ac9;
    --modal-backdrop: rgba(4, 8, 16, 0.62);
    --modal-bg: #1f2532;
    --modal-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    --modal-text: #eef2fc;
    --modal-muted: #b7c0d4;
    --cancel-bg: #343b4c;
    --cancel-text: #d9e0ef;
    --cancel-hover: #3f485d;
    --body-text: #e7ebf6;
    --primary: #b347d9;
    --primary-dark: #9729bf;
    --primary-soft: #3a2747;
    --border: #4f3f62;
    --content-bg: var(--app-bg);
    --column-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    --task-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

body.theme-dark-ocean {
    --app-bg: #0d1423;
    --topbar-bg: #111b2f;
    --topbar-border: #22324d;
    --topbar-text: #eaf2ff;
    --menu-bg: #152038;
    --menu-border: #243651;
    --menu-link: #e7f0ff;
    --menu-link-hover: #21314c;
    --menu-item-border: #2d4060;
    --menu-item-hover-text: #f2f7ff;
    --menu-item-active-bg: #27406d;
    --menu-item-active-border: #5f8ed6;
    --menu-item-active-text: #f5f9ff;
    --sidebar-bg: #10192c;
    --sidebar-border: #22334d;
    --sidebar-card-bg: #18233b;
    --sidebar-card-border: #2b3f5f;
    --sidebar-card-active-bg: #1f3558;
    --sidebar-card-active-border: #64a2ff;
    --sidebar-text: #e4edff;
    --toggle-bg: #2a3f63;
    --toggle-bg-hover: #35507c;
    --board-title: #eef4ff;
    --board-subtitle: #adc0de;
    --input-bg: #17243d;
    --input-border: #30486f;
    --input-text: #eaf2ff;
    --column-bg-theme: #121e34;
    --column-border-theme: #2c4162;
    --task-bg-theme: #1a2841;
    --task-border-theme: #344d76;
    --task-title-theme: #edf4ff;
    --task-desc-theme: #b6c7e1;
    --scroll-track: #17263f;
    --scroll-thumb: #5f88bf;
    --modal-backdrop: rgba(6, 12, 22, 0.64);
    --modal-bg: #16243d;
    --modal-shadow: 0 20px 45px rgba(2, 8, 18, 0.46);
    --modal-text: #eef4ff;
    --modal-muted: #b5c6df;
    --cancel-bg: #2a3b58;
    --cancel-text: #dbe8fb;
    --cancel-hover: #334969;
    --body-text: #e4ecfa;
    --primary: #4d86e8;
    --primary-dark: #3b6fc9;
    --primary-soft: #203455;
    --border: #334d76;
    --danger: #de5472;
    --success: #22a447;
    --completed-bg: #1f3b2a;
    --completed-border: #2f6a48;
    --completed-text: #d8f4e2;
    --completed-muted: #add7bf;
    --gantt-today: #f2c24a;
    --gantt-today-soft: #f8d878;
    --gantt-pending: #2f7ee6;
    --gantt-pending-dark: #1f5fbb;
    --gantt-completed: #1f883d;
    --gantt-completed-dark: #166b2f;
    --gantt-overdue: #cf222e;
    --gantt-overdue-dark: #a40e26;
    --gantt-overdue-soft: #ffc0c5;
    --content-bg: var(--app-bg);
    --column-shadow: 0 10px 28px rgba(2, 8, 18, 0.42);
    --task-shadow: 0 3px 10px rgba(2, 8, 18, 0.32);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: var(--app-bg);
    color: var(--body-text);
}

html,
.app-shell,
.app-body,
.kanban-page,
.board-columns {
    background: var(--content-bg);
}

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh / 0.9);
    min-height: calc(100dvh / 0.9);
    zoom: 0.9;
}

.top-navbar {
    height: 54px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--topbar-text);
    text-decoration: none;
}

.brand-label {
    font-family: "Sora", "Segoe UI", Arial, sans-serif;
    font-weight: 800;
}

.brand-logo {
    width: 32px;
    height: 32px;
    display: block;
    object-fit: contain;
}

.brand-logo-dark {
    display: none;
}

body.theme-light .brand-logo-light {
    display: none;
}

body.theme-light .brand-logo-dark {
    display: block;
}

.menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.locale-toggle-form {
    margin: 0;
}

.menu-dropdown {
    position: relative;
}

.menu-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    padding: 8px;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1300;
}

.menu-dropdown-panel.is-hidden {
    display: none;
}

.locale-option-form {
    margin: 0;
}

.menu-dropdown-option {
    width: 100%;
    border: 1px solid var(--menu-item-border);
    border-radius: 10px;
    background: transparent;
    color: var(--menu-link);
    min-height: 38px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
}

.menu-dropdown-option:hover,
.menu-dropdown-option:focus-visible {
    background: var(--menu-link-hover);
    color: var(--menu-item-hover-text);
}

.menu-dropdown-option.is-active {
    background: var(--menu-link-hover);
    border-color: var(--primary);
}

.locale-toggle-button {
    border: none;
    background: var(--toggle-bg);
    color: var(--topbar-text);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.locale-flag-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: block;
}

.locale-flag-fallback {
    display: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.locale-toggle-button img.locale-flag-icon:not([src]),
.locale-toggle-button img.locale-flag-icon[src=""] {
    display: none;
}

.locale-toggle-button img.locale-flag-icon:not([src]) + .locale-flag-fallback,
.locale-toggle-button img.locale-flag-icon[src=""] + .locale-flag-fallback {
    display: inline;
}

.locale-toggle-button:hover {
    background: var(--toggle-bg-hover);
}

.theme-toggle-button {
    border: none;
    background: var(--toggle-bg);
    color: var(--topbar-text);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-button:hover {
    background: var(--toggle-bg-hover);
}

.permissions-page {
    padding: 20px;
}

.permissions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.permissions-header h2 {
    margin: 0;
    color: var(--board-title);
}

.permissions-header p {
    margin: 4px 0 0;
    color: var(--board-subtitle);
}

.permissions-header-actions {
    display: inline-flex;
    gap: 8px;
}

.permissions-create-form {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.permissions-create-form label {
    color: var(--board-subtitle);
    font-weight: 600;
}

.permissions-create-form input {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 10px;
}

.permissions-create-form button,
.permissions-move-row button,
.permissions-save-button {
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
}

.permissions-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 12px;
    min-height: calc(100vh - 170px);
}

.permissions-panel {
    border: 1px solid var(--column-border-theme);
    background: var(--column-bg-theme);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.permissions-panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--column-border-theme);
    color: var(--board-title);
    font-weight: 700;
}

.permissions-panel-body {
    padding: 10px;
    min-height: 0;
    overflow: auto;
}

.permissions-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.permissions-table th,
.permissions-table td {
    border: 1px solid var(--column-border-theme);
    padding: 8px;
    font-size: 13px;
    text-align: left;
    color: var(--body-text);
}

.permissions-table thead th {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.permissions-table tr.is-selected td {
    background: rgba(79, 111, 149, 0.25);
}

.permissions-group-row {
    cursor: pointer;
}

.permissions-group-row:hover td,
.permissions-group-row:focus td {
    background: rgba(79, 111, 149, 0.18);
}

.permissions-table a {
    color: inherit;
    text-decoration: none;
}

.permissions-inline-form {
    margin: 0;
}

.permissions-danger-button {
    width: 100%;
    border: none;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    padding: 10px;
    cursor: pointer;
    font-weight: 700;
}

.permissions-move-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 8px;
}

.permissions-move-row select {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 10px;
}

.permissions-unassigned-box {
    margin-top: 10px;
    border: 1px solid var(--column-border-theme);
    border-radius: 8px;
    padding: 8px;
}

.permissions-unassigned-box h4 {
    margin: 0 0 6px;
    color: var(--board-title);
}

.permissions-unassigned-box ul {
    margin: 0;
    padding-left: 16px;
}

.permissions-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.permissions-assignments-groups {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.permissions-category-group {
    border: 1px solid color-mix(in srgb, var(--input-border) 50%, transparent);
    border-radius: 10px;
    padding: 14px;
    margin: 0;
}

.permissions-category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    padding: 0 4px;
}

.permissions-category-header svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.permissions-category-desc {
    margin: 4px 0 12px;
    font-size: 12px;
    color: var(--board-subtitle);
    line-height: 1.4;
}

.permissions-category-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.permission-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--input-bg) 60%, transparent);
    transition: background 0.12s;
}

.permission-card:has(.permission-ai-chat-fields) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--input-border) 40%, transparent);
}

.permission-card:hover {
    background: color-mix(in srgb, var(--input-bg) 90%, var(--primary) 4%);
}

.permission-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.permission-card-head strong {
    font-size: 13px;
    color: var(--body-text);
    font-weight: 600;
}

.permission-card-key {
    font-size: 11px;
    color: var(--board-subtitle);
    font-family: monospace;
    opacity: 0.7;
}

.permission-card-category {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
}

.permission-card small {
    font-size: 11px;
    color: var(--board-subtitle);
}

.permission-ai-chat-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--input-border) 30%, transparent);
}

.permission-flag-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--body-text);
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

.permission-limit-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    color: var(--body-text);
    font-size: 13px;
}

.permission-limit-field small {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--board-subtitle);
    line-height: 1.4;
}

.permission-limit-field input {
    width: 90px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 6px;
    flex-shrink: 0;
}

.permissions-save-button {
    width: 100%;
    margin-top: 10px;
    background: var(--success);
}

.hamburger-button {
    border: none;
    background: transparent;
    color: var(--topbar-text);
    font-size: 28px;
    cursor: pointer;
}

.hamburger-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    padding: 8px;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1300;
}

.swal2-container {
    z-index: 3000 !important;
}

.swal2-popup {
    border-radius: 18px !important;
    border: 1px solid var(--input-border) !important;
    box-shadow: var(--modal-shadow) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--cancel-bg) !important;
    color: var(--cancel-text) !important;
    font-weight: 600;
    transition: background .15s, transform .15s;
}

.swal2-styled.swal2-cancel:hover {
    background-color: var(--cancel-hover) !important;
    transform: translateY(-1px);
}

.swal2-styled.swal2-confirm {
    font-weight: 600;
    transition: filter .15s, transform .15s;
}

.swal2-styled.swal2-confirm:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.hamburger-menu a {
    color: var(--menu-link);
    text-decoration: none;
    border: 1px solid var(--menu-item-border);
    border-radius: 10px;
    background: transparent;
    min-height: 40px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, text-decoration-color 0.16s ease;
}

.hamburger-menu a:hover,
.hamburger-menu a:focus-visible {
    background: var(--menu-link-hover);
    color: var(--menu-item-hover-text);
    text-decoration: none;
}

.hamburger-menu .exit-menu-item {
    color: var(--danger);
    gap: 6px;
}

.hamburger-menu .exit-menu-item:hover,
.hamburger-menu .exit-menu-item:focus-visible {
    color: var(--danger);
}

.hamburger-menu .exit-menu-item i {
    font-size: 15px;
    line-height: 1;
}

.hamburger-menu.is-hidden {
    display: none;
}

.app-body {
    display: flex;
    height: calc(100vh / 0.9 - 54px);
    height: calc(100dvh / 0.9 - 54px);
    min-height: calc(100vh / 0.9 - 54px);
    min-height: calc(100dvh / 0.9 - 54px);
    overflow: hidden;
}

.left-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 18px 12px 14px;
    overflow-y: auto;
    position: relative;
    transition: width 0.2s ease, padding 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--input-border) 65%, transparent) transparent;
}

.left-sidebar::-webkit-scrollbar {
    width: 6px;
}

.left-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.left-sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--input-border) 70%, transparent);
    border-radius: 999px;
}

.left-sidebar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--input-border) 45%, #94a3b8 55%);
}

.sidebar-content {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-plan-banner {
    border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--input-border) 62%);
    background: color-mix(in srgb, var(--primary-soft) 58%, transparent);
    border-radius: 12px;
    padding: 10px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-plan-banner__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--input-text);
}

.sidebar-plan-banner__usage {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

.sidebar-plan-banner__cta {
    align-self: flex-start;
    margin-top: 2px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 52%, transparent);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 10px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-plan-banner__cta:hover,
.sidebar-plan-banner__cta:focus-visible {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary) 75%, transparent);
    color: var(--primary-dark);
}

.sidebar-toggle-button {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    cursor: pointer;
    width: 54px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.app-shell.sidebar-collapsed .left-sidebar,
html.kanbe-sidebar-collapsed .app-shell .left-sidebar {
    width: 86px;
    padding: 18px 8px;
}

.app-shell.sidebar-collapsed .sidebar-content,
html.kanbe-sidebar-collapsed .app-shell .sidebar-content {
    display: flex;
}

.app-shell.sidebar-collapsed .sidebar-section-header,
html.kanbe-sidebar-collapsed .app-shell .sidebar-section-header {
    display: none;
}

.app-shell.sidebar-collapsed .board-actions-row,
html.kanbe-sidebar-collapsed .app-shell .board-actions-row {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 4px;
}

.app-shell.sidebar-collapsed .board-actions-row #sidebar-toggle-button,
html.kanbe-sidebar-collapsed .app-shell .board-actions-row #sidebar-toggle-button {
    order: 1;
}

.app-shell.sidebar-collapsed .board-actions-row #new-board-trigger,
html.kanbe-sidebar-collapsed .app-shell .board-actions-row #new-board-trigger {
    order: 2;
}

.app-shell.sidebar-collapsed .board-actions-row #import-board-trigger,
html.kanbe-sidebar-collapsed .app-shell .board-actions-row #import-board-trigger {
    order: 3;
}

.app-shell.sidebar-collapsed .new-board-button,
.app-shell.sidebar-collapsed .import-board-button,
html.kanbe-sidebar-collapsed .app-shell .new-board-button,
html.kanbe-sidebar-collapsed .app-shell .import-board-button {
    min-height: 42px;
    padding: 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-toggle-button,
html.kanbe-sidebar-collapsed .app-shell .sidebar-toggle-button {
    width: 100%;
    min-height: 42px;
}

.app-shell.sidebar-collapsed .board-list,
html.kanbe-sidebar-collapsed .app-shell .board-list {
    gap: 7px;
}

.app-shell.sidebar-collapsed .pending-shares-section,
html.kanbe-sidebar-collapsed .app-shell .pending-shares-section {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-plan-banner,
html.kanbe-sidebar-collapsed .app-shell .sidebar-plan-banner {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-epic-global-section,
html.kanbe-sidebar-collapsed .app-shell .sidebar-epic-global-section {
    margin-top: 8px;
    margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
    border-bottom: 0;
}

.app-shell.sidebar-collapsed .epic-list,
html.kanbe-sidebar-collapsed .app-shell .epic-list {
    gap: 7px;
    margin-bottom: 8px;
}

.app-shell.sidebar-collapsed .epic-list-item,
html.kanbe-sidebar-collapsed .app-shell .epic-list-item {
    padding: 0;
}

.app-shell.sidebar-collapsed .epic-list-item summary,
html.kanbe-sidebar-collapsed .app-shell .epic-list-item summary {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    min-height: 44px;
    padding: 7px 8px;
    gap: 6px;
}

.app-shell.sidebar-collapsed .epic-dot,
.app-shell.sidebar-collapsed .epic-list-count,
.app-shell.sidebar-collapsed .epic-summary-actions,
.app-shell.sidebar-collapsed .epic-linked-boards,
.app-shell.sidebar-collapsed .epic-rename-panel,
.app-shell.sidebar-collapsed .epic-create-board-panel,
html.kanbe-sidebar-collapsed .app-shell .epic-expander,
html.kanbe-sidebar-collapsed .app-shell .epic-dot,
html.kanbe-sidebar-collapsed .app-shell .epic-list-count,
html.kanbe-sidebar-collapsed .app-shell .epic-summary-actions,
html.kanbe-sidebar-collapsed .app-shell .epic-linked-boards,
html.kanbe-sidebar-collapsed .app-shell .epic-rename-panel,
html.kanbe-sidebar-collapsed .app-shell .epic-create-board-panel {
    display: none !important;
}

.app-shell.sidebar-collapsed .epic-expander,
html.kanbe-sidebar-collapsed .app-shell .epic-expander {
    display: inline-flex !important;
    width: 14px;
    height: 14px;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.app-shell.sidebar-collapsed .epic-inline-title-form,
html.kanbe-sidebar-collapsed .app-shell .epic-inline-title-form {
    flex: 0 0 auto;
    justify-content: center;
}

.app-shell.sidebar-collapsed .epic-title-link,
html.kanbe-sidebar-collapsed .app-shell .epic-title-link {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-shell.sidebar-collapsed .epic-title-link::before,
html.kanbe-sidebar-collapsed .app-shell .epic-title-link::before {
    content: attr(data-initial);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--sidebar-text);
}

.epic-collapsed-children {
    display: none;
}

.app-shell.sidebar-collapsed .epic-collapsed-children,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-children {
    display: none;
    flex-direction: column;
    gap: 5px;
    margin: 0 6px 8px 22px;
    padding: 6px 0 0 8px;
    border-left: 1px dashed color-mix(in srgb, var(--input-border) 68%, transparent);
}

.app-shell.sidebar-collapsed .epic-list-item[open] .epic-collapsed-children,
html.kanbe-sidebar-collapsed .app-shell .epic-list-item[open] .epic-collapsed-children {
    display: flex;
}

.app-shell.sidebar-collapsed .epic-collapsed-child-link,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-child-link {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: transparent;
    font-size: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.app-shell.sidebar-collapsed .epic-collapsed-child-link::before,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-child-link::before {
    content: attr(data-initial);
    color: var(--sidebar-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.app-shell.sidebar-collapsed .epic-collapsed-child-link::after,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-child-link::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--input-border) 68%, transparent);
    transform: translateY(-50%);
}

.app-shell.sidebar-collapsed .epic-collapsed-child-link:hover,
.app-shell.sidebar-collapsed .epic-collapsed-child-link:focus-visible,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-child-link:hover,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-child-link:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.app-shell.sidebar-collapsed .epic-collapsed-child-more,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-child-more {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px dashed color-mix(in srgb, var(--input-border) 75%, transparent);
    background: color-mix(in srgb, var(--card-bg, var(--input-bg)) 86%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.app-shell.sidebar-collapsed .epic-collapsed-child-more::after,
html.kanbe-sidebar-collapsed .app-shell .epic-collapsed-child-more::after {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--input-border) 68%, transparent);
    transform: translateY(-50%);
}

.app-shell.sidebar-collapsed .board-list-item,
html.kanbe-sidebar-collapsed .app-shell .board-list-item {
    justify-content: center;
    padding: 8px;
    min-height: 44px;
}

.app-shell.sidebar-collapsed .board-list-item .board-list-meta,
html.kanbe-sidebar-collapsed .app-shell .board-list-item .board-list-meta {
    display: none;
}

.app-shell.sidebar-collapsed .board-list-link,
html.kanbe-sidebar-collapsed .app-shell .board-list-link {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    font-size: 0;
    text-indent: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-shell.sidebar-collapsed .board-list-link::before,
html.kanbe-sidebar-collapsed .app-shell .board-list-link::before {
    content: attr(data-initial);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--sidebar-text);
}

.board-actions-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 2px;
}

.board-actions-row #new-board-trigger {
    order: 1;
}

.board-actions-row #import-board-trigger {
    order: 2;
}

.board-actions-row #sidebar-toggle-button {
    order: 3;
    width: 100%;
    min-height: 42px;
}

.new-board-button {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: #32445f;
    color: #f2f4fa;
    font-weight: 600;
    padding: 0;
    min-height: 42px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.new-board-button:hover {
    background: #3f5473;
}

.import-board-button {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.import-board-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.sidebar-action-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.app-shell.sidebar-collapsed .sidebar-toggle-icon,
html.kanbe-sidebar-collapsed .app-shell .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 2px 0;
    margin-bottom: 10px;
}

.sidebar-section-title {
    flex: 1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--board-subtitle);
}

.sidebar-section-count {
    min-width: 24px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--board-subtitle);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.board-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
    transition: box-shadow .16s ease, background-color .16s ease;
}

.board-list.is-detach-drop-target {
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

.board-list.is-detach-drop-target::before {
    content: "Solte aqui para remover do épico";
    display: block;
    margin: 0 0 8px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 10px;
    color: color-mix(in srgb, var(--primary-dark) 74%, var(--text-muted) 26%);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.board-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--sidebar-card-border);
    background: var(--sidebar-card-bg);
    border-radius: 12px;
    min-height: 44px;
    padding: 9px 10px 9px 12px;
    gap: 8px;
    cursor: grab;
    position: relative;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.board-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: transparent;
}

.board-list-item:active {
    cursor: grabbing;
}

.board-list-item:hover,
.board-list-item:focus-within {
    border-color: var(--sidebar-card-active-border);
    background: var(--sidebar-card-active-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.board-list-item a {
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-list-item.active {
    border-color: var(--sidebar-card-active-border);
    background: var(--sidebar-card-active-bg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.board-list-item.active::before {
    background: var(--sidebar-card-active-border);
}

.board-list-item.active.is-shared {
    border-color: #16a34a;
    background: linear-gradient(145deg, color-mix(in srgb, #bbf7d0 64%, var(--sidebar-card-active-bg) 36%), color-mix(in srgb, #86efac 52%, var(--sidebar-card-active-bg) 48%));
    box-shadow: 0 0 0 1px color-mix(in srgb, #16a34a 58%, transparent), 0 14px 26px color-mix(in srgb, #14532d 34%, transparent);
}

.board-list-item.active.is-shared::before {
    background: #16a34a;
}

.board-list-item.active.is-shared-with-me {
    border-color: #2563eb;
    background: linear-gradient(145deg, color-mix(in srgb, #bfdbfe 66%, var(--sidebar-card-active-bg) 34%), color-mix(in srgb, #93c5fd 52%, var(--sidebar-card-active-bg) 48%));
    box-shadow: 0 0 0 1px color-mix(in srgb, #2563eb 58%, transparent), 0 14px 26px color-mix(in srgb, #1e3a8a 34%, transparent);
}

.board-list-item.active.is-shared-with-me::before {
    background: #2563eb;
}

.board-list-item.is-shared {
    border-color: #2f8f83;
    background: linear-gradient(145deg, color-mix(in srgb, #d1fae5 48%, var(--sidebar-card-bg) 52%), color-mix(in srgb, #bbf7d0 36%, var(--sidebar-card-bg) 64%));
    box-shadow: 0 8px 18px color-mix(in srgb, #16a34a 18%, transparent);
}

.board-list-item.is-shared::before {
    background: transparent;
}

body.theme-light .board-list-item.is-shared {
    border-color: #2f8f83;
    background: linear-gradient(145deg, #ecfdf5 0%, #dcfce7 100%);
}

body.theme-dark .board-list-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #163423 0%, #1d4c31 100%);
    box-shadow: 0 10px 20px rgba(6, 25, 12, 0.48);
}

body.theme-dark .board-list-item.active.is-shared,
body.theme-dark-ocean .board-list-item.active.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #1a452b 0%, #266a3f 100%);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.62), 0 14px 30px rgba(3, 15, 8, 0.68);
}

.board-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, color-mix(in srgb, #dbeafe 50%, var(--sidebar-card-bg) 50%), color-mix(in srgb, #bfdbfe 40%, var(--sidebar-card-bg) 60%));
    box-shadow: 0 8px 18px color-mix(in srgb, #2563eb 22%, transparent);
}

.board-list-item.is-shared-with-me::before {
    background: transparent;
}

body.theme-light .board-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
}

body.theme-dark .board-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0f2a4a 0%, #123459 100%);
    box-shadow: 0 10px 20px rgba(3, 10, 30, 0.52);
}

body.theme-dark .board-list-item.active.is-shared-with-me,
body.theme-dark-ocean .board-list-item.active.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #12335a 0%, #184a80 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.62), 0 14px 30px rgba(3, 12, 28, 0.72);
}

body.theme-dark-ocean .board-list-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #163423 0%, #1d4c31 100%);
    box-shadow: 0 10px 20px rgba(6, 25, 12, 0.48);
}

body.theme-dark-ocean .board-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0f2a4a 0%, #123459 100%);
    box-shadow: 0 10px 20px rgba(3, 10, 30, 0.52);
}

body.theme-current .board-list-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #163423 0%, #1d4c31 100%);
    box-shadow: 0 10px 20px rgba(6, 25, 12, 0.48);
}

body.theme-current .board-list-item.active.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #1a452b 0%, #266a3f 100%);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.62), 0 14px 30px rgba(3, 15, 8, 0.68);
}

body.theme-current .board-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0f2a4a 0%, #123459 100%);
    box-shadow: 0 10px 20px rgba(3, 10, 30, 0.52);
}

body.theme-current .board-list-item.active.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #12335a 0%, #184a80 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.62), 0 14px 30px rgba(3, 12, 28, 0.72);
}

body.theme-current .board-list-item.is-shared a,
body.theme-current .board-list-item.is-shared-with-me a {
    color: #f8fbff;
}

body.theme-current .board-list-item.is-shared .board-list-link::before,
body.theme-current .board-list-item.is-shared-with-me .board-list-link::before {
    color: #f8fbff;
}

.pending-shares-section {
    margin-top: 8px;
    border: 1px solid var(--column-border-theme);
    border-radius: 12px;
    padding: 8px;
    background: color-mix(in srgb, var(--input-bg) 86%, transparent 14%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pending-shares-header {
    padding: 0;
}

.pending-shares-summary {
    border: 1px dashed var(--input-border);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--board-subtitle);
    font-size: 12px;
}

.pending-shares-summary small {
    color: var(--input-text);
    opacity: 0.88;
}

.pending-shares-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pending-share-item {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.pending-share-item.is-owned-overflow {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--input-border) 55%);
}

.pending-share-main {
    min-width: 0;
}

.pending-share-main strong {
    display: block;
    color: var(--input-text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pending-share-main small {
    display: block;
    color: var(--board-subtitle);
    font-size: 11px;
    margin-top: 2px;
}

.pending-share-dismiss-form {
    margin: 0;
}

.pending-share-dismiss-button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
}

.pending-share-dismiss-button:hover {
    border-color: color-mix(in srgb, var(--danger) 70%, var(--input-border) 30%);
    color: var(--danger);
}

.pending-share-dismiss-button.is-danger {
    font-size: 14px;
}

.board-list-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 72px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.board-list-item:hover .board-list-meta,
.board-list-item:focus-within .board-list-meta,
.board-list-item.active .board-list-meta {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.board-list-meta form {
    margin: 0;
}

.board-share-icon-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--board-subtitle);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
}

.board-share-icon-button:hover {
    border-color: color-mix(in srgb, var(--primary) 28%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.board-share-badge {
    border: 1px solid var(--input-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--board-subtitle);
    background: var(--input-bg);
    white-space: nowrap;
}

.flash-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flash-message {
    margin: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--shadow-soft);
}

.kanban-page {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px 0 0 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.board-header-title {
    min-width: 220px;
    min-width: 0;
}

.board-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.board-header h2 {
    margin: 0;
    font-size: 28px;
    color: var(--board-title);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.board-title-edit-button {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.board-title-edit-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.board-header p {
    margin: 6px 0 0;
    color: var(--board-subtitle);
}

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

.create-column-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.create-column-form .due-rule-button {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--input-bg);
    color: var(--input-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.create-column-form .due-rule-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.create-column-form .due-rule-button.leave-share-button {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--input-border) 55%);
}

.create-column-form .due-rule-button.leave-share-button:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--input-bg) 88%);
}

.board-task-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.create-column-form .due-rule-button.task-filter-toggle {
    padding: 10px;
}

.create-column-form .due-rule-button.task-sort-global-toggle {
    padding: 10px;
}

.create-column-form .due-rule-button.task-filter-toggle.is-active {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--input-border) 45%);
}

.create-column-form .due-rule-button.task-sort-global-toggle.is-active {
    background: color-mix(in srgb, #22c55e 14%, var(--input-bg));
    border-color: color-mix(in srgb, #22c55e 45%, var(--input-border));
    color: #16a34a;
}

.create-column-form .due-rule-button.is-active-indicator {
    background: color-mix(in srgb, #22c55e 15%, var(--input-bg));
    border-color: color-mix(in srgb, #22c55e 50%, var(--input-border));
    color: #22c55e;
}

.board-git-trigger-icon {
    font-size: 18px;
    line-height: 1;
}

.task-filter-panel {
    position: fixed;
    width: min(560px, calc(100vw - 40px));
    max-height: min(80vh, calc(100dvh - 80px));
    overflow-y: auto;
    background: var(--modal-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    padding: 12px;
    z-index: 1100;
}

.task-filter-panel.is-hidden {
    display: none;
}

.task-sort-panel {
    position: fixed;
    width: min(420px, calc(100vw - 40px));
    background: var(--modal-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    padding: 12px;
    z-index: 1100;
}

.task-sort-panel.is-hidden {
    display: none;
}

.task-sort-panel-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--board-subtitle);
}

.task-sort-rules-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-sort-rule-row {
    display: grid;
    grid-template-columns: 1fr 1fr 30px;
    gap: 8px;
    align-items: center;
}

.task-sort-rule-row select {
    min-width: 0;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
}

.task-sort-rule-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--modal-muted);
    cursor: pointer;
    font-size: 13px;
}

.task-sort-rule-remove:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
    color: var(--danger, #ef4444);
}

.task-sort-add-rule {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    border: none;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
}

.task-sort-add-rule:hover {
    text-decoration: underline;
}

.task-sort-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.task-sort-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-sort-field label {
    font-size: 12px;
    color: var(--board-subtitle);
    font-weight: 600;
}

.task-sort-field select {
    min-width: 0;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 8px 10px;
    font: inherit;
}

.task-sort-footer {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.task-sort-clear,
.task-sort-save {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
}

.task-sort-clear:hover,
.task-sort-save:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.task-sort-save {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--input-border));
}

@media (max-width: 640px) {
    .task-sort-grid {
        grid-template-columns: 1fr;
    }

    .task-sort-rule-row {
        grid-template-columns: 1fr 1fr 30px;
    }

    .task-sort-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .task-sort-clear,
    .task-sort-save {
        width: 100%;
    }
}

.task-filter-panel-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--board-subtitle);
}

.task-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.task-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-filter-field label {
    font-size: 12px;
    color: var(--board-subtitle);
    font-weight: 600;
}

.task-filter-field input {
    min-width: 0;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 8px 10px;
    font: inherit;
}

.task-filter-advanced {
    margin-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--input-border) 72%, transparent);
    padding-top: 10px;
}

.task-filter-advanced-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.task-filter-advanced-title {
    margin: 0;
    font-size: 12px;
    color: var(--board-subtitle);
    font-weight: 700;
}

.task-filter-add-rule {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--input-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-soft) 55%, var(--input-bg));
    color: var(--primary-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: filter .14s, border-color .14s;
}

.task-filter-add-rule:hover {
    filter: brightness(1.05);
    border-color: color-mix(in srgb, var(--primary) 70%, var(--input-border));
}

.task-filter-advanced-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-filter-advanced-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.task-filter-advanced-row select,
.task-filter-advanced-row input {
    min-width: 0;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 7px 9px;
    font: inherit;
}

.task-filter-remove-rule {
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, #ef4444 40%, var(--input-border));
    border-radius: 8px;
    background: color-mix(in srgb, #ef4444 8%, var(--input-bg));
    color: #ef4444;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-filter-remove-rule:hover {
    background: color-mix(in srgb, #ef4444 14%, var(--input-bg));
}

.task-filter-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

@media (max-width: 640px) {
    .task-filter-advanced-row {
        grid-template-columns: 1fr;
    }

    .task-filter-remove-rule {
        width: 100%;
    }
}

.task-filter-result {
    font-size: 12px;
    color: var(--board-subtitle);
    font-weight: 600;
}

.task-filter-clear {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    font-weight: 600;
    padding: 7px 10px;
    cursor: pointer;
}

.task-filter-clear:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.task-card.is-filter-hidden {
    display: none !important;
}

.create-column-form input {
    min-width: 220px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--input-bg);
    color: var(--input-text);
}

.create-column-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(179, 71, 217, 0.15);
}

.board-columns {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: 16px;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 2px;
}

.board-columns[data-pan-ready="1"] {
    cursor: grab;
}

.board-columns.is-pan-grabbing {
    cursor: grabbing;
    user-select: none;
}

.board-column {
    background: var(--column-bg-theme);
    border: 1px solid var(--column-border-theme);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--column-shadow);
    flex: 0 0 290px;
    width: 290px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    min-width: 0;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    cursor: grab;
}

.column-header:active {
    cursor: grabbing;
}

.column-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--board-title);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.column-header.is-editing {
    cursor: default;
}

.column-title-inline-input {
    margin: 0;
    width: 100%;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--board-title);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    padding: 5px 8px;
}

.column-title-inline-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(179, 71, 217, 0.15);
}

.column-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.column-header-actions .delete-column-form {
    margin: 0;
}

.add-task-button {
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, border-color .14s, color .14s;
}

.add-task-button:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
}

.column-sort-button {
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--input-border) 72%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--board-subtitle);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, border-color .14s, color .14s;
}

.column-sort-button:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--input-border));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 60%, transparent 40%);
}

.column-sort-button.is-active {
    background: color-mix(in srgb, #22c55e 15%, var(--input-bg));
    border-color: color-mix(in srgb, #22c55e 48%, var(--input-border));
    color: #16a34a;
}

.column-counter {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    background: var(--primary-soft);
    border-radius: 999px;
    color: var(--primary-dark);
}

.task-list {
    flex: 0 0 auto;
    min-height: 92px;
    margin-bottom: 12px;
    min-width: 0;
}

.column-history-footer {
    margin-top: 6px;
    display: flex;
    justify-content: center;
}

.column-load-more-button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--input-border) 72%, #cbd5e1 28%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--input-bg) 92%, #f8fafc 8%);
    color: color-mix(in srgb, var(--text-muted) 68%, #0f172a 32%);
    font-size: 12px;
    padding: 0;
    cursor: pointer;
    transition: filter .18s ease, border-color .18s ease, color .18s ease;
}

.column-load-more-button i {
    font-size: 11px;
}

.column-load-more-button:hover {
    border-color: color-mix(in srgb, var(--input-border) 42%, #94a3b8 58%);
    color: color-mix(in srgb, var(--text-muted) 42%, #0f172a 58%);
}

.column-load-more-button.is-loading {
    opacity: .7;
    cursor: progress;
}

.sidebar-epic-global-section {
    order: 90;
    margin-top: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--input-border) 80%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--input-border) 80%, transparent);
}

.epic-header-toggle-button {
    margin-left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.epic-header-toggle-button:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.epic-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.epic-list-item {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-bg, var(--input-bg)) 85%, transparent);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.epic-list-item.is-active-super {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--input-border) 38%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent), 0 10px 20px color-mix(in srgb, var(--primary) 24%, transparent);
    background: color-mix(in srgb, var(--primary) 16%, var(--card-bg, var(--input-bg)) 84%);
}

.epic-list-item.is-active-super.is-shared {
    border-color: #16a34a;
    box-shadow: 0 0 0 1px color-mix(in srgb, #16a34a 58%, transparent), 0 12px 24px color-mix(in srgb, #14532d 32%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, #bbf7d0 62%, var(--card-bg, var(--input-bg)) 38%), color-mix(in srgb, #86efac 46%, var(--card-bg, var(--input-bg)) 54%));
}

.epic-list-item.is-active-super.is-shared-with-me {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px color-mix(in srgb, #2563eb 58%, transparent), 0 12px 24px color-mix(in srgb, #1e3a8a 32%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, #bfdbfe 62%, var(--card-bg, var(--input-bg)) 38%), color-mix(in srgb, #93c5fd 46%, var(--card-bg, var(--input-bg)) 54%));
}

.epic-list-item.is-active-super > summary {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.epic-list-item.is-active-super .epic-title-link {
    color: color-mix(in srgb, var(--primary-dark) 78%, var(--sidebar-text) 22%);
}

.epic-list-item.is-active-super .epic-list-count {
    color: color-mix(in srgb, var(--primary-dark) 72%, var(--text-muted) 28%);
    opacity: 1;
}

body.theme-dark .epic-list-item.is-active-super,
body.theme-dark-ocean .epic-list-item.is-active-super {
    border-color: #4f89d9;
    background: linear-gradient(145deg, #172335 0%, #20324b 100%);
    box-shadow: 0 0 0 1px rgba(79, 137, 217, 0.58), 0 12px 24px rgba(5, 11, 22, 0.66);
}

body.theme-current .epic-list-item.is-active-super {
    border-color: #4f89d9;
    background: linear-gradient(145deg, #172335 0%, #20324b 100%);
    box-shadow: 0 0 0 1px rgba(79, 137, 217, 0.58), 0 12px 24px rgba(5, 11, 22, 0.66);
}

body.theme-dark .epic-list-item.is-active-super > summary,
body.theme-dark-ocean .epic-list-item.is-active-super > summary {
    background: rgba(10, 19, 33, 0.58);
}

body.theme-current .epic-list-item.is-active-super > summary {
    background: rgba(10, 19, 33, 0.58);
}

body.theme-dark .epic-list-item.is-active-super .epic-title-link,
body.theme-dark-ocean .epic-list-item.is-active-super .epic-title-link {
    color: #f8fbff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

body.theme-current .epic-list-item.is-active-super .epic-title-link {
    color: #f8fbff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

body.theme-dark .epic-list-item.is-active-super .epic-list-count,
body.theme-dark-ocean .epic-list-item.is-active-super .epic-list-count {
    color: #c9d7ea;
}

body.theme-current .epic-list-item.is-active-super .epic-list-count {
    color: #c9d7ea;
}

.epic-list-item.is-drop-target {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
    transform: translateY(-1px);
}

.epic-list-item.is-drop-target summary {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.epic-list-item.is-shared {
    border-color: #2f8f83;
    background: linear-gradient(145deg, color-mix(in srgb, #d1fae5 42%, var(--sidebar-card-bg) 58%), color-mix(in srgb, #bbf7d0 28%, var(--sidebar-card-bg) 72%));
}

.epic-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, color-mix(in srgb, #dbeafe 44%, var(--sidebar-card-bg) 56%), color-mix(in srgb, #bfdbfe 28%, var(--sidebar-card-bg) 72%));
}

body.theme-dark .epic-list-item.is-shared,
body.theme-dark-ocean .epic-list-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #163423 0%, #1d4c31 100%);
}

body.theme-dark .epic-list-item.is-active-super.is-shared,
body.theme-dark-ocean .epic-list-item.is-active-super.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #1a452b 0%, #266a3f 100%);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.58), 0 12px 24px rgba(4, 18, 10, 0.62);
}

body.theme-dark .epic-list-item.is-shared-with-me,
body.theme-dark-ocean .epic-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0f2a4a 0%, #123459 100%);
}

body.theme-dark .epic-list-item.is-active-super.is-shared-with-me,
body.theme-dark-ocean .epic-list-item.is-active-super.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #12335a 0%, #184a80 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.58), 0 12px 24px rgba(3, 12, 28, 0.64);
}

body.theme-current .epic-list-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #163423 0%, #1d4c31 100%);
}

body.theme-current .epic-list-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0f2a4a 0%, #123459 100%);
}

body.theme-current .epic-list-item.is-active-super.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #1a452b 0%, #266a3f 100%);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.58), 0 12px 24px rgba(4, 18, 10, 0.62);
}

body.theme-current .epic-list-item.is-active-super.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #12335a 0%, #184a80 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.58), 0 12px 24px rgba(3, 12, 28, 0.64);
}

body.theme-current .epic-list-item.is-shared .epic-title-link,
body.theme-current .epic-list-item.is-shared-with-me .epic-title-link,
body.theme-current .epic-list-item.is-shared .epic-list-count,
body.theme-current .epic-list-item.is-shared-with-me .epic-list-count {
    color: #f8fbff;
    opacity: 1;
}

.board-list-item.is-dragging {
    opacity: .65;
    transform: scale(.985);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.board-list-item-ghost {
    opacity: .4;
    background: color-mix(in srgb, var(--primary) 8%, var(--sidebar-card-bg)) !important;
    border-style: dashed !important;
    box-shadow: none !important;
}

.epic-list-item summary {
    list-style: none;
    display: grid;
    grid-template-columns: 14px 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
}

.epic-expander {
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform .18s ease;
}

.epic-list-item[open] .epic-expander {
    transform: rotate(90deg);
}

.epic-inline-title-form {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 0;
    margin: 0;
}

.epic-title-link {
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    flex: 1;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Epic Rename Panel ── */
.epic-rename-panel {
    padding: 8px 10px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--input-border) 50%, transparent);
}
.epic-rename-panel.is-hidden { display: none; }
.epic-rename-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.epic-rename-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.epic-rename-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.epic-rename-input {
    flex: 1;
    min-width: 0;
    min-height: 30px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 4px 10px;
    font-size: 13px;
    outline: none;
}
.epic-rename-input:focus {
    border-color: var(--primary);
}
.epic-rename-save,
.epic-rename-cancel {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    transition: border-color .16s, background .16s, color .16s;
}
.epic-rename-save:hover {
    border-color: var(--success, #22c55e);
    color: var(--success, #22c55e);
    background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
}
.epic-rename-cancel:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ── Sidebar Create Panels (new board, new board in epic) ── */
.sidebar-create-panel {
    padding: 8px 10px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--input-border) 50%, transparent);
}
.sidebar-create-panel.is-hidden { display: none; }
.sidebar-create-form.is-hidden { display: none; }
.sidebar-create-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.sidebar-create-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.sidebar-create-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.sidebar-create-input {
    flex: 1;
    min-width: 0;
    min-height: 30px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 4px 10px;
    font-size: 13px;
    outline: none;
}
.sidebar-create-input:focus {
    border-color: var(--primary);
}
.sidebar-create-save,
.sidebar-create-cancel {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    transition: border-color .16s, background .16s, color .16s;
}
.sidebar-create-save:hover {
    border-color: var(--success, #22c55e);
    color: var(--success, #22c55e);
    background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
}
.sidebar-create-cancel:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Epic create board panel inside details */
.epic-create-board-panel {
    padding: 6px 0 8px;
}
.epic-create-board-panel.is-hidden { display: none; }

.epic-title-link:hover,
.epic-title-link:focus-visible {
    text-decoration: none;
}

.epic-summary-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin-left: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    width: 100%;
    margin-top: 2px;
    flex: 0 0 auto;
}

.overview-badge-link {
    width: auto;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    background: color-mix(in srgb, var(--primary) 12%, var(--input-bg));
    border-color: color-mix(in srgb, var(--primary) 45%, var(--input-border));
    color: color-mix(in srgb, var(--primary-dark) 76%, var(--input-text));
}

.overview-badge-link span {
    display: inline-block;
}

.overview-badge-link.is-icon-only {
    width: 26px;
    min-width: 26px;
    padding: 0;
    justify-content: center;
}

.epic-inline-action-form {
    margin: 0;
}

.epic-action-button,
.epic-mini-submit {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.epic-action-button i,
.epic-mini-submit i {
    font-size: 11px;
}

.epic-action-button:hover,
.epic-mini-submit:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.epic-action-button.is-confirm {
    border-color: color-mix(in srgb, var(--success, #16a34a) 70%, var(--input-border) 30%);
    background: color-mix(in srgb, var(--success, #16a34a) 22%, var(--input-bg));
    color: var(--success, #16a34a);
}

.epic-action-button.is-danger:hover {
    background: color-mix(in srgb, var(--danger) 22%, var(--input-bg));
    border-color: var(--danger);
    color: var(--danger);
}

.epic-list-item summary::-webkit-details-marker {
    display: none;
}

.epic-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 8px;
}

.epic-list-count {
    margin-left: 4px;
    font-size: 11px;
    opacity: .75;
    flex: 0 0 auto;
    justify-self: end;
}

.epic-linked-boards {
    padding: 2px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.epic-linked-board-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.epic-linked-board-list:empty {
    min-height: 8px;
}

.epic-list-item.is-drop-target .epic-linked-board-list {
    min-height: 38px;
    border: 2px dashed color-mix(in srgb, var(--primary) 50%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    transition: min-height .16s ease, border-color .16s ease;
}

.epic-linked-board-item {
    padding: 7px 8px 7px 10px;
    min-height: 38px;
}

.epic-linked-board-item.is-shared,
.epic-linked-board-item.is-shared-with-me {
    border-width: 1px;
    border-style: solid;
}

.epic-linked-board-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, color-mix(in srgb, #d1fae5 48%, var(--sidebar-card-bg) 52%), color-mix(in srgb, #bbf7d0 36%, var(--sidebar-card-bg) 64%));
}

.epic-linked-board-item.active.is-shared {
    border-color: #16a34a;
    background: linear-gradient(145deg, color-mix(in srgb, #bbf7d0 64%, var(--sidebar-card-active-bg) 36%), color-mix(in srgb, #86efac 52%, var(--sidebar-card-active-bg) 48%));
    box-shadow: 0 0 0 1px color-mix(in srgb, #16a34a 56%, transparent), 0 10px 18px color-mix(in srgb, #14532d 28%, transparent);
}

.epic-linked-board-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, color-mix(in srgb, #dbeafe 50%, var(--sidebar-card-bg) 50%), color-mix(in srgb, #bfdbfe 40%, var(--sidebar-card-bg) 60%));
}

.epic-linked-board-item.active.is-shared-with-me {
    border-color: #2563eb;
    background: linear-gradient(145deg, color-mix(in srgb, #bfdbfe 64%, var(--sidebar-card-active-bg) 36%), color-mix(in srgb, #93c5fd 52%, var(--sidebar-card-active-bg) 48%));
    box-shadow: 0 0 0 1px color-mix(in srgb, #2563eb 56%, transparent), 0 10px 18px color-mix(in srgb, #1e3a8a 28%, transparent);
}

body.theme-dark .epic-linked-board-item.is-shared,
body.theme-dark-ocean .epic-linked-board-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #163423 0%, #1d4c31 100%);
    box-shadow: 0 8px 16px rgba(6, 25, 12, 0.42);
}

body.theme-dark .epic-linked-board-item.active.is-shared,
body.theme-dark-ocean .epic-linked-board-item.active.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #1a452b 0%, #266a3f 100%);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.54), 0 10px 20px rgba(4, 18, 10, 0.58);
}

body.theme-dark .epic-linked-board-item.is-shared-with-me,
body.theme-dark-ocean .epic-linked-board-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0f2a4a 0%, #123459 100%);
    box-shadow: 0 8px 16px rgba(3, 10, 30, 0.46);
}

body.theme-dark .epic-linked-board-item.active.is-shared-with-me,
body.theme-dark-ocean .epic-linked-board-item.active.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #12335a 0%, #184a80 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.54), 0 10px 20px rgba(3, 12, 28, 0.62);
}

body.theme-current .epic-linked-board-item.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #163423 0%, #1d4c31 100%);
    box-shadow: 0 8px 16px rgba(6, 25, 12, 0.42);
}

body.theme-current .epic-linked-board-item.active.is-shared {
    border-color: #22c55e;
    background: linear-gradient(145deg, #1a452b 0%, #266a3f 100%);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.54), 0 10px 20px rgba(4, 18, 10, 0.58);
}

body.theme-current .epic-linked-board-item.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0f2a4a 0%, #123459 100%);
    box-shadow: 0 8px 16px rgba(3, 10, 30, 0.46);
}

body.theme-current .epic-linked-board-item.active.is-shared-with-me {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #12335a 0%, #184a80 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.54), 0 10px 20px rgba(3, 12, 28, 0.62);
}

body.theme-current .epic-linked-board-item.is-shared .board-list-link,
body.theme-current .epic-linked-board-item.is-shared-with-me .board-list-link {
    color: #f8fbff;
}

.epic-linked-board {
    font-size: 12px;
    opacity: .9;
    text-decoration: none;
}

.epic-linked-board.is-active {
    font-weight: 700;
}

.epic-linked-board:hover,
.epic-linked-board:focus-visible,
.board-list-link:hover,
.board-list-link:focus-visible {
    text-decoration: none;
}

.board-epic-link-form {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--input-border) 78%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg, var(--input-bg)) 88%, transparent);
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

.board-epic-link-form select,
.board-epic-link-form button {
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    padding: 6px 10px;
}

.board-epic-link-form select {
    flex: 1 1 0;
    min-width: 0;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-epic-link-form button {
    min-width: 104px;
    flex: 0 0 auto;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

@media (max-width: 940px) {
    .board-epic-link-form {
        flex-wrap: wrap;
    }

    .board-epic-link-form select {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    .board-epic-link-form button {
        width: 100%;
    }
}

.board-epic-link-form button:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: var(--primary-soft);
}

@media (max-width: 680px) {
    .board-epic-link-form {
        flex-wrap: wrap;
    }

    .board-epic-link-form select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
    }

    .board-epic-link-form button {
        width: 100%;
    }
}

.board-epic-links-current {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.board-epic-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 8px 14px 8px 12px;
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--input-border) 70%);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--card-bg, var(--input-bg)) 82%, #e0f2fe 18%), color-mix(in srgb, var(--card-bg, var(--input-bg)) 88%, #0ea5e9 12%));
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--primary) 14%, transparent);
}

.board-epic-chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: inherit;
    border-radius: 3px 0 0 3px;
}

.board-epic-chip.color-azul::before { background: var(--epic-color-azul); }
.board-epic-chip.color-roxo::before { background: var(--epic-color-roxo); }
.board-epic-chip.color-verde::before { background: var(--epic-color-verde); }
.board-epic-chip.color-laranja::before { background: var(--epic-color-laranja); }
.board-epic-chip.color-rosa::before { background: var(--epic-color-rosa); }
.board-epic-chip.color-vermelho::before { background: var(--epic-color-vermelho); }
.board-epic-chip.color-cinza::before { background: var(--epic-color-cinza); }

.board-epic-chip a {
    color: color-mix(in srgb, var(--sidebar-text) 78%, #0f172a 22%);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .01em;
}

.board-epic-chip form {
    margin: 0;
}

.board-epic-chip button {
    width: 24px;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--input-border) 64%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger) 8%, var(--input-bg));
    color: color-mix(in srgb, var(--danger) 82%, var(--text-muted) 18%);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.board-epic-chip button:hover {
    color: #fff;
    background: color-mix(in srgb, var(--danger) 80%, #dc2626 20%);
    border-color: color-mix(in srgb, var(--danger) 88%, #dc2626 12%);
    transform: translateY(-1px);
}

body.theme-light .board-epic-chip {
    border-color: color-mix(in srgb, #0ea5e9 42%, #94a3b8 58%);
    background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%);
    box-shadow: 0 8px 16px rgba(14, 165, 233, 0.18);
}

body.theme-light .board-epic-chip a {
    color: #0f172a;
}

body.theme-dark .board-epic-chip,
body.theme-dark-ocean .board-epic-chip {
    border-color: color-mix(in srgb, #38bdf8 36%, #334155 64%);
    background: linear-gradient(145deg, #0b1b2a 0%, #10283b 100%);
    box-shadow: 0 10px 18px rgba(14, 165, 233, 0.14);
}

body.theme-dark .board-epic-chip a,
body.theme-dark-ocean .board-epic-chip a {
    color: #e2e8f0;
}

.board-super-subtitle {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.board-super-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.board-super-overview-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s, background .16s, color .16s;
}

.board-super-overview-link.overview-badge-link {
    height: 28px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
}

.board-super-overview-link:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
    text-decoration: none;
}

.board-empty-super-state {
    border: 1px dashed color-mix(in srgb, var(--input-border) 60%, transparent);
    border-radius: 14px;
    padding: 18px 16px;
    margin: 4px 2px 10px;
    background: color-mix(in srgb, var(--card-bg, var(--input-bg)) 84%, transparent);
}

.board-empty-super-state h3 {
    margin: 0;
    font-size: 14px;
    color: var(--sidebar-text);
}

.board-empty-super-state p {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.board-epic-chip form {
    margin: 0;
}

.board-epic-chip button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.epic-boards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.epic-board-card {
    border: 1px solid var(--input-border);
    border-radius: 12px;
    background: var(--card-bg, var(--input-bg));
    overflow: hidden;
}

.epic-board-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 12px;
    border-bottom: 1px solid var(--input-border);
}

.epic-board-card-tasks {
    max-height: 460px;
    overflow: auto;
    padding: 8px;
}

.epic-task-row {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}

.epic-task-row.is-completed {
    opacity: .75;
}

.epic-task-row.is-blocked {
    border-color: var(--danger, #dc2626);
}

.epic-empty {
    opacity: .8;
    margin: 8px 0;
}

/* ── Epic View Page ── */
.epic-view-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.ev-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.ev-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ev-dot {
    width: 6px;
    height: 36px;
    border-radius: 3px;
    flex: 0 0 6px;
}

.ev-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--board-title);
    margin: 0;
    line-height: 1.2;
}

.ev-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.ev-back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s, background .16s, color .16s;
}

.ev-back-button:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
}

.ev-card {
    border: 1px solid var(--input-border);
    border-radius: 16px;
    background: var(--card-bg, var(--input-bg));
    overflow: hidden;
    transition: border-color .16s, box-shadow .2s, transform .16s;
    position: relative;
}

.ev-card:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--input-border));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}

.ev-card-color-accent {
    height: 4px;
    width: 100%;
}

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

.ev-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ev-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}

.ev-card-initial {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.ev-card-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--modal-text, #cbd5e1) 68%, transparent);
    background: color-mix(in srgb, var(--modal-bg, #0f172a) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--input-border, #334155) 50%, transparent);
    border-radius: 8px;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.ev-card-top-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ev-card-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .16s, background .16s, color .16s;
    padding: 0;
}

.ev-card-action-btn:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.ev-card-action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ev-card-tasks-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .16s, background .16s, color .16s;
    padding: 0;
}

.ev-card-tasks-btn:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.ev-card-menu {
    color: var(--text-muted);
    cursor: default;
    font-size: 16px;
    padding: 2px 4px;
    opacity: .5;
}

.ev-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ev-card-id {
    font-size: 12px;
    color: var(--text-muted);
    margin: -6px 0 0;
    opacity: .7;
}

.ev-card-progress-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ev-card-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ev-card-progress-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.ev-card-progress-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.ev-card-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--input-border) 60%, transparent);
    overflow: hidden;
}

.ev-card-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
    min-width: 0;
}

.ev-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--input-border) 50%, transparent);
}

.ev-card-stat {
    font-size: 12px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ev-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ev-card-role {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary-dark);
}

.ev-card-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s, background .16s, color .16s;
}

.ev-card-open:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.ev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 64px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
}

.ev-empty i {
    font-size: 48px;
    opacity: .35;
}

@media (max-width: 640px) {
    .ev-grid {
        grid-template-columns: 1fr;
    }
    .ev-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Epic-view Modals ── */
.ev-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ev-modal.is-hidden { display: none; }
.ev-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ev-modal-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: color-mix(in srgb, var(--modal-bg, var(--card-bg)) 92%, transparent);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--input-border) 60%, transparent);
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--input-border) 20%, transparent);
    display: flex;
    flex-direction: column;
}
.ev-modal-wide { max-width: 1040px; }
.ev-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--input-border);
}
.ev-modal-header h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.ev-modal-header-actions {
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.ev-modal-close {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, color .14s;
}
.ev-modal-close:hover { background: var(--input-bg); color: var(--text); }
.ev-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ev-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--input-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Edit form ── */
.ev-form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ev-form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.ev-form-input:focus { border-color: var(--primary); }
.ev-form-select {
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    outline: none;
    min-width: 0;
    flex: 1 1 0;
}
.ev-form-select:focus { border-color: var(--primary); }
.ev-btn {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.ev-btn-cancel {
    background: transparent;
    border-color: var(--input-border);
    color: var(--text-muted);
}
.ev-btn-cancel:hover { border-color: var(--text-muted); color: var(--text); }
.ev-btn-save {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.ev-btn-save:hover { filter: brightness(1.1); }
.ev-btn-save:disabled { opacity: .5; cursor: not-allowed; }

/* ── Color Picker ── */
.ev-color-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ev-color-input {
    width: 38px;
    height: 38px;
    border: 2px solid var(--input-border);
    border-radius: 10px;
    padding: 2px;
    cursor: pointer;
    background: transparent;
}
.ev-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.ev-color-input::-webkit-color-swatch { border: none; border-radius: 7px; }
.ev-color-input-spectrum {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 6px 10px;
    font-size: 13px;
    font-family: monospace;
    cursor: pointer;
}
.ev-color-input-spectrum:focus {
    border-color: var(--primary);
    outline: none;
}
.ev-color-hex {
    font-size: 13px;
    font-family: monospace;
    color: var(--text-muted);
}
.ev-color-presets,
.ev-color-recent {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.ev-color-recent-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 2px;
}
.ev-color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    padding: 0;
}
.ev-color-swatch:hover {
    border-color: var(--text);
    transform: scale(1.15);
}

/* ── Tasks Modal (DataTables) ── */
.ev-tasks-table-wrap {
    overflow-x: auto;
    padding: 0 4px;
    flex: 1;
}
.ev-tasks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ev-tasks-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--input-border);
    white-space: nowrap;
}
.ev-tasks-table td {
    padding: 8px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--input-border) 50%, transparent);
    color: var(--text);
    vertical-align: middle;
}
.ev-tasks-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.ev-task-title-cell {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.ev-task-status { font-size: 14px; }
.ev-task-status.done { color: var(--success, #22c55e); }
.ev-task-status.open { color: var(--text-muted); opacity: .5; }
.ev-meta-chip-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* DataTables theme overrides for epic view */
.ev-modal-content .dataTables_wrapper {
    color: var(--text);
    font-size: 13px;
}
.ev-dt-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 14px 4px 10px;
    gap: 12px;
    flex-wrap: wrap;
}
.ev-dt-tools {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.ev-dt-export-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.ev-dt-export-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 65%, var(--input-border) 35%);
    background: color-mix(in srgb, var(--primary) 10%, var(--input-bg));
    color: color-mix(in srgb, var(--primary-dark) 78%, var(--input-text) 22%);
    transform: translateY(-1px);
}
.ev-dt-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 4px;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
}
/* Length ("Show X entries") */
.ev-modal-content .dataTables_length {
    color: var(--text-muted);
    font-size: 12px;
    margin-right: 8px;
}
.ev-modal-content .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}
.ev-modal-content .dataTables_length select {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 5px 10px;
    font-size: 12px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.ev-modal-content .dataTables_length select:focus {
    border-color: var(--primary);
}
/* Filter / Search */
.ev-modal-content .dataTables_filter {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: auto;
    text-align: right;
}
.ev-modal-content .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}
.ev-modal-content .dataTables_filter input {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 6px 12px;
    font-size: 13px;
    outline: none;
    margin-left: 0;
    min-width: 230px;
    transition: border-color .15s;
}
.ev-modal-content .dataTables_filter input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.ev-modal-content .dataTables_filter input::placeholder {
    color: var(--text-muted);
    opacity: .6;
}
/* Pagination buttons */
.ev-modal-content .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ev-modal-content .dataTables_paginate .paginate_button {
    color: var(--text) !important;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 4px 10px;
    margin: 0 1px;
    cursor: pointer;
    font-size: 12px;
    background: var(--input-bg);
    transition: background .12s, border-color .12s;
    user-select: none;
}
.ev-modal-content .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary);
    font-weight: 600;
}
.ev-modal-content .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--primary-soft) !important;
    border-color: var(--primary);
    color: var(--text) !important;
}
.ev-modal-content .dataTables_paginate .paginate_button.disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}
/* Info */
.ev-modal-content .dataTables_info {
    font-size: 12px;
    color: var(--text-muted);
    opacity: .8;
}
/* Table overrides */
.ev-modal-content table.dataTable {
    border-spacing: 0;
}
.ev-modal-content table.dataTable thead > tr > th {
    border-bottom: 1px solid var(--input-border);
    background: transparent;
    color: var(--text-muted);
    padding-top: 12px;
    padding-bottom: 12px;
}
.ev-modal-content table.dataTable.no-footer {
    border-bottom: 1px solid var(--input-border);
}
.ev-modal-content table.dataTable tbody > tr {
    background: transparent;
}
.ev-modal-content table.dataTable tbody > tr > td {
    padding-top: 10px;
    padding-bottom: 10px;
}
.ev-modal-content table.dataTable tbody > tr:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.ev-modal-content table.dataTable tbody > tr.odd {
    background: color-mix(in srgb, var(--input-bg) 40%, transparent);
}
.ev-modal-content table.dataTable tbody > tr.odd:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
/* Sorting icons */
.ev-modal-content table.dataTable thead > tr > th.sorting:after,
.ev-modal-content table.dataTable thead > tr > th.sorting_asc:after,
.ev-modal-content table.dataTable thead > tr > th.sorting_desc:after,
.ev-modal-content table.dataTable thead > tr > th.sorting:before,
.ev-modal-content table.dataTable thead > tr > th.sorting_asc:before,
.ev-modal-content table.dataTable thead > tr > th.sorting_desc:before {
    color: var(--text-muted);
    opacity: .6;
}
/* Empty table message */
.ev-modal-content .dataTables_empty {
    color: var(--text-muted);
    padding: 24px !important;
    text-align: center;
    font-style: italic;
}

/* Coloris overrides */
.clr-picker {
    z-index: 100000 !important;
}

.color-azul { background-color: var(--epic-color-azul); }
.color-roxo { background-color: var(--epic-color-roxo); }
.color-verde { background-color: var(--epic-color-verde); }
.color-laranja { background-color: var(--epic-color-laranja); }
.color-rosa { background-color: var(--epic-color-rosa); }
.color-vermelho { background-color: var(--epic-color-vermelho); }
.color-cinza { background-color: var(--epic-color-cinza); }

.task-card {
    background: var(--task-bg-theme);
    border: 1px solid var(--task-border-theme);
    border-radius: 14px;
    padding: 10px 10px 12px;
    margin-bottom: 10px;
    box-shadow: var(--task-shadow);
    position: relative;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.task-origin-board {
    margin: 2px 0 6px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-chip-origin {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 2px 0 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-card.is-completed {
    background: var(--completed-bg);
    border-color: var(--completed-border);
}

.task-card.is-blocked {
    background: color-mix(in srgb, var(--danger) 12%, var(--task-bg-theme));
    border-color: color-mix(in srgb, var(--danger) 55%, var(--task-border-theme));
}

.task-card.is-completed .task-title,
.task-card.is-completed .task-assignee,
.task-card.is-completed .task-description {
    color: var(--completed-text);
}

.task-card.is-blocked .task-title,
.task-card.is-blocked .task-assignee,
.task-card.is-blocked .task-description {
    color: color-mix(in srgb, var(--danger) 78%, #ffffff);
}

body.theme-dark .task-card.is-completed {
    background: var(--completed-bg);
    border-color: var(--completed-border);
}

body.theme-dark .task-card.is-blocked {
    background: color-mix(in srgb, var(--danger) 14%, var(--task-bg-theme));
    border-color: color-mix(in srgb, var(--danger) 58%, var(--task-border-theme));
}

body.theme-dark .task-card.is-completed .task-title,
body.theme-dark .task-card.is-completed .task-assignee,
body.theme-dark .task-card.is-completed .task-description {
    color: var(--completed-text);
}

body.theme-dark .task-card.is-blocked .task-title,
body.theme-dark .task-card.is-blocked .task-assignee,
body.theme-dark .task-card.is-blocked .task-description {
    color: color-mix(in srgb, var(--danger) 82%, #ffffff);
}

.task-card-header {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.task-card:hover .task-card-header,
.task-card:focus-within .task-card-header {
    opacity: 1;
    visibility: visible;
}

.task-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--task-title-theme);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

.task-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--input-border) 78%, transparent);
    background: color-mix(in srgb, var(--task-bg-theme) 60%, var(--sidebar-bg));
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
    margin-right: 6px;
    vertical-align: baseline;
}

.task-title-text {
    display: inline;
}

.task-chat-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    float: right;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
}

.task-chat-indicator i {
    font-size: 10px;
}

.task-title::before {
    content: "";
    float: right;
    width: 94px;
    height: 1.35em;
}

.task-assignee {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--task-desc-theme);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.task-assignee.is-current-user i {
    color: #22c55e;
}

.task-meta-row {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.task-chip {
    font-size: 12.5px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .2px;
    border: 1px solid transparent;
}

.task-chip-priority {
    background: #9f7a3c;
    color: #fff;
}

.task-chip-system {
    background: #a45b68;
    color: #fff;
}

.task-chip-client {
    background: #4b7890;
    color: #fff;
}

/* --- Light theme badge contrast overrides --- */
body.theme-light .task-chip-priority {
    background: #b8860b;
    color: #fff;
    border-color: rgba(0,0,0,.08);
}

body.theme-light .task-chip-system {
    background: #b04458;
    color: #fff;
    border-color: rgba(0,0,0,.08);
}

body.theme-light .task-chip-client {
    background: #3a6d85;
    color: #fff;
    border-color: rgba(0,0,0,.08);
}

body.theme-light .task-chip-origin {
    border-color: rgba(0,0,0,.10);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.task-description {
    margin: 8px 0 0;
    color: var(--task-desc-theme);
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-due-date {
    margin: 8px 0 0;
    color: var(--task-desc-theme);
    font-size: 13px;
    line-height: 1.35;
}

.task-chip-due {
    margin-top: 8px;
    display: inline-flex;
    width: fit-content;
}

.task-due-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.task-due-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.task-due-row .task-chip-due {
    margin: 0;
}

.task-main-due-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    min-width: 0;
    max-width: 100%;
}

.task-due-row .task-chip-due {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-main-due-chip.is-completed {
    background: transparent;
    border: 1px solid var(--task-border-theme);
    color: var(--task-desc-theme);
}

.task-main-due-chip.is-blocked {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--task-border-theme));
    color: color-mix(in srgb, var(--danger) 78%, var(--task-title-theme));
}

.task-complete-toggle {
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--input-border));
    background: color-mix(in srgb, var(--primary) 9%, var(--input-bg));
    color: color-mix(in srgb, var(--primary) 82%, var(--input-text));
    border-radius: 8px;
    height: 26px;
    width: 26px;
    min-width: 26px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, filter 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.task-complete-toggle:hover {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.task-complete-toggle.is-completed {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--input-border));
    color: color-mix(in srgb, var(--primary) 90%, var(--input-text));
}

.task-blocked-toggle {
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--input-border));
    background: color-mix(in srgb, var(--danger) 9%, var(--input-bg));
    color: color-mix(in srgb, var(--danger) 82%, var(--input-text));
    border-radius: 999px;
    height: 26px;
    width: 26px;
    min-width: 26px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, filter 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.task-blocked-toggle:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.task-blocked-toggle.is-blocked {
    background: color-mix(in srgb, var(--danger) 22%, transparent);
    border-color: color-mix(in srgb, var(--danger) 55%, var(--input-border));
    color: color-mix(in srgb, var(--danger) 90%, var(--input-text));
}

.task-subtree-wrap {
    margin-top: 8px;
}

.subtasks-toggle {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.subtasks-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.task-subtree {
    margin-top: 6px;
    padding-left: 12px;
    border-left: 1px dashed var(--task-border-theme);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-subtree[hidden] {
    display: none !important;
}

.subtask-empty-card {
    width: 100%;
    min-height: 50px;
    border: 1px dashed var(--task-border-theme);
    border-radius: 10px;
    background: color-mix(in srgb, var(--task-bg-theme) 88%, transparent);
    color: var(--task-desc-theme);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.subtask-empty-card:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--task-border-theme));
    background: color-mix(in srgb, var(--primary) 9%, var(--task-bg-theme));
    color: var(--task-title-theme);
}

.subtask-empty-plus {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--input-border));
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.subtask-empty-text {
    font-size: 11px;
    font-weight: 600;
}

.subtask-node {
    background: var(--task-bg-theme);
    border: 1px solid var(--task-border-theme);
    border-radius: 10px;
    padding: 7px 8px;
    min-width: 0;
    overflow: hidden;
}

.subtask-node.is-completed {
    background: var(--completed-bg);
    border-color: var(--completed-border);
}

.subtask-node.is-blocked {
    background: color-mix(in srgb, var(--danger) 11%, var(--task-bg-theme));
    border-color: color-mix(in srgb, var(--danger) 52%, var(--task-border-theme));
}

.subtask-node.is-completed .subtask-node-title {
    color: var(--completed-text);
}

.subtask-node.is-blocked .subtask-node-title {
    color: color-mix(in srgb, var(--danger) 78%, #ffffff);
}

.subtask-node.is-completed .subtask-node-desc {
    color: var(--completed-muted);
}

.subtask-node.is-blocked .subtask-node-desc {
    color: color-mix(in srgb, var(--danger) 65%, #ffffff);
}

body.theme-dark .subtask-node.is-completed {
    background: var(--completed-bg);
    border-color: var(--completed-border);
}

body.theme-dark .subtask-node.is-blocked {
    background: color-mix(in srgb, var(--danger) 13%, var(--task-bg-theme));
    border-color: color-mix(in srgb, var(--danger) 55%, var(--task-border-theme));
}

body.theme-dark .subtask-node.is-completed .subtask-node-title {
    color: var(--completed-text);
}

body.theme-dark .subtask-node.is-blocked .subtask-node-title {
    color: color-mix(in srgb, var(--danger) 82%, #ffffff);
}

body.theme-dark .subtask-node.is-completed .subtask-node-desc {
    color: var(--completed-muted);
}

body.theme-dark {
    --completed-bg: #1f3b2a;
    --completed-border: #2f6a48;
    --completed-text: #d8f4e2;
    --completed-muted: #add7bf;
}

body.theme-dark .subtask-node.is-blocked .subtask-node-desc {
    color: color-mix(in srgb, var(--danger) 68%, #ffffff);
}

.subtask-node-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--task-title-theme);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.subtask-node-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.subtask-node-header .subtask-node-title {
    flex: 1;
    min-width: 0;
}

.subtask-kind-icon {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    margin-top: 1px;
    cursor: default;
}

.subtask-kind-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    padding: 4px 2px 2px;
}

.subtask-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--task-title-theme, #ccc);
    opacity: 0.55;
    cursor: default;
    line-height: 1;
    letter-spacing: 0.02em;
}

.subtask-kind-input {
    width: 110px;
    min-width: 90px;
}

.subtask-delete-button {
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--task-border-theme));
    background: color-mix(in srgb, var(--danger) 9%, var(--task-bg-theme));
    color: color-mix(in srgb, var(--danger) 82%, var(--task-title-theme));
    border-radius: 999px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    font-size: 14px; /* Updated font size */
    font-size: 13px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.14s ease, filter 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.subtask-delete-button:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.subtask-node-desc {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--task-desc-theme);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.subtask-node-footer {
    margin-top: 6px;
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    gap: 8px;
}

.subtask-node-footer.no-date {
    grid-template-columns: minmax(0, auto) auto;
}

.subtask-node-footer .task-chip-due {
    margin: 0;
    height: 26px;
    display: inline-flex;
    align-items: center;
}

.subtask-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
}

.subtask-due-placeholder {
    display: inline-block;
    height: 26px;
    min-width: 112px;
    visibility: hidden;
}

.subtask-due-chip.is-completed {
    background: transparent;
    border: 1px solid var(--task-border-theme);
    color: var(--task-desc-theme);
}

.subtask-due-chip.is-blocked {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--task-border-theme));
    color: color-mix(in srgb, var(--danger) 78%, var(--task-title-theme));
}

.subtask-complete-toggle {
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--input-border));
    background: color-mix(in srgb, var(--primary) 9%, var(--input-bg));
    color: color-mix(in srgb, var(--primary) 82%, var(--input-text));
    border-radius: 8px;
    height: 26px;
    width: 26px;
    min-width: 26px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, filter 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.subtask-complete-toggle:hover {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.subtask-complete-toggle.is-completed {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--input-border));
    color: color-mix(in srgb, var(--primary) 90%, var(--input-text));
}

.subtask-blocked-toggle {
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--input-border));
    background: color-mix(in srgb, var(--danger) 9%, var(--input-bg));
    color: color-mix(in srgb, var(--danger) 82%, var(--input-text));
    border-radius: 999px;
    height: 26px;
    width: 26px;
    min-width: 26px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease, filter 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.task-complete-toggle.is-click-feedback,
.task-blocked-toggle.is-click-feedback,
.subtask-complete-toggle.is-click-feedback,
.subtask-blocked-toggle.is-click-feedback,
.subtask-delete-button.is-click-feedback {
    transform: scale(0.82);
    filter: brightness(1.18);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 26%, transparent);
}

.task-blocked-toggle.is-click-feedback,
.subtask-blocked-toggle.is-click-feedback,
.subtask-delete-button.is-click-feedback {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 28%, transparent);
}

.task-complete-toggle[data-loading="1"],
.task-blocked-toggle[data-loading="1"],
.subtask-complete-toggle[data-loading="1"],
.subtask-blocked-toggle[data-loading="1"],
.subtask-delete-button[data-loading="1"] {
    cursor: progress;
    animation: toggle-button-pulse 0.62s ease-in-out infinite;
}

.task-blocked-toggle[data-loading="1"],
.subtask-blocked-toggle[data-loading="1"],
.subtask-delete-button[data-loading="1"] {
    animation-name: toggle-button-pulse-danger;
}

@keyframes toggle-button-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 34%, transparent);
        filter: brightness(1.18);
    }
}

@keyframes toggle-button-pulse-danger {
    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 36%, transparent);
        filter: brightness(1.2);
    }
}

.subtask-blocked-toggle:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.subtask-blocked-toggle.is-blocked {
    background: color-mix(in srgb, var(--danger) 22%, transparent);
    border-color: color-mix(in srgb, var(--danger) 55%, var(--input-border));
    color: color-mix(in srgb, var(--danger) 90%, var(--input-text));
}

.task-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

.task-actions form {
    margin: 0;
}

.icon-button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, color .14s;
}

.icon-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.delete-task-button:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

.task-move-menu {
    position: fixed;
    z-index: 1200;
    min-width: 170px;
    max-width: 260px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    box-shadow: var(--task-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-move-menu-item {
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--input-text);
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
}

.task-move-menu-item:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.delete-column-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--danger);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.delete-column-button:hover {
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.board-columns::-webkit-scrollbar {
    height: 8px;
    width: 7px;
}

.board-columns::-webkit-scrollbar-track {
    background: var(--content-bg);
    border-radius: 999px;
}

.board-columns::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
}

.ai-chat-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--sidebar-card-active-border);
    background: var(--sidebar-card-active-bg);
    color: var(--sidebar-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1300;
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ai-chat-fab:hover {
    transform: translateY(-2px);
    box-shadow: var(--modal-shadow);
}

.ai-chat-drawer {
    position: fixed;
    right: 20px;
    bottom: 84px;
    width: min(920px, calc(100vw - 40px));
    height: min(700px, calc(100vh - 110px));
    background: var(--modal-bg);
    border: 1px solid var(--sidebar-card-border);
    border-radius: 20px;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    box-shadow: var(--modal-shadow);
    overflow: hidden;
}

.ai-chat-drawer.is-hidden {
    display: none;
}

.ai-chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sidebar-card-border);
    background: color-mix(in srgb, var(--modal-bg) 78%, var(--content-bg) 22%);
}

.ai-chat-header-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ai-chat-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
}

.ai-chat-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-chat-toggle-sidebar {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
}

.ai-chat-credits-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 12px;
    white-space: nowrap;
}

.ai-chat-mode-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--input-text);
    background: var(--input-bg);
}

.ai-chat-mode-badge.is-hidden {
    display: none;
}

.ai-chat-mode-badge.is-readonly {
    color: var(--board-subtitle);
}

.ai-chat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--sidebar-card-border);
    color: var(--board-subtitle);
    font-size: 13px;
}

.ai-chat-meta-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ai-chat-status {
    color: var(--board-subtitle);
    font-size: 12px;
    line-height: 1.3;
    max-width: 62ch;
}

.ai-chat-status.is-hidden {
    display: none;
}

.ai-chat-status[data-tone="warning"] {
    color: color-mix(in srgb, var(--input-text) 76%, var(--board-subtitle) 24%);
}

.ai-chat-status[data-tone="error"] {
    color: var(--danger);
}

.ai-chat-new-thread {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 10px;
    padding: 7px 12px;
    cursor: pointer;
}

.ai-chat-threads-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-chat-icon-button {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    position: relative;
}

.ai-chat-icon-button.is-danger {
    border-color: color-mix(in srgb, var(--danger) 52%, var(--input-border) 48%);
    color: color-mix(in srgb, var(--danger) 86%, var(--input-text) 14%);
}

.ai-chat-icon-button.is-danger:hover {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--input-bg) 90%);
}

.ai-chat-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 280px 1fr;
}

.ai-chat-body.is-sidebar-collapsed {
    grid-template-columns: 1fr;
}

.ai-chat-body.is-sidebar-collapsed .ai-chat-threads {
    display: none;
}

.ai-chat-threads {
    border-right: 1px solid var(--sidebar-card-border);
    overflow: auto;
    padding: 10px;
    background: color-mix(in srgb, var(--content-bg) 80%, var(--modal-bg) 20%);
}

.ai-chat-threads-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 10px;
}

.ai-chat-threads-title {
    font-size: 12px;
    color: var(--board-subtitle);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ai-chat-threads-count {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.ai-chat-thread-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-chat-thread-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
    border-radius: 12px;
    padding: 2px;
}

.ai-chat-thread-row.is-active {
    background: color-mix(in srgb, var(--sidebar-card-active-bg) 56%, transparent 44%);
}

.ai-chat-empty-state {
    border: 1px dashed var(--input-border);
    border-radius: 10px;
    padding: 10px;
    color: var(--board-subtitle);
    background: color-mix(in srgb, var(--input-bg) 84%, transparent 16%);
}

.ai-chat-thread-item {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 12px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.ai-chat-thread-item:hover {
    transform: translateY(-1px);
    border-color: var(--sidebar-card-active-border);
}

.ai-chat-thread-item.is-active {
    border-color: var(--sidebar-card-active-border);
    background: var(--sidebar-card-active-bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-card-active-border) 58%, transparent 42%);
}

.ai-chat-thread-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ai-chat-thread-action {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, border-color .15s ease;
}

.ai-chat-thread-action:hover {
    transform: translateY(-1px);
    border-color: var(--sidebar-card-active-border);
}

.ai-chat-thread-action.is-danger:hover {
    border-color: color-mix(in srgb, var(--danger) 70%, var(--input-border) 30%);
}

.ai-chat-inline-rename {
    display: flex;
    align-items: center;
    gap: 4px;
    grid-column: 1 / -1;
}

.ai-chat-inline-rename-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 7px 10px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 13px;
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.ai-chat-inline-rename-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background .12s, border-color .12s;
}

.ai-chat-inline-rename-btn.save:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ai-chat-inline-rename-btn.cancel:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.ai-chat-conversation {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: color-mix(in srgb, var(--modal-bg) 85%, var(--content-bg) 15%);
}

.ai-chat-messages {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-chat-message {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 14px;
    white-space: pre-wrap;
    max-width: min(88%, 760px);
    line-height: 1.45;
    transition: opacity .18s ease, transform .18s ease;
}

.ai-chat-message.is-rich {
    white-space: normal;
}

.ai-chat-message.is-rich p,
.ai-chat-message.is-rich li,
.ai-chat-message.is-rich blockquote,
.ai-chat-message.is-rich td,
.ai-chat-message.is-rich th {
    font-size: 14px;
    line-height: 1.5;
}

.ai-chat-message.is-rich h1 {
    font-size: 22px;
    line-height: 1.3;
}

.ai-chat-message.is-rich h2 {
    font-size: 20px;
    line-height: 1.3;
}

.ai-chat-message.is-rich h3 {
    font-size: 18px;
    line-height: 1.35;
}

.ai-chat-message.is-rich h4 {
    font-size: 16px;
    line-height: 1.35;
}

.ai-chat-message.is-rich h5 {
    font-size: 15px;
    line-height: 1.4;
}

.ai-chat-message.is-rich h6 {
    font-size: 14px;
    line-height: 1.4;
}

.ai-chat-message.is-rich > *:first-child {
    margin-top: 0;
}

.ai-chat-message.is-rich > *:last-child {
    margin-bottom: 0;
}

.ai-chat-message.is-rich p,
.ai-chat-message.is-rich ul,
.ai-chat-message.is-rich ol,
.ai-chat-message.is-rich blockquote,
.ai-chat-message.is-rich pre,
.ai-chat-message.is-rich table,
.ai-chat-message.is-rich h1,
.ai-chat-message.is-rich h2,
.ai-chat-message.is-rich h3,
.ai-chat-message.is-rich h4,
.ai-chat-message.is-rich h5,
.ai-chat-message.is-rich h6 {
    margin: 0 0 8px;
}

.ai-chat-message.is-rich ul,
.ai-chat-message.is-rich ol {
    padding-left: 18px;
}

.ai-chat-message.is-rich a {
    color: var(--sidebar-card-active-border);
    text-decoration: underline;
}

.ai-chat-message.is-rich code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    background: color-mix(in srgb, var(--modal-bg) 65%, var(--content-bg) 35%);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 1px 5px;
}

.ai-chat-message.is-rich pre {
    background: color-mix(in srgb, var(--modal-bg) 80%, var(--content-bg) 20%);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px;
    overflow: auto;
}

.ai-chat-message.is-rich pre code {
    background: transparent;
    border: none;
    padding: 0;
}

.ai-chat-message.is-rich blockquote {
    border-left: 3px solid var(--sidebar-card-active-border);
    margin-left: 0;
    padding-left: 10px;
    color: var(--board-subtitle);
}

.ai-chat-message.is-rich table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

.ai-chat-message.is-rich th,
.ai-chat-message.is-rich td {
    border: 1px solid var(--input-border);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.ai-chat-message.is-rich th {
    background: color-mix(in srgb, var(--modal-bg) 70%, var(--content-bg) 30%);
}

.ai-chat-message.is-entering {
    opacity: 0;
    transform: translateY(6px);
}

.ai-chat-message.role-user {
    border-color: var(--sidebar-card-active-border);
    background: color-mix(in srgb, var(--sidebar-card-active-bg) 78%, var(--input-bg) 22%);
    align-self: flex-end;
    border-bottom-right-radius: 8px;
}

.ai-chat-message.role-assistant {
    align-self: flex-start;
    border-bottom-left-radius: 8px;
}

.ai-chat-message.role-assistant.is-error {
    border-color: color-mix(in srgb, var(--danger) 65%, var(--input-border) 35%);
}

.ai-chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
}

.ai-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--input-text) 80%, var(--board-subtitle) 20%);
    opacity: .35;
    animation: ai-chat-dot-pulse 1s infinite ease-in-out;
}

.ai-chat-typing span:nth-child(2) {
    animation-delay: .15s;
}

.ai-chat-typing span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes ai-chat-dot-pulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: .35;
    }
    40% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.ai-chat-form {
    border-top: 1px solid var(--sidebar-card-border);
    padding: 12px;
    background: color-mix(in srgb, var(--modal-bg) 82%, var(--content-bg) 18%);
}

.ai-chat-composer {
    border: 1px solid var(--input-border);
    border-radius: 14px;
    background: var(--input-bg);
    overflow: hidden;
}

.ai-chat-upload-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--input-border);
    background: color-mix(in srgb, var(--sidebar-card-active-bg) 28%, var(--input-bg) 72%);
}

.ai-chat-upload-progress.is-hidden {
    display: none;
}

.ai-chat-upload-progress-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--input-border) 70%, var(--board-subtitle) 30%);
    border-top-color: var(--sidebar-card-active-border);
    animation: ai-chat-upload-spin .8s linear infinite;
    flex-shrink: 0;
}

.ai-chat-upload-progress-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ai-chat-upload-progress-texts strong {
    color: var(--input-text);
    font-size: 13px;
    line-height: 1.3;
}

.ai-chat-upload-progress-texts span {
    color: var(--board-subtitle);
    font-size: 12px;
    line-height: 1.3;
}

@keyframes ai-chat-upload-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ai-chat-form textarea {
    width: 100%;
    resize: none;
    min-height: 54px;
    max-height: 180px;
    border: none;
    background: transparent;
    color: var(--input-text);
    padding: 12px;
    outline: none;
}

.ai-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px 0;
}

.ai-chat-attachments.is-hidden {
    display: none;
}

.ai-chat-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--input-text);
    background: color-mix(in srgb, var(--modal-bg) 90%, var(--content-bg) 10%);
}

.ai-chat-attachment-chip.is-processing {
    border-color: color-mix(in srgb, var(--sidebar-card-active-border) 65%, var(--input-border) 35%);
}

.ai-chat-attachment-chip.is-ready {
    border-color: color-mix(in srgb, #2e7d32 55%, var(--input-border) 45%);
}

.ai-chat-attachment-chip.is-error {
    border-color: color-mix(in srgb, var(--danger) 70%, var(--input-border) 30%);
}

.ai-chat-attachment-chip-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.ai-chat-attachment-chip-status {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--board-subtitle);
    white-space: nowrap;
}

.ai-chat-attachment-chip.is-processing .ai-chat-attachment-chip-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--input-border) 70%, var(--board-subtitle) 30%);
    border-top-color: var(--sidebar-card-active-border);
    margin-right: 4px;
    animation: ai-chat-upload-spin .8s linear infinite;
}

.ai-chat-attachment-chip-remove {
    border: none;
    background: transparent;
    color: var(--board-subtitle);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.ai-chat-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--input-border);
    padding: 8px 10px;
}

.ai-chat-composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ai-chat-attach-button {
    border: 1px solid var(--input-border);
    background: transparent;
    color: var(--board-subtitle);
    border-radius: 8px;
    padding: 6px 8px;
    line-height: 1;
}

.ai-chat-composer-hint {
    color: var(--board-subtitle);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-form button {
    border: 1px solid var(--sidebar-card-active-border);
    background: var(--sidebar-card-active-bg);
    color: var(--sidebar-text);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ai-chat-form button:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

.ai-chat-new-thread:disabled,
.ai-chat-thread-item:disabled,
.ai-chat-form textarea:disabled,
.ai-chat-form button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ai-chat-form textarea:disabled {
    resize: none;
}

.ai-chat-notification-host {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    z-index: 5;
}

.ai-chat-notification {
    align-self: flex-end;
    border: 1px solid var(--input-border);
    background: var(--modal-bg);
    color: var(--input-text);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.3;
    box-shadow: var(--elev-shadow-sm);
    opacity: 0.95;
    transition: opacity .2s ease, transform .2s ease;
}

.ai-chat-notification.tone-success {
    border-color: color-mix(in srgb, #2e7d32 55%, var(--input-border) 45%);
}

.ai-chat-notification.tone-error {
    border-color: color-mix(in srgb, var(--danger) 70%, var(--input-border) 30%);
}

.ai-chat-notification.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

@media (max-width: 820px) {
    .ai-chat-drawer {
        right: 10px;
        bottom: 74px;
        width: calc(100vw - 20px);
        height: min(680px, calc(100vh - 88px));
        border-radius: 16px;
    }

    .ai-chat-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-chat-header-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .ai-chat-body {
        grid-template-columns: 1fr;
        grid-template-rows: 180px 1fr;
    }

    .ai-chat-threads {
        border-right: none;
        border-bottom: 1px solid var(--sidebar-card-border);
    }

    .ai-chat-message {
        max-width: 95%;
    }
}

input,
textarea,
button {
    font: inherit;
}

.create-task-form input,
.task-edit-form input,
.task-edit-form select,
.task-edit-form textarea {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--input-bg);
    color: var(--input-text);
}

.create-task-form input:focus,
.task-edit-form input:focus,
.task-edit-form select:focus,
.task-edit-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(179, 71, 217, 0.15);
}

#assignee-picker #assignee-chip-input {
    min-height: 44px;
    padding: 8px 40px 8px 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
}

#assignee-picker:focus-within #assignee-chip-input {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(179, 71, 217, 0.15);
}

#assignee-picker #modal-task-assignee-search {
    flex: 1;
    min-width: 180px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--input-text);
    padding: 2px 0;
}

#assignee-picker #modal-task-assignee-search:focus {
    box-shadow: none;
}

.assignee-selected-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.assignee-chip {
    border: 1px solid var(--input-border);
    background: var(--primary-soft);
    color: var(--input-text);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.assignee-chip-remove {
    font-size: 14px;
    line-height: 1;
}

#assignee-picker .system-picker-toggle {
    top: 8px;
}

.assignee-picker-option {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.assignee-picker-option:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.assignee-picker-option.is-selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
    color: var(--primary-dark);
}

.create-task-form button,
.form-actions button {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .16s, transform .08s, box-shadow .16s;
}

.create-task-form button:hover,
.form-actions button:hover {
    background: var(--primary-dark);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

#task-modal-cancel {
    background: var(--cancel-bg);
    color: var(--cancel-text);
}

#task-modal-cancel:hover {
    background: var(--cancel-hover);
    box-shadow: none;
}

.task-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.task-linkage-strip {
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    background: color-mix(in srgb, var(--input-bg) 88%, transparent);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-linkage-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.task-linkage-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-linkage-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--modal-text);
}

.task-linkage-caption {
    margin: 0;
    font-size: 11px;
    color: var(--modal-muted);
}

.task-linkage-track {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: hidden;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-bottom: 2px;
}

.task-linkage-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: fit-content;
    border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    border-radius: 999px;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--content-bg) 78%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 10%, transparent);
}

.task-linkage-item[data-linkage-role="epic"] {
    border-color: color-mix(in srgb, #0ea5e9 46%, var(--input-border) 54%);
    background: linear-gradient(145deg, color-mix(in srgb, #dbeafe 58%, var(--input-bg) 42%), color-mix(in srgb, #e0f2fe 68%, var(--input-bg) 32%));
}

.task-linkage-item[data-linkage-role="board"] {
    border-color: color-mix(in srgb, #22c55e 40%, var(--input-border) 60%);
    background: linear-gradient(145deg, color-mix(in srgb, #dcfce7 54%, var(--input-bg) 46%), color-mix(in srgb, #ecfccb 62%, var(--input-bg) 38%));
}

.task-linkage-item[data-linkage-role="parent_task"] {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--input-border) 58%);
    background: linear-gradient(145deg, color-mix(in srgb, #fef3c7 56%, var(--input-bg) 44%), color-mix(in srgb, #ffedd5 64%, var(--input-bg) 36%));
}

.task-linkage-item[data-linkage-role="epic-empty"] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--input-border) 78%, transparent);
    background: color-mix(in srgb, var(--content-bg) 80%, transparent);
}

body.theme-dark .task-linkage-item-label,
body.theme-dark-ocean .task-linkage-item-label {
    color: #dbe3f4;
}

body.theme-dark .task-linkage-item-value,
body.theme-dark-ocean .task-linkage-item-value {
    color: #f8fbff;
}

body.theme-dark .task-linkage-item,
body.theme-dark-ocean .task-linkage-item {
    border-color: color-mix(in srgb, #5f7697 58%, var(--input-border) 42%);
    background: linear-gradient(145deg, #162131 0%, #1b2738 100%);
    box-shadow: 0 8px 16px rgba(2, 8, 18, 0.52);
}

body.theme-dark .task-linkage-item[data-linkage-role="epic"] .task-linkage-item-value,
body.theme-dark-ocean .task-linkage-item[data-linkage-role="epic"] .task-linkage-item-value {
    color: #e0f2fe;
}

body.theme-dark .task-linkage-item[data-linkage-role="epic"],
body.theme-dark-ocean .task-linkage-item[data-linkage-role="epic"] {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0d2846 0%, #15375e 100%);
}

body.theme-dark .task-linkage-item[data-linkage-role="board"] .task-linkage-item-value,
body.theme-dark-ocean .task-linkage-item[data-linkage-role="board"] .task-linkage-item-value {
    color: #dcfce7;
}

body.theme-dark .task-linkage-item[data-linkage-role="board"],
body.theme-dark-ocean .task-linkage-item[data-linkage-role="board"] {
    border-color: #22c55e;
    background: linear-gradient(145deg, #142f21 0%, #1e4731 100%);
}

body.theme-dark .task-linkage-item[data-linkage-role="parent_task"] .task-linkage-item-value,
body.theme-dark-ocean .task-linkage-item[data-linkage-role="parent_task"] .task-linkage-item-value {
    color: #fef3c7;
}

body.theme-dark .task-linkage-item[data-linkage-role="parent_task"],
body.theme-dark-ocean .task-linkage-item[data-linkage-role="parent_task"] {
    border-color: #f59e0b;
    background: linear-gradient(145deg, #452c11 0%, #5b3a16 100%);
}

body.theme-dark .task-linkage-item[data-linkage-role="epic-empty"],
body.theme-dark-ocean .task-linkage-item[data-linkage-role="epic-empty"] {
    border-color: #526075;
    background: linear-gradient(145deg, #1b2230 0%, #202838 100%);
}

body.theme-current .task-linkage-item-label {
    color: #dbe3f4;
}

body.theme-current .task-linkage-item-value {
    color: #f8fbff;
}

body.theme-current .task-linkage-item {
    border-color: color-mix(in srgb, #5f7697 58%, var(--input-border) 42%);
    background: linear-gradient(145deg, #162131 0%, #1b2738 100%);
    box-shadow: 0 8px 16px rgba(2, 8, 18, 0.52);
}

body.theme-current .task-linkage-item[data-linkage-role="epic"] {
    border-color: #3b82f6;
    background: linear-gradient(145deg, #0d2846 0%, #15375e 100%);
}

body.theme-current .task-linkage-item[data-linkage-role="board"] {
    border-color: #22c55e;
    background: linear-gradient(145deg, #142f21 0%, #1e4731 100%);
}

body.theme-current .task-linkage-item[data-linkage-role="parent_task"] {
    border-color: #f59e0b;
    background: linear-gradient(145deg, #452c11 0%, #5b3a16 100%);
}

body.theme-current .task-linkage-item[data-linkage-role="epic-empty"] {
    border-color: #526075;
    background: linear-gradient(145deg, #1b2230 0%, #202838 100%);
}

body.theme-current a.task-linkage-item-value:hover {
    color: #ffffff;
}

body.theme-dark a.task-linkage-item-value:hover,
body.theme-dark-ocean a.task-linkage-item-value:hover {
    color: #ffffff;
}

.task-linkage-item-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--modal-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.task-linkage-item-value {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--modal-muted);
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

a.task-linkage-item-value:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.task-linkage-connector {
    color: color-mix(in srgb, var(--primary) 50%, var(--modal-muted) 50%);
    font-size: 11px;
    opacity: .9;
}

.task-linkage-empty {
    margin: 0;
    font-size: 11px;
    color: var(--modal-muted);
}

.task-linkage-empty.is-hidden {
    display: none !important;
}

.task-linkage-edit-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--border) 50%, transparent);
}

.task-linkage-edit-row.is-hidden {
    display: none;
}

.task-linkage-edit-row label {
    margin: 0;
    font-size: 11px;
    color: var(--modal-muted);
}

.task-linkage-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
}

.task-linkage-select {
    min-width: 0;
}

.task-linkage-button {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.task-linkage-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.task-linkage-button-cancel {
    background: var(--cancel-bg);
    color: var(--cancel-text);
}

.task-linkage-edit-toggle {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.task-linkage-edit-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.task-linkage-edit-toggle.is-hidden {
    display: none;
}

.task-commits-strip {
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    background: color-mix(in srgb, var(--content-bg) 84%, transparent);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-commits-strip.is-collapsed {
    gap: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.task-commits-strip.is-collapsed .task-commits-body {
    display: none;
}

.task-commits-strip.is-collapsed .task-linkage-caption {
    display: none;
}

.task-commits-strip.is-collapsed #task-commits-toggle-repo,
.task-commits-strip.is-collapsed #task-commits-sync {
    display: none;
}

.task-commits-header-main {
    min-width: 0;
}

.task-commits-title-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.task-commits-visibility-toggle {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--input-border) 72%, transparent);
    background: var(--input-bg);
    color: var(--modal-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.task-commits-visibility-toggle:hover {
    border-color: color-mix(in srgb, var(--primary) 62%, transparent);
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 10%, var(--input-bg));
}

.task-commits-visibility-toggle i {
    font-size: 9px;
    transition: transform .16s ease;
}

.task-commits-visibility-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.task-commits-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-commits-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.task-commits-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.board-git-search-empty {
    margin: 6px 0 8px;
}

.board-git-search-empty.is-hidden,
.system-picker-hint.is-hidden {
    display: none;
}

#task-commits-repo-section.is-hidden {
    display: none;
}

.task-commits-columns.is-repo-hidden {
    grid-template-columns: minmax(0, 1fr);
}

.task-commits-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.task-commits-title {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--modal-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.task-commits-repo-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.task-commits-branch-label {
    color: var(--modal-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.task-commits-branch-select {
    min-width: 280px;
    width: 100%;
    max-width: 100%;
    height: 34px;
    padding: 0 28px 0 10px;
    font-size: 12px;
    box-sizing: border-box;
}

.task-commits-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow: auto;
    padding-right: 2px;
}

.task-commit-item {
    border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
    background: color-mix(in srgb, var(--input-bg) 90%, transparent);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-commit-message {
    margin: 0;
    font-size: 12px;
    color: var(--modal-text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.task-commit-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--modal-muted);
}

.task-commit-badge {
    border: 1px solid color-mix(in srgb, var(--input-border) 65%, transparent);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: color-mix(in srgb, var(--content-bg) 75%, transparent);
    color: var(--modal-text);
}

.task-commit-branch-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #22c55e;
    background: color-mix(in srgb, #22c55e 14%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
}

.task-commit-branch-badge i {
    font-size: 9px;
}

.task-commit-author,
.task-commit-date,
.task-commit-repo {
    color: var(--modal-muted);
}

.task-commit-repo {
    font-size: 10px;
    letter-spacing: .01em;
}

.task-commit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.task-commit-link {
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.task-commit-link:hover {
    text-decoration: underline;
}

.task-commit-action-button {
    border: 1px solid color-mix(in srgb, var(--input-border) 75%, transparent);
    background: var(--input-bg);
    color: var(--modal-text);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.task-commit-action-link:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary) 65%, transparent);
    background: color-mix(in srgb, var(--primary) 14%, var(--input-bg));
    color: var(--primary-dark);
}

.task-commit-action-unlink:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--danger) 65%, transparent);
    background: color-mix(in srgb, var(--danger) 14%, var(--input-bg));
    color: color-mix(in srgb, var(--danger) 86%, var(--modal-text));
}

.task-commit-action-button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.task-commit-empty {
    margin: 0;
    font-size: 11px;
    color: var(--modal-muted);
    border: 1px dashed color-mix(in srgb, var(--input-border) 70%, transparent);
    border-radius: 8px;
    padding: 8px;
}

#task-commits-status.is-error {
    color: #b91c1c;
}

#task-commits-status.is-success {
    color: #15803d;
}

body.theme-dark #task-commits-status.is-error,
body.theme-dark-ocean #task-commits-status.is-error,
body.theme-current #task-commits-status.is-error {
    color: #fca5a5;
}

body.theme-dark #task-commits-status.is-success,
body.theme-dark-ocean #task-commits-status.is-success,
body.theme-current #task-commits-status.is-success {
    color: #86efac;
}

@media (max-width: 860px) {
    .task-commits-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.quick-subtask-form--linked {
    display: flex;
    flex-direction: column;
}

.quick-subtask-meta-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.quick-subtask-meta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.quick-subtask-meta-field label {
    font-size: 12px;
    color: var(--modal-muted);
    margin: 0;
}

.task-inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.task-inline-fields-triple {
    grid-template-columns: 1fr 1fr 1fr;
}

.task-inline-fields-quad {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.task-inline-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.subtasks-header-row {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.subtasks-header-row label {
    margin: 0;
}

.subtasks-grid-head {
    display: none;
}

.subtasks-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subtasks-add-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: start;
}

.subtask-add-button {
    color: var(--input-text);
}

.subtask-add-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.subtask-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--input-bg) 50%, transparent);
}

.subtask-row-main {
    display: flex;
    gap: 8px;
    align-items: start;
}

.subtask-row-main .subtask-title-input {
    flex: 1 1 320px;
    min-width: 220px;
}

.subtask-row-main .subtask-kind-input {
    flex: 0 0 120px;
}

.subtask-row-main .subtask-size-input {
    flex: 0 0 90px;
}

.subtask-row-main .subtask-date-input {
    flex: 0 0 150px;
}

.subtask-row .subtask-input {
    width: 100%;
}

.subtask-row-main .subtask-input {
    min-height: 44px;
}

.subtask-size-input {
    min-width: 82px;
}

.task-chip-size {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
}

.task-size-empty {
    background: color-mix(in srgb, var(--content-bg) 70%, transparent);
    color: var(--modal-muted);
}

.task-size-pp,
.task-size-xp { background: #e0f2fe; color: #075985; }
.task-size-p { background: #d1fae5; color: #065f46; }
.task-size-m { background: #fef3c7; color: #92400e; }
.task-size-g { background: #fde68a; color: #78350f; }
.task-size-gg { background: #fecaca; color: #7f1d1d; }
.task-size-xg { background: #e9d5ff; color: #581c87; }

.subtask-size-chip {
    margin-left: auto;
}

.subtask-row .subtask-desc-input {
    min-height: 60px;
    max-height: 124px;
    line-height: 1.35;
    resize: none;
    overflow-y: hidden;
}

@media (max-width: 960px) {
    .subtask-row-main {
        flex-wrap: wrap;
    }

    .subtask-row-main .subtask-title-input {
        flex: 1 1 100%;
        min-width: 0;
    }
}

.subtask-remove-button {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--modal-muted);
    border-radius: 8px;
    width: 34px;
    height: 42px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.subtask-remove-button:hover {
    background: var(--primary-soft);
    color: var(--danger);
}

.description-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.description-header-row label {
    margin: 0;
}

.description-header-actions {
    display: inline-flex;
    gap: 4px;
}

.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--input-bg) 60%, transparent);
}

.markdown-mode-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    width: 100%;
    align-self: stretch;
}

.markdown-editor-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.markdown-toolbar-end {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.markdown-tool-button {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .14s, color .14s, border-color .14s;
}

.markdown-header-tool-button {
    min-width: 32px;
    padding: 0 7px;
}

.markdown-header-tool-button svg {
    width: 16px;
    height: 16px;
    display: block;
}

.markdown-tool-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.markdown-toolbar.is-hidden {
    display: none;
}

.markdown-toolbar.is-preview-mode [data-md-action] {
    display: none !important;
}

.markdown-preview {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 10px 12px;
    min-height: 10vh;
    height: 30vh;
    max-height: 62vh;
    resize: vertical;
    overflow: auto;
}

.markdown-preview.is-expanded {
    height: 62vh;
    max-height: 62vh;
}

.markdown-preview.is-hidden {
    display: none;
}

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

#quick-subtask-description.is-hidden {
    display: none;
}

#modal-task-description {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 10vh;
    height: 30vh;
    resize: vertical;
    overflow-x: auto;
}

.markdown-preview-empty {
    margin: 0;
    color: var(--modal-muted);
    font-size: 13px;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
    margin: 10px 0 6px;
    line-height: 1.25;
}

.markdown-preview p {
    margin: 7px 0;
}

.markdown-preview ul,
.markdown-preview ol {
    margin: 7px 0 7px 18px;
    padding: 0;
}

.markdown-preview .markdown-task-item {
    list-style: none;
    margin-left: -18px;
}

.markdown-preview .markdown-task-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.markdown-preview .markdown-task-checkbox {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.markdown-preview .markdown-task-text.is-checked {
    text-decoration: line-through;
    opacity: 0.82;
}

.markdown-preview a {
    color: var(--primary);
    text-decoration: underline;
}

.markdown-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--input-border);
}

.markdown-preview hr {
    border: none;
    border-top: 1px solid var(--input-border);
    margin: 12px 0;
}

.markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}

.markdown-preview th,
.markdown-preview td {
    border: 1px solid var(--input-border);
    padding: 6px 8px;
    vertical-align: top;
}

.markdown-preview th {
    background: var(--primary-soft);
    color: var(--modal-text);
}

.markdown-preview code {
    background: var(--primary-soft);
    border-radius: 6px;
    padding: 1px 5px;
}

.markdown-preview pre {
    margin: 8px 0;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    overflow: auto;
    background: var(--content-bg);
}

.markdown-preview pre code {
    background: transparent;
    padding: 0;
}

.markdown-preview pre code .md-code-keyword {
    color: var(--primary);
    font-weight: 700;
}

.markdown-preview pre code .md-code-string {
    color: var(--board-subtitle);
}

.markdown-preview pre code .md-code-comment {
    color: var(--text-muted);
    font-style: italic;
}

.markdown-preview pre code .md-code-number {
    color: var(--modal-muted);
}

.markdown-preview pre code .md-code-key {
    color: var(--danger);
    font-weight: 600;
}

.markdown-preview blockquote {
    margin: 8px 0;
    padding-left: 10px;
    border-left: 3px solid var(--primary);
    color: var(--modal-muted);
}

.system-picker {
    position: relative;
}

.system-picker #modal-task-system {
    padding-right: 38px;
}

.system-picker-toggle {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--modal-muted);
    cursor: pointer;
}

.system-picker-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.system-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 290px;
    overflow-y: auto;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 10px;
    box-shadow: var(--modal-shadow);
    z-index: 20;
    padding: 8px;
}

.system-picker-dropdown.is-hidden {
    display: none;
}

.system-picker-hint {
    margin: 0 0 8px;
    color: var(--modal-muted);
    font-size: 13px;
}

.system-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.system-picker-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.system-tag {
    border: none;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    flex: 1;
}

.system-menu-toggle {
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    color: var(--modal-muted);
}

.system-menu-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.system-config-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
}

.system-config-modal.is-hidden {
    display: none;
}

.system-config-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.system-config-content {
    position: relative;
    z-index: 1;
    width: calc(100% - 24px);
    max-width: 370px;
    background: color-mix(in srgb, var(--menu-bg) 92%, transparent);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--menu-border) 60%, transparent);
    border-radius: 12px;
    box-shadow: var(--modal-shadow), 0 0 0 1px color-mix(in srgb, var(--menu-border) 20%, transparent);
    padding: 16px;
    color: var(--modal-text);
}

#code-language-modal .system-config-content {
    max-width: 460px;
    min-height: 280px;
    padding: 16px;
}

.system-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--menu-border) 50%, transparent);
}

.due-rule-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.due-rule-info {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--modal-text);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.due-rule-info-tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 280px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--menu-border);
    background: var(--menu-bg);
    color: var(--modal-text);
    font-size: 12px;
    line-height: 1.35;
    box-shadow: var(--modal-shadow);
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 30;
}

.instant-tooltip-bubble {
    position: fixed;
    max-width: 320px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--menu-border);
    background: var(--menu-bg);
    color: var(--modal-text);
    font-size: 12px;
    line-height: 1.35;
    box-shadow: var(--modal-shadow);
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    white-space: pre-line;
    z-index: 1200;
    transition: opacity 0.05s linear, transform 0.08s ease;
}

.instant-tooltip-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.due-rule-info:hover .due-rule-info-tooltip,
.due-rule-info:focus .due-rule-info-tooltip,
.due-rule-info:focus-within .due-rule-info-tooltip {
    opacity: 1;
    transform: translateY(0);
}

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

.due-rule-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.due-rule-field label,
.due-rule-field input,
.due-rule-field select {
    margin-bottom: 6px;
}

@media (max-width: 760px) {
    .due-rule-row {
        grid-template-columns: 1fr;
    }
}

.system-config-header h4 {
    margin: 0;
    font-size: 16px;
}

.system-config-content label {
    color: var(--modal-muted);
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.system-config-content input {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--input-bg);
    color: var(--input-text);
    margin-bottom: 8px;
}

.system-config-content select {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--input-bg);
    color: var(--input-text);
    margin-bottom: 8px;
}

.system-item-delete {
    border: none;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--modal-text);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
}

.system-item-delete:hover {
    background: var(--primary-soft);
    color: var(--danger);
}

.system-color-title {
    margin: 8px 0 6px;
    font-size: 12px;
    color: var(--modal-muted);
}

.system-color-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.system-color-custom-row {
    position: relative;
}

.system-color-option {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--modal-text);
    cursor: pointer;
}

.system-color-option:hover {
    background: var(--primary-soft);
}

.system-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--input-border);
}

.system-custom-color-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.theme-current .system-config-content,
body.theme-current .system-config-header h4,
body.theme-current .system-item-delete,
body.theme-current .system-color-option {
    color: #e8edf8;
}

body.theme-current .system-config-content label,
body.theme-current .system-color-title {
    color: #cbd6ea;
}

body.theme-current #client-picker #modal-task-client,
body.theme-current #client-picker #modal-task-client::placeholder,
body.theme-current #client-picker .system-picker-hint,
body.theme-current #client-picker .system-create-button,
body.theme-current #client-picker .system-menu-toggle {
    color: #eef2fc;
}

body.theme-current #assignee-picker .system-create-button {
    color: #eef2fc;
}

body.theme-light .assignee-chip,
body.theme-light .assignee-chip-remove {
    color: var(--input-text);
}

.system-color-check {
    margin-left: auto;
    visibility: hidden;
}

.system-color-check.is-active {
    visibility: visible;
}

.system-create-button {
    border: 1px dashed var(--input-border);
    background: transparent;
    color: var(--modal-text);
    border-radius: 8px;
    padding: 7px 8px;
    text-align: left;
    cursor: pointer;
}

.system-create-button:hover {
    background: var(--primary-soft);
}

.system-color-padrao {
    background: #7c3aed;
    color: #fff;
}

.system-color-cinza {
    background: #6b7280;
    color: #fff;
}

.system-color-marrom {
    background: #8b5a2b;
    color: #fff;
}

.system-color-laranja {
    background: #ea580c;
    color: #fff;
}

.system-color-amarelo {
    background: #f59e0b;
    color: #1f2937;
}

.system-color-verde {
    background: #16a34a;
    color: #fff;
}

.system-color-azul {
    background: #2563eb;
    color: #fff;
}

.system-color-roxo {
    background: #7e22ce;
    color: #fff;
}

.system-color-rosa {
    background: #db2777;
    color: #fff;
}

.system-color-vermelho {
    background: #dc2626;
    color: #fff;
}

.system-color-custom {
    background: var(--system-custom-bg);
    border-color: var(--system-custom-border) !important;
    color: var(--system-custom-text);
}

/* --- Light theme: richer system-color chips on cards --- */
body.theme-light .task-chip.system-color-padrao  { background: #6d28d9; }
body.theme-light .task-chip.system-color-cinza   { background: #4b5563; }
body.theme-light .task-chip.system-color-marrom  { background: #78451d; }
body.theme-light .task-chip.system-color-amarelo { background: #d97706; color: #fff; }

.task-edit-form label {
    font-weight: 600;
    font-size: 13px;
}

.form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

/* Cancel-style buttons in form-actions (non-primary) */
#delete-column-confirm-no,
#gantt-columns-cancel,
#quick-subtask-cancel,
#code-language-cancel,
#due-rule-cancel {
    background: var(--cancel-bg);
    color: var(--cancel-text);
}
#delete-column-confirm-no:hover,
#gantt-columns-cancel:hover,
#quick-subtask-cancel:hover,
#code-language-cancel:hover,
#due-rule-cancel:hover {
    background: var(--cancel-hover);
    box-shadow: none;
}

.task-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 12px;
}

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

.task-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.task-modal-content {
    position: relative;
    z-index: 1;
    width: calc(100% - 24px);
    max-width: 560px;
    max-height: calc(100vh - 24px);
    background: color-mix(in srgb, var(--modal-bg) 92%, transparent);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--modal-shadow), 0 0 0 1px color-mix(in srgb, var(--border) 20%, transparent);
    color: var(--modal-text);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--content-bg);
}

.task-modal-content::-webkit-scrollbar {
    height: 4px;
    width: 3px;
}

.task-modal-content::-webkit-scrollbar-track {
    background: var(--content-bg);
    border-radius: 999px;
}

.task-modal-content::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
}

.quick-subtask-modal-content {
    width: min(94vw, 860px);
    max-width: min(94vw, 860px);
}

#quick-subtask-linkage-track {
    flex-wrap: wrap;
    row-gap: 6px;
    overflow-x: hidden;
}

#quick-subtask-linkage-track .task-linkage-item {
    max-width: 100%;
}

#quick-subtask-linkage-track .task-linkage-item-value {
    white-space: normal;
    overflow-wrap: anywhere;
}

#task-edit-modal .task-modal-content {
    width: min(94vw, 1060px);
    max-width: min(94vw, 1060px);
    height: auto;
    max-height: min(95vh, calc(100dvh - 48px));
    padding-top: 22px;
}

#task-edit-modal {
    padding-top: 24px;
    padding-bottom: 24px;
}

.markdown-editor-modal-content {
    width: min(92vw, 1100px);
    max-width: 1100px;
    max-height: min(92vh, calc(100dvh - 24px));
    border-radius: 18px;
}

#markdown-editor-modal-mount {
    width: 100%;
}

.markdown-editor-modal-content #modal-task-description,
.markdown-editor-modal-content #markdown-preview {
    height: min(60vh, 620px);
    max-height: min(60vh, 620px);
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    border-radius: 10px;
    transition: border-color .14s;
}

.markdown-editor-modal-content #modal-task-description:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.task-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.task-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.task-creator-label {
    margin-left: auto;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--modal-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.task-creator-label.is-hidden {
    display: none;
}

.task-modal-content .icon-button {
    color: var(--modal-muted);
}

#task-modal-close:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}


.share-board-modal-content {
    max-width: 640px;
    border-radius: 18px;
    padding: 20px;
}

.rename-board-modal-content {
    max-width: 520px;
}

.gantt-modal-content {
    --gantt-modal-offset-x: 0px;
    --gantt-modal-offset-y: 0px;
    width: min(1100px, 94vw);
    max-width: 1100px;
    height: min(86vh, 860px);
    max-height: min(86vh, 860px);
    display: flex;
    flex-direction: column;
    transform: translate(var(--gantt-modal-offset-x), var(--gantt-modal-offset-y));
    overflow: hidden;
    min-width: 760px;
    min-height: 460px;
}

.gantt-modal-content.is-expanded {
    width: min(1400px, 98vw);
    max-width: 1400px;
    max-height: 95vh;
}

.gantt-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gantt-view-mode-button,
.gantt-expand-button {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    height: 30px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.gantt-view-mode-button.is-active,
.gantt-view-mode-button:hover,
.gantt-expand-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.gantt-header-separator {
    width: 1px;
    height: 18px;
    background: color-mix(in srgb, var(--input-border) 70%, transparent);
    flex-shrink: 0;
    margin: 0 2px;
}

.gantt-toggle-all-button {
    font-size: 11px;
    padding: 4px 8px;
    gap: 4px;
    display: inline-flex;
    align-items: center;
}

.gantt-toggle-all-button i {
    font-size: 10px;
}

.gantt-view-container {
    margin-top: 8px;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--modal-bg) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--modal-bg) 96%, #000000 4%) 100%);
    min-height: 420px;
    overflow: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--content-bg);
}

.gantt-modal-content .share-board-subtitle {
    color: color-mix(in srgb, var(--modal-text) 72%, transparent);
}

.gantt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -2px 0 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--input-border) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--modal-bg) 92%, #ffffff 8%);
}

.gantt-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.gantt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: color-mix(in srgb, var(--modal-text) 86%, transparent);
    font-size: 12px;
    font-weight: 600;
}

.gantt-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--modal-text) 22%, transparent);
}

.gantt-legend-dot.is-pending {
    background: var(--gantt-pending);
    border-color: var(--gantt-pending-dark);
}

.gantt-legend-dot.is-completed {
    background: var(--gantt-completed);
    border-color: var(--gantt-completed-dark);
}

.gantt-legend-dot.is-overdue {
    background: var(--gantt-overdue);
    border-color: var(--gantt-overdue-dark);
}

.gantt-legend-dot.is-today {
    background: var(--gantt-today);
}

.gantt-filter-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gantt-filter-button {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 8px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.gantt-filter-button:hover,
.gantt-filter-button.is-active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.gantt-search-wrap {
    margin-left: auto;
    min-width: 220px;
    flex: 1 1 240px;
    display: flex;
    justify-content: flex-end;
}

.gantt-search-input {
    width: min(360px, 100%);
    height: 30px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 0 10px;
    font-size: 12px;
}

.gantt-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.gantt-view-container .gantt .grid-header {
    fill: color-mix(in srgb, var(--modal-bg) 78%, #ffffff 22%);
    stroke: color-mix(in srgb, var(--modal-text) 18%, transparent);
}

.gantt-view-container .gantt .header {
    will-change: transform;
    z-index: 8;
}

.gantt-view-container .gantt .grid-row {
    fill: color-mix(in srgb, var(--modal-bg) 88%, #ffffff 12%);
}

.gantt-view-container .gantt .grid-row:nth-child(even) {
    fill: color-mix(in srgb, var(--modal-bg) 82%, #ffffff 18%);
}

.gantt-view-container .gantt .row-line {
    stroke: color-mix(in srgb, var(--modal-text) 12%, transparent);
}

.gantt-view-container .gantt .tick {
    stroke: color-mix(in srgb, var(--modal-text) 20%, transparent);
    stroke-width: 0.35;
}

.gantt-view-container .gantt .tick.thick {
    stroke: color-mix(in srgb, var(--modal-text) 30%, transparent);
    stroke-width: 0.55;
}

.gantt-view-container .gantt .upper-text {
    fill: var(--modal-text);
    font-weight: 600;
}

.gantt-view-container .gantt .lower-text {
    fill: var(--modal-text);
    font-weight: 700;
}

.gantt-view-container .gantt text {
    stroke: none !important;
    stroke-width: 0 !important;
    paint-order: normal;
}

.gantt-view-container .gantt .bar {
    fill: var(--gantt-pending);
    stroke: var(--gantt-pending-dark);
    stroke-width: 0.8;
}

.gantt-view-container .gantt .bar-progress {
    fill: var(--gantt-pending-dark);
}

.gantt-view-container .gantt .bar-wrapper:hover .bar,
.gantt-view-container .gantt .bar-wrapper.active .bar {
    fill: color-mix(in srgb, var(--gantt-pending) 88%, #ffffff 12%);
}

.gantt-view-container .gantt .bar-wrapper:hover .bar-progress,
.gantt-view-container .gantt .bar-wrapper.active .bar-progress {
    fill: color-mix(in srgb, var(--gantt-pending-dark) 90%, #ffffff 10%);
}

.gantt-view-container .gantt .bar-label {
    fill: #ffffff;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-shadow: none;
}

.gantt-view-container .gantt .bar-label.big {
    fill: var(--modal-text);
    font-weight: 600;
    text-shadow: none;
}

.gantt-view-container .gantt .bar-label.bar-label-outside {
    fill: var(--modal-text);
    font-weight: 700;
    text-shadow: none;
    letter-spacing: 0;
    text-anchor: start !important;
    dominant-baseline: central;
}

.gantt-view-container .gantt .bar-wrapper.gantt-subtask .bar {
    fill: color-mix(in srgb, var(--gantt-pending) 78%, #a7c5ef 22%);
    stroke: color-mix(in srgb, var(--gantt-pending-dark) 76%, #5f8fd2 24%);
    stroke-dasharray: 4 2;
    opacity: 0.9;
}

.gantt-view-container .gantt .bar-wrapper.gantt-subtask .bar-label,
.gantt-view-container .gantt .bar-wrapper.gantt-subtask .bar-label.bar-label-outside {
    fill: color-mix(in srgb, var(--modal-text) 90%, #6b7280 10%);
    font-style: italic;
}

.gantt-total-progress-badge {
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--input-border) 60%);
    background: color-mix(in srgb, var(--primary) 14%, var(--input-bg) 86%);
    color: color-mix(in srgb, var(--primary-dark) 78%, var(--modal-text) 22%);
    font-weight: 700;
}

.gantt-view-container #gantt-chart-host svg {
    overflow: visible;
    min-height: 32px;
}

.gantt-view-container .gantt .arrow {
    stroke: color-mix(in srgb, var(--modal-text) 58%, transparent);
}

.gantt-view-container .gantt .today-highlight {
    fill: color-mix(in srgb, var(--primary) 24%, #f8d878 76%);
    opacity: 0.42;
}

.gantt-view-container .gantt-today-line {
    stroke: var(--gantt-today);
    stroke-width: 1.25;
    stroke-dasharray: 3 3;
    opacity: 0.9;
    pointer-events: none;
}

.gantt-view-container .gantt-today-label {
    fill: var(--gantt-today-soft);
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.gantt-view-container .gantt-container .popup-wrapper {
    background: color-mix(in srgb, var(--modal-bg) 88%, #0f1726 12%);
    border: 1px solid color-mix(in srgb, var(--modal-text) 16%, transparent);
    border-radius: 8px;
    color: color-mix(in srgb, var(--modal-text) 84%, transparent);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.gantt-view-container .gantt-container .popup-wrapper .title {
    border-bottom-color: color-mix(in srgb, var(--primary) 75%, #ffffff 25%);
    color: var(--modal-text);
    font-weight: 600;
}

.gantt-view-container .gantt-container .popup-wrapper .subtitle {
    color: color-mix(in srgb, var(--modal-text) 80%, transparent);
}

.gantt-view-container .gantt-container .popup-wrapper .pointer {
    border-top-color: color-mix(in srgb, var(--modal-bg) 88%, #0f1726 12%);
}

.gantt-view-container::-webkit-scrollbar {
    height: 8px;
    width: 7px;
}

.gantt-view-container::-webkit-scrollbar-track {
    background: var(--content-bg);
    border-radius: 999px;
}

.gantt-view-container::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
}

.gantt-resize-handle {
    position: absolute;
    z-index: 5;
}

.gantt-resize-handle[data-resize-direction="top"],
.gantt-resize-handle[data-resize-direction="bottom"] {
    left: 12px;
    right: 12px;
    height: 8px;
}

.gantt-resize-handle[data-resize-direction="top"] {
    top: -4px;
    cursor: ns-resize;
}

.gantt-resize-handle[data-resize-direction="bottom"] {
    bottom: -4px;
    cursor: ns-resize;
}

.gantt-resize-handle[data-resize-direction="left"],
.gantt-resize-handle[data-resize-direction="right"] {
    top: 12px;
    bottom: 12px;
    width: 8px;
}

.gantt-resize-handle[data-resize-direction="left"] {
    left: -4px;
    cursor: ew-resize;
}

.gantt-resize-handle[data-resize-direction="right"] {
    right: -4px;
    cursor: ew-resize;
}

.gantt-resize-handle[data-resize-direction="top-left"],
.gantt-resize-handle[data-resize-direction="top-right"],
.gantt-resize-handle[data-resize-direction="bottom-left"],
.gantt-resize-handle[data-resize-direction="bottom-right"] {
    width: 14px;
    height: 14px;
}

.gantt-resize-handle[data-resize-direction="top-left"] {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.gantt-resize-handle[data-resize-direction="top-right"] {
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.gantt-resize-handle[data-resize-direction="bottom-left"] {
    bottom: -6px;
    left: -6px;
    cursor: nesw-resize;
}

.gantt-resize-handle[data-resize-direction="bottom-right"] {
    bottom: -6px;
    right: -6px;
    cursor: nwse-resize;
}

.gantt-view-empty {
    margin: 0;
    color: var(--modal-muted);
    font-size: 13px;
}

.gantt-view-container .gantt .gantt-task-completed .bar {
    opacity: 1;
    fill: var(--gantt-completed);
    stroke: var(--gantt-completed-dark);
}

.gantt-view-container .gantt .gantt-task-completed .bar-progress {
    fill: var(--gantt-completed-dark);
}

.gantt-view-container .gantt .gantt-task-overdue .bar {
    fill: var(--gantt-overdue);
    stroke: var(--gantt-overdue-dark);
}

.gantt-view-container .gantt .gantt-task-overdue .bar-progress {
    fill: var(--gantt-overdue-dark);
}

.gantt-view-container .gantt .gantt-task-overdue .bar-label.bar-label-outside {
    fill: var(--gantt-overdue-soft);
}

/* ---------- Epic Gantt: 3-level hierarchy (Board → Task → Subtask) ---------- */

/* Level 0: Board header row */
.gantt-view-container .gantt .bar-wrapper.gantt-board-header .bar {
    fill: color-mix(in srgb, var(--primary) 32%, var(--modal-bg) 68%);
    stroke: color-mix(in srgb, var(--primary) 60%, var(--modal-text) 40%);
    stroke-width: 1.2;
    rx: 4;
    ry: 4;
}

.gantt-view-container .gantt .bar-wrapper.gantt-board-header .bar-progress {
    fill: color-mix(in srgb, var(--primary) 55%, var(--modal-bg) 45%);
}

.gantt-view-container .gantt .bar-wrapper.gantt-board-header .bar-label,
.gantt-view-container .gantt .bar-wrapper.gantt-board-header .bar-label.bar-label-outside {
    fill: var(--primary-dark);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.2px;
}

.gantt-view-container .gantt .bar-wrapper.gantt-board-header {
    cursor: pointer;
}

.gantt-view-container .gantt .bar-wrapper.gantt-board-header:hover .bar {
    fill: color-mix(in srgb, var(--primary) 42%, var(--modal-bg) 58%);
}

/* Level 1: Task row (inside epic) */
.gantt-view-container .gantt .bar-wrapper.gantt-epic-task .bar-label.bar-label-outside {
    font-weight: 700;
}

.gantt-view-container .gantt .bar-wrapper[data-has-subtasks="1"] {
    cursor: pointer;
}

/* Level 2: Subtask row (inside epic) */
.gantt-view-container .gantt .bar-wrapper.gantt-epic-subtask .bar {
    fill: color-mix(in srgb, var(--gantt-pending) 68%, var(--modal-bg) 32%);
    stroke: color-mix(in srgb, var(--gantt-pending-dark) 60%, var(--modal-bg) 40%);
    stroke-dasharray: 4 2;
    opacity: 0.85;
}

.gantt-view-container .gantt .bar-wrapper.gantt-epic-subtask .bar-progress {
    fill: color-mix(in srgb, var(--gantt-pending-dark) 70%, var(--modal-bg) 30%);
}

.gantt-view-container .gantt .bar-wrapper.gantt-epic-subtask .bar-label,
.gantt-view-container .gantt .bar-wrapper.gantt-epic-subtask .bar-label.bar-label-outside {
    fill: color-mix(in srgb, var(--modal-text) 76%, transparent);
    font-style: italic;
    font-weight: 600;
    font-size: 11px;
}

/* Completed states for epic hierarchy */
.gantt-view-container .gantt .bar-wrapper.gantt-board-header.gantt-task-completed .bar {
    fill: color-mix(in srgb, var(--gantt-completed) 40%, var(--modal-bg) 60%);
    stroke: color-mix(in srgb, var(--gantt-completed-dark) 60%, var(--modal-text) 40%);
}

.gantt-view-container .gantt .bar-wrapper.gantt-board-header.gantt-task-completed .bar-progress {
    fill: color-mix(in srgb, var(--gantt-completed) 60%, var(--modal-bg) 40%);
}

.gantt-view-container .gantt .bar-wrapper.gantt-epic-subtask.gantt-task-completed .bar {
    fill: var(--gantt-completed);
    stroke: var(--gantt-completed-dark);
    stroke-dasharray: 4 2;
    opacity: 0.85;
}

/* Overdue states for epic hierarchy */
.gantt-view-container .gantt .bar-wrapper.gantt-epic-subtask.gantt-task-overdue .bar {
    fill: var(--gantt-overdue);
    stroke: var(--gantt-overdue-dark);
    stroke-dasharray: 4 2;
}

/* Alternating row tint for board groups in epic mode */
.gantt-view-container .gantt .bar-wrapper[data-gantt-level="0"] ~ .bar-wrapper[data-gantt-level="0"] .bar {
    /* second board group gets a subtly different tint — handled via custom_class */
}

/* Collapsed board indicator: show a small collapse icon */
.gantt-view-container .gantt .bar-wrapper[data-collapsed="1"] .bar {
    stroke-dasharray: 6 3;
}

.share-board-subtitle {
    margin: 0 0 14px;
    color: var(--modal-muted);
    font-size: 13px;
}

.modal-char-counter {
    margin: -4px 2px 0;
    text-align: right;
    font-size: 12px;
    color: var(--modal-muted);
}

.share-board-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.rename-board-row {
    grid-template-columns: 1fr auto;
}

.public-view-row {
    grid-template-columns: minmax(220px, 1fr) auto;
}

.public-view-columns-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 2px;
}

.public-view-column-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--modal-text);
    font-size: 13px;
}

.public-view-column-item.is-hidden {
    display: none;
}

#board-git-repo-list.public-view-columns-list {
    max-height: none;
    overflow: visible;
}

#board-git-repo-list .board-git-table-row.public-view-column-item:not(.is-hidden) {
    display: grid;
}

#board-git-repo-list .board-git-table-row.public-view-column-item.is-hidden {
    display: none;
}

.board-git-linked-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.board-git-modal-content {
    width: min(96vw, 1080px);
    max-width: 1080px;
    max-height: min(92vh, calc(100dvh - 32px));
    overflow: auto;
}

.board-git-selected-preview-wrap {
    margin-bottom: 14px;
}

.board-git-selected-preview-wrap.is-hidden {
    display: none;
}

.board-git-selected-preview-title {
    margin-bottom: 8px;
}

.board-git-linked-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--menu-border);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--modal-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.board-git-linked-badge i {
    color: var(--primary);
}

.board-git-linked-badge.is-private {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--menu-border) 55%);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.board-git-linked-badge.is-private i {
    color: var(--danger);
}

.board-git-linked-badge.is-public {
    border-color: color-mix(in srgb, var(--success) 45%, var(--menu-border) 55%);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.board-git-linked-badge.is-public i {
    color: var(--success);
}

.board-git-linked-badge > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-git-linked-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--modal-muted);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
    margin-left: -2px;
    transition: background 0.15s, color 0.15s;
}

.board-git-linked-remove:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 18%, transparent);
    color: var(--danger, #ef4444);
}

.share-board-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.board-git-tip {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--modal-muted);
    font-size: 12px;
    line-height: 1.5;
}

.board-git-tip i {
    color: var(--primary);
    margin-right: 4px;
}

.board-git-tip strong {
    color: var(--modal-text);
    font-weight: 700;
}

.board-git-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.board-git-search-input {
    flex: 1;
    min-width: 0;
}

.board-git-refresh-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--modal-text);
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.board-git-refresh-button:hover {
    background: color-mix(in srgb, var(--input-bg) 80%, var(--accent));
    border-color: var(--accent);
}

.board-git-refresh-button:disabled {
    opacity: .5;
    cursor: default;
}

.board-git-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.board-git-table-head,
.board-git-table-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(44vh, 380px);
    overflow: auto;
    padding-right: 4px;
}

.board-git-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 100px 120px minmax(240px, 1.5fr);
    gap: 10px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--input-border) 52%, transparent);
    border-radius: 10px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--input-bg) 90%, transparent);
}

.board-git-table-row.is-head {
    border-style: dashed;
    background: color-mix(in srgb, var(--content-bg) 88%, transparent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--modal-muted);
}

.board-git-repo-cell {
    min-width: 0;
}

.board-git-repo-main {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
    color: var(--modal-text);
}

.board-git-repo-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.board-git-repo-main > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-git-repo-branches {
    display: flex;
    align-items: center;
    gap: 8px;
}

.board-git-branch-picker {
    position: relative;
    width: 100%;
}

.board-git-branch-picker-toggle {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 7px 34px 7px 10px;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
    position: relative;
}

.board-git-branch-picker-toggle::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--modal-muted);
}

.board-git-branch-picker-toggle.is-loading {
    opacity: .86;
}

.board-git-branch-picker-toggle.is-loading::after {
    content: "\f110";
    animation: board-git-branch-spin .9s linear infinite;
}

@keyframes board-git-branch-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.board-git-branch-picker-dropdown {
    position: static;
    margin-top: 6px;
    width: 100%;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 10px;
    box-shadow: var(--modal-shadow);
    padding: 8px;
}

.board-git-branch-picker-dropdown.is-hidden {
    display: none;
}

.board-git-branch-picker-list {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.board-git-table-body .board-git-table-row {
    align-items: start;
}

.board-git-branch-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--modal-text);
    font-size: 12px;
}

.board-git-branch-option input {
    width: 14px;
    height: 14px;
}

.board-git-repo-add-button {
    border: 1px solid color-mix(in srgb, var(--input-border) 75%, transparent);
    background: var(--input-bg);
    color: var(--modal-text);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-width: 94px;
}

.board-git-repo-add-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    color: var(--primary-dark);
}

.board-git-repo-add-button.is-selected {
    border-color: color-mix(in srgb, #22c55e 52%, var(--input-border));
    background: color-mix(in srgb, #22c55e 16%, var(--input-bg));
    color: #16a34a;
}

.board-git-repo-add-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.board-git-table-row.is-selected {
    border-color: color-mix(in srgb, #22c55e 44%, var(--input-border));
    background: color-mix(in srgb, #22c55e 8%, var(--input-bg));
}

.board-git-action-button {
    height: 38px;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}

.board-git-action-button.is-primary {
    background: var(--primary);
    color: #fff;
}

.board-git-action-button.is-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

.board-git-action-button.is-secondary {
    background: var(--input-bg);
    color: var(--modal-text);
    border-color: var(--input-border);
}

.board-git-action-button.is-secondary:hover {
    background: color-mix(in srgb, var(--content-bg) 72%, var(--input-bg) 28%);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--input-border));
    color: var(--primary-dark);
}

@media (max-width: 980px) {
    .board-git-modal-content {
        width: min(96vw, 900px);
    }

    .board-git-table-row {
        grid-template-columns: minmax(180px, 1.7fr) 88px 100px minmax(220px, 1.4fr);
        gap: 8px;
    }
}

@media (max-width: 760px) {
    .board-git-modal-content {
        width: min(96vw, 96vw);
        max-height: min(94vh, calc(100dvh - 20px));
        padding: 14px;
    }

    .board-git-table-row,
    .board-git-table-row.is-head {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .board-git-table-row.is-head {
        display: none;
    }

    .board-git-repo-branches {
        flex-direction: column;
        align-items: stretch;
    }

    .board-git-repo-add-button {
        width: 100%;
    }
}

.public-view-result.is-hidden {
    display: none;
}

.public-view-link-row {
    grid-template-columns: 1fr auto;
    margin-bottom: 0;
}

.public-view-links-list {
    max-height: 230px;
}

.public-view-link-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.public-view-link-url-anchor {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-view-link-url-anchor:hover {
    text-decoration: underline;
}

.public-view-link-meta {
    font-size: 11px;
    color: var(--modal-muted);
}

.public-view-link-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-view-link-status-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.public-view-link-expired-remove-button {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    background: transparent;
    color: var(--modal-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.public-view-link-expired-remove-button:hover {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--input-border));
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.public-view-link-copy-button {
    height: 34px;
    padding: 0 10px;
}

.share-input,
.share-select,
.share-item-permission-select {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    height: 38px;
    padding: 0 12px;
}

.share-select,
.share-item-permission-select {
    appearance: none;
    padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--modal-muted) 50%), linear-gradient(135deg, var(--modal-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.share-input:focus,
.share-select:focus,
.share-item-permission-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 111, 149, 0.2);
}

.share-invite-button {
    border: 1px solid transparent;
    border-radius: 10px;
    height: 38px;
    padding: 0 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: background .14s, box-shadow .14s;
}

.share-invite-button:hover {
    background: var(--primary-dark);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

.share-board-list-title {
    margin: 2px 0 8px;
    font-size: 12px;
    color: var(--modal-muted);
    letter-spacing: 0.03em;
}

.share-advanced-permissions,
.share-item-advanced-permissions {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--input-bg) 82%, transparent);
    padding: 10px 12px;
    margin: 0 0 12px;
}

.share-item-advanced-permissions {
    grid-column: 1 / -1;
    margin: 0;
}

.share-advanced-permissions.is-hidden,
.share-item-advanced-permissions.is-hidden {
    display: none;
}

.share-advanced-title {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--modal-muted);
    letter-spacing: 0.03em;
}

.share-advanced-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.share-advanced-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--modal-text);
    font-size: 12px;
}

.share-advanced-item input {
    accent-color: var(--primary);
}

.share-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 2px;
}

.share-board-modal-content,
.share-list {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--content-bg);
}

.share-list::-webkit-scrollbar {
    height: 8px;
    width: 7px;
}

.share-list::-webkit-scrollbar-track {
    background: var(--content-bg);
    border-radius: 999px;
}

.share-list::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
}

.share-item {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    background: color-mix(in srgb, var(--input-bg) 80%, transparent);
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}

.share-item-email {
    font-size: 13px;
    font-weight: 500;
    color: var(--modal-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-advanced-toggle-button {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 9px;
    min-width: 62px;
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.share-advanced-toggle-button:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.share-advanced-toggle-button.is-disabled,
.share-advanced-toggle-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.share-item-permission-select {
    min-width: 96px;
    height: 34px;
}

.share-item-permission-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 34px;
    border: 1px solid var(--input-border);
    border-radius: 9px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--input-text);
    background: color-mix(in srgb, var(--input-bg) 82%, transparent);
}

.share-advanced-item.is-readonly {
    opacity: 0.88;
}

.share-advanced-item.is-readonly input {
    cursor: not-allowed;
}

.share-item-remove-button {
    margin: 0;
    min-height: 34px;
    border-radius: 9px;
    padding: 6px 10px;
}

.share-item-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    min-height: 28px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.share-item-status.is-pending {
    color: #b86d00;
    background: #fff3dd;
    border-color: #f5d9a6;
}

.share-item-status.is-active {
    color: #1d6b43;
    background: #e7f8ee;
    border-color: #b5e5cb;
}

.share-item-status.is-expired {
    color: var(--modal-muted);
    background: color-mix(in srgb, var(--primary-soft) 45%, transparent);
    border-color: var(--input-border);
}

.share-item-status.is-revoked {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--input-border));
}

.public-board-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.public-board-shell--scrollable {
    overflow-y: auto;
    padding-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--input-border) 65%, transparent) transparent;
}
.public-board-shell--scrollable::-webkit-scrollbar {
    width: 5px;
}
.public-board-shell--scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.public-board-shell--scrollable::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--input-border) 65%, transparent);
    border-radius: 999px;
}

/* ── Public epic view — inline task list ── */
.pub-tasks-toggle-btn {
    background: none;
    border: 1px solid var(--input-border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, color .15s, border-color .15s;
}
.pub-tasks-toggle-btn:hover {
    background: var(--primary-soft, rgba(179, 71, 217, .12));
    color: var(--primary, #b347d9);
    border-color: var(--primary, #b347d9);
}
.pub-tasks-toggle-btn i {
    font-size: 10px;
    transition: transform .2s;
}

.pub-tasks-panel {
    border-top: 1px solid color-mix(in srgb, var(--input-border) 50%, transparent);
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--input-border) 65%, transparent) transparent;
}
.pub-tasks-panel::-webkit-scrollbar {
    width: 5px;
}
.pub-tasks-panel::-webkit-scrollbar-track {
    background: transparent;
}
.pub-tasks-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--input-border) 65%, transparent);
    border-radius: 999px;
}
.pub-tasks-panel.is-hidden {
    display: none;
}

.pub-tasks-list {
    display: flex;
    flex-direction: column;
}

.pub-task-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 18px;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid color-mix(in srgb, var(--input-border) 30%, transparent);
}
.pub-task-row:last-child {
    border-bottom: none;
}
.pub-task-row.is-done {
    opacity: .55;
}
.pub-task-row.is-done .pub-task-title {
    text-decoration: line-through;
}

.pub-task-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pub-task-status {
    flex-shrink: 0;
    font-size: 14px;
    width: 18px;
    text-align: center;
}
.pub-task-row:not(.is-done) .pub-task-status {
    color: var(--text-muted);
}
.pub-task-row.is-done .pub-task-status {
    color: var(--success, #22c55e);
}

.pub-task-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1.4;
}

.pub-task-metas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-left: 26px;
}

.pub-task-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--input-border) 25%, transparent);
    white-space: nowrap;
}

.pub-task-priority {
    background: color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent);
    color: var(--warning, #f59e0b);
    font-weight: 600;
}
.pub-task-size {
    font-weight: 700;
    text-transform: uppercase;
}

.public-board-header {
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.public-board-header h2 {
    margin: 0;
    color: var(--board-title);
}

.public-board-header p {
    margin: 6px 0 0;
    color: var(--board-subtitle);
    font-size: 13px;
}

.public-epic-progress-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--primary-soft, rgba(179, 71, 217, 0.12));
    color: var(--primary, #b347d9);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.public-epic-progress-link:hover {
    background: var(--primary, #b347d9);
    color: #fff;
}

.public-epic-progress-link i {
    font-size: 15px;
}

.public-epic-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.public-epic-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.public-epic-header-left h2 {
    margin: 0;
}

.public-epic-back-btn {
    white-space: nowrap;
}

.public-view-epic-progress-option {
    margin-top: 8px;
    padding: 6px 0;
}

.public-board-columns {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 2px;
}

.public-task-card {
    cursor: pointer;
}

.public-task-modal-task-title {
    margin: 2px 0 10px;
    color: var(--modal-text);
}

.public-task-modal-block {
    margin-top: 10px;
}

.public-task-modal-description {
    margin: 0;
    color: var(--modal-text);
    white-space: pre-wrap;
}

.public-task-modal-subtasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.public-subtask-item {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    padding: 8px 10px;
}

.public-subtask-item.is-completed {
    opacity: 0.78;
}

.public-subtask-item.is-blocked {
    border-color: rgba(255, 82, 107, 0.45);
    background: rgba(255, 82, 107, 0.12);
}

.public-subtask-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--modal-text);
}

.public-subtask-description {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--modal-muted);
    white-space: pre-wrap;
}

.logs-page {
    padding: 24px;
}

.logs-header {
    margin-bottom: 16px;
}

.logs-header-actions {
    gap: 8px;
}

.logs-filter-form {
    margin-bottom: 12px;
}

.logs-filter-label {
    color: var(--board-subtitle);
}

.logs-panel {
    width: 100%;
    max-width: none;
    min-height: 60vh;
    max-height: calc(100vh - 220px);
    overflow: auto;
}

.logs-output {
    margin: 0;
    min-width: max-content;
    white-space: pre;
    font-size: 12px;
    line-height: 1.45;
    color: var(--body-text);
}

@media (max-width: 760px) {
    .share-board-modal-content {
        padding: 14px;
    }

    .share-board-row {
        grid-template-columns: 1fr;
    }

    .share-invite-button {
        width: 100%;
    }

    .share-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .share-item-controls {
        width: 100%;
    }

    .share-item-permission-select,
    .share-item-remove-button {
        width: 100%;
    }

    .share-item-status,
    .public-view-link-status-actions {
        justify-self: start;
    }
}

.task-edit-form label {
    color: var(--modal-muted);
}

body.auth-theme-moon {
    --app-bg: #0b1020;
    --topbar-bg: #0f1427;
    --topbar-border: #24304f;
    --topbar-text: #f4f8ff;
    --sidebar-bg: #111a30;
    --sidebar-border: #2a3657;
    --board-title: #f7f9ff;
    --board-subtitle: #c1cbe4;
    --input-bg: #1e2947;
    --input-border: #3a4f7f;
    --input-text: #f5f7ff;
    --body-text: #ecf1ff;
    --primary: #5c7cff;
    --primary-dark: #4765df;
    --primary-soft: rgba(94, 123, 255, 0.24);
    --border: rgba(127, 150, 209, 0.38);
}

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 30% 70%;
    background:
        radial-gradient(circle at 12% 16%, rgba(95, 128, 255, 0.14), transparent 35%),
        radial-gradient(circle at 86% 20%, rgba(129, 86, 255, 0.1), transparent 32%),
        linear-gradient(135deg, #090e1c 0%, #101c39 42%, #131631 100%);
}

.auth-brand-panel {
    background: linear-gradient(180deg, rgba(15, 23, 44, 0.88), rgba(14, 21, 40, 0.72));
    border-right: 1px solid rgba(108, 130, 187, 0.26);
    box-shadow: inset -1px 0 0 rgba(245, 230, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px;
}

.auth-brand-content {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 26px;
    border: none;
    background: transparent;
    overflow: hidden;
}

.auth-brand-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.auth-brand-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: none;
}

.auth-brand-title {
    font-family: "Sora", "Segoe UI", Arial, sans-serif;
    color: var(--board-title);
    letter-spacing: 1.5px;
    font-weight: 800;
    font-size: 50px;
    line-height: 1;
}

.auth-brand-chemia-logo {
    width: min(192px, 45%);
    height: auto;
    object-fit: contain;
    opacity: 0.94;
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
}

.auth-form-panel {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

.auth-locale-toggle-form {
    position: absolute;
    top: 24px;
    right: 24px;
    margin: 0;
}

.auth-locale-toggle-form .locale-toggle-button {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(155, 177, 230, 0.28);
    background: #1b2a4b;
    backdrop-filter: none;
    box-shadow: none;
}

.auth-locale-toggle-form .locale-toggle-button:hover {
    background: #243860;
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, #182949 0%, #121f38 100%);
    border: 1px solid rgba(148, 172, 228, 0.3);
    border-radius: 24px;
    padding: 34px 30px 30px;
    box-shadow: none;
    backdrop-filter: none;
}

.auth-card h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    color: var(--board-title);
    text-align: center;
}

.auth-card p {
    margin: 10px 0 26px;
    color: var(--board-subtitle);
    text-align: center;
    font-weight: 500;
}

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

.auth-form label {
    font-size: 12px;
    font-weight: 700;
    color: #d7dff4;
    letter-spacing: 0.02em;
}

.auth-input-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 2px;
}

.auth-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(180deg, #213560, #1a2b4f);
    border: 1px solid rgba(116, 146, 215, 0.42);
    color: #b9d7ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-input-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

.auth-form input {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 12px 13px 48px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--primary);
    background: #253865;
    box-shadow: 0 0 0 1px rgba(92, 124, 255, 0.24);
}

.auth-form button {
    margin-top: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, #5c7cff 0%, #4f69dc 100%);
    color: #fff;
    font-weight: 700;
    padding: 13px 14px;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

.auth-form button:hover {
    filter: brightness(1.02);
    transform: none;
    box-shadow: none;
}

.auth-resend-form {
    margin-top: 10px;
}

.auth-secondary-button {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    background: transparent;
    color: var(--board-subtitle);
    font-weight: 700;
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.auth-secondary-button:hover {
    border-color: var(--primary);
    color: var(--board-title);
    background: rgba(92, 124, 255, 0.08);
}

.auth-social-divider {
    margin: 12px 0 10px;
    text-align: center;
    color: var(--board-subtitle);
    font-size: 12px;
    font-weight: 600;
}

.auth-google-button {
    width: 100%;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.auth-google-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.auth-github-button {
    width: 100%;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.auth-github-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.auth-links {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.auth-links.single-link {
    justify-content: center;
}

.auth-links a {
    color: #d8e2ff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.auth-links a:hover {
    text-decoration: underline;
    color: #ffffff;
}

.verify-timer {
    margin: 0 0 14px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(92, 124, 255, 0.14);
    border: 1px solid rgba(136, 158, 220, 0.42);
    color: var(--board-title);
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 980px) {
    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        border-right: none;
        border-bottom: 1px solid rgba(108, 130, 187, 0.26);
        min-height: 34vh;
        padding: 26px;
    }

    .auth-brand-content {
        min-height: 240px;
    }

    .auth-brand-title {
        font-size: 38px;
    }

    .auth-card h1 {
        font-size: 34px;
    }

    .auth-form-panel {
        padding: 28px 18px;
    }

    .auth-card {
        padding: 30px 22px 24px;
    }

    .auth-locale-toggle-form {
        top: 14px;
        right: 14px;
    }
}

@media (max-width: 1024px) {
    .left-sidebar {
        width: 220px;
    }

    .app-shell.sidebar-collapsed .left-sidebar,
    html.kanbe-sidebar-collapsed .app-shell .left-sidebar {
        width: 64px;
    }

    .board-header {
        flex-direction: column;
        align-items: stretch;
    }

    .create-column-form {
        width: 100%;
    }

    .create-column-form input {
        min-width: 0;
        flex: 1;
    }

    .task-filter-panel {
        left: auto;
        right: 0;
        width: min(460px, calc(100vw - 30px));
    }

    .task-filter-grid {
        grid-template-columns: 1fr;
    }

    .board-column {
        flex: 0 0 270px;
        width: 270px;
    }

    .task-inline-fields {
        grid-template-columns: 1fr;
    }

    .task-linkage-track {
        gap: 4px;
    }
}

@media (max-width: 760px) {
    .board-column {
        flex: 0 0 min(88vw, 320px);
        width: min(88vw, 320px);
    }

    .task-title::before {
        width: 72px;
    }
}

/* =============================================
   TELA DE PERFIL
   ============================================= */

.profile-shell {
    min-height: 100vh;
}

.profile-page {
    display: flex;
    justify-content: center;
    padding: 32px 20px 60px;
    background: var(--app-bg);
    min-height: calc(100vh - 54px);
}

.profile-container {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cabeçalho do perfil */
.profile-header-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--modal-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    font-family: "Sora", "Segoe UI", Arial, sans-serif;
    flex-shrink: 0;
    user-select: none;
}

.profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.profile-header-group {
    margin-left: 8px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-width: 140px;
}

.profile-header-group-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.profile-header-group-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--modal-text);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
}

.profile-subscription-period {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}

.profile-username {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--modal-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-email {
    margin: 0;
    font-size: 14px;
    color: var(--modal-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-since {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* Cards de seção */
.profile-section-card {
    background: var(--modal-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.profile-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--modal-text);
}

.profile-section-header svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.profile-section-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.profile-section-desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--modal-muted);
}

.profile-git-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.profile-git-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    background: color-mix(in srgb, var(--modal-bg) 92%, var(--primary-soft) 8%);
}

.profile-git-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.profile-git-card-head h3 {
    margin: 0;
    font-size: 15px;
    color: var(--modal-text);
}

.profile-git-chip {
    font-size: 11px;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    padding: 2px 8px;
    color: var(--modal-muted);
}

.profile-git-chip.is-connected {
    border-color: color-mix(in srgb, var(--success) 55%, var(--input-border) 45%);
    color: var(--success);
}

.profile-git-webhook-box {
    margin-top: 10px;
}

.profile-git-webhook-box label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--modal-text);
    margin-bottom: 4px;
}

.profile-git-webhook-box input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    padding: 8px 10px;
    font-size: 12px;
}

.profile-git-connect-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.profile-git-installation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.profile-git-installation-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--input-border) 78%, transparent);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--modal-text);
    background: color-mix(in srgb, var(--input-bg) 88%, transparent);
}

.profile-git-installation-chip.is-muted {
    color: var(--modal-muted);
}

/* Formulários de perfil */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--modal-text);
}

.profile-form-row input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-form-row input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(111, 143, 179, 0.2);
}

.profile-field-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.profile-field-hint code {
    background: var(--primary-soft);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-main);
}

.profile-save-button {
    align-self: flex-start;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 20px;
    cursor: pointer;
    transition: background 0.15s;
}

.profile-save-button:hover {
    background: var(--primary-dark);
}

.profile-board-defaults-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-board-defaults-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 12%, var(--input-bg) 88%);
    color: var(--modal-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.profile-board-defaults-modal {
    max-width: 520px;
}

.profile-board-defaults-modal h3 {
    color: var(--modal-text);
}

.profile-board-defaults-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.profile-board-defaults-toolbar strong {
    color: var(--modal-text);
    font-size: 13px;
}

.profile-board-defaults-toolbar p {
    margin: 0;
    color: var(--modal-muted);
    font-size: 12px;
    line-height: 1.4;
}

.profile-board-defaults-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 14%, var(--input-bg) 86%);
    color: color-mix(in srgb, var(--primary-dark) 72%, var(--modal-text) 28%);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.profile-board-defaults-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(52vh, 440px);
    overflow-y: auto;
    padding: 2px 4px 2px 0;
}

.profile-board-defaults-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: transparent;
    transition: background 0.12s;
}

.profile-board-defaults-row:hover {
    background: color-mix(in srgb, var(--input-bg) 80%, var(--primary) 6%);
}

.profile-board-defaults-row-ghost {
    opacity: 0.35;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border-radius: 8px;
}

.profile-board-defaults-row-chosen {
    background: color-mix(in srgb, var(--primary) 10%, var(--input-bg) 90%);
}

.profile-board-defaults-row-dragging {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    border-radius: 8px;
}

.profile-board-defaults-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--modal-muted);
    cursor: grab;
    flex-shrink: 0;
    padding: 0;
    opacity: 0.45;
    transition: opacity 0.12s, color 0.12s;
}

.profile-board-defaults-row:hover .profile-board-defaults-drag {
    opacity: 0.8;
}

.profile-board-defaults-drag:active {
    cursor: grabbing;
    opacity: 1;
}

.profile-board-defaults-drag svg {
    width: 14px;
    height: 14px;
}

.profile-board-defaults-position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, var(--input-bg) 88%);
    color: var(--modal-muted);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.profile-board-defaults-input {
    flex: 1;
    min-width: 0;
    background: var(--input-bg);
    border: 1px solid color-mix(in srgb, var(--input-border) 60%, transparent);
    color: var(--input-text);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-board-defaults-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(111, 143, 179, 0.15);
}

.profile-board-defaults-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--modal-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.profile-board-defaults-row:hover .profile-board-defaults-remove {
    opacity: 0.6;
}

.profile-board-defaults-remove:hover:not(:disabled) {
    opacity: 1;
    color: var(--danger);
    background: rgba(222, 84, 114, 0.1);
}

.profile-board-defaults-remove:disabled {
    opacity: 0 !important;
    cursor: default;
}

.profile-board-defaults-remove svg {
    width: 14px;
    height: 14px;
}

.profile-board-defaults-add {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 1px dashed color-mix(in srgb, var(--input-border) 60%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--modal-muted);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.profile-board-defaults-add:hover {
    color: var(--primary-dark);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--input-border) 60%);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.profile-board-defaults-add svg {
    width: 14px;
    height: 14px;
}

.profile-board-defaults-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--modal-muted);
    font-size: 13px;
}

/* Zona de perigo */
.profile-danger-zone {
    border-color: rgba(222, 84, 114, 0.4);
}

.profile-danger-zone .profile-section-header {
    color: var(--danger);
}

.profile-danger-button {
    border: 1px solid rgba(222, 84, 114, 0.5);
    border-radius: 10px;
    background: transparent;
    color: var(--danger);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.profile-danger-button:hover {
    background: rgba(222, 84, 114, 0.1);
    border-color: var(--danger);
}

/* Modal de exclusão de conta */
.profile-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.profile-modal-backdrop.is-hidden {
    display: none;
}

.profile-modal {
    background: var(--modal-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--modal-shadow);
}

.profile-modal h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--danger);
}

.profile-modal p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--modal-text);
    line-height: 1.5;
}

.profile-modal strong {
    color: var(--danger);
}

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

.profile-cancel-button {
    border: none;
    border-radius: 10px;
    background: var(--cancel-bg);
    color: var(--cancel-text);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s;
}

.profile-cancel-button:hover {
    background: var(--cancel-hover);
}

.profile-confirm-delete-button {
    border: none;
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s;
}

.profile-confirm-delete-button:hover {
    background: #c4405f;
}

/* Timer do código de verificação no modal de perfil */
.profile-code-timer {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    min-height: 18px;
}

/* Item ativo no menu hamburguer */
.hamburger-menu .active-menu-item {
    font-weight: 600;
    background: var(--menu-item-active-bg);
    border-color: var(--menu-item-active-border);
    color: var(--menu-item-active-text);
    text-decoration: underline;
    text-decoration-thickness: 1.4px;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
}

@media (max-width: 600px) {
    .profile-header-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-header-info {
        align-items: center;
    }

    .profile-header-group {
        margin-left: 0;
        align-items: center;
    }

    .profile-save-button {
        align-self: stretch;
        text-align: center;
    }

    .profile-board-defaults-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-board-defaults-row-header {
        flex-wrap: wrap;
    }

    .profile-board-defaults-actions {
        justify-content: flex-end;
        margin-left: 0;
    }

    .profile-modal-actions {
        flex-direction: column-reverse;
    }
}

/* ==================== PLANS PAGE ==================== */

.plans-page {
    padding: 32px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.plans-header {
    text-align: center;
    margin-bottom: 40px;
}

.plans-title {
    font-family: "Sora", "Segoe UI", Arial, sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--board-title);
    margin: 0 0 8px;
}

.plans-subtitle {
    font-size: 15px;
    color: var(--board-subtitle);
    margin: 0;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.plan-card {
    position: relative;
    background: var(--modal-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.plan-card--current {
    border-color: var(--primary);
    box-shadow: var(--shadow-soft), 0 0 0 2px var(--primary);
}

.plan-current-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.plan-card-header {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.plan-name {
    font-family: "Sora", "Segoe UI", Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--board-title);
    margin: 0 0 8px;
}

.plan-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

.plan-card--free .plan-price {
    color: var(--board-subtitle);
}

.plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: var(--body-text);
    line-height: 1.4;
}

.plan-feature--disabled {
    color: var(--modal-muted);
}

.plan-feature-icon {
    flex-shrink: 0;
    width: 18px;
    font-weight: 700;
    font-size: 13px;
    color: var(--primary);
}

.plan-feature--disabled .plan-feature-icon {
    color: var(--modal-muted);
}

.plan-cta {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plan-cta form {
    width: 100%;
    margin: 0;
}

.plan-button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, transform 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.plan-button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.plan-button-icon {
    font-size: 14px;
    line-height: 1;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.plan-button-icon--pix {
    display: inline-block;
}

.plan-button--current {
    background: var(--primary-soft);
    color: var(--primary);
    cursor: default;
}

.plan-button--coming-soon {
    background: var(--toggle-bg);
    color: var(--modal-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.plan-button--primary {
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-color: var(--primary);
}

.plan-button--primary:hover {
    opacity: 0.95;
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}

.plan-button--secondary {
    background: var(--input-bg);
    color: var(--text-primary);
    text-decoration: none;
    border: 1px solid var(--input-border);
}

.plan-button--secondary:hover {
    background: var(--modal-hover);
    border-color: var(--primary);
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 860px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .plans-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}

.tx-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tx-kpi {
    border: 1px solid var(--input-border);
}

.tx-kpi strong,
.tx-kpi small {
    color: var(--text-primary);
}

.tx-kpi-primary {
    background: var(--primary-soft);
}

.tx-kpi-success {
    background: var(--success-bg, var(--modal-hover));
}

.tx-kpi-warning {
    background: var(--warning-bg, var(--modal-hover));
}

.tx-kpi-info {
    background: var(--toggle-bg);
}

.tx-kpi-muted {
    background: var(--modal-bg);
}

.tx-table td,
.tx-table th {
    vertical-align: middle;
}


@media (max-width: 600px) {
    .plans-page {
        padding: 20px 12px;
    }

    .plans-title {
        font-size: 22px;
    }
}

/* ── Input validation error ── */
.input-error {
    border-color: var(--danger-color, #e74c3c) !important;
    animation: input-shake 0.35s ease;
}
.input-error::placeholder {
    color: var(--danger-color, #e74c3c);
    opacity: 0.85;
}
@keyframes input-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* ══════════════════════════════════════ */
/*  TASK CHAT SIDEBAR                    */
/* ══════════════════════════════════════ */

/* ── Modal wrapper with sidebar ── */
.task-modal-content.has-chat-sidebar {
    display: flex;
    max-width: min(94vw, 1400px);
    transition: max-width 0.3s ease;
}
.task-modal-content.has-chat-sidebar .task-modal-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 85vh;
    padding: 18px 22px;
}

/* Wrap subtask row inside narrowed main area */
.task-modal-content.has-chat-sidebar .subtask-row-main {
    flex-wrap: wrap;
}
.task-modal-content.has-chat-sidebar .subtask-row-main .subtask-title-input {
    flex: 1 1 100%;
    min-width: 0;
}

/* ── Toggle button ── */
.task-chat-toggle-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 6px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.task-chat-toggle-btn:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.08);
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 25%, transparent);
}
.task-chat-toggle-btn.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.task-chat-toggle-btn.has-messages:not(.is-active) {
    color: var(--primary);
    border-color: var(--primary);
}

/* ── Sidebar panel ── */
.task-chat-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    border-left: none;
    display: flex;
    flex-direction: column;
    background: var(--modal-bg);
    transition: width 0.3s ease, min-width 0.3s ease, opacity 0.25s ease, border-left 0.3s ease;
}
.task-chat-sidebar.is-open {
    width: 380px;
    min-width: 380px;
    opacity: 1;
    border-left: 1px solid var(--border);
}

/* ── Chat header ── */
.task-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.task-chat-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--modal-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.task-chat-header-title i {
    color: var(--accent-color, #3b82f6);
    font-size: 14px;
}
.task-chat-msg-count {
    font-size: 11px;
    background: var(--accent-color, #3b82f6);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* ── Messages area ── */
.task-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
.task-chat-messages::-webkit-scrollbar { width: 5px; }
.task-chat-messages::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }

/* ── Empty state ── */
.task-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 8px;
    text-align: center;
    padding: 24px;
}
.task-chat-empty i {
    font-size: 32px;
    opacity: 0.4;
}
.task-chat-empty p {
    font-size: 12px;
    max-width: 200px;
    line-height: 1.5;
}

/* ── Single message ── */
.tchat-msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
    animation: tchat-fade-in 0.25s ease;
}
@keyframes tchat-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.tchat-msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.tchat-msg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-color, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.tchat-msg.is-mine .tchat-msg-avatar {
    background: var(--accent-secondary, #10b981);
}
.tchat-msg-username {
    font-weight: 600;
    color: var(--modal-text);
}
.tchat-msg-time {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: auto;
}
.tchat-msg-actions {
    display: none;
    margin-left: 4px;
}
.tchat-msg:hover .tchat-msg-actions {
    display: flex;
}
.tchat-msg-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.tchat-msg-delete:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ── Message body ── */
.tchat-msg-body {
    background: var(--content-bg);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--modal-text);
    word-break: break-word;
    position: relative;
    border: 1px solid var(--border);
}
.tchat-msg.is-mine .tchat-msg-body {
    background: color-mix(in srgb, var(--primary) 10%, var(--content-bg));
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

/* ── Message collapse / expand ── */
.tchat-msg-body.is-collapsed {
    max-height: 80px;
    overflow: hidden;
}
.tchat-msg-body.is-collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, var(--content-bg));
    pointer-events: none;
    border-radius: 0 0 10px 10px;
}
.tchat-msg.is-mine .tchat-msg-body.is-collapsed::after {
    background: linear-gradient(transparent, color-mix(in srgb, var(--primary) 10%, var(--content-bg)));
}
.tchat-msg-expand-btn {
    display: none;
    background: none;
    border: none;
    color: var(--accent-color, #3b82f6);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 0;
    margin-top: 2px;
}
.tchat-msg-expand-btn.is-visible {
    display: inline-block;
}

/* ── Code block styling ── */
.tchat-msg-body.is-code {
    background: color-mix(in srgb, var(--modal-text) 5%, var(--content-bg));
    font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
    font-size: 12px;
    border-color: var(--border);
    position: relative;
}
.tchat-code-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}
.tchat-code-content {
    white-space: pre-wrap;
    overflow-x: auto;
}
.tchat-code-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--border);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.tchat-code-copy:hover {
    background: var(--accent-color, #3b82f6);
    color: #fff;
}

/* ── Attachments in message ── */
.tchat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.tchat-attachment-thumb {
    width: 120px;
    height: 90px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: transform 0.15s, box-shadow 0.15s;
}
.tchat-attachment-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.tchat-attachment-file {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--border) 50%, var(--content-bg));
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--modal-text);
    text-decoration: none;
    transition: background 0.15s;
    max-width: 200px;
}
.tchat-attachment-file:hover {
    background: var(--primary-soft);
}
.tchat-attachment-file i {
    font-size: 14px;
    color: var(--accent-color, #3b82f6);
    flex-shrink: 0;
}
.tchat-attachment-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tchat-attachment-file-size {
    color: var(--text-muted);
    font-size: 10px;
    flex-shrink: 0;
}

/* ── Image lightbox ── */
.tchat-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: tchat-lightbox-in 0.2s ease;
}
@keyframes tchat-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.tchat-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    cursor: default;
}
.tchat-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.tchat-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ── Composer area ── */
.task-chat-composer {
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.task-chat-composer-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
.task-chat-input-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.task-chat-input {
    width: 100%;
    min-height: 36px;
    max-height: 120px;
    resize: none;
    padding: 8px 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--input-text, var(--modal-text));
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s;
}
.task-chat-input:focus {
    border-color: var(--primary);
}
.task-chat-input::placeholder {
    color: var(--text-muted);
}

/* ── Composer toolbar ── */
.task-chat-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
}
.task-chat-tool-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.task-chat-tool-btn:hover {
    color: var(--primary);
    background: var(--primary-soft);
}
.task-chat-tool-btn.is-active {
    color: var(--primary);
    background: var(--primary-soft);
}
.task-chat-send-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.task-chat-send-btn:hover {
    background: var(--primary-dark);
}
.task-chat-send-btn:active {
    transform: scale(0.96);
}
.task-chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Attachment previews before send ── */
.task-chat-pending-files {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.task-chat-pending-file {
    display: flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--border) 50%, var(--content-bg));
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--modal-text);
    max-width: 180px;
}
.task-chat-pending-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-chat-pending-file-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    flex-shrink: 0;
}
.task-chat-pending-file-remove:hover {
    color: var(--danger);
}

/* ── Loading indicator ── */
.task-chat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: var(--text-muted);
    font-size: 12px;
    gap: 8px;
}
.task-chat-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: tchat-spin 0.6s linear infinite;
}
@keyframes tchat-spin {
    to { transform: rotate(360deg); }
}

/* ── Date separator ── */
.tchat-date-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 6px 0;
}
.tchat-date-sep::before,
.tchat-date-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .task-modal-content.has-chat-sidebar {
        flex-direction: column;
        max-width: 95vw;
    }
    .task-chat-sidebar.is-open {
        width: 100%;
        min-width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 350px;
    }
}

/* ── Paste indicator ── */
.task-chat-input.has-paste-preview {
    border-color: var(--accent-color, #3b82f6);
    background: color-mix(in srgb, var(--accent-color, #3b82f6) 5%, var(--input-bg, #0f172a));
}