@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {

            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Dank Mono', monospace;
            background:
                radial-gradient(circle, rgba(0,0,0,0.16) 1.2px, transparent 1.2px),
                linear-gradient(to bottom right, var(--bg-2), var(--bg), var(--bg-3));
            background-size: 22px 22px, 100% 100%;
            background-attachment: fixed;
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Background gradient effect — now handled by body directly */
        .bg-gradient {
            display: none;
        }

        /* Container */
        .container {
            position: relative;
            width: min(100%, 2400px);
            margin: 0 auto;
            padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 28px) 24px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: clamp(18px, 1.5vw, 28px);
            min-height: 100vh;
            z-index: 1;
        }

        .top-app-bar {
            --app-bar-control-height: 40px;
            flex: 0 0 100%;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 8px;
            position: sticky;
            top: 18px;
            z-index: 60;
            padding: 8px 10px;
            border-radius: 16px;
            background: var(--panel);
            box-shadow: var(--card-shadow);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .top-view-toolbar {
            margin-bottom: 0;
        }

        .view-toolbar-search-wrap {
            min-width: 0;
            width: min(100%, clamp(112px, 12vw, 176px));
            max-width: clamp(112px, 12vw, 176px);
        }

        /* Menu Button */
        .menu-container {
            position: relative;
            z-index: 50;
        }

        .menu-button {
            width: var(--app-bar-control-height);
            height: var(--app-bar-control-height);
            min-width: var(--app-bar-control-height);
            border-radius: 12px;
            background: var(--panel);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: center;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
        }

        .menu-button:hover {
            transform: scale(1.05);
        }

        .menu-button.active {
            box-shadow: var(--inset-shadow);
        }

        .menu-icon {
            width: 20px;
            height: 20px;
            color: var(--heading);
        }

        .menu-dropdown {
            position: absolute;
            /* Align with app bar's outer edge (app bar has 8px 10px padding) */
            top: calc(100% + 16px);
            left: -10px;
            background: var(--panel);
            border-radius: 12px;
            box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2), -2px -2px 6px rgba(255, 255, 255, 0.7);
            overflow: hidden;
            transition: all 0.3s ease;
            transform-origin: top;
            min-width: 180px;
        }

        .menu-dropdown.hidden {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
        }

        .menu-dropdown a,
        .menu-dropdown-item {
            display: block;
            width: calc(100% - 16px);
            padding: 12px 16px;
            color: var(--heading);
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 8px;
            margin: 8px;
            background: transparent;
            border: none;
            text-align: left;
            font: inherit;
            cursor: pointer;
        }

        .menu-dropdown a:hover,
        .menu-dropdown-item:hover {
            background: var(--surface);
            box-shadow: var(--inset-shadow);
        }

        /* Viewport */
        .viewport {
            transition: all 0.5s ease;
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
        }

        .viewport.full {
            width: 100%;
            flex-basis: 100%;
        }

        .viewport-header h1 {
            font-size: 32px;
            font-weight: bold;
            color: var(--heading);
            margin-bottom: 18px;
            letter-spacing: -0.5px;
            text-align: center;
        }

        /* Empty State */
        .empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 256px;
            text-align: center;
        }

        .empty-state .icon {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.3;
        }

        .empty-state .title {
            color: var(--muted);
            font-size: 18px;
            margin-bottom: 8px;
        }

        .empty-state .subtitle {
            color: var(--muted-2);
            font-size: 14px;
        }

        /* Project Grid */
        .project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
            gap: clamp(18px, 1.5vw, 24px);
        }

        /* Project Card */
        .project-card {
            background: var(--panel);
            border-radius: 16px;
            padding: clamp(18px, 1.4vw, 24px);
            box-shadow: var(--card-shadow);
            cursor: pointer;
            /* Drag-to-reorder uses --slide-x/--slide-y; keep transitions transform-only for snappy motion */
            --slide-x: 0px;
            --slide-y: 0px;
            will-change: transform;
            transition: transform 240ms ease, box-shadow 0.3s ease, opacity 0.2s ease;
            min-height: 180px;
            position: relative;
        }

        .project-card:hover {
            transform: translateY(-2px);
            box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2), -2px -2px 6px rgba(255, 255, 255, 0.7);
        }

        /* ─────────────────────────────────────────────────────────────
           Project card drag-to-reorder (CSS grid slide engine)
           ───────────────────────────────────────────────────────────── */

        /* When reordering, every *idle* card is positioned via --slide-x/--slide-y. */
        .project-grid.is-reordering .project-card {
            transform: translate3d(var(--slide-x), var(--slide-y), 0);
            transition: transform 320ms cubic-bezier(.2,.8,.2,1);
        }

        /* Prevent hover from fighting the slide transform while dragging. */
        .project-grid.is-reordering .project-card:hover {
            transform: translate3d(var(--slide-x), var(--slide-y), 0);
        }

        /* The dragged card is controlled entirely by inline transform (pointer delta). */
        .project-grid.is-reordering .project-card.dragging {
            transition: none !important;
            cursor: grabbing;
            opacity: 0.9;
            z-index: 50;
        }


        .project-card.dragging {
            opacity: 0.5;
        }

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

        .project-title-container {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        .project-title-container-centered {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }

        .drag-handle {
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            box-shadow: none;
            color: var(--heading);
            opacity: 0.3;
            transition: opacity 0.3s ease;
            width: 16px;
            height: 16px;
            cursor: grab;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;
            flex-shrink: 0;
        }

        .drag-handle .task-drag-handle {
            width: 16px;
            height: 16px;
            display: block;
            opacity: 1;
        }

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

        .project-card:hover .drag-handle {
            opacity: 0.6;
        }

        /* In edit mode, always show the drag handle (no need to hover) */
        .project-grid.is-editing .drag-handle {
            opacity: 0.6;
        }


        .project-title {
            font-size: 18px;
            font-weight: bold;
            color: var(--heading);
            flex: 1;
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .project-title-input {
            background: var(--surface);
            border: none;
            border-radius: 8px;
            padding: 4px 12px;
            color: var(--heading);
            font-size: 18px;
            font-weight: bold;
            font-family: inherit;
            outline: none;
            box-shadow: var(--inset-shadow);
            flex: 1;
            min-width: 0;
        }

        .project-actions {
            display: flex;
            gap: 4px;
        }

        .edit-button,
        .copy-button,
        .card-delete-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 8px;
            opacity: 0;
            transition: all 0.3s ease;
            color: var(--heading);
        }

        .copy-button {
            color: var(--accent);
        }

        .card-delete-button {
            color: #e53e3e;
        }

        .project-card:hover .edit-button,
        .project-card:hover .copy-button,
        .project-card:hover .card-delete-button {
            opacity: 1;
        }

        .edit-button:hover,
        .copy-button:hover,
        .card-delete-button:hover {
            background: var(--surface);
        }

        .project-stats {
            display: flex;
            min-width: 0;
            gap: 16px;
            font-size: 12px;
            color: var(--muted);
            margin-bottom: 16px;
        }

        /* Tasks */
        .tasks-container {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .tasks-container.expanded {
            max-height: 384px;
            opacity: 1;
        }

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

        .task-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--surface);
            border-radius: 8px;
            padding: 12px;
            box-shadow: var(--inset-shadow);
            cursor: grab;
            max-height: 72px;
            overflow: hidden;
            transition:
                transform 0.18s ease,
                opacity 0.22s ease,
                max-height 0.28s ease,
                padding 0.28s ease,
                margin 0.28s ease,
                background 0.2s ease,
                box-shadow 0.2s ease;
            opacity: 1;
            transform: translateY(0);
        }

        .task-item.fading-out {
            opacity: 0;
            transform: translateY(-10px);
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
        }

        @keyframes taskCheckboxPulse {
            0% { transform: scale(1); }
            55% { transform: scale(1.16); }
            100% { transform: scale(1); }
        }

        @keyframes taskCheckMarkPop {
            0% { transform: scale(0.4); opacity: 0; }
            65% { transform: scale(1.12); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        .task-item:active {
            cursor: grabbing;
        }

        .task-item.dragging {
            opacity: 0.65;
            transition: none !important;
        }

        .task-drag-handle {
            color: var(--heading);
            opacity: 0.3;
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .task-item:hover .task-drag-handle {
            opacity: 0.6;
        }

        .task-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid var(--heading);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .task-checkbox.checked {
            background: var(--accent);
            border-color: var(--accent);
        }

        .task-item.completing {
            pointer-events: none;
        }

        .task-checkbox.checkmark-pop {
            animation: taskCheckboxPulse 0.34s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .task-checkbox.checkmark-pop svg {
            animation: taskCheckMarkPop 0.34s cubic-bezier(0.22, 1, 0.36, 1);
            transform-origin: center;
        }

        .task-text {
            flex: 1;
            color: var(--text);
            font-size: 14px;
        }

        .task-text.completed {
            text-decoration: line-through;
            opacity: 0.5;
        }

        .task-input {
            flex: 1;
            background: var(--panel);
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            color: var(--text);
            font-size: 14px;
            font-family: inherit;
            outline: none;
            box-shadow: inset 2px 2px 4px rgba(120, 120, 130, 0.35), inset -2px -2px 4px rgba(255, 255, 255, 0.85);
        }

        .task-delete-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.3s ease;
            color: #e53e3e;
            flex-shrink: 0;
        }

        .task-item:hover .task-delete-button {
            opacity: 1;
        }

        .task-delete-button:hover {
            background: var(--panel);
        }

        /* Progress Bar */
        .progress-bar-container {
            background: var(--surface);
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 8px;
            box-shadow: inset 2px 2px 4px rgba(120, 120, 130, 0.35), inset -2px -2px 4px rgba(255, 255, 255, 0.85);
        }

        .progress-bar {
            height: 100%;
            background: var(--progress);
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .progress-text {
            font-size: 12px;
            color: var(--muted);
            text-align: right;
        }

        .progress-text-large {
            font-size: 24px;
            font-weight: bold;
            color: var(--heading);
            text-align: right;
        }

        /* Control Panel — fixed right-side sidebar (collapsible via slide-off).
           Reaches edge-to-edge like a traditional sidebar (no outer padding, no rounded corners).
           Uses flexbox so the scrollable inner area reliably fills from top to bottom.
           Uses 100dvh so the panel reaches the actual bottom on mobile browsers (where the
           browser chrome collapses 100vh otherwise). Falls back to 100vh for older browsers. */
        .control-panel {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            height: 100vh;
            height: 100dvh;
            width: clamp(360px, 30vw, 480px);
            max-width: 480px;
            z-index: 55;
            padding: 0;
            transform: translateX(0);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
        }

        .control-panel.collapsed {
            transform: translateX(100%);
            pointer-events: none;
        }

        /* Container reserves space on the right for the expanded sidebar.
           When collapsed (body flag set by JS), that reservation vanishes. */
        .container {
            padding-right: clamp(360px, 30vw, 480px);
            transition: padding-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body.control-panel-is-collapsed .container {
            padding-right: clamp(18px, 2vw, 28px);
        }

        /* Always-visible edge toggle — pinned to the right edge of the viewport.
           When panel is open: sits at the panel's left edge, arrow points right (close).
           When panel is collapsed: sits at the screen's right edge, arrow points left (open). */
        .panel-edge-toggle {
            position: fixed;
            top: 50%;
            right: clamp(360px, 30vw, 480px);
            transform: translate(50%, -50%);
            z-index: 60;
            width: 32px;
            height: 56px;
            padding: 0;
            border: none;
            border-radius: 10px;
            background: var(--panel);
            color: var(--heading);
            cursor: pointer;
            box-shadow: var(--card-shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        background 0.2s ease,
                        box-shadow 0.2s ease;
        }

        .panel-edge-toggle svg {
            width: 18px;
            height: 18px;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .panel-edge-toggle:hover {
            background: var(--surface);
        }

        /* When panel is collapsed: pin toggle to screen's right edge, flip arrow. */
        body.control-panel-is-collapsed .panel-edge-toggle {
            right: 0;
            transform: translate(0, -50%);
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

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


        .control-panel-content {
            padding: 0;
            overflow: hidden;
            background: transparent;
            box-shadow: none;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .control-panel-content::before,
        .control-panel-content::after {
            display: none;
        }

        .control-panel-scroll-inner {
            --modal-radius: 0;
            --modal-padding: clamp(18px, 1.4vw, 24px);
            --modal-scrollbar-width: 10px;
            --modal-scrollbar-gap: 10px;
            --modal-scrollbar-corner-cap: 18px;
            --modal-scrollbar-thumb: rgba(31, 36, 40, 0.18);
            --modal-scrollbar-thumb-hover: rgba(31, 36, 40, 0.30);
            position: relative;
            isolation: isolate;
            background: var(--panel);
            border-radius: 0;
            border-left: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
            box-shadow: -6px 0 20px rgba(0, 0, 0, 0.08);
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            overflow-y: auto;
            box-sizing: border-box;
            padding: var(--modal-padding);
            padding-right: calc(
                var(--modal-padding) - 4px +
                var(--modal-scrollbar-width) +
                var(--modal-scrollbar-gap)
            );
            scrollbar-gutter: stable;
            scrollbar-width: thin;
            scrollbar-color: var(--modal-scrollbar-thumb) transparent;
        }

        .control-panel-scroll-inner::before,
        .control-panel-scroll-inner::after {
            display: none;
        }

        .control-panel-scroll-inner::-webkit-scrollbar {
            width: var(--modal-scrollbar-width);
        }

        .control-panel-scroll-inner::-webkit-scrollbar-track {
            background: transparent;
        }

        .control-panel-scroll-inner::-webkit-scrollbar-thumb {
            background-color: var(--modal-scrollbar-thumb);
            border-radius: 999px;
            border: 3px solid transparent;
            background-clip: padding-box;
        }

        .control-panel-scroll-inner::-webkit-scrollbar-thumb:hover {
            background-color: var(--modal-scrollbar-thumb-hover);
        }

        .control-panel-scroll-inner::-webkit-scrollbar-button,
        .control-panel-scroll-inner::-webkit-scrollbar-button:single-button,
        .control-panel-content::-webkit-scrollbar-button,
        .control-panel-content::-webkit-scrollbar-button:single-button {
            display: none;
            width: 0;
            height: 0;
        }

        .control-panel-scroll-inner::-webkit-scrollbar-corner {
            background: transparent;
        }

        .control-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .control-panel-header h2 {
            font-size: 20px;
            font-weight: bold;
            color: var(--heading);
        }

        .collapse-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            color: var(--heading);
            transition: all 0.3s ease;
        }

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


        .project-last-updated,
        .card-owner-name {
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        @media (min-width: 1400px) and (max-width: 2050px) {
            .viewport {
                flex: 1 1 0;
                min-width: 0;
            }

            .control-panel {
                width: clamp(340px, 26vw, 440px);
                max-width: 440px;
            }

            .container {
                padding-right: clamp(340px, 26vw, 440px);
            }

            .panel-edge-toggle {
                right: clamp(340px, 26vw, 440px);
            }

            .project-grid {
                grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
            }
        }

        .icon {
            width: 16px;
            height: 16px;
        }

        .icon-lg {
            width: 20px;
            height: 20px;
        }

        /* Stats - 75% smaller */
        .stats {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: var(--surface);
            border-radius: 10px;
            padding: 10px 12px;
            box-shadow: inset 3px 3px 6px rgba(120, 120, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.85);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .stat-card:hover {
            transform: scale(1.02);
        }

        .stat-card.active {
            background: var(--accent);
            box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2), -2px -2px 6px rgba(255, 255, 255, 0.7);
        }

        .stat-card.active .stat-value,
        .stat-card.active .stat-label {
            color: white;
        }

        .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: var(--heading);
            margin-bottom: 2px;
        }

        .stat-label {
            font-size: 10px;
            color: var(--muted);
        }

        /* Add Project Button */
        .add-project-button {
            width: 100%;
            padding: 12px;
            background: var(--accent);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            font-family: inherit;
            margin-bottom: 24px;
        }

        .add-project-button:hover {
            transform: scale(1.02);
        }

        /* Total Completion Section */
        .total-completion-section {
            background: var(--surface);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 24px;
            box-shadow: var(--inset-shadow);
            text-align: center;
        }

        .total-completion-section h3 {
            font-size: 14px;
            font-weight: bold;
            color: var(--text);
            margin-bottom: 12px;
        }

        .total-completion-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .total-percentage {
            font-size: 48px;
            font-weight: bold;
            color: var(--heading);
            line-height: 1;
        }

        .total-percentage-label {
            font-size: 11px;
            color: var(--muted);
        }

        /* Undo Button */
        .undo-button {
            width: 100%;
            padding: 12px;
            background: var(--surface);
            border: none;
            border-radius: 12px;
            color: var(--heading);
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: var(--inset-shadow);
            transition: all 0.3s ease;
            font-family: inherit;
            margin-bottom: 24px;
        }

        .undo-button:hover {
            transform: scale(1.02);
            box-shadow: 8px 8px 16px rgba(120, 120, 130, 0.35), -8px -8px 16px rgba(255, 255, 255, 0.85);
        }

        .undo-button.hidden {
            display: none;
        }

        /* Paste Section */
        .paste-section h3 {
            font-size: 14px;
            font-weight: bold;
            color: var(--text);
            margin-bottom: 12px;
        }

        .project-select {
            width: 100%;
            padding: 8px 32px 8px 8px;
            background: var(--surface);
            border: none;
            border-radius: 8px;
            color: var(--text);
            font-size: 13px;
            margin-bottom: 12px;
            font-family: inherit;
            outline: none;
            box-shadow: var(--inset-shadow);
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f2428' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
        }

        .paste-box {
            width: 100%;
            min-height: 100px;
            padding: 12px;
            background: var(--surface);
            border: none;
            border-radius: 8px;
            color: var(--text);
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
            margin-bottom: 12px;
            outline: none;
            box-shadow: var(--inset-shadow);
        }

        .paste-button {
            width: 100%;
            padding: 10px;
            background: var(--accent);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .paste-button:hover:not(:disabled) {
            transform: scale(1.02);
        }

        .paste-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Expand Button */
        .expand-button {
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 10px;
            background: var(--surface);
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--inset-shadow);
            color: var(--heading);
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }

        .expand-button:hover {
            transform: translateY(-1px);
        }

        .expand-button.hidden {
            display: none;
        }

        /* Keyboard Shortcuts Hint */
        .shortcuts-hint {
            position: fixed;
            bottom: 24px;
            left: 24px;
            background: var(--panel);
            border-radius: 12px;
            padding: 16px;
            box-shadow: var(--card-shadow);
            font-size: 11px;
            color: var(--muted);
            z-index: 30;
            max-width: 340px;
        }

        .shortcuts-title {
            font-weight: bold;
            color: var(--heading);
            margin-bottom: 8px;
            font-size: 12px;
        }

        .shortcuts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px 16px;
        }

        .shortcut-line {
            white-space: nowrap;
        }

        kbd {
            background: var(--surface);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: inherit;
            font-size: 10px;
            box-shadow: inset 2px 2px 4px rgba(120, 120, 130, 0.35), inset -2px -2px 4px rgba(255, 255, 255, 0.85);
        }

        /* Modal - Reduced glow by 50%
           Rounded-scrollbar fix:
           Use an inset gutter and corner caps instead of relying on scrollbar
           painting to respect the border radius in Blink/WebKit. */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .modal-content {
            --modal-radius: 20px;
            --modal-padding: 32px;
            --modal-scrollbar-width: 10px;
            --modal-scrollbar-gap: 10px;
            --modal-scrollbar-corner-cap: 18px;
            --modal-scrollbar-thumb: rgba(31, 36, 40, 0.18);
            --modal-scrollbar-thumb-hover: rgba(31, 36, 40, 0.30);
            position: relative;
            isolation: isolate;
            background: var(--panel);
            border-radius: var(--modal-radius);
            padding: 0;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 10px 10px 20px rgba(120, 120, 130, 0.30), -10px -10px 20px rgba(255, 255, 255, 0.42);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        /* Corner caps mask the top/bottom ends of classic scrollbars that can
           otherwise visually poke through the rounded corners in Chrome/Edge. */
        .modal-content::before,
        .modal-content::after {
            content: "";
            position: absolute;
            right: 0;
            width: calc(var(--modal-scrollbar-width) + var(--modal-scrollbar-gap) + 8px);
            height: var(--modal-scrollbar-corner-cap);
            background: var(--panel);
            pointer-events: none;
            z-index: 2;
        }

        .modal-content::before {
            top: 0;
            border-top-right-radius: var(--modal-radius);
        }

        .modal-content::after {
            bottom: 0;
            border-bottom-right-radius: var(--modal-radius);
        }

        .modal-scroll-inner {
            overflow-y: auto;
            max-height: 80vh;
            box-sizing: border-box;
            padding: var(--modal-padding);
            padding-right: calc(
                var(--modal-padding) - 4px +
                var(--modal-scrollbar-width) +
                var(--modal-scrollbar-gap)
            );
            background: var(--panel);
            scrollbar-gutter: stable;
            scrollbar-width: thin;
            scrollbar-color: var(--modal-scrollbar-thumb) transparent;
        }

        .modal-scroll-inner::-webkit-scrollbar {
            width: var(--modal-scrollbar-width);
        }

        .modal-scroll-inner::-webkit-scrollbar-track {
            background: transparent;
        }

        .modal-scroll-inner::-webkit-scrollbar-thumb {
            background-color: var(--modal-scrollbar-thumb);
            border-radius: 999px;
            border: 3px solid transparent;
            background-clip: padding-box;
        }

        .modal-scroll-inner::-webkit-scrollbar-thumb:hover {
            background-color: var(--modal-scrollbar-thumb-hover);
        }

        .modal-scroll-inner::-webkit-scrollbar-button {
            display: none;
            height: 0;
            width: 0;
        }

        .modal-scroll-inner::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* ============================================================
           Remove scrollbar arrow buttons on expanded project cards
           (Chrome / Edge / other WebKit/Blink)
           ============================================================ */

        /* These show up as little up/down arrow buttons on some platforms.
           Hide them for in-card scroll regions and project "expanded" areas. */
        .tasks-container::-webkit-scrollbar-button,
        .task-list::-webkit-scrollbar-button,
        .modal-tasks::-webkit-scrollbar-button,
        [id^="modal-task-list-"]::-webkit-scrollbar-button,
        .project-card::-webkit-scrollbar-button {
            display: none;
            height: 0;
            width: 0;
        }

        /* Variant selector some engines use for the arrows */
        .tasks-container::-webkit-scrollbar-button:single-button,
        .task-list::-webkit-scrollbar-button:single-button,
        .modal-tasks::-webkit-scrollbar-button:single-button,
        [id^="modal-task-list-"]::-webkit-scrollbar-button:single-button,
        .project-card::-webkit-scrollbar-button:single-button {
            display: none;
            height: 0;
            width: 0;
        }


        /* Firefox */
        .modal-scroll-inner {
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
        }

        .modal-overlay.active .modal-content {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .modal-title-container {
            flex: 1;
        }

        .modal-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--heading);
            margin-bottom: 8px;
        }

        .modal-title-input {
            background: var(--surface);
            border: none;
            border-radius: 8px;
            padding: 8px 12px;
            color: var(--heading);
            font-size: 24px;
            font-weight: bold;
            font-family: inherit;
            outline: none;
            width: 100%;
            box-shadow: var(--inset-shadow);
        }

        .modal-stats {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 16px;
        }

        .modal-close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            color: var(--muted);
            transition: all 0.3s ease;
        }

        .modal-close:hover {
            background: var(--surface);
            color: #e53e3e;
        }

        .modal-copy-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            color: var(--accent);
            transition: all 0.3s ease;
            margin-right: 4px;
        }

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

        .modal-progress {
            margin-bottom: 24px;
        }

        .modal-tasks {
            margin-bottom: 24px;
        }

        .modal-tasks h3 {
            font-size: 16px;
            font-weight: bold;
            color: var(--text);
            margin-bottom: 16px;
        }

        .modal-add-task {
            width: 100%;
            padding: 12px;
            background: var(--surface);
            border: none;
            border-radius: 8px;
            color: var(--heading);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .modal-add-task:hover {
            box-shadow: var(--inset-shadow);
        }

        .modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid rgba(0, 0, 0, 0.12);
        }

        .modal-delete-btn {
            flex: 1;
            padding: 12px;
            background: rgba(229, 62, 62, 0.2);
            border: none;
            border-radius: 8px;
            color: #e53e3e;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .modal-delete-btn:hover {
            background: rgba(229, 62, 62, 0.3);
        }

        .modal-done-btn {
            flex: 1;
            padding: 12px;
            background: var(--accent);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .modal-done-btn:hover {
            transform: scale(1.02);
        }

        /* Confirmation Dialog - Reduced glow by 50% */
        .confirm-dialog {
            background: var(--panel);
            border-radius: 16px;
            padding: 24px;
            max-width: 400px;
            width: 90%;
            box-shadow: 10px 10px 20px rgba(120, 120, 130, 0.30), -10px -10px 20px rgba(255, 255, 255, 0.42);
            text-align: center;
        }

        .confirm-dialog h3 {
            font-size: 18px;
            font-weight: bold;
            color: var(--text);
            margin-bottom: 12px;
        }

        .confirm-dialog p {
            color: var(--muted);
            margin-bottom: 24px;
            font-size: 14px;
        }

        .confirm-actions {
            display: flex;
            gap: 12px;
        }

        .confirm-cancel {
            flex: 1;
            padding: 10px;
            background: var(--surface);
            border: none;
            border-radius: 8px;
            color: var(--muted);
            font-size: 14px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .confirm-cancel:hover {
            background: #c9c9c9;
        }

        .confirm-delete {
            flex: 1;
            padding: 10px;
            background: #e53e3e;
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .confirm-delete:hover {
            background: #c53030;
        }

        /* Drag Ghost Outline */
        .project-card-ghost {
            background: transparent;
            border: 3px dashed var(--accent);
            border-radius: 16px;
            opacity: 0.5;
            pointer-events: none;
        }

        /* Task Selection */
        .task-item.selected {
            background: linear-gradient(135deg, rgba(58, 63, 69, 0.1), rgba(58, 63, 69, 0.05));
            box-shadow: inset 0 0 0 2px var(--accent);
        }

        /* Modal Tabs */
        .modal-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            border-bottom: 2px solid var(--surface);
        }

        .modal-tab {
            flex: 1;
            padding: 12px;
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            color: var(--muted);
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            margin-bottom: -2px;
        }

        .modal-tab:hover {
            color: var(--heading);
        }

        .modal-tab.active {
            color: var(--heading);
            border-bottom-color: var(--accent);
        }

        /* Modal Sections */
        .modal-section {
            display: block;
        }

        .modal-section.hidden {
            display: none;
        }

        /* Notes Section */
        .modal-notes {
            margin-bottom: 24px;
        }

        .notes-textarea {
            width: 100%;
            min-height: 200px;
            background: var(--surface);
            border: none;
            border-radius: 8px;
            padding: 16px;
            color: var(--text);
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
            outline: none;
            box-shadow: var(--inset-shadow);
        }

        /* Add Task Button at Top */
        .modal-add-task-top {
            width: 100%;
            padding: 12px;
            background: var(--accent);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: inherit;
            transition: all 0.3s ease;
            margin-bottom: 16px;
            font-weight: bold;
        }

        .modal-add-task-top:hover {
            transform: scale(1.02);
        }

        /* Hide Completed Toggle with Block Neomorphic Slider */
        .hide-completed-toggle {
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .toggle-label {
            font-size: 13px;
            color: var(--text);
            font-weight: 500;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 30px;
        }

        .toggle-switch input[type="checkbox"] {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--surface);
            border-radius: 6px;
            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            box-shadow: inset 3px 3px 6px rgba(120, 120, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.85);
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 24px;
            left: 3px;
            bottom: 5px;
            background: var(--panel);
            border-radius: 4px;
            transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            box-shadow: 2px 2px 4px rgba(120, 120, 130, 0.35), -2px -2px 4px rgba(255, 255, 255, 0.85);
        }

        .toggle-switch input:checked + .toggle-slider {
            background: var(--accent);
            box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -1px -1px 3px rgba(255, 255, 255, 0.3);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(30px);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -1px -1px 2px rgba(255, 255, 255, 0.5);
        }

        /* Modal Header Centered */
        .modal-header-centered {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .modal-header-centered .modal-title-container {
            flex: 1;
            text-align: left;
        }

        .modal-header-centered .modal-title {
            font-size: 28px;
            font-weight: bold;
            color: var(--heading);
            margin-bottom: 8px;
        }

        .delete-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            opacity: 0;
            transition: all 0.3s ease;
            color: #e53e3e;
            flex-shrink: 0;
        }

        .task-item:hover .delete-button {
            opacity: 1;
        }

        .delete-button:hover {
            background: var(--panel);
        }

        /* Activate Button on Completed Cards */
        .activate-button {
            display: block;
            width: 100%;
            margin-top: 12px;
            padding: 8px 12px;
            background: var(--accent);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.3s ease;
            box-shadow: var(--card-shadow);
        }

        .activate-button:hover {
            background: var(--accent-2);
            transform: scale(1.02);
        }

        /* Responsive */
        @media (max-width: 1366px) {
            .control-panel {
                width: clamp(320px, 32vw, 420px);
                max-width: 420px;
            }

            .container {
                padding-right: clamp(320px, 32vw, 420px);
            }

            .panel-edge-toggle {
                right: clamp(320px, 32vw, 420px);
            }
        }

        @media (max-width: 1024px) {
            .project-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }

            .panel-header-right {
                align-items: flex-start;
            }
        }

        @media (max-width: 768px) {
            /* Prevent browser from artificially bolding text on small screens */
            * {
                -webkit-text-stroke: 0 !important;
                text-shadow: none !important;
                font-synthesis: none !important;
            }
            body {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }

/* ============================================================================
   AUTH OVERLAY  — neomorphic light theme
   ============================================================================ */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--bg-2), var(--bg), var(--bg-3));
    padding: 1rem;
}

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

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--panel);
    border-radius: 24px;
    padding: 2.25rem 2rem;
    box-shadow: 8px 8px 20px rgba(0,0,0,0.18), -4px -4px 12px rgba(255,255,255,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

/* Logo */
.auth-logo-img {
    width: 120px;
    height: auto;
    object-fit: contain;
    margin-bottom: 0.25rem;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));
}

/* Tabs */
.auth-tabs {
    display: flex;
    width: 100%;
    background: var(--surface);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    box-shadow: inset 3px 3px 6px rgba(120,120,130,0.35), inset -3px -3px 6px rgba(255,255,255,0.85);
}

.auth-tab {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.03em;
}

.auth-tab.auth-tab-active {
    background: var(--panel);
    color: var(--heading);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.75);
}

/* Fields */
#loginForm,
#registerForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

#registerForm.hidden,
#loginForm.hidden { display: none; }

.auth-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.auth-label {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding-left: 2px;
}

/* Wrapper that holds input + eye button */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input {
    width: 100%;
    padding: 0.65rem 2.4rem 0.65rem 0.9rem;
    border-radius: 10px;
    border: none;
    background: var(--surface);
    color: var(--heading);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    box-shadow: inset 3px 3px 6px rgba(120,120,130,0.35), inset -3px -3px 6px rgba(255,255,255,0.85);
    transition: box-shadow 0.2s;
    box-sizing: border-box;
}

/* Inputs without a wrapper (no eye button) keep full padding */
.auth-field > .auth-input {
    padding-right: 0.9rem;
}

.auth-input::placeholder { color: var(--muted-2); opacity: 0.6; }

.auth-input:focus {
    box-shadow:
        inset 3px 3px 6px rgba(120,120,130,0.35),
        inset -3px -3px 6px rgba(255,255,255,0.85),
        0 0 0 2px var(--accent);
}

/* Show/hide password button */
.show-pw-btn {
    position: absolute;
    right: 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    transition: color 0.2s;
}

.show-pw-btn:hover { color: var(--heading); }

.eye-icon {
    width: 17px;
    height: 17px;
    pointer-events: none;
}

.eye-icon.hidden { display: none; }

/* Error */
.auth-error {
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background: rgba(200, 60, 60, 0.08);
    border: 1px solid rgba(200, 60, 60, 0.25);
    color: #b03030;
    font-size: 0.8rem;
    font-family: inherit;
    line-height: 1.4;
}

.auth-error.hidden { display: none; }

/* Submit Button — matches .add-project-button */
.auth-submit {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.15), -2px -2px 6px rgba(255,255,255,0.7);
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    margin-top: 0.15rem;
}

