/* styles-calendar.css — extracted from styles.css (Calendar view styles) */

      /* ── Full Calendar View ─────────────────────────────────── */
      #calendar-view {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal-bg);
        background: var(--bg-solid);
        flex-direction: column;
        overflow: hidden;
        -webkit-app-region: no-drag;
      }
      #calendar-view.active {
        display: flex;
        animation: calSlideIn 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      /* calSlideIn defined in Premium Animation System block above */

      .cal-header {
        position: relative;
        z-index: var(--z-float);
      }
      .cal-title {
        margin-right: 8px;
      }
      .cal-nav-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-dim);
        border-radius: var(--radius-base);
        padding: 0 16px;
        min-width: 40px;
        height: 34px;
        cursor: pointer;
        font-size: var(--fs-lg);
        line-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        pointer-events: all;
        position: relative;
        z-index: var(--z-above);
        transition: all 0.15s;
        flex-shrink: 0;
        -webkit-app-region: no-drag;
      }
      .cal-nav-btn:hover {
        background: rgba(var(--primary-rgb), 0.25);
        border-color: var(--primary);
        color: var(--text-main);
        transform: scale(1.08);
      }
      .cal-nav-btn:active {
        transform: scale(0.95);
        background: rgba(var(--primary-rgb), 0.4);
      }
      .cal-period {
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--text-dim);
        min-width: 180px;
        text-align: center;
      }
      .cal-view-tabs {
        display: flex;
        gap: 4px;
        margin-left: auto;
        background: rgba(255, 255, 255, 0.04);
        border-radius: var(--radius-md);
        padding: 4px;
        border: 1px solid rgba(255, 255, 255, 0.07);
      }
      .cal-tab {
        padding: 6px 16px;
        border-radius: var(--radius-base);
        border: none;
        background: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: var(--fs-base);
        font-family: inherit;
        font-weight: 500;
        transition: all 0.2s;
      }
      .cal-tab.active {
        background: var(--primary);
        color: white;
        box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.4);
      }
      .cal-tab:hover:not(.active) {
        color: var(--text-main);
        background: rgba(255, 255, 255, 0.08);
      }

      .cal-today-btn {
        padding: 6px 14px;
        border-radius: var(--radius-base);
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: var(--fs-base);
        font-family: inherit;
        transition: all 0.2s;
        -webkit-app-region: no-drag;
        pointer-events: all;
      }
      .cal-today-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-main);
      }

      .cal-close-btn {
        margin-left: 8px;
        background: rgba(var(--color-danger-rgb), 0.1);
        border: 1px solid rgba(var(--color-danger-rgb), 0.2);
        color: var(--color-danger);
        border-radius: var(--radius-base);
        padding: 7px 14px;
        cursor: pointer;
        font-size: var(--fs-base);
        font-family: inherit;
        transition: all 0.2s;
        -webkit-app-region: no-drag;
        pointer-events: all;
        user-select: none;
        position: relative;
        z-index: var(--z-dropdown);
      }
      .cal-close-btn:hover {
        background: rgba(var(--color-danger-rgb), 0.35);
        border-color: rgba(var(--color-danger-rgb), 0.5);
        color: var(--text-main);
        transform: scale(1.04);
      }
      .cal-close-btn:active {
        transform: scale(0.96);
      }

      .cal-body {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: var(--z-base);
      }

      /* ── Month View ── */
      #cal-month-view {
        display: none;
        flex: 1;
        flex-direction: column;
        padding: 0;
      }
      #cal-month-view.active {
        display: flex;
      }

      .cal-month-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        flex: 1;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        overflow-y: auto;
      }
      .cal-day-header {
        padding: 10px 0;
        text-align: center;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        background: rgba(255, 255, 255, 0.02);
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .cal-month-cell {
        min-height: 110px;
        padding: 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        cursor: pointer;
        transition: background 0.15s;
        position: relative;
        overflow: hidden;
      }
      .cal-month-cell:hover {
        background: rgba(255, 255, 255, 0.03);
      }
      .cal-month-cell.today {
        background: rgba(var(--primary-rgb), 0.08);
      }
      .cal-month-cell.other-month {
        opacity: 0.3;
      }
      .cal-month-cell.drop-active {
        background: rgba(var(--primary-rgb), 0.15);
        outline: 2px dashed rgba(var(--primary-rgb), 0.6);
      }

      .cal-day-num {
        font-size: var(--fs-base);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        margin-bottom: 4px;
      }
      .cal-month-cell.today .cal-day-num {
        background: var(--primary);
        color: white;
      }

      .cal-event {
        font-size: var(--fs-sm);
        padding: 2px 6px 2px 8px;
        border-radius: var(--radius-sm);
        margin-bottom: 2px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition:
          filter 0.15s,
          transform 0.1s;
        font-weight: 500;
        border-left: 3px solid transparent;
      }
      .cal-event:hover {
        filter: brightness(1.25);
        transform: translateX(1px);
      }
      .cal-event.type-note {
        background: rgba(var(--primary-rgb), 0.22);
        color: var(--primary-light);
        border-left-color: var(--primary);
      }
      .cal-event.type-reminder {
        background: rgba(245, 158, 11, 0.2);
        color: var(--cal-color-reminder, #fde68a);
        border-left-color: var(--color-warning);
      }
      .cal-event.type-planner {
        background: rgba(34, 197, 94, 0.18);
        color: var(--cal-color-planner, #86efac);
        border-left-color: var(--color-success);
      }
      .cal-event.type-kanban {
        background: rgba(236, 72, 153, 0.2);
        color: var(--cal-color-kanban, #f9a8d4);
        border-left-color: var(--cal-color-kanban-border, #ec4899);
      }

      .cal-more {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        padding: 1px 4px;
        cursor: pointer;
      }
      .cal-more:hover {
        color: var(--primary);
      }

      /* ── Week View ── */
      #cal-week-view {
        display: none;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
      }
      #cal-week-view.active {
        display: flex;
      }

      .week-header-row {
        display: grid;
        grid-template-columns: 60px repeat(7, 1fr);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        flex-shrink: 0;
      }
      .week-time-gutter {
        /* spacer */
      }
      .week-day-col-hdr {
        padding: 10px 8px;
        text-align: center;
        font-size: var(--fs-base);
        border-left: 1px solid rgba(255, 255, 255, 0.05);
      }
      .week-day-col-hdr .wdh-name {
        color: rgba(255, 255, 255, 0.4);
        font-size: var(--fs-sm);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .week-day-col-hdr .wdh-num {
        font-size: var(--fs-xl);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.2;
      }
      .week-day-col-hdr.today .wdh-num {
        background: var(--primary);
        color: white;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
      }

      .week-scroll {
        flex: 1;
        overflow-y: auto;
      }
      .week-grid {
        display: grid;
        grid-template-columns: 60px repeat(7, 1fr);
        min-height: 1440px; /* 24h × 60px */
        position: relative;
      }
      .week-time-col {
        display: flex;
        flex-direction: column;
      }
      .week-hour-label {
        height: 60px;
        font-size: var(--fs-sm);
        color: rgba(255, 255, 255, 0.5);
        padding: 2px 8px 0 0;
        text-align: right;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      }
      .week-day-lane {
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        position: relative;
        cursor: pointer;
      }
      .week-hour-line {
        position: absolute;
        left: 0;
        right: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        pointer-events: none;
      }
      .week-half-line {
        position: absolute;
        left: 0;
        right: 0;
        border-top: 1px dashed rgba(255, 255, 255, 0.02);
        pointer-events: none;
      }
      .week-event-block {
        position: absolute;
        left: 3px;
        right: 3px;
        border-radius: var(--radius-sm);
        padding: 3px 6px;
        font-size: var(--fs-sm);
        font-weight: 500;
        cursor: grab;
        overflow: hidden;
        transition:
          filter 0.15s,
          transform 0.15s;
        z-index: var(--z-above);
        line-height: 1.3;
      }
      .week-event-block:hover {
        filter: brightness(1.25);
        transform: scaleX(1.02);
      }
      .week-event-block.type-note {
        background: linear-gradient(
          135deg,
          rgba(var(--primary-rgb), 0.55),
          rgba(79, 70, 229, 0.4)
        );
        color: var(--primary-light);
        border-left: 3px solid var(--primary);
      }
      .week-event-block.type-reminder {
        background: linear-gradient(
          135deg,
          rgba(245, 158, 11, 0.5),
          rgba(217, 119, 6, 0.35)
        );
        color: #fef3c7;
        border-left: 3px solid var(--color-warning);
      }
      .week-event-block.type-planner {
        background: linear-gradient(
          135deg,
          rgba(34, 197, 94, 0.45),
          rgba(22, 163, 74, 0.3)
        );
        color: #dcfce7;
        border-left: 3px solid var(--color-success);
      }
      .week-event-block.type-kanban {
        background: linear-gradient(
          135deg,
          rgba(236, 72, 153, 0.45),
          rgba(190, 24, 93, 0.3)
        );
        color: #fce7f3;
        border-left: 3px solid var(--cal-color-kanban-border, #ec4899);
      }

      /* Conflict indicator — pulsing red outline */
      .cal-conflict {
        border-left: 3px solid var(--color-danger) !important;
        box-shadow: 0 0 0 1px rgba(var(--color-danger-rgb),0.35), inset 0 0 0 1px rgba(var(--color-danger-rgb),0.15);
        position: relative;
        animation: calConflictPulse 2s ease-in-out infinite;
      }
      @keyframes calConflictPulse {
        0%, 100% { box-shadow: 0 0 0 1px rgba(var(--color-danger-rgb),0.35), inset 0 0 0 1px rgba(var(--color-danger-rgb),0.15); }
        50%       { box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb),0.5),  inset 0 0 0 1px rgba(var(--color-danger-rgb),0.25); }
      }
      .cal-conflict::after {
        content: "⚠";
        position: absolute;
        top: 3px;
        right: 5px;
        font-size: var(--fs-xs);
        color: var(--color-danger);
        line-height: 1;
      }
      /* Side-by-side: conflicting events get half-width */
      .week-event-block.cal-conflict,
      .day-event-block.cal-conflict {
        width: 50% !important;
      }
      .week-event-block.cal-conflict.cal-conflict-right,
      .day-event-block.cal-conflict.cal-conflict-right {
        left: 50% !important;
      }
      /* Month-view conflict dot */

      /* Current time line */
      .week-now-line {
        position: absolute;
        left: 0;
        right: 0;
        border-top: 2px solid var(--color-danger);
        z-index: var(--z-float);
        pointer-events: none;
      }
      .week-now-line::before {
        content: "";
        position: absolute;
        left: -4px;
        top: -4px;
        width: 8px;
        height: 8px;
        border-radius: var(--radius-full);
        background: var(--color-danger);
      }

      /* ── Day View ── */
      #cal-day-view {
        display: none;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
      }
      #cal-day-view.active {
        display: flex;
      }

      .day-view-header {
        padding: 16px 24px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        flex-shrink: 0;
      }
      .day-view-title {
        font-size: var(--fs-xl);
        font-weight: 700;
        color: var(--text-dim);
      }
      .day-view-sub {
        font-size: var(--fs-base);
        color: var(--text-dim);
        margin-top: 2px;
      }

      .day-scroll {
        flex: 1;
        overflow-y: auto;
      }
      .day-grid {
        display: grid;
        grid-template-columns: 60px 1fr;
        min-height: 1440px;
        position: relative;
      }
      .day-time-col {
        display: flex;
        flex-direction: column;
      }
      .day-lane {
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        position: relative;
        cursor: pointer;
      }
      .day-event-block {
        position: absolute;
        left: 8px;
        right: 8px;
        border-radius: var(--radius-md);
        padding: 6px 10px;
        font-size: var(--fs-base);
        font-weight: 500;
        cursor: grab;
        transition:
          filter 0.15s,
          transform 0.15s;
        z-index: var(--z-above);
        line-height: 1.4;
      }
      .day-event-block:hover {
        filter: brightness(1.2);
        transform: scaleX(1.01);
      }
      .day-event-block.type-note {
        background: linear-gradient(
          135deg,
          rgba(var(--primary-rgb), 0.45),
          rgba(79, 70, 229, 0.3)
        );
        color: var(--primary-light);
        border-left: 4px solid var(--primary);
      }
      .day-event-block.type-reminder {
        background: linear-gradient(
          135deg,
          rgba(245, 158, 11, 0.45),
          rgba(217, 119, 6, 0.3)
        );
        color: #fef3c7;
        border-left: 4px solid var(--color-warning);
      }
      .day-event-block.type-planner {
        background: linear-gradient(
          135deg,
          rgba(34, 197, 94, 0.4),
          rgba(22, 163, 74, 0.25)
        );
        color: #dcfce7;
        border-left: 4px solid var(--color-success);
      }
      .day-event-block.type-kanban {
        background: linear-gradient(
          135deg,
          rgba(236, 72, 153, 0.4),
          rgba(190, 24, 93, 0.25)
        );
        color: #fce7f3;
        border-left: 4px solid var(--cal-color-kanban-border, #ec4899);
      }

      /* Add event button in cells */
      .cal-add-event-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 24px;
        height: 24px;
        border-radius: var(--radius-full);
        border: 1px solid rgba(var(--primary-rgb), 0.4);
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary);
        font-size: var(--fs-md);
        line-height: 22px;
        text-align: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s;
      }
      .cal-add-event-btn::before {
        content: "";
        position: absolute;
        inset: -10px;
      }
      .cal-month-cell:hover .cal-add-event-btn {
        opacity: 1;
      }

      /* Event Modal */
      #cal-event-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        -webkit-app-region: no-drag;
        animation: gn-overlay-in var(--anim-open-speed) cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      #cal-event-modal.active {
        display: flex;
      }
      .cal-event-modal-box {
        background: linear-gradient(135deg, var(--card-bg-solid), var(--bg-solid));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-lg);
        padding: 28px 32px;
        width: min(480px, 92vw);
        box-shadow:
          0 32px 80px rgba(0, 0, 0, 0.6),
          0 0 40px rgba(var(--primary-rgb), 0.1);
        animation: gn-modal-in 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      /* scaleIn — removed, now using gn-modal-in engine keyframe */
      .cal-event-modal-title {
        font-size: var(--fs-lg);
        font-weight: 700;
        color: var(--text-dim);
        margin-bottom: 20px;
      }
      .cal-event-field {
        margin-bottom: 14px;
      }
      .cal-event-field label {
        display: block;
        font-size: var(--fs-base);
        color: var(--text-dim);
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .cal-event-field input,
      .cal-event-field select,
      .cal-event-field textarea {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        padding: 9px 12px;
        color: var(--text-dim);
        font-size: var(--fs-md);
        font-family: inherit;
        outline: none;
        transition: border-color 0.2s;
      }
      .cal-event-field input:focus,
      .cal-event-field select:focus {
        border-color: var(--primary);
      }
      .cal-event-field select option {
        background: var(--card-bg-solid);
      }
      .cal-event-row {
        display: flex;
        gap: 12px;
      }
      .cal-event-row .cal-event-field {
        flex: 1;
      }
      .cal-event-modal-footer {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        justify-content: flex-end;
      }
      .cal-save-btn {
        padding: 10px 22px;
        border-radius: var(--radius-md);
        border: none;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        font-size: var(--fs-md);
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s;
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35);
      }
      .cal-save-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.5);
      }
      .cal-cancel-btn {
        padding: 10px 20px;
        border-radius: var(--radius-md);
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: none;
        color: var(--text-dim);
        font-size: var(--fs-md);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s;
      }
      .cal-cancel-btn:hover {
        background: rgba(255, 255, 255, 0.07);
        color: var(--text-main);
      }
      .cal-delete-btn {
        padding: 10px 16px;
        border-radius: var(--radius-md);
        border: 1px solid rgba(var(--color-danger-rgb), 0.25);
        background: none;
        color: var(--color-danger);
        font-size: var(--fs-md);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s;
        margin-right: auto;
      }
      .cal-delete-btn:hover {
        background: rgba(var(--color-danger-rgb), 0.15);
      }

      /* Day events list in Day view */
      /* REMOVED: .day-agenda-item block (unused — not in HTML/JS) */

      /* Calendar btn in toolbar */
      #tool-calendar {
        border-color: rgba(var(--primary-rgb), 0.4) !important;
        color: rgba(var(--primary-rgb), 0.9) !important;
      }

      /* ── Light-mode: Calendar ─────────────────────────── */
      body.light-mode #calendar-view {
        background: #f5f7fb !important;
      }
      body.light-mode .cal-title,
      body.light-mode .cal-period {
        color: #0f172a !important;
      }
      body.light-mode .cal-nav-btn {
        background: rgba(0,0,0,0.05) !important;
        border-color: rgba(0,0,0,0.12) !important;
        color: #1e293b !important;
      }
      body.light-mode .cal-nav-btn:hover {
        background: rgba(var(--primary-rgb),0.15) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .cal-view-tabs {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .cal-tab {
        color: #64748b !important;
      }
      body.light-mode .cal-tab:hover:not(.active) {
        color: #1e293b !important;
        background: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .cal-tab.active {
        color: white !important;
      }
      body.light-mode .cal-today-btn {
        border-color: rgba(0,0,0,0.15) !important;
        color: #334155 !important;
      }
      body.light-mode .cal-today-btn:hover {
        background: rgba(0,0,0,0.06) !important;
        color: #0f172a !important;
      }
      body.light-mode .cal-close-btn {
        background: rgba(var(--color-danger-rgb),0.08) !important;
        border-color: rgba(var(--color-danger-rgb),0.2) !important;
      }
      body.light-mode .cal-month-grid {
        border-color: rgba(0,0,0,0.15) !important;
      }
      body.light-mode .cal-day-header {
        color: #64748b !important;
        background: rgba(0,0,0,0.03) !important;
        border-color: rgba(0,0,0,0.15) !important;
      }
      body.light-mode .cal-month-cell {
        border-color: rgba(0,0,0,0.12) !important;
      }
      body.light-mode .cal-month-cell:hover {
        background: rgba(var(--primary-rgb),0.06) !important;
      }
      body.light-mode .cal-month-cell.today {
        background: rgba(var(--primary-rgb),0.08) !important;
      }
      body.light-mode .cal-day-num {
        color: #334155 !important;
      }
      body.light-mode .cal-event.type-note {
        background: rgba(var(--primary-rgb),0.12) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .cal-event.type-reminder {
        background: rgba(245,158,11,0.12) !important;
        color: #b45309 !important;
      }
      body.light-mode .cal-event.type-planner {
        background: rgba(34,197,94,0.12) !important;
        color: #15803d !important;
      }
      body.light-mode .cal-event.type-kanban {
        background: rgba(236,72,153,0.12) !important;
        color: #be185d !important;
      }
      body.light-mode .week-header-row {
        border-bottom-color: rgba(0,0,0,0.15) !important;
      }
      body.light-mode .week-day-col-hdr .wdh-name {
        color: #64748b !important;
      }
      body.light-mode .week-day-col-hdr .wdh-num {
        color: #1e293b !important;
      }
      body.light-mode .week-hour-label {
        color: var(--text-muted) !important;
        border-bottom-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .week-day-lane,
      body.light-mode .week-day-col-hdr {
        border-left-color: rgba(0,0,0,0.12) !important;
      }
      body.light-mode .week-hour-line {
        border-top-color: rgba(0,0,0,0.12) !important;
      }
      body.light-mode .week-half-line {
        border-top-color: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .week-event-block.type-note {
        background: rgba(var(--primary-rgb),0.18) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .week-event-block.type-reminder {
        background: rgba(245,158,11,0.18) !important;
        color: #92400e !important;
      }
      body.light-mode .week-event-block.type-planner {
        background: rgba(34,197,94,0.15) !important;
        color: #14532d !important;
      }
      body.light-mode .week-event-block.type-kanban {
        background: rgba(236,72,153,0.15) !important;
        color: #831843 !important;
      }
      body.light-mode .day-view-header {
        border-bottom-color: rgba(0,0,0,0.15) !important;
      }
      body.light-mode .day-view-title {
        color: #0f172a !important;
      }
      body.light-mode .day-lane {
        border-left-color: rgba(0,0,0,0.12) !important;
      }
      body.light-mode .day-event-block.type-note {
        background: rgba(var(--primary-rgb),0.15) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .day-event-block.type-reminder {
        background: rgba(245,158,11,0.15) !important;
        color: #92400e !important;
      }
      body.light-mode .day-event-block.type-planner {
        background: rgba(34,197,94,0.12) !important;
        color: #14532d !important;
      }
      body.light-mode .day-event-block.type-kanban {
        background: rgba(236,72,153,0.12) !important;
        color: #831843 !important;
      }
      body.light-mode .cal-event-modal-box {
        background: #fff !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
      }
      body.light-mode .cal-event-modal-title {
        color: #0f172a !important;
      }
      body.light-mode .cal-event-field input,
      body.light-mode .cal-event-field select,
      body.light-mode .cal-event-field textarea {
        background: #f0f4ff !important;
        border-color: rgba(0,0,0,0.12) !important;
        color: #0f172a !important;
      }
      body.light-mode .cal-event-field select option {
        background: #fff !important;
        color: #0f172a !important;
      }
      body.light-mode .cal-cancel-btn {
        border-color: rgba(0,0,0,0.12) !important;
        color: #64748b !important;
      }
      body.light-mode .cal-cancel-btn:hover {
        background: rgba(0,0,0,0.05) !important;
        color: #0f172a !important;
      }
      body.light-mode #cal-event-modal {
        background: rgba(0,0,0,0.3) !important;
      }

      /* Zen Mode — engine-animated (follows selected animation type) */
      body.zen-mode .sidebar-left,
      body.zen-mode .sidebar-right,
      body.zen-mode header.panel {
        pointer-events: none !important;
      }
      body.zen-mode.zen-settled .sidebar-left,
      body.zen-mode.zen-settled .sidebar-right,
      body.zen-mode.zen-settled header.panel {
        display: none !important;
      }
      body.zen-mode.zen-settled .app-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
      }
      body.zen-mode.zen-settled .main-view {
        border-radius: 0 !important;
      }
      body.zen-mode .ai-chat-toggle {
        transform: translateY(-200px);
        transition: transform 0.3s ease;
      }
      body.zen-mode .tab-bar {
        padding-left: 12px;
        transition: padding-left 0.6s cubic-bezier(0.25,0.1,0.25,1);
      }
      body.zen-mode .editor-space {
        padding-top: 0;
      }
      body.zen-mode .breadcrumbs-bar {
        display: none;
      }

      /* ── Focus Mode (distraction-free writing) ─────── */
      body.focus-mode .sidebar-left,
      body.focus-mode .sidebar-right,
      body.focus-mode header.panel,
      body.focus-mode .toolbar-actions,
      body.focus-mode #format-toolbar,
      body.focus-mode .breadcrumbs-bar,
      body.focus-mode .tab-bar,
      body.focus-mode .ai-chat-toggle,
      body.focus-mode .attachments-panel,
      body.focus-mode .zen-close-row {
        display: none !important;
      }
      body.focus-mode .app-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
      }
      body.focus-mode .main-view {
        border-radius: 0 !important;
      }
      body.focus-mode .editor-space {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow-y: auto;
        background: var(--bg-solid);
      }
      body.focus-mode #preview-area {
        max-width: 720px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 3rem 2rem 5rem !important;
        font-size: var(--fs-md) !important;
        line-height: 1.75 !important;
        color: var(--text-main) !important;
        overflow-y: auto;
        height: 100%;
        box-sizing: border-box;
      }
      body.focus-mode #note-title-input {
        max-width: 720px !important;
        margin: 0 auto !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        font-size: var(--fs-xl) !important;
        font-weight: 700 !important;
      }
      .focus-word-count {
        position: fixed;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: var(--z-modal);
        background: rgba(15, 23, 42, 0.75);
        color: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 5px 16px;
        border-radius: var(--radius-pill);
        font-size: var(--fs-sm);
        letter-spacing: 0.02em;
        backdrop-filter: blur(12px);
        pointer-events: none;
        transition: opacity 0.3s ease;
        white-space: nowrap;
      }
      body.light-mode .focus-word-count {
        background: rgba(0, 0, 0, 0.45);
        color: rgba(255, 255, 255, 0.85);
        border-color: rgba(0, 0, 0, 0.1);
      }
      .focus-close-btn {
        position: fixed;
        top: 14px;
        right: 18px;
        z-index: var(--z-modal);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.08);
        width: 32px;
        height: 32px;
        border-radius: var(--radius-full);
        cursor: pointer;
        font-size: var(--fs-base);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s, background 0.2s, color 0.2s;
        opacity: 0;
        -webkit-app-region: no-drag;
      }
      .focus-close-btn:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.8);
      }
      body.focus-mode .focus-close-btn {
        opacity: 0.3;
      }
      body.focus-mode .focus-close-btn:hover {
        opacity: 1;
      }
      body.light-mode .focus-close-btn {
        background: rgba(0, 0, 0, 0.04);
        color: rgba(0, 0, 0, 0.3);
        border-color: rgba(0, 0, 0, 0.08);
      }
      body.light-mode .focus-close-btn:hover {
        background: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.7);
      }

      /* ── Reading Mode ───────────────────────────────── */
      body.reading-mode .sidebar-left,
      body.reading-mode .sidebar-right,
      body.reading-mode header.panel,
      body.reading-mode .toolbar-actions,
      body.reading-mode #format-toolbar,
      body.reading-mode .breadcrumbs-bar,
      body.reading-mode .tab-bar,
      body.reading-mode .ai-chat-toggle,
      body.reading-mode .attachments-panel {
        display: none !important;
      }
      body.reading-mode .app-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
      }
      body.reading-mode .main-view {
        border-radius: 0 !important;
      }
      body.reading-mode .editor-space {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow-y: auto;
        background: var(--bg-solid);
      }
      body.reading-mode #preview-area {
        max-width: 680px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 3rem 2rem 6rem !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-size: var(--fs-lg) !important;
        line-height: 1.85 !important;
        color: var(--text-main) !important;
        overflow-y: auto;
        height: 100%;
        box-sizing: border-box;
      }
      body.reading-mode #preview-area h1,
      body.reading-mode #preview-area h2,
      body.reading-mode #preview-area h3 {
        font-family: Georgia, serif !important;
        line-height: 1.3 !important;
      }
      body.reading-mode #preview-area p,
      body.reading-mode #preview-area li {
        letter-spacing: 0.01em;
      }
      body.reading-mode #note-title-input {
        display: none !important;
      }

      /* Print */
      @media print {
        body * {
          visibility: hidden;
        }
        #preview-area,
        #preview-area * {
          visibility: visible;
        }
        #preview-area {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          background: white !important;
          color: black !important;
          padding: 2rem;
          display: block !important;
        }
      }

      /* TASK-984: On screens ≤1440px, hide button text labels — show only icons */
      @media (max-width: 1440px) {
        .hdr-btn {
          padding: 0 8px;
          font-size: 0;    /* hide text */ /* stylelint-disable-line declaration-property-value-disallowed-list */
          gap: 0;
        }
        .hdr-btn svg { margin-right: 0; }
        .hdr-btn .hdr-btn-icon { font-size: var(--fs-md); }
        .header-right { gap: 0.4rem; }
      }

      /* Calendar-specific responsive (layout handled in styles.css) */
      @media (max-width: 900px) {
        .ai-panel {
          width: calc(100vw - 1rem);
          right: 0.5rem;
          left: 0.5rem;
        }
        .editor-title {
          font-size: var(--fs-xl) !important;
        }
      }
      @media (max-width: 600px) {
        .welcome-card {
          padding: 2rem 1.25rem;
        }
        .welcome-card h1 {
          font-size: var(--fs-display);
        }
        .gn-modal-box {
          width: min(90vw, 480px) !important;
          max-height: 85vh;
          overflow-y: auto;
        }
        .ai-panel {
          min-width: 280px;
        }
        .cal-month-grid {
          font-size: var(--fs-sm);
        }
        .week-header-row {
          grid-template-columns: 40px repeat(7, 1fr);
        }
      }

