/* ┌───────────────────────────────────────────────────────────────┐
 * │           GANTT CHART MAKER — styles.css  v3.5.0             │
 * │           Table of Contents                                  │
 * ├────────┬──────────────────────────────────────────────────────┤
 * │  LINE  │  SECTION                                            │
 * ├────────┼──────────────────────────────────────────────────────┤
 * │    31  │  Theme Variables (:root, [data-theme="dark"])       │
 * │   141  │  Layout (app-layout, sidebar, chart-section)        │
 * │   203  │  Compact Header                                    │
 * │   260  │  Feedback Button                                   │
 * │   291  │  Language Selector                                 │
 * │   389  │  Changelog Bell                                    │
 * │   545  │  Collapsible Panel                                 │
 * │   467  │  Cards                                             │
 * │   476  │  Inputs                                            │
 * │   512  │  Custom Date Picker                                │
 * │   725  │  Custom Color Picker                               │
 * │   880  │  Priority Chips                                    │
 * │   965  │  Buttons (.btn-add-modern)                         │
 * │  1026  │  Task Properties Row                               │
 * │  1153  │  Compact Object Browser (.task-list-compact)       │
 * │  1460  │  Bulk Actions                                      │
 * │  1498  │  Checkbox Styling                                  │
 * │  1577  │  Icon Buttons                                      │
 * │  1610  │  Edit Input (inline)                               │
 * │  1621  │  Chart (.gantt-chart-container, SVG, grid, axis)   │
 * │  1769  │  Toast Notifications                               │
 * │  1800  │  Task Edit Dialog                                  │
 * │  1893  │  Responsive (@media queries)                       │
 * │  1974  │  Today Marker                                      │
 * │  1991  │  Row Hover Highlight                               │
 * │  1998  │  Chart Pan (cursor, panning class)                 │
 * │  2016  │  Zoom to Fit Button                                │
 * │  2044  │  Type Selector Chips                               │
 * │  2065  │  Progress Bar Overlay                              │
 * │  2071  │  Milestone Diamond                                 │
 * │  2076  │  Group Summary Bar                                 │
 * │  2084  │  Dependency Arrows                                 │
 * │  2090  │  Connect Mode                                      │
 * │  2119  │  Dialog Progress Slider                            │
 * │  2147  │  Dialog Select (parent dropdown)                   │
 * │  2153  │  Dialog Dependency List                            │
 * │  2201  │  Object Browser Hierarchy Indent                   │
 * │  2238  │  Connect Mode Toast                                │
 * │  2255  │  SEO Footer                                        │
 * │  2362  │  Share Button & Menu                               │
 * └────────┴──────────────────────────────────────────────────────┘
 */

/* ── Theme Variables ───────────────────────────────────────────── */
:root {
    /* Light theme (default) */
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-input: #f1f5f9;
    --bg-hover: #f1f5f9;
    --border-card: #e2e8f0;
    --border-input: #cbd5e1;
    --border-focus: #059669;
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-faint: #64748b;
    --text-input: #1e293b;
    --text-placeholder: #64748b;
    --chip-bg: #f1f5f9;
    --chip-text: #94a3b8;
    --icon-color: #94a3b8;
    --icon-hover-bg: #e2e8f0;
    --icon-hover-color: #059669;
    --delete-hover-bg: #fee2e2;
    --delete-hover-color: #dc2626;
    --grid-stroke: #e2e8f0;
    --month-band: rgba(0, 0, 0, 0.05);
    --axis-text: #94a3b8;
    --axis-stroke: #cbd5e1;
    --yaxis-text: #475569;
    --task-label-fill: white;
    --dialog-overlay: rgba(0, 0, 0, 0.25);
    --toast-success-bg: #dcfce7;
    --toast-success-text: #166534;
    --toast-success-border: #86efac;
    --toast-error-bg: #fee2e2;
    --toast-error-text: #991b1b;
    --toast-error-border: #fca5a5;
    --priority-high-text: #dc2626;
    --priority-high-bg: #fee2e2;
    --priority-high-border: #dc2626;
    --priority-med-text: #d97706;
    --priority-med-bg: #fef3c7;
    --priority-med-border: #d97706;
    --priority-low-text: #16a34a;
    --priority-low-bg: #dcfce7;
    --priority-low-border: #16a34a;
    --dialog-delete-border: #e2e8f0;
    --dialog-delete-hover-bg: #fee2e2;
    --dialog-delete-hover-text: #dc2626;
    --dialog-delete-hover-border: #dc2626;
    --note-dot: #d97706;
    --note-indicator: #d97706;
    --toggle-bg: #e2e8f0;
    --toggle-icon: #64748b;
    --title-accent: #059669;
    --glow-color: rgba(5, 150, 105, 0.5);
    --changelog-badge-bg: #f59e0b;
    --changelog-badge-text: #ffffff;
    --changelog-version-color: #059669;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
    --scrollbar-track: #f1f5f9;
    --btn-add-bg: #059669; --btn-add-text: #ffffff;
    /* SVG chart-surface background (y-axis + x-axis mask rects). Must match .chart-section's computed bg. */
    --chart-bg: #ffffff;
    /* Surface tokens used by newer dialogs/dropdowns (project picker, New Project, Load Format cards).
       These must stay theme-aware — older rules used undefined vars and fell back to white. */
    --surface: #ffffff;
    --bg-elevated: #ffffff;
    --surface-hover: rgba(5, 150, 105, 0.06);
    --input-bg: #f1f5f9;
    --text: #1e293b;
    --accent: #059669;
    --accent-soft: #ecfdf5;
    --accent-dark: #047857;
}

[data-theme="default-dark"] {
    /* Obsidian dark theme (S196): near-black OLED shell (#0a0a0a) on a neutral charcoal
       ladder — no blue cast. The indigo brand accent is replaced with emerald (#34d399)
       for this theme. Semantic accents (priority/toast/delete) unchanged. */
    --bg-body: #0a0a0a;
    --bg-card: #151515;
    --bg-input: #1f1f1f;
    --bg-hover: #1f1f1f;
    --border-card: #2b2b2b;
    --border-input: #3a3a3a;
    --border-focus: #34d399;
    --text-heading: #ffffff;
    --text-body: #ededed;
    --text-muted: #8c8c8c;
    --text-faint: #8c8c8c;
    --text-input: #ededed;
    --text-placeholder: #8c8c8c;
    --chip-bg: #1f1f1f;
    --chip-text: #707070;
    --icon-color: #707070;
    --icon-hover-bg: #2b2b2b;
    --icon-hover-color: #6ee7b7;
    --delete-hover-bg: #450a0a;
    --delete-hover-color: #fca5a5;
    --grid-stroke: #1a1a1a;
    --month-band: rgba(255, 255, 255, 0.06);
    --axis-text: #707070;
    --axis-stroke: #3a3a3a;
    --yaxis-text: #8c8c8c;
    --task-label-fill: white;
    --dialog-overlay: rgba(0, 0, 0, 0.6);
    --toast-success-bg: #052e16;
    --toast-success-text: #86efac;
    --toast-success-border: #16a34a;
    --toast-error-bg: #450a0a;
    --toast-error-text: #fca5a5;
    --toast-error-border: #dc2626;
    --priority-high-text: #fca5a5;
    --priority-high-bg: #450a0a;
    --priority-high-border: #dc2626;
    --priority-med-text: #fde68a;
    --priority-med-bg: #422006;
    --priority-med-border: #d97706;
    --priority-low-text: #86efac;
    --priority-low-bg: #052e16;
    --priority-low-border: #16a34a;
    --dialog-delete-border: #2b2b2b;
    --dialog-delete-hover-bg: #450a0a;
    --dialog-delete-hover-text: #fca5a5;
    --dialog-delete-hover-border: #dc2626;
    --note-dot: #fde68a;
    --note-indicator: #fde68a;
    --toggle-bg: #1f1f1f;
    --toggle-icon: #cccccc;
    --title-accent: #34d399;
    --glow-color: rgba(52, 211, 153, 0.6);
    --changelog-badge-bg: #f59e0b;
    --changelog-badge-text: #ffffff;
    --changelog-version-color: #34d399;
    --scrollbar-thumb: #3a3a3a;
    --scrollbar-thumb-hover: #4d4d4d;
    --scrollbar-track: #151515;
    --btn-add-bg: #34d399; --btn-add-text: #06281c;
    /* Dark theme — .chart-section is overridden to var(--bg-body) in the theming block */
    --chart-bg: #0a0a0a;
    /* Surface tokens for dark mode — elevated surfaces sit slightly above --bg-card so cards
       stay readable on the dark dialog background. Pure white was the previous fallback. */
    --surface: #1f1f1f;
    --bg-elevated: #1f1f1f;
    --surface-hover: rgba(52, 211, 153, 0.16);
    --input-bg: #1f1f1f;
    --text: #ededed;
    --accent: #34d399;
    --accent-soft: rgba(52, 211, 153, 0.18);
    --accent-dark: #6ee7b7;
}

/* ── Themed Scrollbars ────────────────────────────────────────── */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chromium / Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

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

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* ── Themed Tooltips ──────────────────────────────────────────── */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease 0.8s;
    z-index: 9999;
    background: var(--bg-input);
    color: var(--text-body);
    border: 1px solid var(--border-input);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

#exportBtn::after {
    transition: opacity 0.15s ease 0s;
}

#exportBtn:hover::after {
    transition: opacity 0.15s ease 7s;
}

/* Right-edge tooltip: align to right side instead of center */
[data-tooltip-align="right"]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* ── Layout ────────────────────────────────────────────────────── */
body {
    background-color: var(--bg-body);
    color: var(--text-body);
    transition: background-color 0.2s, color 0.2s;
}

.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.top-panel {
    display: flex;
    flex-shrink: 0;
    padding: 0 1.5rem;
}

.top-panel-left {
    flex: 1;
    min-width: 0;
}

.top-panel-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.75rem 0.5rem 0 0;
}

/* Original header (kept for reference) */
.app-header {
    display: flex;
    align-items: center;
    padding: clamp(0.5rem, 1vw, 0.75rem) 0;
}

.app-title {
    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-heading);
    background: linear-gradient(135deg, var(--text-heading) 0%, var(--title-accent) 50%, var(--text-heading) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: text-shadow 0.3s ease, filter 0.3s ease;
    text-shadow: 0 0 0px transparent;
    position: relative;
}

.app-title.glow {
    -webkit-text-fill-color: var(--text-heading);
    filter: drop-shadow(0 0 var(--glow-radius) var(--glow-color));
}

/* ── IMPROVEMENT 1: Compact Header ─────────────────────────────── */
.app-header-compact {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "left center right";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 0;
    position: relative;
    --hx: -200px;
    --hy: 50%;
}

