/*
====================================================================
 CSS Structure Index (search for SECTION tags)
====================================================================
 1) SECTION: Variables & Resets
 2) SECTION: Layout & Containers
 3) SECTION: Headers & Breadcrumbs
 4) SECTION: Pages
    - Project Page Header
    - Board Select Header
    - Board Page Header
    - Archive Page Header
 5) SECTION: Components
    - Cards & Lists (Kanban)
    - Project/Board Cards (homepage / project page)
    - Actions Menus / Switchers
 6) SECTION: Grids (archived boards, tools)
 7) SECTION: Buttons & Utilities
 8) SECTION: Dark Mode Overrides
 9) SECTION: Responsive

 Tips:
 - Keep page-specific overrides near the bottom of that page's section.
 - Prefer component-level styles over page overrides when possible.
 - Use neutral tokens from :root variables.
====================================================================
*/

/* SECTION: Variables & Resets */
/* CSS Variables for consistent theming */
:root {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;
    --success-color: #10b981;
    --success-dark: #059669;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --danger-dark: #dc2626;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* 统一的编辑区域变量 - 去掉左右边距 */
    --text-area-left: 0px;
    --text-area-right: 0px;
    --text-area-width: 100%;

    /* 待办列的变量（没有左侧按钮） */
    --text-area-todo-left: 0px;
    --text-area-todo-width: calc(100% - var(--text-area-todo-left) - var(--text-area-right));

    /* === Trello-like refinements (phase 2) === */
    --board-bg-url: none; /* e.g., url('https://images.unsplash.com/photo-...') */

    /* === Trello design tokens & minimal card UI === */
    --list-width:272px;
    --list-gap:12px;
    --card-radius:10px;
    --card-padding:10px;
    --card-shadow:0 1px 0 rgba(9,30,66,.25);
    --card-hover-shadow:0 4px 8px rgba(9,30,66,.25);
    --badge-gap:6px;
    --label-height:8px;
    --muted:#6b7280;
    --border:#e5e7eb;
    --bg:#f6f7f9;
    --card-bg:#fff;
    /* Page-level gutter used by project page containers */
    --page-gutter: 2rem;
}

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: var(--gray-800);
    width: 100%;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Firefox滚动条 */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) var(--gray-100);
}

/* 通用聚焦样式 */
*:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* 改善点击目标和触摸友好性 */
.clickable {
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.clickable::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    min-width: 44px;
    min-height: 44px;
    pointer-events: none;
}

/* 页面切换 */
.page {
    min-height: 100vh;
    width: 100%;
}

.hidden {
    display: none !important;
}

/* 页面容器 */
.container {
    width: 100%;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.875rem;
    letter-spacing: -0.025em;
}

/* 登录页面特殊样式 */
#loginPage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(680px at 10% -10%, rgba(255, 255, 255, 0.85), transparent 60%),
        radial-gradient(540px at 90% 0%, rgba(209, 250, 255, 0.7), transparent 62%),
        linear-gradient(135deg, #cbf4ff 0%, #dff7ff 55%, #f6fbff 100%);
}

#loginPage::before,
#loginPage::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.65;
    pointer-events: none;
}

#loginPage::before {
    top: -180px;
    left: -140px;
    width: 420px;
    height: 420px;
    background: rgba(59, 173, 255, 0.38);
}

#loginPage::after {
    bottom: -180px;
    right: -100px;
    width: 460px;
    height: 460px;
    background: rgba(132, 225, 188, 0.4);
}

#loginPage .container {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 100%;
    padding: 0;
}

.login-shell {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-card {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 40px 60px -40px rgba(15, 118, 110, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(14px);
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px at 50% 0%, rgba(255, 255, 255, 0.8), transparent 70%);
    pointer-events: none;
    opacity: 0.65;
}

.login-card-body {
    position: relative;
    padding: 2.75rem 2.75rem 2.3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.login-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#loginPage h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.login-subtitle {
    font-size: 0.975rem;
    color: #64748b;
}

.auth-message {
    min-height: 1.25rem;
    font-size: 0.875rem;
    color: var(--danger-dark);
}

.auth-message:empty {
    display: none;
}

.resend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(219, 234, 254, 0.6);
    font-size: 0.85rem;
    color: #1d4ed8;
}

.resend-row span {
    color: #1f2937;
}

.resend-row a {
    color: #2563eb;
    font-weight: 500;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-field {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.875rem 1.1rem;
    border-radius: 999px;
    background: rgba(241, 245, 255, 0.95);
    border: 1.5px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 22px -18px rgba(15, 118, 110, 0.45);
    transition: var(--transition);
}

.input-field:focus-within {
    border-color: rgba(59, 130, 246, 0.65);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 40px -32px rgba(37, 99, 235, 0.45);
}

.input-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: #94a3b8;
    opacity: 0.85;
}

.input-icon[data-icon="user"] {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23000" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-3.866 0-7 3.134-7 7h2c0-2.761 2.239-5 5-5s5 2.239 5 5h2c0-3.866-3.134-7-7-7Z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23000" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-3.866 0-7 3.134-7 7h2c0-2.761 2.239-5 5-5s5 2.239 5 5h2c0-3.866-3.134-7-7-7Z"/%3E%3C/svg%3E');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.input-icon[data-icon="mail"] {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23000" d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.511l8 5.333 8-5.333V7H4Zm16 10v-7.511l-7.445 4.964a1 1 0 0 1-1.11 0L4 9.489V17h16Z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23000" d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.511l8 5.333 8-5.333V7H4Zm16 10v-7.511l-7.445 4.964a1 1 0 0 1-1.11 0L4 9.489V17h16Z"/%3E%3C/svg%3E');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.input-icon[data-icon="lock"] {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23000" d="M17 9h-1.1V7a3.9 3.9 0 0 0-7.8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-6.9-2a1.9 1.9 0 1 1 3.8 0v2h-3.8Zm6 13H7v-9h10Zm-5-3a1.5 1.5 0 0 1-1.5-1.5v-1a1.5 1.5 0 0 1 3 0v1A1.5 1.5 0 0 1 11.1 17Z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23000" d="M17 9h-1.1V7a3.9 3.9 0 0 0-7.8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-6.9-2a1.9 1.9 0 1 1 3.8 0v2h-3.8Zm6 13H7v-9h10Zm-5-3a1.5 1.5 0 0 1-1.5-1.5v-1a1.5 1.5 0 0 1 3 0v1A1.5 1.5 0 0 1 11.1 17Z"/%3E%3C/svg%3E');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.login-form input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.985rem;
    font-weight: 500;
    color: var(--gray-800);
}

.login-form input::placeholder {
    color: rgba(148, 163, 184, 0.95);
}

.login-form input:focus {
    outline: none;
}

.login-form button {
    width: 100%;
    padding: 0.95rem 1rem;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 55%, #2563eb 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 22px 35px -24px rgba(37, 99, 235, 0.72);
}

.login-form button:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 24px 40px -22px rgba(37, 99, 235, 0.78);
}

.login-form button:active {
    transform: translateY(0);
    box-shadow: 0 18px 30px -20px rgba(37, 99, 235, 0.6);
}

.login-footnotes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #475569;
}

.login-footnotes p {
    margin: 0;
}

.login-footnotes a {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}

.login-footnotes a:hover {
    text-decoration: underline;
}

.login-illustration {
    position: relative;
    height: 150px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(224, 242, 254, 0.45) 45%, #9be7ff 45%, #7cd37a 100%);
    overflow: hidden;
}

.login-illustration::before {
    content: "";
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    width: 440px;
    height: 220px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 -20px 40px rgba(14, 165, 233, 0.12);
}

.login-illustration .scene {
    position: absolute;
    inset: 0;
}

.login-illustration .sky {
    background:
        radial-gradient(220px at 20% 35%, rgba(255, 255, 255, 0.75), transparent 70%),
        radial-gradient(120px at 75% 30%, rgba(255, 255, 255, 0.45), transparent 75%);
}

.login-illustration .mountains::before,
.login-illustration .mountains::after {
    content: "";
    position: absolute;
    bottom: 52px;
    width: 50%;
    height: 90px;
    background: linear-gradient(180deg, rgba(146, 197, 255, 0.9) 0%, rgba(168, 222, 255, 0.9) 100%);
    border-radius: 55% 55% 0 0;
    filter: drop-shadow(0 12px 24px rgba(59, 130, 246, 0.25));
}

.login-illustration .mountains::before {
    left: -5%;
}

.login-illustration .mountains::after {
    right: -5%;
    background: linear-gradient(180deg, rgba(146, 197, 255, 0.7) 0%, rgba(129, 199, 252, 0.85) 100%);
}

.login-illustration .ground {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    padding-bottom: 12px;
}

.tree {
    position: relative;
    width: 42px;
    height: 58px;
}

.tree::before {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 46px;
    background: linear-gradient(180deg, #75de81 0%, #4fcf6a 100%);
    border-radius: 50% 50% 45% 45%;
    box-shadow: 0 6px 0 rgba(79, 209, 120, 0.35);
}

.tree::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 18px;
    background: #34704a;
    border-radius: 4px;
}

.tree--2::before,
.tree--4::before {
    border-radius: 45% 45% 35% 35%;
}

.tree--1::before {
    height: 42px;
    width: 38px;
    background: linear-gradient(180deg, #8ae689 0%, #66d072 100%);
}

.tree--3::before {
    height: 50px;
    width: 48px;
    background: linear-gradient(180deg, #63d67b 0%, #3fbe63 100%);
}

.tree--5::before {
    height: 38px;
    width: 36px;
    background: linear-gradient(180deg, #9ae692 0%, #68cd6f 100%);
}

.tree--3::after {
    height: 22px;
}

@media (max-width: 1024px) {
    #loginPage {
        padding: 2.75rem 1.5rem;
    }

    .login-card-body {
        padding: 2.5rem 2.3rem 2.05rem;
    }
}

@media (max-width: 720px) {
    #loginPage {
        padding: 2.5rem 1.1rem;
    }

    #loginPage .container {
        max-width: 360px;
    }

    .login-card {
        border-radius: 24px;
    }

    .login-card-body {
        padding: 2.2rem 1.95rem 1.9rem;
    }

    .input-field {
        padding: 0.8rem 1rem;
    }

    .login-illustration {
        height: 135px;
    }

    .login-footnotes {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    #loginPage {
        padding: 2.2rem 0.75rem;
    }

    #loginPage .container {
        max-width: 100%;
    }

    .login-card-body {
        padding: 2rem 1.4rem 1.7rem;
    }

    .login-form button {
        font-size: 0.95rem;
    }

    .login-illustration {
        height: 125px;
    }

    .tree {
        width: 34px;
    }

    .tree::before {
        width: 30px;
        height: 40px;
    }
}

/* 看板页面 */
#boardPage {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: stretch;
    justify-content: stretch;
    /* Wallpaper moved to board content area */
    background-image: none !important;
}

.header {
    background: white;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.online-users-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.online-users {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

.online-users-caret {
    font-size: 0.75rem;
    opacity: 0.7;
}

.online-users-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    max-width: 320px;
    padding: 8px;
    background: var(--gray-50, #ffffff);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: var(--shadow-md, 0 8px 18px rgba(15, 23, 42, 0.12));
    z-index: 1200;
}

#userList {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-height: 220px;
    overflow-y: auto;
}

.online-users-empty {
    color: var(--gray-500, #6b7280);
    font-size: 12px;
}

.user-badge {
    background: #10b981;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.header button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

#toggleCompletedBtn[aria-pressed="true"] {
    background: #0ea5e9;
    color: #fff;
}
.board-switcher-item[aria-pressed="true"],
button.board-switcher-item.active {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

#exportBtn {
    background: #059669;
    color: white;
}

#exportBtn:hover {
    background: #047857;
}

#logoutBtn {
    background: #dc2626;
    color: white;
}

#logoutBtn:hover {
    background: #b91c1c;
}

/* 看板容器 */
.board-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 1.5rem 2rem;
    overflow-x: auto;
    max-width: none;
    width: 100%;
    justify-content: flex-start !important;
}

/* 归档页面样式 */
.archive-container {
    flex: 1;
    padding: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

#archiveListFilter {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
}

.archive-column {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 2px dashed #d1d5db;
    background: #f9fafb;
}

.archive-column h3 {
    color: #6b7280;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    font-size: 1.125rem;
}

.archive-column .cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.archive-column .card {
    opacity: 0.8;
    background: #f3f4f6;
}

.archive-column .card:hover {
    opacity: 1;
    background: #e5e7eb;
}

/* 列样式 */
.column {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.column h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    font-size: 1.125rem;
    color: #374151;
}

.count {
    background: #f3f4f6;
    color: #6b7280;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* 卡片容器 */
.cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* 卡片样式 */
.card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.card:hover {
    /* 移除卡片整体的hover效果，避免与内部元素冲突 */
}

.card-title {
    margin-left: 0;
    width: 100%;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
    font-size: 0.95rem;
    position: relative; /* allow absolute inline editor without layout change */
    min-height: 1.5rem; /* 确保有足够高度容纳绝对定位的可点击区域 */
    box-sizing: border-box;
}

/* 标题点击区域 - 简单的相对定位 */
.title-text.clickable {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    cursor: pointer;
}

.title-text.clickable:hover {
    background: #dbeafe !important;
}

.card-description {
    margin-left: 0;
    width: 100%;
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    word-wrap: break-word;
    min-height: 1.5rem; /* 增加最小高度，确保有足够高度容纳绝对定位的可点击区域 */
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
    position: relative; /* allow absolute overlay */
    box-sizing: border-box;
}

/* 描述点击区域 - 简单的相对定位 */
.description-text.clickable {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    cursor: pointer;
}

.description-text.clickable:hover {
    background: #dbeafe !important;
}

/* 待办列和归档列维持无左偏移 */
.column[data-status="todo"] .card-title,
.column[data-status="todo"] .card-description,
.archive-column .card-title,
.archive-column .card-description {
    margin-left: 0;
    width: 100%;
}

/* 移除待办列的特殊处理，保持简单 */

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
}

.card-dates {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.card-footer-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
    min-height: 32px;
}

.card-left-info {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.card-center-actions {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    visibility: hidden;
    align-items: center;
    gap: 0.5rem;
}

.card:hover .card-center-actions {
    visibility: visible;
}

.card-center-actions .action-btn,
.card-center-actions .archive-btn,
.card-center-actions .restore-btn,
.card-center-actions .detail-btn {
    pointer-events: auto;
}

.card-right-info {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto; /* push deadline to the right in flex layout */
}

.card-assignee {
    font-weight: 500;
    color: var(--primary-dark);
    background: #eff6ff;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    transition: var(--transition);
    border: 2px solid transparent; /* Reserve space for editing border */
}

.card-assignee.unassigned {
    color: var(--gray-400);
    background: var(--gray-100);
}

/* 小元素的特殊clickable样式 - 覆盖通用样式 */
.card-assignee.clickable,
.card-deadline.clickable {
    cursor: pointer;
    position: relative;
}

/* 移除伪元素扩大点击区域，避免焦点切换闪烁 */

.card-assignee.clickable:hover {
    background: #dbeafe !important;
}

.card-assignee.unassigned.clickable:hover {
    background: var(--gray-200) !important;
}

.card-deadline {
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    transition: var(--transition);
    color: var(--gray-600);
    border: 2px solid transparent; /* Reserve space */
    display: inline-flex;
    align-items: center;
    min-height: 28px; /* match clickable area size */
    position: relative; /* for absolute date input */
    max-width: 160px; /* Ensure empty-date editor has enough room but not overflow */
}

.card-deadline.clickable:hover {
    background: var(--gray-200) !important;
}

.card-deadline.unset {
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
}

/* 内联编辑样式 - 统一设计 */
.inline-assignee-select,
.inline-date-input,
.inline-title-input,
.inline-description-textarea {
    background: white;
    border: none; /* Remove border to prevent size increase */
    outline: 2px solid var(--primary-color); /* Use outline for highlight */
    outline-offset: -2px; /* Keep within original bounds */
    border-radius: var(--border-radius);
    font-family: inherit;
    transition: var(--transition);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-sizing: border-box;
    padding: 0.25rem 0.5rem; /* Match original */
}

.inline-assignee-select,
.inline-date-input {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 80px;
    width: 100%; /* inherit locked width from container */
    height: 100%; /* inherit locked height from container */
    box-sizing: border-box;
}

.inline-title-input {
    padding: 0; /* no extra vertical padding */
    font-size: 0.95rem;
    font-weight: 600;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    line-height: 1.4;
    border: none;
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    overflow: hidden; /* keep height stable */
    resize: none; /* textarea */
    white-space: pre-wrap; /* keep line breaks */
    border-radius: var(--border-radius-sm); /* Match text padding */
}

/* Overlay inline editors to avoid changing layout height */
.inline-title-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 600; /* 匹配 .card-title */
    font-size: 0.95rem; /* 匹配 .card-title */
    line-height: 1.4; /* 匹配 .card-title */
    font-family: inherit;
}

/* 移除待办列特殊处理，编辑框现在自动适应父容器宽度 */

.inline-date-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inline-description-textarea {
    padding: 0; /* Prevent height increase */
    font-size: 0.875rem;
    font-weight: 400;
    width: 100%;
    resize: none; /* Prevent user resizing */
    min-height: 1.25rem; /* Match original min-height */
    line-height: 1.5;
    margin-left: 0;
    margin-right: 0; /* prevent overflow */
    overflow-y: hidden; /* Hide scrollbar if not needed */
    border: none;
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: var(--border-radius-sm); /* Match text padding */
}

.inline-description-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 移除待办列特殊处理，编辑框现在自动适应父容器宽度 */

.inline-assignee-select:focus,
.inline-date-input:focus,
.inline-title-input:focus,
.inline-description-textarea:focus {
    outline: none;
}

.card-author {
    font-weight: 500;
    color: #2563eb;
}

.card-created {
    font-size: 0.75rem;
    color: #9ca3af;
}

.deadline {
    color: #dc2626;
    font-weight: 500;
}

.deadline.upcoming {
    color: #f59e0b;
}

.deadline.overdue {
    color: #dc2626;
    background: #fef2f2;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
}

/* 编辑中的卡片 */
.card.editing {
    /* 移除编辑状态的特殊颜色 */
}

/* 内联编辑模式的卡片 */
.card.inline-editing {
    /* 移除内联编辑状态的特殊颜色 */
}