.auth-submit:hover:not(:disabled) {
    transform: scale(1.02);
}

.auth-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================================================
   HEADER USER INFO  — matches neomorphic panel buttons
   ============================================================================ */

.header-user-info {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--panel);
    border-radius: 12px;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.15), -2px -2px 6px rgba(255,255,255,0.7);
    overflow: hidden;
}

.header-user-info.hidden { display: none; }

.header-username {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--heading);
    padding: 0 0.9rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.55rem 0.8rem;
    border: none;
    border-left: 1px solid rgba(0,0,0,0.08);
    background: transparent;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.logout-btn:hover {
    background: var(--surface);
    color: var(--heading);
}

/* ============================================================================
   PANEL LOGO (above control panel)
   ============================================================================ */

.panel-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.panel-logo-img {
    width: 90px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.12));
}

/* ============================================================================
   SHARING — role badges, shared indicator, members panel, invite form
   ============================================================================ */

/* ── Project card badges ──────────────────────────────────────────────────── */

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: inherit;
    white-space: nowrap;
}

.role-badge--viewer {
    background: rgba(120, 120, 130, 0.15);
    color: var(--muted);
    box-shadow: inset 2px 2px 4px rgba(120,120,130,0.2), inset -2px -2px 4px rgba(255,255,255,0.7);
}

.role-badge--editor {
    background: rgba(50, 120, 235, 0.12);
    color: var(--accent);
    box-shadow: inset 2px 2px 4px rgba(50,120,235,0.1), inset -2px -2px 4px rgba(255,255,255,0.7);
}

.shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(50, 120, 235, 0.08);
    box-shadow: inset 2px 2px 4px rgba(50,120,235,0.08), inset -2px -2px 4px rgba(255,255,255,0.7);
    font-family: inherit;
}

.card-owner-name {
    color: var(--accent);
    font-weight: 600;
}

.project-card--viewer {
    border-left: 3px solid rgba(120, 120, 130, 0.35);
}

/* ── Members count pill on tab ───────────────────────────────────────────── */

.members-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Viewer banner in modal ───────────────────────────────────────────────── */

.viewer-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: inset 3px 3px 6px rgba(120,120,130,0.3), inset -3px -3px 6px rgba(255,255,255,0.8);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
}

/* ── Members panel ───────────────────────────────────────────────────────── */

.members-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 0;
}

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

.member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: inset 3px 3px 6px rgba(120,120,130,0.3), inset -3px -3px 6px rgba(255,255,255,0.8);
}

.member-row--owner {
    background: var(--panel);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.12), -2px -2px 6px rgba(255,255,255,0.75);
}

.member-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.15), -1px -1px 4px rgba(255,255,255,0.6);
}

.member-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    font-family: inherit;
}

.member-email {
    font-size: 11px;
    color: var(--muted);
    font-family: inherit;
}

.member-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Role badge inside member row */
.member-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-family: inherit;
}

.member-role-badge--owner  { background: rgba(50,120,235,0.12); color: var(--accent); }
.member-role-badge--editor { background: rgba(50,120,235,0.08); color: var(--accent); }
.member-role-badge--viewer { background: rgba(120,120,130,0.12); color: var(--muted); }

/* Role select inside member row (owner can change roles) */
.member-role-select {
    padding: 4px 8px;
    border-radius: 7px;
    border: none;
    background: var(--panel);
    color: var(--heading);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.7);
    outline: none;
}

.member-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.member-remove-btn:hover {
    background: rgba(200, 60, 60, 0.1);
    color: #b03030;
}

.viewer-note {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    font-family: inherit;
    text-align: center;
    padding: 8px;
}

/* ── Invite form ─────────────────────────────────────────────────────────── */

.invite-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: inset 3px 3px 6px rgba(120,120,130,0.3), inset -3px -3px 6px rgba(255,255,255,0.8);
}

.invite-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--heading);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-family: inherit;
    margin: 0;
}

.invite-row {
    display: flex;
    gap: 8px;
}

.invite-email-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 9px;
    border: none;
    background: var(--panel);
    color: var(--heading);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.7);
    transition: box-shadow 0.2s;
}

.invite-email-input:focus {
    box-shadow: 3px 3px 6px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 2px var(--accent);
}

.invite-role-select {
    padding: 8px 10px;
    border-radius: 9px;
    border: none;
    background: var(--panel);
    color: var(--heading);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.7);
    outline: none;
}

.invite-role-hint {
    font-size: 11px;
    color: var(--muted);
    font-family: inherit;
    line-height: 1.6;
    margin: 0;
}

.invite-error {
    font-size: 12px;
    color: #b03030;
    font-family: inherit;
    margin: 0;
    padding: 6px 10px;
    background: rgba(200,60,60,0.08);
    border-radius: 7px;
}

.invite-error.hidden { display: none; }

.invite-submit-btn {
    width: 100%;
    padding: 9px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.6);
    transition: transform 0.15s, box-shadow 0.15s;
}

.invite-submit-btn:hover {
    transform: scale(1.02);
}

/* ============================================================================
   DOTTED BACKGROUND  — app + auth screen
   ============================================================================ */

/* Dots now baked into body background directly — no ::before needed */

/* Auth overlay: solid background so app doesn't show through,
   dots come from body::before which renders above it via z-index layering.
   We replicate the dot pattern here so it appears on the auth screen too. */
.auth-overlay {
    background:
        radial-gradient(circle, rgba(0,0,0,0.16) 1.2px, transparent 1.2px),
        linear-gradient(to bottom right, var(--bg-2), var(--bg), var(--bg-3));
    background-size: 22px 22px, 100% 100%;
}

.auth-card {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   SHORTCUTS — moved into navigation menu
   ============================================================================ */

.shortcuts-wrapper {
    display: none;
}

.shortcuts-toggle {
    display: none;
}

.shortcuts-panel {
    display: none;
}

.shortcut-line { white-space: nowrap; }

/* Remove old always-visible shortcuts-hint if still present */
.shortcuts-hint { display: none; }

/* ============================================================================
   CONTROL PANEL HEADER — centered logo with actions on the right
   ============================================================================ */

.control-panel-header {
    margin-bottom: 24px;
}

.panel-logo-img-inline {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.1));
    flex-shrink: 0;
}

/* Panel user info pill */
.panel-user-info {
    display: flex;
    align-items: center;
}

.panel-user-info.hidden { display: none; }

 .panel-user-pill {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    min-height: var(--app-bar-control-height, 40px);
    background: var(--surface);
    border: none;
    border-radius: 12px;
    padding: 4px 10px 4px 6px;
    box-shadow: inset 3px 3px 6px rgba(120,120,130,0.3), inset -3px -3px 6px rgba(255,255,255,0.8);
    min-width: 0;
    max-width: clamp(108px, 10vw, 148px);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}