.app-header-compact::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2rem;
    right: -2rem;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(
        circle 200px at var(--hx) var(--hy),
        color-mix(in srgb, var(--title-accent, #6366f1) 18%, transparent) 0%,
        color-mix(in srgb, var(--title-accent, #6366f1) 6%, transparent) 50%,
        transparent 100%
    );
}

.app-header-compact.header-spotlight::before {
    opacity: 1;
}

/* Bottom border glow — tracks cursor along the bottom edge */
.app-header-compact::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -2rem;
    right: -2rem;
    height: 3px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(
        ellipse 160px 4px at var(--hx) 50%,
        var(--title-accent, #6366f1) 0%,
        color-mix(in srgb, var(--title-accent, #6366f1) 50%, transparent) 40%,
        transparent 100%
    );
    filter: blur(0.5px);
}

.app-header-compact.header-spotlight::after {
    opacity: 1;
}

.app-header-compact > * {
    position: relative;
    z-index: 1;
}

[data-theme$="-dark"] .app-header-compact::before {
    background: radial-gradient(
        circle 200px at var(--hx) var(--hy),
        color-mix(in srgb, var(--title-accent, #818cf8) 25%, transparent) 0%,
        color-mix(in srgb, var(--title-accent, #818cf8) 8%, transparent) 50%,
        transparent 100%
    );
}

[data-theme$="-dark"] .app-header-compact::after {
    background: radial-gradient(
        ellipse 160px 4px at var(--hx) 50%,
        var(--title-accent, #a5b4fc) 0%,
        color-mix(in srgb, var(--title-accent, #818cf8) 50%, transparent) 40%,
        transparent 100%
    );
}

.header-center-group {
    grid-area: center;
    justify-self: center;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    z-index: 1;
}

.app-title-compact {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-heading);
    background: linear-gradient(135deg, var(--text-heading) 0%, var(--title-accent) 50%, var(--text-heading) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    white-space: nowrap;
}

.title-clock-group {
    grid-area: left;
    justify-self: start;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.header-clock {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.header-actions {
    grid-area: right;
    justify-self: end;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-export-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: var(--bg-input);
    color: var(--text-body);
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid var(--border-input);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-export-sm:hover { text-decoration: none; }

.btn-export-sm:hover {
    background: var(--bg-hover);
    border-color: var(--border-focus);
    color: var(--text-heading);
}

/* Export button spacing (replaces old .export-wrapper margin) */
#exportBtn { margin-right: 1.4rem; }

/* ── Feedback Button ───────────────────────────────────────────── */
.btn-feedback {
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-dark, #4f46e5));
    color: var(--btn-add-text, white);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #6366f1) 35%, transparent);
    animation: feedbackPulse 3s ease-in-out infinite;
}

.btn-feedback:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #6366f1) 50%, transparent);
    animation: none;
}

.btn-feedback:active {
    transform: scale(0.97);
}

@keyframes feedbackPulse {
    0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #6366f1) 35%, transparent); }
    50% { box-shadow: 0 2px 14px color-mix(in srgb, var(--accent, #6366f1) 55%, transparent); }
}

/* ── Language Selector ──────────────────────────────────────────── */
.lang-wrapper {
    position: relative;
}

.lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-input);
    cursor: pointer;
    background: var(--toggle-bg);
    color: var(--toggle-icon);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: all 0.15s;
}

.lang-toggle:hover {
    border-color: var(--border-focus);
    color: var(--text-heading);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1500;
    animation: dialogIn 0.12s ease-out;
    min-width: min(8rem, 90vw);
}

.lang-dropdown.hidden { display: none; }

.lang-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--text-body);
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
}

.lang-option:hover {
    background: var(--bg-hover);
}

.lang-option.active {
    background: var(--bg-input);
    color: var(--text-heading);
    font-weight: 600;
}

.lang-flag {
    width: 22px;
    height: 15px;
    flex-shrink: 0;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
[data-theme$="-dark"] .lang-flag {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* ── Changelog Bell ────────────────────────────────────────────── */
.changelog-wrapper {
    position: relative;
    margin-right: 1.4rem;
}

.changelog-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--border-input);
    cursor: pointer;
    background: var(--toggle-bg);
    color: var(--toggle-icon);
    transition: all 0.15s;
    position: relative;
    flex-shrink: 0;
}

.changelog-bell:hover {
    border-color: var(--border-focus);
    color: var(--text-heading);
}

.changelog-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--changelog-badge-bg);
    color: var(--changelog-badge-text);
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    border: 1.5px solid var(--bg-body);
    pointer-events: none;
    animation: badgePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.changelog-badge.hidden {
    display: none;
}

@keyframes badgePop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.changelog-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1500;
    animation: dialogIn 0.12s ease-out;
    overflow: hidden;
}

.changelog-dropdown.hidden {
    display: none;
}

.changelog-dropdown-header {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem 0.45rem;
    border-bottom: 1px solid var(--border-card);
}

.changelog-dropdown-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: 0.02em;
}

.changelog-refresh-warning {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: var(--priority-med-bg);
    color: var(--priority-med-text);
    border-bottom: 1px solid var(--border-card);
    font-size: 0.65rem;
    font-weight: 500;
}

.changelog-refresh-warning kbd {
    background: var(--bg-input);
    color: var(--text-body);
    border: 1px solid var(--border-input);
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    font-size: 0.6rem;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.changelog-refresh-warning.hidden {
    display: none;
}

.changelog-entries {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0.35rem 0;
}

/* ── Notifications bell — two-tab panel (TODO #69) ──────────────────── */
.notif-tab-strip {
    display: flex;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-elevated, rgba(0,0,0,0.02));
}
.notif-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.notif-tab:hover { color: var(--text-heading); }
.notif-tab.is-active {
    color: var(--text-heading);
    border-bottom-color: var(--accent);
}
.notif-tab.hidden { display: none; }
.notif-tab-count {
    background: var(--accent);
    color: var(--accent-text, #fff);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    min-width: 1rem;
    text-align: center;
}
.notif-tab-count.hidden { display: none; }
.notif-pane.hidden { display: none; }
.notif-messages-list {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border-card);
    transition: background 0.12s;
    position: relative;
}
.notif-row.is-actionable { cursor: pointer; }
.notif-row.is-actionable:hover { background: var(--bg-hover); }
.notif-row.is-unread { background: rgba(99, 102, 241, 0.06); }
.notif-row.is-unread:hover { background: rgba(99, 102, 241, 0.12); }
.notif-row-icon {
    color: var(--accent);
    flex: 0 0 auto;
    padding-top: 0.1rem;
}
.notif-row-body {
    flex: 1 1 auto;
    min-width: 0;
}
.notif-row-text {
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text);
    word-break: break-word;
}
.notif-actor-pill {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-focus, #6366f1) 14%, transparent);
    color: var(--border-focus, var(--accent-dark, var(--accent, #4f46e5)));
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.notif-chart-name {
    font-weight: 600;
    font-style: italic;
    color: var(--text-heading, var(--text-body, currentColor));
}
.notif-row-time {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.notif-dismiss-x {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem 0.35rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background 0.12s, color 0.12s;
}
.notif-dismiss-x:hover {
    color: var(--text-heading);
    background: var(--bg-hover);
}
.notif-empty {
    padding: 1.25rem 0.75rem;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.notif-empty.hidden { display: none; }

.announcement-entry .announcement-title {
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
}
.announcement-entry .announcement-body {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text);
    margin-top: 0.2rem;
}
.changelog-entry .notif-dismiss-x {
    margin-left: auto;
}

.changelog-entry {
    padding: 0.5rem 0.75rem;
}

.changelog-entry + .changelog-entry {
    border-top: 1px solid var(--border-card);
}

.changelog-entry-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.changelog-entry-version {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--changelog-version-color);
}

/* Major releases (N.0.0) — badge-style highlight to stand out from minor/patch entries. */
.changelog-entry-version-major {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--changelog-badge-text);
    background: var(--changelog-version-color);
    padding: 0.12rem 0.45rem;
    border-radius: 0.35rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.changelog-entry-date {
    font-size: 0.62rem;
    color: var(--text-faint);
    font-weight: 400;
}

.changelog-entry-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.changelog-entry-list li {
    font-size: 0.68rem;
    color: var(--text-body);
    padding-left: 0.85rem;
    position: relative;
    line-height: 1.4;
}

.changelog-entry-list li::before {
    content: '\00b7';
    position: absolute;
    left: 0.25rem;
    color: var(--changelog-version-color);
    font-weight: 700;
}

/* "Upcoming" preview — forward-looking, visually distinct from released entries. */
.changelog-entry-upcoming {
    background: var(--bg-hover);
    border-left: 3px dashed var(--changelog-version-color);
    border-bottom: 1px solid var(--border-card);
}
.changelog-entry-upcoming + .changelog-entry {
    border-top: none;
}
.changelog-entry-upcoming .changelog-entry-version {
    background: transparent;
    color: var(--changelog-version-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}
.changelog-entry-upcoming .changelog-entry-list li {
    color: var(--text-muted);
    font-style: italic;
}
.changelog-entry-upcoming .changelog-entry-list li::before {
    content: '\2192'; /* → */
    color: var(--changelog-version-color);
    opacity: 0.7;
    font-weight: 500;
}

.theme-toggle-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    background: var(--toggle-bg);
    color: var(--toggle-icon);
    font-size: 0.9rem;
    transition: all 0.15s;
}

.theme-toggle-sm:hover {
    color: var(--text-heading);
}

/* ── IMPROVEMENT 6: Collapsible Panel ──────────────────────────── */
.panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border-input);
    cursor: pointer;
    background: var(--toggle-bg);
    color: var(--toggle-icon);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.panel-toggle:hover {
    color: var(--text-heading);
    border-color: var(--border-focus);
}

.panel-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

.panel-toggle.collapsed svg {
    transform: rotate(180deg);
}

.controls-panel.collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

.controls-panel:not(.collapsed) {
    max-height: 100vh;
    opacity: 1;
    transition: max-height 0.25s ease-in, opacity 0.2s ease-in;
}

.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-heading);
    margin-bottom: 1.1rem;
}

.controls-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}

.drag-grip:hover {
    fill: var(--text-body) !important;
}

.flat-section {
    padding: clamp(0.5rem, 1vw, 0.75rem) 0 clamp(0.4rem, 0.8vw, 0.6rem) 0;
    border-bottom: 1px solid var(--border-card);
}

/* v6.2.0 — Fullscreen toggle. YouTube-style translucent floating button.
   Uses native Fullscreen API on .gantt-chart-container; icon swaps via
   .is-fullscreen class set by the fullscreenchange listener.

   v6.6.0 — Anchored to the viewport (position: fixed) instead of the
   chart container, so it stays at the same screen position regardless
   of chart size or vertical scroll. Bottom clears the .app-footer (~31px
   tall) plus a small visual gap. */
.chart-fullscreen-btn {
    position: fixed;
    bottom: 5rem;
    right: 0.85rem;
    z-index: 20;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-card);
    border-radius: 9999px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    transition: background 0.12s, color 0.12s, transform 0.12s, border-color 0.12s;
}

.chart-fullscreen-btn:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
    border-color: var(--border-focus);
    transform: scale(1.06);
}

.chart-fullscreen-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* Default state: show "enter" icon, hide "exit" icon */
.chart-fullscreen-icon-exit { display: none; }

/* Fullscreen-active state: swap icons */
.chart-fullscreen-btn.is-fullscreen .chart-fullscreen-icon-enter { display: none; }
.chart-fullscreen-btn.is-fullscreen .chart-fullscreen-icon-exit  { display: inline-block; }

/* When the container is the native fullscreen element, paint a solid
   background under the SVG so the chart fills the viewport cleanly. */
.gantt-chart-container:fullscreen {
    background: var(--bg-card);
    padding: 0.5rem;
    /* Explicit so the UA fullscreen stylesheet can't silently override.
       Required for vertical scrolling when the chart is taller than the
       viewport (v6.3.1 — scroll fix for many-task charts in fullscreen). */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Let the SVG keep its JS-set pixel height attribute (chartHeight + margins).
   Forcing height: 100% here clamped the SVG to the viewport and clipped
   off-screen task rows so they couldn't be scrolled to (fixed v6.3.1). */
.gantt-chart-container:fullscreen #ganttChart {
    width: 100%;
}

/* Fullscreen button: frosted dark pill so it stays readable on any theme's
   canvas. Only kicks in while the container is the fullscreen element —
   normal-mode appearance is unchanged. */
.gantt-chart-container:fullscreen .chart-fullscreen-btn {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    position: fixed;
}

.gantt-chart-container:fullscreen .chart-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
    transform: scale(1.08);
}

.chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-card);
    border-top: none;
    padding: clamp(0.5rem, 1vw, 0.75rem) 0 0;
    transition: background 0.2s, border-color 0.2s;
}

.chart-section .gantt-chart-container {
    /* position: relative so the floating fullscreen button anchors here */
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ── Site footer (v6.6.0) — always-visible legal strip. Flex child of the
   100vh body layout, so flex-shrink:0 keeps it pinned at the bottom without
   scrolling and only sips a sliver of height from the chart. ── */
.app-footer {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.4rem 1.5rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-card);
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: background 0.2s, border-color 0.2s;
}
.app-footer-links {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.55rem;
}
.app-footer-meta {
    grid-column: 3;
    justify-self: end;
}
.app-footer-links a,
.app-footer-cookie-btn {
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}
.app-footer-links a:hover,
.app-footer-cookie-btn:hover {
    color: var(--text-heading);
    text-decoration: underline;
}
.app-footer-sep { color: var(--border-input, var(--border-card)); opacity: 0.7; }
.app-footer-meta { white-space: nowrap; opacity: 0.85; }
:fullscreen .app-footer { display: none; }
@media (max-width: 640px) {
    .app-footer { grid-template-columns: 1fr; justify-items: center; padding: 0.35rem 0.75rem; }
    .app-footer-meta { display: none; }
    .app-footer-links { grid-column: 1; gap: 0.1rem 0.4rem; font-size: 0.68rem; }
}

/* v6.3.2 — Drag-resize handle for the left side panel. Sits at the
   chart-x=0 boundary; positionSidePanelResizer() sets `left` after every
   redraw. 8px hit area, invisible until hover, then a 2px theme accent
   line. col-resize cursor. Double-click resets to auto-fit width. */
.side-panel-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    transform: translateX(-4px);
    cursor: col-resize;
    z-index: 15;
    background: transparent;
    transition: background 0.12s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.side-panel-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 2px;
    height: 100%;
    background: var(--border-focus);
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
    border-radius: 1px;
}

.side-panel-resizer:hover::before,
.side-panel-resizer.is-dragging::before {
    opacity: 0.85;
}

.side-panel-resizer.is-dragging {
    background: transparent;
}

/* While the user is dragging the resizer, lock the cursor across the page
   so it doesn't flicker between col-resize and the default arrow as the
   pointer crosses the handle boundary. */
body.side-panel-resizing,
body.side-panel-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.75rem;
    padding: clamp(0.65rem, 1.5vw, 1rem) clamp(0.75rem, 2vw, 1.25rem);
    transition: background 0.2s, border-color 0.2s;
}

/* ── Inputs ────────────────────────────────────────────────────── */
.label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.input {
    width: 100%;
    height: 2.25rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    color: var(--text-input);
    outline: none;
    transition: border-color 0.15s, background 0.2s, color 0.2s;
}

.input:focus {
    border-color: var(--border-focus);
}

.input::placeholder {
    color: var(--text-placeholder);
}

/* Date trigger input */
.date-trigger {
    cursor: pointer;
}

/* ── Custom Date Picker ────────────────────────────────────────── */
.date-picker {
    position: fixed;
    z-index: 3000;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 1rem;
    padding: 0.75rem;
    width: 260px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    animation: dialogIn 0.12s ease-out;
    user-select: none;
}

.date-picker.hidden { display: none; }

.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.dp-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-heading);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.1s;
}

.dp-title:hover {
    background: var(--bg-input);
}

.dp-nav {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-body);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
    line-height: 1;
}

.dp-nav:hover {
    background: var(--border-focus);
    color: white;
}

.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 0.25rem;
}

.dp-weekdays span {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 0.25rem 0;
}

.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-day {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

.dp-day:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

.dp-day.today {
    border: 1.5px solid var(--border-focus);
    font-weight: 700;
}

.dp-day.selected {
    background: var(--border-focus);
    color: white;
    font-weight: 700;
}

.dp-day.other-month {
    color: var(--text-faint);
    opacity: 0.4;
}

.dp-day.other-month:hover {
    opacity: 0.7;
}

/* Month / Year cells */
.dp-cell {
    padding: 0.5rem 0.25rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s;
    text-align: center;
}

.dp-cell:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

.dp-cell.today {
    border: 1.5px solid var(--border-focus);
    font-weight: 700;
}

.dp-cell.selected {
    background: var(--border-focus);
    color: white;
    font-weight: 700;
}

.dp-cell.other-month {
    color: var(--text-faint);
    opacity: 0.4;
}

.dp-cell.other-month:hover {
    opacity: 0.7;
}

.dp-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-card);
}

.dp-today, .dp-clear {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.1s;
}

.dp-today {
    background: var(--border-focus);
    color: white;
}

.dp-today:hover {
    opacity: 0.85;
}

.dp-clear {
    background: var(--bg-input);
    color: var(--text-muted);
}

.dp-clear:hover {
    color: var(--text-heading);
}

/* Color swatch trigger (replaces native color input) */
.color-swatch {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 2px solid var(--border-card);
    cursor: pointer;
    transition: border-color 0.1s, transform 0.1s;
}

.color-swatch:hover {
    border-color: var(--border-focus);
    transform: scale(1.06);
}

/* ── Custom Color Picker ───────────────────────────────────────── */
.color-picker-popup {
    position: fixed;
    z-index: 3000;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 1rem;
    padding: 0.75rem;
    width: 228px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    animation: dialogIn 0.12s ease-out;
}

.color-picker-popup.hidden { display: none; }

/* Saturation/Lightness canvas */
.cp-map-area {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
    cursor: crosshair;
}

.cp-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0.5rem;
}

.cp-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
}

/* Hue slider */
.cp-hue-row {
    margin-bottom: 0.5rem;
}

.cp-hue-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
        hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
        hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%),
        hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%), hsl(360,100%,50%)
    );
}

.cp-hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

.cp-hue-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

/* Presets label */
.cp-presets-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
}

.cp-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.cp-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.375rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
}

.cp-swatch:hover {
    transform: scale(1.15);
    border-color: var(--text-heading);
}

.cp-swatch.selected {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
}

.cp-hex-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cp-preview {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 2px solid var(--border-card);
    flex-shrink: 0;
}

.cp-hex-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 9999px;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
    color: var(--text-input);
    outline: none;
    text-transform: uppercase;
    text-align: center;
}

.cp-hex-input:focus {
    border-color: var(--border-focus);
}

/* ── Priority chips ────────────────────────────────────────────── */
.priority-chip {
    cursor: pointer;
}

.priority-chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    min-width: 4.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.priority-high span {
    color: var(--chip-text);
    background: var(--chip-bg);
}
.priority-high:has(:checked) span {
    color: var(--priority-high-text);
    background: var(--priority-high-bg);
    border-color: var(--priority-high-border);
}

.priority-med span {
    color: var(--chip-text);
    background: var(--chip-bg);
}
.priority-med:has(:checked) span {
    color: var(--priority-med-text);
    background: var(--priority-med-bg);
    border-color: var(--priority-med-border);
}

.priority-low span {
    color: var(--chip-text);
    background: var(--chip-bg);
}
.priority-low:has(:checked) span {
    color: var(--priority-low-text);
    background: var(--priority-low-bg);
    border-color: var(--priority-low-border);
}

.custom-priority-field {
    height: 2.25rem;
    width: 6rem;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid #d946ef;
    background: var(--bg-input);
    color: var(--text-input);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    outline: none;
    text-align: center;
}

.custom-priority-field::placeholder {
    text-transform: none;
    font-weight: 400;
    color: var(--text-placeholder);
}

.priority-custom-chip span {
    color: var(--chip-text);
    background: var(--chip-bg);
}
.priority-custom-chip:has(:checked) span {
    color: #d946ef;
    background: rgba(217, 70, 239, 0.12);
    border-color: #d946ef;
}
[data-theme$="-dark"] .priority-custom-chip:has(:checked) span {
    color: #f0abfc;
    background: rgba(217, 70, 239, 0.15);
    border-color: rgba(217, 70, 239, 0.5);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--accent, #6366f1);
    color: var(--btn-add-text, white);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-dark, #4f46e5);
}

.btn-primary:disabled {
    background: #4b5060;
    color: #8890a0;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    padding: 0.5rem 1rem;
    background: var(--bg-input);
    color: var(--text-body);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid var(--border-input);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-export:hover {
    background: var(--bg-hover);
    border-color: var(--border-focus);
    color: var(--text-heading);
}

.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: var(--bg-input);
    color: var(--accent, #6366f1);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid var(--border-input);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-accent:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

/* ── Task Properties row ───────────────────────────────────────── */
/* v4.4.0: 2-row CSS grid. Name spans cols 1–2 row 1; Start/End sit in cols 1
   and 2 row 2; Color and Create span both rows. Priority (row 1) and Type
   (row 2) share col 4. */
.props-row {
    display: grid;
    grid-template-columns:
        minmax(5rem, 7rem)
        minmax(5rem, 7rem)
        auto
        auto
        auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "name  name  color priority add"
        "start end   color type     add";
    column-gap: 0.6rem;
    row-gap: 0.4rem;
    width: 100%;
    align-items: center;
    justify-content: start;
}

.prop-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* Visually hide field labels (TASK/START/END/COLOR/PRIORITY/TYPE) and the
   "Task Properties" section heading — placeholders + chip text are enough.
   Kept in DOM for screen readers. */
.prop-field .label,
.section-label[data-i18n="taskProperties"] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.prop-field .input,
.prop-field .input-color {
    width: 100%;
}

/* Chip groups inside prop-priority / prop-type must stay on one line —
   never split "Low" from Med/High/Custom, never orphan Task/Milestone/Group. */
.prop-priority > div,
.prop-type > div {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.prop-name     { grid-area: name;     }
.prop-start    { grid-area: start;    }
.prop-end      { grid-area: end;      }
.prop-color    { grid-area: color; align-self: stretch; align-items: center; }
.prop-priority { grid-area: priority; min-width: 11rem; }
.prop-type     { grid-area: type; min-width: 11rem; }
.prop-add      { grid-area: add; align-self: center; }

/* Milestones are single-date events — collapse the End field and let
   Start span both date columns so the user picks one date, not a range.
   Applies to the inline Task Properties bar and to the Edit/Create Task dialog. */
.props-row.is-milestone .prop-end { display: none; }
.props-row.is-milestone .prop-start { grid-column: 1 / span 2; }
#taskDialog.is-milestone #dlgEndField { display: none; }

/* ── v4.4.0 dropdown selector for priority + type ─────────────── */
.prop-select {
    position: relative;
    width: 100%;
}

.prop-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 0.55rem;
    cursor: pointer;
    color: var(--text-heading);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.prop-select-trigger:hover,
.prop-select-trigger[aria-expanded="true"] {
    border-color: var(--border-focus);
}

.prop-select-trigger[aria-expanded="true"] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.prop-select-trigger.is-placeholder .prop-select-label {
    color: var(--text-placeholder);
    font-weight: 400;
}

.prop-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prop-select-caret {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 0.15s;
}

.prop-select.open .prop-select-caret {
    transform: rotate(180deg);
}

.prop-select-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.6rem;
    padding: 0.3rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    min-width: 100%;
}

.prop-select.open .prop-select-menu {
    display: flex;
}

.prop-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.45rem;
    cursor: pointer;
    user-select: none;
    color: var(--text-heading);
    font-size: 0.8rem;
    transition: background 0.1s;
}

.prop-select-option:hover {
    background: var(--bg-hover);
}

.prop-select-option:has(:checked) {
    background: var(--bg-hover);
    font-weight: 600;
}

.prop-select-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border-input);
    background: transparent;
}