.editing-indicator {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 添加卡片区域 */
.add-card {
    background: transparent !important;
    /* padding: 1rem !important; */
    gap: 0.5rem;
    border: none !important;
    border-radius: 0 !important;
    margin-top: -14px !important;
}

.input-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-row-inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.left-inputs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
}

.left-inputs .task-title-input {
    flex: 1;
    min-width: 0;
}

.input-row-inline .date-input {
    margin-left: auto;
    flex-shrink: 0;
}

.input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-card input[type="text"],
.task-title-input {
    padding: 0.875rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    font-size: 0.875rem;
    transition: var(--transition);
    background: white;
    font-family: inherit;
    flex: 1;
    box-shadow: var(--shadow-sm);
    font-weight: 400;
    outline: none;
}

.task-title-input {
    flex: 3;
    min-width: 0;
}

.add-card input[type="text"]:focus,
.task-title-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.add-card input[type="text"]::placeholder,
.task-title-input::placeholder {
    color: var(--gray-400);
    font-style: italic;
    font-weight: 400;
}

.assignee-select {
    padding: 0.75rem 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius);
    background: white;
    color: var(--gray-700);
    font-size: 0.8rem;
    transition: var(--transition);
    cursor: pointer;
    min-width: 80px;
    max-width: 100px;
    font-family: inherit;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.assignee-select:hover,
.assignee-select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input {
    padding: 0.75rem 0.875rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius);
    background: white;
    font-size: 0.8rem;
    transition: var(--transition);
    cursor: pointer;
    width: 120px;
    font-family: inherit;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    outline: none;
}

.date-input:hover,
.date-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.add-card input[type="date"] {
    padding: 0.3rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0;
    background: #f8fafc;
    color: transparent;
    transition: all 0.2s;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.add-card input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: #64748b;
    cursor: pointer;
}

.add-card input[type="date"]:focus {
    outline: none;
    border-color: #3b82f6;
    background: #eff6ff;
}

.add-card input[type="date"]:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
/* Legacy add-card button styles removed; keep focus/disabled states. */
.add-card button:focus {
    outline: none;
    box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.add-card button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 快捷键提示 */
.keyboard-hint {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
    opacity: 0.8;
    transition: var(--transition);
}

.add-card:hover .keyboard-hint {
    opacity: 1;
    color: var(--gray-500);
}


.add-card button  {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-start;
    margin: var(--ds-space-0, 0);
    padding: var(--ds-space-075, 6px) var(--ds-space-150, 12px) var(--ds-space-075, 6px) var(--ds-space-100, 8px);
    border-radius: var(--ds-border-radius-200, 8px);
    background-color: transparent;
    color: var(--accent-text, var(--ds-text-subtle, #44546f));
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
}

.add-card button:hover {
    border: none;
    background-color: var(--ds-background-neutral-hovered, #091e4224);
    box-shadow: none;
    color: var(--ds-text, #172b4d);
    text-decoration: none;
}


/* 卡片移动按钮 */
.card-actions {
    display: none;
    position: relative;
    margin-top: 0.5rem;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    width: 100%; /* center within full footer width */
}

.card-actions .action-btn,
.card-actions .archive-btn,
.card-actions .restore-btn,
.card-actions .detail-btn {
    pointer-events: auto;
}

/* 所有按钮现在都居中显示，有统一间距 */


.card:hover .card-actions {
    display: flex;
}

.action-btn,
.archive-btn,
.restore-btn,
.detail-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0; /* ensure no extra padding */
    box-sizing: border-box; /* include borders in size */
}

.move-left {
    background: #3b82f6;
    color: white;
}

.move-right {
    background: #10b981;
    color: white;
}

.archive-btn {
    background: #f59e0b;
    color: white;
}

.restore-btn {
    background: #8b5cf6;
    color: white;
}

.card-detail-center {
    display: flex;
    justify-content: center;
    margin: 0.75rem 0;
}

.detail-btn {
    background: #6366f1;
    color: white;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.action-btn:hover, .archive-btn:hover, .restore-btn:hover, .detail-btn:hover {
    transform: scale(1.1);
}

/* 模态框 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: white;
    border-radius: var(--border-radius-xl);
    width: 90%;
    max-width: 540px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.edit-modal .modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-modal .modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    line-height: 1;
}

.close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 200px);
}

/* Notes modal */
#notesModal .modal-content {
    max-width: 960px;
}
#notesModal .modal-body {
    display: flex;
    gap: 16px;
}
.notes-sidebar {
    width: 260px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    padding-right: 12px;
}
.notes-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.notes-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
}
.notes-list {
    overflow-y: auto;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notes-item {
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.notes-item:hover {
    border-color: #cbd5f5;
    background: #f8fafc;
}
.notes-item.active {
    border-color: #3b82f6;
    background: #eff6ff;
}
.notes-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2937;
}
.notes-item-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}
.notes-empty {
    padding: 12px;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}
.notes-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notes-title-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
}
.notes-content-input {
    width: 100%;
    min-height: 320px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
}
.notes-meta {
    font-size: 12px;
    color: #6b7280;
}
.notes-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.notes-dirty {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: #b45309;
    background: #fffbeb;
    padding: 2px 8px;
    border-radius: 999px;
}
.notes-project-name {
    margin-left: 6px;
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

/* Notes import modal */
.notes-import-modal {
    max-width: 720px;
}
.notes-import-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.notes-import-options {
    display: flex;
    gap: 16px;
    font-size: 0.95rem;
    color: #334155;
}
.notes-import-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.notes-import-hint {
    font-size: 12px;
    color: #94a3b8;
}
.notes-import-text {
    min-height: 220px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
}

/* Notes presenter (fullscreen) */
.notes-presenter {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
}
.notes-presenter.hidden {
    display: none;
}
.notes-presenter-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 0.88);
    backdrop-filter: blur(8px);
}
.notes-presenter-actions {
    display: flex;
    gap: 8px;
}
.notes-presenter-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-presenter-content {
    flex: 1;
    overflow: auto;
    padding: 36px 28px 48px;
    font-size: 1.1rem;
    line-height: 1.85;
    color: #0f172a;
}
.notes-presenter-content > * {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.notes-presenter-content h1,
.notes-presenter-content h2,
.notes-presenter-content h3,
.notes-presenter-content h4,
.notes-presenter-content h5,
.notes-presenter-content h6 {
    margin: 1.3em auto 0.7em;
    line-height: 1.25;
    color: #0f172a;
    letter-spacing: 0.01em;
}
.notes-presenter-content h1 { font-size: 2.2rem; }
.notes-presenter-content h2 { font-size: 1.8rem; }
.notes-presenter-content h3 { font-size: 1.45rem; }
.notes-presenter-content h4 { font-size: 1.2rem; }
.notes-presenter-content p {
    margin: 0.85em auto;
}
.notes-presenter-content ul,
.notes-presenter-content ol {
    margin: 0.8em auto;
    padding-left: 1.6em;
}
.notes-presenter-content li {
    margin: 0.4em 0;
}
.notes-presenter-content blockquote {
    border-left: 3px solid #c7d2fe;
    padding: 0.6em 1em;
    margin: 1em auto;
    background: #f8fafc;
    color: #334155;
    border-radius: 8px;
}
.notes-presenter-content hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.6em auto;
}
.notes-presenter-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #f1f5f9;
    padding: 0 6px;
    border-radius: 6px;
}
.notes-presenter-content pre {
    background: #0b1220;
    color: #e2e8f0;
    padding: 16px 18px;
    border-radius: 12px;
    overflow: auto;
    margin: 1em auto;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}
.notes-presenter-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}
/* 块级公式包裹层：保持块级布局，承载 data-md-line 用于点击定位 */
.md-math-block {
    display: block;
}
.notes-presenter-content a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.notes-presenter-content img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
    margin: 0.8em auto;
    display: block;
}
.notes-presenter-content .markdown-table-wrap,
.card-presenter-body .markdown-table-wrap,
.card-presenter-comment-body .markdown-table-wrap {
    overflow-x: auto;
    margin: 1em 0;
}
.notes-presenter-content table,
.card-presenter-body table,
.card-presenter-comment-body table {
    border-collapse: collapse;
    width: 100%;
    min-width: max-content;
    margin: 0;
    font-size: 0.98rem;
}
.notes-presenter-content th,
.notes-presenter-content td,
.card-presenter-body th,
.card-presenter-body td,
.card-presenter-comment-body th,
.card-presenter-comment-body td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
.notes-presenter-content th,
.card-presenter-body th,
.card-presenter-comment-body th {
    background: #f1f5f9;
    font-weight: 600;
}
.notes-presenter-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 1rem;
    padding: 60px 20px;
}

@media (max-width: 720px) {
    .notes-presenter-toolbar {
        padding: 12px 16px;
    }
    .notes-presenter-content {
        padding: 24px 18px 36px;
        font-size: 1rem;
        line-height: 1.75;
    }
    .notes-presenter-content h1 { font-size: 1.8rem; }
    .notes-presenter-content h2 { font-size: 1.5rem; }
    .notes-presenter-content h3 { font-size: 1.25rem; }
}

/* Card presenter */
.card-presenter {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
}
.card-presenter.hidden { display: none; }
.card-presenter-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 0.88);
    backdrop-filter: blur(8px);
}
.card-presenter-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-presenter-clickable {
    cursor: text;
}
.card-presenter-body.card-presenter-clickable:hover {
    border-color: #cbd5e1;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}
.card-presenter-title-input {
    width: 100%;
    font-size: 1.05rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    background: #ffffff;
}
.card-presenter-title-editable {
    min-width: 120px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
}
.card-presenter-title-editable:focus {
    outline: none;
    border-color: #cbd5e1;
    background: #ffffff;
}
.card-presenter-title-editable:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
}
.card-presenter-actions { display: flex; gap: 8px; }
/* 上/下一篇导航 */
.card-presenter-nav { display: flex; align-items: center; gap: 6px; }
.card-presenter-nav .btn-secondary { min-width: 34px; padding: 4px 10px; font-size: 1.1rem; line-height: 1; }
.card-presenter-index { font-size: 12px; color: #64748b; min-width: 44px; text-align: center; user-select: none; }
#cardPresenterLockBtn.active {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}
#cardPresenterLockBtn.active:hover {
    background: #fecaca;
    color: #991b1b;
}
.card-presenter-content {
    flex: 1;
    overflow: auto;
    padding: 36px 28px 48px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #0f172a;
}
.card-presenter-layout {
    position: relative;
}
.card-presenter-main {
    min-width: 0;
}
.card-presenter-toc {
    position: fixed;
    right: 28px;
    top: 120px;
    width: 220px;
    max-height: calc(100vh - 160px);
    overflow: auto;
    padding: 12px 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    z-index: 4;
}
.card-presenter-toc-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}
.card-presenter-toc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card-presenter-toc-item {
    font-size: 0.88rem;
    color: #475569;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
}
.card-presenter-toc-item.level-2 { padding-left: 14px; }
.card-presenter-toc-item.level-3 { padding-left: 22px; font-size: 0.84rem; }
.card-presenter-toc-item.active {
    background: rgba(59, 130, 246, 0.12);
    color: #1e3a8a;
    font-weight: 600;
}
.card-presenter-toc-item:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #1e40af;
}
.card-presenter-section {
    max-width: 900px;
    margin: 0 auto 24px;
}
.card-presenter-section h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: #0f172a;
}
.card-presenter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.9rem;
    color: #475569;
}
.card-presenter-meta .chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1e3a8a;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.card-presenter-body {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    position: relative;
}
/* 预览态正文右上角“双击编辑”提示：hover 淡入，不挡点击 */
.card-presenter-edit-hint {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    line-height: 1;
    color: #94a3b8;
    background: rgba(241, 245, 249, 0.85);
    padding: 4px 8px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.card-presenter-body:hover .card-presenter-edit-hint { opacity: 1; }
.card-presenter-body-edit {
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.card-presenter-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
}
.card-presenter-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
}
.card-presenter-desc-editable {
    min-height: 180px;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0;
    box-sizing: border-box;
}
.card-presenter-desc-editable:focus {
    outline: none;
    border-color: #cbd5e1;
    background: #ffffff;
}
.card-presenter-desc-editable:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
}
.card-presenter-comment-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card-presenter-comment-actions {
    display: flex;
    justify-content: flex-end;
}
.card-presenter-body h1,
.card-presenter-body h2,
.card-presenter-body h3,
.card-presenter-body h4,
.card-presenter-body h5,
.card-presenter-body h6,
.card-presenter-comment-body h1,
.card-presenter-comment-body h2,
.card-presenter-comment-body h3,
.card-presenter-comment-body h4,
.card-presenter-comment-body h5,
.card-presenter-comment-body h6 {
    margin: 1.1em 0 0.6em;
    line-height: 1.25;
    color: #0f172a;
}
.card-presenter-body h1,
.card-presenter-comment-body h1 { font-size: 1.6rem; }
.card-presenter-body h2,
.card-presenter-comment-body h2 { font-size: 1.35rem; }
.card-presenter-body h3,
.card-presenter-comment-body h3 { font-size: 1.15rem; }
.card-presenter-body p,
.card-presenter-comment-body p { margin: 0.75em 0; }
.card-presenter-body ul,
.card-presenter-body ol,
.card-presenter-comment-body ul,
.card-presenter-comment-body ol {
    margin: 0.6em 0;
    padding-left: 1.4em;
}
.card-presenter-body li,
.card-presenter-comment-body li { margin: 0.3em 0; }
.card-presenter-body blockquote,
.card-presenter-comment-body blockquote {
    border-left: 3px solid #c7d2fe;
    padding: 0.5em 0.9em;
    margin: 0.9em 0;
    background: #f8fafc;
    color: #334155;
    border-radius: 8px;
}
.card-presenter-body code,
.card-presenter-comment-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #f1f5f9;
    padding: 0 6px;
    border-radius: 6px;
}
.card-presenter-body pre,
.card-presenter-comment-body pre {
    background: #0b1220;
    color: #e2e8f0;
    padding: 14px 16px;
    border-radius: 12px;
    overflow: auto;
    margin: 0.9em 0;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}