.panel-user-pill:hover {
    transform: translateY(-1px);
    box-shadow: inset 4px 4px 8px rgba(120,120,130,0.34), inset -4px -4px 8px rgba(255,255,255,0.86);
}

 .panel-avatar,
.account-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--panel);
    color: var(--heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.7);
    overflow: hidden;
    flex-shrink: 0;
}

.panel-avatar-img,
.account-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    background: var(--panel);
}

.panel-avatar-fallback,
.account-avatar-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.panel-avatar-fallback svg,
.account-avatar-fallback svg {
    width: 72%;
    height: 72%;
    display: block;
}

.panel-username {
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    color: var(--heading);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.panel-user-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 34px;
    height: 24px;
    padding: 0 5px;
    border: 1px solid var(--accent);
    border-radius: 5px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.account-avatar--large {
    width: 88px;
    height: 88px;
}

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

.account-modal-content {
    max-width: 720px;
}

.account-modal-scroll {
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px 30px 30px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

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

.account-modal-title {
    font-size: 28px;
    color: var(--heading);
    margin: 0 0 6px;
}

.account-modal-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.account-profile-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
}

.account-profile-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 4px;
}

.account-profile-email {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.account-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.account-action-btn {
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.14), -2px -2px 5px rgba(255,255,255,0.6);
}

.account-action-btn--secondary {
    background: var(--surface);
    color: var(--heading);
    box-shadow: inset 3px 3px 6px rgba(120,120,130,0.3), inset -3px -3px 6px rgba(255,255,255,0.8);
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

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

.account-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.account-input {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    background: var(--surface);
    color: var(--heading);
    font: inherit;
    box-shadow: inset 4px 4px 8px rgba(120,120,130,0.3), inset -4px -4px 8px rgba(255,255,255,0.82);
    outline: none;
}

.account-input[readonly] {
    color: var(--muted);
}

.account-stats-section h3 {
    margin: 0 0 14px;
    color: var(--heading);
    font-size: 16px;
}

.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.account-stat-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: inset 4px 4px 8px rgba(120,120,130,0.3), inset -4px -4px 8px rgba(255,255,255,0.82);
}

.account-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--heading);
    line-height: 1;
    margin-bottom: 6px;
}

.account-stat-label {
    font-size: 11px;
    color: var(--muted);
}

.account-progression-section {
    margin-top: 18px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(120,120,130,0.22);
    box-shadow: none;
}

.account-progression-header,
.account-achievements-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.account-progression-section h3 {
    margin: 0 0 4px;
    color: var(--heading);
    font-size: 16px;
}

.account-progression-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.account-progression-level-pill {
    flex: 0 0 auto;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 7px 12px;
    text-transform: uppercase;
}

.account-progression-bar-shell {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    margin: 16px 0 8px;
    background: rgba(120,120,130,0.18);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.16);
}

.account-progression-bar-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 220ms ease;
}

.account-progression-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.account-achievements-header {
    align-items: center;
    margin-top: 18px;
    color: var(--heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.account-achievements-header span:last-child {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.account-achievements-list {
    display: grid;
    gap: 10px;
    max-height: 310px;
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 12px;
    scrollbar-width: thin;
}

.account-achievement-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(120,120,130,0.24);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
}

.account-achievement-card.is-locked {
    opacity: 0.58;
}

.account-achievement-star {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: currentColor;
    color: rgba(120,120,130,0.5);
    -webkit-mask: url("../assets/star.svg") center / contain no-repeat;
    mask: url("../assets/star.svg") center / contain no-repeat;
}

.account-achievement-card.is-unlocked .account-achievement-star {
    color: var(--accent);
}

.account-achievement-copy {
    min-width: 0;
}

.account-achievement-name {
    color: var(--heading);
    font-size: 13px;
    font-weight: 800;
}

.account-achievement-description {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
    margin-top: 2px;
}

.account-achievement-points {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.personal-progression-modal-content {
    max-width: 420px;
    text-align: center;
    padding: 32px 30px 28px;
}

.personal-progression-modal-star {
    display: block;
    width: 78px;
    height: 78px;
    background: var(--accent);
    -webkit-mask: url("../assets/star.svg") center / contain no-repeat;
    mask: url("../assets/star.svg") center / contain no-repeat;
    margin: 0 auto 18px;
}

.personal-progression-modal-star.is-personal-star {
    -webkit-mask-image: url("../assets/star.svg");
    mask-image: url("../assets/star.svg");
}

.personal-progression-modal-star.is-competitive-champion {
    -webkit-mask-image: url("../assets/champion.svg");
    mask-image: url("../assets/champion.svg");
}

.personal-progression-modal-star.is-competitive-trophy {
    -webkit-mask-image: url("../assets/trophy.svg");
    mask-image: url("../assets/trophy.svg");
}

.personal-progression-modal-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.personal-progression-modal-title {
    color: var(--heading);
    font-size: 28px;
    line-height: 1.05;
    margin: 0 0 10px;
}

.personal-progression-modal-description {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 22px;
}

.personal-progression-modal-button {
    min-width: 140px;
}

.account-modal-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.account-modal-status {
    min-height: 18px;
    font-size: 12px;
    color: var(--muted);
}

.account-modal-status.is-error {
    color: #b03030;
}

.account-modal-status.is-success {
    color: #1f6b38;
}

/* Hide the old floating top-right user badge */
.header-user-info { display: none !important; }

/* ============================================================================
   REMEMBER ME checkbox
   ============================================================================ */

.remember-me-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.remember-me-checkbox {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}


.project-title-input--card {
    width: 100%;
    min-width: 0;
    padding: 6px 10px;
    font-size: 17px;
    border-radius: 10px;
}

.project-title-container {
    min-width: 0;
    flex: 1 1 220px;
}

.project-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-header {
    gap: 10px;
}

.project-last-updated {
    color: var(--muted-2);
    font-style: italic;
}

.top-app-bar,
.top-app-bar > *,
.view-toolbar,
.view-toolbar-search-wrap,
.panel-user-info,
.panel-user-pill,
.viewport,
.control-panel,
.project-grid,
.project-card,
.project-header,
.project-title-container,
.project-actions,
.project-stats {
    min-width: 0;
}

 .top-app-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.view-toolbar {
    grid-template-columns: minmax(112px, 176px) repeat(2, minmax(0, 128px)) auto;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.panel-user-info {
    justify-self: end;
}

.panel-user-pill {
    width: auto;
    max-width: clamp(126px, 14vw, 180px);
}

.project-card {
    overflow: hidden;
}

.project-header {
    flex-wrap: wrap;
}

.project-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 1 auto;
    flex-shrink: 0;
    max-width: 100%;
}

.project-stats {
    flex-wrap: wrap;
    row-gap: 6px;
}

.menu-dropdown-separator {
    height: 1px;
    margin: 4px 12px 8px;
    background: rgba(0, 0, 0, 0.08);
}

body[data-color-mode="dark"] .menu-dropdown-separator {
    background: rgba(255, 255, 255, 0.12);
}

.menu-shortcuts-wrapper {
    padding: 0 8px 8px;
}

.menu-dropdown-item--toggle {
    margin-bottom: 6px;
}

.menu-shortcuts-panel {
    margin: 0 8px 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--inset-shadow);
    animation: shortcuts-in 0.18s ease;
}

.menu-shortcuts-wrapper--open .menu-dropdown-item--toggle {
    background: var(--surface);
    box-shadow: var(--inset-shadow);
}

.menu-shortcuts-panel.hidden {
    display: none;
}

@keyframes shortcuts-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.menu-shortcuts-panel .shortcuts-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

 .control-panel-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.control-panel-header > * {
    min-width: 0;
}

.panel-header-spacer {
    min-height: 1px;
}

 .panel-logo-img-inline {
    justify-self: center;
    display: block;
    margin: 0 auto;
}

 .panel-header-actions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    min-width: 0;
}


@media (max-width: 1700px) {
    .view-toolbar {
        grid-template-columns: minmax(108px, 156px) repeat(2, minmax(0, 124px)) auto;
    }
}

@media (max-width: 1480px) {
    .panel-user-pill {
        max-width: 136px;
    }

    .view-toolbar {
        grid-template-columns: minmax(104px, 144px) repeat(2, minmax(0, 118px)) auto;
    }
}

@media (max-width: 1200px) {
    .project-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}


.project-actions .edit-button,
.project-actions .copy-button,
.project-actions .card-delete-button {
    opacity: 1;
}

@media (hover: hover) {
    .project-actions .edit-button,
    .project-actions .copy-button,
    .project-actions .card-delete-button {
        opacity: 0;
    }

    .project-card:hover .edit-button,
    .project-card:hover .copy-button,
    .project-card:hover .card-delete-button {
        opacity: 1;
    }
}

@media (hover: none) {
    .drag-handle {
        opacity: 0.6;
    }
}


.shortcuts-toggle {
    justify-content: center;
    min-width: 180px;
}


.side-panel-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 24px;
    box-shadow: none;
}

.side-panel-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.side-panel-section-header h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.side-panel-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.section-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--panel);
    color: var(--heading);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.75);
}

.section-action-button {
    border: none;
    background: var(--surface);
    color: var(--heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: var(--card-shadow);
    transition: all 0.18s ease;
}

.section-action-button:hover {
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.12), -2px -2px 6px rgba(255,255,255,0.6);
}

.section-action-button:active {
    transform: translateY(0);
    box-shadow: var(--inset-shadow);
}

.shared-projects-list,
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.side-project-card,
.notification-card {
    width: 100%;
    border: none;
    text-align: left;
    background: var(--panel);
    border-radius: 12px;
    padding: 12px 14px;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.72);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.side-project-card:hover,
.notification-card:hover {
    transform: translateY(-1px);
    box-shadow: 5px 5px 12px rgba(0,0,0,0.14), -2px -2px 6px rgba(255,255,255,0.74);
}

.side-project-card-header,
.notification-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.side-project-card-title,
.notification-project {
    font-size: 13px;
    font-weight: 800;
    color: var(--heading);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-project-role,
.notification-time {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.side-project-meta,
.notification-message {
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
}

.mini-progress-track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 10px;
}

.mini-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.notification-card--unread {
    box-shadow: inset 0 0 0 2px rgba(50,120,235,0.18), 3px 3px 8px rgba(0,0,0,0.12), -2px -2px 5px rgba(255,255,255,0.72);
}

.side-panel-empty {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.28);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}


@media (max-width: 820px) {
    .account-profile-top {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .account-avatar-actions {
        justify-content: center;
    }

    .account-form-grid,
    .account-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .panel-user-pill {
        max-width: 150px;
    }
}

@media (max-width: 560px) {
    .account-modal-scroll {
        padding: 22px 18px 24px;
    }

    .account-form-grid,
    .account-stats-grid {
        grid-template-columns: 1fr;
    }

    .account-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .account-modal-status {
        text-align: center;
    }
}


.view-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(118px, 132px)) auto;
    gap: 10px;
    margin-bottom: 0;
    align-items: center;
}

.view-toolbar-search,
.view-toolbar-select,
.view-toolbar-button {
    width: 100%;
    height: var(--app-bar-control-height, 42px);
    min-height: var(--app-bar-control-height, 42px);
    border: none;
    border-radius: 12px;
    background: var(--panel);
    color: var(--heading);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    align-self: center;
    box-shadow: var(--card-shadow);
}

.view-toolbar-search,
.view-toolbar-select {
    padding: 0 14px;
}

.view-toolbar-select {
    justify-self: start;
    width: min(132px, 100%);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 28px 0 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f2428' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
}


body[data-color-mode="dark"] .view-toolbar-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f2f7ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.view-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-weight: 700;
    cursor: pointer;
}

.view-toolbar-button:hover {
    transform: translateY(-1px);
}


/* Light/Dark mode toggle — simple pill track + circular thumb.
   Text labels ("Light"/"Dark") are kept in HTML for screen readers but visually hidden. */
.color-mode-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    min-height: 28px;
    border: none;
    border-radius: 999px;
    background: var(--muted, #9a9a9a);
    color: transparent;
    font-family: inherit;
    box-shadow: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.color-mode-toggle-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: inherit;
}

/* Hide the "Light" / "Dark" text spans — toggle is visual-only per design.
   Keep them in DOM so screen readers can still announce the state via aria. */
.color-mode-toggle-option {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.color-mode-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.22s ease;
}

.color-mode-toggle.is-dark .color-mode-toggle-thumb {
    transform: translateX(24px);
}

.color-mode-toggle:hover {
    transform: none;
    filter: brightness(1.05);
}

.view-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    box-shadow: var(--inset-shadow);
}

.save-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--inset-shadow);
}

.save-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.75;
}

.save-status--saving { color: var(--accent); }
.save-status--saved { color: #2d8a57; }
.save-status--error,
.save-status--conflict { color: #c14a4a; }

.saved-views-list,
.archived-projects-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.saved-view-card,
.archived-project-card {
    width: 100%;
    border: none;
    text-align: left;
    background: var(--panel);
    border-radius: 12px;
    padding: 12px 14px;
    color: inherit;
    font-family: inherit;
    box-shadow: var(--card-shadow);
}

.saved-view-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.saved-view-main {
    flex: 1;
    min-width: 0;
}

.saved-view-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 4px;
}

.saved-view-meta,
.archived-project-meta {
    font-size: 11px;
    color: var(--muted);
}

.saved-view-actions,
.archived-project-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.icon-button-small {
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 0;
}

.archived-project-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
}

.archived-project-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--heading);
}

.project-activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-activity-item {
    background: var(--surface);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--inset-shadow);
}

.project-activity-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--muted);
}

.project-activity-message {
    font-size: 13px;
    color: var(--heading);
    line-height: 1.5;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.theme-card {
    border: none;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--inset-shadow);
    padding: 18px;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.theme-card.is-active {
    box-shadow: inset 0 0 0 2px rgba(50,120,235,0.26), var(--card-shadow);
}

.theme-card-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 6px;
}

.theme-card-copy {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.command-palette-content {
    max-width: 620px;
}

.command-palette-shell {
    padding: 14px;
}

.command-palette-input {
    width: 100%;
    border: none;
    border-radius: 14px;
    background: var(--surface);
    color: var(--heading);
    padding: 14px 16px;
    font-family: inherit;
    font-size: 14px;
    box-shadow: var(--inset-shadow);
    outline: none;
}

.command-palette-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    max-height: 46vh;
    overflow-y: auto;
    padding-right: 4px;
}

.command-palette-item {
    border: none;
    width: 100%;
    text-align: left;
    background: var(--panel);
    color: inherit;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    box-shadow: var(--card-shadow);
}

.command-palette-item.is-active {
    outline: 2px solid rgba(50,120,235,0.24);
}

.command-palette-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--heading);
}

.command-palette-copy {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .top-app-bar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .view-toolbar-search-wrap {
        width: 100%;
        max-width: none;
    }

    .panel-user-info {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .view-toolbar {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr));
    }

    .view-toolbar-button {
        justify-self: stretch;
        width: 100%;
    }

    .control-panel {
        width: min(92vw, 420px);
        max-width: 420px;
    }

    .container {
        padding-right: clamp(18px, 2vw, 28px);
    }

    .panel-edge-toggle {
        right: min(92vw, 420px);
    }
}

@media (max-width: 860px) {
    .container {
        padding: 14px 14px 24px;
        gap: 14px;
    }

    .top-app-bar {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 8px;
        top: 10px;
        gap: 8px;
    }

    .menu-container,
    .panel-user-info {
        justify-self: stretch;
    }

    .menu-button,
    .panel-user-pill {
        width: 100%;
        max-width: none;
        justify-content: center;
    }

    .view-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .view-toolbar-select,
    .view-toolbar-button {
        width: 100%;
        justify-self: stretch;
    }

    .control-panel-header {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
    }

    .control-panel.collapsed .control-panel-header {
        grid-template-columns: auto auto;
        justify-items: stretch;
        width: 100%;
    }

    .panel-header-spacer {
        display: none;
    }

    .panel-header-actions {
        justify-self: center;
    }

    .viewport {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .control-panel {
        width: 100vw;
        max-width: 100vw;
        padding: 12px;
    }

    /* At mobile widths the panel covers the whole screen when open.
       Hide the edge toggle during open state; the in-header collapse button is still reachable. */
    body:not(.control-panel-is-collapsed) .panel-edge-toggle {
        display: none;
    }

    .project-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-stats {
        gap: 10px;
    }

    .viewport-header h1 {
        font-size: 26px;
        margin-bottom: 14px;
    }

    .control-panel-scroll-inner {
        max-height: none;
    }
}

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


.saved-view-main,
.icon-button-small,
.theme-card,
.view-toolbar-button,
.color-mode-toggle,
.command-palette-item,
.archived-project-card,
.side-project-card,
.notification-card {
    -webkit-appearance: none;
    appearance: none;
}

.saved-view-main {
    border: none;
    background: transparent;
    text-align: left;
    padding: 0;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

/* ============================================================================
   V6 HEADER + CONTROL PANEL LAYOUT REFINEMENTS
   ============================================================================ */

.top-app-bar {
    position: sticky;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.top-app-bar-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: clamp(180px, 24vw, 360px);
    padding: 0 12px;
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--heading);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-view-toolbar {
    margin-left: auto;
}

.view-toolbar {
    grid-template-columns: minmax(168px, 264px) repeat(2, minmax(112px, 132px)) auto;
    width: 100%;
    justify-content: end;
    gap: 8px;
}

.view-toolbar-search-wrap {
    width: min(100%, clamp(168px, 18vw, 264px));
    max-width: clamp(168px, 18vw, 264px);
}

.viewport-header {
    display: none;
}

.menu-dropdown {
    display: flex;
    flex-direction: column;
}

.menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.menu-dropdown-item--danger {
    color: #c6374d;
    font-weight: 800;
}

.menu-dropdown-item--danger:hover {
    background: rgba(198, 55, 77, 0.10);
    box-shadow: none;
}

body[data-color-mode="dark"] .menu-dropdown-item--danger {
    color: #ff7085;
}

body[data-color-mode="dark"] .menu-dropdown-item--danger:hover {
    background: rgba(255, 112, 133, 0.12);
}

.menu-dropdown-separator--footer {
    margin-top: 6px;
    margin-bottom: 4px;
}

.control-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.panel-logo-img-inline {
    height: 30px;
    width: auto;
    margin: 0;
    justify-self: start;
}

.control-panel .panel-user-info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}

.control-panel .panel-user-info.hidden {
    display: none;
}

.control-panel .panel-user-pill {
    min-width: 132px;
    max-width: min(100%, 188px);
    min-height: 38px;
    overflow: hidden;
}

.panel-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

/* Display-mode row inside the control panel (houses the light/dark toggle).
   Flat row — no card background — sits directly on the sidebar surface. */
.panel-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px;
    margin-bottom: 16px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.panel-display-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.control-panel.collapsed .panel-display-row {
    display: none;
}

.panel-avatar,
.account-avatar {
    width: 30px;
    height: 30px;
}

.panel-avatar-img,
.account-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.top-app-bar,
.top-app-bar > *,
.top-app-bar-title,
.view-toolbar,
.view-toolbar > *,
.control-panel-header,
.panel-header-main,
.panel-header-actions,
.panel-user-pill,
.project-grid,
.project-card,
.project-header,
.project-title-container,
.project-actions {
    min-width: 0;
}

.project-header {
    gap: 10px;
}

.project-title-container {
    flex: 1 1 0;
}

.project-actions {
    margin-left: auto;
}

.control-panel.collapsed {
    flex-basis: 112px;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
}

.control-panel.collapsed .control-panel-header {
    justify-content: space-between;
    gap: 8px;
}

.control-panel.collapsed .panel-header-main {
    flex: 1 1 auto;
}

.control-panel.collapsed .panel-user-info,
.control-panel.collapsed .collapse-button {
    display: none !important;
}

.control-panel.collapsed .panel-logo-img-inline {
    height: 28px;
}

@media (min-width: 1800px) and (max-width: 2000px) and (max-height: 1250px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
        gap: 20px;
    }

    .control-panel {
        flex: 0 0 332px;
        width: 332px;
        max-width: 332px;
    }

    .project-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 252px), 1fr));
    }
}