.prop-select-dot-empty {
    border-style: dashed;
}

.prop-select-dot-low    { background: var(--priority-low-border);  border-color: var(--priority-low-border);  }
.prop-select-dot-med    { background: var(--priority-med-border);  border-color: var(--priority-med-border);  }
.prop-select-dot-high   { background: var(--priority-high-border); border-color: var(--priority-high-border); }
.prop-select-dot-custom { background: var(--accent, #6366f1);                     border-color: var(--accent, #6366f1);                     }

.prop-select-icon-slot {
    width: 0.9rem;
    height: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-placeholder);
}

.prop-select-trigger:not(.is-placeholder) .prop-select-icon-slot {
    color: var(--text-heading);
}

.prop-select-icon-slot svg {
    width: 100%;
    height: 100%;
}

.prop-select-menu .custom-priority-field {
    margin-top: 0.25rem;
    width: 100%;
}

/* Color swatch fills its row-spanning grid cell vertically. */
.prop-color .color-swatch {
    width: 2.5rem;
    height: 100%;
    min-height: 2.25rem;
}

/* Create button: slim, centered between the two input rows. */
.prop-add .btn-add-modern {
    height: 2.5rem;
    align-self: center;
}

.btn-add-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    width: auto;
    max-width: 14rem;
    gap: 0.55rem;
    height: 2.25rem;
    padding: 0.25rem 0.95rem 0.25rem 0.3rem;
    background: var(--btn-add-bg);
    color: var(--btn-add-text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: filter 0.03s ease-out, transform 0.02s ease-out, box-shadow 0.05s ease-out;
    white-space: nowrap;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.07),
        0 2px 6px color-mix(in srgb, var(--btn-add-bg) 28%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.btn-add-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    border-radius: inherit;
}

.btn-add-modern .btn-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--btn-add-bg);
    flex-shrink: 0;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65);
    z-index: 1;
    transform-origin: center;
}

.btn-add-modern .btn-add-icon svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.75;
}

.btn-add-modern .btn-add-label {
    position: relative;
    z-index: 1;
}

.btn-add-modern:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.09),
        0 4px 10px color-mix(in srgb, var(--btn-add-bg) 38%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-add-modern:active {
    transform: translateY(0);
    filter: brightness(0.97);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.07),
        0 1px 4px color-mix(in srgb, var(--btn-add-bg) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-add-modern:focus-visible {
    outline: 2px solid var(--btn-add-bg);
    outline-offset: 2px;
}

.btn-add-modern.pop {
    animation: addConfirm 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-add-modern.pop .btn-add-icon {
    animation: iconPop 0.22s cubic-bezier(0.34, 1.6, 0.64, 1);
}

@keyframes addConfirm {
    0% {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.07),
            0 2px 6px color-mix(in srgb, var(--btn-add-bg) 28%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
    45% {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.07),
            0 0 0 5px color-mix(in srgb, var(--btn-add-bg) 24%, transparent),
            0 4px 14px color-mix(in srgb, var(--btn-add-bg) 44%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
    100% {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.07),
            0 2px 6px color-mix(in srgb, var(--btn-add-bg) 28%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
}

@keyframes iconPop {
    0%   { transform: scale(1) rotate(0deg); }
    45%  { transform: scale(1.25) rotate(180deg); }
    75%  { transform: scale(0.96) rotate(300deg); }
    100% { transform: scale(1) rotate(360deg); }
}

.ob-empty {
    text-align: center;
    color: var(--text-faint);
    font-size: 0.75rem;
    font-weight: 400;
    padding: 1.5rem 0;
}

.task-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    min-width: 5.5rem;
    max-width: 8rem;
    transition: background 0.1s, box-shadow 0.15s;
}

.task-chip:hover {
    background: var(--bg-hover);
    box-shadow: 0 0 0 1px var(--border-card), 0 2px 8px rgba(255, 255, 255, 0.08);
}

[data-theme$="-dark"] .task-chip:hover {
    box-shadow: 0 0 0 1px var(--border-card), 0 2px 12px rgba(255, 255, 255, 0.06);
}

/* ── IMPROVEMENT 5: Compact Object Browser List ────────────────── */
.task-list-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    column-gap: 0.35rem;
    row-gap: 2px;
    /* 3 rows max in multi-column = 6 tasks in 2-col, 9 in 3-col.
       Past that, scroll instead of expanding the toolbar panel. */
    max-height: 5.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    width: 100%;
    max-width: 100%;
}

.task-list-compact.single-column {
    grid-template-columns: 1fr;
    /* 6 rows max in single-column = 6 tasks visible. */
    max-height: 11rem;
}

.task-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.35rem;
    transition: background 0.1s;
    cursor: default;
    min-width: 0;
    overflow: hidden;
}

.task-row:hover {
    background: var(--bg-hover);
}

.task-row-num {
    flex-shrink: 0;
    min-width: 1.4rem;
    padding-right: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-faint);
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--border-card);
    margin-right: 0.15rem;
    user-select: none;
}

.task-row-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.task-row-dot:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px var(--border-focus);
}

.task-row-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.1s;
}

.task-row-name:hover {
    border-color: var(--text-muted);
}

.task-row-duration {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
    cursor: pointer;
    padding: 0.08rem 0.4rem;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.08);
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
}

.task-row-duration:hover {
    background: rgba(100, 116, 139, 0.16);
    color: var(--text-muted);
}

.task-row-priority {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.08rem 0.3rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: opacity 0.1s;
    flex-shrink: 0;
}

.task-row-priority:hover {
    opacity: 0.8;
}

.task-row-delete {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--delete-hover-bg);
    color: var(--delete-hover-color);
    border: none;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

.task-row:hover .task-row-delete {
    opacity: 1;
    pointer-events: auto;
}

.task-row-delete:hover {
    transform: scale(1.2);
}

/* Checkbox: always in flow (reserves space), invisible until hover */
.task-row-checkbox {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    border: 1.5px solid var(--border-input);
    background: var(--bg-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: transparent;
    transition: opacity 0.1s, background 0.1s, border-color 0.1s;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

.task-row:hover .task-row-checkbox,
.task-row-checkbox.always-show {
    opacity: 1;
    pointer-events: auto;
}

.task-row-checkbox.checked {
    background: var(--border-focus);
    border-color: var(--border-focus);
    color: white;
}

.task-row.selected {
    background: color-mix(in srgb, var(--border-focus) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--border-focus);
}

.task-row.selected:hover {
    background: color-mix(in srgb, var(--border-focus) 18%, transparent);
}

/* Delete X on hover */
.task-chip-delete {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--delete-hover-bg);
    color: var(--delete-hover-color);
    border: 1px solid var(--delete-hover-color);
    font-size: 0.65rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
    z-index: 5;
    line-height: 1;
}

.task-chip:hover .task-chip-delete {
    display: flex;
}

.task-chip-delete:hover {
    transform: scale(1.2);
}

.task-chip-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-body);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.1s;
}

.task-chip-name:hover {
    border-color: var(--text-muted);
}

.task-chip-name-input {
    font-size: 0.72rem;
    font-weight: 500;
    text-align: left;
    width: auto;
    min-width: 3rem;
    max-width: 8rem;
    background: var(--bg-input);
    border: 1px solid var(--border-focus);
    border-radius: 0.25rem;
    color: var(--text-input);
    padding: 0.1rem 0.25rem;
    outline: none;
    flex-shrink: 1;
    flex-grow: 0;
}

.task-chip-priority {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    cursor: pointer;
    position: relative;
    transition: opacity 0.1s;
}

.task-chip-priority:hover {
    opacity: 0.8;
}

/* Priority popup menu */
.priority-popup {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.75rem;
    padding: 0.35rem;
    display: flex;
    gap: 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1500;
    animation: popIn 0.12s ease-out;
}

.priority-popup-option {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: all 0.1s;
}

.priority-popup-option:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

.priority-popup-option.active {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

.priority-custom-input {
    font-size: 0.6rem;
    font-weight: 600;
    width: 4rem;
    padding: 0.25rem 0.4rem;
    border-radius: 9999px;
    border: 1px solid var(--border-focus);
    background: var(--bg-input);
    color: var(--text-input);
    outline: none;
    text-transform: uppercase;
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Create Task dialog (v6.2.0) — sibling of Edit Task dialog. Same DOM,
   hide the Delete button and right-align the lone primary (Create) button. */
.dialog.dialog-create-mode #dialogDelete {
    display: none;
}
.dialog.dialog-create-mode .dialog-footer {
    justify-content: flex-end;
}

/* Chart right-click context menu (v6.2.0) — opens at the cursor when the
   user right-clicks empty chart canvas. Mirrors .priority-popup styling. */
.chart-context-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.6rem;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 12rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    z-index: 1500;
    animation: popIn 0.12s ease-out;
    transform-origin: top left;
}

.chart-context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--text-heading);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.1s, color 0.1s;
}

.chart-context-menu-item:hover,
.chart-context-menu-item:focus-visible {
    background: var(--bg-hover);
    outline: none;
}

.chart-context-menu-item.danger {
    color: var(--priority-high-text);
}

.chart-context-menu-item.danger .chart-context-menu-icon {
    color: var(--priority-high-text);
}

.chart-context-menu-item.danger:hover,
.chart-context-menu-item.danger:focus-visible {
    background: var(--priority-high-bg);
    color: var(--priority-high-text);
}

.chart-context-menu-item.danger:hover .chart-context-menu-icon,
.chart-context-menu-item.danger:focus-visible .chart-context-menu-icon {
    color: var(--priority-high-text);
}

.chart-context-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.chart-context-menu-item:hover .chart-context-menu-icon,
.chart-context-menu-item:focus-visible .chart-context-menu-icon {
    color: var(--text-heading);
}

.chart-context-menu-icon svg {
    width: 100%;
    height: 100%;
}

.chart-context-menu-label {
    flex: 1 1 auto;
    line-height: 1.1;
}

.task-priority-high { color: var(--priority-high-text); background: var(--priority-high-bg); }
.task-priority-medium { color: var(--priority-med-text); background: var(--priority-med-bg); }
.task-priority-low { color: var(--priority-low-text); background: var(--priority-low-bg); }
.task-priority-custom { color: #d946ef; background: rgba(217, 70, 239, 0.12); border: 1px solid rgba(217, 70, 239, 0.3); }
[data-theme$="-dark"] .task-priority-custom { color: #f0abfc; background: rgba(217, 70, 239, 0.15); border: 1px solid rgba(217, 70, 239, 0.3); }

/* ── Bulk actions ──────────────────────────────────────────────── */
.bulk-actions {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    animation: popIn 0.12s ease-out;
}

.bulk-actions.hidden { display: none; }

.bulk-btn {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-input);
    cursor: pointer;
    transition: all 0.1s;
    background: var(--bg-input);
    color: var(--text-body);
}

.bulk-btn-delete {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}

.bulk-btn-delete:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.bulk-btn-priority:hover {
    background: var(--bg-hover);
    color: var(--icon-hover-color);
    border-color: var(--border-focus);
}

/* ── Checkbox on chips ─────────────────────────────────────────── */
.task-chip-checkbox {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.25rem;
    border: 1.5px solid var(--border-input);
    background: var(--bg-card);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: transparent;
    transition: all 0.1s;
    z-index: 5;
}

.task-chip:hover .task-chip-checkbox,
.task-chip-checkbox.always-show {
    display: flex;
}

.task-chip-checkbox.checked {
    background: var(--border-focus);
    border-color: var(--border-focus);
    color: white;
}

.task-chip.selected {
    outline: 2px solid var(--border-focus);
    outline-offset: -1px;
}

/* Delete preview list */
.delete-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-height: 10rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.delete-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 3.5rem;
}

.delete-preview-item .mini-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.delete-preview-item .mini-name {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-body);
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-preview-item .mini-prio {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
}

/* ── Icon buttons (dialog close, etc.) ─────────────────────────── */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.1s;
    flex-shrink: 0;
}

.icon-btn-edit {
    background: transparent;
    color: var(--icon-color);
}
.icon-btn-edit:hover {
    background: var(--icon-hover-bg);
    color: var(--icon-hover-color);
}

.icon-btn-delete {
    background: transparent;
    color: var(--icon-color);
}
.icon-btn-delete:hover {
    background: var(--delete-hover-bg);
    color: var(--delete-hover-color);
}

/* ── Edit input (inline) ───────────────────────────────────────── */
.edit-input {
    background: var(--bg-input);
    border: 1px solid var(--border-focus);
    border-radius: 0.375rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    color: var(--text-input);
    outline: none;
    box-sizing: border-box;
}

/* v6.3.2 — Inline rename input for side-panel task labels.
   Blends with the SVG label so the visual transition from
   "static label" to "editable" is minimal: no border, no
   different background, same font weight / colour / right-edge
   alignment. A thin focus underline is the only edit-mode cue. */
.edit-input.edit-input-inline-label {
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    padding: 0 10px 0 0;       /* right padding = label x-anchor offset (-10) */
    width: 100%;
    height: 100%;
    color: var(--text-heading);
    text-align: right;
    line-height: 1;
    font-family: inherit;
    /* font-size + font-weight come from inline style set by JS */
    transition: border-bottom-color 0.12s;
}

.edit-input.edit-input-inline-label:focus {
    border-bottom-color: var(--border-focus);
}

/* foreignObject host for the inline-rename input — clear default margins
   so the input sits flush at the row baseline. */
foreignObject.inline-rename-fo {
    overflow: visible;
}

/* ── Chart ─────────────────────────────────────────────────────── */
.chart-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0 15px;
}

.viewport-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    row-gap: 0.2rem;
    min-width: 0;
    max-width: 100%;
}

.viewport-controls .label {
    font-size: 0.6rem;
    white-space: nowrap;
}

.viewport-field {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 0 0 9rem;
}

.viewport-field .viewport-date {
    flex: initial;
    width: 100%;
    height: 1.85rem;
    padding: 0.2rem 0.5rem;
}

.viewport-field-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    margin: 0;
}

.viewport-fields-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.viewport-fields-row {
    display: flex;
    gap: 0.4rem;
}

.viewport-span-row {
    width: 100%;
    text-align: center;
}

.viewport-span-row .viewport-span {
    display: inline-block;
    text-align: center;
}

.viewport-date {
    flex: 0 1 9rem;
    min-width: 6.5rem;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
}

.viewport-divider {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 2.4rem;
    background: var(--text-faint);
    opacity: 0.25;
    margin: 0 0.6rem;
    user-select: none;
}

.viewport-apply-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.viewport-apply-stack .viewport-apply,
.viewport-apply-stack .btn-zoom-fit {
    width: 100%;
    justify-content: center;
}

.viewport-tools-grid {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.viewport-dot {
    color: var(--text-faint);
    font-size: 1.2rem;
    line-height: 1;
}


.viewport-span {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
    min-width: 0;
    flex: 0 1 auto;
    text-align: center;
}

.viewport-apply {
    font-size: 0.7rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    transition: all 0.2s;
}

.viewport-apply.inactive {
    opacity: 0.35;
    pointer-events: none;
}

.viewport-apply.active {
    animation: applyPulse 0.3s ease-out;
}

@keyframes applyPulse {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    100% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

/* ── Zoom Slider (pinned to chart bottom, pill box) ──────────── */
/* Stacked label + control wrapper — used for the zoom slider + tools
   groups so each carries a small "Adjust Manually" / "Tools" caption
   above it, mirroring the VIEWPORT START/END labels above the date
   inputs. */
.viewport-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.zoom-slider-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    background: rgba(100, 116, 139, 0.10);
    border-radius: 999px;
}

.zoom-slider-inline .zoom-slider {
    width: 7rem;
}

.zoom-slider-row {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-slider-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1rem;
    border: 1px solid var(--border-card);
    border-radius: 9999px;
    background: var(--bg-card);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.zoom-slider-row .zoom-slider {
    width: 8rem;
}

.zoom-pct {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
    user-select: none;
    min-width: 2rem;
}

.zoom-step-btn {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-body);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, border-color 0.12s;
}

.zoom-step-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-focus);
    color: var(--border-focus);
}

.zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: var(--border-input);
    border-radius: 2px;
    outline: none;
    margin: 0;
    cursor: pointer;
}