.card-presenter-body pre code,
.card-presenter-comment-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}
.card-presenter-body a,
.card-presenter-comment-body a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.card-presenter-body hr,
.card-presenter-comment-body hr {
    border: none;
    border-top: 2px dashed #cbd5e1;
    margin: 1.6em 0;
}
/* Markdown 代码框复制按钮：悬浮在代码块右上角，hover 时高亮 */
.markdown-code-wrap {
    position: relative;
}
.markdown-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    font-size: 12px;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.markdown-code-wrap:hover .markdown-copy-btn { opacity: 1; }
.markdown-copy-btn:hover {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}
.markdown-copy-btn.copied {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
    opacity: 1;
}
.markdown-mermaid-wrap {
    position: relative;
    margin: 1em 0;
    padding: 42px 16px 16px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.markdown-mermaid-wrap .markdown-copy-btn {
    color: #475569;
    background: #f8fafc;
    border-color: #cbd5e1;
    opacity: 0.82;
}
.markdown-mermaid-wrap .markdown-copy-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
    border-color: #94a3b8;
}
.markdown-mermaid {
    width: 100%;
    color: #475569;
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88rem;
}
.markdown-mermaid[data-mermaid-state="rendered"] {
    display: flex;
    justify-content: center;
    color: inherit;
    white-space: normal;
    font-family: inherit;
    font-size: inherit;
}
.markdown-mermaid svg {
    display: block;
    max-width: 100%;
    height: auto;
}
.markdown-mermaid-source[hidden],
.markdown-mermaid-error[hidden] {
    display: none !important;
}
.markdown-mermaid-wrap.has-error .markdown-mermaid-source {
    margin: 0;
}
.markdown-mermaid-error {
    margin-top: 10px;
    color: #b45309;
    font-size: 0.85rem;
}
.card-presenter-body img,
.card-presenter-comment-body img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
    margin: 0.8em 0;
    display: block;
}
.card-presenter-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card-presenter-comment {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.card-presenter-comment-meta {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 8px;
}
.card-presenter-empty {
    color: #94a3b8;
    font-size: 0.95rem;
    padding: 18px 0;
}
.card-presenter-content .notes-presenter-empty {
    padding: 18px 0;
}

/* 放映快捷键帮助浮层 */
.card-presenter-help {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}
.card-presenter-help-panel {
    width: min(420px, 92vw);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    animation: cardPresenterHelpIn 0.15s ease;
}
@keyframes cardPresenterHelpIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.card-presenter-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-weight: 600;
    color: #0f172a;
    border-bottom: 1px solid #eef2f7;
}
.card-presenter-help-close {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 6px;
}
.card-presenter-help-close:hover { background: #f1f5f9; color: #0f172a; }
.card-presenter-help-body { padding: 12px 18px 18px; }
.card-presenter-help-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}
.card-presenter-help-row kbd {
    flex: 0 0 auto;
    min-width: 132px;
    text-align: center;
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 4px 8px;
}
.card-presenter-help-row span { color: #334155; font-size: 0.92rem; }
.card-presenter-help-tip {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .card-presenter-toolbar { padding: 12px 16px; }
    .card-presenter-content { padding: 24px 18px 36px; font-size: 1rem; }
    .card-presenter-toc { display: none; }
    .card-presenter-help-row kbd { min-width: 108px; }
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-group.flex-1 {
    flex: 1;
}

.form-group.flex-2 {
    flex: 2;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
    font-family: inherit;
    min-height: 38px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group select {
    background: white;
    cursor: pointer;
}

.card-info {
    background: #f8fafc;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #64748b;
}

.modal-footer {
    background: #f8fafc;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-footer button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-primary {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-danger {
    background: #dc2626;
    color: white;
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-secondary {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover {
    background: #e2e8f0;
    color: #475569;
}

/* 兼容旧的模态框样式 */
.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal-actions button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.modal-actions button:first-child {
    background: #2563eb;
    color: white;
}

.modal-actions button:first-child:hover {
    background: #1d4ed8;
}

.delete-btn {
    background: #dc2626 !important;
    color: white !important;
}

.delete-btn:hover {
    background: #b91c1c !important;
}

.modal-actions button:last-child {
    background: #6b7280;
    color: white;
}

.modal-actions button:last-child:hover {
    background: #4b5563;
}

/* 归档功能样式 */
.archive-actions {
    margin-top: auto;
    padding-top: 1rem;
}

.clear-archive-btn {
    width: 100%;
    padding: 0.5rem;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.clear-archive-btn:hover {
    background: #b91c1c;
}

.clear-archive-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* 归档列特殊样式 */
.column[data-status="archived"] {
    background: #f9fafb;
    border: 2px dashed #d1d5db;
}

.column[data-status="archived"] h3 {
    color: #6b7280;
}

.column[data-status="archived"] .card {
    opacity: 0.8;
    background: #f3f4f6;
}

.column[data-status="archived"] .card:hover {
    opacity: 1;
    background: #e5e7eb;
}

/* 所有列的卡片现在都没有左侧间距，因为移动按钮已移到底部 */

/* 导入选项样式 */
.import-options {
    margin: 1rem 0;
}

.import-options label {
    display: block;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.import-options label:hover {
    border-color: #2563eb;
    background: #f8fafc;
}

.import-options label input[type="radio"] {
    margin-right: 0.5rem;
}

.import-options label span {
    font-weight: 500;
    display: block;
    margin-bottom: 0.25rem;
}

.import-options label small {
    color: #6b7280;
    font-size: 0.875rem;
}

.import-options label input[type="radio"]:checked + span {
    color: #2563eb;
}

.import-options label:has(input[type="radio"]:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

#importBtn {
    background: #0ea5e9;
    color: white;
}

#importBtn:hover {
    background: #0284c7;
}

#archiveBtn {
    background: #f59e0b;
    color: white;
}

#archiveBtn:hover {
    background: #d97706;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .board-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .header {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions {
        justify-content: center;
    }

    .online-users {
        justify-content: center;
    }

    .column {
        min-height: 300px;
    }

    .modal-content {
        margin: 1rem;
        width: calc(100% - 2rem);
    }

    .project-list, .board-list {
        grid-template-columns: 1fr;
    }

    .create-project-form, .join-project-form, .create-board-form {
        flex-direction: column;
    }

    .create-project-form input, .join-project-form input, .create-board-form input {
        min-width: auto;
    }

    .board-header-left {
        margin-bottom: 1rem;
    }
}

/* 项目选择页面样式 */
.project-header, .board-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.project-section, .board-section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.project-section h2, .board-section h2 {
    margin: 0 0 1rem 0;
    color: #374151;
    font-size: 1.25rem;
}

.project-list, .board-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.project-card, .board-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    min-height: 85px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* 项目卡片操作按钮（右上角悬浮显示） */
.project-card-with-actions { position: relative; }
.board-card-with-actions { position: relative; }
.project-card-actions {
    display: none;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    gap: 0.5rem;
}
.project-card-with-actions:hover .project-card-actions { display: flex; }
.project-action-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.9);
    color: #64748b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.project-action-btn:hover {
    background: #fff;
    color: #374151;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
.project-action-btn.rename-btn { color: #2563eb; border-color: rgba(37,99,235,0.25); }
.project-action-btn.pin-btn { color: #16a34a; border-color: rgba(22,163,74,0.25); }
.project-action-btn.pin-btn:hover { background: rgba(22,163,74,0.08); }
.board-action-btn.pin-btn { color: #16a34a; border-color: rgba(22,163,74,0.25); }
.board-action-btn.pin-btn:hover { background: rgba(22,163,74,0.08); }
.project-card .project-icon { cursor: default; pointer-events: none; }
.project-card:hover .project-icon { cursor: pointer; pointer-events: auto; }
.project-card .project-icon.pin-on { color: #16a34a; }
/* Hover-only pin icon */
.pin-wrap { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-right:6px; cursor: pointer; transition: transform .16s ease; transform-origin: center; }
.pin-wrap:hover { transform: translateY(-1px) scale(1.08); }
.pin-wrap .icon-base, .pin-wrap .icon-hover { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; color:#9ca3af; }
.pin-wrap.pinned .icon-base { color:#16a34a; }
.pin-wrap .icon-hover { display:none; }
.pin-wrap:hover .icon-base { display:none; }
.pin-wrap:hover .icon-hover { display:inline-flex; }
/* local svg icon size for board base icon */
/* No inline <img> inside pin-wrap base when using Icon.boards */
.pin-wrap { position: relative; }
.pin-wrap .pin-label {
    position: absolute;
    top: 140%;
    left: 0;
    display: none;
    background: rgba(17,24,39,0.95);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 20;
}
.pin-wrap:hover .pin-label { display: inline-block; }

/* Group separators within grid containers */
.group-separator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-weight: 600;
    margin: 6px 0 2px;
}
.group-sep-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; display: inline-block; }
.group-sep-text { font-size: 12px; letter-spacing: .02em; }
.project-action-btn.pin-btn.active,
.board-action-btn.pin-btn.active {
    background: rgba(22,163,74,0.12);
    color: #15803d;
    border-color: rgba(22,163,74,0.35);
}
.board-action-btn.rename-btn:hover, .project-action-btn.rename-btn:hover { background: rgba(37,99,235,0.08); }

.project-card {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
}

.board-card {
    background: linear-gradient(135deg, #f7fdf7 0%, #f0fdf4 100%);
    border-color: #d1fae5;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-color: #667eea;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
}

.board-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.08);
    border-color: #a7f3d0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

/* Pin badge on pinned items */
.pin-badge {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
    color: #16a34a;
}
.pin-badge svg { width: 14px; height: 14px; }

/* Left pin toggle button on cards */
/* removed old left-floating pin button styles */

/* Mini icon on board title */
/* removed old mini icon class */

.project-card h3, .board-card h3 {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
    font-size: 1.125rem;
}

.project-card .project-info, .board-card .board-info {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.invite-code {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1em;
}

.create-project-form, .join-project-form, .create-board-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.create-project-form input, .join-project-form input, .create-board-form input {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.create-project-form input:focus, .join-project-form input:focus, .create-board-form input:focus {
    outline: none;
    border-color: #3b82f6;
}

.create-project-form button, .join-project-form button, .create-board-form button {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.create-project-form button:hover, .join-project-form button:hover, .create-board-form button:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
}

.project-info {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 6px;
    /* margin-bottom: 2rem; */
}

.project-info p {
    margin: 0.5rem 0;
    color: #4b5563;
}

/* SECTION: Headers & Breadcrumbs */
/* 看板头部样式 */
.board-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.board-breadcrumb {
    /* base breadcrumb styles; page-specific sizes set later */
    color: var(--header-fg);
    margin: 0;
    font-weight: bold;
}

.board-breadcrumb span { color: var(--header-fg); font-weight: 500; }

.board-breadcrumb .project-link {
    color: var(--header-link);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.board-breadcrumb .project-link:hover { color: #1d4ed8; border-bottom-color: #1d4ed8; }

.project-breadcrumb {
    font-size: 1.875rem;
    color: #374151;
    margin: 0;
    font-weight: bold;
}

.project-breadcrumb span {
    color: #374151;
    font-weight: 500;
}

.project-breadcrumb .home-link {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.project-breadcrumb .home-link:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

/* Breadcrumb link on board page */
.board-breadcrumb .home-link {
    color: var(--header-link);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.board-breadcrumb .home-link:hover { color: #1d4ed8; border-bottom-color: #1d4ed8; }

/* Iconic back arrow for board breadcrumb */
/* Left arrow icon (matches board name caret style but mirrored) */
.board-breadcrumb .home-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    transition: var(--transition);
    color: var(--header-fg) !important; /* match board name color */
    border-bottom-color: transparent !important; /* avoid underline hue from .home-link */
}
.board-breadcrumb .home-arrow:hover { background: var(--gray-100); color: #374151 !important; border-bottom-color: transparent !important; }
.board-breadcrumb .home-arrow::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor; /* down-facing triangle */
    opacity: 0.7;
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.board-breadcrumb .home-arrow:hover::before { opacity: 1; transform: translateY(1px); }
.board-breadcrumb .home-arrow.open::before { transform: rotate(-90deg); opacity: 1; }

/* Generic breadcrumb caret (used for projectCaret and boardCaret) */
.board-breadcrumb .crumb-caret, .project-breadcrumb .crumb-caret {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    transition: var(--transition);
    color: var(--header-fg); /* match text color */
}
.board-breadcrumb .crumb-caret:hover, .project-breadcrumb .crumb-caret:hover { background: var(--gray-100); }
.board-breadcrumb .crumb-caret::before, .project-breadcrumb .crumb-caret::before {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor; /* right-facing */
    opacity: 0.7;
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.board-breadcrumb .crumb-caret:hover::before, .project-breadcrumb .crumb-caret:hover::before { opacity: 1; transform: translateX(1px); }
.board-breadcrumb .crumb-caret.open::before, .project-breadcrumb .crumb-caret.open::before { transform: rotate(90deg); opacity: 1; }

/* Inline rename input for breadcrumb board name */
.breadcrumb-rename-input {
  font: inherit;
  color: #111827;
  padding: 2px 6px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  outline: none;
  width: auto;
  min-width: 8ch;
  background: #fff;
}
.breadcrumb-rename-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* Final header/breadcrumb tuning for board page */
#boardPage .board-breadcrumb {
    font-size: 1.5rem; /* smaller than project page for balance */
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* current board name emphasis */
#boardPage .board-breadcrumb #currentBoardName {
  font-weight: 700;
  letter-spacing: -0.01em;
  /* color: var(--header-fg); */
  color: var(--gray-800);
  /* mix-blend-mode: darken; */
  /* color: #000000; */
}

.logout-btn {
    background: #dc2626 !important;
    color: white;
}

.logout-btn:hover {
    background: #b91c1c !important;
}

#backToBoardSelect {
    background: #6b7280;
    color: white;
}



.empty-state {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 2rem;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
}

/* 首页优化样式 */
.all-boards-section, .projects-section {
    margin-bottom: 2rem;
}

.all-boards-section h3, .projects-section h3 {
    margin: 0 0 1rem 0;
    color: #1f2937;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.all-boards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.quick-board-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #1e293b;
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 70px;
    border: 1px solid #cbd5e1;
}

.quick-board-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

/* 看板卡片拖拽排序 */
#boardList .quick-board-card[draggable="true"] {
    cursor: grab;
}

#boardList .quick-board-card[draggable="true"]:active {
    cursor: grabbing;
}

/* 拖动中的插入指示条：只显示目标缝隙，不改动卡片本身（零布局变化 → 拖动不抖） */
#boardList .quick-board-card {
    position: relative;
}

#boardList .quick-board-card.drop-target.drop-before::before,
#boardList .quick-board-card.drop-target.drop-after::after {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 4px;
    border-radius: 2px;
    background: #3b82f6;
    pointer-events: none;
}

#boardList .quick-board-card.drop-target.drop-before::before {
    left: -10px;
}

#boardList .quick-board-card.drop-target.drop-after::after {
    right: -10px;
}

/* 源卡片拖起后仅降低透明度标记（严禁改布局/定位/隐藏，WebKit 会取消拖拽会话） */
#boardList .quick-board-card.drag-source {
    opacity: 0.35;
}

/* 拖动期间关闭卡片 hover 位移/过渡，防止扫过卡片时抖动 */
body.board-grid-dragging #boardList .quick-board-card {
    transition: none !important;
    transform: none !important;
}

/* 拖动锁定态：光标恢复默认，不再提示可拖拽 */
body.board-drag-locked #boardList .quick-board-card[draggable="true"],
body.board-drag-locked #boardList .quick-board-card[draggable="true"]:active {
    cursor: default;
}

/* 「选择看板」标题行的锁定按钮 */
.board-drag-lock-btn {
    margin-left: auto;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
}

.board-icon {
    font-size: 1.5rem;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.board-details h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.board-project {
    font-size: 0.875rem;
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

/* 看板卡片操作按钮 */
.board-card-with-actions {
    position: relative;
}

.board-card-actions {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    gap: 0.5rem;
}

.board-card-with-actions:hover .board-card-actions {
    display: flex;
}
/* Keep actions visible when menu is open (card holds active state) */
.board-card-with-actions.hold-actions .board-card-actions { display: flex; }

/* 统一卡片动作按钮风格 */
.board-action-btn,
.project-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.9);
    color: #64748b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.board-action-btn:hover,
.project-action-btn:hover {
    background: white;
    color: #374151;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.board-action-btn:hover {
    background: white;
    color: #374151;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.board-action-btn.delete-btn {
    color: #dc2626;
    background: rgba(255, 255, 255, 0.9);
}

.board-action-btn.delete-btn:hover {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}
.board-action-btn.more-btn {
    color: #6b7280;
    border: 1px solid rgba(0,0,0,0.08);
}
.board-action-btn.more-btn:hover {
    background: #fff;
}

/* SECTION: Actions Menus / Switchers */
/* Collapsed board actions menu */
.board-actions-menu {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 168px;
}
.board-actions-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
}
.board-actions-menu button:hover {
    background: #f3f4f6;
}
.board-actions-menu button.danger {
    color: #dc2626;
}
.board-actions-menu button.danger:hover {
    background: #fee2e2;
}

/* 项目头部样式 */
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info span {
    color: #4b5563;
    font-weight: 500;
    background: #f3f4f6;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

/* 工作台样式 */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid #3b82f6;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #1f2937;
    line-height: 1;
}

.stat-label {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.dashboard-section {
    margin-bottom: 2rem;
}

.dashboard-section h2 {
    margin: 0 0 1rem 0;
    color: #1f2937;
    font-size: 1.5rem;
}

.quick-boards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.recent-activities {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.activity-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: #f0f9ff;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
}

.activity-time {
    font-size: 0.875rem;
    color: #6b7280;
}

/* 项目管理样式 */
.projects-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.projects-header h2 {
    margin: 0;
    color: #1f2937;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
    font-size: 0.875rem;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #e5e7eb;
}

.create-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.form-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
}

.form-card h3 {
    margin: 0 0 1.5rem 0;
    color: #1f2937;
}

.form-card input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}

.form-card input:focus {
    outline: none;
    border-color: #3b82f6;
}

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

/* 加入项目样式 */
.join-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.join-card {
    background: white;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.join-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.join-card h2 {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
}

.join-card p {
    color: #6b7280;
    margin: 0 0 2rem 0;
}

.join-form {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.join-form input {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
}

.join-form input:focus {
    outline: none;
    border-color: #3b82f6;
}

.join-tips {
    text-align: left;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.join-tips h4 {
    margin: 0 0 1rem 0;
    color: #374151;
}

.join-tips ul {
    margin: 0;
    padding-left: 1.5rem;
}

.join-tips li {
    color: #6b7280;
    margin-bottom: 0.5rem;
}

/* 桌面版优化 */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .quick-boards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.25rem;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.25rem;
    }


    .dashboard-section {
        margin-bottom: 3rem;
    }

    .quick-board-card {
        padding: 1.25rem;
        min-height: 70px;
    }

    .board-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .board-details h4 {
        font-size: 1.125rem;
    }

    .project-card {
        padding: 1.25rem;
        min-height: 85px;
    }

    .board-container {
        padding: 1.5rem 2.5rem;
        gap: 1.5rem;
    }
}

/* 移动端响应式 */
@media (max-width: 768px) {

    /* 工作台响应式 */
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem;
        gap: 0.75rem;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .quick-boards-grid {
        grid-template-columns: 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .projects-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .join-card {
        padding: 2rem 1.5rem;
    }

    .join-form {
        flex-direction: column;
    }

    .join-form input {
        min-width: auto;
    }

    .form-card {
        margin: 1rem;
        width: calc(100% - 2rem);
        max-width: none;
    }

    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .user-info {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
    }

    .project-header h1 {
        font-size: 1.5rem;
    }
}

.assignee-dropdown {
    position: absolute;
    z-index: 2000;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 0.25rem;
    max-height: 240px;
    overflow-y: auto;
}

.assignee-option {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-700);
}

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

.assignee-option.selected {
    background: #dbeafe;
    color: var(--primary-dark);
    font-weight: 600;
}


/* 待办列和归档列的编辑框精确匹配原文本 */
.column[data-status="todo"] .inline-title-input,
.archive-column .inline-title-input,
.column[data-status="todo"] .inline-description-textarea,
.archive-column .inline-description-textarea {
    left: 0;
    width: 100%;
    margin: 0;
}

/* Prevent inline editors from expanding width */
.inline-title-input,
.inline-description-textarea {
    max-width: 100%;
}

/* Keep card layout from stretching due to long text */
.card-title,
.card-description {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* =============================================
   Header/Nav Alignment Fixes (cross-page)
   - Unify container width, side padding, and vertical rhythm
   - Align breadcrumb/title baseline and right actions
   ============================================= */
/* Consistent max-width and horizontal padding for navbar containers */
#boardPage .header > .container,
#projectPage > .container,
#boardSelectPage > .container {
  max-width: 1200px !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 0 !important;   /* remove top padding so headers sit flush */
  padding-bottom: 0 !important;/* footer spacing handled by sections */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Consistent vertical spacing + subtle border across navbars */
#boardPage .header > .container,
#projectPage .project-header,
#boardSelectPage .board-select-header {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--gray-200) !important;
  min-height: 56px !important; /* unify navbar row height */
}

/* Align left titles/breadcrumbs visually (size, baseline, spacing) */
#boardPage .board-breadcrumb,
#projectPage .project-header h1,
#boardSelectPage .board-select-header h1 {
  font-size: 20px !important;
  line-height: 1.35 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Align inline parts (caret/home links/names) on the same baseline */
.board-breadcrumb .crumb-caret,
.project-breadcrumb .crumb-caret,
.board-breadcrumb .home-link,
.project-breadcrumb .home-link {
  line-height: 1.35 !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* Renamable text should be hideable by JS (do not force display) */
#currentProjectName,
#currentBoardName,
#projectTitle {
  line-height: 1.35 !important;
}

/* Right-side actions: consistent alignment and control height */
#boardPage .header .header-actions,
#boardSelectPage .board-select-header .header-actions,
#projectPage .project-header .user-info {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

#boardPage .header .header-actions button,
#boardSelectPage .board-select-header .header-actions button,
#projectPage .project-header button {
  height: 36px !important;
}

/* Pills/labels in right area: match 36px controls */
.online-users {
  height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.online-users-menu #userList { display: flex !important; align-items: flex-start !important; gap: 6px !important; flex-wrap: wrap !important; }

#projectPage .project-header .user-info span {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure generic H1 centering doesn't affect nav titles */
#boardPage .board-breadcrumb,
#projectPage .project-header h1,
#boardSelectPage .board-select-header h1 {
  text-align: left !important;
}

/* =============================================
   现代极简主题覆盖（不改动结构，仅覆写样式）
   ============================================= */
:root {
    /* 中性配色与圆角、阴影统一 */
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;

    --gray-50: #fafafa;
    --gray-100: #f5f7fb;
    --gray-200: #e8ecf3;
    --gray-300: #d9dee7;
    --gray-400: #a0a8b8;
    --gray-500: #6b7280;
    --gray-600: #4f5565;
    --gray-700: #2e3340;
    --gray-800: #1c2130;
    --gray-900: #0f1420;

    --border-radius-sm: 6px;
    --border-radius: 10px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12);

    --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 背景更素雅 */
body {
    background: linear-gradient(180deg, #f6f7fb 0%, #eef1f7 100%);
    color: var(--gray-800);
}

/* 顶部条更简洁：去重阴影，轻边框 */
.header {
    background: #ffffff;
    box-shadow: none;
    border-bottom: 1px solid var(--gray-200);
}

/* 顶部按钮统一风格 */
.header button,
#backToProjects,
#logoutFromBoard,
#backToBoard,
#backToBoardSelect,
#logoutBtn,
#logoutFromProject {
    background: #ffffff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius);
    height: 36px;
    padding: 0 0.875rem;
}
.header button:hover,
#backToProjects:hover,
#logoutFromBoard:hover,
#backToBoard:hover,
#backToBoardSelect:hover,
#logoutBtn:hover,
#logoutFromProject:hover,
#boardSelectPage .board-select-header .header-actions button:hover
 {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--gray-400);
    background: #e5e7eb;
}

/* 重要操作维持主色但更扁平 */
#exportBtn, #importBtn, #archiveBtn, .btn-primary {
    background: var(--primary-color) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: var(--shadow) !important;
}
#exportBtn:hover, #importBtn:hover, #archiveBtn:hover, .btn-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
}
.logout-btn, #logoutBtn {
    background: var(--danger-color) !important;
    border: 1px solid transparent !important;
}