@media (max-width: 1500px) {
    .top-app-bar {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 8px;
    }

    .menu-container {
        grid-column: 1;
        grid-row: 1;
    }

    .top-view-toolbar {
        grid-column: 2;
        grid-row: 1;
    }

    .top-app-bar-title {
        position: static;
        transform: none;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        max-width: none;
        width: 100%;
        padding: 0;
    }

    .view-toolbar {
        grid-template-columns: minmax(144px, 220px) repeat(2, minmax(104px, 1fr)) auto;
    }

    .view-toolbar-search-wrap {
        width: min(100%, clamp(144px, 20vw, 220px));
        max-width: clamp(144px, 20vw, 220px);
    }
}

@media (max-width: 1100px) {
    .top-app-bar {
        grid-template-columns: 1fr;
        padding: 10px 12px;
    }

    .menu-container,
    .top-view-toolbar,
    .top-app-bar-title {
        grid-column: auto;
        grid-row: auto;
    }

    .top-app-bar-title {
        position: static;
        transform: none;
        order: 2;
        max-width: none;
        width: 100%;
        padding: 0;
        margin-top: 2px;
    }

    .top-view-toolbar {
        margin-left: 0;
        order: 3;
    }

    .view-toolbar {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)) auto;
    }

    .control-panel .panel-user-info {
        grid-column: auto;
        justify-self: auto;
    }
}

@media (max-width: 860px) {
    .menu-container {
        justify-self: start;
    }

    .view-toolbar {
        grid-template-columns: 1fr;
    }

    .view-toolbar-search-wrap {
        width: 100%;
        max-width: none;
    }

    .control-panel .panel-user-info {
        justify-self: auto;
        width: auto;
    }

    .control-panel .panel-user-pill {
        width: auto;
        max-width: min(100%, 180px);
        justify-content: flex-start;
    }
}


/* ============================================================================
   V7 HEADER / NAV / COLLAPSED PANEL REFINEMENTS
   ============================================================================ */

.top-app-bar {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}

.top-app-bar-title {
    display: none !important;
}

.top-view-toolbar {
    margin-left: 0 !important;
    flex: 0 1 auto;
    min-width: 0;
}

.view-toolbar {
    display: grid;
    grid-template-columns: minmax(252px, 396px) minmax(118px, 146px) minmax(118px, 146px) auto;
    width: auto !important;
    justify-content: start !important;
    gap: 8px;
}

.view-toolbar-search-wrap {
    width: min(100%, clamp(252px, 26vw, 396px)) !important;
    max-width: clamp(252px, 26vw, 396px) !important;
}

.menu-dropdown-item--account {
    justify-content: space-between;
}

.menu-account-label {
    min-width: 0;
}

.menu-account-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(120, 130, 150, 0.16);
    color: var(--heading);
}

.menu-account-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.menu-account-avatar-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--heading);
}

.control-panel-header {
    align-items: center;
}

.panel-header-main {
    gap: 12px;
}

.control-panel .panel-user-info {
    margin-right: 8px;
}

.panel-header-actions {
    margin-left: 8px;
    padding-left: 4px;
}

.control-panel {
    --expanded-panel-width: clamp(320px, 24vw, 430px);
    flex: 0 0 var(--expanded-panel-width);
    width: var(--expanded-panel-width);
    max-width: 430px;
}

.control-panel.collapsed {
    flex: 0 0 var(--expanded-panel-width) !important;
    width: var(--expanded-panel-width) !important;
    min-width: var(--expanded-panel-width) !important;
    max-width: 430px !important;
}

.control-panel.collapsed .control-panel-content {
    width: 112px;
    margin-left: 0;
}

.control-panel.collapsed .control-panel-scroll-inner {
    width: 112px;
}

@media (max-width: 1500px) {
    .top-app-bar {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .top-view-toolbar {
        flex: 1 1 100%;
    }

    .view-toolbar {
        width: 100% !important;
        grid-template-columns: minmax(220px, 1fr) minmax(112px, 146px) minmax(112px, 146px) auto;
    }

    .view-toolbar-search-wrap {
        width: 100% !important;
        max-width: none !important;
    }

    .control-panel.collapsed {
        flex: 0 0 112px !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
    }

    .control-panel.collapsed .control-panel-content,
    .control-panel.collapsed .control-panel-scroll-inner {
        width: 112px;
    }
}

@media (max-width: 1100px) {
    .top-app-bar {
        align-items: stretch;
    }

    .view-toolbar {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)) auto;
    }

    .control-panel.collapsed {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .control-panel.collapsed .control-panel-content,
    .control-panel.collapsed .control-panel-scroll-inner {
        width: auto;
    }
}

@media (max-width: 860px) {
    .top-app-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .top-view-toolbar {
        flex: 1 1 auto;
    }

    .view-toolbar {
        grid-template-columns: 1fr;
        width: 100% !important;
    }

    .view-toolbar-search-wrap {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ============================================================================
   V9 HEADER / GRID / COLLAPSED PANEL REFINEMENTS
   ============================================================================ */

.top-app-bar-title,
.viewport-header {
    display: none !important;
}

.top-app-bar {
    flex: 0 0 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

.menu-container,
.top-view-toolbar {
    flex: 0 0 auto;
    margin: 0 !important;
}

.view-toolbar {
    width: auto !important;
    justify-content: start !important;
    grid-template-columns: minmax(264px, 300px) minmax(118px, 132px) minmax(118px, 132px) auto;
    gap: 8px;
}

.view-toolbar-search-wrap {
    width: 100% !important;
    max-width: 300px !important;
}

.project-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.control-panel {
    --expanded-panel-width: clamp(320px, 24vw, 430px);
    flex: 0 0 var(--expanded-panel-width);
    width: var(--expanded-panel-width);
    min-width: var(--expanded-panel-width);
    max-width: 430px;
}

.control-panel.collapsed {
    flex: 0 0 var(--expanded-panel-width) !important;
    width: var(--expanded-panel-width) !important;
    min-width: var(--expanded-panel-width) !important;
    max-width: 430px !important;
}

.control-panel.collapsed .control-panel-content,
.control-panel.collapsed .control-panel-scroll-inner {
    width: 128px !important;
}

.control-panel.collapsed .control-panel-scroll-inner {
    padding: 14px 14px !important;
}

.control-panel.collapsed .control-panel-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px !important;
}

.control-panel.collapsed .panel-header-main {
    flex: 0 0 auto !important;
    min-width: auto !important;
}

.control-panel.collapsed .panel-header-actions {
    margin-left: auto !important;
    padding-left: 10px !important;
    flex: 0 0 auto !important;
}

.control-panel.collapsed .panel-logo-img-inline {
    height: 28px;
    max-width: 56px;
}

.control-panel.collapsed .expand-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
}

@media (max-width: 1680px) {
    .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1180px) {
    .view-toolbar {
        grid-template-columns: minmax(220px, 1fr) minmax(112px, 132px) minmax(112px, 132px) auto;
        width: 100% !important;
    }

    .top-view-toolbar {
        flex: 1 1 auto;
        min-width: 0;
    }

    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    .top-app-bar {
        align-items: stretch;
    }

    .top-view-toolbar {
        flex: 1 1 100%;
    }

    .view-toolbar {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1fr)) auto;
        width: 100% !important;
    }

    .control-panel,
    .control-panel.collapsed {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .control-panel.collapsed .control-panel-content,
    .control-panel.collapsed .control-panel-scroll-inner {
        width: auto !important;
    }
}

@media (max-width: 860px) {
    .top-app-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .view-toolbar {
        grid-template-columns: 1fr;
    }

    .view-toolbar-search-wrap {
        max-width: none !important;
    }

    .project-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   V10 TOP-ALIGNED CONTROL PANEL + VERTICAL COLLAPSE REFINEMENT
   ============================================================================ */

@media (min-width: 1101px) {
    .container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 430px);
        grid-template-areas:
            "toolbar panel"
            "viewport panel";
        align-items: start;
        column-gap: clamp(18px, 1.5vw, 28px);
        row-gap: clamp(18px, 1.5vw, 28px);
    }

    body.control-panel-is-collapsed .container {
        grid-template-columns: minmax(0, 1fr) 112px;
    }

    .top-app-bar {
        grid-area: toolbar;
        width: 100%;
        align-self: start;
    }

    .viewport {
        grid-area: viewport;
        width: 100%;
        min-width: 0;
        align-self: start;
    }

    .control-panel {
        grid-area: panel;
        grid-row: 1 / span 2;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        align-self: start;
    }

    .control-panel-content {
        position: sticky;
        top: 18px;
    }

    .control-panel-scroll-inner {
        max-height: calc(100vh - 44px);
    }

    .project-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: start;
    }

    .control-panel-header {
        align-items: center;
    }

    .panel-header-actions {
        gap: 10px;
        margin-left: 0 !important;
        padding-left: 6px !important;
    }

    .collapse-button,
    .expand-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    body.control-panel-is-collapsed .control-panel,
    body.control-panel-is-collapsed .control-panel.collapsed {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        flex-basis: 112px !important;
    }

    body.control-panel-is-collapsed .control-panel .control-panel-scroll-inner,
    body.control-panel-is-collapsed .control-panel.collapsed .control-panel-scroll-inner {
        max-height: 72px;
        padding: 14px 12px !important;
        overflow: hidden;
    }

    body.control-panel-is-collapsed .control-panel .control-panel-scroll-inner > :not(.control-panel-header),
    body.control-panel-is-collapsed .control-panel.collapsed .control-panel-scroll-inner > :not(.control-panel-header) {
        display: none !important;
    }

    body.control-panel-is-collapsed .control-panel .control-panel-header,
    body.control-panel-is-collapsed .control-panel.collapsed .control-panel-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px !important;
        margin-bottom: 0;
    }

    body.control-panel-is-collapsed .control-panel .panel-header-main,
    body.control-panel-is-collapsed .control-panel.collapsed .panel-header-main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body.control-panel-is-collapsed .control-panel .panel-user-info,
    body.control-panel-is-collapsed .control-panel.collapsed .panel-user-info,
    body.control-panel-is-collapsed .control-panel .collapse-button,
    body.control-panel-is-collapsed .control-panel.collapsed .collapse-button {
        display: none !important;
    }

    body.control-panel-is-collapsed .control-panel .panel-header-actions,
    body.control-panel-is-collapsed .control-panel.collapsed .panel-header-actions {
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 10px !important;
        margin-left: auto !important;
        padding-left: 0 !important;
        flex: 0 0 auto !important;
    }

    body.control-panel-is-collapsed .control-panel .panel-logo-img-inline,
    body.control-panel-is-collapsed .control-panel.collapsed .panel-logo-img-inline {
        height: 28px;
        width: auto;
        max-width: 56px;
        display: block;
    }

    body.control-panel-is-collapsed .control-panel .expand-button,
    body.control-panel-is-collapsed .control-panel.collapsed .expand-button {
        display: inline-flex !important;
    }
}

@media (min-width: 1101px) and (max-width: 1680px) {
    .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ============================================================================
   V11 CARD FOOTER + PANEL HEADER POLISH
   ============================================================================ */

:root {
    --collapsed-panel-width: 132px;
}

.project-card {
    display: flex;
    flex-direction: column;
}

.project-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: pretty;
    line-height: 1.22;
}

.project-stats {
    gap: 12px;
    flex-wrap: wrap;
}

.project-card-footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
}

.project-last-updated {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    color: var(--muted-2, var(--muted));
    font-style: italic;
}

.project-card-footer .project-last-updated {
    justify-content: flex-start;
}

.project-card-footer .activate-button {
    margin-left: auto;
}

.panel-user-info,
.control-panel .panel-user-info {
    flex: 0 0 auto !important;
    min-width: 0;
}

.panel-user-pill,
.control-panel .panel-user-pill {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: min(100%, 212px);
    padding: 5px 12px 5px 8px;
}

.panel-avatar,
.account-avatar,
.menu-account-avatar {
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.panel-avatar,
.account-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
}

.panel-avatar-img,
.account-avatar-img,
.menu-account-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.panel-header-main {
    gap: 12px;
}

.panel-header-actions {
    gap: 12px;
    padding-left: 12px !important;
}

.collapse-button,
.expand-button {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--surface);
    border: none;
    box-shadow: var(--inset-shadow);
    background-clip: padding-box;
    isolation: isolate;
}

.control-panel.collapsed,
body.control-panel-is-collapsed .control-panel,
body.control-panel-is-collapsed .control-panel.collapsed {
    width: var(--collapsed-panel-width) !important;
    min-width: var(--collapsed-panel-width) !important;
    max-width: var(--collapsed-panel-width) !important;
    flex-basis: var(--collapsed-panel-width) !important;
}

.control-panel.collapsed .control-panel-content,
.control-panel.collapsed .control-panel-scroll-inner,
body.control-panel-is-collapsed .control-panel .control-panel-content,
body.control-panel-is-collapsed .control-panel .control-panel-scroll-inner,
body.control-panel-is-collapsed .control-panel.collapsed .control-panel-content,
body.control-panel-is-collapsed .control-panel.collapsed .control-panel-scroll-inner {
    width: var(--collapsed-panel-width);
}

.control-panel.collapsed .control-panel-header,
body.control-panel-is-collapsed .control-panel .control-panel-header,
body.control-panel-is-collapsed .control-panel.collapsed .control-panel-header {
    gap: 18px !important;
}

.control-panel.collapsed .panel-header-main,
body.control-panel-is-collapsed .control-panel .panel-header-main,
body.control-panel-is-collapsed .control-panel.collapsed .panel-header-main {
    flex: 0 0 auto !important;
}

.control-panel.collapsed .panel-header-actions,
body.control-panel-is-collapsed .control-panel .panel-header-actions,
body.control-panel-is-collapsed .control-panel.collapsed .panel-header-actions {
    margin-left: auto !important;
    padding-left: 18px !important;
}

.control-panel.collapsed .expand-button,
body.control-panel-is-collapsed .control-panel .expand-button,
body.control-panel-is-collapsed .control-panel.collapsed .expand-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
}

@media (min-width: 1800px) and (max-width: 2000px) and (max-height: 1250px) {
    .container {
        grid-template-columns: minmax(0, 1fr) 360px !important;
    }

    body.control-panel-is-collapsed .container {
        grid-template-columns: minmax(0, 1fr) var(--collapsed-panel-width) !important;
    }

    .control-panel {
        width: 360px !important;
        min-width: 360px !important;
        max-width: 360px !important;
    }

    .control-panel .panel-user-pill {
        max-width: 220px;
    }
}

@media (max-width: 860px) {
    .project-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-card-footer .activate-button {
        margin-left: 0;
    }
}

/* ============================================================================
   CONTROL PANEL FIXES
   1. Hide scrollbar (keep scrolling).
   2. Fix collapsed-state expand button getting clipped by the right edge.
   3. Smooth minimize / maximize animation.
   ============================================================================ */

/* --- 1. Hide scrollbar while preserving scroll functionality ----------------
   The previous setup showed a thin scrollbar on .control-panel-scroll-inner
   (the real scroller) and used decorative ::before/::after "corner caps" plus
   extra right-padding to reserve visual space for it. All of that becomes
   unnecessary once the bar is hidden. */
.control-panel-content,
.control-panel-scroll-inner {
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* legacy IE/Edge */
}

.control-panel-content::-webkit-scrollbar,
.control-panel-scroll-inner::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none;                    /* Chrome / Safari / modern Edge */
}

/* reclaim the right-padding previously reserved for the scrollbar, but only
   for the expanded state — the collapsed state uses its own tighter padding */
.control-panel:not(.collapsed) .control-panel-scroll-inner {
    padding-right: var(--modal-padding) !important;
}

/* kill the decorative "corner caps" that used to mask the scrollbar --
   NB: .control-panel-scroll-inner::after is intentionally excluded here; it
   gets repurposed below as a bottom spacer to fix scroll padding. */
.control-panel-content::before,
.control-panel-content::after,
.control-panel-scroll-inner::before {
    display: none !important;
}

/* Fix: last element's bottom padding was getting clipped on scroll.
   Chromium doesn't include a scroll container's padding-bottom in its
   scrollHeight, so when you scroll to the end the bottom padding disappears.
   Solution: drop the container's padding-bottom and use an in-flow ::after
   spacer that IS counted as scrollable content. */
.control-panel:not(.collapsed) .control-panel-scroll-inner {
    padding-bottom: 0 !important;
}

.control-panel:not(.collapsed) .control-panel-scroll-inner::after {
    content: '' !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: calc(var(--modal-padding) + 14px) !important;
    margin-top: 8px !important;
    background: transparent !important;
    border-radius: 0 !important;
    pointer-events: none;
}

.control-panel:not(.collapsed) .control-panel-scroll-inner > :last-child {
    margin-bottom: 0 !important;
}

/* --- 2. Fix clipped expand button on the minimized control panel ------------
   At 132px wide, the header packed logo + 18px gap + 18px actions padding +
   36px button = ~128px into 104px of usable space, pushing the button past
   the rounded right edge. Give it a touch more width and tighten the header. */
:root {
    --collapsed-panel-width: 148px;
}

.control-panel.collapsed .control-panel-header,
body.control-panel-is-collapsed .control-panel .control-panel-header,
body.control-panel-is-collapsed .control-panel.collapsed .control-panel-header {
    gap: 8px !important;
}

.control-panel.collapsed .panel-header-actions,
body.control-panel-is-collapsed .control-panel .panel-header-actions,
body.control-panel-is-collapsed .control-panel.collapsed .panel-header-actions {
    margin-left: auto !important;
    padding-left: 0 !important;
    gap: 0 !important;
}

.control-panel.collapsed .panel-logo-img-inline,
body.control-panel-is-collapsed .control-panel .panel-logo-img-inline,
body.control-panel-is-collapsed .control-panel.collapsed .panel-logo-img-inline {
    max-width: 56px;
}

/* --- 3. Smooth minimize / maximize animation --------------------------------
   The outer .control-panel already had `transition: all 0.5s ease` but the
   inner wrappers (.control-panel-content, .control-panel-scroll-inner) had
   no transition, so their widths and max-height snapped. We also unify the
   timing function and duration across the wrappers so the whole panel glides
   as one piece. */
.control-panel {
    transition:
        flex-basis 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        width      0.8s cubic-bezier(0.22, 1, 0.36, 1),
        min-width  0.8s cubic-bezier(0.22, 1, 0.36, 1),
        max-width  0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: width;
}

.control-panel-content,
.control-panel-scroll-inner {
    transition:
        width        0.8s cubic-bezier(0.22, 1, 0.36, 1),
        max-height   0.8s cubic-bezier(0.22, 1, 0.36, 1),
        padding      0.8s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow   0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width, max-height, padding;
}