.zoom-slider::-webkit-slider-runnable-track {
    height: 3px;
    background: var(--border-input);
    border-radius: 2px;
    border: none;
}

.zoom-slider::-moz-range-track {
    height: 3px;
    background: var(--border-input);
    border-radius: 2px;
    border: none;
}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-focus);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--border-input);
    cursor: grab;
    margin-top: -4.5px;
    transition: transform 0.1s, box-shadow 0.1s;
}

.zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.zoom-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

.zoom-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-focus);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--border-input);
    cursor: grab;
    transition: transform 0.1s, box-shadow 0.1s;
}

.zoom-slider::-moz-range-thumb:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.zoom-slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

.gantt-chart-container {
    position: relative;
    width: 100%;
    min-height: 350px;
    display: flex;
    flex-direction: column;
}

.ctrl-zoom-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.6rem 1.2rem;
    background: var(--bg-card);
    color: var(--text-heading);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid var(--border-card);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 2000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.ctrl-zoom-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.empty-state {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.empty-state svg { color: var(--text-faint); }
.empty-state p { color: var(--text-faint); }

.grid line {
    stroke: var(--grid-stroke);
    shape-rendering: crispEdges;
}

.grid-vertical line {
    stroke-opacity: 0.5;
}

.grid-horizontal line {
    stroke-opacity: 0.8;
}

.task-bar {
    cursor: move;
    transition: opacity 0.15s, filter 0.15s;
    filter: brightness(1);
}

.task-bar:hover {
    filter: brightness(1.15);
}

.resize-handle {
    transition: opacity 0.1s;
    opacity: 0;
}

.task-group:hover .resize-handle {
    opacity: 1;
    fill: rgba(255, 255, 255, 0.2);
}

.task-label {
    fill: var(--task-label-fill);
    font-size: 0.75rem;
    font-weight: 500;
    pointer-events: none;
}

.axis text {
    font-size: 0.75rem;
    fill: var(--axis-text);
}

.y.axis text:hover {
    fill: var(--text-heading);
}

.axis path,
.axis line {
    stroke: var(--axis-stroke);
}

/* Weekday initial stacked above the day number at day-level zoom.
   More specific than `.axis text` so it keeps its smaller size + muted fill. */
.axis text.x-axis-dow {
    fill: var(--text-muted);
    font-size: 0.5rem;
    font-weight: 600;
}

/* Y-axis / X-axis opaque mask rects (behind task labels + date labels).
   Follow the theme via --chart-bg. CSS wins over the `fill` SVG attribute,
   so this auto-updates on theme switch without a chart re-render. */
.y-axis-bg,
.x-axis-bg {
    fill: var(--chart-bg);
}

/* ── Shift+drag marquee (multi-select rubber-band) ─────────────── */
.selection-rubber-band {
    fill: var(--border-focus);
    fill-opacity: 0.12;
    stroke: var(--border-focus);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

/* Selected task bars, groups, milestones, and off-bar labels.
   Uses the focus color so the selection adapts to every theme. */
.task-bar.selected,
.group-bar.selected {
    stroke: var(--border-focus);
    stroke-width: 3.5;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--border-focus) 70%, transparent));
}
.milestone-diamond.selected {
    stroke: var(--border-focus);
    stroke-width: 3;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--border-focus) 70%, transparent));
}
.bar-label.selected {
    fill: var(--border-focus);
    font-weight: 700;
}

/* ── Toast ─────────────────────────────────────────────────────── */
.message-box {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 1000;
    display: none;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
    animation: slideUpCenter 0.2s ease-out;
}

.message-box.toast-success {
    background: var(--toast-success-bg);
    color: var(--toast-success-text);
    border: 1px solid var(--toast-success-border);
}

.message-box.toast-error {
    background: var(--toast-error-bg);
    color: var(--toast-error-text);
    border: 1px solid var(--toast-error-border);
}

@keyframes slideIn {
    from { transform: translateX(1rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Bottom-center toast: keep the horizontal centering (translateX(-50%)) in both
   keyframes so it doesn't jump off-centre when the slide-up finishes. */
@keyframes slideUpCenter {
    from { transform: translateX(-50%) translateY(0.75rem); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ── Task Edit Dialog ──────────────────────────────────────────── */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: var(--dialog-overlay);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}

.dialog-overlay.hidden {
    display: none;
}

.dialog {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.75rem;
    width: 100%;
    max-width: min(520px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: dialogIn 0.15s ease-out;
}

.dialog-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border-card);
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    --hx: -200px;
    --hy: 50%;
}
/* Cursor-tracking indigo "glare", mirroring .app-header-compact. JS toggles
   `.header-spotlight` on mouseenter/leave and writes --hx/--hy on mousemove
   via a global delegation handler in app.js. */
.dialog-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(
        circle 200px at var(--hx) var(--hy),
        rgba(5, 150, 105, 0.18) 0%,
        rgba(5, 150, 105, 0.06) 50%,
        transparent 100%
    );
}
.dialog-header.header-spotlight::before { opacity: 1; }
[data-theme$="-dark"] .dialog-header::before {
    background: radial-gradient(
        circle 200px at var(--hx) var(--hy),
        rgba(52, 211, 153, 0.25) 0%,
        rgba(52, 211, 153, 0.08) 50%,
        transparent 100%
    );
}
.dialog-header > * { position: relative; z-index: 1; }

.dialog-header h3 {
    color: var(--text-heading);
}

.about-modal {
    position: relative;
}
.about-modal-body {
    padding: 0;
}
.about-modal-close,
.templates-modal-close {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    background: #dc2626;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s;
}
.about-modal-close:hover,
.templates-modal-close:hover {
    background: #b91c1c;
    transform: scale(1.05);
}
.about-modal-close:focus-visible,
.templates-modal-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem;
}

.dialog-row {
    display: flex;
    gap: 0.75rem;
}

.dialog-notes {
    resize: vertical;
    min-height: 4rem;
    font-family: inherit;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--border-card);
}

.btn-dialog-delete {
    padding: 0.4rem 0.85rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid var(--dialog-delete-border);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-dialog-delete:hover {
    background: var(--dialog-delete-hover-bg);
    color: var(--dialog-delete-hover-text);
    border-color: var(--dialog-delete-hover-border);
}

/* ── GDPR self-service buttons + dialogs ─────────────────────────── */
.btn-secondary {
    padding: 0.4rem 0.85rem;
    background: transparent;
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid var(--border-card);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
    border-color: var(--border-input);
}
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger {
    padding: 0.4rem 0.85rem;
    background: #b91c1c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: 1px solid #b91c1c;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }
.btn-danger:disabled {
    background: transparent;
    color: #fca5a5;
    border-color: rgba(185, 28, 28, 0.35);
    cursor: not-allowed;
}

.profile-privacy-section { margin-top: 1.2rem; }
.profile-privacy-divider { border: none; border-top: 1px solid var(--border-card); margin: 0 0 1rem; }
.profile-privacy-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 0.5rem; }
.profile-privacy-help { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 0.7rem; line-height: 1.5; }
.profile-privacy-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.profile-privacy-status { margin-top: 0.7rem; padding: 0.5rem 0.7rem; font-size: 0.72rem; border-radius: 0.3rem; background: var(--accent-soft); color: var(--accent-dark); }
.profile-privacy-status.is-error { background: rgba(185, 28, 28, 0.08); color: #b91c1c; }

.account-delete-warning { font-size: 0.78rem; color: var(--text-body); line-height: 1.55; margin: 0 0 0.9rem; }
.account-delete-warning strong { color: var(--text-heading); }
.account-delete-confirm-prompt { font-size: 0.78rem; margin: 0 0 0.4rem; }
.account-delete-confirm-prompt strong { color: #b91c1c; font-family: 'IBM Plex Mono', monospace; }
.account-delete-input { width: 100%; margin-top: 0.3rem; }

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

@keyframes dialogIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Export Image Dialog ────────────────────────────────────────── */
.export-dialog {
    max-width: min(1280px, calc(100vw - 2rem));
}

.export-dialog-body {
    padding: 1rem 1.15rem;
}

.export-dialog-grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.export-dialog-controls {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.export-format-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.export-format-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg-card);
    border: 1.5px solid var(--border-card);
    border-radius: 9999px;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: left;
}

.export-format-card:hover {
    border-color: var(--title-accent);
}

.export-format-card[aria-checked="true"] {
    border-color: var(--title-accent);
    background: var(--bg-hover);
    box-shadow: 0 0 0 1px var(--title-accent) inset;
}

.export-format-icon {
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.12s ease;
}

.export-format-card[aria-checked="true"] .export-format-icon {
    color: var(--title-accent);
}

.export-format-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    line-height: 1.15;
}

.export-format-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: 0.02em;
}

.export-format-hint {
    font-size: 0.62rem;
    color: var(--text-faint);
    font-weight: 500;
}

.export-filename-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 0.3rem;
}

.export-filename-row .input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    flex: 1;
    min-width: 0;
}

.export-filename-ext {
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem 0 0.6rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-card);
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
}

.export-scale-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.export-scale-row {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.export-scale-chip,
.export-bg-chip,
.export-res-chip {
    padding: 0.35rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 9999px;
    color: var(--text-body);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
}

.export-scale-chip:hover,
.export-bg-chip:hover,
.export-res-chip:hover {
    border-color: var(--title-accent);
}

.export-scale-chip[aria-checked="true"],
.export-bg-chip[aria-checked="true"],
.export-res-chip[aria-checked="true"] {
    border-color: var(--title-accent);
    background: var(--bg-hover);
    color: var(--text-heading);
    box-shadow: 0 0 0 1px var(--title-accent) inset;
}

.export-scale-chip[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.export-resolution-row {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.export-dims-line {
    font-size: 0.68rem;
    color: var(--text-faint);
    font-family: ui-monospace, monospace;
    min-height: 1em;
}

.export-bg-row {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Custom Color row — v6.5.0 (title outside + pill with checkbox + swatch) */
.export-bg-custom-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.export-bg-custom-title {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-body);
}
.export-bg-custom-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.45rem 0.25rem 0.3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 9999px;
    transition: all 0.12s ease;
}
.export-bg-custom-pill:hover { border-color: var(--title-accent); }
.export-bg-custom-pill[aria-checked="true"] {
    border-color: var(--title-accent);
    background: var(--bg-hover);
    box-shadow: 0 0 0 1px var(--title-accent) inset;
}
.export-bg-custom-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: var(--bg-input);
    border: 1.5px solid var(--border-input);
    border-radius: 4px;
    color: transparent;
    cursor: pointer;
    transition: all 0.12s ease;
}
.export-bg-custom-check:hover { border-color: var(--title-accent); }
.export-bg-custom-check[aria-pressed="true"] {
    background: var(--title-accent);
    border-color: var(--title-accent);
    color: #fff;
}
.export-bg-custom-swatch-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.export-bg-custom-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
}
.export-bg-custom-swatch {
    display: inline-block;
    width: 26px;
    height: 18px;
    border: 1px solid var(--border-card);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Extras row — v6.5.0 (pill-shaped toggles replacing the old plain-checkbox grid) */
.export-extras-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}
.export-extra-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 9999px;
    color: var(--text-body);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    user-select: none;
}
.export-extra-pill:hover { border-color: var(--title-accent); }
.export-extra-pill input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.export-extra-pill-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-input);
    border-radius: 4px;
    color: transparent;
    transition: all 0.12s ease;
    flex-shrink: 0;
}
.export-extra-pill input[type="checkbox"]:checked ~ .export-extra-pill-check {
    background: var(--title-accent);
    border-color: var(--title-accent);
    color: #fff;
}
.export-extra-pill:has(input[type="checkbox"]:checked) {
    border-color: var(--title-accent);
    background: var(--bg-hover);
    box-shadow: 0 0 0 1px var(--title-accent) inset;
}
.export-extra-pill-label {
    color: var(--text-heading);
}

.export-bg-note {
    margin-top: 0.3rem;
    font-size: 0.65rem;
    color: var(--text-faint);
    font-style: italic;
}

.export-bg-note.hidden { display: none; }

.export-quality-group { display: flex; flex-direction: column; gap: 0.25rem; }
.export-quality-group.hidden { display: none; }

.export-quality-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.export-preview-pane {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    align-self: stretch;
}

.export-preview-box {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: var(--bg-hover);
    background-image:
        linear-gradient(45deg, rgba(128,128,128,0.15) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(128,128,128,0.15) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(128,128,128,0.15) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(128,128,128,0.15) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border: 1px solid var(--border-card);
    border-radius: 0.5rem;
    min-height: 380px;
    overflow: hidden;
}

#exportPreviewCanvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    border-radius: 2px;
}

.export-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: inherit;
    backdrop-filter: blur(2px);
}

.export-preview-loading.hidden { display: none; }

/* Mobile: stack controls over preview */
@media (max-width: 639px) {
    .export-dialog {
        max-width: calc(100vw - 1rem);
    }
    .export-dialog-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .export-preview-box {
        min-height: 160px;
    }
    #exportPreviewCanvas {
        max-height: 180px;
    }
}

/* ── Responsive ────────────────────────────────────────────────── */

/* Mobile: stack vertically, icon-only toolbar, WCAG-compliant touch targets */
@media (max-width: 639px) {
    .top-panel {
        flex-direction: column;
        padding: 0 0.75rem;
    }

    .top-panel-right {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 0 0.5rem 0;
    }

    /* Header: stack into 3 rows — title / center cluster / actions — each full-width */
    .app-header-compact {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "center"
            "right";
        row-gap: 0.4rem;
    }

    .title-clock-group {
        justify-self: center;
        justify-content: center;
    }

    .app-title-compact {
        font-size: 1.15rem;
        white-space: normal;
    }

    .header-clock {
        display: none;
    }

    .header-center-group {
        justify-self: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .app-header-compact .kofi-btn img,
    a.kofi-btn img {
        height: 28px;
        max-height: 28px;
    }

    .btn-feedback {
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
    }

    /* Icon-only action buttons */
    .header-actions .btn-export-sm span,
    .header-actions .btn-export-sm [data-i18n] {
        display: none;
    }
    .header-actions .btn-export-sm {
        padding: 0.4rem 0.55rem;
    }
    .header-actions {
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-self: center;
        justify-content: center;
    }

    /* Stack Task Properties above Object Browser — mirrors tablet block */
    .flat-section {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .flat-section > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        width: 100%;
    }
    .flat-section > div[style*="width: 6px"] {
        display: none;
    }
    #taskSection {
        padding-left: 0 !important;
        width: 100%;
    }

    /* Mobile: stack the v4.4.0 grid into single column.
       Order: name → start/end → color → priority → type → Create. */
    .props-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6, auto);
        grid-template-areas:
            "name     name"
            "start    end"
            "color    color"
            "priority priority"
            "type     type"
            "add      add";
    }

    .prop-color    { align-self: center; }
    .prop-add      { align-self: stretch; }
    .prop-color .color-swatch {
        width: 100%;
        max-width: 4rem;
        height: 2.25rem;
        margin: 0 auto;
    }
    .prop-add .btn-add-modern {
        width: 100%;
        max-width: none;
        height: 2.5rem;
        justify-content: center;
    }

    /* Compact priority chips at mobile — fit next to color swatch */
    .priority-chip span {
        width: auto;
        min-width: 2.75rem;
        height: 1.75rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }
    .type-chip {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    .dialog {
        margin: 1rem;
        max-width: none;
    }

    /* WCAG 2.2: minimum 44×44px touch targets on mobile — keeps icon buttons large */
    .icon-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.1rem;
    }

    /* Chart controls wrap cleanly, leave room for zoom slider */
    .chart-header {
        padding: 0 0.5rem;
        justify-content: flex-start;
        row-gap: 0.35rem;
    }
    .zoom-slider-inline {
        min-width: 100px;
    }
}

/* Tablet / narrow-desktop layout.
   Fires only at narrow widths (640-1099px). Above 1099px, the base capped
   single-row layout applies regardless of aspect ratio — narrow-aspect tall
   windows keep horizontal toolbar instead of stacking. */
@media (min-width: 640px) and (max-width: 1099px) {
    .top-panel {
        padding: 0.25rem 1rem;
    }

    /* Header: title+actions on row 1, center cluster (feedback/share/Ko-fi) on row 2 */
    .app-header-compact {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "left right"
            "center center";
    }
    .header-center-group {
        justify-self: center;
    }
    .header-clock {
        display: none;
    }

    /* Stack flat-section vertically — Object Browser drops below Task Properties */
    .flat-section {
        flex-direction: column;
        gap: 0.5rem !important;
    }
    /* Override inline flex: 0 0 auto on task-properties wrapper so it can shrink */
    .flat-section > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        width: 100%;
    }
    /* Hide vertical divider when stacked */
    .flat-section > div[style*="width: 6px"] {
        display: none;
    }
    #taskSection {
        padding-left: 0 !important;
        width: 100%;
    }

    /* Tablet: keep the v4.4.0 2-row grid with tighter columns. */
    .props-row {
        grid-template-columns:
            minmax(4.5rem, 6rem)
            minmax(4.5rem, 6rem)
            auto
            auto
            auto;
        column-gap: 0.5rem;
    }
    .btn-add-modern {
        padding: 0 1.25rem;
    }

    /* Compact priority + type chips to fit alongside color swatch on one row */
    .priority-chip span {
        min-width: 2.75rem;
        height: 1.75rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }
    .type-chip {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    /* Icon-only action buttons — hide label text, keep tooltips */
    .header-actions .btn-export-sm span,
    .header-actions .btn-export-sm [data-i18n] {
        display: none;
    }
    .header-actions .btn-export-sm {
        padding: 0.3rem 0.5rem;
    }
    .header-actions {
        gap: 0.25rem;
    }

    /* Chart viewport controls wrap cleanly, aligned left */
    .chart-header {
        justify-content: flex-start;
        row-gap: 0.4rem;
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
    }

    /* Below 1100px, compress the chart-properties row back to the tight
       spacing so it can still fit on one line on smaller windows. */
    .viewport-controls {
        gap: 0.4rem;
    }
    .viewport-divider {
        margin: 0 0.25rem;
    }
}

