/* Typography Hierarchy - Consistent heading styles */
        h1, .h1 {
            font-size: var(--font-size-2xl);
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.3px;
        }

        h2, .h2 {
            font-size: var(--font-size-xl);
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: -0.2px;
        }

        h3, .h3 {
            font-size: var(--font-size-lg);
            font-weight: 600;
            line-height: 1.3;
        }

        h4, .h4 {
            font-size: var(--font-size-md);
            font-weight: 600;
            line-height: 1.4;
        }

        h5, .h5 {
            font-size: var(--font-size-base);
            font-weight: 600;
            line-height: 1.4;
        }

        h6, .h6 {
            font-size: var(--font-size-sm);
            font-weight: 600;
            line-height: 1.4;
        }

        /* Global Focus States - Subtle border indicator */
        input:focus-visible,
        textarea:focus-visible,
        [contenteditable]:focus-visible {
            outline: none;
            border-color: rgba(74, 144, 217, 0.6) !important;
            border-width: 1px;
            box-shadow: none;
            transition: border-color var(--transition-fast), border-width var(--transition-fast);
        }

        /* For non-keyboard focus (mouse clicks), same subtle indicator */
        input:focus:not(:focus-visible),
        textarea:focus:not(:focus-visible),
        [contenteditable]:focus:not(:focus-visible) {
            outline: none;
            border-color: rgba(74, 144, 217, 0.6) !important;
            border-width: 1px;
            box-shadow: none;
        }

        input,
        textarea,
        [contenteditable] {
            transition: border-color var(--transition-fast);
            caret-color: var(--text-primary) !important;
            caret-shape: bar;
        }

        /* Enhanced caret visibility for note editors */
        .event-note-editor,
        .note-editor,
        [contenteditable="true"] {
            caret-color: var(--text-primary) !important;
        }

        /* BUG-036: bidi handling for RTL languages (Arabic, Hebrew, etc.).
           `unicode-bidi: plaintext` makes each block-level element determine
           its direction from its first strong-directional character — same
           effect as the HTML `dir="auto"` attribute, but applied at the CSS
           layer so newly-created blocks (paragraph splits, slash-menu inserts,
           paste handler outputs) inherit the behaviour automatically without
           every code path needing to remember to set the attribute.

           Applied to the contenteditable container + its block descendants
           (p, h1-h6, li, blockquote, pre). LTR text is unaffected — first
           strong char determines per-block direction; Latin → LTR, Arabic /
           Hebrew → RTL, mixed paragraphs honour the predominant script. */
        [contenteditable] {
            unicode-bidi: plaintext;
        }
        [contenteditable] p,
        [contenteditable] h1,
        [contenteditable] h2,
        [contenteditable] h3,
        [contenteditable] h4,
        [contenteditable] h5,
        [contenteditable] h6,
        [contenteditable] li,
        [contenteditable] blockquote,
        [contenteditable] pre,
        [contenteditable] div {
            unicode-bidi: plaintext;
        }

        /* Animation Keyframes */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

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

        @keyframes modalBounceIn {
            0% {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 0;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.02);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        @keyframes taskMoveIn {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes taskMoveOut {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.9);
            }
        }

        @keyframes calendarEventLand {
            0% {
                opacity: 0.6;
                transform: scale(0.97);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Task Move Animations */
        .task-just-moved {
            animation: taskMoveIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .timeline-event.task-just-moved,
        .backlog-task-item.task-just-moved {
            animation: taskMoveIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* Calendar events settle into place — subtler than task arrival */
        .calendar-event.task-just-moved,
        .week-timeline-event.task-just-moved {
            animation: calendarEventLand var(--duration-slow) var(--ease-in-out);
        }

        @media (prefers-reduced-motion: reduce) {
            .task-just-moved,
            .timeline-event.task-just-moved,
            .backlog-task-item.task-just-moved,
            .calendar-event.task-just-moved,
            .week-timeline-event.task-just-moved {
                animation: none;
            }
        }

        /* Button Loading States */

        .btn.loading,
        button.loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }

        .btn.loading::after,
        button.loading::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: var(--radius-circle);
            animation: spin 0.6s linear infinite;
            color: var(--accent-blue);
        }

        /* App Container */
        .app {
            display: none; /* Hidden by default, shown after auth check */
            height: 100vh;
            position: relative;
        }

        /* Sidebar */
        .sidebar {
            width: 68px;
            background: var(--bg-main);
            padding: var(--space-4) 0 var(--space-4);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-1);
            border-right: 1px solid var(--border-medium);
            position: relative;
            z-index: var(--z-layer-raised);
        }

        .sidebar-logo {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }

        .sidebar-logo svg {
            width: 38px;
            height: 19px;
        }

        .sidebar-icon {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .sidebar-icon:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .sidebar-icon.active {
            background: var(--bg-card);
            color: var(--text-primary);
            box-shadow: var(--shadow-sm);
        }

        .sidebar-icon svg {
            width: 22px;
            height: 22px;
            stroke-width: 1.5;
        }

        /* Sidebar Inbox Count Badge */
        .sidebar-icon {
            position: relative;
        }

        .sidebar-inbox-badge {
            position: absolute;
            top: 4px;
            right: 2px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            font-size: var(--font-size-2xs);
            font-weight: 600;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
            color: white;
            background: var(--accent-fill);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            letter-spacing: -0.2px;
            pointer-events: none;
            box-shadow: 0 0 0 2px var(--bg-main);
            transform-origin: center;
            animation: badgeAppear var(--duration-normal) var(--ease-in-out);
            -webkit-app-region: no-drag;
        }

        @keyframes badgeAppear {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            60% {
                transform: scale(1.15);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes badgePulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .sidebar-inbox-badge.badge-updated {
            animation: badgePulse var(--duration-slow) var(--ease-in-out);
        }

        /* Sidebar Inbox Notification Dot (unread notifications) */
        .sidebar-notification-dot {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 8px;
            height: 8px;
            background: var(--accent-blue);
            border-radius: var(--radius-circle);
            pointer-events: none;
            animation: dotAppear var(--duration-slow) var(--ease-in-out);
        }

        @keyframes dotAppear {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        .sidebar-spacer {
            flex: 1;
        }

        /* Main Content */
        .main-content {
            flex: 1;
            padding: 24px 32px;
            overflow-y: auto;
            position: relative;
        }

        /* Remove padding when Upcoming view is active */

        /* Inbox — panel fills to viewport edge, column handles its own padding */
        .main-content.inbox-active {
            overflow: hidden;
            padding-left: 0;
            padding-right: 0;
        }

        /* Notes view needs internal scrolling, not outer scrolling */
        .main-content.notes-active {
            overflow: hidden;
            height: calc(100vh - 24px); /* viewport minus top padding */
            padding-left: 0;
            padding-right: 0;
        }

        .main-content.notes-active .notes-page {
            height: 100%;
            max-height: 100%;
        }

        .main-content.notes-active .notes-page-content {
            height: calc(100% - 60px); /* minus header height */
            max-height: calc(100% - 60px);
        }

        .main-content.notes-active .notes-main-content {
            height: 100%;
            max-height: 100%;
            overflow-y: auto !important;
        }

        /* Tasks — only the main content scrolls, header + left panel stay fixed */
        .main-content.tasks-active {
            overflow: hidden;
            height: calc(100vh - 24px);
            padding-left: 0;
            padding-right: 0;
        }

        .main-content.tasks-active .tasks-page-content {
            height: calc(100% - 60px);
            max-height: calc(100% - 60px);
        }

        .main-content.tasks-active .tasks-main-content {
            height: 100%;
            max-height: 100%;
            overflow-y: auto !important;
        }

        /* Projects — reduce padding so panels fill the width */
        .main-content.projects-active {
            padding-left: 0;
            padding-right: 0;
        }

        /* Planner — reduce padding so backlog sits closer to nav */
        .main-content.planner-active {
            padding-left: 0;
            padding-right: 0;
        }

        /* Archive — only the content scrolls, header stays fixed */
        .main-content.archive-active {
            overflow: hidden;
            height: calc(100vh - 24px);
        }

        .main-content.archive-active .archive-content-wrapper {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        /* ============================================================================ */
        /* RESPONSIVE LAYOUT CENTERING (1440px+ screens)                                */