.control-panel-header,
.panel-header-main,
.panel-header-actions,
.panel-logo-img-inline,
.expand-button,
.collapse-button {
    transition:
        gap         0.8s cubic-bezier(0.22, 1, 0.36, 1),
        margin      0.8s cubic-bezier(0.22, 1, 0.36, 1),
        padding     0.8s cubic-bezier(0.22, 1, 0.36, 1),
        max-width   0.8s cubic-bezier(0.22, 1, 0.36, 1),
        width       0.8s cubic-bezier(0.22, 1, 0.36, 1),
        min-width   0.8s cubic-bezier(0.22, 1, 0.36, 1),
        height      0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform   0.25s ease,
        box-shadow  0.25s ease,
        opacity     0.35s ease;
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .control-panel,
    .control-panel-content,
    .control-panel-scroll-inner,
    .control-panel-header,
    .panel-header-main,
    .panel-header-actions,
    .panel-logo-img-inline {
        transition: none !important;
    }
}


@media (max-width: 980px) {
    .theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .theme-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   SIDEBAR / TOGGLE / NOTIFICATION CONSISTENCY PATCH
   - Restore full-height desktop sidebar across UI variants
   - Keep color-mode toggle in the sidebar rather than the top bar
   - Make sidebar notification/action icon buttons match the active UI language
   ============================================================================ */

:root {
    --desktop-sidebar-width: clamp(320px, 24vw, 430px);
}

/* Sidebar-level display row is the canonical home for the color-mode toggle. */
.control-panel .panel-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.control-panel .color-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar action buttons (including notification / bell actions) */
.control-panel .panel-header-actions > button:not(.collapse-button):not(.expand-button),
.control-panel .panel-header-actions > .icon-button-small,
.control-panel .icon-button-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: var(--surface);
    color: var(--heading);
    box-shadow: var(--inset-shadow);
    font-size: 0;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.control-panel .panel-header-actions > button:not(.collapse-button):not(.expand-button):hover,
.control-panel .panel-header-actions > .icon-button-small:hover,
.control-panel .icon-button-small:hover {
    transform: translateY(-1px);
    background: var(--panel);
    color: var(--accent);
    box-shadow: var(--card-shadow);
}

.control-panel .panel-header-actions > button:not(.collapse-button):not(.expand-button) > svg,
.control-panel .panel-header-actions > .icon-button-small > svg,
.control-panel .icon-button-small > svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 1101px) {
    .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        padding-right: calc(var(--desktop-sidebar-width) + clamp(18px, 2vw, 28px)) !important;
    }

    body.control-panel-is-collapsed .container {
        grid-template-columns: none !important;
        padding-right: calc(var(--collapsed-panel-width, 148px) + clamp(18px, 2vw, 28px)) !important;
    }

    .top-app-bar,
    .viewport,
    .control-panel {
        grid-area: auto !important;
    }

    .top-app-bar {
        width: 100%;
    }

    /* Hide any toolbar-mounted theme toggle on desktop; the sidebar row is the source of truth. */
    .top-app-bar .color-mode-toggle,
    .top-view-toolbar .color-mode-toggle {
        display: none !important;
    }

    .control-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: var(--desktop-sidebar-width) !important;
        min-width: var(--desktop-sidebar-width) !important;
        max-width: 430px !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        z-index: 55 !important;
    }

    .control-panel-content {
        position: relative !important;
        top: auto !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .control-panel-scroll-inner {
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }

    body.control-panel-is-collapsed .control-panel,
    body.control-panel-is-collapsed .control-panel.collapsed,
    .control-panel.collapsed {
        width: var(--collapsed-panel-width, 148px) !important;
        min-width: var(--collapsed-panel-width, 148px) !important;
        max-width: var(--collapsed-panel-width, 148px) !important;
        flex-basis: var(--collapsed-panel-width, 148px) !important;
    }

    body.control-panel-is-collapsed .control-panel .control-panel-content,
    body.control-panel-is-collapsed .control-panel .control-panel-scroll-inner,
    body.control-panel-is-collapsed .control-panel.collapsed .control-panel-content,
    body.control-panel-is-collapsed .control-panel.collapsed .control-panel-scroll-inner,
    .control-panel.collapsed .control-panel-content,
    .control-panel.collapsed .control-panel-scroll-inner {
        width: var(--collapsed-panel-width, 148px) !important;
        height: 100% !important;
        max-height: none !important;
    }
}

/* ============================================================================
   PATCH v5 — left sidebar layout, labeled mode toggle, notification modal,
   top-right logo, and desktop consistency
   ============================================================================ */

:root {
    --sidebar-width-desktop: 20vw;
}

.top-app-logo {
    width: clamp(108px, 8vw, 152px);
    height: auto;
    display: block;
    justify-self: end;
    align-self: center;
    object-fit: contain;
}

.top-app-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 16px;
}

.top-view-toolbar {
    justify-self: stretch;
}

.view-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(118px, 136px)) auto;
    gap: 10px;
    align-items: center;
}

.toolbar-actions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
}

/* Desktop app shell: left sidebar at 20% width */
@media (min-width: 1101px) {
    .container {
        padding-left: var(--sidebar-width-desktop);
        padding-right: clamp(20px, 2vw, 28px);
    }

    body.control-panel-is-collapsed .container {
        padding-left: clamp(20px, 2vw, 28px);
        padding-right: clamp(20px, 2vw, 28px);
    }

    .control-panel {
        left: 0;
        right: auto;
        width: var(--sidebar-width-desktop);
        min-width: var(--sidebar-width-desktop);
        max-width: var(--sidebar-width-desktop);
        border-right: 1px solid rgba(0, 0, 0, 0.06);
        border-left: none;
    }

    .control-panel.collapsed {
        transform: translateX(-100%);
    }

    .panel-edge-toggle {
        left: var(--sidebar-width-desktop);
        right: auto;
        transform: translate(-50%, -50%);
    }

    body.control-panel-is-collapsed .panel-edge-toggle {
        left: 0;
        right: auto;
        transform: translate(0, -50%);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    body.control-panel-is-collapsed .panel-edge-toggle svg {
        transform: rotate(0deg);
    }
}

.control-panel-header {
    margin-bottom: 12px;
    align-items: center;
}

.panel-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.panel-user-info {
    display: flex;
    align-items: center;
    min-width: 0;
}

.panel-user-pill {
    width: 100%;
    max-width: none;
    min-height: 52px;
    padding: 10px 14px;
    gap: 12px;
    justify-content: flex-start;
}

.panel-avatar,
.account-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.account-avatar--large {
    width: 88px;
    height: 88px;
}

.panel-avatar-img,
.account-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: 1 / 1;
}

.panel-username {
    font-size: 13px;
    font-weight: 700;
}

/* ChatGPT-like thin scrollbar */
.control-panel-scroll-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 130, 0.45) transparent;
}

.control-panel-scroll-inner::-webkit-scrollbar {
    width: 10px;
}

.control-panel-scroll-inner::-webkit-scrollbar-track {
    background: transparent;
}

.control-panel-scroll-inner::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 130, 0.42);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.control-panel-scroll-inner::-webkit-scrollbar-thumb:hover {
    background-color: rgba(120, 120, 130, 0.62);
}

.sidebar-section-label {
    margin: 20px 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.sidebar-nav-list {
    display: grid;
    gap: 10px;
}

.sidebar-nav-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: none;
    border-radius: 14px;
    background: var(--panel);
    color: var(--heading);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.sidebar-nav-card:hover {
    transform: translateY(-1px);
}

.sidebar-nav-card.active {
    outline: 2px solid rgba(50, 120, 235, 0.18);
}

.sidebar-nav-card-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-nav-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(50, 120, 235, 0.10);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}

.sidebar-total-completion-section {
    margin-top: 20px;
}

.sidebar-completion-stats {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.sidebar-completion-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
}

.sidebar-completion-stat strong {
    color: var(--heading);
    font-size: 12px;
}

.notifications-summary-card,
.settings-panel-card {
    background: var(--panel);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--card-shadow);
}

.notifications-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.notifications-summary-text {
    font-size: 12px;
    color: var(--heading);
    font-weight: 600;
}

.notifications-summary-actions,
.settings-actions {
    display: grid;
    gap: 8px;
}

.sidebar-action-button,
.section-action-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: var(--surface);
    color: var(--heading);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--inset-shadow);
    transition: transform 0.18s ease, filter 0.18s ease;
}

.sidebar-action-button:hover,
.section-action-button:hover {
    transform: translateY(-1px);
}

.sidebar-action-button--danger {
    color: #c14a4a;
}

.sidebar-mode-toggle-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;
}

/* Labeled light/dark toggle */
.color-mode-toggle {
    position: relative;
    width: 102px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--surface);
    color: var(--heading);
    box-shadow: var(--inset-shadow);
}

.color-mode-toggle-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    border-radius: inherit;
}

.color-mode-toggle-option {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.color-mode-toggle-option--light {
    text-align: left;
}

.color-mode-toggle-option--dark {
    text-align: right;
}

.color-mode-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 46px;
    height: 30px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease;
    z-index: 1;
}

.color-mode-toggle.is-dark .color-mode-toggle-thumb {
    transform: translateX(50px);
}

.color-mode-toggle.is-dark .color-mode-toggle-option--dark,
.color-mode-toggle:not(.is-dark) .color-mode-toggle-option--light {
    color: var(--heading);
}

.notifications-modal-content,
.shortcuts-modal-content {
    max-width: 680px;
}

.notifications-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shortcuts-grid--modal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin-top: 8px;
}

/* Remove the caret from non-editable text blocks */
body :where(h1, h2, h3, h4, h5, h6, p, span, div, label, button):not(input):not(textarea) {
    caret-color: transparent;
}

/* Mobile / narrower desktop fallback */
@media (max-width: 1700px) {
    .view-toolbar {
        grid-template-columns: minmax(140px, 1fr) repeat(2, minmax(112px, 128px)) auto;
    }
}

@media (max-width: 1100px) {
    .top-app-bar {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .top-app-logo {
        justify-self: start;
    }

    .view-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .toolbar-actions {
        justify-self: stretch;
    }

    .control-panel {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* ============================================================================
   LAYOUT OVERRIDES — final cascade wins over earlier media-query rules
   - Sidebar always on the LEFT, always 20% of viewport width
   - Container reserves 20% on the left (no right reservation)
   - Edge toggle anchored to the sidebar's right edge
   - Project cards all the same size (fixed height, uniform grid columns)
   - Logo 25% smaller, anchored to top-right of the content area
   ============================================================================ */

.control-panel {
    left: 0 !important;
    right: auto !important;
    width: 20vw !important;
    min-width: 20vw !important;
    max-width: 20vw !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-left: none;
}

.control-panel.collapsed {
    transform: translateX(-100%) !important;
}

.container {
    padding-left: 20vw !important;
    padding-right: clamp(20px, 2vw, 28px) !important;
}

body.control-panel-is-collapsed .container {
    padding-left: clamp(20px, 2vw, 28px) !important;
    padding-right: clamp(20px, 2vw, 28px) !important;
}

.panel-edge-toggle {
    left: 20vw !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

body.control-panel-is-collapsed .panel-edge-toggle {
    left: 0 !important;
    right: auto !important;
    transform: translate(0, -50%) !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Edge-toggle chevron flips correctly for the left-side sidebar.
   Panel open  → chevron points left (◀) to close
   Panel closed → chevron points right (▶) to open */
.panel-edge-toggle svg {
    transform: rotate(180deg);
}

body.control-panel-is-collapsed .panel-edge-toggle svg {
    transform: rotate(0deg);
}

/* All project cards the same size — uniform columns (auto-fill + 1fr already
   equalizes width) plus a fixed height locks them to identical dimensions.
   overflow: hidden prevents taller content from breaking the uniform size;
   individual cards can still scroll internally if needed. */
.project-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    align-items: start;
}

.project-card {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    overflow: hidden !important;
}

/* Logo: 25% smaller than the original clamp(108px, 8vw, 152px).
   The logo already lives in the top-app-bar's right column with
   justify-self: end, so it naturally sits in the top-right corner
   of the main content area (to the right of the left sidebar). */
.top-app-logo {
    width: clamp(81px, 6vw, 114px) !important;
}

/* ============================================================================
   ROUND 2 OVERRIDES — follow-up refinements
   ============================================================================ */

/* 1) Logo pinned to the TOP-RIGHT of the page (fixed), keeping prior size.
   Pulled out of the top-app-bar's grid flow via position: fixed so the grid
   collapses from 3 columns to 2 (title + toolbar). */
.top-app-logo {
    position: fixed !important;
    top: 14px !important;
    right: 18px !important;
    z-index: 70 !important;
    justify-self: auto !important;
    pointer-events: none; /* purely decorative — don't block controls beneath */
}

/* Top app bar no longer needs a 3rd column for the (now-fixed) logo. */
.top-app-bar {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

/* Reserve space on the right edge of the top-app-bar so the sticky bar's
   own controls don't collide with the fixed logo when the window is narrow. */
.top-app-bar {
    padding-right: clamp(96px, 8vw, 132px) !important;
}

/* 2) Remove the minimize/maximize (collapse/expand) buttons in the sidebar
   header. The edge-mounted .panel-edge-toggle still handles open/close. */
.collapse-button,
.expand-button,
.panel-header-actions {
    display: none !important;
}

/* 3) Modal corner decorations removed. The ::before/::after pseudo-elements
   on .modal-content were intended as scrollbar end-caps but render as
   visible folded-paper dog-ears on modals that don't use the scroll inner. */
.modal-content::before,
.modal-content::after {
    display: none !important;
    content: none !important;
}

/* 4) Project cards flow from the TOP-LEFT — explicit start alignment on
   both axes so leftover grid space collects on the right / bottom, not
   around the cards. */
.project-grid {
    justify-content: start !important;
    align-content: start !important;
    justify-items: stretch;
    align-items: start;
}

/* Viewport header left-aligned so the page reads top-left → bottom-right
   (was text-align: center, which made the layout feel centered). */
.viewport-header h1 {
    text-align: left !important;
}

.viewport {
    align-self: flex-start;
}

/* 5) Save-status pill sits inline to the RIGHT of the user avatar pill.
   panel-user-info becomes a horizontal flex row; the save pill takes the
   remaining space and truncates if it ever gets long. */
.panel-user-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
}

.panel-user-info.hidden {
    display: none !important;
}

.panel-user-info .panel-user-pill {
    flex: 0 0 auto;
    width: auto !important;
}

.save-status--inline {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 6) UI Options modal — styling for the relocated mode toggle section. */
.ui-options-section {
    margin-bottom: 18px;
}

.ui-options-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 6px 0 10px;
}

.ui-options-mode-toggle-row {
    margin-bottom: 0;
}

/* ============================================================================
   ROUND 3 OVERRIDES
   ============================================================================ */

/* 1) Modal copy and close buttons — perfectly square.
   Explicit width/height with flex centering guarantees a true square
   regardless of the inner SVG's aspect ratio. */
.modal-close,
.modal-copy-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    flex: 0 0 36px;
}

/* 2) Padding between the sidebar and the project cards now MATCHES the
   right-side padding. Previous: padding-left: 20vw (flush to sidebar).
   New: padding-left: 20vw + the same clamp value used on the right. */
.container {
    padding-left: calc(20vw + clamp(20px, 2vw, 28px)) !important;
}

/* 3) Save-status indicator moved BELOW the avatar.
   panel-user-info is now a column: avatar-pill on top, save pill under it.
   Override the horizontal row from round 2. */
.panel-user-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.save-status--inline {
    flex: 0 0 auto;
    width: 100%;
    padding-left: 2px;
}

/* 4) Smoother sidebar collapse/expand animation.
   - Longer duration (450ms) for a more gentle feel
   - Ease-out-expo curve settles naturally without overshoot
   - Apply consistently to the panel, the container padding shift,
     and the edge-toggle so all three move in lockstep. */
.control-panel {
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.container {
    transition: padding-left 450ms cubic-bezier(0.16, 1, 0.3, 1),
                padding-right 450ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.panel-edge-toggle {
    transition: left 450ms cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease,
                box-shadow 0.2s ease !important;
}

.panel-edge-toggle svg {
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ============================================================================
   ROUND 4 OVERRIDES
   ============================================================================ */

/* 1) Avatar left-aligned — the base sheet sets .control-panel-header to
   display: grid with 1fr auto 1fr columns, intended for a three-part
   header [user-info | logo | actions]. Now that the logo and actions
   are gone, .panel-header-main (the only remaining child) was sitting
   in just the first 1fr column, which is ~50% of the sidebar width,
   so the avatar appeared pushed toward the center. Switch to flex
   (single row, stretched child) so the avatar sits flush-left. */
.control-panel-header {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100%;
}

.panel-header-main {
    width: 100%;
    flex: 1 1 auto;
}

/* 2) Role badge pinned to the TOP-RIGHT corner of every project card.
   The card is already position: relative, so absolute anchors to card
   bounds. z-index sits above card content so the badge stays readable
   even when hover-reveal action buttons appear nearby. */
.project-card .role-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 3;
    margin: 0 !important;
}

/* Keep the project-actions row from colliding with the corner-pinned
   badge. When a role badge is present, the header leaves room on the
   right so edit/copy/delete buttons wrap below or sit to the left of
   the badge instead of directly under it. */
.project-card:has(.role-badge) .project-header {
    padding-top: 4px;
    padding-right: 56px;
}

/* 3) 1920×1200 and 1920×1080 parity — two earlier media-query blocks
   gated on max-height: 1250px leaked `gap: 20px` on the container and
   `max-width: 220px` on the user-pill, meaning browser-chrome height
   differences (viewport lands on either side of 1250px) caused two
   identical-width displays to render slightly differently. Lock these
   values across all desktop heights. The user-pill keeps its natural
   content-sized width (from round 2) — we only neutralize the max-width
   cap here. */
.container {
    gap: clamp(18px, 1.5vw, 28px) !important;
}

.control-panel .panel-user-pill {
    max-width: none !important;
}

/* 4) Search box width — halved from the round-4 oversize.
   Round 4 bumped it 1.5× (252–396px → 378–594px). This turn reduces
   that by 50%, landing at 189–297px (75% of the original baseline).
   Both the toolbar grid column AND the wrapper scale together so the
   input actually gets the narrower cell it needs to fit. */
.view-toolbar {
    grid-template-columns: minmax(189px, 297px) minmax(118px, 146px) minmax(118px, 146px) auto !important;
}

.view-toolbar-search-wrap {
    width: min(100%, clamp(189px, 19.5vw, 297px)) !important;
    max-width: clamp(189px, 19.5vw, 297px) !important;
}

/* ============================================================================
   ROUND 5 OVERRIDE — avatar image fills circle at all viewport heights
   ============================================================================ */

/* Symptom: at 1920×1200, the uploaded profile photo only filled half the
   avatar circle; at 1920×1080 it was fine. Root cause: the image rule at
   line 5144 sets `aspect-ratio: 1 / 1` on .panel-avatar-img. If the parent
   container ever stretches to be wider than tall (flex layouts can shift
   subtly at different viewport heights), `width: 100%` gives the image the
   full parent width, but `aspect-ratio: 1/1` then shrinks the height to
   match that width — or vice versa — leaving the rest of the circle empty.
   Fix: hard-lock the container to exactly 34×34 so it CAN'T stretch, and
   drop the aspect-ratio constraint on the image so it just fills whatever
   the container provides. */

.panel-avatar,
.account-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    aspect-ratio: 1 / 1 !important;
}

/* Preserve the larger variant used in the account-settings modal. */
.account-avatar--large {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    flex: 0 0 88px !important;
}

/* Image fills the (now guaranteed square) container completely.
   object-fit: cover handles any non-square source photos by cropping. */
.panel-avatar-img,
.account-avatar-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}


/* ============================================================================
   ROUND 7 OVERRIDES
   ============================================================================ */

/* Sidebar account identity should read as a simple avatar + name row,
   not a card, across every UI. The save-status indicator should also stay
   text-only. */
.control-panel .panel-user-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
}

.control-panel .panel-user-pill {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 34px !important;
    padding: 0 !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}

.control-panel .panel-user-pill:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.control-panel .panel-username {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    min-height: 34px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.control-panel .save-status,
.control-panel .save-status--inline,
.save-status--inline {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Ensure project cards always fill from the top-left in normal row-major order. */
.project-grid {
    width: 100% !important;
    grid-auto-flow: row !important;
    justify-content: start !important;
    justify-items: stretch !important;
    align-content: start !important;
    place-content: start !important;
}

/* Center the modal toggle cleanly and keep it away from the edge. */
.hide-completed-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 16px !important;
    padding-inline: 6px !important;
}

.hide-completed-toggle .toggle-label {
    width: 100%;
    text-align: center;
}

/* Theme-aware paste-task block inside the project modal. */
.modal-paste-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(120, 120, 130, 0.22);
}

.modal-paste-title {
    margin-bottom: 12px;
    color: var(--heading);
    font-size: 14px;
    font-weight: 700;
}

/* ============================================================================
   ROUND 8 OVERRIDES
   - first project row starts immediately beneath the menu bar
   - grid continues left-to-right from the top-left corner
   ============================================================================ */

/* The container's generic `gap` was creating a full row gap between the
   top app bar and the viewport. Split the axes so horizontal spacing stays
   intact while the project area begins directly under the menu bar. */
.container {
    column-gap: clamp(18px, 1.5vw, 28px) !important;
    row-gap: 0 !important;
}

/* Remove any phantom spacing when no active filter chips are being shown. */
.view-filter-chips:empty {
    display: none !important;
    margin: 0 !important;
}

/* Keep a small gap only when filter chips actually exist. */
.view-filter-chips:not(:empty) {
    margin-bottom: 10px !important;
}

/* Ensure the project grid starts flush at the top-left of the content area. */
.viewport,
#projectGrid,
.project-grid {
    margin-top: 0 !important;
}

.viewport {
    align-self: flex-start !important;
}

.project-grid {
    justify-content: start !important;
    justify-items: stretch !important;
    align-content: start !important;
    place-content: start !important;
}


/* ============================================================================
   ROUND 9 OVERRIDES
   - sidebar theme toggle moved to the header top-right
   - project modal hide-completed toggle restored to left alignment
   - menu bar spacing normalized
   - project cards pulled slightly closer to the menu bar
   - collaborator badge flattened across UIs
   ============================================================================ */

.control-panel .control-panel-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
}