/* Tablet portrait orientation — stack top panel vertically (phones handled by mobile block below) */
@media (min-width: 640px) and (orientation: portrait) and (max-aspect-ratio: 3/4) {
    .top-panel {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .top-panel-left,
    .top-panel-right {
        flex: 1 1 auto;
        width: 100%;
        align-items: stretch;
    }
    .top-panel-right {
        padding: 0.25rem 0 0.5rem 0;
    }
    .chart-section {
        flex: 1 1 auto;
    }
}

/* Ultrawide ONLY (21:9 and wider, ≥2400px wide) — constrain top-panel so controls
   don't float. The min-width gate prevents this from firing on laptop browsers
   whose viewport accidentally becomes >2:1 due to taskbar/chrome reducing height. */
@media (min-aspect-ratio: 21/9) and (min-width: 2400px) {
    .top-panel {
        max-width: min(1800px, 95vw);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Large screens and ultrawide: no extra padding — content fills width */

/* Short viewports: compact controls (covers 720p and half-docked windows) */
@media (max-height: 700px) {
    .app-header {
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .top-panel {
        padding-top: 0.4rem;
        padding-bottom: 0.25rem;
    }

    .controls-panel {
        gap: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .task-list-compact {
        max-height: 4rem;
    }

    .app-header h1 {
        font-size: 1.35rem;
    }

    .app-header p {
        display: none;
    }
}

/* ── IMPROVEMENT 3: Today Marker ───────────────────────────────── */
.today-marker {
    stroke: #ef4444;
    stroke-width: 1.5;
    stroke-dasharray: 6 3;
    pointer-events: none;
}

.today-marker-label {
    fill: #ef4444;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* ── IMPROVEMENT 8: Row Hover Highlight ────────────────────────── */
.row-hover-rect {
    transition: opacity 0.1s;
    pointer-events: all;
    cursor: default;
}

/* ── Chart Pan ────────────────────────────────────────────────── */
#ganttChart {
    cursor: grab;
    flex-shrink: 0;
}
#ganttChart:active {
    cursor: grabbing;
}
#ganttChart.panning .row-hover-rect {
    pointer-events: none;
}
#ganttChart.panning * {
    cursor: grabbing !important;
}
.connect-mode #ganttChart {
    cursor: crosshair;
}

/* ── IMPROVEMENT 1 (continued): Zoom to Fit Button ─────────────── */
.btn-zoom-fit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    background: var(--bg-input);
    color: var(--text-body);
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid var(--border-input);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-zoom-fit:hover {
    background: var(--bg-hover);
    border-color: var(--border-focus);
    color: var(--text-heading);
}

.btn-zoom-fit:disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* ── NEW: Type selector chips ──────────────────────────────── */
.type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    height: 2.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1.5px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.type-chip:has(input:checked) {
    border-color: var(--border-focus);
    background: var(--bg-hover);
    color: var(--text-heading);
}
.type-chip-icon {
    width: 0.85rem;
    height: 0.6rem;
    flex-shrink: 0;
}

/* ── NEW: Progress bar overlay on chart bars ───────────────── */
.progress-fill {
    pointer-events: none;
    opacity: 0.35;
}

/* ── NEW: Milestone diamond in chart ───────────────────────── */
.milestone-diamond {
    cursor: pointer;
    stroke: var(--border-card);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* ── NEW: Group summary bar ────────────────────────────────── */
.group-bar {
    cursor: pointer;
}
.group-bracket {
    pointer-events: none;
}

/* ── NEW: Dependency arrows ────────────────────────────────── */
.dependency-arrows path {
    stroke-width: 1.5;
    fill: none;
}

/* ── NEW: Connect mode ─────────────────────────────────────── */
.snap-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-input);
    cursor: pointer;
    background: var(--bg-input);
    color: var(--text-muted);
    transition: all 0.25s ease;
    padding: 0;
}

.snap-toggle:hover {
    border-color: var(--border-focus);
    color: var(--text-heading);
}

.snap-toggle.active {
    background: var(--accent, #6366f1);
    color: var(--btn-add-text, white);
    border-color: var(--accent, #6366f1);
    transform: scale(1.05);
}

.snap-toggle.active:hover {
    background: var(--accent-dark, #4f46e5);
    border-color: var(--accent-dark, #4f46e5);
}

.tool-label-btn {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

#todayToggle {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.snap-guide-line {
    stroke: #06b6d4;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    pointer-events: none;
    opacity: 0.9;
}

/* ── Drag Tooltip ─────────────────────────────────────────────── */
.drag-tooltip {
    position: fixed;
    display: none;
    transform: translateX(-50%);
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
    background: var(--border-focus);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
}

.snap-toggle svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* btn-connect styles removed — Link button now uses .snap-toggle */
.gantt-chart-container.connect-mode {
    cursor: crosshair;
}

/* ── Tool tiles — compact tactile switches (Link · Snap · Today · Events) ──
   icon square + label + on/off track. Replaces the old .snap-toggle
   abbreviation buttons (L / TOD / EVT). State driven by .active (toggled in JS). */
.tool-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.13rem;
    min-width: 2.85rem;
    padding: 0.28rem 0.35rem 0.24rem;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(.22, 1, .36, 1);
}
.tool-tile:hover {
    border-color: var(--border-focus);
    color: var(--text-heading);
}
.tool-tile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tool-tile-ico {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--bg-input);
    color: var(--text-muted);
    transition: all 0.22s ease;
}
.tool-tile-ico svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
}
.tool-tile-name {
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.22s ease;
}
.tool-tile-track {
    width: 1.35rem;
    height: 0.34rem;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    transition: background 0.22s ease;
}
.tool-tile-knob {
    position: absolute;
    top: 50%;
    left: 1.5px;
    transform: translateY(-50%);
    width: 0.26rem;
    height: 0.26rem;
    border-radius: 50%;
    background: var(--bg-body);
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.35);
    transition: left 0.22s cubic-bezier(.22, 1, .36, 1), background 0.22s ease;
}
.tool-tile:hover .tool-tile-name {
    color: var(--text-heading);
}
.tool-tile.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.tool-tile.active .tool-tile-ico {
    background: var(--accent);
    color: var(--btn-add-text, #fff);
}
.tool-tile.active .tool-tile-name {
    color: var(--text-heading);
}
.tool-tile.active .tool-tile-track {
    background: var(--accent);
}
.tool-tile.active .tool-tile-knob {
    left: calc(100% - 0.26rem - 1.5px);
    background: #fff;
}

/* ── NEW: Dialog progress slider ───────────────────────────── */
/* v6.2.0 — pill container for the dialog progress slider, matching the
   shadow language of the zoom-slider-box on the chart. Uses --bg-input so
   the pill stands clear of the dialog's own --bg-card body in both themes. */
.dlg-progress-box {
    display: flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border-input);
    border-radius: 9999px;
    background: var(--bg-input);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.dlg-progress-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-input);
    border-radius: 3px;
    outline: none;
    margin-top: 0;
}
.dlg-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border-focus);
    cursor: pointer;
}
.dlg-progress-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border-focus);
    cursor: pointer;
    border: none;
}

/* ── NEW: Dialog select (parent dropdown) ──────────────────── */
.dlg-select {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}

/* ── NEW: Dialog dependency list ───────────────────────────── */
.dlg-deps-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 100px;
    overflow-y: auto;
    font-size: 0.75rem;
}
.dlg-dep-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.4rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
}
.dlg-dep-row select {
    font-size: 0.7rem;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
    border: 1px solid var(--border-input);
    background: var(--bg-card);
    color: var(--text-body);
}
.dlg-dep-name {
    flex: 1;
    color: var(--text-heading);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlg-dep-remove {
    color: var(--text-faint);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0.2rem;
}
.dlg-dep-remove:hover { color: #ef4444; }
.dlg-dep-empty {
    color: var(--text-faint);
    font-size: 0.7rem;
    font-style: italic;
}

/* ── NEW: Object Browser hierarchy indent ──────────────────── */
.task-row-indent {
    display: inline-block;
    width: 1rem;
    flex-shrink: 0;
}
.task-row-collapse {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--text-faint);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 3px;
    transition: background 0.1s;
}
.task-row-collapse:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}
.task-row-type-icon {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-faint);
}
.task-row-progress {
    font-size: 0.6rem;
    color: var(--text-faint);
    min-width: 2rem;
    text-align: right;
    flex-shrink: 0;
}

/* ── Ko-fi support button ─────────────────────────────────── */
.kofi-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    transition: transform 0.15s ease, filter 0.15s ease;
    text-decoration: none;
    line-height: 0;
}
.kofi-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.kofi-btn img {
    display: block;
    height: 36px;
    max-height: 36px;
    width: auto;
    max-width: 200px;
    border-radius: 6px;
}

/* ── Interactive linking ──────────────────────────────────── */
.link-handle {
    stroke: #0f172a;
    stroke-width: 1.5px;
    opacity: 0.85;
    transition: opacity 0.15s, r 0.15s;
}
.link-handle-right {
    fill: #39FF14;      /* neon green — task END, connection source */
    cursor: crosshair;
}
.link-handle-left {
    fill: #00BFFF;      /* bright blue — task START, connection target */
    cursor: default;
}
.link-handle:hover {
    opacity: 1;
    r: 7;
}
.link-rubber-band {
    stroke: #39FF14;
    stroke-width: 2px;
    stroke-linecap: round;
    pointer-events: none;
}

.dep-arrow-group.hover .dep-arrow {
    stroke-width: 2.5 !important;
    stroke: #38bdf8 !important;   /* light-blue = edit / neutral hover */
}
.dep-arrow-group.delete-hover .dep-arrow {
    stroke: #ef4444 !important;   /* red only while hovering the delete × */
}
.dep-delete-badge {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    cursor: pointer;
}
.dep-delete-badge circle {
    fill: #ef4444;
    stroke: #fff;
    stroke-width: 1.5;
}
.dep-delete-badge text {
    fill: #fff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}
.dep-arrow-group.hover .dep-delete-badge {
    opacity: 1;
    pointer-events: all;
}
/* Edit (pencil) + delete (×) badges revealed on hover. */
.dep-edit-badge {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    cursor: pointer;
}
.dep-edit-badge circle {
    fill: #38bdf8;
    stroke: #fff;
    stroke-width: 1.5;
}
.dep-edit-icon path {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dep-arrow-group.hover .dep-edit-badge {
    opacity: 1;
    pointer-events: all;
}
.dep-delete-badge { cursor: pointer; }
/* Edit is pencil-only on desktop, so the line itself isn't a click target there;
   on touch (coarse pointer) a tap on the line opens the editor instead. */
.dep-arrow-hit { cursor: default; }
@media (pointer: coarse) { .dep-arrow-hit { cursor: pointer; } }

/* Dependency-type popover — retype a link among FS/SS/FF/SF. */
.dep-type-popover {
    position: fixed;
    z-index: 1200;
    min-width: 188px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    animation: presencePopIn 0.14s ease;
}
.dep-type-popover-title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 6px 6px;
}
.dep-type-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 7px;
    border: none;
    background: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text);
    text-align: left;
}
.dep-type-row:hover { background: var(--bg-hover); }
.dep-type-row.active { background: var(--bg-hover); }
.dep-type-code {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--bg-body);
    color: var(--text-muted);
}
.dep-type-row.active .dep-type-code {
    background: var(--accent);
    color: #fff;
}
.dep-type-label { flex: 1 1 auto; white-space: nowrap; }
.dep-type-row.active .dep-type-label { font-weight: 600; }
.dep-type-delete {
    margin-top: 4px;
    border-top: 1px solid var(--border-card);
    border-radius: 0 0 7px 7px;
    color: #ef4444;
}
.dep-type-delete:hover { background: rgba(239, 68, 68, 0.1); }