/* 看板布局留白更舒适 */
.board-container {
    gap: 1.5rem;
    padding: 2rem;
}

/* 列更卡片化、弱阴影、细边框 */
.column {
    background: #fff;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
}
.column h3 {
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-800);
}

/* =============================================
   Board Aesthetic Polish (scoped to #boardPage)
   - Softer background gradient + subtle radial accents
   - Glassy lists, refined cards, tasteful hover/drag states
   - Minimal, consistent tokens without touching other pages
   ============================================= */
#boardPage {
  /* Use theme-consistent neutral, slightly darker than --gray-100 */
  --list-bg: #f1f2f4; /* user-specified refined neutral */
  --list-border: #dfe1e6; /* darker, crisper border */
  --list-shadow: 0 1px 3px rgba(16,24,40,0.06); /* subtle but present */
  --list-shadow-hover: 0 2px 6px rgba(16,24,40,0.08);
  --card-bg: #ffffff;
  --card-border: #dfe1e6; /* align with list border */
  /* Trello-like raised shadow per reference */
  --card-shadow: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f;
  --card-shadow-hover: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f;
  position: relative;
}

/* Remove decorative overlays to match original theme */

/* Lists: glassy panels with gentle elevation */
#boardPage .column,
#boardPage .archive-column {
  background: var(--list-bg) !important;
  border: 1px solid var(--list-border) !important;
  border-radius: 8px !important; /* tighter, closer to Trello */
  box-shadow: var(--list-shadow) !important; /* baseline shadow */
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* No hover shadow change on lists */
#boardPage .column:hover,
#boardPage .archive-column:hover {
  transform: none !important;
  box-shadow: var(--list-shadow) !important;
  border-color: var(--list-border) !important;
}

/* =============================================
   Final: DS-aligned list appearance (Trello-like)
   - Raised, subtle dual-shadow, no solid border
   - 12px radius, 272px fixed width, flex column
   ============================================= */
#boardPage .column,
#boardPage .archive-column {
  border: 0 none !important;
  border-radius: 12px !important; /* var(--ds-border-radius-300, 12px) */
  background-color: var(--list-bg) !important; /* var(--accent-background, var(--tr-background-list)) */
  box-shadow: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f !important; /* var(--ds-shadow-raised) */
  display: flex !important;
  flex-direction: column !important;
  align-self: flex-start !important;
  width: 272px !important;
  min-width: 272px !important;
  max-width: 272px !important;
  padding-bottom: 4px !important; /* var(--ds-space-050, 4px) */
}

/* Keep hover identical for lists (no extra shadow) */
#boardPage .column:hover,
#boardPage .archive-column:hover {
  box-shadow: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f !important;
}

/* =============================================
   Board spacing refinements (aligned edges)
   - Align list title and card text left edges
   - Keep inline editors aligned with their originals
   ============================================= */
/* Remove extra padding on card text; rely on card's own left padding */
#boardPage .card .card-title,
#boardPage .card .card-description { padding-left: 0 !important; }
/* Normalize list header left margin and pad list title to match card text */
#boardPage .list-header { margin-left: 0 !important; }
#boardPage .card-title { margin-left: 6px !important;margin-top: 15px;margin-bottom: -2px; }
/* Inline editors align with originals */
#boardPage .list-title-input { padding-left: 12px !important; margin-bottom: 14px !important; margin-left: 2px !important;}
#boardPage .card-title-input { margin-top: 15px !important; font-size: 14px !important; padding-left: 6px !important; }

/* List header and counters */
#boardPage .list-header { margin: 2px 4px -8px 0 !important; }
#boardPage .list-title { margin-left: 14px !important; color: #1f2937; letter-spacing: -0.01em; }
#boardPage .count { background: var(--gray-100); color: var(--gray-600); }
#boardPage .column h3 { color: #334155; border-bottom: 1px solid #e2e8f0; margin-bottom: 8px; padding-bottom: 6px; }

#boardPage .cards { padding-top: 8px; }

/* Cards: light, crisp, with accent hairline */
#boardPage .card {
  background: var(--card-bg) !important;
  border: 0 none !important; /* rely on Trello-like raised shadow instead of solid border */
  border-radius: 8px !important; /* tighter radius */
  box-shadow: var(--card-shadow) !important; /* per reference */
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
  position: relative;
  overflow: visible;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Remove left accent bar to align with original theme */
#boardPage .card::before { content: none; }

#boardPage .card:hover {
  background: #F0F1F2 !important;   /* ds-surface-raised-hovered */
  box-shadow: var(--card-shadow) !important; /* keep same shadow (no extra hover) */
  transform: none !important;
}

#boardPage .card.dragging {
  transform: rotate(1deg) scale(1.01);
  box-shadow: 0 12px 26px rgba(16,24,40,0.18) !important;
  border-color: #bfdbfe !important;
}

/* Card title/desc color tuning */
#boardPage .card-title { color: #0f172a; }
#boardPage .card-description { color: #475569; }

/* Card badges + avatars */
#boardPage .badge-icon { background: var(--gray-100); color: var(--gray-700); }
#boardPage .badge-user { background: #1f2937; }
#boardPage .card-badges { color: var(--gray-600); }

/* Card labels: slightly rounded and vivid, but compact */
#boardPage .card-labels { gap: 6px; min-height: 10px; }
#boardPage .label { height: 8px; border-radius: 999px; }

/* Add-card area: blend with list background */
#boardPage .add-card { background: transparent; border-radius: 8px; padding: 6px 2px 2px; }
#boardPage .add-card .task-title-input,
#boardPage .add-card .assignee-select,
#boardPage .add-card .date-input {
  border: 1px solid var(--gray-300);
  background: #ffffff;
}

/* Board scrollbar polishing */
#boardPage .board-container::-webkit-scrollbar-thumb { background: #cbd5e1; }
#boardPage .board-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 看板只读态：隐藏所有修改入口 */
#boardPage.readonly .add-card-link,
#boardPage.readonly .composer,
#boardPage.readonly .add-list-open,
#boardPage.readonly .add-list-form,
#boardPage.readonly .list-archive,
#boardPage.readonly .list-menu,
#boardPage.readonly .card-quick,
#boardPage.readonly .card-quick-actions,
#boardPage.readonly .card-move-button,
#boardPage.readonly .card-insert-slot { display: none !important; }
/* 只读态禁止卡片/列表拖拽 */
#boardPage.readonly .card,
#boardPage.readonly .list { cursor: default; }

/* 看板卡片上的只读锁标记 */
.board-card-readonly {
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.7;
}
/* 看板页标题旁的只读锁标记 */
.board-page-readonly-lock {
    margin-left: 6px;
    font-size: 0.9em;
    opacity: 0.7;
}
/* 看板切换器里只读看板的锁标记 */
.board-switcher-lock {
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.7;
}

/* Drop targets: clearer indication */
#boardPage .cards:has(.card.dragging) .card:not(.dragging) {
  filter: saturate(0.9) opacity(0.92);
}

/* 卡片更干净：细边框+悬浮提升 */
.card {
    background: #fff;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-lg);
    transition: var(--transition);
}
.card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.card-footer {
    border-top: 1px solid var(--gray-200);
}

/* 动作按钮更中性，减少视觉噪音 */
.action-btn,
.archive-btn,
.restore-btn,
.detail-btn {
    width: 28px;
    height: 28px;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    box-shadow: none;
}
.action-btn:hover,
.archive-btn:hover,
.restore-btn:hover,
.detail-btn:hover {
    background: #fff;
    border-color: var(--gray-400);
    transform: translateY(-1px) scale(1.02);
}
/* 左右移动维持轻微色彩提示 */
.move-left { color: #2563eb; }
.move-right { color: #059669; }
.archive-btn { color: #f59e0b; }
.restore-btn { color: #8b5cf6; }
.detail-btn { color: #6366f1; }

/* 添加任务区域更简洁 */
.add-card {
    background: var(--gray-50);
    border: 1px dashed var(--gray-300);
}
.add-card input[type="text"],
.task-title-input,
.assignee-select,
.date-input {
    background: #fff;
    border: 1px solid var(--gray-300);
    box-shadow: none;
}
.add-card input[type="text"]:focus,
.task-title-input:focus,
.assignee-select:focus,
.date-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.add-card button {
    height: 38px;
    border-radius: var(--border-radius-lg);

}

/* 快速访问卡片与项目卡片统一为白底卡片 */
.quick-board-card,
.project-card,
.board-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}
.quick-board-card:hover,
.project-card:hover,
.board-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
    background: #fff;
}

/* 模态更轻，圆角更大 */
.modal-content {
    background: #fff;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius-xl);
}
.edit-modal .modal-header,
.modal-footer {
    background: var(--gray-50);
    border-color: var(--gray-200);
}
.form-group input,
.form-group textarea,
.form-group select {
    background: #fff;
    border: 1px solid var(--gray-300);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* 在线用户小徽章 */
#userList .online-user,
.user-badge {
    background: var(--primary-color);
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
}

/* 可点击文本悬浮更柔和 */
.title-text.clickable:hover,
.description-text.clickable:hover {
    background: rgba(59, 130, 246, 0.12) !important;
}

/* 深色模式（跟随系统） */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #0c1220;
        --gray-100: #0f1629;
        --gray-200: #1b2438;
        --gray-300: #2a3550;
        --gray-400: #3c4762;
        --gray-500: #6b7280;
        --gray-600: #98a2b3;
        --gray-700: #cbd5e1;
        --gray-800: #e5e7eb;
        --gray-900: #f8fafc;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
    }

    body {
        background: linear-gradient(180deg, #0b1220 0%, #0f162a 100%);
        color: var(--gray-800);
    }

    .header {
        background: #0f172a;
        border-bottom: 1px solid var(--gray-300);
    }

    .header button,
    #backToProjects,
    #logoutFromBoard,
    #backToBoard,
    #backToBoardSelect,
    #logoutBtn,
    #logoutFromProject {
        background: #0f172a;
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
        box-shadow: none;
    }
    #exportBtn, #importBtn, #archiveBtn, .btn-primary {
        background: var(--primary-dark) !important;
        color: #fff !important;
    }

    .board-container { background: transparent; }

    .column {
        background: #0f172a;
        border: 1px solid var(--gray-300);
        box-shadow: var(--shadow-sm);
    }
    .column h3 {
        border-bottom: 1px solid var(--gray-300);
        color: var(--gray-700);
    }

    .card {
        background: #0f172a;
        border: 1px solid var(--gray-300);
        box-shadow: var(--shadow-sm);
    }
    .card:hover {
        border-color: var(--primary-light);
        box-shadow: var(--shadow-md);
    }
    .card-title { color: var(--gray-800); }
    .card-description { color: var(--gray-600); }
    .card-footer { border-top: 1px solid var(--gray-300); }

    .action-btn,
    .archive-btn,
    .restore-btn,
    .detail-btn {
        background: #0b1220;
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
    }
    .action-btn:hover,
    .archive-btn:hover,
    .restore-btn:hover,
    .detail-btn:hover { background: #0f172a; }

    .quick-board-card,
    .project-card,
    .board-card {
        background: #0f172a;
        border: 1px solid var(--gray-300);
        box-shadow: var(--shadow-sm);
    }

    .modal-content {
        background: #0f172a;
        border: 1px solid var(--gray-300);
        box-shadow: var(--shadow-lg);
    }
    .edit-modal .modal-header,
    .modal-footer {
        background: #0b1220;
        border-color: var(--gray-300);
        color: var(--gray-700);
    }

    .form-group input,
    .form-group textarea,
    .form-group select,
    .add-card input[type="text"],
    .task-title-input,
    .assignee-select,
    .date-input,
    .inline-title-input,
    .inline-description-textarea,
    .inline-date-input {
        background: #0b1220;
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder,
    .task-title-input::placeholder { color: var(--gray-500); }

    .assignee-dropdown {
        background: #0f172a;
        border: 1px solid var(--gray-300);
        box-shadow: var(--shadow);
    }
    .assignee-option { color: var(--gray-700); }
    .assignee-option:hover { background: rgba(59, 130, 246, 0.18); color: #cfe0ff; }
    .assignee-option.selected { background: rgba(59, 130, 246, 0.22); }

    .title-text.clickable:hover,
    .description-text.clickable:hover {
        background: rgba(59, 130, 246, 0.18) !important;
    }
}

/* =============================================
   现代极简主题微调（排版、徽章、悬浮、拖拽提示）
   ============================================= */
/* 排版与标题层级更清晰 */
.card-title {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.card-description {
    color: var(--gray-600);
}

/* 数量徽章更精致 */
.count {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    border-radius: 999px;
    padding: 0 0.5rem;
    font-weight: 600;
}

/* 顶部导航与面包屑更稳重 */
.board-breadcrumb, .project-breadcrumb {
    letter-spacing: -0.015em;
}

/* 卡片聚焦与悬浮态更柔和 */
.card:hover {
    transform: translateY(-1px);
}
.card:focus-within {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* 负责人与日期为胶囊样式，交互更明显 */
.card-assignee,
.card-deadline {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.card-assignee:hover,
.card-deadline:hover {
    transform: translateY(-1px);
}

/* 拖拽提示（有 :has 支持则增强） */
@supports selector(:has(*)) {
    .cards:has(.card.dragging) .card:not(.dragging) {
        opacity: 0.85;
    }
    .column:has(.card.dragging) {
        outline: 2px dashed var(--gray-300);
        outline-offset: 4px;
    }
}
.card.dragging {
    opacity: 0.9;
    transform: scale(0.998);
    box-shadow: var(--shadow-md);
}
body.dragging-cards {
    cursor: grabbing;
    user-select: none;
}
body.dragging-board {
    cursor: grabbing;
    user-select: none;
}
#boardPage .board-container.drag-scroll-active,
#boardPage .board-container.drag-scroll-active * {
    cursor: grabbing !important;
}
.card-archived {
    opacity: 0.7;
    filter: grayscale(0.1);
}
.card-archived .card-title {
    text-decoration: line-through;
}
.card.drag-hidden {
    display: none !important;
}

/* 顶部添加区域更轻盈 */
.add-card-top {
    background: rgba(0,0,0,0.02);
}
.add-card .keyboard-hint {
    opacity: .7;
}

/* 在线用户徽章间距与样式优化 */
.header .online-users { border: 1px solid var(--gray-300); background: var(--gray-50); }
#userList .online-user { margin-right: 0; }

/* 动作区背景轻微毛玻璃（在支持的浏览器） */
.card-center-actions {
    backdrop-filter: saturate(1.1) blur(2px);
    -webkit-backdrop-filter: saturate(1.1) blur(2px);
    padding: 2px 4px;
    border-radius: 8px;
}

/* 暗色模式微调 */
@media (prefers-color-scheme: dark) {
    .count { background: #0b1220; border-color: var(--gray-300); color: var(--gray-700); }
    .header .online-users { background: #0b1220; border-color: var(--gray-300); }
    .card-center-actions { background: rgba(255,255,255,0.04); }
}

/* 间距：上方添加任务与第一张卡片保持更舒适距离 */
.add-card-top {
    margin-bottom: 0.75rem; /* 分隔顶部添加区与第一张卡片 */
}

/* 拖拽时隐藏中部操作按钮，避免闪烁 */
.card.dragging .card-center-actions { visibility: hidden !important; opacity: 0 !important; }
.dragging-cards .card-center-actions { visibility: hidden !important; opacity: 0 !important; }

/* 红色危险按钮文本对比度修复（始终白字） */
.header .logout-btn,
.header #logoutBtn,
.logout-btn,
#logoutBtn {
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.header .logout-btn:hover,
.header #logoutBtn:hover { filter: brightness(0.95); }

/* 首页/看板选择页：看板图标与卡片优化 */
.quick-boards-grid { gap: 1.25rem; }
.quick-board-card {
    align-items: center;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.quick-board-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}
.board-icon {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    box-shadow: 0 4px 12px rgba(59,130,246,0.25), inset 0 -2px 0 rgba(255,255,255,0.18);
    border: none;
}
.quick-board-card:hover .board-icon { transform: translateY(-1px) scale(1.03); }
.board-details h4 { letter-spacing: -0.01em; }
.board-project {
    background: rgba(59,130,246,0.08);
    color: var(--primary-dark);
}

/* 项目卡片微调，与看板卡片风格一致 */
.project-card { border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.project-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }

/* 暗色模式下首页样式同步优化 */
@media (prefers-color-scheme: dark) {
    .header .logout-btn,
    .header #logoutBtn,
    .logout-btn,
    #logoutBtn { color: #ffffff !important; text-shadow: none; }

    .quick-board-card,
    .project-card { background: #0f172a; border: 1px solid var(--gray-300); box-shadow: var(--shadow-sm); }
    .quick-board-card:hover,
    .project-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }

    .board-icon {
        background: linear-gradient(135deg, #3b82f6, #1e40af);
        box-shadow: 0 6px 14px rgba(30,64,175,0.35), inset 0 -2px 0 rgba(0,0,0,0.25);
    }
    .board-project { background: rgba(59,130,246,0.18); color: #cfe0ff; }
}

/* SVG 图标尺寸与配色（继承容器颜色） */
.board-icon svg { width: 22px; height: 22px; display: block; }

/* 首页与项目页标题与分区留白优化 */
.dashboard-section h2, .board-section h2 { display: flex; align-items: center; gap: .5rem; }
.dashboard-section { margin-bottom: 2.25rem; }
.board-section { margin-bottom: 2rem; }

/* Prevent board header from wrapping into two lines and align content */
.header > .container { display: flex; flex-wrap: nowrap; }
.board-header-left { flex: 1 1 auto; min-width: 0; }
.header .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; }

/* 图标色彩与区域和谐（更柔和、更现代） */
.dashboard-section h2 [data-icon],
.board-section h2 [data-icon] { color: var(--gray-400); }
.dashboard-section h2 [data-icon] svg,
.board-section h2 [data-icon] svg { width: 20px; height: 20px; }

/* 看板卡片左侧图标：柔和底色 + 主色描边 */

/* Board name dropdown caret indicator */
#currentBoardName {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    transition: var(--transition);
}
#currentBoardName:hover {
    background: var(--gray-100);
}
#currentBoardName::before {  /* hide built-in caret; use separate #boardCaret */
    content: none !important;
    display: none !important;
}
.quick-board-card:hover .board-icon {
    background: rgba(59,130,246,0.14);
    border-color: rgba(59,130,246,0.28);
}

/* 项目标注更克制，避免颜色冲突 */
.board-project {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

@media (prefers-color-scheme: dark) {
    .dashboard-section h2 [data-icon] { color: var(--gray-600); }
        .board-project {
        background: #0b1220;
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
    }
}

/* Match board header height and top alignment with homepage */
#boardPage .header { padding: 0 !important; margin-top: 0 !important; }
#boardPage .header > .container { max-width: 1200px !important; margin: 0 auto !important; padding: 1rem 2rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 56px !important; }
/* #boardPage .board-header-left { display: flex; align-items: center; } */
#boardPage .board-breadcrumb { margin: 0; }

/* Ensure project/board select headers keep their spacing */
#projectPage .project-header { margin-bottom: 2rem; }
#boardSelectPage .board-select-header { margin-bottom: 2rem; }

/* 修复"加入项目"按钮图标大小与对齐 */
.create-board-form button,
.projects-header .btn-primary,
.projects-header .btn-secondary { height: 40px; display: inline-flex; align-items: center; gap: 8px; }
.projects-header .btn-secondary .btn-icon svg { width: 18px; height: 18px; }
.projects-header .btn-primary .btn-icon svg { width: 18px; height: 18px; }

/* Archive page header alignment and compact buttons */
#archivePage .header { padding: 0.75rem 0; }
#archivePage .header > .container { padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
#archivePage .header h1 { margin: 0; }
#archivePage .header .header-actions { display: flex; gap: 0.75rem; }
#archivePage .clear-archive-btn { height: 36px; padding: 0 0.875rem; border-radius: 8px; }
/* Ensure danger color and white text inside header (override generic header button) */
#archivePage .header .clear-archive-btn {
    background: var(--danger-color) !important;
    color: #fff !important;
    border: 1px solid transparent;
}
#archivePage .header .clear-archive-btn:hover {
    background: var(--danger-dark) !important;
}

@media (prefers-color-scheme: dark) {
    #archivePage .header .clear-archive-btn {
        background: var(--danger-dark) !important;
        color: #fff !important;
        border-color: transparent;
    }
}

/* 显示看板卡片内的图标（恢复默认） */
.projects-header .header-actions { gap: 0.75rem; }

/* Board and project card icon sizes */
/* Prevent icon flash: hide [data-icon] until injected */
[data-icon]:not(.icon-ready) { visibility: hidden; }

.board-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--primary-color); color: #fff; }
.board-icon svg { width: 18px; height: 18px; }
.project-card .project-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; }
.project-card .project-icon svg { width: 18px; height: 18px; }

/* Harmonize top navbar buttons on project and board-select pages */
#boardSelectPage .board-select-header .header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
#boardSelectPage .board-select-header .header-actions button {
    background: #ffffff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    height: 36px;
    padding: 0 0.875rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
#boardSelectPage .board-select-header .header-actions button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--gray-400);
}
#boardSelectPage .board-select-header .header-actions .btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border-color: var(--gray-300);
}
#boardSelectPage .board-select-header .header-actions .btn-secondary:hover {
    background: #e5e7eb;
}
#boardSelectPage .board-select-header .header-actions .btn-danger,
#boardSelectPage .board-select-header .header-actions .logout-btn {
    background: var(--danger-color);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: var(--shadow);
}
#boardSelectPage .board-select-header .header-actions .btn-danger:hover,
#boardSelectPage .board-select-header .header-actions .logout-btn:hover {
    background: var(--danger-dark);
}