.control-panel .panel-header-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.sidebar-header-theme-toggle {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
}

.control-panel .sidebar-header-theme-toggle .color-mode-toggle {
    margin: 0 !important;
}

.ui-options-mode-toggle-row--relocated {
    display: none !important;
}

.top-app-bar {
    gap: 8px !important;
}

.view-toolbar {
    gap: 8px !important;
}

.toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
}

/* Keep the cards a touch closer to the toolbar without introducing overlap. */
.viewport {
    margin-top: -6px !important;
}

.view-filter-chips:not(:empty) {
    margin-bottom: 5px !important;
}

/* Restore the hide-completed toggle to its original left-aligned position
   directly beneath the Add Task button in all themes. */
.hide-completed-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px 0 !important;
    padding-inline: 0 !important;
}

.hide-completed-toggle .toggle-label {
    width: auto !important;
    text-align: left !important;
}

/* Flatten the collaborator badge so it no longer reads as neumorphic. */
.shared-badge {
    box-shadow: none !important;
    border: 1px solid rgba(50, 120, 235, 0.18);
}

@media (max-width: 1100px) {
    .viewport {
        margin-top: 0 !important;
    }
}

/* ============================================================================
   ROUND 10 OVERRIDES
   - project cards start at the true top-left of the main content area
   - menu bar to first-row spacing reduced and normalized
   - grid remains left-aligned and responsive at 1920x1080 and 1920x1200
   ============================================================================ */

/* Tighten the vertical relationship between the toolbar row and the project
   content row without affecting the horizontal gap to the sidebar. */
@media (min-width: 1101px) {
    .container {
        row-gap: clamp(8px, 0.8vw, 12px) !important;
    }
}

/* Make the main content stack from the absolute top-left with no phantom
   header/filter spacing above the card grid. */
.viewport {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.viewport-header,
.viewport-header h1 {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.view-filter-chips,
.view-filter-chips:not(:empty) {
    margin-top: 0 !important;
}

.view-filter-chips:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#projectGrid,
.project-grid {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: start !important;
    justify-items: stretch !important;
    align-content: start !important;
    align-items: start !important;
    place-content: start !important;
    grid-auto-flow: row !important;
}

/* Remove the last small pull-down that was still leaving extra space above the
   first row, while keeping a modest and consistent toolbar-to-grid gap. */
.top-app-bar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Preserve the intended desktop card flow explicitly. */
@media (min-width: 1681px) {
    .project-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1101px) and (max-width: 1680px) {
    .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) and (min-width: 741px) {
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================================
   ROUND 11 OVERRIDES
   - avatar image reliably fills the full circle on 1920x1200 and 1920x1080
   - sidebar account area is anchored to the true top-left of the sidebar
   - menu bar spacing is reduced and normalized with one consistent gap value
   ============================================================================ */

:root {
    --menu-bar-control-gap: 6px;
}

/* Avatar rendering: stack the image and fallback in the same cell instead of
   letting them participate in flex layout side-by-side. This prevents the
   uploaded image from appearing to occupy only half the circle if the fallback
   node is still present. */
.panel-avatar,
.account-avatar {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 999px !important;
}

.panel-avatar-img,
.account-avatar-img,
.panel-avatar-fallback,
.account-avatar-fallback {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.panel-avatar-img,
.account-avatar-img {
    display: block !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

.panel-avatar-fallback,
.account-avatar-fallback {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.panel-avatar > .hidden,
.account-avatar > .hidden {
    display: none !important;
}

/* Sidebar account/avatar block pinned to the top-left of the sidebar header. */
.control-panel .control-panel-scroll-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.control-panel .control-panel-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.control-panel .panel-header-main {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.control-panel .panel-user-info {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

.control-panel .panel-user-pill {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
}

/* Menu bar spacing: one consistent value across every control with no extra
   spacing injected by wrapper elements. */
.top-app-bar,
.view-toolbar {
    gap: var(--menu-bar-control-gap) !important;
}

.top-view-toolbar,
.view-toolbar-search-wrap,
.view-toolbar > *,
.toolbar-actions,
.toolbar-actions > * {
    margin: 0 !important;
}

.top-view-toolbar {
    margin-left: 0 !important;
}

.view-toolbar {
    column-gap: var(--menu-bar-control-gap) !important;
    row-gap: var(--menu-bar-control-gap) !important;
    justify-content: start !important;
}

.toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    padding: 0 !important;
}

/* ============================================================================
   ROUND 14 OVERRIDES
   - reduce menu bar spacing further
   - enforce one consistent horizontal gap across all menu bar items
   - remove wrapper-introduced spacing drift
   ============================================================================ */

:root {
    --menu-bar-control-gap: 4px;
}

.top-app-bar {
    column-gap: var(--menu-bar-control-gap) !important;
    row-gap: var(--menu-bar-control-gap) !important;
    align-items: center !important;
}

.menu-container,
.top-app-bar-title,
.top-app-logo,
.top-view-toolbar,
.view-toolbar-search-wrap,
.view-toolbar > *,
.toolbar-actions,
.toolbar-actions > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.top-view-toolbar,
.view-toolbar {
    gap: var(--menu-bar-control-gap) !important;
    column-gap: var(--menu-bar-control-gap) !important;
    row-gap: var(--menu-bar-control-gap) !important;
}

.view-toolbar {
    justify-content: start !important;
    justify-items: start !important;
    align-items: center !important;
}

.toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    gap: var(--menu-bar-control-gap) !important;
    padding: 0 !important;
}

/* ============================================================================
   ROUND 10 OVERRIDES
   - fix hide-completed toggle knob alignment/containment across themes
   ============================================================================ */

.hide-completed-toggle {
    gap: 10px !important;
}

.hide-completed-toggle .toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 58px !important;
    height: 30px !important;
    flex: 0 0 auto !important;
}

.hide-completed-toggle .toggle-switch .toggle-slider {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
}

.hide-completed-toggle .toggle-switch .toggle-slider::before {
    content: "";
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 2px !important;
    width: 24px !important;
    height: 24px !important;
    transform: translate3d(0, -50%, 0) !important;
    box-sizing: border-box !important;
}

.hide-completed-toggle .toggle-switch input:checked + .toggle-slider::before {
    transform: translate3d(30px, -50%, 0) !important;
}


/* ============================================================================
   ROUND 15 OVERRIDES
   - default-collapsed leaderboard / notifications / settings sections
   - leaderboard styles and rank display cleanup
   - modal tasks list Enter support companion styles
   - force top-left project flow across active / shared / completed views
   ============================================================================ */

.sidebar-collapsible {
    margin-bottom: 16px;
}

.sidebar-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--heading);
    cursor: pointer;
    text-align: left;
    font: inherit;
    margin-bottom: 10px;
}

.sidebar-section-toggle-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--muted);
}

.sidebar-section-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform 0.2s ease;
}

.sidebar-collapsible.is-expanded .sidebar-section-chevron {
    transform: rotate(180deg);
}

.sidebar-section-body[hidden] {
    display: none !important;
}

.leaderboard-panel-card {
    background: var(--panel);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--card-shadow);
}

.leaderboard-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.leaderboard-summary-text {
    font-size: 12px;
    color: var(--heading);
    font-weight: 600;
}

.leaderboard-list {
    display: grid;
    gap: 8px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--inset-shadow);
}

.leaderboard-row-rank {
    font-size: 12px;
    font-weight: 800;
    color: var(--heading);
}

.leaderboard-row-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.leaderboard-row-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--heading);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-row-name.is-current {
    color: var(--accent);
}

.leaderboard-row-stats {
    font-size: 11px;
    color: var(--muted);
}

.leaderboard-row.is-current {
    outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Make the main content a strict top-to-bottom stack so the card grid always
   begins directly beneath the toolbar, including sparse shared/completed views. */
.container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    row-gap: 10px !important;
}

.top-app-bar {
    align-self: start !important;
    margin: 0 !important;
}

.viewport {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-self: start !important;
    width: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.view-filter-chips,
.view-filter-chips:not(:empty) {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.view-filter-chips:empty {
    display: none !important;
    margin: 0 !important;
}

#emptyState {
    margin: 0 !important;
}

#projectGrid,
.project-grid {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: start !important;
    justify-items: stretch !important;
    align-items: start !important;
    align-content: start !important;
    place-content: start !important;
    grid-auto-flow: row !important;
}

/* Keep the toolbar controls evenly spaced while preserving the compact Save View button. */
.view-toolbar {
    grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(118px, 132px)) auto !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
}

.view-toolbar-button {
    width: auto !important;
    min-width: 0 !important;
    justify-self: start !important;
}

.toolbar-actions {
    width: auto !important;
    justify-self: start !important;
}


/* Round 15 targeted fixes */
.modal-tabs {
    border-bottom: none !important;
}

/* Only true text inputs should show a caret. */
body *:not(input):not(textarea):not([contenteditable="true"]):not([contenteditable="plaintext-only"]) {
    caret-color: transparent !important;
}

body input,
body textarea,
body [contenteditable="true"],
body [contenteditable="plaintext-only"] {
    caret-color: auto !important;
}

/* Remove the Save View slot and size dropdowns to fit full labels. */
.view-toolbar {
    grid-template-columns: minmax(220px, 1.6fr) max-content max-content !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
}

.view-toolbar-search-wrap {
    min-width: 0 !important;
}

.view-toolbar-select {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding-right: 44px !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
    justify-self: start !important;
    flex: 0 0 auto !important;
}

/* Leaderboard row format: #1 Dante / 79% • 6 projects • 174 tasks */
.leaderboard-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

.leaderboard-row-title {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.leaderboard-row-rank {
    min-width: 0 !important;
    font-size: 13px !important;
}

.leaderboard-row-name {
    font-size: 13px !important;
}

.leaderboard-row-stats {
    padding-left: 0 !important;
}

/* ============================================================================
   TASK TAGS + TASK TAG SORTING
   ============================================================================ */

.modal-task-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.task-sort-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 168px;
}

.task-sort-select,
.task-tag-select,
.task-custom-tag-input {
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--panel);
    color: var(--heading);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    outline: none;
}

.task-sort-select,
.task-custom-tag-input {
    min-width: 148px;
    padding: 0 12px;
    box-shadow: var(--card-shadow);
}

.task-sort-select,
.task-tag-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f2428' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}

body[data-color-mode="dark"] .task-sort-select,
body[data-color-mode="dark"] .task-tag-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f2f7ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.task-item {
    max-height: 220px;
}

.task-main-content {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    align-items: center;
}

.task-meta-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.task-tag-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    cursor: pointer;
}

.task-tag-select-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    opacity: 0.65;
    pointer-events: none;
}

.task-tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 36px;
    padding: 0 34px 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: var(--card-shadow);
    color: var(--heading);
    background: rgba(50, 120, 235, 0.12);
}