/* ── NEW: Connect mode toast ───────────────────────────────── */
.connect-toast {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* ── SEO Footer ───────────────────────────────────────────────── */
.seo-footer {
    position: relative;
    flex-shrink: 0;
    background: var(--bg-body);
    border-top: 1px solid var(--border-card);
    color: var(--text-body);
    font-size: 0.6rem;
    line-height: 1.4;
}
.seo-footer-toggle-bar {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
    cursor: pointer;
    border-bottom: 1px solid var(--border-card);
}
.seo-footer-toggle-bar:hover {
    background: var(--bg-hover);
}
.footer-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--border-focus);
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.25rem 0.85rem;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}
.footer-toggle-btn:hover {
    background: #4f46e5;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.45);
    transform: scale(1.05);
}
.footer-toggle-btn.collapsed {
    background: #f59e0b;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}
.footer-toggle-btn.collapsed:hover {
    background: #d97706;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45);
}
.footer-toggle-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}
.footer-toggle-icon.collapsed {
    transform: rotate(180deg);
}
.seo-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem 0.5rem;
    overflow: auto;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    max-height: 80vh;
    opacity: 1;
}
.seo-footer-inner.collapsed {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.seo-footer-section {
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-card);
}
.seo-comparison-wrap {
    overflow-x: auto;
}
.seo-comparison {
    border-collapse: collapse;
    width: 100%;
    margin: 0.4rem 0 0.3rem;
    font-size: 0.6rem;
    color: var(--text-body);
}
.seo-comparison th,
.seo-comparison td {
    border: 1px solid var(--border-card);
    padding: 0.25rem 0.4rem;
    text-align: left;
}
.seo-comparison th {
    background: var(--bg-input);
    color: var(--text-heading);
    font-weight: 600;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.seo-comparison td.yes {
    color: #16a34a;
    font-weight: 600;
}
.seo-footer-fineprint {
    font-size: 0.55rem;
    color: var(--text-faint);
    margin: 0.2rem 0 0;
}
.seo-faq {
    margin: 0.3rem 0 0;
    font-size: 0.6rem;
    color: var(--text-body);
}
.seo-faq dt {
    font-weight: 600;
    color: var(--text-heading);
    margin: 0.45rem 0 0.1rem;
}
.seo-faq dd {
    margin: 0 0 0.2rem;
    color: var(--text-muted);
}

/* ── About Button (top bar) ──────────────────────────────────── */
.btn-about {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid var(--border-input);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-about:hover {
    background: var(--bg-input);
    border-color: var(--border-focus);
    color: var(--text-heading);
}

/* ── About Dialog ────────────────────────────────────────────── */
.about-dialog {
    max-width: min(780px, calc(100vw - 2rem));
}
.about-body {
    gap: 1.1rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
}
.about-section {
    border-top: 1px solid var(--border-card);
    padding-top: 0.8rem;
}
.about-section:first-child {
    border-top: none;
    padding-top: 0;
}
.about-section h2 {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-heading);
    margin: 0 0 0.4rem;
}
.about-section p {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0 0 0.5rem;
}
.about-section .seo-comparison {
    font-size: 0.7rem;
}
.about-section .seo-faq {
    font-size: 0.75rem;
}
.about-section .seo-faq dt {
    margin-top: 0.7rem;
    font-size: 0.78rem;
}
.about-section .seo-faq dd {
    line-height: 1.5;
}
.about-footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-card);
    font-size: 0.6rem;
    color: var(--text-faint);
}
.about-version {
    opacity: 0.6;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.seo-footer.footer-collapsed .seo-footer-toggle-bar {
    border-bottom: none;
}
.seo-footer-columns {
    display: flex;
    gap: 3rem;
}
.seo-footer-col {
    flex: 1;
}
.seo-footer h2 {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin: 0 0 0.2rem;
}
.seo-footer p {
    margin: 0 0 0.15rem;
    color: var(--text-muted);
}
.seo-footer code {
    background: var(--bg-input);
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
    font-size: 0.55rem;
}
.seo-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-card);
    font-size: 0.55rem;
    color: var(--text-faint);
}
.seo-footer-version {
    opacity: 0.5;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.seo-footer-langs {
    opacity: 0.7;
}

/* ── Share Button & Menu ──────────────────────────────────────── */
.share-wrapper {
    position: relative;
}
.share-header {
    position: relative;
    z-index: 3500;
}
.share-wrapper:has(> #shareMenu:not(.hidden)) {
    z-index: 9999;
    isolation: isolate;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 0;
    font-weight: 500;
    color: var(--title-accent);
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: none;
}
[data-theme$="-dark"] .share-btn {
    background: var(--bg-input);
    box-shadow: none;
}
.share-btn:hover {
    color: var(--text-heading);
    border-color: var(--border-focus);
    transform: none;
    box-shadow: none;
}
.share-btn svg {
    width: 14px;
    height: 14px;
}
.share-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    padding: 0.75rem;
    animation: shareMenuIn 0.15s ease-out;
}
[data-theme$="-dark"] .share-menu {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
@keyframes shareMenuIn {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.share-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-heading);
}
.share-menu-close {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.share-menu-close:hover {
    color: var(--text-heading);
}
.share-url-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.share-url-input {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.65rem;
    font-family: inherit;
    color: var(--text-body);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    outline: none;
}
.share-copy-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.65rem;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: var(--title-accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.share-copy-btn:hover {
    opacity: 0.85;
}
.share-platforms {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.share-platform {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    transition: all 0.15s;
    text-decoration: none;
}
.share-platform:hover {
    background: var(--bg-hover);
    color: var(--title-accent);
    transform: scale(1.1);
}
.share-platform svg {
    width: 16px;
    height: 16px;
}

/* ── Event Bars ───────────────────────────────────────────────── */
.event-bar {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
    transition: filter 0.1s;
}
.event-bar:hover {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.event-shadow {
    pointer-events: none;
}
.events-label-text {
    text-decoration: none !important;
    pointer-events: none;
}

.events-row-bg {
    transition: fill 0.15s;
}
.events-row-bg:hover {
    fill: var(--bg-hover, rgba(99, 102, 241, 0.08)) !important;
}

/* ============================================================================
   EXPORT-AS DROPDOWN — Image / Excel chooser
   ============================================================================ */
.export-wrapper {
    position: relative;
    display: inline-flex;
}
.export-wrapper .btn-export-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.export-caret {
    margin-left: 0.1rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.export-wrapper .btn-export-sm[aria-expanded="true"] .export-caret {
    transform: rotate(180deg);
}
.export-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1500;
    animation: dialogIn 0.12s ease-out;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.export-menu.hidden { display: none; }
.export-menu-option {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border: none;
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    border-radius: 0.35rem;
    text-align: left;
    transition: background 0.1s;
}
.export-menu-option:hover,
.export-menu-option:focus-visible {
    background: var(--bg-hover);
    outline: none;
}
.export-menu-option svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}
.export-menu-option:hover svg,
.export-menu-option:focus-visible svg {
    color: var(--border-focus);
}
.export-menu-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
}
.export-menu-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
    padding-left: 0.75rem;
}

/* ============================================================================
   EXCEL EXPORT DIALOG
   ============================================================================ */
.excel-dialog {
    max-width: 580px;
    width: 100%;
}
.excel-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.templates-modal {
    max-width: 1100px;
    width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    position: relative;
}
.templates-modal-body {
    overflow-y: auto;
    padding: 0;
    flex: 1;
}
#templatesModalGridView {
    padding: 1.5rem 1.5rem 1.75rem;
}
.templates-modal-header {
    justify-content: flex-start;
    gap: 0.6rem;
}
.templates-modal-header h3 { margin: 0; }

/* ── MCP Connection modal (About/Templates-style shell, narrower) ── */
.mcp-modal { max-width: 560px; width: min(560px, calc(100vw - 2rem)); }
.mcp-modal-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.mcp-intro { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-body); }
.mcp-account { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.55rem 0.95rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 999px; font-size: 0.8rem; align-self: flex-start; max-width: 100%; }
.mcp-account-label { color: var(--text-muted); }
.mcp-account-email { font-weight: 600; color: var(--accent-dark); overflow-wrap: anywhere; }
.mcp-steps { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.95rem; }
.mcp-steps li { color: var(--text-body); }
.mcp-step-title { font-weight: 600; font-size: 0.82rem; color: var(--text-heading); }
.mcp-step-hint { margin: 0.3rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }
.mcp-code-row { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.5rem; }
.mcp-code { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.5; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 12px; padding: 0.6rem 0.75rem; color: var(--text-input); white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-copy { flex: 0 0 auto; border-radius: 999px; align-self: flex-start; }
.mcp-endpoint-line { margin: 0; font-size: 0.76rem; color: var(--text-muted); overflow-wrap: anywhere; }
.mcp-code-inline { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.74rem; background: var(--bg-input); border-radius: 6px; padding: 0.1rem 0.4rem; color: var(--text-body); }
.templates-modal-sub {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.templates-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.templates-modal-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.template-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 999px;
    padding: 14px 24px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text-body);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.template-card:hover,
.template-card:focus-visible {
    border-color: var(--accent, #6366f1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    outline: none;
}
.template-card-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: var(--accent-soft, #eef2ff);
    color: var(--accent-dark, #4f46e5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
}
.template-card-icon svg {
    width: 19px;
    height: 19px;
    display: block;
}
.template-card-body {
    flex: 1;
    min-width: 0;
}
.template-card-title {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--text-heading);
    font-weight: 600;
}
.template-card-tagline {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.templates-modal-back {
    margin-left: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: var(--text-body);
    cursor: pointer;
    font: inherit;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.templates-modal-back:hover {
    background: var(--accent-soft, #eef2ff);
    border-color: var(--accent, #6366f1);
    color: var(--accent-dark, #4f46e5);
    transform: translateY(-1px);
}
.templates-modal-frame {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    border-radius: 8px;
    background: var(--bg-body, #fff);
    display: block;
}
#templatesModalDetailView {
    height: 100%;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
}
#templatesModalGridView.hidden,
#templatesModalDetailView.hidden {
    display: none;
}
.excel-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.excel-format-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.excel-format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 1.75rem;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.excel-format-card:hover {
    border-color: var(--title-accent);
}
.excel-format-card[aria-checked="true"] {
    background: var(--bg-hover);
    border-color: var(--title-accent);
    box-shadow: 0 0 0 1px var(--title-accent) inset;
}
.excel-format-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: 0.02em;
}
.excel-format-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.excel-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}
.excel-grid-3 > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.excel-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.excel-chip {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.excel-chip:hover {
    border-color: var(--title-accent);
}
.excel-chip[aria-checked="true"] {
    background: var(--bg-hover);
    border-color: var(--title-accent);
    color: var(--text-heading);
    box-shadow: 0 0 0 1px var(--title-accent) inset;
}

.excel-cols-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.excel-cols-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.excel-link-btn {
    background: transparent;
    border: 0;
    padding: 2px 4px;
    font-size: 0.68rem;
    color: var(--title-accent);
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
}
.excel-link-btn:hover {
    background: var(--bg-hover);
}
.excel-cols-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem 0.6rem;
    padding: 0.55rem 0.65rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 0.5rem;
}
.excel-col-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    color: var(--text-body);
    cursor: pointer;
    padding: 2px 0;
    user-select: none;
}
.excel-col-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--title-accent);
    cursor: pointer;
}

.excel-summary {
    padding: 0.55rem 1rem;
    background: var(--bg-hover);
    border-radius: 9999px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 580px) {
    .excel-grid-3 { grid-template-columns: 1fr; }
    .excel-cols-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Import dialog */
.import-dialog {
    max-width: 720px;
    width: 100%;
}
.import-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.import-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.import-structure-hint {
    border: 1px solid var(--accent, #6366f1);
    background: var(--accent-soft, #eef2ff);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-body);
}
.import-structure-hint.hidden { display: none; }
.import-structure-hint strong { color: var(--accent-dark, #4f46e5); margin-right: 4px; }
.import-structure-hint span { margin-right: 4px; }
.import-gsheet-section.hidden,
#importGsheetSection.hidden { display: none; }
.import-gsheet-hint {
    margin: 0 0 0.4rem;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
.import-gsheet-row {
    display: flex;
    gap: 8px;
}
.import-gsheet-row .input {
    flex: 1;
    min-width: 0;
}
.import-drop-zone {
    border: 2px dashed var(--border-input);
    background: var(--bg-input);
    border-radius: 0.6rem;
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: pointer;
}
.import-drop-zone:hover,
.import-drop-zone.drag-over {
    border-color: var(--border-focus);
    background: var(--bg-hover);
}
.import-drop-icon svg {
    width: 1.6rem;
    height: 1.6rem;
    opacity: 0.6;
}
.import-drop-text {
    font-size: 0.8rem;
    display: flex;
    gap: 0.3rem;
    align-items: baseline;
}
.import-file-name {
    font-size: 0.75rem;
    color: var(--text-heading);
    font-weight: 600;
    word-break: break-all;
}
.import-validation {
    padding: 0.55rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4;
}
.import-validation.ok {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.import-validation.warn {
    background: rgba(234, 179, 8, 0.1);
    color: #a16207;
    border: 1px solid rgba(234, 179, 8, 0.3);
}
.import-validation.error {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.import-validation ul {
    margin: 0.25rem 0 0 1.1rem;
    padding: 0;
}
.import-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg-hover);
    border-radius: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.import-stats strong {
    color: var(--text-heading);
    font-weight: 600;
}
.import-preview-body {
    overflow: auto;
    max-height: 240px;
    border: 1px solid var(--border-input);
    border-radius: 0.4rem;
    background: var(--bg-input);
}
.import-preview-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}
.import-preview-body th,
.import-preview-body td {
    padding: 0.32rem 0.55rem;
    border-bottom: 1px solid var(--border-input);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.import-preview-body th {
    background: var(--bg-hover);
    color: var(--text-heading);
    font-weight: 600;
    position: sticky;
    top: 0;
}
.import-preview-body th .mapping {
    display: block;
    font-weight: 400;
    font-size: 0.62rem;
    color: var(--text-faint);
    margin-top: 0.1rem;
}
.import-preview-body tr.row-error td {
    background: rgba(239, 68, 68, 0.08);
}

/* ── Project picker bar ───────────────────────────────────────── */
/* Inline child of .viewport-controls — flows naturally next to the
   zoom slider, separated by a .viewport-divider. */
.project-picker-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    position: relative;
}
/* The PROJECT caption is positioned absolutely above the bar so the
   buttons inside don't shift down to make room. Centered horizontally
   over whatever buttons are currently visible (the bar's bounding box). */
.project-bar-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.15rem;
    pointer-events: none;
}

/* ── My Charts bar (v6.1.0 — replaces the Loaded Projects picker by default) ────── */
.my-charts-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
/* Two-line stack: the chart name pill on top, a subtle "Shared by …"
   subtitle below when the active chart is owned by someone else. The
   container is align-items:flex-start so the name pill keeps its own
   rounded shape and the subtitle sits flush-left underneath. */
.active-project-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}
.active-project-shared-by {
    font-size: 0.66rem;
    line-height: 1.1;
    color: var(--text-muted);
    padding: 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
    opacity: 0.85;
    user-select: none;
}
.active-project-shared-by.hidden {
    display: none;
}
.active-project-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-heading, #1e293b);
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.10);
    outline: none;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
/* Hide the pill entirely when there's no active project — otherwise it
   renders as a stray empty pill blob. */
.active-project-name:empty {
    display: none;
}
.active-project-name:hover {
    background: rgba(100, 116, 139, 0.18);
}
.active-project-name[contenteditable="true"] {
    background: var(--input-bg, rgba(100, 116, 139, 0.22));
    cursor: text;
    user-select: text;
}
/* While editing, keep the field visible + focusable even when emptied. The
   base `.active-project-name:empty { display:none }` rule above would hide it
   the instant you backspace the last character — a display:none element can't
   hold focus, so the caret drops and you get kicked out of the field. Override
   it during edit so the cursor stays put until you actually click away. */
.active-project-name[contenteditable="true"]:empty {
    display: inline-block;
    min-width: 2.5rem;
}
.my-charts-btn {
    /* Inherits .btn-export-sm styles; tweak only what's needed. */
}
.my-charts-bridge {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
    opacity: 0.8;
    user-select: none;
    cursor: pointer;
    transition: opacity 0.3s;
}
.my-charts-bridge.fading {
    opacity: 0;
}

/* ── Migration banner (v6.1.0 pillow — per #85) ─────────────────────────── */
.migration-dialog {
    max-width: 520px;
}
.migration-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.migration-intro {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
}
.migration-project-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-input);
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated, rgba(0,0,0,0.02));
    font-size: 0.8rem;
}
.migration-project-list-item {
    padding: 0.25rem 0;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.migration-help {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.migration-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.migration-primary-actions {
    display: flex;
    gap: 0.5rem;
}
.btn-text-quiet {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
    transition: color 0.12s, background 0.12s;
}
.btn-text-quiet:hover {
    color: var(--accent-warning, #c2410c);
    background: var(--bg-elevated, rgba(0,0,0,0.04));
}

.project-picker {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.project-picker-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0 0 0 0.85rem;
    line-height: 1;
    user-select: none;
}
.project-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.7rem 0.32rem 0.85rem;
    background: var(--surface, var(--bg-elevated, #fff));
    color: var(--text, var(--text-heading, #1e293b));
    border: 1px solid var(--border-input);
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 9rem;
    max-width: 18rem;
    transition: border-color 0.15s, background 0.15s;
}
.project-picker-trigger:hover {
    border-color: var(--border-focus, var(--text-heading));
}
.project-picker-trigger[aria-expanded="true"] {
    border-color: var(--accent, #6366f1);
}
.project-picker-trigger[aria-expanded="true"]:hover::after,
.project-picker-trigger[aria-expanded="true"]:hover::before {
    display: none;
}
.project-picker-name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    min-width: 0;
}
.project-picker-name[contenteditable="true"] {
    background: var(--input-bg, rgba(0,0,0,0.04));
    padding: 0 4px;
    margin: 0 -4px;
    border-radius: 4px;
    overflow: visible;
    cursor: text;
    text-overflow: clip;
}
.project-picker-chevron {
    flex-shrink: 0;
    opacity: 0.65;
    transition: transform 0.15s;
}
.project-picker-trigger[aria-expanded="true"] .project-picker-chevron {
    transform: rotate(180deg);
    opacity: 0.9;
}
.project-picker-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 14rem;
    max-width: 22rem;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface, var(--bg-elevated, #fff));
    border: 1px solid var(--border-input);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.14);
    z-index: 60;
    padding: 4px;
}
.project-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    cursor: pointer;
    font-size: 0.78rem;
    border-radius: 5px;
    color: var(--text, var(--text-heading));
}
.project-picker-item:hover {
    background: var(--surface-hover, rgba(0,0,0,0.05));
}
.project-picker-item.active {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent, #6366f1);
    font-weight: 600;
}
.project-picker-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.project-picker-item-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.1s, background 0.1s, color 0.1s;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}
.project-picker-item:hover .project-picker-item-delete {
    opacity: 0.85;
}
.project-picker-item-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    opacity: 1;
}
.project-picker-item.active .project-picker-item-delete {
    display: none;
}

/* Divider + footer action at the bottom of the project picker menu —
   shown to signed-in account holders so the empty-list state still has
   a clear "load one of your cloud charts" entry point. */
.project-picker-divider {
    height: 1px;
    margin: 4px 2px;
    background: var(--border-input, rgba(0,0,0,0.08));
}
.project-picker-footer-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    cursor: pointer;
    font-size: 0.78rem;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--accent, #6366f1);
    font-weight: 500;
    text-align: left;
    transition: background 0.1s;
}
.project-picker-footer-action:hover {
    background: rgba(99, 102, 241, 0.1);
}
.project-picker-footer-action svg {
    flex-shrink: 0;
    color: var(--accent, #6366f1);
}

/* Cloud-sync per-project toggle (Phase A2.2 — flag-gated, only rendered
   when collab is enabled and a Supabase session is active). */
.project-picker-item-cloud {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, opacity 0.12s;
}
.project-picker-item-cloud.cloud-mode-off {
    color: var(--text-muted, #94a3b8);
    opacity: 0.55;
}
.project-picker-item-cloud.cloud-mode-off:hover {
    opacity: 1;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent, #6366f1);
}
.project-picker-item-cloud.cloud-mode-synced {
    color: var(--accent, #6366f1);
    opacity: 1;
}
.project-picker-item-cloud.cloud-mode-synced:hover {
    background: rgba(99, 102, 241, 0.12);
}
.project-picker-item-cloud.cloud-mode-saving {
    color: var(--accent, #6366f1);
    opacity: 1;
    animation: cloud-pulse 1.1s ease-in-out infinite;
    pointer-events: none;
}
.project-picker-item-cloud.cloud-mode-error {
    color: #ef4444;
    opacity: 1;
}
.project-picker-item-cloud.cloud-mode-error:hover {
    background: rgba(239, 68, 68, 0.12);
}
@keyframes cloud-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Toolbar status badge — reflects the active project's sync state */
.project-cloud-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 0.18rem 0.55rem 0.18rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent, #6366f1);
    white-space: nowrap;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.cloud-status-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.cloud-status-icon svg {
    display: block;
}
.project-cloud-status[data-state="saving"] {
    background: rgba(99, 102, 241, 0.14);
    color: var(--accent, #6366f1);
    animation: cloud-pulse 1.1s ease-in-out infinite;
    cursor: default;
}
.project-cloud-status[data-state="saved"] {
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
    cursor: default;
}
.project-cloud-status[data-state="error"] {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
    cursor: help;
}
.project-cloud-status[data-state="idle"] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    cursor: default;
}
.project-cloud-status[data-state="off"] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    cursor: pointer;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
}
.project-cloud-status[data-state="off"]:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
}
.project-cloud-status[data-state="off"]:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 2px;
}
.project-cloud-status[data-state="off"]:active {
    transform: translateY(1px);
}

/* Hover-swap labels — used only by the "off" (Not synced) state to reveal
   "Start syncing" / "Sign in to sync". The .has-hover-swap class is added
   by JS only when a swap label is set; synced states no longer set one
   (no Stop-syncing affordance), so they stay as pure indicators. */
.project-cloud-status .cloud-status-hover-label { display: none; }
.project-cloud-status.has-hover-swap { cursor: pointer; }
.project-cloud-status.has-hover-swap:hover .cloud-status-label,
.project-cloud-status.has-hover-swap:focus-visible .cloud-status-label { display: none; }
.project-cloud-status.has-hover-swap:hover .cloud-status-hover-label,
.project-cloud-status.has-hover-swap:focus-visible .cloud-status-hover-label { display: inline; }

/* Cloud UI is gated by body.collab-enabled — extra defense if the class
   never lands (e.g., flag toggled but bootstrap blocked by network). */
body:not(.collab-enabled) .project-cloud-status,
body:not(.collab-enabled) .project-picker-item-cloud {
    display: none !important;
}
body.shared-readonly .project-cloud-status {
    display: none !important;
}

/* My charts dialog (Phase A2.3) */
.my-charts-status,
.my-charts-empty {
    padding: 1.2rem 0.5rem;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
    line-height: 1.5;
}
.my-charts-list {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.my-charts-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: 6px;
    background: var(--surface, transparent);
    min-width: 0;
    transition: background 0.12s, border-color 0.12s;
}
.my-charts-item:hover {
    border-color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, 0.04);
}
.my-charts-thumb {
    flex: 0 0 auto;
    width: 144px;
    height: 86px;
    border-radius: 5px;
    background: var(--bg-page, var(--bg, #f8fafc));
    border: 1px solid var(--border-card, rgba(0,0,0,0.08));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-body, var(--text-muted, #475569));
}
.my-charts-thumb svg { display: block; width: 100%; height: 100%; }
.my-charts-thumb canvas { display: block; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
/* v6.4.0: app-shell masking + gradient backdrop override were removed
   along with the destructive live-thumb path. The base .dialog-overlay
   blur(4px) now applies cleanly, matching every other dialog (Edit Task,
   Settings, Export, etc.) — no more flat-white sheet behind the dialog. */

.my-charts-thumb.is-empty {
    background: linear-gradient(135deg,
        rgba(0,0,0,0.02), rgba(0,0,0,0.04));
    border-style: dashed;
}
.my-charts-thumb-empty-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    padding: 0 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.7;
}
.my-charts-thumb.is-loading {
    background-image: linear-gradient(
        100deg,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0.05) 50%,
        rgba(0,0,0,0) 70%
    );
    background-size: 200% 100%;
    animation: my-charts-thumb-shimmer 1.2s linear infinite;
}
.my-charts-thumb.is-error::after {
    content: "·";
    font-size: 18px;
    opacity: 0.5;
}
@keyframes my-charts-thumb-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (max-width: 520px) {
    .my-charts-thumb { width: 96px; height: 58px; }
}
.my-charts-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.my-charts-item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-heading, var(--text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-charts-item-meta {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}
.my-charts-item-meta-line {
    display: block;
    line-height: 1.35;
}
.my-charts-item-meta-faint {
    color: var(--text-faint, #94a3b8);
    font-size: 0.66rem;
}
/* v6.2.0 — task count appended to the Last saved meta line. Faint tone so
   the timestamp keeps primary attention; empty by default until the snap
   loads via the thumbnail observer. */
.my-charts-item-task-count {
    color: var(--text-faint, #94a3b8);
}
.my-charts-item-shared {
    font-size: 0.7rem;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
    font-weight: 500;
}
.my-charts-item-shared svg {
    flex: 0 0 auto;
    opacity: 0.85;
}
.my-charts-item--shared {
    border-left: 3px solid var(--accent);
    padding-left: 9px;
}
.my-charts-item-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.my-charts-item-open {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 0.75rem;
}
.my-charts-item-delete {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.my-charts-item-delete:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.my-charts-item-delete:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 2px;
}
.my-charts-item-delete:active { transform: translateY(1px); }

/* Delete-chart confirm dialog (v6.1.0) */
.delete-chart-dialog { max-width: 460px; }
.delete-chart-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.delete-chart-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-heading);
}
.delete-chart-warning {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text);
    padding: 0.65rem 0.8rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
}
.delete-chart-warning strong { color: #ef4444; }
.delete-chart-help {
    margin: 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}
.delete-chart-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
   Export progress + donation prompt (v6.5.0)
   Modal opens for every export. Donation pitch auto-suppresses
   after 5 closes without donating, or after a single Donate click.
   ───────────────────────────────────────────────────────────── */
.export-progress-dialog { max-width: 420px; width: calc(100vw - 2rem); }
.export-progress-dialog .dialog-header { border-bottom: 1px solid var(--border-card); }
.export-progress-title { margin: 0; font-size: 0.95rem; }
.export-progress-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem 1.15rem;
}
.export-progress-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0 0.3rem;
}
.export-progress-icon {
    color: var(--accent);
    flex-shrink: 0;
}
.export-progress-spinner { animation: export-progress-spin 0.85s linear infinite; }
.export-progress-check { color: #10b981; }
.export-progress-error-icon { color: #ef4444; }
.export-progress-status {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}
.export-progress-pitch {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    background: var(--accent-soft);
    border: 1px solid var(--border-card);
    border-radius: 10px;
}
.export-progress-pitch-heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-heading);
}
.export-progress-pitch-body {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-body);
}
.export-progress-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.btn-progress-donate {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.95rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-progress-donate:hover {
    background: var(--accent-dark, var(--accent));
    border-color: var(--accent-dark, var(--accent));
    transform: translateY(-1px);
}
.btn-progress-donate svg { flex-shrink: 0; }

@keyframes export-progress-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Collaborate button — sits next to the cloud status badge, only
   visible when the active project is synced to the cloud. */
.collaborate-btn {
    flex-shrink: 0;
}
.collaborate-btn svg {
    margin-right: 0.05rem;
}
body:not(.collab-enabled) .collaborate-btn {
    display: none !important;
}

/* Share dialog — invite warning banner + collaborator list (Phase A2.4b) */
/* ─────────────────────────────────────────────────────────────
   Share dialog — v6.4.0 redesign (collaborator list + owner row)
   Theme-aware via CSS variables, all 6 themes verified.
   ───────────────────────────────────────────────────────────── */
.share-collab-warning {
    margin-top: 0.6rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.74rem;
    line-height: 1.4;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.share-collab-warning[data-level="info"] {
    background: var(--accent-soft, rgba(99, 102, 241, 0.08));
    color: var(--accent-dark, var(--accent, #4f46e5));
    border-color: rgba(99, 102, 241, 0.25);
}

.share-collab-collaborator-list {
    list-style: none;
    margin: 0.85rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}
.share-collab-collaborator-list::-webkit-scrollbar { width: 8px; }
.share-collab-collaborator-list::-webkit-scrollbar-thumb {
    background: var(--border-input, rgba(0,0,0,0.15));
    border-radius: 4px;
}

.share-collab-collaborator-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    min-width: 0;
    transition: background-color 0.14s ease, border-color 0.14s ease, opacity 0.18s ease, transform 0.18s ease;
}
.share-collab-collaborator-item:hover {
    background: var(--bg-hover, rgba(0,0,0,0.025));
    border-color: var(--border-input, rgba(0,0,0,0.06));
}
.share-collab-collaborator-item.is-owner {
    background: color-mix(in srgb, var(--border-focus, #6366f1) 8%, transparent);
    border-color: color-mix(in srgb, var(--border-focus, #6366f1) 22%, transparent);
}
.share-collab-collaborator-item.is-owner:hover {
    background: color-mix(in srgb, var(--border-focus, #6366f1) 14%, transparent);
}
.share-collab-collaborator-item.is-leaving {
    opacity: 0;
    transform: translateX(8px);
}

.share-collab-collab-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border-focus, var(--accent, #6366f1));
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.share-collab-collab-avatar.is-self {
    background: var(--border-focus, var(--accent-dark, var(--accent, #4f46e5)));
    filter: brightness(0.92);
}

.share-collab-collab-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.share-collab-collab-name {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-heading, var(--text-body));
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-collab-collab-you-tag {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin-left: 2px;
}
.share-collab-collab-email {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-collab-owner-badge {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--border-focus, var(--accent, #6366f1));
    color: #ffffff;
    flex-shrink: 0;
    line-height: 1.2;
}

.share-collab-collab-role-slot {
    flex-shrink: 0;
    position: relative;
    border-radius: 6px;
    transition: box-shadow 0.4s ease;
}
.share-collab-collab-role-slot.save-tick-flash {
    box-shadow: 0 0 0 2px var(--accent-soft, rgba(34, 197, 94, 0.3));
    animation: shareCollabFlash 1.4s ease;
}
.share-collab-collab-role-slot.save-tick-flash::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8 L7 11 L12 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    animation: shareCollabTickPop 1.4s ease;
    pointer-events: none;
}
@keyframes shareCollabFlash {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    20% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes shareCollabTickPop {
    0% { opacity: 0; transform: translateY(-50%) scale(0.6); }
    20% { opacity: 1; transform: translateY(-50%) scale(1); }
    80% { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(-50%) scale(0.85); }
}

.share-collab-collab-remove-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.share-collab-collab-remove {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s, color 0.14s, opacity 0.14s;
}
.share-collab-collab-remove:hover,
.share-collab-collab-remove:focus-visible {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    outline: none;
}
.share-collab-collab-remove.hidden { display: none; }
.share-collab-collab-confirm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.share-collab-collab-confirm.hidden { display: none; }
.share-collab-confirm-yes,
.share-collab-confirm-no {
    border: 0;
    cursor: pointer;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 5px;
    line-height: 1.2;
    transition: background 0.14s, color 0.14s;
}
.share-collab-confirm-yes {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}
.share-collab-confirm-yes:hover { background: rgba(239, 68, 68, 0.24); }
.share-collab-confirm-yes:disabled { opacity: 0.5; cursor: not-allowed; }
.share-collab-confirm-no {
    background: transparent;
    color: var(--text-muted, #64748b);
}
.share-collab-confirm-no:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
    color: var(--text-heading, var(--text-body));
}

.share-collab-empty-row {
    list-style: none;
    padding: 14px 12px;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    border: 1px dashed var(--border-input, rgba(0,0,0,0.12));
    border-radius: 8px;
    background: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Custom role dropdown (v6.4.0) — replaces native <select>
   Used in Share dialog (invite row, collaborator rows, General Access).
   ───────────────────────────────────────────────────────────── */
.role-dd {
    position: relative;
    display: inline-block;
}
.role-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--bg-input, var(--surface, #fff));
    border: 1px solid var(--border-input, #cbd5e1);
    border-radius: 6px;
    color: var(--text-input, var(--text-body, #1e293b));
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    min-width: 92px;
    transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
.role-dd-trigger:hover {
    border-color: var(--border-focus, var(--accent, #6366f1));
    background: var(--bg-card, var(--surface, #fff));
}
.role-dd-trigger:focus-visible {
    outline: none;
    border-color: var(--border-focus, var(--accent, #6366f1));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus, #6366f1) 22%, transparent);
}
.role-dd.is-open .role-dd-trigger {
    border-color: var(--border-focus, var(--accent, #6366f1));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus, #6366f1) 22%, transparent);
}
.role-dd.is-disabled .role-dd-trigger,
.role-dd-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.role-dd-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}
.role-dd-chevron {
    flex-shrink: 0;
    color: var(--text-muted, #64748b);
    transition: transform 0.18s ease;
}
.role-dd.is-open .role-dd-chevron {
    transform: rotate(180deg);
    color: var(--border-focus, var(--accent, #6366f1));
}

.role-dd-compact .role-dd-trigger {
    padding: 5px 8px;
    font-size: 0.74rem;
    min-width: 84px;
    background: transparent;
    border-color: transparent;
}
.role-dd-compact .role-dd-trigger:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
    border-color: var(--border-input, rgba(0,0,0,0.12));
}
.role-dd-compact.is-open .role-dd-trigger {
    background: var(--bg-card, var(--surface, #fff));
}

.role-dd-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 180px;
    background: var(--surface, var(--bg-card, #fff));
    border: 1px solid var(--border-card, var(--border-input, #e2e8f0));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: shareCollabDdOpen 0.14s ease;
}
@keyframes shareCollabDdOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.role-dd-popover.hidden { display: none; }

.role-dd-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 7px 28px 7px 10px;
    background: transparent;
    border: none;
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
    color: var(--text-body, var(--text-heading));
    font-size: 0.78rem;
    line-height: 1.3;
    position: relative;
    transition: background 0.12s ease;
}
.role-dd-option:hover,
.role-dd-option:focus-visible {
    background: color-mix(in srgb, var(--border-focus, #6366f1) 12%, transparent);
    outline: none;
}
.role-dd-option.is-selected {
    color: var(--border-focus, var(--accent-dark, var(--accent, #4f46e5)));
    font-weight: 600;
}
.role-dd-option-label {
    font-weight: 500;
}
.role-dd-option.is-selected .role-dd-option-label {
    font-weight: 600;
}
.role-dd-option-hint {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    font-weight: 400;
}
.role-dd-option-check {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--border-focus, var(--accent, #6366f1));
}

/* The slot div that holds a mounted dropdown — used so the dropdown
   sits in the right flex layout regardless of variant. */
.share-collab-role-slot { display: inline-block; }
.share-collab-collab-role-slot { display: inline-block; }

/* Edit-blocked dialog (Phase A2.5b) */
.edit-blocked-body {
    margin: 0;
    color: var(--text, var(--text-heading));
    font-size: 0.82rem;
    line-height: 1.5;
}
.edit-blocked-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Visual gates for read-only-shared-view state. The pushHistory hook
   is the functional wall (any mutation reverts + opens the modal);
   these rules just hide the most obvious edit triggers so anonymous
   viewers don't keep bumping into them. */
body.shared-readonly #addTaskBtn,
body.shared-readonly #addEventBtn,
body.shared-readonly .new-project-btn,
body.shared-readonly .project-picker-item-delete,
body.shared-readonly .collaborate-btn,
body.shared-readonly .project-cloud-status {
    display: none !important;
}
body.shared-readonly .task-list-row .task-row-delete,
body.shared-readonly .task-list-row .task-row-edit {
    display: none !important;
}
/* Read-only viewers (anon / shared-viewer) can't rename the project — show the
   "no" cursor. The rename triggers are JS-gated too, so a click does nothing. */
body.shared-readonly #activeProjectName {
    cursor: not-allowed;
}
.new-project-btn {
    flex-shrink: 0;
}
.new-project-btn svg {
    margin-right: 0.05rem;
}

/* New Project dialog (Blank vs Import cards) */
.new-project-dialog {
    max-width: 480px;
}
.new-project-intro {
    margin: 0 0 0.85rem 0;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    line-height: 1.45;
}
.new-project-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.new-project-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.4rem;
    padding: 1rem 0.9rem;
    background: var(--surface, var(--bg-elevated, #fff));
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.new-project-card:hover {
    border-color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, 0.04);
}
.new-project-card:active {
    transform: scale(0.985);
}
.new-project-card-icon {
    width: 30px;
    height: 30px;
    color: var(--accent, #6366f1);
}
.new-project-card-icon svg {
    width: 100%;
    height: 100%;
}
.new-project-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-heading, #1e293b);
}
.new-project-card-desc {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

@media (max-width: 540px) {
    .new-project-cards { grid-template-columns: 1fr; }
}

/* ── Tabbed Export modal ───────────────────────────────────── */
.export-tabbed-dialog {
    max-width: 1100px;
    width: 95vw;
    height: min(82vh, 740px);
    max-height: 92vh;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}
.export-tabbed-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}
.export-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 0 0 200px;
    padding: 0.9rem 0.5rem 0.9rem 1rem;
    border-right: 1px solid var(--border-card, var(--border-input));
    overflow-y: auto;
}
.export-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    color: var(--text, var(--text-heading));
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font: inherit;
    width: 100%;
}
.export-tab:hover {
    background: var(--bg-hover);
}
.export-tab.active {
    background: var(--bg-hover);
    border-color: var(--title-accent);
    color: var(--title-accent);
}
.export-tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.75;
}
.export-tab.active .export-tab-icon { opacity: 1; }
.export-tab-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}
.export-tab-label {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.export-tab-hint {
    font-size: 0.66rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.export-tab-panels {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0;
}
.export-tab-panel { display: none; }
.export-tab-panel.active { display: block; }

/* Each panel embeds an existing per-format overlay. Strip the embedded
   overlay's modal chrome (positioning, backdrop, header/footer) so the
   tabbed modal's own header/footer take over. */
.export-tab-panel > .dialog-overlay {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;          /* neutralise old .hidden toggling */
    inset: auto !important;
    min-height: 0 !important;
}
.export-tab-panel > .dialog-overlay > .dialog {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    background: transparent !important;
    animation: none !important;            /* suppress dialogIn zoom on tab switch */
    border: none !important;
}
.export-tab-panel > .dialog-overlay {
    animation: none !important;            /* suppress fadeIn on tab switch */
}
.export-tab-panel > .dialog-overlay > .dialog > .dialog-header {
    display: none;
}
.export-tab-panel > .dialog-overlay > .dialog > .dialog-footer {
    display: none;
}
.export-tab-panel > .dialog-overlay > .dialog > .dialog-body {
    padding: 1rem 1.25rem;
}

@media (max-width: 760px) {
    .export-tabbed-body { flex-direction: column; }
    .export-tabs {
        flex-direction: row;
        flex: 0 0 auto;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border-card, var(--border-input));
        padding: 0.5rem;
    }
    .export-tab { flex: 0 0 auto; }
    .export-tab-hint { display: none; }
}

/* Universal Load File format picker modal */
.load-format-dialog {
    max-width: 640px;
}
.load-format-intro {
    margin: 0 0 0.9rem 0;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    line-height: 1.45;
}
.load-format-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}
/* Horizontal pill layout: icon left, label + hint stacked right, vertically
   centered. Border-radius 999px (from the pill refresh below) makes the
   wide rectangle a proper pill — content reads in the same direction as
   the curve. */
.load-format-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.1rem;
    padding: 0.95rem 1.2rem;
    background: var(--surface, var(--bg-elevated, #fff));
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    color: var(--text, var(--text-heading));
    font: inherit;
    text-align: left;
}
.load-format-card:hover {
    border-color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, 0.05);
}
.load-format-card:active {
    transform: scale(0.985);
}
.load-format-card-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 30px;
    height: 30px;
    color: var(--accent, #6366f1);
    align-self: center;
}
.load-format-card-icon svg {
    width: 100%;
    height: 100%;
}
.load-format-card-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-heading, #1e293b);
    line-height: 1.2;
}
.load-format-card-hint {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    line-height: 1.2;
}

@media (max-width: 600px) {
    .load-format-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .load-format-grid { grid-template-columns: 1fr; }
}

/* Import dialog: two-button footer (overwrite vs new project) */
.import-dialog-footer {
    gap: 0.5rem;
}
.import-dialog-footer #importDialogGoNew {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.4rem;
    margin-right: auto;
    background: transparent;
    color: #6366f1;
    border: 1px solid #6366f1;
}
.import-dialog-footer #importDialogGoNew:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.08);
}
.import-dialog-footer #importDialogGoNew:disabled {
    background: transparent;
    color: var(--text-muted, #64748b);
    border-color: var(--border-input);
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .import-dialog-footer { flex-wrap: wrap; }
    .import-dialog-footer #importDialogGoNew { margin-right: 0; flex: 1 1 auto; }
}

/* ─────────────────────────────────────────────────────────────
   Share Collaboration Dialog (Phase A scaffolding)
   ───────────────────────────────────────────────────────────── */
.share-collab-section + .share-collab-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-input, rgba(0, 0, 0, 0.08));
}
.share-collab-invite-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: 8px;
}
.share-collab-invite-row > .input { flex: 1; min-width: 0; }
.share-collab-invite-row > .share-collab-role-slot { flex: 0 0 auto; }
.share-collab-invite-row > .btn-primary { flex: 0 0 auto; }

/* List + items live in the share-collab-* block above (v6.4.0 redesign).
   The legacy duplicate block that used to live here had dead selectors
   (`.share-collab-collaborator-name` / `-remove`) that never matched the
   JS-built markup and was overriding the canonical block via cascade. */

.share-collab-radio-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}
.share-collab-radio-row input[type="radio"] { margin-top: 3px; cursor: pointer; }
.share-collab-radio-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    cursor: pointer;
}
.share-collab-radio-label strong {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-heading, currentColor);
}
.share-collab-radio-hint { font-size: 12px; opacity: 0.7; }
.share-collab-public-role { margin-top: 6px; display: inline-block; align-self: flex-start; }
/* The public-role slot lives in a column flex (.share-collab-radio-label) whose
   default align-items:stretch made it span the full modal width; right:0 then
   pinned the popover to the modal's far-right edge. Keep the slot trigger-width
   and left-anchor its popover. Scoped so right-side dropdowns keep right:0. */
.share-collab-public-role .role-dd-popover { left: 0; right: auto; }

.share-collab-link-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: stretch;
}
.share-collab-link-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
}

.share-collab-footer { justify-content: space-between; }

/* Pill-shape every control in the Share dialog (per request). Scoped to the
   overlay so the global .input / .btn-* / .role-dd-trigger radius stays the
   same in every other dialog. (These buttons already use var(--accent) = emerald.) */
#shareCollabOverlay .input,
#shareCollabOverlay .btn-primary,
#shareCollabOverlay .btn-accent,
#shareCollabOverlay .btn-dialog-delete,
#shareCollabOverlay .role-dd-trigger {
    border-radius: 999px;
}
#shareCollabOverlay .input { padding-left: 0.9rem; padding-right: 0.9rem; }

@media (max-width: 560px) {
    .share-collab-invite-row { flex-wrap: wrap; }
    .share-collab-invite-row > .input,
    .share-collab-invite-row > .share-collab-role-slot,
    .share-collab-invite-row > .btn-primary { flex: 1 1 100%; max-width: none; }
    .share-collab-invite-row > .share-collab-role-slot .role-dd-trigger { width: 100%; }
    .share-collab-link-row { flex-wrap: wrap; }
    .share-collab-link-input { flex: 1 1 100%; }
    .share-collab-collaborator-item { flex-wrap: wrap; }
    .share-collab-collab-meta { width: calc(100% - 44px); }
}

/* ─────────────────────────────────────────────────────────────
   Collab feature-flag gate — hide all data-collab-only elements
   unless the bootstrap has added body.collab-enabled.
   ───────────────────────────────────────────────────────────── */
[data-collab-only] { display: none !important; }
body.collab-enabled [data-collab-only] { display: revert !important; }

/* ─────────────────────────────────────────────────────────────
   Live remote cursors (Phase C — #67). Overlay div pinned over the
   chart container. Each `.remote-cursor` is positioned via transform
   based on semantic chart coords broadcast by peers, re-derived by
   the receiver every render so it lands on the right task regardless
   of zoom. `pointer-events: none` so the overlay never steals input.
   ───────────────────────────────────────────────────────────── */
.cursor-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 4;
}
.remote-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    will-change: transform;
    transition: transform 0.08s linear;
}
.remote-cursor-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.remote-cursor-label {
    position: absolute;
    top: 14px;
    left: 12px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    line-height: 1.35;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    user-select: none;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   Chart presence stack — other live collaborators on this chart.
   Pinned to the top-left corner of the gantt chart area. Populated
   by app.js when cloud-sync is on; one avatar per remote user,
   deduped by userId. Hover label is wired via [data-tooltip].
   ───────────────────────────────────────────────────────────── */
/* ── Collaborators presence (v6.7.1) ──────────────────────────
   Relocated from an absolute overlay on the chart to its own
   toolbar section beside Tools. 2×2 grid of small avatars; the
   whole section + its leading divider hide when you're alone. */
.presence-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 4px;
    justify-items: center;
    align-content: center;
}
#collabStack.presence-collab-hidden,
#collabDivider.presence-collab-hidden { display: none !important; }

.presence-avatar,
.presence-more {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 0 0 1.5px var(--bg-card, #fff);
    transition: transform 0.16s ease, opacity 0.18s ease;
    cursor: default;
}
.presence-avatar:hover {
    transform: translateY(-1px) scale(1.14);
    z-index: 2;
}
.presence-more {
    background: var(--text-muted, #6b7280);
    font-size: 8px;
    letter-spacing: 0;
    border: none;
    padding: 0;
    cursor: pointer;
}
.presence-more:hover { transform: scale(1.14); filter: brightness(1.1); }
.presence-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Soft join / leave instead of an instant pop. */
.presence-cell-enter { opacity: 0; transform: scale(0.4); }
.presence-cell-leave { opacity: 0; transform: scale(0.4); pointer-events: none; }

/* Overflow popover — full collaborator list with names. */
.presence-popover {
    position: fixed;
    z-index: 1200;
    min-width: 168px;
    max-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    animation: presencePopIn 0.14s ease;
}
@keyframes presencePopIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.presence-popover-title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 6px 6px;
}
.presence-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text);
}
.presence-popover-row:hover { background: var(--bg-hover); }
.presence-popover-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1.5px var(--bg-card);
}
.presence-popover-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────
   Toolbar auth slot
   ───────────────────────────────────────────────────────────── */
.auth-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border-input, rgba(0, 0, 0, 0.1));
    background: transparent;
    color: var(--text-color, currentColor);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}
.auth-btn:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
    border-color: var(--border-color, rgba(0, 0, 0, 0.15));
}
.auth-btn-icon svg { width: 14px; height: 14px; display: block; }
.auth-btn-label { white-space: nowrap; }
.auth-btn-avatar {
    display: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--auth-cursor-color, #3b82f6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    user-select: none;
}
.auth-btn[data-state="signed-in"] {
    padding: 0;
    border: 0;
    background: transparent;
    height: auto;
}
.auth-btn[data-state="signed-in"] .auth-btn-icon,
.auth-btn[data-state="signed-in"] .auth-btn-label { display: none; }
.auth-btn[data-state="signed-in"] .auth-btn-avatar { display: inline-flex; }
.auth-btn[data-state="signed-in"]:hover .auth-btn-avatar {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────
   Toolbar auth menu (dropdown when signed in)
   ───────────────────────────────────────────────────────────── */
.auth-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}
[data-theme$="-dark"] .auth-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.auth-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-card);
}
.auth-menu-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--auth-cursor-color, #3b82f6);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.auth-menu-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.auth-menu-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-menu-email {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: var(--text-body);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.auth-menu-item:hover {
    background: var(--bg-hover);
}
[data-theme$="-dark"] .auth-menu-signout:hover {
    background: rgba(220, 38, 38, 0.18);
}
.auth-menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.7; }
.auth-menu-signout { color: var(--danger, #dc2626); }
.auth-menu-signout svg { opacity: 0.85; }
.auth-menu-signout:hover { background: rgba(220, 38, 38, 0.08); }

/* ─────────────────────────────────────────────────────────────
   Auth modal
   ───────────────────────────────────────────────────────────── */
.auth-modal .auth-modal-subtitle {
    font-size: 14px;
    color: var(--text, #1f2937);
    margin: 4px 0 14px;
    line-height: 1.5;
    font-weight: 500;
}
.auth-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}
.auth-perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted, #4b5563);
    line-height: 1.35;
}
.auth-perk-check {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--accent, #6366f1);
}
.auth-consent {
    margin: 16px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
}
.auth-consent a {
    color: var(--accent, #6366f1);
    text-decoration: none;
}
.auth-consent a:hover { text-decoration: underline; }
.auth-oauth-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Stack width = widest child's intrinsic width, then centered in the
       modal. Each button stretches to fill the stack, so all 3 are uniform
       and only as wide as the longest label ("Continue with Microsoft"). */
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}
.auth-oauth-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: var(--input-bg, #fff);
    color: var(--text-color, currentColor);
    border: 1px solid var(--border-input, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-oauth-btn:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
    border-color: var(--border-color, rgba(0, 0, 0, 0.25));
}
.auth-oauth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-oauth-icon { width: 20px; height: 20px; flex: 0 0 auto; }

.auth-error {
    margin-top: 12px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--danger, #dc2626);
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 6px;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   Profile setup modal (first-signup gate)
   ───────────────────────────────────────────────────────────── */
.profile-setup-modal .profile-setup-subtitle {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    margin: 0 0 14px;
    line-height: 1.45;
}
.profile-setup-modal .label { margin-top: 12px; }
.profile-setup-modal .label:first-of-type { margin-top: 0; }

.profile-color-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.profile-color-swatch {
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.profile-color-swatch:hover { transform: scale(1.1); }
.profile-color-swatch.selected {
    border-color: var(--text-color, #111);
    transform: scale(1.05);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 2px var(--card-bg, #fff);
}

@media (max-width: 560px) {
    .profile-color-grid { grid-template-columns: repeat(4, 1fr); }
    .auth-modal { max-width: calc(100vw - 32px); }
    .auth-menu { right: -8px; min-width: 200px; }
}

/* ============================================================================
   v6.1.0 pill refresh — visual-consistency pass
   ============================================================================
   Unifies every rectangular button + input + card across the app with the
   "Synced" badge design language (border-radius: 999px). Square icon-only
   controls keep their existing radius — they're handled below explicitly.
   Cascade-only override (no !important): later rules win at equal
   specificity, so the original declarations stay readable above.
   ========================================================================= */

.btn-export-sm,
.btn-export,
.btn-primary,
.btn-accent,
.btn-feedback,
.btn-add-modern,
.btn-zoom-fit,
.btn-about,
.btn-dialog-delete,
.btn-text-quiet,
.auth-oauth-btn,
.my-charts-btn,
.new-project-btn,
.collaborate-btn,
.project-picker-trigger,
.prop-select-trigger,
.family-option,
.export-format-card,
.export-scale-chip,
.export-bg-chip,
.export-bg-custom,
.load-format-card,
.dialog-footer button,
.auth-modal button,
button[type="submit"],
/* v6.2.0 — Type chips, color swatch, and dialog dropdowns join the pill family
   so every interactive control in the Create/Edit Task dialog reads the same. */
.type-chip,
.color-swatch,
.dlg-select,
/* Small square icon controls — pill radius produces a clean circle on
   equal-size square buttons (close ×, edit, delete, lang flag, settings,
   theme toggle, L/U/TOD/EVT toggles, per-row delete). */
.icon-btn,
.icon-btn-edit,
.icon-btn-delete,
.lang-toggle,
.theme-toggle-sm,
.snap-toggle,
.my-charts-item-delete {
    border-radius: 999px;
}

/* v6.2.0 — Type chip padding now mirrors .priority-chip span so the two
   sibling-row chip families share the same height + horizontal breathing
   room. Without this, type chips read as a different family next to the
   priority pills above them. */
.type-chip {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
}

/* Task-creation color swatch — pill on a vertical axis. Already tall +
   narrow (~2.5rem × 100%), so 999px rounds top + bottom into a vertical
   pill that visually rhymes with the horizontal pills around it without
   flipping orientation. */
.prop-color .color-swatch {
    border-radius: 999px;
}

/* Inputs — pill radius + extra horizontal breathing room so text doesn't
   sit on the curve. Multi-line textareas excluded. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select {
    border-radius: 999px;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}

/* Selects carrying the .input class need an explicit pill rule — the bare
   `select` selector above (specificity 0,0,1) loses to `.input` (0,1,0),
   so `<select class="input">` would otherwise keep the rounded 0.5rem from
   the base .input rule. Match the same horizontal padding too. */
select.input {
    border-radius: 999px;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}

/* Date-trigger inputs (viewport start/end, task start/end pickers) — the
   value is short + symmetric in feel; centering reads cleaner inside the
   pill than left-aligned with empty right-side whitespace. */
.date-trigger {
    text-align: center;
}

/* Active project name span — pill background on hover to match the
   input/badge family. */
.active-project-name {
    border-radius: 999px;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

/* Dialog / card corner harmonization — softer than the old 8px so the
   panel surfaces visually rhyme with their pill content. */
.dialog,
.auth-modal,
.project-picker-menu,
.new-project-card {
    border-radius: 14px;
}

/* ============================================================================
   Feedback dialog polish (v6.1.0)
   ========================================================================= */
.fb-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.fb-counter {
    font-size: 0.65rem;
    color: var(--text-faint);
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.fb-counter.near-limit {
    color: var(--text-muted);
}
.fb-trust {
    font-size: 0.7rem;
    color: var(--text-faint);
    font-style: italic;
    margin: -0.15rem 0 0.4rem;
    line-height: 1.35;
}
.fb-spinner {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    animation: fb-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes fb-spin {
    to { transform: rotate(360deg); }
}
#feedbackSubmit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fb-thanks {
    text-align: center;
    padding: 2.2rem 1rem 2rem;
}
.fb-thanks-icon svg {
    width: 56px;
    height: 56px;
    color: #16a34a;
}
.fb-thanks h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0.6rem 0 0.3rem;
    color: var(--text-heading);
}
.fb-thanks p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}