/* Project page top-right logout button consistency */
#projectPage .project-header .logout-btn {
    height: 36px;
    padding: 0 0.875rem;
    border-radius: var(--border-radius);
    background: var(--danger-color);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}
#projectPage .project-header .logout-btn:hover {
    background: var(--danger-dark);
}

/* (revert) remove board-icon overrides to keep original styles */

/* === Trello-like compact overrides (non-destructive) === */
/* 布局与背景更接近 Trello */
body {
    background: #f5f6f8;
}

#boardPage .header {
    background: transparent;
    box-shadow: none;
    padding: 0; /* rely on inner container for spacing */
}

/* Removed generic .header .container overrides to keep page headers aligned via page-specific rules */

.header-actions button,
.header button,
.btn-primary,
.btn-secondary,
.btn-danger {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: none;
}

.header-actions { gap: 0.5rem; }
.online-users { padding: 4px 8px; font-size: 12px; }
.user-badge { padding: 2px 6px; font-size: 11px; }

.board-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    overflow-x: auto;
    height: calc(100vh - 64px);
}

/* 列更窄更紧凑 */
.column, .archive-column {
    width: 272px; /* Trello 常见列宽 */
    min-width: 272px;
    max-width: 272px;
    padding: 8px;
    border-radius: 8px;
    background: #ebecf0; /* Trello 列背景 */
    box-shadow: none;
    border: none;
    overflow-x: hidden;
}

.column h3, .archive-column h3 {
    margin: 0 0 8px 4px;
    padding: 0;
    border: none;
    font-size: 14px;
    color: #44546f;
}

.count {
    background: transparent;
    color: #6b778c;
    padding: 0 4px;
    font-size: 12px;
}

/* 卡片更像 Trello：白底、轻边框、少阴影、紧凑间距 */
.cards { gap: 8px; margin-bottom: 0px; overflow-x: hidden; }
.card {
    border: 1px solid #dfe1e6;
    box-shadow: none;
    border-radius: 8px;
    padding: 8px 10px;
    overflow-x: hidden;
}

.card:hover { background: #fafbfc; border-color: #c1c7d0; }

.card-title { font-size: 14px; margin-bottom: 6px; word-break: break-word; overflow-wrap: anywhere; }
.card-description { font-size: 12px; color: #6b778c; margin-bottom: 6px; max-height: 100px; word-break: break-word; overflow-wrap: anywhere; }

.card-footer, .card-meta { border-top: none; padding-top: 0; margin-top: 4px; color: #6b778c; font-size: 11px; }

.card-assignee { background: #e9f2ff; color: #0c66e4; font-size: 11px; padding: 2px 6px; border-radius: 12px; }
.card-assignee.unassigned { background: #f4f5f7; color: #97a0af; }

.card-deadline { color: #5e6c84; font-size: 11px; }

/* 顶部 inline 操作按钮只在 hover 时显现，体积更小 */
.card-center-actions { gap: 6px; }
.card-center-actions .action-btn,
.card-center-actions .archive-btn,
.card-center-actions .restore-btn,
.card-center-actions .detail-btn {
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
}

/* 添加卡片输入区简化 */
.add-card { margin-top: 8px; }
.input-row-inline { gap: 6px; }
.left-inputs { gap: 6px; }
.task-title-input { height: 32px; padding: 0 8px; font-size: 13px; }
.assignee-select, .date-input { height: 32px; font-size: 12px; }

/* 面包屑标题更紧凑 */
.board-breadcrumb { color: #374151; margin: 0; }

/* 归档页面和普通列保持一致风格 */
.archive-container { padding: 12px; }
.archive-column { background: #ebecf0; }

/* 登录与项目页整体字号适配最新设计 */
.login-form input, .login-form button { font-size: 15px; }
.project-header h1, .board-select-header h1, #boardPage .board-breadcrumb { font-size: 20px; }
/* Normalize header title alignment across pages */
.project-header h1, .board-select-header h1 {
    margin: 0 !important;
    text-align: left !important;
    color: #1f2937 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-boards-grid, .projects-grid { gap: 12px; }
.project-card, .quick-board-card { padding: 10px; border-radius: 8px; }

/* 辅助色调更低干扰 */
.title-text.clickable:hover, .description-text.clickable:hover { background: #e9f2ff !important; }
.card-assignee.clickable:hover { background: #e1ecff !important; transform: none !important; }

/* 滚动优化：列容器可滚动，卡片区域填充剩余高度 */
.column { max-height: calc(100vh - 88px); overflow-y: auto; }

/* === Trello-like refinements (phase 2) === */
:root {
    --board-bg-url: none; /* e.g., url('https://images.unsplash.com/photo-...') */
}

/* 可选：看板背景图（与 Trello 类似的全屏背景） */
#boardPage {
    background-image: none !important;
}

/* 头部保持单行并收紧 */
#boardPage .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

/* .board-header-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } */
.board-breadcrumb { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { flex: 0 0 auto; flex-wrap: nowrap; }

/* 列更接近 Trello 的视觉（浅灰半透明 + 细边框） */
.column, .archive-column {
    background: rgba(241, 242, 244, 0.92);
    border: 1px solid #dfe1e6;
}

/* 卡片 hover 更克制 */
.card:hover {
    transform: none;
    box-shadow: none;
}

/* 拖拽时隐藏中部按钮避免闪烁 */
.card.dragging .card-center-actions,
.dragging-cards .card-center-actions {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 退出按钮的对比度修正 */
.header .logout-btn,
.header #logoutBtn,
.logout-btn,
#logoutBtn {
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.header .logout-btn:hover,
.header #logoutBtn:hover { filter: brightness(0.95); }

/* === Trello design tokens & minimal card UI === */
:root{
    --list-width:272px;
    --list-gap:12px;
    --card-radius:10px;
    --card-padding:10px;
    --card-shadow:0 1px 0 rgba(9,30,66,.25);
    --card-hover-shadow:0 4px 8px rgba(9,30,66,.25);
    --badge-gap:6px;
    --label-height:8px;
    --muted:#6b7280;
    --border:#e5e7eb;
    --bg:#f6f7f9;
    --card-bg:#fff;
    --board-bg-url: none;
    --header-fg:#374151; /* default breadcrumb text */
    --header-link:#3b82f6;
}

/* === Wallpaper: apply to whole board page (header + content) === */
#boardPage {
    background-image: none !important;
    background-color: var(--bg) !important;
}

#boardPage.has-wallpaper {
    background-image: var(--board-bg-url) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Let content area be transparent so page wallpaper shows through */
#boardPage.has-wallpaper .board-container {
    background-color: transparent !important;
    background-image: none !important;
}

#boardPage:not(.has-wallpaper) .board-container {
    background-color: var(--bg) !important;
    background-image: none !important;
}

/* Frosted glass header over wallpaper */
#boardPage.has-wallpaper .header {
    background: rgba(255,255,255,0.55) !important;
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    backdrop-filter: saturate(1.2) blur(70px);
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.35) !important;
}

#boardPage:not(.has-wallpaper) .header {
    background: transparent !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    /* box-shadow: none !important; */
    border-bottom: 1px solid var(--gray-200) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Adaptive header text via CSS vars (dark/light) */
#boardPage .header.header-text-light { --header-fg:#ffffff; --header-link:#e5edff; }
#boardPage .header.header-text-dark { --header-fg:#374151; --header-link:#3b82f6; }

/* Empty card title placeholder */
.card-title.is-empty,
#boardPage .card-title.is-empty,
#archivedCards .card .card-title.is-empty {
    color: #94a3b8 !important;
    font-weight: 500;
}
@media (prefers-color-scheme: dark) {
    .card-title.is-empty,
    #boardPage .card-title.is-empty,
    #archivedCards .card .card-title.is-empty {
        color: #64748b !important;
    }
}

/* Suppress hover flash when cards move between groups */
#boardPage.suppress-card-hover .card:hover {
    background: var(--card-bg) !important;
    box-shadow: var(--card-shadow) !important;
}
#boardPage.suppress-card-hover .card.hover-lock {
    background: #F0F1F2 !important;
    box-shadow: var(--card-shadow) !important;
}
#boardPage.suppress-card-hover .card {
    transition: none !important;
}
#boardPage.suppress-card-hover .card-quick,
#boardPage.suppress-card-hover .card-quick-copy,
#boardPage.suppress-card-hover .card-quick-trash,
#boardPage.suppress-card-hover .card-quick-archive,
#boardPage.suppress-card-hover .card-quick-delete,
#boardPage.suppress-card-hover .card-quick-star,
#boardPage.suppress-card-hover .card-quick-defer {
    opacity: 0 !important;
    transition: none !important;
}
#boardPage.suppress-card-hover .card.hover-lock .card-quick,
#boardPage.suppress-card-hover .card.hover-lock .card-quick-copy,
#boardPage.suppress-card-hover .card.hover-lock .card-quick-trash,
#boardPage.suppress-card-hover .card.hover-lock .card-quick-archive,
#boardPage.suppress-card-hover .card.hover-lock .card-quick-delete,
#boardPage.suppress-card-hover .card.hover-lock .card-quick-star,
#boardPage.suppress-card-hover .card.hover-lock .card-quick-defer {
    opacity: 1 !important;
}
#boardPage.suppress-card-hover .card-starred .card-quick-star {
    opacity: 1 !important;
}
#boardPage.suppress-card-hover .card-move-button {
    opacity: 0.15 !important;
    transition: none !important;
}
#boardPage.suppress-card-hover .card.hover-lock .card-move-button {
    opacity: 0.7 !important;
}


#boardPage .board-breadcrumb #breadcrumbHome,
#boardPage .board-breadcrumb .project-link {
    color: var(--header-fg) !important;
    /* color: #000000 !important; */
    backdrop-filter: none !important;
    /* mix-blend-mode: difference; */
    /* border-bottom-color: rgba(255,255,255,0.4) !important; */
}

#boardPage .board-breadcrumb #breadcrumbHome:hover,
#boardPage .board-breadcrumb .project-link:hover {
    /* color: #000000 !important; */
    border-bottom-color: rgba(255,255,255,0.6) !important;
    /* mix-blend-mode: exclusion; */
}


/* board/list */
.board-container{ display:flex; gap:var(--list-gap); padding:12px; overflow:auto; background:var(--bg); height:calc(100vh - 64px); }
/* empty-board is not used for centering; padding-left is computed in JS */
.column{ width:var(--list-width); min-width:var(--list-width); max-width:var(--list-width); background:transparent; box-shadow:none; padding:0; border:none; }
.column h3{ margin:6px 6px 8px; padding:0; border:none; font-size:14px; }
.cards{ display:flex; flex-direction:column; gap:8px; padding:0 6px 8px; }

/* minimal card front */
.card{ background:var(--card-bg); border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:var(--card-padding); border:1px solid var(--border); }
.card:hover{ box-shadow:var(--card-hover-shadow); }
.card .card-title{ font-size:14px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.card .card-description{ display:none !important; }
.card .card-footer{ display:none !important; }

/* Card group divider for deferred section */
.card-group-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 2px 6px;
    font-size: 11px;
    color: #64748b;
    letter-spacing: 0.02em;
    user-select: none;
    pointer-events: none;
}
.card-group-divider::before,
.card-group-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
    .card-group-divider { color: #94a3b8; }
    .card-group-divider::before,
    .card-group-divider::after { background: var(--gray-300); }
}