.task-tag-pill--critical { background: rgba(224, 49, 49, 0.18); color: #b42318; }
.task-tag-pill--high { background: rgba(245, 124, 0, 0.18); color: #b54708; }
.task-tag-pill--medium { background: rgba(50, 120, 235, 0.14); color: #175cd3; }
.task-tag-pill--low { background: rgba(18, 183, 106, 0.14); color: #067647; }
.task-tag-pill--custom { background: rgba(120, 120, 130, 0.16); color: var(--heading); }

body[data-color-mode="dark"] .task-tag-pill--critical { color: #ff8b8b; }
body[data-color-mode="dark"] .task-tag-pill--high { color: #ffb86c; }
body[data-color-mode="dark"] .task-tag-pill--medium { color: #8ec5ff; }
body[data-color-mode="dark"] .task-tag-pill--low { color: #74f0b8; }
body[data-color-mode="dark"] .task-tag-pill--custom { color: #d5d9e1; }

.task-tag-select {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 112px;
    opacity: 0;
    cursor: pointer;
}

.task-custom-tag-input {
    display: none;
    min-width: 124px;
}

.task-custom-tag-input.is-visible {
    display: inline-flex;
}

@media (max-width: 900px) {
    .modal-task-controls-row {
        align-items: stretch;
    }

    .task-sort-control,
    .hide-completed-toggle {
        width: 100%;
    }

    .task-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .task-main-content {
        flex-basis: calc(100% - 36px);
        order: 1;
    }

    .task-meta-controls {
        width: 100%;
        margin-left: 0;
        padding-left: 32px;
        justify-content: flex-start;
        order: 2;
    }
}

.task-list[data-sort-mode="tag-priority"] .task-drag-handle {
    opacity: 0.18;
}


/* ============================================================================
   TASK PRIORITY FLAGS + TASK CATEGORIES
   ============================================================================ */

.task-category-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.task-category-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.task-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-category-tab,
.task-category-create-button {
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
    background: var(--panel);
    color: var(--heading);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.task-category-tab:hover,
.task-category-create-button:hover {
    background: var(--surface-2);
}

.task-category-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.task-category-create {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.task-category-create-input,
.task-category-select,
.task-category-pill {
    height: 36px;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
}

.task-category-create-input {
    min-width: 148px;
    padding: 0 12px;
    border: none;
    background: var(--panel);
    color: var(--heading);
    box-shadow: var(--card-shadow);
}

.task-category-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.task-category-select-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    opacity: 0.65;
    pointer-events: none;
}

.task-category-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 0 34px 0 12px;
    background: rgba(50, 120, 235, 0.08);
    color: var(--heading);
    border: 1px solid rgba(50, 120, 235, 0.16);
}

.task-category-select {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 120px;
    opacity: 0;
    cursor: pointer;
}

.task-tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 126px;
    height: 36px;
    padding: 0 34px 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: var(--card-shadow);
    color: var(--heading);
    background: rgba(50, 120, 235, 0.12);
}

.task-tag-label {
    white-space: nowrap;
}

.task-tag-flag {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    background-color: currentColor;
    -webkit-mask: url('../assets/flag.svg') center / contain no-repeat;
    mask: url('../assets/flag.svg') center / contain no-repeat;
}

.task-tag-pill--critical { background: rgba(184, 28, 28, 0.14); color: #991b1b; }
.task-tag-pill--high { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.task-tag-pill--medium { background: rgba(245, 124, 0, 0.16); color: #ea580c; }
.task-tag-pill--low { background: rgba(22, 163, 74, 0.14); color: #16a34a; }

body[data-color-mode="dark"] .task-tag-pill--critical { color: #fca5a5; }
body[data-color-mode="dark"] .task-tag-pill--high { color: #ff7b7b; }
body[data-color-mode="dark"] .task-tag-pill--medium { color: #fdba74; }
body[data-color-mode="dark"] .task-tag-pill--low { color: #86efac; }

@media (max-width: 900px) {
    .task-category-toolbar,
    .task-category-create {
        align-items: stretch;
    }

    .task-category-tabs,
    .task-category-create,
    .task-category-create-input,
    .task-category-create-button {
        width: 100%;
    }

    .task-meta-controls {
        width: 100%;
        margin-left: 0;
        padding-left: 32px;
    }
}


/* ==========================================================================
   ROUND 24 TASK CARD + TAB REFINEMENT
   ========================================================================== */
.modal-tasks-card {
    position: relative;
    margin-bottom: 24px;
    overflow: visible;
}

.modal-tasks-card-body {
    position: relative;
    z-index: 1;
    margin-top: -1px;
    padding: 16px;
    border-radius: 0 18px 18px 18px;
    border: 1px solid var(--line, rgba(255,255,255,0.08));
    background: var(--panel);
    box-shadow: var(--card-shadow);
    overflow: visible;
}

.task-category-controls {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
}

.task-category-toolbar {
    gap: 14px;
}

.task-category-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
    width: 100%;
    padding: 0 10px 0 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}

.task-category-tabs::-webkit-scrollbar {
    display: none;
}

.task-category-tab-wrap {
    position: relative;
    flex: 0 0 auto;
    margin-right: 4px;
    margin-bottom: -1px;
}

.task-category-tab-wrap--all {
    margin-left: 0;
}

.task-category-tab-shell {
    --tab-radius: 18px;
    --tab-bg: var(--panel-strong, var(--panel));
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding-inline: 12px;
    width: fit-content;
    background: var(--tab-bg) border-box;
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--line, rgba(255,255,255,0.1));
    z-index: 1;
}

.task-category-tab-shell--left {
    border-right: var(--tab-radius) solid #0000;
    border-radius: var(--tab-radius) calc(2 * var(--tab-radius)) 0 0 / var(--tab-radius);
    -webkit-mask: radial-gradient(var(--tab-radius) at 100% 0, #0000 98%, #000 101%) 100% 100% / var(--tab-radius) var(--tab-radius) no-repeat, conic-gradient(#000 0 0) padding-box;
    mask: radial-gradient(var(--tab-radius) at 100% 0, #0000 98%, #000 101%) 100% 100% / var(--tab-radius) var(--tab-radius) no-repeat, conic-gradient(#000 0 0) padding-box;
}

.task-category-tab-shell--center {
    border-inline: var(--tab-radius) solid #0000;
    border-radius: calc(2 * var(--tab-radius)) calc(2 * var(--tab-radius)) 0 0 / var(--tab-radius);
    -webkit-mask: radial-gradient(var(--tab-radius) at var(--tab-radius) 0, #0000 98%, #000 101%) calc(-1 * var(--tab-radius)) 100% / 100% var(--tab-radius) repeat-x, conic-gradient(#000 0 0) padding-box;
    mask: radial-gradient(var(--tab-radius) at var(--tab-radius) 0, #0000 98%, #000 101%) calc(-1 * var(--tab-radius)) 100% / 100% var(--tab-radius) repeat-x, conic-gradient(#000 0 0) padding-box;
}

.task-category-tab-shell--right {
    border-left: var(--tab-radius) solid #0000;
    border-radius: calc(2 * var(--tab-radius)) var(--tab-radius) 0 0 / var(--tab-radius) var(--tab-radius) 0 0;
    -webkit-mask: radial-gradient(var(--tab-radius) at 0 0, #0000 98%, #000 101%) 0 100% / var(--tab-radius) var(--tab-radius) no-repeat, conic-gradient(#000 0 0) padding-box;
    mask: radial-gradient(var(--tab-radius) at 0 0, #0000 98%, #000 101%) 0 100% / var(--tab-radius) var(--tab-radius) no-repeat, conic-gradient(#000 0 0) padding-box;
}

.task-category-tab-shell.is-active {
    color: var(--heading);
    box-shadow: inset 0 0 0 1px var(--accent), inset 0 2px 0 0 var(--accent);
    z-index: 3;
}

.task-category-tab {
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    white-space: nowrap;
}

.task-category-tab:hover {
    background: transparent;
    color: var(--heading);
}

.task-category-menu-button {
    width: auto;
    height: auto;
    padding: 0 2px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    box-shadow: none;
}

.task-category-menu-button:hover {
    color: var(--heading);
}

.task-category-menu-button span {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    display: block;
}

.task-category-menu-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 132px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    background: var(--panel-strong, var(--panel));
    box-shadow: 0 18px 34px rgba(0,0,0,0.22);
    z-index: 60;
    display: grid;
    gap: 6px;
}

.task-category-menu-option {
    height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--heading);
    text-align: left;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.task-category-menu-option:hover {
    background: var(--surface);
}

.task-category-menu-option--danger:hover {
    color: var(--danger);
}

.modal-tasks {
    overflow: visible;
    margin-bottom: 0;
}

.task-list {
    overflow: visible;
}

.task-item {
    position: relative;
    overflow: visible;
    max-height: none;
}

.task-priority-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.task-priority-button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line, rgba(255,255,255,0.1));
    border-radius: 10px;
    background: var(--panel);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.task-priority-button--none { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.task-priority-button--high,
.task-tag-flag--critical,
.task-tag-flag--high { color: #ef4444; }
.task-priority-button--medium,
.task-tag-flag--medium { color: #f97316; }
.task-priority-button--low,
.task-tag-flag--low { color: #22c55e; }
.task-priority-button--critical { color: #ef4444; }
.task-tag-flag--none { color: color-mix(in srgb, var(--muted) 72%, transparent); }

.task-priority-popover {
    position: absolute;
    top: 50%;
    right: calc(100% - 6px);
    transform: translateY(-50%);
    min-width: 156px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--line, rgba(255,255,255,0.12));
    background: var(--panel-strong, var(--panel));
    box-shadow: 0 18px 38px rgba(0,0,0,0.28);
    z-index: 120;
    display: grid;
    gap: 6px;
}

.task-priority-option {
    height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.task-priority-option:hover,
.task-priority-option.is-active {
    background: var(--surface);
}

.task-priority-option .task-tag-flag {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

@media (max-width: 900px) {
    .task-category-tabs {
        padding-right: 8px;
    }

    .task-priority-popover {
        right: auto;
        left: 0;
        top: calc(100% + 8px);
        transform: none;
    }
}

/* ============================================================================
   Browser-style modal/auth/task-category tabs + inline category creation
   ============================================================================ */
.modal-tabs,
.auth-tabs,
.task-category-tabs {
    --browser-tab-baseline: var(--line, rgba(31, 36, 40, 0.14));
    --browser-tab-active-bg: var(--panel);
    --browser-tab-inactive-bg: var(--surface, rgba(31, 36, 40, 0.04));
    --browser-tab-hover-bg: var(--surface-2, rgba(31, 36, 40, 0.08));
    --browser-tab-border: var(--line, rgba(31, 36, 40, 0.14));
    --browser-tab-radius: 12px;
    display: flex !important;
    align-items: flex-end !important;
    gap: 0 !important;
    padding: 0 8px !important;
    border-bottom: 1px solid var(--browser-tab-baseline) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.modal-tabs {
    margin: 0 0 18px !important;
}

.auth-tabs {
    margin-bottom: 1rem;
}

.task-category-tabs {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}

.task-category-tabs::-webkit-scrollbar {
    display: none;
}

.modal-tab,
.auth-tab,
.task-category-tab-shell {
    position: relative !important;
    bottom: -1px !important;
    min-height: 38px;
    border: 1px solid var(--browser-tab-border) !important;
    border-bottom-color: var(--browser-tab-baseline) !important;
    border-radius: var(--browser-tab-radius) var(--browser-tab-radius) 0 0 !important;
    background: var(--browser-tab-inactive-bg) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease !important;
    -webkit-mask: none !important;
    mask: none !important;
}

.modal-tab,
.auth-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 2px 0 0 !important;
    padding: 10px 18px !important;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.auth-tab {
    flex: 1 1 0 !important;
}

.task-category-tab-wrap {
    position: relative;
    flex: 0 0 auto;
    margin: 0 2px 0 0 !important;
    z-index: 1;
}

.task-category-tab-shell {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    color: var(--muted) !important;
}

.task-category-tab-shell--left,
.task-category-tab-shell--center,
.task-category-tab-shell--right {
    border-left: 1px solid var(--browser-tab-border) !important;
    border-right: 1px solid var(--browser-tab-border) !important;
    border-radius: var(--browser-tab-radius) var(--browser-tab-radius) 0 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
}

.modal-tab:hover,
.auth-tab:hover,
.task-category-tab-shell:hover {
    background: var(--browser-tab-hover-bg) !important;
    color: var(--heading) !important;
}

.modal-tab.active,
.modal-tab[aria-selected="true"],
.auth-tab.auth-tab-active,
.task-category-tab-shell.is-active,
.task-category-tab-wrap.is-active .task-category-tab-shell {
    background: var(--browser-tab-active-bg) !important;
    color: var(--heading) !important;
    border-color: var(--browser-tab-border) !important;
    border-bottom-color: transparent !important;
    z-index: 4 !important;
}

.modal-tab.active::after,
.modal-tab[aria-selected="true"]::after,
.auth-tab.auth-tab-active::after,
.task-category-tab-shell.is-active::after,
.task-category-tab-wrap.is-active .task-category-tab-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--browser-tab-active-bg);
    pointer-events: none;
}

.task-category-tab,
.task-category-menu-button {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    box-shadow: none !important;
}

.task-category-tab {
    min-height: 36px;
    padding: 0 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.task-category-tab-shell--create {
    min-width: 40px;
    justify-content: center;
}

.task-category-inline-input {
    width: 128px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--browser-tab-border));
    border-radius: 8px;
    background: var(--browser-tab-active-bg);
    color: var(--heading);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.task-category-inline-input::placeholder {
    color: var(--muted);
}

.task-category-menu-popover {
    z-index: 10020 !important;
}

.modal-tasks-card-body {
    margin-top: -1px !important;
}

.task-sort-control {
    border-radius: 12px;
}

.task-category-controls {
    margin: 0 !important;
}

.task-category-toolbar {
    display: block !important;
}

/* ============================================================================
   ROUND 25 TASK CATEGORY TAB + MODAL CONTROL FIXES
   ============================================================================ */
/* Keep the project-modal Tasks/Notes/Members/History controls as buttons, not browser tabs. */
.modal-tabs {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border-bottom: 2px solid var(--surface) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.modal-tab {
    position: relative !important;
    bottom: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    margin: 0 0 -2px !important;
    padding: 12px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.modal-tab:hover {
    color: var(--heading) !important;
    background: transparent !important;
}

.modal-tab.active,
.modal-tab[aria-selected="true"] {
    color: var(--heading) !important;
    border-bottom-color: var(--accent) !important;
    background: transparent !important;
}

.modal-tab::after,
.modal-tab.active::after,
.modal-tab[aria-selected="true"]::after {
    display: none !important;
}

/* Category tabs: flush left, no tab-row scrollbar, and connected to the task card. */
.task-category-tabs {
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
}

.task-category-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.task-category-tab-wrap {
    margin: 0 2px 0 0 !important;
}

.task-category-tab-wrap--all {
    margin-left: 0 !important;
}

.task-category-tab-wrap.is-menu-open {
    z-index: 10035 !important;
}

.task-category-tab-wrap.is-drop-target .task-category-tab-shell {
    color: var(--heading) !important;
    border-color: color-mix(in srgb, var(--accent) 72%, var(--browser-tab-border)) !important;
    box-shadow: inset 0 2px 0 var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.task-category-tab-shell--all {
    margin-left: 0 !important;
}

.task-category-tab-shell--create {
    min-width: 44px !important;
    padding: 0 !important;
    cursor: pointer;
}

.task-category-tab-shell--create .task-category-tab {
    width: 100% !important;
    min-width: 44px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    cursor: pointer;
}

.task-category-menu-button {
    position: relative !important;
    z-index: 5 !important;
    min-width: 24px !important;
    min-height: 30px !important;
}

.task-category-menu-popover {
    z-index: 10060 !important;
}

.task-category-controls,
.task-category-toolbar,
.task-category-tabs,
.task-category-tab-wrap {
    overflow: visible !important;
}

.modal-tasks-card,
.modal-tasks-card-body {
    overflow: visible !important;
}

/* Task card header controls: hide-completed left, sort control right, no card wrapper. */
.modal-task-controls-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px !important;
    margin: 0 0 16px !important;
}

.modal-task-controls-row .hide-completed-toggle {
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal-task-controls-row .hide-completed-toggle .toggle-label {
    text-align: left !important;
}

.task-sort-control {
    align-items: flex-end !important;
    justify-content: center !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.task-sort-control .toggle-label {
    width: 100%;
    text-align: right;
}

.task-sort-select {
    min-width: 156px !important;
}

.task-item.dragging {
    position: relative !important;
    z-index: 10030 !important;
    pointer-events: none !important;
}

/* ============================================================================
   ROUND 26 TASK MODAL TAB + PRIORITY MENU REPAIR
   ============================================================================ */
.modal-tasks-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.task-category-tabs {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
}

.task-category-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.task-category-tab-wrap,
.task-category-tab-shell {
    overflow: visible !important;
}

.task-category-tab-shell {
    padding: 0 !important;
    cursor: pointer;
}

.task-category-tab {
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    cursor: pointer !important;
}

.task-category-tab-shell--create .task-category-tab {
    min-width: 48px !important;
    padding: 0 18px !important;
}

.task-category-menu-button {
    align-self: stretch !important;
    min-width: 34px !important;
    min-height: 38px !important;
    padding: 0 12px 0 4px !important;
    cursor: pointer !important;
}

.task-category-menu-popover {
    z-index: 10080 !important;
    pointer-events: auto !important;
}

.modal-task-controls-row {
    align-items: flex-start !important;
}

.modal-task-controls-row .hide-completed-toggle,
.task-sort-control {
    justify-content: flex-start !important;
}

.modal-task-controls-row .hide-completed-toggle .toggle-label,
.task-sort-control .toggle-label {
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
}

.task-sort-control {
    align-items: flex-end !important;
}

.modal-tasks,
.task-list,
.task-item,
.task-meta-controls {
    overflow: visible !important;
}

.task-priority-control.is-open,
.task-priority-control:has(.task-priority-popover) {
    z-index: 10070 !important;
}

.task-item:has(.task-priority-popover) {
    z-index: 10060 !important;
}

.task-priority-popover {
    top: 0 !important;
    right: calc(100% + 8px) !important;
    left: auto !important;
    transform: none !important;
    min-width: 170px !important;
    z-index: 10075 !important;
    pointer-events: auto !important;
}

@media (max-width: 900px) {
    .task-priority-popover {
        right: auto !important;
        left: 0 !important;
        top: calc(100% + 8px) !important;
    }
}

/* ============================================================================
   ROUND 27 DASHBOARD/TASK MODAL REFINEMENTS
   ============================================================================ */

/* Project modal copy button uses the accent color only while hovered. */
.modal-copy-button {
    color: var(--muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.modal-copy-button:hover,
.modal-copy-button:focus-visible {
    color: var(--accent) !important;
    background: var(--surface, rgba(127, 127, 127, 0.1)) !important;
}

/* Keep the task card body below the category tabs instead of tucked behind them. */
.modal-tasks-card-body {
    margin-top: 0 !important;
}

/* Align Hide Completed and Sort Tasks as opposing header controls. */
.modal-task-controls-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 12px 16px !important;
    margin: 0 0 16px !important;
}

.modal-task-controls-row .hide-completed-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
}

.task-sort-control {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-task-controls-row .hide-completed-toggle .toggle-label,
.task-sort-control .toggle-label {
    line-height: 1.2 !important;
    min-height: 16px !important;
    margin: 0 0 8px !important;
}

.task-sort-control .toggle-label {
    width: 100% !important;
    text-align: right !important;
}

.task-sort-select {
    display: block !important;
    min-width: 156px !important;
}

@media (max-width: 640px) {
    .modal-task-controls-row {
        grid-template-columns: 1fr !important;
    }

    .task-sort-control {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
        align-items: flex-start !important;
    }

    .task-sort-control .toggle-label {
        text-align: left !important;
    }
}

/* ============================================================================
   ROUND 28 TASK NOTES + CATEGORY TAB EDGE CLEANUP
   ============================================================================ */

.task-note-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

.task-note-button:hover,
.task-note-button:focus-visible {
    color: var(--accent) !important;
    background: var(--surface, rgba(127, 127, 127, 0.1)) !important;
    outline: none !important;
}

.task-note-button:active {
    transform: translateY(1px);
}

.task-note-button.has-note {
    color: var(--muted) !important;
}

.task-note-button.has-note:hover,
.task-note-button.has-note:focus-visible {
    color: var(--accent) !important;
}

.task-note-modal-overlay {
    z-index: 10100 !important;
}

.task-note-modal-content {
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: 520px !important;
    padding: 22px !important;
    border-radius: 22px !important;
    overflow: visible !important;
}

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

.task-note-modal-title {
    margin: 0 0 4px;
    color: var(--heading);
    font-size: 18px;
    font-weight: 800;
}

.task-note-modal-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    max-width: 390px;
}

.task-note-textarea {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    padding: 14px;
    border: 1px solid var(--line, rgba(127, 127, 127, 0.22));
    border-radius: 14px;
    background: var(--panel, var(--surface));
    color: var(--heading);
    font: inherit;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
}

.task-note-textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--line, rgba(127, 127, 127, 0.22)));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.task-note-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* Remove the tab-row baseline/top border segment that visually runs past the rounded card edge. */
.task-category-tabs {
    border-bottom: 0 !important;
}

.modal-tasks-card-body {
    border-top: 0 !important;
    border-radius: 0 18px 18px 18px !important;
}

.task-category-tab-shell.is-active::after,
.task-category-tab-wrap.is-active .task-category-tab-shell::after {
    height: 2px !important;
    bottom: -2px !important;
}

/* ============================================================================
   ROUND 29 TASK CATEGORY TAB/CARD BORDER RESTORE
   ============================================================================ */

/* Restore the task-card top edge under the category tabs, but keep that line
   inside the rounded card boundary so it does not protrude past the corner. */
.task-category-tabs {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.modal-tasks-card-body {
    margin-top: 0 !important;
    border-top: 1px solid var(--line, rgba(127, 127, 127, 0.22)) !important;
    border-radius: 0 18px 18px 18px !important;
    background-clip: padding-box !important;
}

.task-category-tab-wrap {
    margin-bottom: -1px !important;
}

.task-category-tab-shell.is-active,
.task-category-tab-wrap.is-active .task-category-tab-shell {
    border-bottom-color: transparent !important;
}

.task-category-tab-shell.is-active::after,
.task-category-tab-wrap.is-active .task-category-tab-shell::after {
    bottom: -2px !important;
    height: 2px !important;
    background: var(--browser-tab-active-bg, var(--panel)) !important;
}


/* ============================================================================
   Stitch layout integration — shared shell for all UI themes
   ============================================================================ */

body {
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    grid-template-rows: 5rem minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body.control-panel-is-collapsed .container {
    padding: 0;
    grid-template-columns: 5rem minmax(0, 1fr);
}

.top-app-bar {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 40;
    width: 100%;
    min-width: 0;
    height: 5rem;
    margin: 0;
    padding: 0 2rem;
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(12rem, auto) minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
}

.top-app-bar-title {
    white-space: nowrap;
    min-width: 0;
}

.top-view-toolbar {
    width: min(100%, 44rem);
    max-width: 44rem;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: 0;
}

.view-toolbar-search-wrap {
    width: min(100%, 28rem);
    max-width: 28rem;
    flex: 1 1 18rem;
}

.view-toolbar-search {
    width: 100%;
}

.view-toolbar-select {
    flex: 0 0 auto;
}

.top-app-logo {
    width: clamp(4.25rem, 6vw, 6.5rem);
    height: auto;
    object-fit: contain;
    justify-self: end;
}

.viewport {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 1.75rem 2rem 2.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.viewport.full {
    width: 100%;
}

.viewport-header {
    display: none;
}

.control-panel {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    inset: auto;
    width: 20rem;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    transform: none;
    z-index: 45;
    border-radius: 0;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.control-panel.collapsed {
    width: 5rem;
    transform: none;
    pointer-events: auto;
}

.control-panel-content,
.control-panel-scroll-inner {
    height: 100%;
    min-height: 0;
}

.control-panel-content {
    display: flex;
    flex-direction: column;
}

.control-panel-scroll-inner {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1.75rem;
}

body.control-panel-is-collapsed .control-panel-scroll-inner > *:not(.control-panel-header) {
    display: none;
}

body.control-panel-is-collapsed .panel-username,
body.control-panel-is-collapsed .save-status,
body.control-panel-is-collapsed .sidebar-section-label,
body.control-panel-is-collapsed .add-project-button,
body.control-panel-is-collapsed .sidebar-nav-list,
body.control-panel-is-collapsed .total-completion-section,
body.control-panel-is-collapsed .sidebar-collapsible {
    display: none !important;
}

body.control-panel-is-collapsed .panel-user-pill {
    justify-content: center;
    width: 100%;
    padding: 0;
}

.panel-edge-toggle {
    position: fixed;
    top: 2.5rem;
    left: 19rem;
    right: auto;
    transform: translate(-50%, -50%);
    z-index: 70;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.control-panel-is-collapsed .panel-edge-toggle {
    left: 5rem;
    right: auto;
    transform: translate(-50%, -50%);
}

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

.view-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--line, rgba(148, 163, 184, 0.28));
    background: var(--surface-2, rgba(255,255,255,0.08));
    color: var(--muted, currentColor);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.filter-chip:hover,
.filter-chip:focus-visible,
.filter-chip.is-active {
    border-color: var(--accent, currentColor);
    color: var(--accent, currentColor);
    background: var(--accent-glow, rgba(255,255,255,0.12));
}

.filter-chip:hover {
    transform: translateY(-1px);
}

.project-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    align-items: start;
    justify-content: start;
    gap: 1.25rem;
    margin: 0;
}

.stitch-project-card {
    min-height: 23rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    overflow: hidden;
}

.stitch-project-card .project-header {
    align-items: flex-start;
    gap: 0.8rem;
}

.stitch-project-card .project-title-container {
    min-width: 0;
    flex: 1 1 auto;
}

.stitch-project-card .project-title {
    font-size: 1.05rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.project-sync-text {
    margin-top: 0.35rem;
    color: var(--muted-2, var(--muted));
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 1.75rem;
}

.project-card-tag,
.project-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.55rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line, rgba(148, 163, 184, 0.28));
    background: var(--surface-2, rgba(255,255,255,0.08));
    color: var(--muted, currentColor);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.project-card-tag--empty,
.project-tag-empty {
    opacity: 0.68;
}

.project-card-progress {
    display: grid;
    gap: 0.55rem;
}

.project-card-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--muted, currentColor);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.project-preview-list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-preview-task,
.project-preview-empty {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 2.25rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    border: 1px solid var(--line-soft, rgba(148, 163, 184, 0.18));
    background: var(--inset, rgba(0,0,0,0.08));
    color: var(--text, currentColor);
    font-size: 0.85rem;
}

.project-preview-task span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-preview-task.is-completed {
    color: var(--muted, currentColor);
    text-decoration: line-through;
    opacity: 0.75;
}

.project-preview-check {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0.28rem;
    border: 1px solid var(--line, rgba(148, 163, 184, 0.28));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, currentColor);
    font-size: 0.7rem;
    font-weight: 800;
}

.project-preview-empty {
    display: block;
    color: var(--muted, currentColor);
}

.project-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem;
}

.project-card-access {
    color: var(--muted, currentColor);
    font-size: 0.78rem;
    line-height: 1.35;
}

.project-card-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.project-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--accent, currentColor);
    color: var(--accent, currentColor);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.project-card-status--completed {
    border-color: var(--success, var(--accent));
    color: var(--success, var(--accent));
}

.project-tag-controls {
    margin-top: 1rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--line-soft, rgba(148, 163, 184, 0.18));
    background: var(--inset, rgba(0,0,0,0.06));
}

.project-tag-controls-label {
    margin-bottom: 0.55rem;
    color: var(--muted, currentColor);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.project-tag-remove,
.project-tag-add {
    border: 1px solid var(--line, rgba(148, 163, 184, 0.28));
    background: var(--surface-2, rgba(255,255,255,0.08));
    color: var(--accent, currentColor);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.project-tag-remove {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    line-height: 1;
}

.project-tag-add {
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
}

.project-tag-inline-input {
    min-width: 8rem;
    height: 1.9rem;
    padding: 0 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--accent, currentColor);
    background: var(--inset, rgba(0,0,0,0.08));
    color: var(--text, currentColor);
    outline: none;
}

.sidebar-more-group {
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem 0 0;
}

.sidebar-more-label {
    color: var(--muted-2, var(--muted));
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-action-button--with-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.leaderboard-list {
    display: grid;
    gap: 0.55rem;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 1.65rem 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem;
    border-radius: 0.85rem;
    border: 1px solid var(--line-soft, rgba(148, 163, 184, 0.18));
    background: var(--inset, rgba(0,0,0,0.08));
}

.leaderboard-rank {
    color: var(--muted-2, var(--muted));
    font-size: 0.72rem;
    font-weight: 800;
}

.leaderboard-row-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2, rgba(255,255,255,0.08));
    color: var(--accent, currentColor);
    border: 1px solid var(--line, rgba(148, 163, 184, 0.28));
    font-weight: 800;
    text-transform: uppercase;
}

.leaderboard-row-main {
    min-width: 0;
}

.leaderboard-user {
    display: block;
    color: var(--heading, currentColor);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-meta {
    display: block;
    color: var(--muted, currentColor);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-row-score {
    color: var(--accent, currentColor);
    font-weight: 900;
    font-size: 0.95rem;
}

.archived-projects-modal-content {
    max-width: 760px;
    width: min(92vw, 760px);
}

.archived-projects-modal-list {
    display: grid;
    gap: 0.75rem;
}

.empty-state {
    min-height: 14rem;
}

@media (max-width: 980px) {
    body {
        overflow: auto;
    }

    .container,
    body.control-panel-is-collapsed .container {
        min-height: 100vh;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .control-panel,
    .control-panel.collapsed {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: auto;
        max-height: 42vh;
    }

    .top-app-bar {
        grid-column: 1;
        grid-row: 2;
        height: auto;
        min-height: 5rem;
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .top-view-toolbar {
        justify-self: stretch;
        width: 100%;
        max-width: none;
    }

    .top-app-logo {
        display: none;
    }

    .viewport {
        grid-column: 1;
        grid-row: 3;
        height: auto;
        min-height: 60vh;
        padding: 1rem;
    }

    .panel-edge-toggle {
        display: none;
    }
}

/* ==========================================================================
   Stitch card readability refinements
   ========================================================================== */
.project-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 23.5rem), 26.5rem));
    align-items: start;
}

.stitch-project-card {
    min-height: 27rem;
    gap: 1.05rem;
    padding: 1.45rem;
}

.project-card-tags:empty {
    display: none;
}

.project-card-description-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    color: var(--muted, currentColor);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.project-card-description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-card-description:empty::before {
    content: "";
}

.project-card-description-row strong {
    color: var(--accent, currentColor);
    font-weight: 900;
}

.project-preview-task,
.project-preview-empty {
    min-height: 2.75rem;
    padding: 0.72rem 0.8rem;
}

.project-preview-task span:last-child {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 1180px) {
    .project-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.5rem), 1fr));
    }
}

/* ============================================================================
   TASK PRIORITY + DRAG POLISH
   ============================================================================ */

.project-card[data-project-can-reorder="true"] {
    cursor: grab;
}

.project-card[data-project-can-reorder="true"]:active,
.project-card.dragging {
    cursor: grabbing;
}

.drag-handle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    touch-action: none;
}

.drag-handle .task-drag-handle {
    width: 18px !important;
    height: 18px !important;
}

.project-grid.is-reordering,
.project-grid.is-reordering .project-card,
.task-list .task-drag-handle {
    user-select: none;
}

.task-item.dragging {
    pointer-events: none;
    z-index: 10050;
}

.project-preview-task {
    gap: 7px;
}

.project-preview-priority {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: color-mix(in srgb, var(--muted) 72%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.project-preview-priority:hover {
    background: var(--surface);
    color: var(--accent);
}

.project-preview-priority--high,
.project-preview-priority .task-tag-flag--high {
    color: #ef4444;
}

.project-preview-priority--medium,
.project-preview-priority .task-tag-flag--medium {
    color: #f97316;
}

.project-preview-priority--low,
.project-preview-priority .task-tag-flag--low {
    color: #22c55e;
}

.project-preview-priority--none,
.project-preview-priority .task-tag-flag--none {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.project-preview-priority .task-tag-flag {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}


@media (max-width: 720px) {
    .account-progression-header,
    .account-progression-meta,
    .account-achievements-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-achievement-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .account-achievement-points {
        grid-column: 2;
    }

    .personal-progression-modal-content {
        width: min(92vw, 420px);
    }
}

/* Personal progression / leaderboard follow-up additions */
.panel-notification-button {
    width: 100%;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 10px;
    background: var(--surface);
    color: var(--heading);
    box-shadow: var(--inset-shadow);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.panel-notification-button:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.leaderboard-panel-card {
    overflow: hidden;
    padding: 8px;
}

.leaderboard-list {
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line-soft, rgba(148, 163, 184, 0.16));
}

.leaderboard-row {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border-bottom: 1px solid var(--line-soft, rgba(148, 163, 184, 0.14));
    grid-template-columns: 1.65rem 2rem minmax(0, 1fr) auto auto;
}

.leaderboard-row:last-child {
    border-bottom: 0;
}

.leaderboard-row:hover,
.leaderboard-row.is-current {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.leaderboard-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 5px;
    border: 1px solid var(--accent);
    border-radius: 5px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.leaderboard-competitive-section {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.leaderboard-competitive-title {
    color: var(--heading);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.leaderboard-competitive-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line-soft, rgba(148, 163, 184, 0.16));
}

.leaderboard-competitive-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: var(--accent);
    -webkit-mask: url('../assets/trophy.svg') center / contain no-repeat;
    mask: url('../assets/trophy.svg') center / contain no-repeat;
}

.leaderboard-competitive-icon.is-competitive-champion {
    -webkit-mask-image: url('../assets/champion.svg');
    mask-image: url('../assets/champion.svg');
}

.leaderboard-competitive-icon.is-competitive-trophy {
    -webkit-mask-image: url('../assets/trophy.svg');
    mask-image: url('../assets/trophy.svg');
}

.leaderboard-competitive-row strong,
.leaderboard-competitive-row small {
    display: block;
}

.leaderboard-competitive-row strong {
    color: var(--heading);
    font-size: 12px;
}

.leaderboard-competitive-row small,
.leaderboard-competitive-date,
.leaderboard-competitive-empty {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.notifications-modal .notification-card {
    cursor: default;
}


.leaderboard-user-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.leaderboard-competitive-date {
    margin-top: 3px;
    color: var(--accent);
    font-weight: 800;
}

.panel-notification-button {
    position: relative;
}

.notification-unread-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast, #050607);
    border: 1px solid var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.notification-unread-badge.hidden {
    display: none;
}

.panel-notification-button.has-unread {
    color: var(--accent);
    border-color: var(--accent);
}

.notifications-modal .notification-card--unread {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

/* ============================================================================
   ROUND 19 OVERRIDES
   - tighten leaderboard level badge width
   - keep top-bar sort select unhighlighted unless interacting
   - mobile project cards collapsed by default (title only)
   ============================================================================ */

.leaderboard-level-badge {
    justify-self: start;
    width: fit-content;
    min-width: 0;
    padding-inline: 6px;
}

.view-toolbar-select:not(.is-interacting):not(:focus):not(:focus-visible) {
    border-color: var(--line) !important;
    box-shadow: var(--card-shadow) !important;
}

.view-toolbar-select.is-interacting,
.view-toolbar-select:focus,
.view-toolbar-select:focus-visible {
    border-color: var(--accent) !important;
}

@media (max-width: 980px) {
    .project-grid .project-card {
        height: auto !important;
        min-height: 72px !important;
        max-height: none !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .project-grid .project-card .project-actions,
    .project-grid .project-card .project-sync-text,
    .project-grid .project-card .project-card-tags,
    .project-grid .project-card .project-card-progress,
    .project-grid .project-card .project-preview-list,
    .project-grid .project-card .project-card-notes-bar,
    .project-grid .project-card .project-card-footer,
    .project-grid .project-card .project-card-reorder-handle {
        display: none !important;
    }

    .project-grid .project-card .project-header,
    .project-grid .project-card .project-title-container,
    .project-grid .project-card .project-card-title-stack {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Level-up achievement, invite dropdown, and leaderboard modes */
.account-achievement-star.is-level-up,
.personal-progression-modal-star.is-level-up {
    -webkit-mask-image: url("../assets/fast.png");
    mask-image: url("../assets/fast.png");
}

.account-achievement-card.is-level-up-achievement.is-unlocked {
    border-color: color-mix(in srgb, var(--accent) 42%, rgba(120,120,130,0.24));
}

.invite-known-select {
    width: 100%;
    padding: 8px 40px 8px 12px;
    border-radius: 9px;
    border: 1px solid var(--line-soft, rgba(120,120,130,0.22));
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.invite-known-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.leaderboard-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 8px;
}

.leaderboard-mode-tab {
    min-height: 30px;
    border: 1px solid rgba(120,120,130,0.22);
    border-radius: 10px;
    background: var(--panel);
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.leaderboard-mode-tab:hover,
.leaderboard-mode-tab:focus-visible,
.leaderboard-mode-tab.is-active {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.leaderboard-card-caption {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.leaderboard-list.is-loading {
    align-items: stretch;
}

.leaderboard-list.is-loading .side-panel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
}


/* ============================================================================
   ROUND 18 OVERRIDES
   - center the light/dark mode toggle knob in its track
   - keep leaderboard loading copy dark in every color mode
   ============================================================================ */

.color-mode-toggle .color-mode-toggle-thumb {
    top: 50% !important;
    bottom: auto !important;
    transform: translate3d(0, -50%, 0) !important;
}

.color-mode-toggle.is-dark .color-mode-toggle-thumb {
    transform: translate3d(50px, -50%, 0) !important;
}

.leaderboard-list.is-loading .side-panel-empty,
.sidebar-rail-leaderboard-list.is-loading .side-panel-empty {
    color: #111827 !important;
}


/* Targeted patch: personal achievement SVG icon mapping and task-entry caret visibility. */
.account-achievement-star.is-achievement-first-strike,
.personal-progression-modal-star.is-achievement-first-strike {
    -webkit-mask-image: url("../assets/first_strike.svg");
    mask-image: url("../assets/first_strike.svg");
}

.account-achievement-star.is-achievement-task-initiated,
.personal-progression-modal-star.is-achievement-task-initiated {
    -webkit-mask-image: url("../assets/task_initiated.svg");
    mask-image: url("../assets/task_initiated.svg");
}

.account-achievement-star.is-achievement-mission-complete,
.personal-progression-modal-star.is-achievement-mission-complete {
    -webkit-mask-image: url("../assets/mission_complete.svg");
    mask-image: url("../assets/mission_complete.svg");
}

.account-achievement-star.is-achievement-clean-sweep,
.personal-progression-modal-star.is-achievement-clean-sweep {
    -webkit-mask-image: url("../assets/clean_sweep.svg");
    mask-image: url("../assets/clean_sweep.svg");
}

.account-achievement-star.is-achievement-deadline-operator,
.personal-progression-modal-star.is-achievement-deadline-operator {
    -webkit-mask-image: url("../assets/deadline_operator.svg");
    mask-image: url("../assets/deadline_operator.svg");
}

.account-achievement-star.is-achievement-priority-locked,
.personal-progression-modal-star.is-achievement-priority-locked {
    -webkit-mask-image: url("../assets/priority_locked.svg");
    mask-image: url("../assets/priority_locked.svg");
}

.account-achievement-star.is-achievement-tag-operator,
.personal-progression-modal-star.is-achievement-tag-operator {
    -webkit-mask-image: url("../assets/tag_operator.svg");
    mask-image: url("../assets/tag_operator.svg");
}

.account-achievement-star.is-achievement-intel-operator,
.personal-progression-modal-star.is-achievement-intel-operator {
    -webkit-mask-image: url("../assets/intel_operator.svg");
    mask-image: url("../assets/intel_operator.svg");
}

.account-achievement-star.is-achievement-archiver,
.personal-progression-modal-star.is-achievement-archiver {
    -webkit-mask-image: url("../assets/archiver.svg");
    mask-image: url("../assets/archiver.svg");
}

.account-achievement-star.is-achievement-no-misses,
.personal-progression-modal-star.is-achievement-no-misses {
    -webkit-mask-image: url("../assets/no_misses.svg");
    mask-image: url("../assets/no_misses.svg");
}

.account-achievement-star.is-achievement-sprinter,
.personal-progression-modal-star.is-achievement-sprinter {
    -webkit-mask-image: url("../assets/sprinter.svg");
    mask-image: url("../assets/sprinter.svg");
}

.account-achievement-star.is-achievement-rapid-execution,
.personal-progression-modal-star.is-achievement-rapid-execution {
    -webkit-mask-image: url("../assets/rapid_execution.svg");
    mask-image: url("../assets/rapid_execution.svg");
}

.account-achievement-star.is-achievement-sprint-mode,
.personal-progression-modal-star.is-achievement-sprint-mode {
    -webkit-mask-image: url("../assets/sprint_mode.svg");
    mask-image: url("../assets/sprint_mode.svg");
}

.account-achievement-star.is-achievement-deadline-crusher,
.personal-progression-modal-star.is-achievement-deadline-crusher {
    -webkit-mask-image: url("../assets/deadline_crusher.svg");
    mask-image: url("../assets/deadline_crusher.svg");
}

.account-achievement-star.is-achievement-unbroken-chain,
.personal-progression-modal-star.is-achievement-unbroken-chain {
    -webkit-mask-image: url("../assets/chain.svg");
    mask-image: url("../assets/chain.svg");
}

.account-achievement-star.is-achievement-locked-in,
.personal-progression-modal-star.is-achievement-locked-in {
    -webkit-mask-image: url("../assets/locked.svg");
    mask-image: url("../assets/locked.svg");
}

.account-achievement-star.is-achievement-mission-streak,
.personal-progression-modal-star.is-achievement-mission-streak {
    -webkit-mask-image: url("../assets/fire.svg");
    mask-image: url("../assets/fire.svg");
}

.account-achievement-star.is-achievement-high-tempo,
.personal-progression-modal-star.is-achievement-high-tempo {
    -webkit-mask-image: url("../assets/tempo.svg");
    mask-image: url("../assets/tempo.svg");
}

.account-achievement-star.is-achievement-full-send,
.personal-progression-modal-star.is-achievement-full-send {
    -webkit-mask-image: url("../assets/full_send.svg");
    mask-image: url("../assets/full_send.svg");
}

.account-achievement-star.is-achievement-project-closer,
.personal-progression-modal-star.is-achievement-project-closer {
    -webkit-mask-image: url("../assets/finish-flag.svg");
    mask-image: url("../assets/finish-flag.svg");
}

.account-achievement-star.is-achievement-daily-operator,
.personal-progression-modal-star.is-achievement-daily-operator {
    -webkit-mask-image: url("../assets/24.svg");
    mask-image: url("../assets/24.svg");
}

.account-achievement-star.is-achievement-command-output,
.personal-progression-modal-star.is-achievement-command-output {
    -webkit-mask-image: url("../assets/command_output.svg");
    mask-image: url("../assets/command_output.svg");
}

.account-achievement-star.is-achievement-productivity-spike,
.personal-progression-modal-star.is-achievement-productivity-spike {
    -webkit-mask-image: url("../assets/productivity_spike.svg");
    mask-image: url("../assets/productivity_spike.svg");
}

.account-achievement-star.is-achievement-zero-overdue,
.personal-progression-modal-star.is-achievement-zero-overdue {
    -webkit-mask-image: url("../assets/zero_overdue.svg");
    mask-image: url("../assets/zero_overdue.svg");
}

.account-achievement-star.is-achievement-high-output,
.personal-progression-modal-star.is-achievement-high-output {
    -webkit-mask-image: url("../assets/high_output.svg");
    mask-image: url("../assets/high_output.svg");
}

.account-achievement-star.is-achievement-elite-output,
.personal-progression-modal-star.is-achievement-elite-output {
    -webkit-mask-image: url("../assets/elite_output.svg");
    mask-image: url("../assets/elite_output.svg");
}

.account-achievement-star.is-achievement-objective-complete,
.personal-progression-modal-star.is-achievement-objective-complete {
    -webkit-mask-image: url("../assets/objective_complete.svg");
    mask-image: url("../assets/objective_complete.svg");
}

.account-achievement-star.is-achievement-prioritized,
.personal-progression-modal-star.is-achievement-prioritized {
    -webkit-mask-image: url("../assets/priority.svg");
    mask-image: url("../assets/priority.svg");
}

.account-achievement-star.is-achievement-mission-critical,
.personal-progression-modal-star.is-achievement-mission-critical {
    -webkit-mask-image: url("../assets/mission_critical.svg");
    mask-image: url("../assets/mission_critical.svg");
}

.account-achievement-star.is-achievement-encore,
.personal-progression-modal-star.is-achievement-encore {
    -webkit-mask-image: url("../assets/encore.svg");
    mask-image: url("../assets/encore.svg");
}

#projectModal .modal-task-entry-editor.rich-text-editor,
#projectModal .modal-task-entry-editor.rich-text-editor * {
    caret-color: var(--heading, currentColor) !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}