/* Dash-close margin */
.cal-close-btn--ml-auto { margin-left: auto; }

/* Calendar event color input row */
.cal-color-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cal-color-input {
    width: 32px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.cal-color-reset {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* ── Moved from styles.css (base) ─────────────────────────── */
      body.light-mode .day-label {
        color: #64748b !important;
      }
      body.light-mode .day-tasks {
        color: #475569 !important;
      }
      body.light-mode .calendar-mini div {
        color: #334155 !important;
      }
      .calendar-mini {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        margin-bottom: 0.5rem;
      }
      .day-label {
        text-align: center;
        font-size: var(--fs-sm);
        color: var(--text-dim);
        padding: 2px 0;
      }
      .day {
        text-align: center;
        font-size: var(--fs-sm);
        padding: 3px 1px;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: 0.2s;
        position: relative;
        color: var(--text-dim);
      }
      .day:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-main);
      }
      .day.today {
        background: rgba(var(--primary-rgb), 0.2);
        color: var(--primary);
        font-weight: 600;
      }
      .day.drop-target {
        background: rgba(var(--primary-rgb), 0.25);
        border: 1px dashed var(--primary);
        transform: scale(1.1);
      }
      .day.has-task::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 3px;
        background: var(--primary);
        border-radius: var(--radius-full);
      }
      .day-tasks {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        border-top: none;
        margin-top: 0.6rem;
        padding-top: 0;
        max-height: 200px;
        overflow-y: auto;
      }
      .day-tasks::before {
        content: '';
        display: block;
        height: 2px;
        background: linear-gradient(90deg, transparent 5%, rgba(var(--primary-rgb),0.5) 50%, transparent 95%);
        margin-bottom: 0.5rem;
      }

/* ── Focus-visible for calendar buttons ────────────────── */
.cal-nav-btn:focus-visible, .cal-tab:focus-visible, .cal-today-btn:focus-visible,
.cal-close-btn:focus-visible, .cal-save-btn:focus-visible,
.cal-cancel-btn:focus-visible, .cal-delete-btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #calendar-view.active, .cal-event-modal-box, #cal-event-modal, .cal-conflict {
    animation: none !important;
  }
}