.card-move-button {
    position: absolute;
    top: 50%;
    border: none;
    background: rgba(255,255,255,0.85);
    background-clip: content-box;
    border-radius: 50%;
    color: #64748b;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    width: 44px;
    height: 44px;
    /* Expand clickable area with padding */
    padding: 8px;
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    opacity: 0.15; /* Always slightly visible */
    pointer-events: auto; /* Always clickable */
    transition: opacity .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
    z-index: 2;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
}
.card:hover .card-move-button {
    opacity: 0.7;
}
.card-move-button:hover {
    opacity: 1;
    color: #1e40af;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
.card-move-left { left: -44px; }
.card-move-right { right: -44px; }


@media (prefers-color-scheme: dark) {
    .card-move-button {
        background: rgba(30,41,59,0.9);
    color: #64748b;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
    .card-move-button:hover {
        color: #93c5fd;
        background: #1e293b;
        box-shadow: 0 3px 12px rgba(0,0,0,0.45);
    }
}

.card-labels{ display:flex; gap:4px; margin-bottom:6px; min-height:var(--label-height); }
.label{ height:var(--label-height); border-radius:6px; flex:0 0 36px; }
.label-red{ background:#f87171; } .label-green{ background:#34d399; }
.label-blue{ background:#60a5fa; } .label-yellow{ background:#fbbf24; } .label-purple{ background:#a78bfa; }

.cards[data-empty="true"] {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 8px;
}

.card-badges{ display:flex; flex-wrap:wrap; gap:var(--badge-gap); margin-top:6px; color:var(--muted); font-size:12px; }
.badge{ display:inline-flex; align-items:center; gap:4px; }
.badge-user{ width:20px; height:20px; border-radius:50%; background:#111; color:#fff; justify-content:center; font-size:11px; }
.badge-due.overdue{ color:#ef4444; }
.badge-due.soon{ color:#f59e0b; }

.card-quick{ position:absolute; top:6px; right:6px; opacity:0; transition:opacity .12s; border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; }
.card.inline-editing .card-quick,
.card.inline-editing:hover .card-quick { display: none !important; }
.card:hover .card-quick{ opacity:1; }

/* drawer modal (right panel) */
#cardModal[hidden]{ display:none; }
#cardModal{ position:fixed; inset:0; z-index:1100; }
#cardModal .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
#cardModal .modal-panel{ position:absolute; right:0; top:0; height:100%; width:min(720px, 92vw); background:#fff; box-shadow:-8px 0 24px rgba(0,0,0,.2); padding:20px; overflow:auto; transform:translateX(100%); transition:transform .15s ease-out; }
#cardModal.open .modal-panel{ transform:translateX(0); }

/* drawer content sections */
.drawer-section{ margin-bottom:16px; }
.drawer-section h4{ font-size:14px; margin:0 0 8px; color:#111827; }
.drawer-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.drawer-row input[type="text"], .drawer-row textarea, .drawer-row select, .drawer-row input[type="date"]{ width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:14px; }
.drawer-row textarea{ min-height:120px; resize:vertical; }
.drawer-labels{ display:flex; gap:8px; flex-wrap:wrap; }
.drawer-label{ width:28px; height:16px; border-radius:6px; cursor:pointer; border:1px solid rgba(17,24,39,.08); }
.drawer-badges{ display:flex; gap:8px; color:var(--muted); font-size:12px; }

/* util */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* === Minimal Trello-like card and collapsed add form (compact) === */
.card {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: pointer;
    position: relative;
}
.card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.15); }

/* title clamp to 3 lines */
.card .card-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* hide verbose areas from old layout */
.card .card-description, .card .card-footer { display: none !important; }

/* badges (icons only) */
.card-badges { display:flex; align-items:center; gap:8px; margin-top:6px; color:#6b7280; font-size:12px; }
.badge-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; }
.badge-icon.due.overdue { color: #ef4444; }
.badge-user { width:20px; height:20px; border-radius:50%; background:#111827; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; margin-left:auto; }

/* hover pencil */
.card-quick { position:absolute; top:6px; right:6px; opacity:0; transition:opacity .12s; border:0; background:transparent; font-size:16px; line-height:1; cursor:pointer; }
.card:hover .card-quick { opacity:1; }

/* collapsed add card */
.add-card.collapsed .input-row-inline { display: none; }
.add-card.collapsed .add-card-link { display: inline-block; }
.add-card .add-card-link { display:none; color:#0c66e4; background:transparent; border:0; padding:4px 6px; cursor:pointer; font-size:13px; }
/* .add-card .add-card-link:hover { text-decoration: underline; } */

/* === Trello-like lists & composer visuals === */
.list { background: #ebecf0; border: 1px solid #dfe1e6; border-radius: 8px; padding: 8px; width: var(--list-width); min-width: var(--list-width); max-width: var(--list-width); display:flex; flex-direction:column; gap:8px; }
.list-header { display:flex; align-items:center; justify-content:space-between; margin: 2px 4px 6px; cursor: grab; -webkit-user-select: none; user-select: none; }
.list-title { font-size: 14px; font-weight:600; margin:0; cursor: text; -webkit-user-drag: none; user-select: text; word-break: break-word; overflow-wrap: anywhere; }
.list-title-input { width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px; font-weight:600; background:#fff; }
.list-menu { width:28px; height:28px; border:0; background:transparent; border-radius:6px; color:#6b778c; cursor:pointer; }
.list-menu:hover { background:rgba(9,30,66,.08); }

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

/* composer inside list */
.card-composer { margin-top:auto; }
.card-composer .composer-open { display:inline-block; color:#0c66e4; background:transparent; border:0; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; }
.card-composer .composer-open:hover { background:rgba(9,30,66,.06); }
.card-composer .composer[hidden] { display:none; }
.card-composer textarea { width:100%; min-height:72px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:14px; resize:vertical; box-shadow:0 1px 0 rgba(9,30,66,.1); background:#fff; }
.card-composer .composer-actions { display:flex; align-items:center; gap:8px; margin-top:6px; }
.card-composer .btn-primary { padding:6px 10px; border-radius:6px; border:0; background:#0c66e4; color:#fff; }
.card-composer .composer-cancel { width:28px; height:28px; border:0; border-radius:6px; background:transparent; cursor:pointer; color:#0c66e4; font-weight:700; font-size:18px; }
.card-composer .composer-cancel:hover { background:rgba(12,102,228,.10); color:#0b5bd7; }

/* add another list entry */
.add-list { background: transparent; border:0; border-radius:8px; width: var(--list-width); min-width: var(--list-width); max-width: var(--list-width); display:flex; align-items:flex-start; }
.add-list .add-list-open { width:100%; min-height:40px; text-align:left; background: transparent; border:1px dashed transparent; border-radius:8px; color:#44546f; padding:8px 10px; cursor:pointer; transition: background .15s ease, border-color .15s ease; }
.add-list .add-list-open:hover { background: rgba(236,238,240,.55); border-color: #dfe1e6; }
.add-list .add-list-form { width:100%; }
.add-list .add-list-form input { width:100%; height:36px; border:1px solid var(--border); border-radius:8px; padding:0 10px; }
.add-list .actions { display:flex; gap:8px; margin-top:6px; }
.add-list .actions .btn-primary { padding:6px 10px; border-radius:6px; border:0; background:#0c66e4; color:#fff; }
.add-list .add-list-cancel { padding:6px 10px; border-radius:6px; border:0; background:transparent; }

/* inline card title input */
.card-title-input { width:100%; border:1px solid var(--border); border-radius:6px; padding:2px 8px 6px; font-size:14px; font-weight:600; line-height: 1.28; resize: none; overflow: hidden; }

/* title spacing and button alignment */
.card .card-title { padding-right: 28px; display: block; }
.card-quick { top: 2px; line-height: 1; }

/* tighten card spacing and list paddings */
.board-container { gap: var(--list-gap); } /* padding: 12px !important; */
.list { padding: 6px; gap: 6px; }
.cards { gap: 6px; }
.card { padding: 8px 10px; margin-bottom: 6px; }
/* reduce distance from card to list border */
.list .cards { padding: 2px; }

/* composer sits right after last card, compact paddings */
.card-composer { margin-top: 0; }
.card-composer textarea { min-height: 56px; padding: 8px; }
.card-composer .btn-primary { height: 32px; }
.card-composer .composer-open { width: 100%; text-align: left; color:#0c66e4; }

/* hover pencil / open-details button */
.card-quick { position:absolute; top:6px; right:6px; opacity:0; transition:opacity .12s; border:0; background:transparent; font-size:16px; line-height:1; cursor:pointer; color:#44546f; }
.card:hover .card-quick { opacity:1; }

/* add-card open button matches list background */
.card-composer .composer-open { width: 100%; text-align: left; color:#44546f; background: #ebecf0; border: 1px dashed #dfe1e6; }
.card-composer .composer-open:hover { background:#e3e5e9; }

/* composer state toggle */
.card-composer:not(.is-open) .composer { display:none; }
.card-composer.is-open .composer-open { display:none; }

/* list dragging visual */
.list-header { cursor: grab; }
.list-header:active { cursor: grabbing; }
.list.dragging { box-shadow: 0 16px 32px rgba(9,30,66,.25), 0 8px 16px rgba(9,30,66,.15); opacity: .95; cursor: grabbing; border-radius: 8px; }

.list-drag-placeholder { background: rgba(9,30,66,.08); border: 2px dashed #a0a4aa; border-radius: 8px; flex-shrink: 0; }

/* textual assignee and deadline chips (previous style) */
.card-badges { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.card-assignee { font-weight:500; color:#0c66e4; background:#e9f2ff; padding:2px 8px; border-radius:12px; font-size:12px; border:2px solid transparent; }
.card-assignee.unassigned { color:#97a0af; background:#f4f5f7; }
.card-deadline { background:#f4f5f7; color:#57606a; padding:2px 8px; border-radius:12px; font-size:12px; border:2px solid transparent; display:inline-flex; align-items:center; min-height:22px; }
.card-deadline.unset { color:#97a0af; }
.card-assignee.clickable:hover { background:#e1ecff !important; }
.card-deadline.clickable:hover { background:#e9ecef !important; }

/* === Compact card height tweaks === */
.cards { gap: 0px; }
.list { padding: 4px; }
.card { padding: 0px 8px; margin-top: 0px;margin-bottom: 10px; }
.card .card-title { font-size: 14px; line-height: 1.25; -webkit-line-clamp: 2; }
.card-badges { gap: 6px; margin-top: 4px; }
.card-assignee, .card-deadline { padding: 1px 6px; font-size: 11px; min-height: 18px; }

/* place composer right after last card */
.list .cards { flex: 0 0 auto; }

/* blend add-card button with list background */
.card-composer { margin-top: 0; padding: 4px 6px; background: transparent; }
.card-composer .composer-open {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 6px 12px 6px 8px; /* ds-space-075 6px, ds-space-150 12px, ds-space-100 8px */
  border-radius: 8px; /* ds-border-radius-200 */
  background: transparent;
  border: 0;
  color: #44546f; /* ds-text-subtle */
  text-align: left;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  gap: 6px;
}

/* .card-composer .composer-open { display:inline-flex; align-items:center; gap:6px; width:100%; text-align:left; color:#44546f; background: transparent; border: 0; padding:6px 8px; border-radius:6px; } */

.card-composer .composer-open::before { content:'+'; font-weight:600; }
.card-composer .composer-open:hover { background: rgba(9,30,66,.06); }

.card-insert-slot {
    position: relative;
    height: 10px;
    min-height: 0;
    margin: -10px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 2;
}

.card:hover + .card-insert-slot,
.card-insert-slot:hover,
.card-insert-slot:focus-within,
.card-insert-slot.is-open {
    opacity: 1;
}

.card-insert-line {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 50%;
    border-top: 2px dashed #b7bdc8;
}

.card-insert-button {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid #c9d1dd;
    border-radius: 8px;
    background: #ffffff;
    color: #44546f;
    box-shadow: 0 1px 3px rgba(9, 30, 66, 0.18);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.card-insert-button:hover,
.card-insert-button:focus-visible {
    background: #f8fafc;
    border-color: #94a3b8;
}

.card:hover + .card-insert-slot .card-insert-button,
.card-insert-slot:hover .card-insert-button,
.card-insert-slot:focus-within .card-insert-button,
.card-insert-slot.is-open .card-insert-button {
    pointer-events: auto;
}

.card-insert-slot.is-open {
    height: auto;
    display: block;
    margin: 0 4px 10px;
}

.card-insert-slot.is-open .card-insert-line,
.card-insert-slot.is-open .card-insert-button {
    display: none;
}

.card-insert-form[hidden] {
    display: none !important;
}

.card-insert-slot.is-open .card-insert-form {
    display: block;
}

.card-insert-form textarea {
    width: 100%;
    min-height: 40px;
    max-height: 96px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
    line-height: 1.35;
    resize: vertical;
    background: #fff;
    box-shadow: 0 1px 0 rgba(9, 30, 66, 0.10);
}

.card-insert-form textarea::placeholder {
    color: #7a869a;
}

.card-insert-form .composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.card-insert-form .btn-primary {
    height: 32px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 0;
    background: #0c66e4;
    color: #fff;
}

.card-insert-form .composer-cancel {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: #0c66e4;
    font-weight: 700;
    font-size: 18px;
}

body.dragging-cards .card-insert-slot {
    display: none;
}

/* card dragging placeholder */
.card-placeholder {
    background: rgba(236,238,240,.6);
    border: 2px dashed #d0d4da;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px rgba(9,30,66,.05), 0 3px 6px rgba(9,30,66,.12);
    min-height: 44px;
    margin: 0 0 10px;
}

/* replace icons: list menu delete X and edit pencil */
.list .list-header .list-menu { color: #ef4444; font-weight: 700; }
.list .list-header .list-menu::before { content: '×'; font-size: 16px; }
.list .list-header .list-menu { width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; }

/* card edit pencil (left arrow-like) */
.card-quick { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.card-quick::before { content: '✎'; }

/* remove dashed border for add buttons */
.add-list .add-list-open { border: 1px dashed transparent; background: transparent; }
.card-composer .composer-open { border: 0; }

/* extra-compact card top spacing */
.card { padding-top: 4px; padding-bottom: 6px; }

/* list delete button hover only */
.list .list-header .list-menu { opacity: 0; transition: opacity .12s; }
.list:hover .list-header .list-menu { opacity: 1; }

/* deadline chip remove emoji spacing */
.card-deadline { padding-left: 6px; }

/* card edit pencil left-oriented */
.card-quick { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; }
.card-quick::before { content: ''; }
.card-quick { mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 7L17 10L9 18H6V15L14 7Z" fill="black"/></svg>') no-repeat center / 16px 16px; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M14 7L17 10L9 18H6V15L14 7Z\" fill=\"black\"/></svg>') no-repeat center / 16px 16px; background-color:#44546f; }
.card:hover .card-quick { background-color:#2e3a59; }

/* hide empty labels container */
.card-labels:empty { display: none !important; }

/* left align lists (columns) */
.board-container { justify-content: center; }

/* header alignment like home/project: left title, right buttons */
.header > .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
#boardPage .header .container { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: nowrap; }


/* refined: only date/user align right; keep other badges left */
.card .card-badges { justify-content: flex-start; }
.card .card-badges:has(.card-deadline) .card-deadline { margin-left: auto; }
.card .card-badges:not(:has(.card-deadline)) .card-assignee { margin-left: auto; }
/* lower title a bit more */
.card .card-title { margin-top: 6px; }

#boardPage .header {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#boardPage .header > .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 1rem 2rem !important; /* match other pages */
    min-height: 56px !important;   /* consistent navbar row height */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* === Final archive page centering === */
#archivePage .archive-container {
  max-width: 1200px !important;
  margin: 0 auto !important; /* center horizontally */
  padding: 16px 12px !important;
  display: flex !important;
  justify-content: center !important;
}
/* Let the list breathe a bit wider on desktop */
#archivePage .archive-column {
  width: 100% !important;
  max-width: 1200px !important;
}
/* Use responsive grid for archived cards to reduce empty space */
#archivedCards.cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px)) !important;
  justify-content: start !important; /* align cards to left */
  gap: 8px !important;
}
#archivedCards .card { margin: 0 !important; padding: 6px 8px !important; border-radius: 6px !important; box-shadow: none !important; border: 1px solid var(--gray-200) !important; background: #fff !important; }
#archivedCards .card:hover { transform: none !important; box-shadow: var(--shadow-sm) !important; }
#archivedCards .card .card-labels { display: none !important; }
#archivedCards .card .card-title { font-size: 12.5px !important; line-height: 1.3 !important; margin: 0 0 2px 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#archivedCards .card .card-description, #archivedCards .card .card-footer { display: none !important; }
#archivedCards .card .card-badges { margin-top: 2px !important; gap: 4px !important; font-size: 10px !important; }
#archivedCards .card-actions-row { margin-top: 4px !important; }
#archivedCards .restore-chip { height: 20px !important; padding: 0 6px !important; font-size: 11px !important; border-radius: 5px !important; }
#boardPage .board-header-left { min-width: 0; }
#boardPage .board-breadcrumb { margin: 0; text-align: left; /* keep title left */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* prevent title from taking too much width */ }

/* Board switcher dropdown */
.board-switcher-menu {
    position: fixed;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 260px;
    max-width: 360px;
    max-height: 380px;
    overflow: auto;
}
.board-switcher-header {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: inherit;
}
.board-switcher-search {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}
.board-switcher-create {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--gray-300);
    background: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
}
.board-switcher-create:hover { background: #e5e7eb; }
.board-switcher-create:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
    color: #9ca3af;
}

.board-switcher-list { padding: 6px 0; }
.board-switcher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-switcher-item[type="button"],
button.board-switcher-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}
.board-switcher-item:hover { background: #f3f4f6; }
.board-switcher-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.board-switcher-label { overflow: hidden; text-overflow: ellipsis; }
.board-switcher-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.board-switcher-rename { width: 22px; height: 22px; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; color: #64748b; cursor: pointer; }
.board-switcher-rename:hover { background: #fff; color: #374151; border-color: #d1d5db; }
.board-switcher-empty { padding: 16px; text-align: center; color: #6b7280; }

@media (prefers-color-scheme: dark) {
    .board-switcher-menu { background: #0f172a; border-color: var(--gray-300); }
    .board-switcher-header { border-bottom-color: var(--gray-300); }
    .board-switcher-search { background: #0b1220; color: #e5e7eb; border-color: var(--gray-300); }
    .board-switcher-create { background: #111827; color: #e5e7eb; border-color: var(--gray-300); }
    .board-switcher-create:hover { background: #1f2937; }
    .board-switcher-create:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: #111827;
        color: #6b7280;
    }
    .board-switcher-item:hover { background: #111827; }
    .board-switcher-item.active { background: #112042; color: #93c5fd; }
    .board-switcher-rename { background: #0f172a; color: #9ca3af; border-color: var(--gray-300); }
    .board-switcher-rename:hover { background: #111827; color: #e5e7eb; border-color: var(--gray-300); }
}

/* Toasts */
.toast-container {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}
.toast {
    background: rgba(17, 24, 39, 0.96);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    transform: translateY(8px);
    opacity: 0;
    transition: all .25s ease;
    max-width: 320px;
}
.toast-action {
    display: flex;
    align-items: center;
    gap: 12px;
}
.toast-message { flex: 1 1 auto; }
.toast-action-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}
.toast-action-btn:hover { background: rgba(255, 255, 255, 0.28); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { background: #047857; }
.toast-error { background: #b91c1c; }
.toast-info { background: #1f2937; }

/* Ensure modal-header generic class shares styles */
.modal-header { background: #f8fafc; border-bottom: 1px solid #e2e8f0; color: #1e293b; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }

@media (prefers-color-scheme: dark) {
    .toast { background: rgba(0,0,0,.85); }
    .toast-info { background: #111827; }
}

/* archive quick button on card - compact, neutral */
.card-quick-archive {
    position: absolute;
    top: 2px; /* align with .card-quick */
    right: 36px; /* 6px gap from edit (24px icon + 6px) */
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background-color .12s, box-shadow .12s, border-color .12s, color .12s;
    /* use SVG background for icon so hover background is visible */
    mask: none; -webkit-mask: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    color: #6b7280; /* icon color */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z"/></svg>');
}
.card:hover .card-quick-archive { opacity: 1; }
.card-quick-archive:hover { background-color: #eef2ff; border-color: #c7d2fe; box-shadow: 0 2px 6px rgba(0,0,0,0.18); color: #1e40af; }

@media (prefers-color-scheme: dark) {
    .card-quick-archive { color: #cbd5e1; }
    .card-quick-archive:hover { background-color: rgba(255,255,255,0.08); border-color: var(--gray-300); box-shadow: 0 2px 6px rgba(0,0,0,0.45); color: #93c5fd; }
}

/* Archive page refinements */
.archive-container {
    max-width: 920px;
    padding: 16px;
}
.archive-column {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 12px;
}
.archive-column h3 {
    margin: 0 0 10px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--gray-200);
    color: #374151;
}
.archive-column .cards { gap: 8px; }
.archive-column .card { background: #fff; border: 1px solid var(--gray-200); opacity: 1; }
.archive-column .card:hover { background: #fafafa; }

/* empty state alignment */
#archivedCards:empty::before {
    content: '暂无归档任务';
    display: block;
    text-align: center;
    color: #6b7280;
    padding: 24px 0;
}

/* Dark mode tweaks for archive */
@media (prefers-color-scheme: dark) {
    .card-quick-archive { background: #d97706; }
    .archive-column { background: #0f172a; border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
    .archive-column h3 { border-bottom-color: var(--gray-300); color: var(--gray-700); }
    #archivedCards:empty::before { color: var(--gray-700); }
}

/* restore chip on archived cards */
.card-actions-row { margin-top: 8px; display: flex; justify-content: flex-end; }
.restore-chip { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--gray-300); background: #f3f4f6; color: #374151; cursor: pointer; font-size: 12px; }
.restore-chip:hover { background: #e5e7eb; }

/* Archive page header (align with project header) */
#archivePage .header {
    background: #ffffff;
    border-bottom: 1px solid var(--gray-200);
    padding: 0.75rem 0;
}
#archivePage .header > .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#archivePage .header h1 { font-size: 20px; margin: 0; color: #1f2937; }
#archivePage .header .header-actions { display: flex; gap: 0.75rem; }

@media (prefers-color-scheme: dark) {
    #archivePage .header { background: #0f172a; border-bottom-color: var(--gray-300); }
    #archivePage .header h1 { color: var(--gray-700); }
}

/* === Final overrides: unify quick icons alignment and hover visuals (refined) === */
.card-quick,
.card-quick-archive {
    position: absolute;
    top: -8px; /* align to original edit button baseline */
    width: 28px;
    height: 28px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .12s, background-color .12s, border-color .12s, box-shadow .12s, color .12s;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #64748b; /* neutral icon */
    z-index: 6;
}
.card:hover .card-quick,
.card:hover .card-quick-archive { opacity: 1; }

/* Edit (pencil) */
.card-quick {
    right: 82px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42L18.37 3.29a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.83z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
}

/* Archive (check) */
.card-quick-archive {
    right: 48px; /* positioned to the left of delete */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
}

/* Star (favorite) */
.card-state-star {
    position: absolute;
    top: -8px;
    left: 18px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    font-size: 16px;
    line-height: 1;
    z-index: 7;
    pointer-events: none;
}
#boardPage.readonly .card-state-star {
    display: inline-flex !important;
    opacity: 1 !important;
}
.card-quick-star {
    position: absolute;
    top: -8px;
    left: 18px;
    right: auto;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: transparent;
    opacity: 0;
    transition: opacity .12s, background-color .15s, border-color .15s, box-shadow .15s, color .15s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-size: 16px;
    line-height: 1;
    z-index: 6;
}
.card:hover .card-quick-star { opacity: 1; }
.card-starred .card-quick-star { opacity: 1; }
.card-quick-star.active { color: #f59e0b; }
.card-quick-star:hover { background-color: #ffedd5; border-color: #fdba74; box-shadow: 0 2px 6px rgba(0,0,0,0.15); color: #d97706; }
.card-quick-star.active:hover { color: #b45309; }
#boardPage .card:hover .card-quick-star,
#boardPage .card:hover .card-quick-defer,
#boardPage .card-starred .card-quick-star { opacity: 1; }
#boardPage .card:hover .card-quick-star,
#boardPage .card:hover .card-quick-defer { opacity: 1 !important; }
#boardPage .card:hover .card-quick-star,
#boardPage .card:hover .card-quick-defer,
#boardPage .card-starred .card-quick-star {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
}

/* Defer (postpone) */
.card-quick-defer {
    position: absolute;
    top: -8px;
    right: 184px; /* left of copy */
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: transparent;
    opacity: 0;
    transition: opacity .12s, background-color .15s, border-color .15s, box-shadow .15s, color .15s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-size: 16px;
    line-height: 1;
    z-index: 6;
}
.card:hover .card-quick-defer { opacity: 1; }
.card-quick-defer.active { color: #0ea5e9; }
.card-quick-defer:hover { background-color: #e0f2fe; border-color: #bae6fd; box-shadow: 0 2px 6px rgba(0,0,0,0.15); color: #0284c7; }
.card-quick-defer.active:hover { color: #0369a1; }

/* Hover/Focus visuals: soft blue, clear on white backgrounds */
.card-quick:hover,
.card-quick-archive:hover { background-color: #eef2ff; border-color: #dbeafe; box-shadow: 0 2px 6px rgba(0,0,0,0.12); color: #1e40af; }
.card-quick:focus-visible,
.card-quick-archive:focus-visible { outline: none; background-color: #e8edff; border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,0.18); color: #1e3a8a; }
.card-quick:focus,
.card-quick-archive:focus { outline: none; background-color: #e8edff; border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,0.18); color: #1e3a8a; }

@media (prefers-color-scheme: dark) {
    .card-quick,
    .card-quick-archive { color: #cbd5e1; }
    .card-quick:hover,
    .card-quick-archive:hover { background-color: rgba(255,255,255,0.08); border-color: var(--gray-300); box-shadow: 0 2px 6px rgba(0,0,0,0.45); color: #93c5fd; }
    .card-quick:focus-visible,
    .card-quick-archive:focus-visible { background-color: rgba(255,255,255,0.10); border-color: var(--gray-300); box-shadow: 0 0 0 3px rgba(99,102,241,0.28); color: #bfdbfe; }
    .card-quick-star { color: #cbd5e1; }
    .card-starred .card-quick-star,
    .card-quick-star.active { color: #fbbf24; }
    .card-quick-star:hover { background-color: rgba(255,255,255,0.08); border-color: var(--gray-300); box-shadow: 0 2px 6px rgba(0,0,0,0.45); color: #fde68a; }
    .card-quick-defer { color: #cbd5e1; }
    .card-quick-defer.active { color: #7dd3fc; }
    .card-quick-defer:hover { background-color: rgba(255,255,255,0.08); border-color: var(--gray-300); box-shadow: 0 2px 6px rgba(0,0,0,0.45); color: #bae6fd; }
    #boardPage .card:hover .card-quick-star,
    #boardPage .card:hover .card-quick-defer,
    #boardPage .card-starred .card-quick-star {
        background-color: rgba(15,23,42,0.9);
        border-color: var(--gray-300);
        box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
}

/* Fix legacy mask and enforce hover/focus for quick actions */
.card-quick-actions {
    position: absolute;
    top: -8px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 6;
    pointer-events: none;
}
.card-quick-actions-left { left: 18px; }
.card-quick-actions-right { right: 14px; }
.card-quick-actions .card-quick,
.card-quick-actions .card-quick-copy,
.card-quick-actions .card-quick-trash,
.card-quick-actions .card-quick-archive,
.card-quick-actions .card-quick-star,
.card-quick-actions .card-quick-defer {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    pointer-events: auto;
    flex: 0 0 auto;
}
.card-quick { -webkit-mask: none; mask: none; }
.card:hover .card-quick,
.card:hover .card-quick-archive { background-color: #eef2ff; border-color: #dbeafe; box-shadow: 0 2px 6px rgba(0,0,0,0.12); color: #1e40af; }
.card:hover .card-quick:focus,
.card:hover .card-quick:focus-visible,
.card:hover .card-quick-archive:focus,
.card:hover .card-quick-archive:focus-visible { outline: none; background-color: #e8edff; border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,0.18); color: #1e3a8a; }
.card-quick { right: 85px; }
@media (prefers-color-scheme: dark) {
    .card:hover .card-quick,
    .card:hover .card-quick-archive { background-color: rgba(255,255,255,0.08); border-color: var(--gray-300); box-shadow: 0 2px 6px rgba(0,0,0,0.45); color: #93c5fd; }
    .card:hover .card-quick:focus,
    .card:hover .card-quick:focus-visible,
    .card:hover .card-quick-archive:focus,
    .card:hover .card-quick-archive:focus-visible { background-color: rgba(255,255,255,0.10); border-color: var(--gray-300); box-shadow: 0 0 0 3px rgba(99,102,241,0.28); color: #bfdbfe; }
}

/* Copy button for card */
.card-quick-copy {
    position: absolute;
    top: -8px;
    right: 116px; /* between defer and edit */
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: transparent;
    opacity: 0;
    transition: opacity .12s, background-color .15s, border-color .15s, box-shadow .15s;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2344546f" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    z-index: 6;
}
.card.inline-editing .card-quick-copy,
.card.inline-editing:hover .card-quick-copy { display: none !important; }
.card.inline-editing .card-quick-star,
.card.inline-editing:hover .card-quick-star { display: none !important; }
.card.inline-editing .card-quick-defer,
.card.inline-editing:hover .card-quick-defer { display: none !important; }
.card:hover .card-quick-copy { opacity: 1; }
.card.inline-editing .card-quick-archive,
.card.inline-editing:hover .card-quick-archive { display: none !important; }
.card.inline-editing .card-quick-trash,
.card.inline-editing:hover .card-quick-trash { display: none !important; }

/* Delete (trash) button for card */
.card-quick-trash {
    position: absolute;
    top: -8px;
    right: 14px; /* right-most */
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: transparent;
    opacity: 0;
    transition: opacity .12s, background-color .15s, border-color .15s, box-shadow .15s;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2364748b" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    z-index: 6;
}
.card:hover .card-quick-trash { opacity: 1; }
.card:hover .card-quick-trash { background-color: #fef2f2; border-color: #fecaca; }
.card-quick-trash:hover { background-color: #fee2e2; border-color: #fca5a5; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.card-quick-trash:focus,
.card-quick-trash:focus-visible { outline: none; background-color: #fecaca; border-color: #f87171; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }

@media (prefers-color-scheme: dark) {
    .card-quick-trash {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23cbd5e1" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    }
    .card:hover .card-quick-trash { background-color: rgba(239,68,68,0.15); border-color: rgba(248,113,113,0.3); }
    .card-quick-trash:hover { background-color: rgba(239,68,68,0.25); border-color: rgba(248,113,113,0.5); }
    .card-quick-trash:focus,
    .card-quick-trash:focus-visible { background-color: rgba(239,68,68,0.2); border-color: rgba(248,113,113,0.4); box-shadow: 0 0 0 3px rgba(239,68,68,0.28); }
}
.card:hover .card-quick-copy { background-color: #eef2ff; border-color: #dbeafe; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.card-quick-copy:hover { background-color: #e0e7ff; border-color: #c7d2fe; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.card-quick-copy:focus,
.card-quick-copy:focus-visible { outline: none; background-color: #e8edff; border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,0.18); }
@media (prefers-color-scheme: dark) {
    .card-quick-copy {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23cbd5e1" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    }
    .card:hover .card-quick-copy { background-color: rgba(255,255,255,0.08); border-color: var(--gray-300); box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
    .card-quick-copy:hover { background-color: rgba(255,255,255,0.12); border-color: var(--gray-300); }
    .card-quick-copy:focus,
    .card-quick-copy:focus-visible { background-color: rgba(255,255,255,0.10); border-color: var(--gray-300); box-shadow: 0 0 0 3px rgba(99,102,241,0.28); }
}

/* === Archive page visual polish === */
#archivePage .archive-container { max-width: 1200px; margin: 0 auto; padding: 16px 12px; }
#archivePage .archive-column { padding: 16px; border-radius: 12px; border: 1px solid var(--gray-200); background: #fff; box-shadow: var(--shadow-sm); }
#archivePage .archive-column h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px 0; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); color: #1f2937; }
#archivePage .archive-column h3 .count { background: #eef2ff; color: #1e40af; border: 1px solid #dbeafe; }
#archivedCards.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); gap: 8px; justify-content: start; }
#archivedCards .card { position: relative; opacity: 1; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; padding: 6px 8px; box-shadow: none; transition: border-color .12s, box-shadow .12s; }
#archivedCards .card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
#archivedCards .card .card-top-actions { display: flex; justify-content: flex-start; margin: 0 0 2px 0; }
#archivedCards .card .card-header { display: flex; align-items: flex-start; gap: 4px; padding-right: 28px; }
#archivedCards .card .card-labels { display: none; }
#archivedCards .card .card-title { font-size: 12.5px; line-height: 1.3; margin: 0 0 2px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
#archivedCards .card .card-badges { margin-top: 2px; gap: 4px; font-size: 10px; }
#archivedCards .restore-chip { height: 20px; padding: 0 6px; font-size: 11px; border-radius: 5px; background: #eef2ff; border: 1px solid #dbeafe; color: #1e40af; position: relative; top: -1px; margin-left: -2px; }
#archivedCards .restore-chip:hover { background: #e0e7ff; border-color: #c7d2fe; color: #1e3a8a; box-shadow: var(--shadow-sm); }

@media (prefers-color-scheme: dark) {
  #archivePage .archive-column { background: #0f172a; border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
  #archivePage .archive-column h3 { border-bottom-color: var(--gray-300); color: var(--gray-700); }
  #archivePage .archive-column h3 .count { background: rgba(255,255,255,0.08); color: #93c5fd; border-color: var(--gray-300); }
  #archivedCards .card { background: #0f172a; border-color: var(--gray-300); box-shadow: none; }
  #archivedCards .card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
}

/* Owner label positioning for cards */
.quick-board-card,
.project-card {
    position: relative;
}
.card-owner {
    position: absolute;
    right: 14px;
    bottom: 10px;
    color: #64748b;
    font-size: 12px;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.quick-board-card:hover .card-owner,
.project-card:hover .card-owner,
.board-card-with-actions:hover .card-owner { opacity: 1; }

/* Center archive layout and prevent header button wrapping */
#archivePage .header .header-actions button { white-space: nowrap; display: inline-flex; align-items: center; }
#archivePage .archive-container { max-width: none; margin: 0; padding: 1.5rem 2rem; display: block; }
#archivePage .archive-column { width: 100%; min-height: 500px; }

/* inline actions in archived cards */
.actions-inline { display: inline-flex; gap: 8px; }
.delete-chip { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid #fecaca; background: #fee2e2; color: #b91c1c; cursor: pointer; font-size: 12px; }
.delete-chip:hover { background: #fecaca; border-color: #fca5a5; color: #991b1b; box-shadow: var(--shadow-sm); }

/* Project boards: side-by-side tools (create board + invite info) */
#boardSelectPage .board-select-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  #boardSelectPage .board-select-tools { grid-template-columns: 1fr; }
}
#boardSelectPage .board-select-tools .board-section { margin-bottom: 0; }
.project-info-inline p { margin: 0 0 8px 0; }

@media (prefers-color-scheme: dark) {
  .delete-chip { background: rgba(239,68,68,0.18); border-color: var(--gray-300); color: #fca5a5; }
  .delete-chip:hover { background: rgba(239,68,68,0.28); border-color: var(--gray-300); color: #fecaca; }
}

/* Quick delete icon for archived cards */
.card-quick-delete {
    position: absolute;
    top: 6px;
    right: 36px; /* place just left of edit, same gap as archive */
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background-color .12s, border-color .12s, box-shadow .12s, color .12s;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    color: #ef4444;
    z-index: 6;
}
.card:hover .card-quick-delete { opacity: 1; background-color: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.card-quick-delete:hover { background-color: #fee2e2; border-color: #fecaca; box-shadow: 0 2px 6px rgba(0,0,0,0.12); color: #b91c1c; }
.card-quick-delete:focus, .card-quick-delete:focus-visible { outline: none; background-color: #fecaca; border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); color: #991b1b; }

@media (prefers-color-scheme: dark) {
  .card-quick-delete { color: #cbd5e1; }
  .card:hover .card-quick-delete { background-color: rgba(239,68,68,0.18); border-color: var(--gray-300); box-shadow: 0 2px 6px rgba(0,0,0,0.45); color: #fca5a5; }
  .card-quick-delete:hover { background-color: rgba(239,68,68,0.18); border-color: var(--gray-300); color: #fca5a5; }
  .card-quick-delete:focus, .card-quick-delete:focus-visible { background-color: rgba(239,68,68,0.24); border-color: var(--gray-300); box-shadow: 0 0 0 3px rgba(239,68,68,0.28); color: #fecaca; }
}

/* list header actions */
.list-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--list-bg, #ebecf0);
}

/* sticky header must cover list edges to avoid background seams */
#boardPage .list-header {
    margin: 0 -6px 4px !important;
    padding: 6px 12px 6px !important;
    top: -6px;
    background: var(--list-bg) !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: sticky;
}
#boardPage .list-header .list-title {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    margin-left: 14px !important;
    display: inline-block;
}
.list-header-tools {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.list-copy {
    width: 28px;
    height: 28px;
    padding: 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #7a869a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .12s, background-color .12s, transform .12s, opacity .12s;
}
.list-copy svg {
    width: 17px;
    height: 17px;
}
.list-copy:hover {
    background: rgba(9, 30, 66, .08);
    color: #0c66e4;
}
.list-copy:active { transform: scale(.94); }
.list-copy:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}
.list-copy.copied {
    background: #ecfdf5;
    color: #059669;
}
@media (hover: hover) {
    #boardPage .list-copy {
        opacity: 0;
        pointer-events: none;
    }
    #boardPage .list:hover .list-copy,
    #boardPage .list:focus-within .list-copy {
        opacity: 1;
        pointer-events: auto;
    }
}
#boardPage[data-list-header-line="short"] .list-header::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 1px;
    background: #e2e8f0;
}
#boardPage[data-list-header-line="title"] .list-header .list-title {
    position: relative;
}
#boardPage[data-list-header-line="title"] .list-header .list-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 1px;
    background: #e2e8f0;
}
.list-actions { display:inline-flex; align-items:center; gap:0px; }
.list-archive, .list-menu {
    width:28px; height:28px; border:0;
    background:transparent; border-radius:6px;
    cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center;
    transition:background-color .12s, box-shadow .12s, border-color .12s, color .12s;
 }
.list-archive {
    border:1px solid transparent;
    color:#64748b;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z"/></svg>');
    background-repeat:no-repeat; background-position:center;
    background-size:16px 16px;
}
.list-archive:focus {
    border:1px solid transparent;
    /* color: #f59e0b; */
    /* background: rgba(200,30,66,.08); */
    /* background:rgba(9,30,66,.08); */

    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z"/></svg>');
    background-repeat:no-repeat;
    background-position:center;
    background-size:16px 16px;
 }
/* .list-archive:hover { background:#eef2ff; border-color:#dbeafe; box-shadow:0 2px 6px rgba(0,0,0,0.12); color:#1e40af; } */
/* .list-archive:focus, .list-archive:focus-visible { outline:none; background:#e8edff; border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(99,102,241,0.18); color:#1e3a8a; } */

  /* .list-archive:hover { background:rgba(255,255,255,0.08); border-color:var(--gray-300); box-shadow:0 2px 6px rgba(0,0,0,0.45); color:#93c5fd; } */


  .list-archive:hover {
    background:rgba(9,30,66,.08);
    /* border-color:var(--gray-300); */
    /* box-shadow:0 2px 6px rgba(0,0,0,0.45); */
    /* color:#93c5fd; */
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z"/></svg>');
    background-repeat:no-repeat;
    background-position:center;
    background-size:16px 16px;
}


/* .list-archive::before { */
    /* content: '✓'; Check icon for archive */
    /* font-size: 16px; */
    /* background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z"/></svg>'); */
/* } */


@media (prefers-color-scheme: dark) {
  .list-archive { color:#cbd5e1; }
  /* .list-archive:hover { background:rgba(255,255,255,0.08); border-color:var(--gray-300); box-shadow:0 2px 6px rgba(0,0,0,0.45); color:#93c5fd; } */
  /* .list-archive:focus, .list-archive:focus-visible { background:rgba(255,255,255,0.10); border-color:var(--gray-300); box-shadow:0 0 0 3px rgba(99,102,241,0.28); color:#bfdbfe; } */
}

/* Hide list header actions until hover */
.list-actions { opacity: 0; transition: opacity .12s; pointer-events: none; }
.list:hover .list-actions { opacity: 1; pointer-events: auto; }

/* Posts UI in edit modal */
.edit-modal .modal-body {
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.form-group label {
    display: none; /* Hide unnecessary labels for conciseness */
}

.form-group:not([for="editPostsInput"]) {
    margin-bottom: 0.5rem; /* Reduce space for non-posts groups */
}

.form-group[for="editCardDescription"] {
    display: none; /* Hide description as per previous optimizations */
}

.posts-list {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    max-height: 50vh; /* Increase max-height to emphasize posts */
    overflow-y: auto;
}

.posts-list:empty {
    display: none;
}

.post-item {
    border-bottom: 1px solid var(--gray-100);
    padding: 0.5rem 0;
    background: var(--gray-50);
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.post-item:hover {
    background: var(--gray-100);
}

.post-meta {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--gray-500);
    /* padding: 0 0.5rem; */
}

/* inline meta + actions row */
.post-actions.has-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.post-actions-buttons {
    display: inline-flex;
    gap: 0.5rem;
    margin-left: auto;
}

.post-text {
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre-line; /* Preserve line breaks for comments */
}

.post-edit-textarea {
    width: 100%;
    min-height: 80px;
    resize: none;
    overflow: hidden;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 0.5rem 0.625rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.post-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0 0.5rem 0.25rem;
}

.post-actions button {
    font-size: 0.8rem;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.post-actions button:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

#editPostsInput {
    min-height: 100px;
    width: 100%;
    border-radius: var(--border-radius);
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    transition: var(--transition);
    resize: none;
    overflow: hidden;
}

#editPostsInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.posts-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.posts-actions button {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.posts-actions button:hover {
    background: var(--primary-dark);
}

/* Reduce other elements to prioritize posts */
.form-group:not([for="editPostsInput"]) {
    margin-bottom: 0.5rem;
}

#editModal textarea {
    resize: none;
    overflow: hidden;
    min-height: 38px;
}

/* Field-specific baselines for better initial sizing */
#editCardTitle {
    min-height: 48px; /* ~2 lines for title */
}
#editCardDescription {
    min-height: 120px;
}
#editPostsInput {
    min-height: 120px;
}

.modal-header, .modal-footer {
    padding: 0.75rem 1rem;
}

.card-info {
    font-size: 0.875rem;
    color: var(--gray-500);
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}


.badge-icon {
    /* background: #f3f4f6; */
    /* padding: 2px 6px; */
    /* border-radius: 12px; */
    font-size: 14px;
    color: #6b778c;
    display: inline-flex;
    align-items: center;
    gap: 0px;
    margin-bottom: -2px;
    margin-left: 2px;
}


.badge.comments {
    /* background: #f3f4f6; */
    /* padding: 2px 6px; */
    /* border-radius: 12px; */
    font-size: 12px;
    color: #6b778c;
    display: inline-flex;
    align-items: center;
    gap: 0px;
    margin-bottom: -4px;

}
/* Remove min-height to make lists auto-height */
.column, .list {
    min-height: 0 !important;
}

/* Media query override */
@media (max-width: 768px) {
    .column, .list {
        min-height: 0 !important;
    }
}

/* Add list button minimal styling */
.add-list-open {
    background: transparent !important;
    border: 1px dashed transparent !important;
    color: #6b778c;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    height: 40px;
}

.add-list-open:hover { background: rgba(236,238,240,.5) !important; border-color: #dfe1e6 !important; }
.add-list-open:focus-visible { outline: none; background: rgba(236,238,240,.6) !important; border-color: #dfe1e6 !important; }

/* Ensure the add-list column itself is transparent (not like normal lists) */
#boardPage .add-list.column {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px dashed transparent !important;
}
#boardPage .add-list.column:hover {
    background: transparent !important;
}

/* Empty-board only: center/opacity tweaks without affecting layout */
#boardPage .board-container.empty-board #addListEntry .add-list-open:hover {
    text-align: center;
    background: rgba(236,238,240,.40) !important; /* semi-transparent whole button */
    border-color: #dfe1e6 !important;
    transition: background-color .15s ease;
}
#boardPage .board-container.empty-board #addListEntry .add-list-open,
#boardPage .board-container.empty-board #addListEntry .add-list-open:focus-visible {
    background: rgba(236,238,240,.6) !important;
    text-align: center;

}

/* Project page navbar invites button match style */
#projectPage .project-header #invitesBtn {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    height: 36px;
    padding: 0 0.875rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
#projectPage .project-header #invitesBtn:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--gray-400);
}

@media (prefers-color-scheme: dark) {
    #projectPage .project-header #invitesBtn {
        background: #0f172a;
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
        box-shadow: none;
    }
    #projectPage .project-header #invitesBtn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
        border-color: var(--gray-400);
    }
}

/* Starred boards UI */
#projectPage #starredSection h2 .star-icon {
    color: #f59e0b;
    margin-right: 6px;
}
.board-action-btn.star-btn {
    color: #9ca3af;
}
.board-action-btn.star-btn.active {
    color: #f59e0b;
}
#starredBoards .empty-state {
    color: var(--gray-500);
    padding: 0.5rem 0;
}

#archivePage #archiveSearch {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: #374151;
    width: 220px;
}
#archivePage #archiveSearch::placeholder { color: #9ca3af; }
#archivePage #archiveSearch:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
@media (prefers-color-scheme: dark) {
    #archivePage #archiveSearch { background: #0b1220; color: var(--gray-700); border-color: var(--gray-300); }
}

/* Project chooser modal list alignment */
#projectChooserList { max-height: 360px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
#projectChooserList .board-switcher-item { cursor: pointer; }
#projectChooserList .board-switcher-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }

/* Reuse board-switcher-search input look in modal */
#projectChooserSearch { height: 36px; }

.archived-boards-wrap { margin-top: 12px; }
.archived-boards-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.archived-boards-header h3 { margin: 0; font-size: 1rem; color: #1f2937; }
.archived-tools { display: inline-flex; gap: 8px; align-items: center; }
#archivedBoardsSearch { height: 32px; padding: 0 10px; border: 1px solid var(--gray-300); border-radius: 6px; background: #fff; color: #374151; width: 220px; }
#archivedBoardsSearch::placeholder { color: #9ca3af; }
#archivedBoardsSearch:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.archived-boards-list.hidden { display: none; }
@media (prefers-color-scheme: dark) {
    #archivedBoardsSearch { background: #0b1220; color: var(--gray-700); border-color: var(--gray-300); }
}

.archived-boards-header { flex-wrap: wrap; gap: 8px; }
.archived-boards-header h3 { flex: 1 1 auto; }
.archived-tools { flex: 0 0 auto; margin-top: 4px; }

/* Separate archived boards section from above content */
.archived-boards-wrap { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--gray-200); }
@media (prefers-color-scheme: dark) {
    .archived-boards-wrap { border-top-color: var(--gray-300); }
}

/* Ensure archived section starts on a new full-width row in grid */
.quick-boards-grid .archived-boards-wrap { grid-column: 1 / -1; width: 100%; }

/* SECTION: Grids (Archived boards, Board-select tools) */
/* Archived boards: grid layout */
.archived-boards-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .archived-boards-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 固定最大为三栏，避免在更宽屏幕出现四栏 */
@media (min-width: 1200px) { .archived-boards-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.archived-boards-list .quick-board-card { min-height: 72px; }

.archived-left { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.archived-left #archivedBoardsSearch { height: 32px; padding: 0 10px; border: 1px solid var(--gray-300); border-radius: 6px; background: #fff; color: #374151; width: 220px; }
@media (prefers-color-scheme: dark) { .archived-left #archivedBoardsSearch { background: #0b1220; color: var(--gray-700); border-color: var(--gray-300); } }

/* Board loading placeholder */
#boardPage .board-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--gray-500);
    font-size: 14px;
}

/* SECTION: Final header alignment overrides (stability) */
/* Ensure board page header aligns exactly with project/board-select headers */
#boardPage .header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important; /* rely on inner container */
    position: relative;
    z-index: 120;
}
#boardPage .header > .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    /* header container gutter same as project/board-select */
    padding: 1rem 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    border-bottom: none !important; /* avoid double-thick divider */
}
#boardPage .header.header-text-light { --header-fg:#ffffff; --header-link:#e5edff; }
#boardPage .header.header-text-dark { --header-fg:#374151; --header-link:#3b82f6; }

/* Final card quick-action grouping */
#boardPage .card .card-quick-actions {
    position: absolute;
    top: -8px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 6;
    pointer-events: none;
}

#boardPage .card .card-quick-actions-left {
    left: 18px;
    right: auto;
}

#boardPage .card .card-quick-actions-right {
    right: 14px;
    left: auto;
}

#boardPage .card .card-quick-actions > button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 28px !important;
    pointer-events: auto;
}

#boardPage .card:hover .card-quick-actions > button,
#boardPage .card-starred .card-quick-actions .card-quick-star {
    opacity: 1 !important;
}

/* Board notes mode */
#listsContainer.hidden,
#boardPage .card-notes-view.hidden,
#boardPage .board-notes-mode.hidden {
    display: none !important;
}

#cardNotesViewBtn.active,
#boardNotesModeBtn.active {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

/* 强调“笔记视图”入口：未激活时用主色描边 + 浅蓝底，激活态仍沿用上方深色 */
#cardNotesViewBtn:not(.active) {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
    font-weight: 600;
}
#cardNotesViewBtn:not(.active):hover {
    background: #dbeafe;
    border-color: #3b82f6;
}

#boardPage .card-notes-view,
#boardPage .board-notes-mode {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px;
    height: calc(100vh - 64px);
    padding: 16px 20px;
    overflow: hidden;
    background: rgba(248, 250, 252, 0.96);
}

#boardPage.has-wallpaper .card-notes-view,
#boardPage.has-wallpaper .board-notes-mode {
    background: rgba(248, 250, 252, 0.88);
    backdrop-filter: blur(8px);
}

.card-notes-sidebar,
.card-notes-editor,
.board-notes-sidebar,
.board-notes-editor {
    min-height: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
}

.card-notes-sidebar,
.board-notes-sidebar {
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.card-notes-toolbar,
.board-notes-toolbar {
    margin-bottom: 12px;
}

.card-notes-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.card-notes-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-notes-toolbar .btn-primary {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    white-space: nowrap;
}

.card-notes-sort {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 28px 0 10px;
    border: 1px solid #dbe3ee;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.card-notes-toolbar .notes-search {
    width: 100%;
    padding-right: 38px;
}

.notes-search-wrap {
    position: relative;
    width: 100%;
}

.notes-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    font-size: 19px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}

.notes-search-clear:hover {
    color: #475569;
    background: #eef2f7;
}

.notes-search-clear:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}

.notes-search-clear[hidden] {
    display: none;
}

.card-notes-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card-notes-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-notes-group-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 2px 5px;
    background: rgba(255, 255, 255, 0.94);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #e5e7eb;
}

.card-notes-group-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-notes-group-tools {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-notes-group-count {
    flex: 0 0 auto;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.card-notes-group-copy {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.card-notes-group-copy svg {
    display: block;
    width: 16px;
    height: 16px;
}

.card-notes-group-copy:hover {
    background: #eff6ff;
    color: #2563eb;
}

.card-notes-group-copy:active {
    transform: scale(0.94);
}

.card-notes-group-copy:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}

.card-notes-group-copy.copied {
    background: #ecfdf5;
    color: #059669;
}

.card-notes-subgroup {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.card-notes-subgroup::before,
.card-notes-subgroup::after {
    content: '';
    height: 1px;
    flex: 1;
    background: #e2e8f0;
}

.card-notes-item {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #1f2937;
    font: inherit;
}

.card-notes-item.draggable {
    cursor: grab;
}

.card-notes-item.draggable:active,
.card-notes-item.dragging {
    cursor: grabbing;
}

.card-notes-item.dragging {
    background: #e0ecff;
    border-color: #60a5fa;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

body.dragging-card-notes {
    user-select: none;
}

.card-notes-item:hover {
    background: #f8fafc;
    border-color: #e5e7eb;
}

.card-notes-item.active {
    background: #eff6ff;
    border-color: #93c5fd;
}

.card-notes-item.archived {
    background: #f8fafc;
    color: #64748b;
}

.card-notes-item.archived .card-notes-item-title {
    color: #475569;
}

.card-notes-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-notes-item-title {
    font-weight: 650;
    font-size: 0.95rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.card-notes-item-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.card-notes-item-delete {
    flex: 0 0 auto;
    height: 24px;
    padding: 0 7px;
    border: 1px solid #fecaca;
    border-radius: 5px;
    background: #fff7f7;
    color: #dc2626;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.card-notes-item:hover .card-notes-item-delete {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.card-notes-item-delete:hover,
.card-notes-item-delete:focus-visible {
    background: #fee2e2;
    border-color: #fca5a5;
}

.card-notes-empty {
    padding: 14px 10px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

.board-notes-list {
    flex: 1;
    max-height: none;
}

.card-notes-editor,
.board-notes-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

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

.card-notes-title-row .notes-title-input,
.board-notes-title-row .notes-title-input {
    flex: 1;
    min-width: 0;
}

.card-notes-editor .notes-content-input,
.board-notes-editor .notes-content-input {
    flex: 1;
    min-height: 0;
    resize: none;
    line-height: 1.55;
}

.card-notes-preview {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    line-height: 1.62;
    font-size: 0.95rem;
}

.card-notes-preview > *:first-child { margin-top: 0; }
.card-notes-preview > *:last-child { margin-bottom: 0; }
.card-notes-preview h1,
.card-notes-preview h2,
.card-notes-preview h3,
.card-notes-preview h4 {
    margin: 1rem 0 0.45rem;
    line-height: 1.25;
    color: #0f172a;
}
.card-notes-preview h1 { font-size: 1.55rem; }
.card-notes-preview h2 { font-size: 1.32rem; }
.card-notes-preview h3 { font-size: 1.12rem; }
.card-notes-preview p { margin: 0.65rem 0; }
.card-notes-preview ul,
.card-notes-preview ol {
    margin: 0.65rem 0;
    padding-left: 1.35rem;
}
.card-notes-preview li { margin: 0.25rem 0; }
.card-notes-preview blockquote {
    margin: 0.75rem 0;
    padding: 0.4rem 0.75rem;
    border-left: 3px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
}
.card-notes-preview code {
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
}
.card-notes-preview pre {
    margin: 0.8rem 0;
    padding: 0.75rem;
    overflow: auto;
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
}
.card-notes-preview pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}
.card-notes-preview a { color: #1d4ed8; }
.card-notes-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.latex-fallback {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #991b1b;
    background: #fef2f2;
}
.card-notes-preview .markdown-table-wrap {
    overflow-x: auto;
    margin: 0.8rem 0;
}
.card-notes-preview table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.card-notes-preview th,
.card-notes-preview td {
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    vertical-align: top;
}
.card-notes-preview th {
    background: #f8fafc;
    font-weight: 700;
}
.card-notes-preview-empty {
    height: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.card-notes-actions,
.board-notes-actions {
    flex-wrap: wrap;
}

.card-notes-actions {
    justify-content: flex-start;
}

.card-notes-actions #cardNotesPresentBtn {
    margin-left: auto;
}

.card-notes-actions #cardNotesPreviewModeBtn.active,
.card-notes-actions #cardNotesPreviewModeBtn[aria-pressed="true"] {
    background: #1f2937;
    border-color: #1f2937;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

@media (max-width: 760px) {
    #boardPage .card-notes-view,
    #boardPage .board-notes-mode {
        grid-template-columns: 1fr;
        height: calc(100vh - 64px);
        overflow: auto;
        padding: 12px;
    }

    .card-notes-sidebar,
    .board-notes-sidebar {
        min-height: 220px;
    }

    .card-notes-editor,
    .board-notes-editor {
        min-height: 56vh;
    }
}