:root {
        --primary: #6366f1;
        --primary-rgb: 99, 102, 241;
        --primary-light: #818cf8;
        --primary-dark: #4338ca;
        --secondary: #a855f7;
        --secondary-rgb: 168, 85, 247;
        --accent: #ec4899;
        --accent-rgb: 236, 72, 153;
        --bg: #010409;
        --bg-solid: #0f172a;

        --card-bg: rgba(255, 255, 255, 0.015);
        --card-bg-solid: #141b2d;
        --glass: rgba(255, 255, 255, 0.02);
        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-bg: rgba(255, 255, 255, 0.04);
        --text-main: #ffffff;
        --text-dim: #a0aec0;
        --text-muted: #718096;
        --success: #10b981;
        --danger: #ef4444;
        --ai-bubble: rgba(var(--primary-rgb), 0.15);

        /* ── Design System Tokens ────────────────────────── */

        /* Typography scale */
        --fs-xs:   0.65rem;
        --fs-sm:   0.75rem;
        --fs-base: 0.85rem;
        --fs-md:   1rem;
        --fs-lg:   1.1rem;
        --fs-xl:   1.3rem;
        --fs-2xl:  1.8rem;

        /* Border-radius scale */
        --radius-xs:   4px;
        --radius-sm:   6px;
        --radius-base: 8px;
        --radius-md:   12px;
        --radius-lg:   16px;
        --radius-pill: 999px;

        /* Functional colors */
        --color-success: #22c55e;
        --color-warning: #f59e0b;
        --color-danger:  #ef4444;
        --color-info:    #0ea5e9;

        /* Z-index layers */
        --z-dropdown: 100;
        --z-sticky:   500;
        --z-modal-bg: 9998;
        --z-modal:    9999;
        --z-toast:    10000;
      }
      body.theme-mars {
        --primary: #f43f5e;
        --primary-rgb: 244, 63, 94;
        --primary-light: #fb7185;
        --primary-dark: #be123c;
        --secondary: #fb923c;
        --secondary-rgb: 251, 146, 60;
        --accent: #facc15;
        --accent-rgb: 250, 204, 21;
        --bg: #0a0101;
        --bg-solid: #1a0808;

        --card-bg: rgba(26, 8, 8, 0.6);
        --card-bg-solid: #2a1215;
        --glass: rgba(26, 8, 8, 0.3);
        --glass-border: rgba(248, 113, 113, 0.12);
        --text-dim: #b0a8a0;
        --text-muted: #8a7e76;
        --ai-bubble: rgba(244, 63, 94, 0.15);
      }
      body.theme-ocean {
        --primary: #0ea5e9;
        --primary-rgb: 14, 165, 233;
        --primary-light: #38bdf8;
        --primary-dark: #0369a1;
        --secondary: #2dd4bf;
        --secondary-rgb: 45, 212, 191;
        --accent: #34d399;
        --accent-rgb: 52, 211, 153;
        --bg: #000814;
        --bg-solid: #001428;

        --card-bg: rgba(0, 20, 40, 0.6);
        --card-bg-solid: #0a1e36;
        --glass: rgba(0, 20, 40, 0.3);
        --glass-border: rgba(56, 189, 248, 0.12);
        --text-dim: #8cb4c8;
        --text-muted: #5a8a9e;
        --ai-bubble: rgba(14, 165, 233, 0.15);
      }
      body.theme-forest {
        --primary: #22c55e;
        --primary-rgb: 34, 197, 94;
        --primary-light: #4ade80;
        --primary-dark: #047857;
        --secondary: #84cc16;
        --secondary-rgb: 132, 204, 22;
        --accent: #facc15;
        --accent-rgb: 250, 204, 21;
        --bg: #010a01;
        --bg-solid: #051a05;

        --card-bg: rgba(5, 26, 5, 0.6);
        --card-bg-solid: #0f2a12;
        --glass: rgba(5, 26, 5, 0.3);
        --glass-border: rgba(74, 222, 128, 0.12);
        --text-dim: #8cb89e;
        --text-muted: #5e8a6e;
        --ai-bubble: rgba(34, 197, 94, 0.15);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* Selection styling */
      ::selection {
        background: rgba(var(--primary-rgb), 0.3);
        color: inherit;
      }
      /* Focus-visible for all interactive elements */
      button:focus-visible,
      [role="button"]:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 6px;
      }
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [contenteditable="true"]:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
      }
      /* Hover effects also apply on :focus-visible for keyboard nav */
      .tool-btn:focus-visible,
      .hdr-btn:focus-visible,
      .fmt-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1);
      }
      body.light-mode .tool-btn:focus-visible,
      body.light-mode .hdr-btn:focus-visible,
      body.light-mode .fmt-btn:focus-visible {
        background: rgba(var(--primary-rgb), 0.1);
      }
      button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
      }
      body {
        min-height: 100vh;
        background-color: var(--bg);
        background-image:
          radial-gradient(
            circle at 10% 20%,
            rgba(var(--primary-rgb), 0.2) 0%,
            transparent 40%
          ),
          radial-gradient(
            circle at 90% 80%,
            rgba(var(--secondary-rgb), 0.2) 0%,
            transparent 40%
          ),
          radial-gradient(
            circle at 50% 50%,
            rgba(var(--accent-rgb), 0.1) 0%,
            transparent 60%
          );
        font-family: "Outfit", sans-serif;
        color: var(--text-main);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      #canvas {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
      }

      .app-container {
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: 280px 1fr 320px;
        grid-template-rows: 70px 1fr;
        gap: 1rem;
        height: 100vh;
        padding: 1rem;
        opacity: 0;
        transform: translateY(20px);
        transition: all 1s ease;
      }
      .app-container.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* ── Legacy alias ── */
      @keyframes overlayIn {
        from { clip-path: circle(0% at 50% 50%); }
        to   { clip-path: circle(150% at 50% 50%); }
      }

      /* ── Premium Circle-Reveal Animation System ──────────────── */

      /* Full-screen overlays & panels: circle from center */
      @keyframes gn-overlay-in {
        from { clip-path: circle(0% at 50% 50%); }
        to   { clip-path: circle(150% at 50% 50%); }
      }
      @keyframes gn-overlay-out {
        from { clip-path: circle(150% at 50% 50%); }
        to   { clip-path: circle(0% at 50% 50%); }
      }

      /* Modal boxes inside overlay: scale up with bounce */
      @keyframes gn-modal-in {
        from { opacity: 0; transform: scale(0.3); }
        to   { opacity: 1; transform: scale(1); }
      }
      @keyframes gn-modal-out {
        from { opacity: 1; transform: scale(1); }
        to   { opacity: 0; transform: scale(0.3); }
      }

      /* Context menu: quick scale (too small for circle) */
      @keyframes gn-popup-in {
        from { opacity: 0; transform: scale(0.5) translateY(-20px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
      }
      @keyframes gn-popup-out {
        from { opacity: 1; transform: scale(1) translateY(0); }
        to   { opacity: 0; transform: scale(0.5) translateY(-20px); }
      }

      /* AI panel: circle from bottom-right corner */
      @keyframes gn-slide-right-in {
        from { clip-path: circle(0% at 100% 100%); }
        to   { clip-path: circle(150% at 100% 100%); }
      }
      @keyframes gn-slide-right-out {
        from { clip-path: circle(150% at 100% 100%); }
        to   { clip-path: circle(0% at 100% 100%); }
      }

      /* Spotlight: circle from top-center */
      @keyframes gn-drop-in {
        from { clip-path: circle(0% at 50% 15%); }
        to   { clip-path: circle(150% at 50% 15%); }
      }
      @keyframes gn-drop-out {
        from { clip-path: circle(150% at 50% 15%); }
        to   { clip-path: circle(0% at 50% 15%); }
      }

      /* Calendar: circle from center-bottom */
      @keyframes calSlideIn {
        from { clip-path: circle(0% at 50% 100%); }
        to   { clip-path: circle(150% at 50% 100%); }
      }
      @keyframes calSlideOut {
        from { clip-path: circle(150% at 50% 100%); }
        to   { clip-path: circle(0% at 50% 100%); }
      }

      .gn-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: gn-overlay-in 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
        -webkit-app-region: no-drag;
      }
      .gn-modal-overlay > div:first-child {
        animation: gn-modal-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .gn-closing {
        pointer-events: none !important;
      }

      /* Welcome */
      #welcome-screen {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #welcome-screen.hidden {
        opacity: 0;
        transform: scale(1.1);
        pointer-events: none;
      }
      .welcome-card {
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(40px) saturate(180%);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 4rem;
        border-radius: 48px;
        text-align: center;
        box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
        max-width: 560px;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .welcome-card:hover {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(var(--primary-rgb), 0.4);
        transform: translateY(-5px);
      }
      .welcome-card h1 {
        font-size: 4rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        background: linear-gradient(to bottom right, #fff 30%, var(--text-dim));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: -0.05em;
      }
      .welcome-sub {
        color: var(--text-dim);
        font-size: 1.1rem;
        font-weight: 300;
      }
      .power-btn {
        position: relative;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2.5rem auto 0;
        box-shadow: 0 0 40px rgba(var(--primary-rgb), 0.4);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .power-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 0 70px rgba(var(--primary-rgb), 0.6);
      }
      .power-btn svg {
        width: 46px;
        height: 46px;
        fill: white;
      }

      .welcome-version {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: rgba(148, 163, 184, 0.4);
        letter-spacing: 1px;
        font-family: "JetBrains Mono", monospace;
      }

      /* Update Banner */
      .update-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-toast);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 20px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        font-size: 13px;
        font-weight: 500;
        animation: gn-drop-in 0.3s ease;
      }
      .update-banner span { flex: 1; }
      .update-banner button {
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        padding: 4px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        transition: background 0.2s;
      }
      .update-banner button:hover {
        background: rgba(255,255,255,0.35);
      }
      /* slideDown — removed, now using gn-drop-in engine keyframe */

      /* Graph */
      #graph-view {
        position: fixed;
        inset: 0;
        z-index: 2000;
        background: var(--bg-solid);
        display: none;
        cursor: grab;
        -webkit-app-region: no-drag;
        flex-direction: column;
      }
      #graph-view.active {
        display: flex;
        animation: gn-overlay-in 1.2s both;
      }
      /* Graph close — uses .cal-close-btn base (now in fs-header) */
      #graph-canvas { flex: 1; }
      #graph-view .graph-header {
        position: relative;
        z-index: 2001;
      }
      #graph-view .graph-header .fs-header-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100% - 280px);
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #graph-view .graph-close-btn {
        margin-left: auto;
      }
      /* Graph search */
      #graph-search-input {
        width: 240px;
        padding: 8px 14px;
        border-radius: 10px;
        border: 1px solid var(--glass-border);
        background: var(--card-bg);
        color: var(--text-main);
        font: 13px Outfit;
        outline: none;
        backdrop-filter: blur(12px);
        transition: border-color 0.15s, box-shadow 0.15s;
      }
      #graph-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
      }
      #graph-search-input::placeholder {
        color: var(--text-dim);
      }
      /* Graph filter panel */
      #graph-filter-panel {
        position: absolute;
        top: 14rem;
        left: 1.5rem;
        z-index: 2002;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        border-radius: 12px;
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        border: 1px solid var(--glass-border);
        max-width: 200px;
        font: 12px Outfit;
        color: var(--text-main);
      }
      #graph-filter-panel .gf-label {
        font-weight: 600;
        opacity: 0.6;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
      }
      #graph-filter-panel .gf-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }
      #graph-filter-panel .gf-chip {
        padding: 3px 8px;
        border-radius: 6px;
        border: 1px solid var(--glass-border);
        background: transparent;
        color: var(--text-main);
        font: 11px Outfit;
        cursor: pointer;
        transition: all 0.15s;
      }
      #graph-filter-panel .gf-chip:hover {
        background: rgba(var(--primary-rgb), 0.1);
      }
      #graph-filter-panel .gf-chip.active {
        background: rgba(var(--primary-rgb), 0.2);
        border-color: var(--primary);
      }
      /* ── Temporal filter panel ─────────────────────────── */
      .g-temporal-panel {
        position: fixed;
        top: 3rem;
        left: 50%;
        transform: translateX(-50%);
        background: var(--card-bg-solid, #1a1d2e);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: var(--radius-md);
        padding: 12px 16px;
        z-index: 2100;
        min-width: 280px;
        display: none;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        color: var(--text-main);
      }
      .g-temporal-panel.active { display: block; }
      #g-temporal-slider {
        width: 100%;
        accent-color: var(--primary);
        margin: 8px 0;
        cursor: pointer;
      }
      .g-temporal-btn {
        background: rgba(var(--primary-rgb), 0.12);
        border: 1px solid rgba(var(--primary-rgb), 0.25);
        border-radius: 8px;
        color: var(--primary);
        padding: 4px 12px;
        cursor: pointer;
        font-size: var(--fs-base);
        transition: background 0.15s;
      }
      .g-temporal-btn:hover { background: rgba(var(--primary-rgb), 0.22); }
      .graph-toolbar-btn {
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid var(--glass-border);
        background: var(--card-bg);
        color: var(--text-main);
        font: 600 11px/1 Outfit;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
      }
      .graph-toolbar-btn:hover {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary);
      }
      .graph-toolbar-btn:active {
        background: rgba(var(--primary-rgb), 0.25);
      }
      .graph-toolbar-btn-active {
        background: rgba(var(--primary-rgb), 0.2);
        border-color: var(--primary);
        color: var(--primary-light, var(--primary));
      }

      /* Graph context menu */
      .graph-ctx-menu {
        position: fixed;
        background: var(--card-bg-solid, #141b2d);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 6px;
        z-index: var(--z-toast);
        min-width: 190px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.6);
        animation: gn-popup-in 0.12s ease-out both;
      }
      .graph-ctx-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        color: var(--text-dim);
        padding: 8px 12px;
        border-radius: var(--radius-base);
        cursor: pointer;
        font-size: 13px;
        transition: background 0.1s;
      }
      .graph-ctx-item:hover {
        background: rgba(var(--primary-rgb), 0.15);
      }
      .graph-ctx-sep {
        height: 1px;
        background: rgba(255,255,255,0.07);
        margin: 4px 0;
      }
      body.light-mode .graph-ctx-menu {
        background: rgba(255,255,255,0.97);
        border-color: rgba(0,0,0,0.1);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      }
      body.light-mode .graph-ctx-sep {
        background: rgba(0,0,0,0.08);
      }


      /* 3D Graph toggle */
      .g3d-toggle {
        background: rgba(var(--secondary-rgb), 0.15);
        border: 1px solid rgba(var(--secondary-rgb), 0.3);
        color: var(--primary-light);
        font-size: 0.85rem;
        font-weight: 700;
        padding: 7px 18px;
        min-width: 84px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        cursor: pointer;
        z-index: 2003;
        transition: background 0.2s, border-color 0.2s, color 0.2s;
        font-family: 'Outfit', sans-serif;
        -webkit-app-region: no-drag;
        pointer-events: all;
      }
      .graph-3d-toggle {
        position: absolute;
        top: 64px;
        left: 50%;
        transform: translateX(-50%);
      }
      .g3d-toggle:hover {
        background: rgba(var(--secondary-rgb), 0.25);
        border-color: rgba(var(--secondary-rgb), 0.5);
        color: var(--text-main);
      }
      body.light-mode .g3d-toggle {
        background: rgba(99, 102, 241, 0.08);
        border-color: rgba(99, 102, 241, 0.2);
        color: #6366f1;
      }
      body.light-mode .g3d-toggle:hover {
        background: rgba(99, 102, 241, 0.15);
      }
      /* Kanban close btn — now uses .cal-close-btn */
      .kanban-search-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
      }
      .kanban-search-inp {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 8px;
        padding: 5px 10px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        font-family: inherit;
        outline: none;
        width: 140px;
        transition: border-color 0.15s;
      }
      .kanban-search-inp:focus {
        border-color: rgba(var(--primary-rgb), 0.5);
        background: rgba(var(--primary-rgb), 0.07);
      }
      .kanban-prio-sel {
        background: var(--bg-solid);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 8px;
        padding: 5px 8px;
        color: var(--primary-light);
        font-size: var(--fs-base);
        font-family: inherit;
        outline: none;
        cursor: pointer;
        transition: border-color 0.15s;
      }
      .kanban-prio-sel:hover {
        border-color: rgba(var(--primary-rgb), 0.45);
      }

      /* ── Fullscreen Panel Header (unified) ────────────────────── */
      .fs-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 24px 14px 140px;
        background: rgba(255, 255, 255, 0.03);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        flex-shrink: 0;
        -webkit-app-region: drag;
      }
      .fs-header > * { -webkit-app-region: no-drag; }
      .fs-header-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-dim);
        letter-spacing: 0.02em;
        white-space: nowrap;
      }
      body.light-mode .fs-header {
        background: rgba(0, 0, 0, 0.03);
        border-bottom-color: rgba(0, 0, 0, 0.08);
      }

      /* Dashboard */
      #dashboard-view {
        position: fixed;
        inset: 0;
        z-index: 4000;
        background: var(--bg-solid);
        display: none;
        flex-direction: column;
        -webkit-app-region: no-drag;
        overflow: hidden;
      }
      #dashboard-view.active {
        display: flex;
        animation: gn-overlay-in 1.2s both;
      }
      .dash-inner {
        width: 100%;
        max-width: 1000px;
      }
      .dash-header {
        position: relative;
        z-index: 10;
      }
      .dash-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-dim);
        letter-spacing: 0.02em;
      }
      /* Dashboard close button reuses .cal-close-btn class */
      .dash-body {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 1.5rem;
      }
      .dash-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
      }
      .dash-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        text-align: center;
      }
      .dash-card h3 {
        font-size: 0.75rem;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.5rem;
      }
      .dash-card .big-num {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary);
        font-family: "JetBrains Mono";
      }
      .dash-card .sub {
        font-size: var(--fs-base);
        color: var(--text-dim);
        margin-top: 4px;
      }
      .heatmap {
        display: grid;
        grid-template-columns: repeat(52, 1fr);
        gap: 3px;
        margin-top: 1rem;
      }
      .hm-cell {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.05);
        transition: 0.2s;
        cursor: pointer;
      }
      .hm-cell:hover {
        transform: scale(1.3);
      }
      .hm-cell.l1 {
        background: rgba(var(--primary-rgb), 0.25);
      }
      .hm-cell.l2 {
        background: rgba(var(--primary-rgb), 0.5);
      }
      .hm-cell.l3 {
        background: rgba(var(--primary-rgb), 0.75);
      }
      .hm-cell.l4 {
        background: var(--primary);
        box-shadow: 0 0 6px var(--primary);
      }

      /* Modals */
      .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        display: none;
        align-items: center;
        justify-content: center;
        -webkit-app-region: no-drag;
      }
      .modal-overlay.active {
        display: flex;
        animation: gn-overlay-in 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .modal-overlay.active .modal-box {
        animation: gn-modal-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .modal-box {
        background: var(--bg-solid);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        padding: 2rem;
        width: 420px;
        max-width: 95vw;
        position: relative;
      }
      .modal-box--export {
        width: min(620px, 94vw);
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        background: var(--card-bg, rgba(20, 28, 48, 0.86));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        box-shadow:
          0 28px 72px rgba(0, 0, 0, 0.55),
          0 0 32px rgba(var(--primary-rgb), 0.1);
      }
      .modal-box--export h3 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      .modal-box--export .export-action-btn {
        justify-content: flex-start;
        text-align: left;
        min-height: 54px;
        padding: 12px 16px;
        margin-bottom: 8px;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--text-dim);
        font-size: var(--fs-md);
        font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }
      .modal-box--export .export-action-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.16);
        color: var(--text-main);
      }
      .modal-box--export .export-action-btn:focus-visible {
        outline: none;
        border-color: rgba(var(--primary-rgb), 0.6);
        box-shadow:
          0 0 0 2px rgba(var(--primary-rgb), 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }
      body.light-mode .modal-box--export {
        background: rgba(248, 251, 255, 0.9);
        border-color: rgba(15, 23, 42, 0.12);
        box-shadow:
          0 22px 56px rgba(15, 23, 42, 0.2),
          0 0 22px rgba(var(--primary-rgb), 0.12);
      }
      body.light-mode .modal-box--export .export-action-btn {
        background: rgba(15, 23, 42, 0.05);
        border-color: rgba(15, 23, 42, 0.11);
        color: #334155;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
      }
      body.light-mode .modal-box--export .export-action-btn:hover {
        background: rgba(15, 23, 42, 0.08);
        border-color: rgba(15, 23, 42, 0.2);
        color: #0f172a;
      }
      body.light-mode .modal-box--export .export-action-btn:focus-visible {
        border-color: rgba(var(--primary-rgb), 0.55);
        box-shadow:
          0 0 0 2px rgba(var(--primary-rgb), 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.45);
      }
      .modal-box h3 {
        margin-bottom: 1.25rem;
        font-size: 1.1rem;
      }
      .modal-btn {
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid var(--glass-border);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text-dim);
        cursor: pointer;
        font-size: var(--fs-md);
        margin-bottom: 10px;
        text-align: left;
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .modal-btn:hover {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary);
      }
      .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: transparent;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: 1.2rem;
        transition: color 0.15s, opacity 0.15s;
      }
      .modal-close:hover {
        color: var(--danger);
        opacity: 0.9;
      }

      /* Claude Session Import */
      .claude-session-item {
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--glass-border);
        background: rgba(255, 255, 255, 0.03);
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
      }
      .claude-session-item:hover {
        background: rgba(var(--primary-rgb), 0.12);
        border-color: var(--primary);
      }
      .claude-session-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
      }
      .claude-session-date {
        font-size: var(--fs-base);
        color: var(--primary);
        font-weight: 600;
      }
      .claude-session-size {
        font-size: 0.75rem;
        color: var(--text-dim);
      }
      .claude-session-msg {
        font-size: var(--fs-md);
        color: var(--text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .claude-session-proj {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        margin-top: 3px;
        opacity: 0.7;
      }
      #claude-session-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--primary-rgb), 0.38) rgba(255, 255, 255, 0.05);
      }
      #claude-session-list::-webkit-scrollbar {
        width: 10px;
      }
      #claude-session-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 999px;
      }
      #claude-session-list::-webkit-scrollbar-thumb {
        background: rgba(var(--primary-rgb), 0.4);
        border-radius: 999px;
        border: 2px solid rgba(10, 20, 40, 0.92);
      }
      #claude-session-list::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--primary-rgb), 0.55);
      }
      body.light-mode #claude-session-list {
        scrollbar-color: rgba(0, 0, 0, 0.22) rgba(0, 0, 0, 0.04);
      }
      body.light-mode #claude-session-list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.06);
      }
      body.light-mode #claude-session-list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.22);
        border-color: rgba(255, 255, 255, 0.9);
      }
      body.light-mode #claude-session-list::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.34);
      }

      /* Panel */
      .panel {
        background: var(--card-bg);
        backdrop-filter: blur(30px) saturate(160%);
        -webkit-backdrop-filter: blur(30px) saturate(160%);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
        transition:
          border-color 0.4s ease,
          box-shadow 0.4s ease;
      }
      .panel:hover {
        border-color: rgba(var(--secondary-rgb), 0.25);
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.4),
          0 0 20px rgba(var(--secondary-rgb), 0.08);
      }

      /* Header — overflow visible so dropdowns can escape; no rounded corners since it's the top of the window */
      header.panel {
        overflow: visible;
        border-radius: 16px;
        border-left: none;
        border-right: none;
        border-top: none;
      }

      /* Header */
      header.panel {
        grid-column: 1/-1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0 1.5rem 0 86px;
        -webkit-app-region: drag;
        user-select: none;
      }
      header.panel > * {
        -webkit-app-region: no-drag;
      }
      .brand {
        font-weight: 700;
        font-size: 1.3rem;
        letter-spacing: -0.02em;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-main);
        text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
        white-space: nowrap;
        width: auto;
        margin-right: 30px;
        flex-shrink: 0;
      }
      body.theme-mars .brand { text-shadow: 0 0 20px rgba(244, 63, 94, 0.3); }
      body.theme-ocean .brand { text-shadow: 0 0 20px rgba(14, 165, 233, 0.3); }
      body.theme-forest .brand { text-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
      .brand-dot {
        width: 10px;
        height: 10px;
        background: var(--primary);
        border-radius: var(--radius-xs);
        box-shadow: 0 0 12px var(--primary);
      }
      .header-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
      }
      .save-indicator {
        font-size: 0.75rem;
        color: var(--success);
        opacity: 0;
        transition: opacity 0.5s;
        font-family: "JetBrains Mono";
      }
      .save-indicator.show {
        opacity: 1;
      }
      .sync-indicator {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        opacity: 0.7;
        transition: opacity 0.3s;
        cursor: default;
        user-select: none;
      }
      .sync-indicator:empty { display: none; }
      .header-right {
        display: flex;
        gap: 0.75rem;
        align-items: center;
      }
      .theme-selector {
        display: flex;
        gap: 6px;
        background: rgba(255, 255, 255, 0.05);
        padding: 5px;
        border-radius: 10px;
      }
      .t-btn {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s;
        border: 2px solid transparent;
      }
      .t-btn:hover {
        transform: scale(1.2);
      }
      .t-btn.active-theme {
        border-color: var(--text-main);
      }
      .hdr-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--primary);
        color: var(--primary-light);
        padding: 0 12px;
        height: 34px;
        min-height: 34px;
        box-sizing: border-box;
        line-height: 1;
        border-radius: 10px;
        cursor: pointer;
        font-size: var(--fs-base);
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
      }
      .hdr-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
      }
      .hdr-btn-icon {
        font-size: 0.85rem;
      }
      .hdr-btn-icon-lg {
        font-size: 1rem;
        transition: transform 0.3s;
      }
      .hdr-btn-nav {
        font-size: 0.85rem;
        opacity: 0.3;
        transition: transform 0.3s;
      }
      .ai-tool-menu {
        display: none;
        background: var(--bg-solid);
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: 12px;
        padding: 6px;
        z-index: 9999;
        min-width: 220px;
        max-width: min(92vw, 340px);
        max-height: 420px;
        overflow-y: auto;
        box-shadow:
          0 8px 40px rgba(0, 0, 0, 0.8),
          0 0 0 1px rgba(var(--primary-rgb), 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }
      .ai-tool-menu-btn {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        background: none;
        border: none;
        border-left: 2px solid transparent;
        color: rgba(226, 232, 240, 0.82);
        padding: 8px 10px;
        min-height: 34px;
        border-radius: 6px;
        cursor: pointer;
        font-size: var(--fs-base);
        line-height: 1.25;
        text-align: left;
        font-family: inherit;
        transition:
          background 0.12s,
          color 0.12s,
          border-color 0.12s;
      }
      .ai-tool-menu-btn:hover,
      .ai-tool-menu-btn:focus-visible {
        background: rgba(var(--primary-rgb), 0.14);
        color: var(--primary-light);
        border-left-color: rgba(var(--primary-rgb), 0.55);
      }
      .ai-tool-menu-btn:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.35);
      }
      .fmt-remove-bg-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        color: #aaa;
        padding: 4px 8px;
        cursor: pointer;
        font-size: 12px;
        margin-bottom: 6px;
      }
      .fmt-remove-bg-btn:hover,
      .fmt-remove-bg-btn:focus-visible {
        border-color: rgba(255, 255, 255, 0.4);
      }
      body.light-mode .fmt-remove-bg-btn {
        border-color: rgba(0, 0, 0, 0.12);
        color: #64748b;
      }
      body.light-mode .fmt-remove-bg-btn:hover,
      body.light-mode .fmt-remove-bg-btn:focus-visible {
        border-color: rgba(0, 0, 0, 0.3);
      }
      .ai-close-btn-fade {
        opacity: 0.6;
        transition: opacity 0.15s;
      }
      .ai-close-btn-fade:hover,
      .ai-close-btn-fade:focus-visible {
        opacity: 1;
      }
      .hdr-btn-purple {
        background: rgba(168, 85, 247, 0.15);
        border-color: var(--secondary);
        color: white;
      }
      .zen-btn.active {
        color: var(--primary);
        border-color: var(--primary);
        background: rgba(var(--primary-rgb), 0.15);
      }
      .clock {
        font-family: "JetBrains Mono";
        color: var(--text-dim);
        font-size: 0.85rem;
        margin-left: auto;
      }

      /* Left Sidebar */
      .sidebar-left {
        padding: 1.25rem;
        position: relative;
        min-width: 200px;
        max-width: 600px;
      }
      .sidebar-resize-handle {
        position: absolute;
        top: 0;
        right: -6px;
        width: 12px;
        height: 100%;
        cursor: col-resize;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .sidebar-resize-handle::after {
        content: '';
        width: 3px;
        height: 40px;
        border-radius: var(--radius-xs);
        background: rgba(255,255,255,0.08);
        transition: background 0.2s, height 0.2s;
      }
      .sidebar-resize-handle:hover::after,
      .sidebar-resize-handle.active::after {
        background: rgba(var(--primary-rgb),0.5);
        height: 60px;
      }
      body.sidebar-resizing {
        cursor: col-resize !important;
        user-select: none !important;
      }
      body.sidebar-resizing * {
        cursor: col-resize !important;
      }
      .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
      }
      .sidebar-label {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        letter-spacing: 0.1em;
      }
      .icon-btn {
        background: var(--primary);
        border: none;
        color: white;
        border-radius: 8px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition: 0.2s;
        font-size: 0.85rem;
      }
      .icon-btn:hover {
        opacity: 0.8;
        transform: scale(1.05);
      }

      /* ── New Note Split Button + Dropdown ─────────────────── */
      .new-note-split {
        position: relative;
        display: flex;
        align-items: center;
        gap: 1px;
      }
      .new-note-split__main {
        border-radius: 8px 0 0 8px !important;
        width: 24px;
      }
      .new-note-split__arrow {
        border-radius: 0 8px 8px 0 !important;
        width: 16px !important;
        font-size: 0.6rem !important;
        padding: 0 !important;
        opacity: 0.85;
      }
      .new-note-dropdown {
        display: none;
        position: fixed;
        min-width: 190px;
        background: var(--card-bg);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        padding: 4px;
        z-index: 10000;
        box-shadow: 0 8px 28px rgba(0,0,0,0.45);
      }
      .new-note-dropdown.open {
        display: block;
        animation: gn-popup-in 0.18s ease both;
      }
      .new-note-dropdown__item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        background: none;
        border: none;
        color: var(--text-main);
        padding: 7px 10px;
        border-radius: var(--radius-base);
        cursor: pointer;
        font-size: var(--fs-base);
        text-align: left;
        transition: background 0.15s;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
      }
      .new-note-dropdown__item:hover {
        background: rgba(var(--primary-rgb), 0.14);
      }
      .new-note-dropdown__icon {
        font-size: 1rem;
        min-width: 28px;
        white-space: nowrap;
        text-align: center;
        flex-shrink: 0;
      }
      .new-note-dropdown__item kbd {
        margin-left: auto;
        font-size: var(--fs-sm);
        opacity: 0.5;
        font-family: inherit;
      }

      .search-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 9px 12px;
        color: var(--text-main);
        margin-bottom: 0.75rem;
        outline: none;
        font-size: 0.85rem;
        font-family: inherit;
        transition: border-color 0.2s;
      }
      .search-input:focus {
        border-color: var(--primary);
      }
      .tag-filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 14px;
        min-height: 0;
      }
      .notes-list {
        flex: 1;
        overflow-y: auto;
      }
      .notes-list::-webkit-scrollbar {
        width: 4px;
      }
      .notes-list::-webkit-scrollbar-track {
        background: transparent;
      }
      .notes-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
      }
      .tree-item {
        padding: 9px 12px;
        border-radius: 10px;
        cursor: pointer;
        transition: 0.2s;
        margin-bottom: 3px;
        font-size: 0.85rem;
        color: var(--text-dim);
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
      }
      .tree-item.active {
        background: rgba(var(--primary-rgb), 0.12);
        color: white;
        font-weight: 500;
      }
      .tree-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: white;
      }
      .tree-item:focus { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 8px; }
      .tree-item .note-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tree-item .delete-btn {
        opacity: 0;
        background: none;
        border: none;
        color: var(--color-danger);
        cursor: pointer;
        font-size: var(--fs-md);
        padding: 2px 4px;
        border-radius: 4px;
        transition: 0.2s;
      }
      .tree-item:hover .delete-btn {
        opacity: 1;
      }
      .tree-item .delete-btn:hover {
        background: rgba(239, 68, 68, 0.15);
      }
      .note-item .delete-btn {
        opacity: 0;
        background: none;
        border: none;
        color: var(--color-danger);
        cursor: pointer;
        font-size: var(--fs-md);
        padding: 2px 4px;
        border-radius: 4px;
        transition: 0.2s;
      }
      .note-item:hover .pin-btn { opacity: 0.6; }
      .note-item:hover .delete-btn { opacity: 1; }
      .note-item .delete-btn:hover { background: rgba(239, 68, 68, 0.15); }
      .sidebar-footer {
        margin-top: auto;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.02);
        border-radius: 12px;
        font-size: 0.75rem;
        color: var(--text-dim);
        display: flex;
        justify-content: space-between;
      }

      /* Editor */
      .main-view {
        position: relative;
        display: flex;
        flex-direction: row;
      }
      .editor-col {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .editor-space {
        flex: 1;
        padding: 0.5rem 1.5rem 1.5rem 1.5rem;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
      }
      .editor-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0.5rem;
        gap: 4px;
      }
      .editor-title-row {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .editor-meta-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }
      .editor-title {
        background: transparent;
        border: none;
        color: var(--text-dim);
        font-size: 1.8rem;
        font-weight: 700;
        outline: none;
        flex: 1;
        font-family: inherit;
      }
      .editor-title::placeholder {
        color: rgba(255, 255, 255, 0.2);
      }
      .toolbar-actions {
        display: flex;
        gap: 3px;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
        flex-shrink: 1;
        overflow-x: auto;
        overflow-y: hidden;
        min-width: 0;
      }
      .toolbar-actions::-webkit-scrollbar {
        height: 0;
      }
      /* Reorder mode: subtle outline on draggable containers */
      .reorder-active {
        outline: 1px dashed rgba(var(--primary-rgb), 0.35);
        outline-offset: 2px;
        border-radius: 8px;
      }
      .reorder-active .tool-btn,
      .reorder-active .fmt-btn,
      .reorder-active .hdr-btn {
        transition: opacity 0.15s, transform 0.15s;
      }
      .reorder-active .tool-btn:hover,
      .reorder-active .fmt-btn:hover,
      .reorder-active .hdr-btn:hover {
        outline: 1px solid rgba(var(--primary-rgb), 0.4);
        outline-offset: 1px;
      }
      .word-count {
        font-size: 0.75rem;
        color: var(--text-dim);
        font-family: "JetBrains Mono";
        white-space: nowrap;
      }
      .tool-btn {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--glass-border);
        color: var(--text-dim);
        padding: 4px 6px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.75rem;
        transition: 0.2s;
        white-space: nowrap;
        line-height: 1;
      }
      .tool-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: white;
        border-color: rgba(255, 255, 255, 0.2);
      }
      .tool-btn-green {
        background: rgba(16, 185, 129, 0.1);
        border-color: var(--success);
        color: var(--success);
      }
      .tool-btn-green:hover {
        background: rgba(16, 185, 129, 0.2);
        color: var(--success);
      }
      /* Formatting Toolbar */
      .format-toolbar {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 3px 6px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        margin-bottom: 6px;
        flex-wrap: wrap;
        overflow: visible;
        transition: all 0.2s;
        flex-shrink: 0;
      }
      .format-toolbar::-webkit-scrollbar {
        height: 0;
      }
      .format-toolbar:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(var(--primary-rgb), 0.2);
      }
      .fmt-group {
        display: flex;
        align-items: center;
        gap: 1px;
        flex-shrink: 0;
      }
      .fmt-separator {
        width: 1px;
        height: 16px;
        background: rgba(255, 255, 255, 0.08);
        margin: 0 2px;
        flex-shrink: 0;
      }
      .fmt-btn {
        background: transparent;
        border: 1px solid transparent;
        color: rgba(255, 255, 255, 0.6);
        padding: 3px 5px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 11px;
        transition: all 0.15s;
        min-width: 22px;
        text-align: center;
        line-height: 1;
      }

      .fmt-btn:hover {
        background: rgba(var(--primary-rgb), 0.15);
        color: var(--primary);
        border-color: rgba(var(--primary-rgb), 0.3);
      }
      .fmt-btn:active {
        transform: scale(0.93);
      }
      .fmt-select {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        padding: 2px 4px;
        border-radius: 6px;
        font-size: 10px;
        cursor: pointer;
        outline: none;
        font-family: inherit;
        min-width: 50px;
      }
      .fmt-select:hover {
        border-color: rgba(var(--primary-rgb), 0.4);
      }
      .fmt-select option {
        background: var(--card-bg-solid);
        color: var(--text-main);
      }
      .fmt-color-dropdown {
        position: relative;
      }
      .fmt-color-trigger {
        background: transparent;
        border: 1px solid transparent;
        color: rgba(255, 255, 255, 0.6);
        padding: 4px 8px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        transition: all 0.15s;
        min-width: 28px;
        text-align: center;
      }
      .fmt-color-trigger:hover {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: rgba(var(--primary-rgb), 0.3);
      }
      .fmt-palette {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--card-bg, #1a1a2e);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 10px;
        padding: 10px 12px;
        z-index: 300;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
        min-width: 220px;
        margin-top: 4px;
      }
      .fmt-palette.active {
        display: block;
      }
      .fmt-palette-title {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 6px;
        text-align: center;
      }
      .fmt-palette-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .fmt-section-label {
        font-size: 9px;
        color: rgba(255,255,255,0.45);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 3px;
        padding-left: 1px;
      }
      .fmt-color-row {
        display: flex;
        gap: 2px;
        margin-bottom: 2px;
      }
      .fmt-palette-swatch {
        width: 19px;
        height: 19px;
        border-radius: 2px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.12s;
        flex-shrink: 0;
      }
      .fmt-palette-swatch:hover {
        border-color: #fff;
        transform: scale(1.25);
        z-index: 2;
        box-shadow: 0 0 6px rgba(255,255,255,0.3);
      }
      /* Table Insert Modal */
      .table-insert-popup {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--card-bg, #1a1a2e);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 10px;
        padding: 14px;
        z-index: 200;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
        display: none;
        min-width: 200px;
      }
      .table-insert-popup.active {
        display: block;
      }
      .table-insert-popup label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
        margin-bottom: 8px;
      }
      .table-insert-popup input[type="number"] {
        width: 50px;
        padding: 4px 6px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        text-align: center;
      }
      .table-insert-popup button {
        width: 100%;
        padding: 6px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        margin-top: 4px;
      }
      .table-insert-popup button:hover {
        opacity: 0.9;
      }
      .tag-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
      }
      .tags-area {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        flex: 1;
      }
      .tag-chip {
        background: rgba(var(--primary-rgb), 0.12);
        border: 1px solid rgba(var(--primary-rgb), 0.25);
        color: var(--primary);
        border-radius: var(--radius-lg);
        padding: 2px 10px;
        font-size: var(--fs-sm);
        cursor: pointer;
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .tag-chip:hover {
        background: rgba(var(--primary-rgb), 0.28);
        border-color: rgba(var(--primary-rgb), 0.6);
        color: var(--primary-light);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
      }
      .tag-chip.active-filter {
        background: var(--primary);
        color: white;
      }
      .tag-chip .rm {
        opacity: 0.5;
        font-size: var(--fs-sm);
        cursor: pointer;
        padding: 0 2px;
        transition: 0.15s;
      }
      .tag-chip .rm:hover {
        opacity: 1;
        color: #ff4444;
        transform: scale(1.2);
      }
      /* Smart Tag Badges (AI classification) */
      .smart-tag-badges {
        display: contents;
      }
      .smart-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: var(--fs-sm);
        font-weight: 500;
        cursor: default;
        user-select: none;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .smart-badge-type {
        background: rgba(var(--primary-rgb), 0.1);
        border: 1px solid rgba(var(--primary-rgb), 0.25);
        color: var(--primary);
      }
      .smart-badge-mood {
        background: transparent;
        border: none;
        font-size: 0.85rem;
        padding: 2px 4px;
      }
      .smart-badge-entity {
        background: rgba(var(--primary-rgb), 0.06);
        color: var(--text-dim);
        font-size: 0.62rem;
        border: 1px solid rgba(var(--primary-rgb), 0.1);
      }
      .smart-tag-btn {
        background: none;
        border: none;
        font-size: 0.85rem;
        cursor: pointer;
        opacity: 0.5;
        padding: 2px 4px;
        transition: opacity 0.2s;
        flex-shrink: 0;
      }
      .smart-tag-btn:hover { opacity: 1; }
      .smart-tag-btn:focus-visible {
        opacity: 1;
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 4px;
      }
      @keyframes smart-tag-pulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
      }
      .smart-tag-loading { animation: smart-tag-pulse 1s infinite; }

      .tag-input-row {
        display: flex;
        gap: 5px;
      }
      .tag-input-field {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 4px 9px;
        color: var(--text-main);
        outline: none;
        font-size: var(--fs-base);
        width: 100px;
        font-family: inherit;
      }
      body.light-mode .tag-input-field {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.15) !important;
        color: #0f172a !important;
      }
      .tag-add-btn {
        background: var(--primary);
        border: none;
        color: white;
        border-radius: 8px;
        padding: 4px 9px;
        cursor: pointer;
        font-size: var(--fs-base);
      }
      /* ── Folder Picker ──────────────────────────────── */
      .folder-picker { flex-shrink: 0; }
      .folder-picker-btn {
        display: flex; align-items: center; gap: 5px;
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 4px 10px;
        color: var(--text-dim);
        cursor: pointer;
        font-size: var(--fs-base);
        font-family: inherit;
        transition: 0.2s;
        white-space: nowrap;
      }
      .folder-picker-btn:hover { border-color: var(--primary); color: var(--text-main); }
      .folder-picker-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 4px;
        background: rgba(20, 27, 45, 0.5);
        border: 1px solid rgba(var(--primary-rgb),0.3);
        border-radius: 10px;
        padding: 4px;
        min-width: 180px;
        max-height: 240px;
        overflow-y: auto;
        z-index: 200;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }
      .folder-picker-dropdown::-webkit-scrollbar { width: 6px; }
      .folder-picker-dropdown::-webkit-scrollbar-track { background: transparent; }
      .folder-picker-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: var(--radius-xs); }
      .folder-picker-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
      body.light-mode .folder-picker-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
      body.light-mode .folder-picker-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
      .folder-picker-dropdown.open { display: block; }
      .fp-item {
        display: flex; align-items: center; gap: 6px;
        padding: 7px 10px;
        border-radius: 8px;
        border: none;
        background: none;
        color: var(--text-main);
        cursor: pointer;
        font-size: var(--fs-base);
        width: 100%;
        text-align: left;
        font-family: inherit;
        transition: background 0.15s;
      }
      .fp-item:hover { background: rgba(var(--primary-rgb),0.12); }
      .fp-item.active { background: rgba(var(--primary-rgb),0.2); color: var(--primary-light); }
      .fp-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      body.light-mode .folder-picker-btn {
        background: rgba(0,0,0,0.04) !important;
        color: #64748b !important;
        border-color: rgba(0,0,0,0.12) !important;
      }
      body.light-mode .folder-picker-btn:hover {
        border-color: var(--primary) !important;
        color: #0f172a !important;
      }
      body.light-mode .folder-picker-dropdown {
        background: #fff !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
      }
      body.light-mode .fp-item {
        color: #1e293b !important;
      }
      body.light-mode .fp-item:hover {
        background: rgba(var(--primary-rgb),0.1) !important;
      }
      body.light-mode .fp-item.active {
        background: rgba(var(--primary-rgb),0.15) !important;
        color: var(--primary-dark) !important;
      }

      .editor-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow-y: hidden;
        overflow-x: hidden;
        min-height: 0;
      }
      /* ── Find & Replace Bar ─────────────────────────────── */
      .find-replace-bar {
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: 8px 12px;
        background: rgba(15, 23, 42, 0.92);
        border-bottom: 1px solid var(--glass-border);
        backdrop-filter: blur(12px);
        z-index: 50;
        flex-shrink: 0;
      }
      .find-replace-bar.active {
        display: flex;
      }
      .fr-row {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .fr-row input {
        flex: 1;
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--glass-border);
        border-radius: 6px;
        color: white;
        padding: 5px 10px;
        font-size: 0.85rem;
        font-family: 'Outfit', sans-serif;
        outline: none;
        min-width: 0;
      }
      .fr-row input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
      }
      .fr-row input::placeholder {
        color: var(--text-dim);
      }
      .fr-count {
        font-size: 0.75rem;
        color: var(--text-dim);
        white-space: nowrap;
        min-width: 36px;
        text-align: center;
      }
      .fr-btn {
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--glass-border);
        color: var(--text-dim);
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.75rem;
        padding: 4px 8px;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
      }
      .fr-btn:hover {
        background: rgba(var(--primary-rgb), 0.2);
        color: white;
      }
      .fr-btn.fr-nav {
        width: 26px;
        height: 26px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-sm);
      }
      .fr-btn.fr-close-btn {
        width: 26px;
        height: 26px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
      }
      .fr-match {
        background: rgba(255, 220, 0, 0.25);
        border-radius: 2px;
      }
      .fr-match.fr-current {
        background: rgba(255, 220, 0, 0.6);
        outline: 2px solid rgba(255, 215, 0, 0.8);
        border-radius: 2px;
      }
      .content-area {
        flex: 1;
        background: transparent;
        border: none;
        color: var(--text-dim);
        font-size: 1rem;
        line-height: 1.75;
        outline: none;
        resize: none;
        font-family: inherit;
      }
      .content-area::placeholder {
        color: rgba(255, 255, 255, 0.15);
      }
      .preview-area {
        flex: 1;
        overflow-y: auto;
        font-size: 1rem;
        line-height: 1.8;
        color: var(--text-dim);
        padding: 8px 10px;
        cursor: text;
        outline: none;
        border-radius: 8px;
        transition: box-shadow 0.2s;
        background: var(--card-bg);
      }
      .preview-area a {
        color: var(--primary);
        text-decoration: underline;
        text-decoration-color: rgba(var(--primary-rgb), 0.4);
      }
      .preview-area a:hover {
        text-decoration-color: var(--primary);
      }
      .preview-area:focus {
        box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.3);
      }
      .preview-area:empty::before {
        content: attr(data-placeholder);
        color: rgba(255, 255, 255, 0.2);
        pointer-events: none;
      }
      .preview-area::-webkit-scrollbar {
        width: 4px;
      }
      .preview-area::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
      }

      /* ── Reading Width (compact editor) ─────────────── */
      .preview-area.reading-width {
        width: 75%;
        max-width: 1152px;
        margin: 0 auto;
      }

      /* ── Attachments Panel ──────────────────────────── */
      .attachments-panel {
        flex-shrink: 0;
        margin-right: 4.5rem;
        max-height: 220px;
        overflow-y: auto;
        background: rgba(8, 8, 22, 0.45);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        padding: 8px 12px 4px;
        transition: max-height 0.2s ease;
      }
      .attachments-panel.collapsed .attachments-grid {
        display: none;
      }
      .attachments-panel.collapsed {
        max-height: 36px;
        overflow: hidden;
      }
      .attachments-collapse-btn {
        margin-left: auto;
        background: none;
        border: none;
        color: rgba(255,255,255,0.4);
        cursor: pointer;
        font-size: var(--fs-md);
        padding: 0 4px;
        line-height: 1;
        transition: transform 0.2s;
      }
      .attachments-collapse-btn:hover { color: rgba(255,255,255,0.7); }
      .attachments-panel.collapsed .attachments-collapse-btn { transform: rotate(-90deg); }
      .attachments-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.55);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .attachments-count {
        background: rgba(var(--primary-rgb), 0.2);
        color: rgba(var(--primary-rgb), 0.8);
        padding: 1px 6px;
        border-radius: 8px;
        font-size: var(--fs-sm);
      }
      .attachments-grid {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .attach-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 5px 4px;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: background 0.15s;
        cursor: default;
      }
      .attach-row:last-child {
        border-bottom: none;
      }
      .attach-row:hover {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
      }
      .attach-row-icon {
        font-size: 1.3rem;
        flex-shrink: 0;
        width: 28px;
        text-align: center;
      }
      .attach-row-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
      }
      .attach-row-name {
        font-size: var(--fs-base);
        color: rgba(255, 255, 255, 0.85);
        word-break: break-all;
      }
      .attach-row-size {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.55);
      }
      .attach-row-actions {
        display: flex;
        gap: 4px;
        align-items: center;
        flex-shrink: 0;
      }
      .attach-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.45);
      }
      .attach-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.9);
      }
      .attach-btn-download {
        color: rgba(var(--primary-rgb), 0.6);
        background: rgba(var(--primary-rgb), 0.08);
      }
      .attach-btn-download:hover {
        background: rgba(var(--primary-rgb), 0.25);
        color: rgba(var(--primary-rgb), 1);
      }
      .attach-btn-delete {
        opacity: 0.35;
        transition:
          opacity 0.15s,
          background 0.15s,
          color 0.15s;
        color: rgba(255, 255, 255, 0.4);
      }
      .attach-row:hover .attach-btn-delete {
        opacity: 1;
      }
      .attach-btn-delete:hover {
        background: rgba(239, 68, 68, 0.2) !important;
        color: var(--color-danger) !important;
        opacity: 1;
      }

      /* Voice memo audio player */
      .attach-audio-wrap {
        flex-basis: 100%;
        padding: 6px 0 2px;
      }
      .attach-audio-player {
        width: 100%;
        height: 32px;
        border-radius: 8px;
        outline: none;
        opacity: 0.85;
        accent-color: var(--primary);
      }
      .attach-audio-player:hover { opacity: 1; }

      /* Drop overlay */
      .drop-overlay {
        position: absolute;
        inset: 0;
        background: rgba(var(--primary-rgb), 0.15);
        backdrop-filter: blur(4px);
        border: 3px dashed rgba(var(--primary-rgb), 0.5);
        border-radius: 12px;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .drop-overlay-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: rgba(var(--primary-rgb), 0.9);
        font-size: 1rem;
        font-weight: 600;
      }

      /* AI */
      .ai-chat-toggle {
        position: absolute;
        bottom: 1.5rem;
        right: 2.5rem;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-dim);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        opacity: 0.5;
        transition:
          opacity 0.2s,
          background 0.2s,
          border-color 0.2s;
        z-index: 100;
      }
      .ai-chat-toggle:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
      }
      .ai-panel {
        position: absolute;
        bottom: 5.5rem;
        right: 1.5rem;
        width: 640px;
        height: 720px;
        min-width: 360px;
        min-height: 400px;
        background: var(--bg-solid);
        border: 1px solid var(--glass-border);
        border-radius: 18px;
        display: none;
        flex-direction: column;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        z-index: 100;
        overflow: visible;
      }
      .ai-resize-handle {
        position: absolute;
        z-index: 201;
        transition: background 0.12s;
      }
      .ai-resize-handle:hover {
        background: rgba(var(--primary-rgb), 0.28);
      }
      /* Corners */
      .ai-rz-nw {
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        cursor: nw-resize;
        border-radius: 18px 0 8px 0;
      }
      .ai-rz-ne {
        top: 0;
        right: 0;
        width: 22px;
        height: 22px;
        cursor: ne-resize;
        border-radius: 0 18px 0 8px;
      }
      .ai-rz-sw {
        bottom: 0;
        left: 0;
        width: 22px;
        height: 22px;
        cursor: sw-resize;
        border-radius: 0 8px 0 18px;
      }
      .ai-rz-se {
        bottom: 0;
        right: 0;
        width: 22px;
        height: 22px;
        cursor: se-resize;
        border-radius: 8px 0 18px 0;
      }
      /* Edges */
      .ai-rz-n {
        top: 0;
        left: 22px;
        right: 22px;
        height: 6px;
        cursor: n-resize;
      }
      .ai-rz-s {
        bottom: 0;
        left: 22px;
        right: 22px;
        height: 6px;
        cursor: s-resize;
      }
      .ai-rz-w {
        top: 22px;
        left: 0;
        bottom: 22px;
        width: 6px;
        cursor: w-resize;
      }
      .ai-rz-e {
        top: 22px;
        right: 0;
        bottom: 22px;
        width: 6px;
        cursor: e-resize;
      }
      .ai-panel.active {
        display: flex;
        animation: gn-slide-right-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .ai-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: var(--fs-md);
      }
      .ai-dot {
        width: 8px;
        height: 8px;
        background: var(--secondary);
        border-radius: 50%;
        box-shadow: 0 0 8px var(--secondary);
      }
      .ai-messages {
        flex: 1;
        padding: 1rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      .ai-messages::-webkit-scrollbar {
        width: 4px;
      }
      .ai-messages::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
      }
      .msg {
        padding: 9px 13px;
        border-radius: 12px;
        font-size: var(--fs-md);
        max-width: 88%;
        line-height: 1.5;
        overflow-wrap: break-word;
        word-break: break-word;
        min-width: 0;
      }
      .msg pre {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: break-word;
        overflow-x: auto;
        max-width: 100%;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        padding: 8px 10px;
        font-size: var(--fs-base);
        margin: 6px 0;
      }
      .msg code {
        word-break: break-word;
        overflow-wrap: break-word;
      }
      .msg p,
      .msg li,
      .msg h1,
      .msg h2,
      .msg h3 {
        overflow-wrap: break-word;
        word-break: break-word;
      }
      .msg ol,
      .msg ul {
        padding-left: 1.6em;
        margin: 4px 0;
        list-style-position: outside;
      }
      .msg ol { list-style-type: decimal; }
      .msg ul { list-style-type: disc; }
      .msg ol ol, .msg ol ul,
      .msg ul ol, .msg ul ul {
        padding-left: 1.4em;
        margin: 2px 0;
      }
      .msg li {
        margin: 2px 0;
        padding-left: 0.2em;
      }
      .msg.bot {
        background: rgba(30, 41, 70, 0.95);
        align-self: stretch;
        max-width: 100%;
        color: var(--text-dim);
        border: 1px solid rgba(var(--primary-rgb), 0.15);
        text-align: left;
      }
      .msg.user {
        background: rgba(var(--primary-rgb), 0.25);
        border: 1px solid rgba(var(--primary-rgb), 0.4);
        align-self: flex-end;
        max-width: 88%;
        color: #f0f4ff;
        position: relative;
        text-align: left;
      }
      /* Расширяем зону hover влево — накрывает область кнопок */
      .msg.user::before {
        content: "";
        position: absolute;
        left: -72px;
        top: 0;
        width: 72px;
        height: 100%;
      }
      .msg-user-actions {
        display: flex;
        position: absolute;
        left: -68px;
        top: 50%;
        transform: translateY(-50%);
        gap: 4px;
        flex-direction: row;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease 0.75s;
      }
      .msg.user:hover .msg-user-actions {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.15s ease 0s;
      }
      .msg-ua-btn {
        background: var(--card-bg-solid);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 8px;
        color: var(--text-muted);
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: var(--fs-base);
        transition: 0.15s;
        flex-shrink: 0;
        padding: 0;
        line-height: 1;
      }
      .msg-ua-btn:hover {
        background: rgba(var(--primary-rgb), 0.25);
        color: var(--text-dim);
        border-color: rgba(var(--primary-rgb), 0.6);
      }
      /* Edit mode inline */
      .msg-edit-area {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0;
        color: #f0f4ff;
        font-family: inherit;
        font-size: var(--fs-md);
        padding: 4px 2px;
        resize: none;
        outline: none;
        box-sizing: border-box;
        margin-top: 4px;
      }
      .msg-edit-actions {
        display: flex;
        gap: 6px;
        margin-top: 6px;
        justify-content: flex-end;
      }
      .msg-edit-save {
        background: rgba(var(--primary-rgb), 0.7);
        border: none;
        color: #fff;
        border-radius: 8px;
        padding: 4px 12px;
        cursor: pointer;
        font-size: var(--fs-base);
      }
      .msg-edit-cancel {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-muted);
        border-radius: 8px;
        padding: 4px 10px;
        cursor: pointer;
        font-size: var(--fs-base);
      }
      .msg.typing {
        opacity: 0.6;
      }
      .msg-actions {
        display: flex;
        gap: 4px;
        margin-top: 6px;
        flex-wrap: wrap;
      }
      .msg-insert-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 7px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        font-size: var(--fs-sm);
        color: var(--text-dim);
        cursor: pointer;
        transition: all 0.15s;
      }
      .msg-insert-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        color: var(--text-dim);
        border-color: rgba(255, 255, 255, 0.2);
      }
      .msg-insert-btn:active {
        transform: scale(0.95);
      }
      #ai-web-search-inline.active {
        background: rgba(var(--primary-rgb), 0.15) !important;
        border-color: rgba(var(--primary-rgb), 0.45) !important;
        color: var(--primary-light) !important;
        box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.25);
      }
      /* ── Habit Emoji Picker ─────────────────── */
      .habit-emoji-opt {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.12s;
        user-select: none;
      }
      .habit-emoji-opt:hover {
        background: rgba(var(--primary-rgb),0.15);
        transform: scale(1.15);
      }
      .habit-emoji-opt.selected {
        border-color: var(--primary);
        background: rgba(var(--primary-rgb),0.2);
      }
      /* ── Habit Cards ───────────────────────── */
      .habit-card {
        background: rgba(255, 255, 255, 0.04);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        margin-bottom: 12px;
        border-left: 4px solid var(--primary);
        transition: background 0.2s;
      }
      .habit-card:hover {
        background: rgba(255, 255, 255, 0.06);
      }
      .habit-header-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
      }
      .habit-emoji-badge {
        font-size: 1.3rem;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        flex-shrink: 0;
      }
      .habit-name-text {
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--text-dim);
        flex: 1;
      }
      .habit-streak-badge {
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.12);
        padding: 2px 8px;
        border-radius: var(--radius-lg);
      }
      .habit-heatmap {
        display: grid;
        grid-template-columns: repeat(30, 1fr);
        gap: 3px;
        margin-bottom: 8px;
      }
      .habit-sq {
        aspect-ratio: 1;
        border-radius: var(--radius-xs);
        cursor: pointer;
        transition: transform 0.1s;
      }
      .habit-sq:hover {
        transform: scale(1.4);
      }
      .habit-sq.done {
        opacity: 1;
      }
      .habit-sq.empty {
        background: rgba(255, 255, 255, 0.07);
      }
      .habit-sq.today {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
      }
      .habit-progress-track {
        height: 4px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 2px;
        overflow: hidden;
        margin-bottom: 4px;
      }
      .habit-progress-fill {
        height: 100%;
        border-radius: 2px;
        transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .habit-progress-label {
        font-size: 0.75rem;
        color: var(--text-dim);
        display: flex;
        justify-content: space-between;
      }
      .habit-delete-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        font-size: 0.85rem;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all 0.15s;
        line-height: 1;
      }
      .habit-delete-btn:hover {
        color: var(--color-danger);
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.3);
      }
      /* ── Day Review Panel ─────────────────── */
      #day-review-panel {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 4001;
        background: var(--bg);
        flex-direction: column;
        overflow: hidden;
        -webkit-app-region: no-drag;
      }
      #day-review-panel.active {
        display: flex;
        animation: gn-overlay-in 1.2s both;
      }
      .dr-header {
        /* inherits from .fs-header */
      }
      .dr-header-icon {
        font-size: 1.1rem;
      }
      .dr-header-label {
        margin-right: 8px;
      }
      .dr-date-main {
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--text-dim);
      }
      .dr-header-actions {
        margin-left: auto;
        display: flex;
        gap: 8px;
      }
      .dr-ai-btn {
        background: linear-gradient(
          135deg,
          rgba(var(--primary-rgb), 0.3),
          rgba(139, 92, 246, 0.2)
        );
        border: 1px solid rgba(var(--primary-rgb), 0.4);
        color: var(--primary-light);
        border-radius: 10px;
        padding: 7px 16px;
        cursor: pointer;
        font-size: var(--fs-base);
        font-weight: 500;
        transition: all 0.2s;
      }
      .dr-ai-btn:hover {
        background: linear-gradient(
          135deg,
          rgba(var(--primary-rgb), 0.5),
          rgba(139, 92, 246, 0.35)
        );
      }
      .dr-close-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-dim);
        border-radius: 10px;
        padding: 7px 14px;
        cursor: pointer;
        font-size: var(--fs-md);
      }
      .dr-body {
        flex: 1;
        overflow-y: auto;
        padding: 24px 28px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-content: start;
      }
      .dr-section {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--radius-md);
        padding: 16px 18px;
      }
      .dr-section-title {
        font-size: var(--fs-sm);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .dr-focus-item[draggable="true"] { cursor: grab; }
      .dr-focus-item[draggable="true"]:active { cursor: grabbing; }
      .dr-focus-item.dr-focus-dragging { opacity: 0.35; }
      .dr-focus-item.dr-focus-drag-over { border-top: 2px solid var(--primary); margin-top: -2px; }
      .dr-event-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 10px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        margin-bottom: 6px;
        font-size: var(--fs-base);
        color: var(--text-dim);
      }
      .dr-event-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .dr-kanban-stats {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
      }
      .dr-kb-chip {
        flex: 1;
        text-align: center;
        padding: 8px 4px;
        border-radius: 10px;
        font-size: var(--fs-base);
      }
      .dr-kb-chip .dr-kb-num {
        font-size: 1.3rem;
        font-weight: 700;
        display: block;
      }
      .dr-task-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: var(--fs-base);
        color: var(--text-dim);
      }
      .dr-habit-today-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .dr-habit-check {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: var(--fs-md);
        transition: all 0.15s;
        flex-shrink: 0;
      }
      .dr-ai-summary {
        grid-column: 1/-1;
        background: rgba(var(--primary-rgb), 0.08);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: var(--radius-md);
        padding: 18px;
        font-size: 0.85rem;
        color: var(--text-dim);
        line-height: 1.6;
      }
      .dr-empty {
        color: var(--text-dim);
        font-size: var(--fs-base);
        padding: 8px 0;
        font-style: italic;
      }
      /* ── Mini Stats ── */
      .dr-mini-stats {
        grid-column: 1 / -1;
        display: flex;
        gap: 12px;
        justify-content: center;
      }
      .dr-stat-chip {
        flex: 1;
        text-align: center;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 10px 8px;
        font-size: 0.75rem;
        color: var(--text-dim);
      }
      .dr-stat-num {
        display: block;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-light);
        font-family: 'JetBrains Mono', monospace;
      }
      /* ── Carry-over ── */
      .dr-carry-section {
        grid-column: 1 / -1;
        background: rgba(251, 191, 36, 0.06);
        border-color: rgba(251, 191, 36, 0.15);
      }
      .dr-carry-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(251, 191, 36, 0.08);
        font-size: var(--fs-base);
        color: var(--text-dim);
      }
      .dr-carry-row:last-child { border-bottom: none; }
      .dr-carry-btn {
        background: rgba(251, 191, 36, 0.12);
        border: 1px solid rgba(251, 191, 36, 0.25);
        color: #fbbf24;
        border-radius: 6px;
        padding: 4px 10px;
        cursor: pointer;
        font-size: 0.75rem;
        font-family: inherit;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .dr-carry-btn:hover {
        background: rgba(251, 191, 36, 0.25);
        color: white;
      }
      /* ── Streak Badge ── */
      .dr-streak-badge {
        margin-left: auto;
        font-size: var(--fs-sm);
        color: #fb923c;
        font-weight: 600;
        white-space: nowrap;
      }
      /* ── Quick Note ── */
      .dr-quicknote-section {
        grid-column: 1 / -1;
      }
      .dr-quicknote-input {
        width: 100%;
        min-height: 80px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 10px 14px;
        color: var(--text-dim);
        font-family: inherit;
        font-size: 0.85rem;
        line-height: 1.5;
        resize: vertical;
        outline: none;
        transition: border-color 0.2s;
        box-sizing: border-box;
      }
      .dr-quicknote-input:focus {
        border-color: rgba(var(--primary-rgb), 0.4);
      }
      .dr-quicknote-input::placeholder {
        color: var(--text-muted);
        font-style: italic;
      }

      /* ── Greeting Row (greeting + weather + energy inline) ───── */
      .dr-greeting-row {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 0;
        gap: 8px;
      }
      .dr-greet-left {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .dr-greet-text {
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
      }
      .dr-greet-weather {
        font-size: var(--fs-base);
        font-weight: 500;
        color: var(--text-dim);
        background: rgba(var(--primary-rgb), 0.08);
        padding: 2px 8px;
        border-radius: 12px;
        border: 1px solid rgba(var(--primary-rgb), 0.12);
        white-space: nowrap;
      }
      .dr-energy-inline {
        display: flex;
        gap: 3px;
        flex-shrink: 0;
      }
      .dr-energy-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1.5px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.04);
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 1.05rem;
        line-height: 1;
      }
      .dr-energy-btn:hover {
        border-color: rgba(var(--primary-rgb), 0.3);
        background: rgba(var(--primary-rgb), 0.08);
        transform: scale(1.1);
      }
      .dr-energy-active {
        border-color: rgba(var(--primary-rgb), 0.5) !important;
        background: rgba(var(--primary-rgb), 0.15) !important;
        box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.15);
        transform: scale(1.08);
      }

      /* ── Timeline ────────────────────────────────────────────── */
      .dr-timeline-section {
        grid-column: 1 / -1;
      }
      .dr-timeline-track {
        position: relative;
        height: 42px;
        background: rgba(255,255,255,0.03);
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.06);
        margin: 8px 0 4px;
        overflow: visible;
      }
      .dr-timeline-hour {
        position: absolute;
        bottom: 2px;
        font-size: 0.6rem;
        color: var(--text-muted);
        transform: translateX(-50%);
        pointer-events: none;
      }
      .dr-timeline-now {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--primary);
        opacity: 0.7;
        z-index: 2;
        border-radius: 1px;
      }
      .dr-timeline-now::after {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        width: 8px;
        height: 8px;
        background: var(--primary);
        border-radius: 50%;
      }
      .dr-timeline-event {
        position: absolute;
        top: 4px;
        transform: translateX(-50%);
        z-index: 1;
        cursor: default;
      }
      .dr-timeline-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid rgba(0,0,0,0.2);
      }
      .dr-timeline-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        font-size: var(--fs-sm);
        color: var(--text-dim);
        padding: 2px 4px;
      }
      .dr-timeline-leg-item {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
      }
      .dr-timeline-leg-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      /* ── AI Smart Plan ───────────────────────────────────────── */
      .dr-aiplan-section {
        grid-column: 1 / -1;
        text-align: center;
        padding: 4px 0;
      }
      .dr-aiplan-btn {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.04));
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        color: var(--primary-light);
        padding: 10px 24px;
        border-radius: 12px;
        font-size: var(--fs-md);
        font-family: inherit;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        width: 100%;
      }
      .dr-aiplan-btn:hover {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--primary-rgb), 0.1));
        border-color: rgba(var(--primary-rgb), 0.4);
        transform: scale(1.02);
      }
      .dr-aiplan-btn:disabled {
        opacity: 0.6;
        cursor: wait;
        transform: none;
      }
      .dr-aiplan-result {
        text-align: left;
        font-size: var(--fs-base);
        line-height: 1.65;
        color: var(--text-main);
        padding: 8px 4px;
        white-space: pre-wrap;
      }

      .ai-input-area {
        padding: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        gap: 8px;
      }
      #ai-input {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 8px 12px;
        color: white;
        flex: 1;
        outline: none;
        font-family: inherit;
        font-size: var(--fs-md);
      }
      #ai-input:focus {
        border-color: var(--primary);
      }
      .ai-send-btn {
        background: var(--primary);
        border: none;
        color: white;
        border-radius: 10px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        font-size: 1rem;
        transition: 0.2s;
      }
      .ai-send-btn:hover {
        opacity: 0.85;
      }
      /* AI streaming cursor */
      .ai-cursor {
        display: inline-block;
        animation: blink-cursor 0.7s step-end infinite;
        color: var(--primary);
        font-size: 0.9em;
      }
      @keyframes blink-cursor {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }
      /* Quick Prompts */
      .ai-quick-prompts {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding: 6px 10px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .ai-qp-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-lg);
        color: var(--text-dim);
        font-size: 0.75rem;
        padding: 3px 10px;
        cursor: pointer;
        transition: 0.15s;
        font-family: inherit;
      }
      .ai-qp-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }
      /* AI Actions Dropdown */
      .ai-actions-wrap {
        position: relative;
        padding: 7px 10px 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .ai-actions-trigger {
        background: rgba(var(--primary-rgb), 0.15);
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: 10px;
        color: var(--primary-light);
        padding: 5px 10px;
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: 0.15s;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .ai-actions-trigger:hover {
        background: rgba(var(--primary-rgb), 0.28);
      }
      .ai-actions-trigger .trigger-arrow {
        transition: transform 0.2s;
        font-size: var(--fs-sm);
      }
      .ai-actions-trigger.open .trigger-arrow {
        transform: rotate(180deg);
      }
      .ai-model-select-inline {
        background: rgba(var(--primary-rgb), 0.1);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 10px;
        color: var(--primary-light);
        padding: 6px 10px;
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        outline: none;
        min-width: 0;
        transition: background 0.15s;
      }
      .ai-model-select-inline:hover {
        background: rgba(var(--primary-rgb), 0.2);
      }
      .ai-clear-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.6);
        padding: 6px 11px;
        font-size: 0.85rem;
        cursor: pointer;
        font-family: inherit;
        transition: 0.15s;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1;
      }
      .ai-clear-btn:hover {
        background: rgba(229, 57, 53, 0.15);
        border-color: rgba(229, 57, 53, 0.3);
        color: #e57373;
      }
      .ai-actions-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 340px;
        background: var(--bg-solid);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: var(--radius-md);
        z-index: 200;
        box-shadow:
          0 8px 40px rgba(0, 0, 0, 0.8),
          0 0 0 1px rgba(var(--primary-rgb), 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        overflow: hidden;
        max-height: 420px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
      }
      .ai-launcher-wrap {
        position: relative;
      }
      .ai-launcher-dropdown {
        left: auto;
        right: 0;
        top: calc(100% + 8px);
        min-width: min(92vw, 340px);
        width: min(92vw, 340px);
        max-width: calc(100vw - 12px);
        max-height: none;
        overflow: visible;
        overflow-y: visible;
        z-index: 10000;
      }
      .ai-actions-dropdown.open {
        display: block;
        animation: gn-popup-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
      }
      /* dropdownSlideIn — removed, now using gn-popup-in engine keyframe */
      .ai-action-group {
        padding: 8px 0 4px;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.07);
      }
      .ai-action-group:last-child {
        border-bottom: none;
        padding-bottom: 8px;
      }
      .ai-action-group-label {
        font-size: var(--fs-sm);
        color: rgba(165, 180, 252, 0.7);
        padding: 0 14px 6px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
      }
      .ai-action-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        min-height: 34px;
        cursor: pointer;
        color: rgba(226, 232, 240, 0.75);
        font-size: var(--fs-base);
        line-height: 1.25;
        transition:
          background 0.12s,
          color 0.12s,
          border-color 0.12s;
        border: none;
        border-left: 2px solid transparent;
        background: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
      }
      .ai-action-item:hover {
        background: rgba(var(--primary-rgb), 0.14);
        color: var(--primary-light);
        border-left-color: rgba(var(--primary-rgb), 0.55);
      }
      .ai-action-item:focus-visible {
        background: rgba(var(--primary-rgb), 0.14);
        color: var(--primary-light);
        border-left-color: rgba(var(--primary-rgb), 0.55);
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.35);
      }
      .ai-action-item .ai-action-icon {
        font-size: var(--fs-md);
        width: 22px;
        text-align: center;
        flex-shrink: 0;
        opacity: 0.85;
      }
      .ai-action-item:hover .ai-action-icon {
        opacity: 1;
      }
      .ai-action-item:focus-visible .ai-action-icon {
        opacity: 1;
      }
      .ai-action-item .ai-action-desc {
        font-size: var(--fs-sm);
        color: rgba(148, 163, 184, 0.7);
        margin-left: auto;
      }
      .ai-action-item:hover .ai-action-desc {
        color: rgba(148, 163, 184, 0.85);
      }
      /* Voice input recording animation */
      #ai-voice-btn.recording {
        background: #ef4444 !important;
        animation: pulse-rec 0.8s infinite alternate;
      }
      @keyframes pulse-rec {
        from {
          opacity: 1;
        }
        to {
          opacity: 0.5;
        }
      }
      /* Inline AI toolbar */
      #inline-ai-toolbar {
        position: fixed;
        z-index: 9999;
        display: none;
        gap: 4px;
        background: var(--card-bg-solid);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        padding: 4px 6px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
        align-items: center;
        -webkit-app-region: no-drag;
      }
      .inline-ai-btn {
        background: none;
        border: none;
        color: var(--text-dim);
        font-size: var(--fs-base);
        padding: 3px 7px;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
        white-space: nowrap;
        transition: 0.15s;
      }
      .inline-ai-btn:hover {
        background: var(--primary);
        color: white;
      }
      /* Right Sidebar */
      .sidebar-right {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow-y: auto;
        position: relative;
        min-width: 200px;
        max-width: 600px;
        border-radius: 16px;
      }
      .sidebar-right .sidebar-resize-handle {
        right: auto;
        left: -6px;
      }
      .sidebar-right::-webkit-scrollbar {
        width: 4px;
      }
      .sidebar-right::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
      }
      .widget {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 16px;
        padding: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition:
          border-color 0.15s,
          box-shadow 0.15s;
      }
      .widget.dragging {
        opacity: 0.35;
        border-style: dashed;
      }
      .widget.drag-over {
        border-color: rgba(var(--primary-rgb), 0.6);
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
      }
      .widget-label {
        font-size: 0.75rem;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.6rem;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .widget-drag-handle {
        cursor: grab;
        color: rgba(255, 255, 255, 0.15);
        font-size: var(--fs-md);
        line-height: 1;
        flex-shrink: 0;
        transition: color 0.15s;
        user-select: none;
      }
      .widget-drag-handle:hover {
        color: rgba(255, 255, 255, 0.45);
      }
      .widget-drag-handle:active {
        cursor: grabbing;
      }
      .weather-row {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .weather-temp {
        font-size: 1.4rem;
        font-weight: 600;
        font-family: "JetBrains Mono";
      }
      #weather-forecast {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
      }
      #weather-forecast::-webkit-scrollbar {
        height: 6px;
      }
      #weather-forecast::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-xs);
      }
      #weather-forecast::-webkit-scrollbar-thumb {
        background: rgba(var(--primary-rgb), 0.4);
        border-radius: var(--radius-xs);
      }
      #weather-forecast::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--primary-rgb), 0.6);
      }
      .crypto-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
        font-size: 0.92rem;
        color: var(--text-main);
      }
      .price {
        color: var(--success);
        font-family: "JetBrains Mono";
        font-weight: 500;
      }
      .price.down {
        color: var(--color-danger);
      }

      /* Pomodoro */
      .pomo-display {
        font-family: "JetBrains Mono";
        font-size: 1.7rem;
        font-weight: 700;
        text-align: center;
        color: white;
        letter-spacing: 0.05em;
        text-shadow: 0 0 20px var(--primary);
        border-radius: 8px;
        padding: 2px 6px;
        transition: background 0.2s;
      }
      .pomo-display:hover {
        background: rgba(var(--primary-rgb),0.08);
      }
      .pomo-stepper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        animation: gn-popup-in 0.2s ease-out;
      }
      /* pomoStepIn — removed, now using gn-popup-in engine keyframe */

      /* Theme dropdown panel */
      .theme-dropdown-panel {
        background: var(--card-bg-solid);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
        max-height: 80vh;
        overflow-y: auto;
      }
      .theme-dropdown-panel::-webkit-scrollbar { width: 4px; }
      .theme-dropdown-panel::-webkit-scrollbar-track { background: transparent; }
      .theme-dropdown-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
      .jm-bottom-section::-webkit-scrollbar { width: 4px; }
      .jm-bottom-section::-webkit-scrollbar-track { background: transparent; }
      .jm-bottom-section::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb,99,102,241),0.35); border-radius: 2px; }
      .jm-bottom-section::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb,99,102,241),0.55); }
      .theme-dropdown-panel input[type="range"] {
        -webkit-appearance: none; height: 4px; border-radius: 2px;
        background: rgba(255,255,255,0.1); outline: none;
      }
      .theme-dropdown-panel input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
        background: var(--primary-light); cursor: pointer;
        box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.4);
      }

      /* ✨ Animation type cards (inside theme-dropdown-panel) */
      .anim-type-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
      }
      .anim-type-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 4px;
        border-radius: 8px;
        background: rgba(255,255,255,0.04);
        border: 1.5px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
        user-select: none;
      }
      .anim-type-card:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(var(--primary-rgb), 0.3);
      }
      .anim-type-card.active {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary-light);
        box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.2);
      }
      .anim-card-emoji {
        font-size: 1.2rem;
        line-height: 1;
      }
      .anim-card-label {
        font-size: 0.55rem;
        font-weight: 600;
        color: var(--text-dim);
        text-align: center;
        line-height: 1.1;
        letter-spacing: 0.02em;
      }
      .anim-type-card.active .anim-card-label {
        color: var(--primary-light);
      }

      /* ── Integrations Hub ─────────────────────────────────── */
      .integ-modal-inner {
        background: var(--card-bg-solid);
        border: 1px solid var(--glass-border);
      }
      .integ-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
      }
      /* Semi-transparent overlay in both modes */
      #integrations-hub-modal.gn-modal-overlay {
        background: rgba(0,0,0,0.45);
      }
      body.light-mode #integrations-hub-modal.gn-modal-overlay {
        background: rgba(0,0,0,0.3);
      }
      body.light-mode .integ-modal-inner {
        background: rgba(255,255,255,0.82);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      body.light-mode .integ-card {
        background: rgba(0,0,0,0.04);
        border-color: rgba(0,0,0,0.1);
      }

      /* ①④ Light / Day mode overrides — applied via body.light-mode */
      body.light-mode {
        --bg-solid: #f0f4ff;
        --card-bg-solid: #ffffff;
        --card-bg: #ffffff;
        --text-main: #0f172a;
        --text-dim: #475569;
        --text-muted: #64748b;
        --glass-border: rgba(0,0,0,0.15);
        --glass-bg: rgba(0, 0, 0, 0.04);
        --input-bg: rgba(0,0,0,0.04);
        background: #f0f4ff !important;
        color: #0f172a !important;
      }
      body.light-mode .sidebar {
        background: #e8edf8 !important;
        border-right: 1px solid rgba(0,0,0,0.1) !important;
      }
      body.light-mode .note-item {
        color: #1e293b !important;
      }
      body.light-mode .note-item:hover,
      body.light-mode .note-item.active {
        background: rgba(var(--primary-rgb),0.12) !important;
      }
      body.light-mode .tree-item {
        color: #334155 !important;
      }
      body.light-mode .tree-item:hover,
      body.light-mode .folder-item:hover,
      body.light-mode .recent-note-item:hover {
        background: rgba(var(--primary-rgb),0.1) !important;
        color: #1e293b !important;
      }
      body.light-mode .tree-item.active {
        background: rgba(var(--primary-rgb),0.15) !important;
        color: #1e293b !important;
      }
      body.light-mode .header {
        background: rgba(240,244,255,0.95) !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
      }
      body.light-mode .editor-area {
        background: #f8faff !important;
        color: #0f172a !important;
      }
      body.light-mode #note-title {
        color: #0f172a !important;
        background: transparent !important;
      }
      body.light-mode #preview-area {
        color: #0f172a !important;
        background: #ffffff !important;
      }
      body.light-mode .widget {
        background: rgba(255,255,255,0.9) !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        color: #1e293b !important;
      }
      body.light-mode .widget-label {
        color: #475569 !important;
      }
      body.light-mode .aside {
        background: #eef2fc !important;
      }
      body.light-mode .section-label {
        color: #64748b !important;
      }
      body.light-mode .folder-item {
        color: #334155 !important;
      }
      body.light-mode .brand {
        color: #1e293b !important;
        text-shadow: none !important;
      }
      body.light-mode .hdr-btn {
        color: #334155 !important;
      }
      body.light-mode .hdr-btn:hover {
        background: rgba(var(--primary-rgb),0.1) !important;
      }
      body.light-mode .search-input {
        background: rgba(0,0,0,0.06) !important;
        color: #0f172a !important;
        border-color: rgba(0,0,0,0.12) !important;
      }
      body.light-mode .pomo-display {
        color: #1e293b !important;
        text-shadow: none !important;
      }
      body.light-mode .pomo-btn {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        color: #475569 !important;
      }
      body.light-mode .pomo-btn:hover {
        background: rgba(var(--primary-rgb), 0.12) !important;
        border-color: rgba(var(--primary-rgb), 0.3) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .pomo-btn.active {
        background: rgba(var(--primary-rgb), 0.15) !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
      }
      body.light-mode .pomo-progress {
        background: rgba(0, 0, 0, 0.06) !important;
      }
      body.light-mode .pomo-sessions {
        color: #64748b !important;
      }
      body.light-mode .pomo-label {
        color: #64748b !important;
      }
      body.light-mode .weather-temp {
        color: #1e293b !important;
      }
      body.light-mode .crypto-row {
        color: #334155 !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
      }
      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;
      }
      body.light-mode .welcome-card {
        background: rgba(255, 255, 255, 0.85) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
      }
      body.light-mode .welcome-card h1 {
        background: linear-gradient(to bottom right, #1e293b 30%, var(--primary)) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
      body.light-mode .welcome-sub {
        color: #64748b !important;
      }
      body.light-mode .msg.bot {
        background: rgba(230,235,255,0.95) !important;
        color: #1e293b !important;
        border-color: rgba(var(--primary-rgb),0.2) !important;
      }
      body.light-mode .msg.user {
        background: rgba(var(--primary-rgb),0.18) !important;
        color: #1e1b4b !important;
      }
      body.light-mode .kanban-overlay {
        background: #f0f4ff !important;
      }
      body.light-mode .kanban-header h2 {
        color: #1e293b !important;
      }
      body.light-mode .kanban-board,
      body.light-mode .kanban-col {
        background: #eef2fc !important;
        border-color: rgba(0,0,0,0.18) !important;
      }
      body.light-mode .kanban-col-title {
        color: #1e293b !important;
        border-bottom-color: rgba(0,0,0,0.14) !important;
      }
      body.light-mode .kanban-card {
        background: #ffffff !important;
        color: #1e293b !important;
        border-color: rgba(0,0,0,0.08) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
      }
      body.light-mode .kanban-card-title {
        color: #1e293b !important;
      }
      body.light-mode .kanban-card-footer {
        color: #64748b !important;
      }
      body.light-mode .kanban-card:hover {
        background: rgba(var(--primary-rgb),0.06) !important;
        border-color: var(--primary) !important;
      }
      body.light-mode .kb-due {
        color: #475569 !important;
        background: rgba(0,0,0,0.05) !important;
      }
      body.light-mode .kb-due.overdue {
        color: #dc2626 !important;
        background: rgba(239,68,68,0.1) !important;
      }
      body.light-mode .kb-note-badge {
        color: var(--primary-dark) !important;
        background: rgba(var(--primary-rgb),0.1) !important;
      }
      body.light-mode .kb-days-badge {
        color: #64748b !important;
        background: rgba(0,0,0,0.05) !important;
      }
      body.light-mode .kb-sp-badge {
        color: var(--primary-dark) !important;
        background: rgba(var(--primary-rgb),0.1) !important;
        border-color: rgba(var(--primary-rgb),0.25) !important;
      }
      body.light-mode .kb-created-badge {
        color: #64748b !important;
      }
      body.light-mode .kanban-add {
        border-color: rgba(0,0,0,0.12) !important;
        color: #64748b !important;
      }
      body.light-mode .kanban-add:hover {
        border-color: var(--primary) !important;
        color: var(--primary) !important;
      }
      body.light-mode .kb-tool-btn {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #475569 !important;
      }
      body.light-mode .kb-tool-btn:hover {
        background: rgba(var(--primary-rgb),0.1) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .kb-filter-chip {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #475569 !important;
      }
      body.light-mode .kb-filter-chip:hover {
        border-color: rgba(var(--primary-rgb),0.4) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .kb-filter-chip.active {
        background: rgba(var(--primary-rgb),0.12) !important;
        border-color: rgba(var(--primary-rgb),0.4) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .kb-filters-row {
        color: #64748b !important;
      }
      body.light-mode .kanban-velocity {
        color: #475569 !important;
      }
      body.light-mode .kb-quick-add-input {
        background: rgba(0,0,0,0.03) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #1e293b !important;
      }
      body.light-mode .kanban-search-wrap input {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #1e293b !important;
      }
      body.light-mode .kanban-prio-sel {
        background: #ffffff !important;
        border-color: rgba(0,0,0,0.15) !important;
        color: #334155 !important;
      }
      body.light-mode .kanban-prio-sel:hover {
        border-color: rgba(var(--primary-rgb),0.4) !important;
      }
      body.light-mode .kanban-prio-sel option {
        background: #ffffff !important;
        color: #1e293b !important;
      }
      body.light-mode .kv-chip {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .kv-chip .kv-label {
        color: #475569 !important;
      }
      body.light-mode .kb-preset-btn {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #475569 !important;
      }
      body.light-mode .kb-preset-btn:hover {
        background: rgba(var(--primary-rgb),0.1) !important;
        border-color: rgba(var(--primary-rgb),0.3) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .kb-preset-btn.active {
        background: rgba(var(--primary-rgb),0.12) !important;
        border-color: rgba(var(--primary-rgb),0.4) !important;
        color: var(--primary-dark) !important;
      }
      /* Habit modal light mode */
      body.light-mode #add-habit-modal {
        background: rgba(0,0,0,0.3) !important;
      }
      body.light-mode #add-habit-modal > div {
        background: #ffffff !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
      }
      body.light-mode #add-habit-modal > div > div:first-child {
        color: #1e293b !important;
      }
      body.light-mode #add-habit-modal input {
        background: #f1f5f9 !important;
        border-color: rgba(0,0,0,0.12) !important;
        color: #1e293b !important;
      }
      body.light-mode #add-habit-modal button[data-action="closeAddHabitModal"] {
        border-color: rgba(0,0,0,0.15) !important;
        color: #475569 !important;
      }
      /* Habit tracker cards light mode */
      body.light-mode .habit-card {
        background: #ffffff !important;
        border-top-color: rgba(0,0,0,0.08) !important;
        border-right-color: rgba(0,0,0,0.08) !important;
        border-bottom-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .habit-card:hover {
        background: #f5f3ff !important;
      }
      body.light-mode .habit-name-text {
        color: #1e293b !important;
      }
      body.light-mode .habit-sq.empty {
        background: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .habit-sq.today {
        box-shadow: 0 0 0 2px rgba(0,0,0,0.3) !important;
      }
      body.light-mode .habit-progress-track {
        background: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .habit-progress-label {
        color: #475569 !important;
      }
      body.light-mode .habit-streak-badge {
        color: #c2410c !important;
        background: rgba(234,88,12,0.1) !important;
      }
      body.light-mode .habit-delete-btn {
        color: var(--text-muted) !important;
      }
      body.light-mode #dashboard-view {
        background: rgba(240,244,255,0.97) !important;
      }
      body.light-mode .dash-title {
        color: #0f172a !important;
      }
      /* Dashboard close uses .cal-close-btn — light-mode handled by .cal-close-btn rules */
      body.light-mode .dash-card {
        background: #ffffff !important;
        border-color: rgba(0,0,0,0.08) !important;
        color: #1e293b !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
      }
      body.light-mode .dash-card h3 {
        color: #475569 !important;
      }
      body.light-mode .dash-card .sub {
        color: #64748b !important;
      }
      body.light-mode .hm-cell {
        background: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .hm-cell.h1 { background: rgba(var(--primary-rgb),0.2) !important; }
      body.light-mode .hm-cell.h2 { background: rgba(var(--primary-rgb),0.4) !important; }
      body.light-mode .hm-cell.h3 { background: rgba(var(--primary-rgb),0.6) !important; }
      body.light-mode .hm-cell.h4 { background: rgba(var(--primary-rgb),0.85) !important; }
      body.light-mode .hh-cell {
        background: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .hh-cell.h1 { background: rgba(var(--primary-rgb),0.2) !important; }
      body.light-mode .hh-cell.h2 { background: rgba(var(--primary-rgb),0.4) !important; }
      body.light-mode .hh-cell.h3 { background: rgba(var(--primary-rgb),0.6) !important; }
      body.light-mode .hh-cell.h4 { background: rgba(var(--primary-rgb),0.85) !important; }
      body.light-mode .hh-label,
      body.light-mode .hh-hour-label {
        color: #475569 !important;
      }
      body.light-mode #weekly-report-btn {
        background: rgba(var(--primary-rgb),0.1) !important;
        border-color: rgba(var(--primary-rgb),0.25) !important;
      }
      /* light-mode .theme-dropdown-panel — moved to audit-fix batch (line ~8997) */
      body.light-mode .anim-type-card {
        background: rgba(0,0,0,0.03) !important;
      }
      body.light-mode .anim-type-card:hover {
        background: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .anim-type-card.active {
        background: rgba(var(--primary-rgb), 0.12) !important;
      }
      body.light-mode .theme-dropdown-panel input[type="range"] {
        background: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .tool-btn {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        color: #475569 !important;
      }
      body.light-mode .tool-btn:hover {
        background: rgba(var(--primary-rgb), 0.1) !important;
        color: var(--primary-dark) !important;
        border-color: rgba(var(--primary-rgb), 0.3) !important;
      }
      body.light-mode .fmt-btn {
        color: #1e293b !important;
      }
      body.light-mode .fmt-btn:hover {
        background: rgba(var(--primary-rgb), 0.12) !important;
        color: var(--primary-dark) !important;
        border-color: rgba(var(--primary-rgb), 0.25) !important;
      }
      body.light-mode .fmt-select {
        background: rgba(0,0,0,0.05) !important;
        border-color: rgba(0,0,0,0.15) !important;
        color: #1e293b !important;
      }
      body.light-mode .fmt-select option {
        background: #fff !important;
        color: #1e293b !important;
      }
      body.light-mode .fmt-separator {
        background: rgba(0,0,0,0.12) !important;
      }
      body.light-mode .ai-chat-toggle {
        background: rgba(var(--primary-rgb), 0.15) !important;
        border-color: rgba(var(--primary-rgb), 0.35) !important;
        color: var(--primary-dark) !important;
        opacity: 1 !important;
      }
      body.light-mode .ai-chat-toggle:hover {
        background: rgba(var(--primary-rgb), 0.25) !important;
        border-color: rgba(var(--primary-rgb), 0.5) !important;
        opacity: 1 !important;
      }
      body.light-mode .ai-panel {
        background: #f0f4ff !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        color: #1e293b !important;
      }
      body.light-mode .ai-header {
        border-bottom-color: rgba(0, 0, 0, 0.08) !important;
        color: #1e293b !important;
      }
      body.light-mode .sidebar-right {
        color: #1e293b !important;
      }
      body.light-mode #ai-input {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        color: #1e293b !important;
      }
      body.light-mode .ai-input-area {
        border-top-color: rgba(0, 0, 0, 0.08) !important;
      }
      body.light-mode .ai-send-btn {
        color: #fff !important;
      }
      /* light-mode #inline-ai-toolbar — moved to audit-fix batch (line ~8976) */
      body.light-mode .inline-ai-btn {
        color: #334155 !important;
      }
      body.light-mode .inline-ai-btn:hover {
        background: rgba(var(--primary-rgb), 0.1) !important;
        color: var(--primary-dark) !important;
      }
      /* AI inline popup (AI ответ) */
      body.light-mode .inline-ai-popup {
        background: #f0f4ff !important;
        border-color: rgba(var(--primary-rgb), 0.25) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15) !important;
        color: #1e293b !important;
      }
      body.light-mode .inline-ai-popup > div {
        color: #1e293b !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
      }
      body.light-mode .inline-ai-popup #inline-ai-popup-body {
        color: #334155 !important;
      }
      body.light-mode .inline-ai-popup input {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 0, 0, 0.12) !important;
        color: #1e293b !important;
      }
      body.light-mode .inline-ai-popup button {
        color: #475569 !important;
      }
      body.light-mode .inline-ai-popup button[style*="gradient"] {
        color: #fff !important;
      }
      /* AI auto-tag banner (AI ПРЕДЛАГАЕТ) */
      body.light-mode .auto-tag-banner {
        background: linear-gradient(135deg, #e8edf8, #dde4f8) !important;
        border-color: rgba(var(--primary-rgb), 0.3) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        color: #1e293b !important;
      }
      body.light-mode .auto-tag-banner div {
        color: #334155 !important;
      }
      body.light-mode .auto-tag-banner span {
        color: #334155 !important;
      }
      body.light-mode .auto-tag-banner #atb-dismiss {
        background: rgba(0, 0, 0, 0.06) !important;
        color: #64748b !important;
      }
      /* Note timer bar */
      body.light-mode #note-timer-bar {
        background: linear-gradient(135deg, #e8edf8, #dde4f8) !important;
        border-color: rgba(var(--primary-rgb), 0.25) !important;
        box-shadow: 0 -4px 24px rgba(var(--primary-rgb), 0.1) !important;
        color: #475569 !important;
      }
      body.light-mode #note-timer-bar span {
        color: #475569 !important;
      }
      body.light-mode #note-timer-bar #note-timer-display {
        color: #1e293b !important;
      }
      body.light-mode #note-timer-bar button {
        color: var(--primary-dark) !important;
      }
      body.light-mode .sidebar-right { background: #e8edf8 !important; border-left: 1px solid rgba(0,0,0,0.08) !important; color: #1e293b !important; }
      body.light-mode .ai-actions-dropdown { background: rgba(255,255,255,0.98) !important; border: 1px solid rgba(0,0,0,0.12) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important; }
      body.light-mode .ai-tool-menu { background: rgba(255,255,255,0.98) !important; border: 1px solid rgba(0,0,0,0.12) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important; }
      body.light-mode .ai-action-group { border-color: rgba(0,0,0,0.06) !important; }
      body.light-mode .ai-action-group-label { color: var(--primary) !important; }
      body.light-mode .ai-tool-menu-btn { color: #334155 !important; }
      body.light-mode .ai-tool-menu-btn:hover,
      body.light-mode .ai-tool-menu-btn:focus-visible { background: rgba(var(--primary-rgb),0.08) !important; color: #1e293b !important; border-left-color: rgba(var(--primary-rgb),0.45) !important; box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb),0.18) !important; }
      body.light-mode .ai-action-item { color: #334155 !important; }
      body.light-mode .ai-action-item:hover { background: rgba(var(--primary-rgb),0.08) !important; color: #1e293b !important; }
      body.light-mode .ai-action-item:focus-visible { background: rgba(var(--primary-rgb),0.08) !important; color: #1e293b !important; border-left-color: rgba(var(--primary-rgb),0.45) !important; box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb),0.18) !important; }
      body.light-mode .ai-action-item .ai-action-icon { background: rgba(var(--primary-rgb),0.08) !important; }
      body.light-mode .ai-action-item .ai-action-desc { color: var(--text-muted) !important; }
      body.light-mode .ai-actions-trigger { background: rgba(0,0,0,0.04) !important; color: #334155 !important; border-color: rgba(0,0,0,0.12) !important; }
      body.light-mode .ai-actions-trigger:hover { background: rgba(var(--primary-rgb),0.08) !important; }
      body.light-mode .ai-quick-prompts button { background: rgba(0,0,0,0.04) !important; color: #475569 !important; border-color: rgba(0,0,0,0.08) !important; }
      body.light-mode .ai-quick-prompts button:hover { background: rgba(var(--primary-rgb),0.1) !important; color: var(--primary-dark) !important; }

      /* ── Light mode: Panel / Header ── */
      body.light-mode .panel {
        background: rgba(255,255,255,0.85) !important;
        border-color: rgba(0,0,0,0.1) !important;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
      }
      body.light-mode .panel:hover {
        border-color: rgba(var(--primary-rgb),0.25) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
      }
      body.light-mode header.panel {
        background: rgba(240,244,255,0.95) !important;
      }
      body.light-mode .header-right .theme-selector {
        background: rgba(0,0,0,0.04) !important;
      }
      body.light-mode .t-btn.active-theme {
        border-color: #334155 !important;
      }
      body.light-mode .hdr-btn-purple {
        background: rgba(168,85,247,0.1) !important;
        color: #7c3aed !important;
      }
      body.light-mode .clock {
        color: #475569 !important;
      }
      body.light-mode .save-indicator {
        color: #16a34a !important;
      }

      /* ── Light mode: Sidebar left ── */
      body.light-mode .sidebar-left {
        background: #e8edf8 !important;
      }
      body.light-mode .sidebar-label {
        color: #64748b !important;
      }
      body.light-mode .sidebar-resize-handle::after {
        background: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .sidebar-resize-handle:hover::after,
      body.light-mode .sidebar-resize-handle.active::after {
        background: rgba(var(--primary-rgb),0.5) !important;
      }
      body.light-mode .folder-count {
        color: #64748b !important;
      }
      body.light-mode .notes-list::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12) !important;
      }

      /* ── Light mode: Tab bar ── */
      body.light-mode .tab-bar {
        background: rgba(240,244,255,0.6) !important;
      }
      body.light-mode .tab-item {
        background: rgba(0,0,0,0.03) !important;
        color: #475569 !important;
        border-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .tab-item:hover {
        background: rgba(var(--primary-rgb),0.08) !important;
        color: #1e293b !important;
      }
      body.light-mode .tab-item.active {
        background: rgba(var(--primary-rgb),0.12) !important;
        color: #1e293b !important;
        border-bottom-color: var(--primary) !important;
      }
      body.light-mode .tab-item .tab-close:hover {
        background: rgba(239,68,68,0.15) !important;
      }

      /* ── Light mode: Spotlight (Cmd+K) ── */
      body.light-mode .spotlight-box {
        background: rgba(255,255,255,0.98) !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.2) !important;
      }
      body.light-mode .spotlight-input {
        color: #0f172a !important;
      }
      body.light-mode .spotlight-input::placeholder {
        color: var(--text-muted) !important;
      }
      body.light-mode .spotlight-hint {
        color: #64748b !important;
        background: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .spotlight-input-wrap {
        border-bottom-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .spotlight-item {
        color: #334155 !important;
      }
      body.light-mode .spotlight-item .si-title {
        color: #1e293b !important;
      }
      body.light-mode .spotlight-item .si-preview {
        color: #64748b !important;
      }
      body.light-mode .spotlight-item:hover,
      body.light-mode .spotlight-item.selected {
        background: rgba(var(--primary-rgb),0.1) !important;
      }

      /* ── Light mode: Toast ── */
      body.light-mode .toast {
        background: rgba(255,255,255,0.95) !important;
        color: #1e293b !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
      }

      /* ── Light mode: Tag chips ── */
      body.light-mode .tag-chip {
        background: rgba(var(--primary-rgb),0.08) !important;
        border-color: rgba(var(--primary-rgb),0.2) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .tag-chip:hover {
        background: rgba(var(--primary-rgb),0.15) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .tag-chip.active-filter {
        background: var(--primary) !important;
        color: white !important;
      }
      body.light-mode .smart-badge-type {
        background: rgba(var(--primary-rgb), 0.08);
        border-color: rgba(var(--primary-rgb), 0.2);
        color: var(--primary-dark);
      }
      body.light-mode .smart-badge-entity {
        background: rgba(var(--primary-rgb), 0.05);
        color: var(--primary-dark);
        border-color: rgba(var(--primary-rgb), 0.12);
      }
      body.light-mode .smart-tag-btn {
        color: var(--primary-dark);
      }

      /* ── Light mode: Welcome screen ── */
      body.light-mode .welcome-version {
        color: rgba(71,85,105,0.5) !important;
      }
      body.light-mode .power-btn {
        background: rgba(var(--primary-rgb),0.08) !important;
        border-color: rgba(var(--primary-rgb),0.3) !important;
      }
      body.light-mode .power-btn svg path {
        fill: var(--primary-dark) !important;
      }

      /* ── Light mode: Editor toolbar ── */
      body.light-mode .editor-title-row {
        color: #0f172a !important;
      }
      body.light-mode .editor-stats {
        color: #64748b !important;
      }

      /* ── Light mode: Scrollbars global ── */
      body.light-mode ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12) !important;
      }
      body.light-mode ::-webkit-scrollbar-track {
        background: transparent !important;
      }

      /* ── Light mode: Format toolbar ── */
      body.light-mode .format-toolbar {
        background: rgba(0,0,0,0.03) !important;
        border-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .format-toolbar:hover {
        background: rgba(0,0,0,0.05) !important;
        border-color: rgba(var(--primary-rgb),0.2) !important;
      }
      body.light-mode .fmt-color-trigger {
        color: #475569 !important;
      }
      body.light-mode .fmt-palette {
        background: #fff !important;
        border-color: rgba(var(--primary-rgb),0.2) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
      }
      body.light-mode .fmt-palette-title {
        color: #64748b !important;
      }
      body.light-mode .fmt-palette-swatch:hover {
        border-color: #334155 !important;
        box-shadow: 0 0 6px rgba(0,0,0,0.2) !important;
      }
      body.light-mode .fmt-section-label {
        color: rgba(0,0,0,0.4) !important;
      }
      body.light-mode .table-insert-popup {
        background: #fff !important;
        border-color: rgba(var(--primary-rgb),0.2) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
      }
      body.light-mode .table-insert-popup label {
        color: #334155 !important;
      }
      body.light-mode .table-insert-popup input[type="number"] {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.12) !important;
        color: #0f172a !important;
      }

      /* ── Light mode: Content area / Editor ── */
      body.light-mode .content-area {
        color: #1e293b !important;
      }
      body.light-mode .content-area::placeholder {
        color: rgba(0,0,0,0.2) !important;
      }
      body.light-mode .editor-title {
        color: #0f172a !important;
      }
      body.light-mode .editor-title:focus,
      body.light-mode .editor-title:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.18) !important;
        border-radius: 6px !important;
      }
      body.light-mode .editor-title::placeholder {
        color: rgba(0,0,0,0.25) !important;
      }
      body.light-mode .preview-area {
        color: #1e293b !important;
        border: 1px solid rgba(0,0,0,0.22) !important;
        box-shadow: none !important;
      }
      body.light-mode .preview-area:focus,
      body.light-mode .preview-area:focus-visible {
        outline: none !important;
        border: 1px solid rgba(0,0,0,0.4) !important;
        box-shadow: none !important;
      }
      body.light-mode .preview-area:empty::before {
        color: rgba(0,0,0,0.25) !important;
      }
      body.light-mode .word-count {
        color: #64748b !important;
      }

      /* ── Light mode: Find & Replace ── */
      body.light-mode .find-replace-bar {
        background: rgba(240,244,255,0.95) !important;
        border-bottom-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .fr-row input {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.12) !important;
        color: #0f172a !important;
      }
      body.light-mode .fr-btn {
        background: rgba(0,0,0,0.04) !important;
        color: #475569 !important;
        border-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .fr-btn:hover {
        background: rgba(var(--primary-rgb),0.15) !important;
        color: #1e293b !important;
      }

      /* ── Light mode: Attachments panel ── */
      body.light-mode .attachments-panel {
        background: rgba(240,244,255,0.9) !important;
        border-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .attachments-collapse-btn { color: rgba(0,0,0,0.4) !important; }
      body.light-mode .attachments-collapse-btn:hover { color: rgba(0,0,0,0.7) !important; }
      body.light-mode .attachments-header {
        color: #64748b !important;
        border-bottom-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .attach-row-name {
        color: #1e293b !important;
      }
      body.light-mode .attach-row-size {
        color: #64748b !important;
      }
      body.light-mode .attach-row:hover {
        background: rgba(var(--primary-rgb),0.06) !important;
      }
      body.light-mode .attach-btn {
        background: rgba(0,0,0,0.04) !important;
        color: #475569 !important;
      }
      body.light-mode .attach-btn:hover {
        background: rgba(0,0,0,0.08) !important;
        color: #1e293b !important;
      }

      /* ── Light mode: Sidebar footer ── */
      body.light-mode .sidebar-footer {
        background: rgba(0,0,0,0.03) !important;
        color: #64748b !important;
      }

      /* ── Light mode: Widget drag handle ── */
      body.light-mode .widget-drag-handle {
        color: rgba(0,0,0,0.15) !important;
      }
      body.light-mode .widget-drag-handle:hover {
        color: rgba(0,0,0,0.4) !important;
      }

      /* ── Light mode: Day Review panel ── */
      body.light-mode #day-review-panel {
        background: #f0f4ff !important;
      }
      body.light-mode .dr-date-main {
        color: #0f172a !important;
      }
      body.light-mode .dr-close-btn {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #475569 !important;
      }
      body.light-mode .dr-section {
        background: rgba(255,255,255,0.8) !important;
        border-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .dr-event-row {
        background: rgba(0,0,0,0.03) !important;
        color: #1e293b !important;
      }
      body.light-mode .dr-task-row {
        color: #334155 !important;
        border-bottom-color: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .dr-ai-summary {
        background: rgba(var(--primary-rgb),0.06) !important;
        border-color: rgba(var(--primary-rgb),0.15) !important;
        color: #1e293b !important;
      }
      body.light-mode .dr-stat-chip {
        background: rgba(255,255,255,0.9) !important;
        border-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .dr-stat-num {
        color: var(--primary) !important;
      }
      body.light-mode .dr-carry-section {
        background: rgba(251,191,36,0.06) !important;
        border-color: rgba(251,191,36,0.15) !important;
      }
      body.light-mode .dr-carry-row {
        color: #334155 !important;
        border-bottom-color: rgba(251,191,36,0.1) !important;
      }
      body.light-mode .dr-quicknote-input {
        background: rgba(255,255,255,0.9) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #1e293b !important;
      }
      body.light-mode .dr-greet-weather {
        background: rgba(var(--primary-rgb), 0.06) !important;
        border-color: rgba(var(--primary-rgb), 0.1) !important;
        color: #475569 !important;
      }
      body.light-mode .dr-energy-btn {
        border-color: rgba(0,0,0,0.08) !important;
        background: rgba(0,0,0,0.02) !important;
      }
      body.light-mode .dr-energy-btn:hover {
        background: rgba(var(--primary-rgb), 0.06) !important;
      }
      body.light-mode .dr-energy-active {
        background: rgba(var(--primary-rgb), 0.1) !important;
        border-color: rgba(var(--primary-rgb), 0.3) !important;
      }
      body.light-mode .dr-timeline-track {
        background: rgba(0,0,0,0.02) !important;
        border-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .dr-timeline-hour {
        color: #94a3b8 !important;
      }
      body.light-mode .dr-timeline-legend {
        color: #475569 !important;
      }
      body.light-mode .dr-aiplan-btn {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02)) !important;
        border-color: rgba(var(--primary-rgb), 0.15) !important;
        color: var(--primary) !important;
      }
      body.light-mode .dr-aiplan-result {
        color: #1e293b !important;
      }

      /* ── Light mode: AI panel extras ── */
      body.light-mode .ai-messages::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1) !important;
      }
      body.light-mode .msg pre {
        background: rgba(0,0,0,0.04) !important;
        color: #334155 !important;
      }
      body.light-mode .msg-ua-btn {
        background: rgba(255,255,255,0.9) !important;
        border-color: rgba(0,0,0,0.12) !important;
        color: #475569 !important;
      }
      body.light-mode .msg-ua-btn:hover {
        background: rgba(var(--primary-rgb),0.1) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .msg-insert-btn {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.1) !important;
        color: #475569 !important;
      }
      body.light-mode .msg-insert-btn:hover {
        background: rgba(0,0,0,0.08) !important;
        color: #1e293b !important;
      }
      body.light-mode .ai-clear-btn {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.08) !important;
        color: #64748b !important;
      }
      body.light-mode .ai-clear-btn:hover {
        background: rgba(229,57,53,0.08) !important;
        color: #dc2626 !important;
      }
      body.light-mode .ai-model-select-inline {
        background: rgba(var(--primary-rgb),0.06) !important;
        border-color: rgba(var(--primary-rgb),0.2) !important;
        color: var(--primary-dark) !important;
      }
      body.light-mode .ai-qp-btn {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.08) !important;
        color: #475569 !important;
      }
      body.light-mode .ai-qp-btn:hover {
        background: var(--primary) !important;
        color: white !important;
      }
      body.light-mode .ai-quick-prompts {
        border-bottom-color: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .ai-actions-wrap {
        border-bottom-color: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .ai-header {
        border-bottom-color: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .ai-input-area {
        border-top-color: rgba(0,0,0,0.08) !important;
      }

      /* ── Light mode: Habit emoji picker ── */
      body.light-mode .habit-emoji-badge {
        background: rgba(0,0,0,0.05) !important;
      }

      /* ── Light mode: Kanban search/prio ── */
      body.light-mode .kanban-search-inp {
        background: rgba(0,0,0,0.04) !important;
        border-color: rgba(0,0,0,0.12) !important;
        color: #0f172a !important;
      }

      /* ── Light mode: body background gradients ── */
      body.light-mode {
        background-image:
          radial-gradient(circle at 10% 20%, rgba(var(--primary-rgb),0.08) 0%, transparent 40%),
          radial-gradient(circle at 90% 80%, rgba(168,85,247,0.06) 0%, transparent 40%),
          radial-gradient(circle at 50% 50%, rgba(236,72,153,0.04) 0%, transparent 60%) !important;
      }

      /* ── Light mode: Dynamic context menus (inline styles from JS) ── */
      body.light-mode #note-ctx-menu {
        background: #fff !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
      }
      body.light-mode #note-ctx-menu button {
        color: #334155 !important;
      }
      body.light-mode #note-ctx-menu div[style*="background:rgba(255,255,255"] {
        background: rgba(0,0,0,0.06) !important;
      }
      body.light-mode .ctx-menu {
        background: #fff !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
      }
      body.light-mode .ctx-menu button {
        color: #334155 !important;
      }

      /* ── Light mode: Version History modal (inline JS → #history-modal) ── */
      body.light-mode #history-modal > div {
        background: #fff !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
        color: #0f172a !important;
      }
      body.light-mode #history-modal > div > div:first-child {
        border-bottom-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode #history-modal > div > div:nth-child(2) > div:first-child {
        border-right-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode #history-modal > div > div:last-child {
        border-top-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode #history-modal > div div[style*="border:1px solid rgba(255"] {
        border-color: rgba(0,0,0,0.1) !important;
      }
      body.light-mode #history-modal > div div[style*="border-bottom:1px solid rgba(255"] {
        border-bottom-color: rgba(0,0,0,0.08) !important;
      }

      /* ── Light mode: Inline AI popup ── */
      body.light-mode #inline-ai-toolbar {
        background: #fff !important;
        border-color: rgba(0,0,0,0.12) !important;
        box-shadow: 0 6px 24px rgba(0,0,0,0.15) !important;
      }

      [data-widget-id="pomodoro"] .widget-label {
        justify-content: center;
      }
      .pomo-label {
        text-align: center;
        font-size: 0.75rem;
        color: var(--text-dim);
        margin-bottom: 0.25rem;
      }
      .pomo-btns {
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-top: 0.4rem;
        flex-wrap: nowrap;
      }
      .pomo-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--glass-border);
        color: white;
        border-radius: 10px;
        padding: 5px 8px;
        cursor: pointer;
        font-size: var(--fs-base);
        line-height: 1;
        transition: 0.2s;
        font-family: inherit;
        white-space: nowrap;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        flex: 1 1 0;
        min-width: 0;
      }
      .pomo-btn:hover {
        background: rgba(var(--primary-rgb), 0.2);
        border-color: var(--primary);
      }
      .pomo-btn.active {
        background: rgba(var(--primary-rgb), 0.3);
        border-color: var(--primary);
        color: var(--primary);
      }
      .pomo-progress {
        width: 100%;
        height: 3px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
        margin-top: 4px;
        overflow: hidden;
      }
      .pomo-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        border-radius: 2px;
        transition: width 1s linear;
      }
      .pomo-sessions {
        text-align: center;
        font-size: 0.75rem;
        color: var(--text-dim);
        margin-top: 3px;
      }

      /* Planner */
      .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: 6px;
        cursor: pointer;
        transition: 0.2s;
        position: relative;
        color: var(--text-dim);
      }
      .day:hover {
        background: rgba(255, 255, 255, 0.08);
        color: white;
      }
      .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(--accent);
        border-radius: 50%;
      }
      .day-tasks {
        font-size: 0.75rem;
        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;
      }

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

      .cal-header {
        position: relative;
        z-index: 10;
      }
      .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: 8px;
        padding: 0 16px;
        min-width: 40px;
        height: 34px;
        cursor: pointer;
        font-size: 1.2rem;
        line-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        pointer-events: all;
        position: relative;
        z-index: 2;
        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: white;
        transform: scale(1.08);
      }
      .cal-nav-btn:active {
        transform: scale(0.95);
        background: rgba(var(--primary-rgb), 0.4);
      }
      .cal-period {
        font-size: 1rem;
        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: 10px;
        padding: 4px;
        border: 1px solid rgba(255, 255, 255, 0.07);
      }
      .cal-tab {
        padding: 6px 16px;
        border-radius: 8px;
        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: white;
        background: rgba(255, 255, 255, 0.08);
      }

      .cal-today-btn {
        padding: 6px 14px;
        border-radius: 8px;
        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: white;
      }

      .cal-close-btn {
        margin-left: 8px;
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
        color: #f87171;
        border-radius: 8px;
        padding: 7px 14px;
        cursor: pointer;
        font-size: 0.85rem;
        font-family: inherit;
        transition: all 0.2s;
        -webkit-app-region: no-drag;
        pointer-events: all;
        user-select: none;
        position: relative;
        z-index: 100;
      }
      .cal-close-btn:hover {
        background: rgba(239, 68, 68, 0.35);
        border-color: rgba(239, 68, 68, 0.5);
        color: white;
        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: 1;
      }

      /* ── 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: rgba(255, 255, 255, 0.35);
        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: 0.85rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        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: 6px;
        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: #fde68a;
        border-left-color: var(--color-warning);
      }
      .cal-event.type-planner {
        background: rgba(34, 197, 94, 0.18);
        color: #86efac;
        border-left-color: var(--color-success);
      }
      .cal-event.type-kanban {
        background: rgba(236, 72, 153, 0.2);
        color: #f9a8d4;
        border-left-color: #ec4899;
      }

      .cal-more {
        font-size: 0.75rem;
        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: 1.3rem;
        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: 50%;
        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: 6px;
        padding: 3px 6px;
        font-size: var(--fs-sm);
        font-weight: 500;
        cursor: grab;
        overflow: hidden;
        transition:
          filter 0.15s,
          transform 0.15s;
        z-index: 2;
        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 #f59e0b;
      }
      .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 #22c55e;
      }
      .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 #ec4899;
      }

      /* Conflict indicator — pulsing red outline */
      .cal-conflict {
        border-left: 3px solid #ef4444 !important;
        box-shadow: 0 0 0 1px rgba(239,68,68,0.35), inset 0 0 0 1px rgba(239,68,68,0.15);
        position: relative;
        animation: calConflictPulse 2s ease-in-out infinite;
      }
      @keyframes calConflictPulse {
        0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.35), inset 0 0 0 1px rgba(239,68,68,0.15); }
        50%       { box-shadow: 0 0 0 3px rgba(239,68,68,0.5),  inset 0 0 0 1px rgba(239,68,68,0.25); }
      }
      .cal-conflict::after {
        content: "⚠";
        position: absolute;
        top: 3px;
        right: 5px;
        font-size: 0.65rem;
        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 */
      .cal-month-conflict-dot {
        display: inline-block; width: 5px; height: 5px;
        background: #ef4444; border-radius: 50%;
        margin-left: 3px; vertical-align: middle;
        animation: calConflictPulse 2s ease-in-out infinite;
      }

      /* Current time line */
      .week-now-line {
        position: absolute;
        left: 0;
        right: 0;
        border-top: 2px solid #ef4444;
        z-index: 10;
        pointer-events: none;
      }
      .week-now-line::before {
        content: "";
        position: absolute;
        left: -4px;
        top: -4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ef4444;
      }

      /* ── 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: 1.4rem;
        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: 10px;
        padding: 6px 10px;
        font-size: var(--fs-base);
        font-weight: 500;
        cursor: grab;
        transition:
          filter 0.15s,
          transform 0.15s;
        z-index: 2;
        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 #f59e0b;
      }
      .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 #22c55e;
      }
      .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 #ec4899;
      }

      /* Add event button in cells */
      .cal-add-event-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        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: 18px;
        text-align: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s;
      }
      .cal-month-cell:hover .cal-add-event-btn {
        opacity: 1;
      }

      /* Event Modal */
      #cal-event-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        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 1.2s 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 1.2s 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: 1.1rem;
        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: 10px;
        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: 10px;
        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: 10px;
        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: white;
      }
      .cal-delete-btn {
        padding: 10px 16px;
        border-radius: 10px;
        border: 1px solid rgba(239, 68, 68, 0.25);
        background: none;
        color: #f87171;
        font-size: var(--fs-md);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s;
        margin-right: auto;
      }
      .cal-delete-btn:hover {
        background: rgba(239, 68, 68, 0.15);
      }

      /* Day events list in Day view */
      .day-agenda-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        margin: 8px;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.15s;
        border-left: 4px solid;
      }
      .day-agenda-item:hover {
        filter: brightness(1.1);
      }
      .day-agenda-item.type-note {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary);
      }
      .day-agenda-item.type-reminder {
        background: rgba(245, 158, 11, 0.15);
        border-color: var(--color-warning);
      }
      .day-agenda-item.type-planner {
        background: rgba(34, 197, 94, 0.12);
        border-color: var(--color-success);
      }
      .day-agenda-time {
        font-size: var(--fs-base);
        color: var(--text-dim);
        min-width: 42px;
        margin-top: 2px;
      }
      .day-agenda-content .title {
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--text-dim);
      }
      .day-agenda-content .sub {
        font-size: 0.75rem;
        color: var(--text-dim);
        margin-top: 2px;
      }

      /* 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(239,68,68,0.08) !important;
        border-color: rgba(239,68,68,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 .day-agenda-content .title {
        color: #0f172a !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;
      }

      /* ── 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: 1.08rem !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;
        }
      }

      /* Responsive */
      @media (max-width: 900px) {
        .app-container {
          grid-template-columns: 1fr !important;
          grid-template-rows: 60px auto 1fr auto !important;
          height: auto !important;
          overflow-y: auto !important;
        }
        body {
          overflow: auto !important;
        }
        header.panel {
          grid-column: 1 !important;
        }
        .sidebar-left {
          max-height: 200px;
        }
        .sidebar-right {
          max-height: 300px;
        }
        .ai-panel {
          width: calc(100vw - 1rem);
          right: 0.5rem;
          left: 0.5rem;
        }
        .editor-title {
          font-size: 1.3rem !important;
        }
        .header-right {
          gap: 0.4rem;
        }
        #clock {
          display: none;
        }
      }
      @media (max-width: 600px) {
        .app-container {
          padding: 0.5rem;
          gap: 0.5rem;
        }
        .welcome-card {
          padding: 2rem 1.25rem;
        }
        .welcome-card h1 {
          font-size: 2.5rem;
        }
        header.panel {
          padding: 0 0.75rem;
        }
        .brand {
          font-size: 1rem;
        }
      }

      /* Wiki link */
      .wiki-link {
        color: var(--secondary);
        text-decoration: none;
        border-bottom: 1px dashed var(--secondary);
        cursor: pointer;
      }
      .wiki-link:hover {
        color: var(--primary);
        border-color: var(--primary);
      }

      /* ── Reusable modal classes (inline modals) ──────────────── */
      .gn-modal-box {
        background: var(--card-bg-solid);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        padding: 28px 32px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      }
      .gn-modal-input {
        width: 100%;
        box-sizing: border-box;
        background: var(--bg-solid);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 10px 14px;
        color: var(--text-main);
        font-size: var(--fs-md);
        outline: none;
      }

/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Unified Button System
   ══════════════════════════════════════════════════════════════ */

      .btn {
        padding: 8px 16px;
        border-radius: var(--radius-base);
        border: none;
        cursor: pointer;
        font-weight: 600;
        font-size: var(--fs-base);
        font-family: inherit;
        transition: all 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .btn:disabled { opacity: 0.5; cursor: default; }

      .btn--primary {
        background: var(--primary);
        color: #fff;
      }
      .btn--primary:hover { filter: brightness(1.1); }

      .btn--gradient {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: #fff;
      }
      .btn--gradient:hover { filter: brightness(1.1); }

      .btn--secondary {
        background: rgba(255,255,255,0.08);
        border: 1px solid var(--glass-border);
        color: var(--text-dim);
      }
      .btn--secondary:hover { background: rgba(255,255,255,0.12); }

      .btn--danger {
        background: rgba(239,68,68,0.15);
        border: 1px solid rgba(239,68,68,0.3);
        color: #f87171;
      }
      .btn--danger:hover { background: rgba(239,68,68,0.25); }

      .btn--success {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: #fff;
      }
      .btn--success:hover { filter: brightness(1.1); }

      .btn--warning {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff;
      }
      .btn--warning:hover { filter: brightness(1.1); }

      .btn--info {
        background: linear-gradient(135deg, #0ea5e9, #0284c7);
        color: #fff;
      }
      .btn--info:hover { filter: brightness(1.1); }

      .btn--ghost {
        background: none;
        color: var(--text-dim);
      }
      .btn--ghost:hover { background: rgba(255,255,255,0.06); }

      .btn--sm { padding: 6px 12px; font-size: var(--fs-sm); }
      .btn--xs { padding: 4px 8px; font-size: var(--fs-xs); }
      .btn--lg { padding: 12px 24px; font-size: var(--fs-md); }
      .btn--block { width: 100%; justify-content: center; }
      .btn--icon { padding: 6px; }

      body.light-mode .btn--secondary { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #334155; }
      body.light-mode .btn--secondary:hover { background: rgba(0,0,0,0.08); }
      body.light-mode .btn--ghost { color: #334155; }
      body.light-mode .btn--ghost:hover { background: rgba(0,0,0,0.05); }

/* ══════════════════════════════════════════════════════════════
   EXTRACTED INLINE STYLES — CSS Classes
   Organized by module. Light-mode overrides after each group.
   ══════════════════════════════════════════════════════════════ */


/* ── Universal Primitives (gn-*) ─────────────────────────────── */

      .gn-modal-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-dim);
        margin-bottom: 16px;
      }
      .gn-modal-cancel {
        background: none;
        border: 1px solid var(--glass-border);
        color: var(--text-dim);
        border-radius: 8px;
        padding: 8px 18px;
        cursor: pointer;
      }
      .gn-modal-save {
        background: linear-gradient(135deg, var(--secondary), var(--primary));
        border: none;
        color: #fff;
        border-radius: 8px;
        padding: 8px 20px;
        cursor: pointer;
        font-weight: 500;
      }
      body.light-mode .gn-modal-box {
        background: #fff;
        border-color: rgba(0,0,0,0.12);
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
      }
      body.light-mode .gn-modal-input {
        background: #f5f7fa;
        border-color: rgba(0,0,0,0.12);
        color: #1e293b;
      }
      body.light-mode .gn-modal-title { color: #1e293b; }
      body.light-mode .gn-modal-cancel { color: #64748b; border-color: rgba(0,0,0,0.12); }
      .gn-error-note {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(239,68,68,0.9);
        color: white;
        padding: 10px 18px;
        border-radius: 8px;
        z-index: var(--z-toast);
        font-size: 13px;
        max-width: 500px;
        word-break: break-all;
      }
      .gn-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.7);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .gn-overlay--blur {
        background: rgba(0,0,0,0.85);
        backdrop-filter: blur(8px);
      }
      .gn-ctx-menu {
        background: var(--card-bg-solid, #141b2d);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        min-width: 160px;
      }
      .gn-ctx-btn {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        color: var(--text-dim);
        padding: 8px 12px;
        border-radius: var(--radius-base);
        cursor: pointer;
        font-size: 13px;
        transition: background 0.1s;
      }
      .gn-ctx-btn:hover { background: rgba(255,255,255,0.08); }
      .gn-ctx-btn--danger { color: #f87171; }
      .gn-ctx-btn--danger:hover { background: rgba(239,68,68,0.12); }
      .gn-ctx-sep {
        height: 1px;
        background: rgba(255,255,255,0.08);
        margin: 4px 8px;
      }
      .gn-text-label {
        color: var(--primary-light);
        font-size: var(--fs-sm);
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 600;
      }
      .gn-text-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .gn-text-dim { color: var(--text-dim); }
      .gn-text-muted { color: var(--text-muted, #64748b); }
      .gn-glass-card {
        background: var(--card-bg);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 12px 16px;
      }
      .gn-progress-track {
        background: rgba(255,255,255,0.06);
        border-radius: 8px;
        height: 10px;
        overflow: hidden;
      }
      .gn-progress-fill {
        height: 100%;
        border-radius: 8px;
        transition: width 0.4s;
      }
      .gn-icon-muted {
        opacity: 0.5;
        font-size: var(--fs-sm);
      }
      body.light-mode .gn-overlay { background: rgba(0,0,0,0.4); }
      body.light-mode .gn-overlay--blur { background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); }
      body.light-mode .gn-ctx-menu { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
      body.light-mode .gn-ctx-btn { color: #334155; }
      body.light-mode .gn-ctx-btn:hover { background: rgba(0,0,0,0.05); }
      body.light-mode .gn-glass-card { background: #fff; border-color: rgba(0,0,0,0.1); }
      body.light-mode .gn-progress-track { background: rgba(0,0,0,0.06); }
      .gn-multiselect-bar {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        border: 1px solid rgba(var(--primary-rgb), 0.4);
        border-radius: var(--radius-md);
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 9999;
        box-shadow: 0 8px 30px rgba(0,0,0,0.5);
        backdrop-filter: blur(20px);
      }
      body.light-mode .gn-multiselect-bar {
        background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        border-color: rgba(var(--primary-rgb), 0.3);
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      }
      .gn-tag-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(var(--primary-rgb), 0.12);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 16px;
        padding: 2px 10px;
        font-size: var(--fs-sm);
        color: var(--primary);
        cursor: default;
        margin-right: 4px;
      }
      .gn-form-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 6px;
        font-size: var(--fs-base);
      }
      .gn-form-label {
        color: var(--text-dim);
        font-size: var(--fs-base);
        flex-shrink: 0;
      }
      .gn-form-label--wide { flex: 0 0 90px; }
      .gn-form-label--fixed { flex: 0 0 120px; }
      .gn-form-input {
        flex: 1;
        padding: 5px 8px;
        border-radius: 6px;
        border: 1px solid var(--glass-border);
        background: var(--card-bg);
        color: var(--text-main);
        font-size: var(--fs-base);
        outline: none;
        box-sizing: border-box;
      }
      .gn-form-input--mono { font-family: monospace; font-size: var(--fs-base); }
      .gn-form-del-btn {
        background: none;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: 0.85rem;
        padding: 2px 6px;
      }
      .gn-form-del-btn:hover { color: #f87171; }
      .gn-btn-row {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }
      .gn-btn-row--mt { margin-top: 12px; }
      .gn-divider {
        border: none;
        border-top: 1px solid var(--glass-border);
        margin: 10px 0;
      }
      .gn-section-heading {
        font-size: var(--fs-base);
        color: var(--text-dim);
        margin-bottom: 8px;
      }
      body.light-mode .gn-form-input { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
      .gn-progress-track--thin { height: 4px; margin-bottom: 8px; }
      .gn-ctx-menu--fixed { position: fixed; z-index: var(--z-toast); }
      .gn-qn-box {
        background: linear-gradient(135deg, var(--bg-solid), var(--card-bg-solid));
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 16px;
        width: min(420px, 90vw);
        padding: 0;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
        backdrop-filter: blur(20px);
      }
      .gn-qn-title-input {
        width: 100%;
        padding: 18px 20px 8px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--glass-border);
        color: var(--text-main);
        font-size: 17px;
        font-weight: 600;
        outline: none;
        box-sizing: border-box;
      }
      .gn-qn-textarea {
        width: 100%;
        padding: 12px 20px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--glass-border);
        color: var(--text-dim);
        font-size: 14px;
        resize: none;
        outline: none;
        font-family: inherit;
        box-sizing: border-box;
      }
      .gn-qn-folder-row {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--glass-border);
      }
      .gn-qn-folder-label {
        color: var(--text-main);
        font-size: 14px;
        font-weight: 500;
      }
      .gn-qn-tags-input {
        width: 100%;
        padding: 10px 20px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--glass-border);
        color: var(--text-dim);
        font-size: 13px;
        outline: none;
        box-sizing: border-box;
      }
      .gn-qn-btn-close {
        flex: 1;
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--glass-border);
        color: var(--text-main);
        padding: 10px;
        border-radius: 10px;
        font-size: 14px;
        cursor: pointer;
      }
      .gn-qn-btn-save {
        flex: 1;
        background: linear-gradient(135deg, var(--secondary), var(--primary));
        border: none;
        color: #fff;
        padding: 10px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
      }
      body.light-mode .gn-qn-box {
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        border-color: rgba(0,0,0,0.12);
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
      }
      body.light-mode .gn-qn-title-input { color: #1e293b; border-bottom-color: rgba(0,0,0,0.08); }
      body.light-mode .gn-qn-textarea { color: #475569; border-bottom-color: rgba(0,0,0,0.08); }
      body.light-mode .gn-qn-folder-row { border-bottom-color: rgba(0,0,0,0.08); }
      body.light-mode .gn-qn-folder-label { color: #1e293b; }
      body.light-mode .gn-qn-tags-input { color: #64748b; border-bottom-color: rgba(0,0,0,0.08); }
      body.light-mode .gn-qn-btn-close { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #475569; }
      .toast {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        background: var(--card-bg-solid);
        border: 1px solid var(--glass-border);
        color: var(--text-main);
        padding: 10px 20px;
        border-radius: 12px;
        font-size: 0.85rem;
        z-index: 9999;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        pointer-events: none;
      }
      .toast.show {
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
      }
      .toast-close { margin-left: 10px; cursor: pointer; opacity: 0.5; font-size: 1.1rem; vertical-align: middle; }
      .toast-close:hover { opacity: 1; }
      .undo-toast-btn {
        margin-left: 10px;
        background: rgba(var(--primary-rgb),0.3);
        border: 1px solid rgba(var(--primary-rgb),0.5);
        color: var(--primary-light);
        padding: 3px 10px;
        border-radius: 6px;
        font-size: var(--fs-base);
        cursor: pointer;
        transition: background 0.2s;
      }
      .undo-toast-btn:hover { background: rgba(var(--primary-rgb),0.5); }
      .gn-tooltip {
        position: fixed;
        background: var(--card-bg-solid);
        color: var(--text-main);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: var(--fs-sm);
        white-space: nowrap;
        z-index: 9999;
        pointer-events: none;
        border: 1px solid var(--glass-border);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        font-family: 'Outfit', sans-serif;
        opacity: 0;
        transition: opacity 0.15s;
        max-width: 250px;
      }
      .gn-tooltip.visible {
        opacity: 1;
      }
      .offline-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-toast);
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        color: white;
        text-align: center;
        padding: 6px 16px;
        font-size: var(--fs-base);
        font-weight: 600;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        -webkit-app-region: no-drag;
      }
      .offline-banner.visible {
        transform: translateY(0);
      }
      body.light-mode .modal-overlay {
        background: rgba(0, 0, 0, 0.35) !important;
      }
      body.light-mode .modal-box {
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
        color: #0f172a !important;
      }
      body.light-mode .modal-box h3 {
        color: #0f172a !important;
      }
      body.light-mode .modal-box p {
        color: #64748b !important;
      }
      body.light-mode .modal-btn {
        background: rgba(0,0,0,0.04) !important;
        color: #334155 !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
      }
      body.light-mode .modal-btn:hover {
        background: rgba(0,0,0,0.08) !important;
      }
      body.light-mode .modal-btn[style*="ef4444"] {
        color: #dc2626 !important;
        border-color: #dc2626 !important;
      }
      body.light-mode .modal-close {
        color: #64748b !important;
      }
      body.light-mode .modal-close:hover {
        color: #0f172a !important;
      }
      body.light-mode .modal-box input,
      body.light-mode .modal-box textarea,
      body.light-mode .modal-box select {
        background: #f0f4ff !important;
        color: #0f172a !important;
        border-color: rgba(0,0,0,0.12) !important;
      }
body.light-mode .gn-tooltip {
  background: #fff;
  color: #1e293b;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  opacity: 0.5;
  font-size: var(--fs-base);
  color: var(--text-dim);
  gap: 6px;
}
.empty-state-icon { font-size: var(--fs-2xl); opacity: 0.7; margin-bottom: 4px; }
.empty-state-hint { font-size: var(--fs-sm); opacity: 0.7; }
.ctx-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 4px 8px;
  opacity: 0.5;
}
.gn-emoji-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.gn-emoji-label { font-size: var(--fs-base); margin-bottom: 8px; }
.gn-subfolder-box { max-width: 340px; padding: 24px 20px; }
.gn-subfolder-title { margin: 0 0 16px; font-size: 1rem; }
.gn-subfolder-input { width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.gn-subfolder-label { font-size: var(--fs-base); opacity: 0.6; margin-bottom: 4px; }
.gn-subfolder-select { width: 100%; margin-bottom: 16px; box-sizing: border-box; }
.gn-cover-picker {
  position: absolute;
  top: 40px;
  left: 10px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 200px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: gn-popup-in 0.2s both;
}
.gn-cover-emoji { cursor: pointer; font-size: 1.2rem; padding: 4px; border-radius: 6px; transition: 0.1s; }
.gn-cover-emoji:hover { background: rgba(var(--primary-rgb), 0.2); }
body.light-mode .gn-cover-picker { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.gn-tmpl-modal-box {
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  max-width: 440px;
  width: 90%;
  max-height: 70vh;
  overflow-y: auto;
}
.gn-tmpl-title { margin: 0 0 16px; color: var(--text-dim); font-size: 1.1rem; }
.gn-tmpl-list { display: flex; flex-direction: column; gap: 8px; }
.gn-tmpl-footer { margin-top: 16px; text-align: center; }
.gn-tmpl-add-btn {
  padding: 8px 20px;
  background: rgba(var(--primary-rgb), 0.15);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  color: var(--primary-light);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-base);
}
.gn-tmpl-input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: var(--fs-base);
  box-sizing: border-box;
}
.gn-tmpl-input--mt { margin-top: 4px; }
.gn-tmpl-field { margin-bottom: 12px; }
.gn-tmpl-field--last { margin-bottom: 16px; }
.gn-tmpl-field-label { color: var(--text-muted); font-size: var(--fs-base); }
body.light-mode .gn-tmpl-modal-box { background: #fff; border-color: rgba(0,0,0,0.12); }
body.light-mode .gn-tmpl-input { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
.gn-hint-text { padding: 8px; font-size: var(--fs-base); color: var(--text-muted); text-align: center; }
.gn-split-pane {
  width: 50%;
  border-left: 2px solid var(--glass-border);
  padding: 16px;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.gn-split-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gn-split-header-title { font-weight: 600; font-size: 0.85rem; }
.gn-split-close-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; }
.gn-split-editor { flex: 1; overflow-y: auto; min-height: 200px; padding: 8px; }
.gn-ctx-btn--icon { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
.gn-ctx-icon { width: 18px; text-align: center; }
.gn-form-row--add { gap: 6px; margin-top: 8px; }
      .glitch-overlay {
        position: fixed;
        inset: 0;
        z-index: 9990;
        pointer-events: none;
        opacity: 0;
        transition: opacity 1.5s ease;
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(0, 0, 0, 0.05) 2px,
          rgba(0, 0, 0, 0.05) 4px
        );
      }
      body.glitch-active .glitch-overlay {
        opacity: 1;
      }
      body.glitch-active {
        animation: glitchShift 8s infinite;
      }
      body.glitch-active .panel {
        animation: glitchPanel 6s infinite;
      }
      body.glitch-active .editor-title,
      body.glitch-active .brand {
        animation: glitchText 4s infinite;
      }
      body.glitch-active .content-area {
        animation: glitchText 5s infinite;
      }
      body.glitch-active #canvas {
        animation: glitchCanvas 3s infinite;
      }
      @keyframes glitchShift {
        0%,
        88%,
        92%,
        96%,
        100% {
          filter: none;
        }
        89% {
          filter: hue-rotate(15deg) saturate(1.2);
        }
        90% {
          filter: hue-rotate(-10deg);
        }
        93% {
          filter: hue-rotate(5deg) brightness(1.05);
        }
        94% {
          filter: none;
        }
      }
      @keyframes glitchPanel {
        0%,
        93%,
        96%,
        100% {
          transform: none;
        }
        94% {
          transform: translate(-4px, 2px);
        }
        95% {
          transform: translate(2px, -2px);
        }
      }
      @keyframes glitchText {
        0%,
        90%,
        94%,
        100% {
          text-shadow: none;
          opacity: 1;
        }
        91% {
          text-shadow:
            -2px 0 #f43f5e,
            2px 0 #0ea5e9;
          opacity: 0.95;
        }
        92% {
          text-shadow:
            1px 0 #f43f5e,
            -1px 0 #0ea5e9;
        }
        93% {
          text-shadow: none;
        }
      }
      @keyframes glitchCanvas {
        0%,
        85%,
        100% {
          opacity: 0.5;
        }
        86% {
          opacity: 0.8;
        }
        87% {
          opacity: 0.3;
        }
        88% {
          opacity: 0.6;
        }
        89% {
          opacity: 0.5;
        }
      }
      .glitch-badge {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(244, 63, 94, 0.12);
        border: 1px solid rgba(244, 63, 94, 0.3);
        color: #f43f5e;
        padding: 4px 14px;
        border-radius: var(--radius-lg);
        font-size: var(--fs-sm);
        font-family: "JetBrains Mono";
        letter-spacing: 0.1em;
        z-index: 9991;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.8s;
      }
      body.glitch-active .glitch-badge {
        opacity: 1;
      }

/* ── Dashboard (dashboard.js) ────────────────────────────────── */

      .dash-card--wide { grid-column: span 2; }
      .dash-card--full { grid-column: span 3; margin-top: 0; }
      .dash-pinned-row {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: space-around;
      }
      .dash-pinned-item {
        text-align: center;
      }
      .dash-pinned-num {
        font-size: 1.8rem;
        font-weight: 700;
      }
      .dash-stat-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 12px;
        text-align: center;
        margin-bottom: 12px;
      }
      .dash-stat-cell {
        background: rgba(255,255,255,0.04);
        border-radius: 10px;
        padding: 12px 6px;
      }
      .dash-stat-num {
        font-size: var(--fs-2xl);
        font-weight: 700;
      }
      .dash-stat-label {
        font-size: var(--fs-sm);
        color: var(--text-muted, #64748b);
        margin-top: 2px;
      }
      .dash-nav-btn {
        background: rgba(255,255,255,0.07);
        border: none;
        border-radius: 6px;
        color: var(--text-muted, #64748b);
        cursor: pointer;
        padding: 3px 8px;
        font-size: var(--fs-base);
      }
      .dash-nav-btn:hover { background: rgba(255,255,255,0.12); }
      .dash-nav-btn--today {
        background: rgba(var(--primary-rgb),0.2);
        border: 1px solid rgba(var(--primary-rgb),0.3);
        color: var(--primary-light);
        font-size: 0.75rem;
      }
      .dash-day-picker {
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 6px;
        color: var(--text-dim);
        padding: 3px 8px;
        font-size: var(--fs-base);
        cursor: pointer;
      }
      .dash-note-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        background: rgba(255,255,255,0.04);
        border-radius: 6px;
        font-size: var(--fs-base);
      }
      .dash-note-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: 140px;
        overflow-y: auto;
      }
      .dash-note-badge {
        font-size: var(--fs-sm);
        color: var(--text-muted, #64748b);
      }
      .dash-empty-msg {
        text-align: center;
        padding: 12px;
        opacity: 0.4;
        font-size: var(--fs-base);
      }
      .dash-storage-pill {
        background: rgba(255,255,255,0.06);
        padding: 2px 8px;
        border-radius: 4px;
        font-size: var(--fs-sm);
        color: var(--text-muted);
      }
      body.light-mode .dash-stat-cell { background: rgba(0,0,0,0.03); }
      body.light-mode .dash-nav-btn { background: rgba(0,0,0,0.05); color: #64748b; }
      body.light-mode .dash-day-picker { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
      body.light-mode .dash-note-row { background: rgba(0,0,0,0.03); }
      body.light-mode .dash-storage-pill { background: rgba(0,0,0,0.05); color: #64748b; }
      .hourly-heatmap { display: grid; grid-template-columns: 40px repeat(24, 1fr); gap: 2px; margin-top: 8px; }
      .hh-label { font-size: var(--fs-sm); color: var(--text-dim); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
      .hh-hour-label { font-size: 0.62rem; color: var(--text-dim); text-align: center; }
      .hh-cell {
        aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,0.05);
        cursor: pointer; transition: transform 0.15s;
      }
      .hh-cell:hover { transform: scale(1.4); }
      .hh-cell.h1 { background: rgba(var(--primary-rgb),0.2); }
      .hh-cell.h2 { background: rgba(var(--primary-rgb),0.4); }
      .hh-cell.h3 { background: rgba(var(--primary-rgb),0.65); }
      .hh-cell.h4 { background: var(--primary); box-shadow: 0 0 4px var(--primary); }
      body.light-mode .hh-cell { background: rgba(0,0,0,0.04); }
      body.light-mode .hh-cell.h1 { background: rgba(var(--primary-rgb),0.15); }
      body.light-mode .hh-cell.h2 { background: rgba(var(--primary-rgb),0.3); }
      body.light-mode .hh-cell.h3 { background: rgba(var(--primary-rgb),0.5); }
      body.light-mode .hh-cell.h4 { background: var(--primary); }
      .focus-bars { display: flex; flex-direction: column; gap: 8px; }
      .focus-bar-row {
        display: flex; align-items: center; gap: 10px; font-size: var(--fs-base);
      }
      .focus-bar-label {
        min-width: 90px; max-width: 120px; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
        color: var(--text-dim); font-size: var(--fs-base);
      }
      .focus-bar-track {
        flex: 1; height: 8px; background: rgba(255,255,255,0.06);
        border-radius: 4px; overflow: hidden;
      }
      .focus-bar-fill {
        height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary));
        border-radius: 4px; transition: width 0.4s;
      }
      .focus-bar-value {
        min-width: 36px; text-align: right; font-size: 0.75rem;
        color: var(--text-muted, #64748b); font-weight: 600;
      }
      body.light-mode .focus-bar-track { background: rgba(0,0,0,0.06); }
      .week-delta-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
      .week-delta-badge {
        flex: 1; min-width: 100px;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 12px 8px; border-radius: var(--radius-md);
        background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
        transition: transform 0.15s;
      }
      .week-delta-badge:hover { transform: translateY(-2px); }
      .week-delta-icon { font-size: 1.3rem; }
      .week-delta-val { font-size: 1.1rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
      .week-delta-label { font-size: var(--fs-sm); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
      .week-delta-abs { font-size: var(--fs-sm); color: var(--text-dim); opacity: 0.7; }
      .week-delta-up .week-delta-val { color: var(--color-success); }
      .week-delta-down .week-delta-val { color: var(--color-danger); }
      .week-delta-same .week-delta-val { color: var(--text-dim); }
      body.light-mode .week-delta-badge { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
.dash-sparkline {
  width: 100%;
  height: 60px;
  border-radius: 8px;
  margin-top: 12px;
}
      .bl-panel {
        margin: 12px 0 0;
        padding: 12px 16px;
        background: rgba(var(--primary-rgb), 0.07);
        border: 1px solid rgba(var(--primary-rgb), 0.18);
        border-radius: 12px;
        font-size: var(--fs-base);
      }
      .bl-panel--canvas {
        margin: 8px 0 0;
        background: rgba(var(--primary-rgb), 0.05);
        border-color: rgba(var(--primary-rgb), 0.12);
      }
      .bl-panel-header {
        margin-bottom: 8px;
      }
      .bl-floating {
        position: absolute;
        bottom: 12px;
        right: 12px;
        width: 240px;
        max-height: 50vh;
        overflow-y: auto;
        background: var(--card-bg, #1a1a2e);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        padding: 12px 14px;
        z-index: 100;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      }
      .bl-title {
        font-weight: 600;
        color: var(--text-dim);
        font-size: var(--fs-base);
        margin-bottom: 8px;
      }
      .bl-item {
        padding: 6px 8px;
        margin-bottom: 4px;
        background: rgba(255,255,255,0.03);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s;
      }
      .bl-item:hover { background: rgba(var(--primary-rgb), 0.1); }
      .bl-item-title {
        font-size: var(--fs-base);
        color: var(--text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bl-item-context {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        margin-top: 2px;
      }
      .bl-empty {
        color: var(--text-dim);
        font-size: var(--fs-base);
      }
      body.light-mode .bl-panel { background: rgba(var(--primary-rgb), 0.05); border-color: rgba(var(--primary-rgb), 0.12); }
      body.light-mode .bl-floating { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
      body.light-mode .bl-item { background: rgba(0,0,0,0.03); }
      body.light-mode .bl-item:hover { background: rgba(var(--primary-rgb), 0.08); }
.bl-floating--dash {
  display: none;
}
      .ws-header {
        font-size: 0.65rem;
        color: var(--text-dim);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .ws-bar-chart {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 50px;
        margin-bottom: 8px;
      }
      .ws-day-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
      }
      .ws-bar {
        width: 100%;
        border-radius: 3px 3px 0 0;
        transition: height 0.3s;
      }
      .ws-day-label {
        font-size: 0.55rem;
        color: var(--text-dim);
        opacity: 0.7;
      }
      .ws-summary {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: var(--text-dim);
      }
      .ws-highlight { color: var(--primary-light); }
      .ws-streak {
        font-size: var(--fs-sm);
        color: var(--color-success);
        margin-top: 4px;
      }
      .hab-month-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 6px 0 10px;
        user-select: none;
      }
      .hab-nav-btn {
        background: none;
        border: none;
        color: var(--text-dim);
        font-size: 1.1rem;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background 0.15s;
      }
      .hab-nav-btn:hover { background: rgba(255,255,255,0.08); }
      .hab-nav-btn:disabled { opacity: 0.25; cursor: default; }
      .hab-month-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        min-width: 140px;
        text-align: center;
      }
      .hab-day-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        min-width: 22px;
      }
      .hab-day-num {
        font-size: 9px;
        color: var(--text-dim);
        margin-top: 3px;
        line-height: 1;
      }
      .hab-day-name {
        font-size: 8px;
        color: var(--text-dim);
        opacity: 0.6;
        line-height: 1;
      }
      .hab-day-col--future .hab-day-num,
      .hab-day-col--future .hab-day-name { opacity: 0.4; }
      .hab-day-col--today .hab-day-num { font-weight: 700; }
      .hab-empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-dim);
        font-size: 0.85rem;
      }
      .hab-total-label {
        font-size: var(--fs-sm);
        opacity: 0.55;
        margin-left: 4px;
      }
      .hab-day-bar {
        display: flex;
        gap: 0;
        align-items: flex-end;
        overflow-x: auto;
        padding-bottom: 2px;
      }
      body.light-mode .hab-nav-btn:hover { background: rgba(0,0,0,0.05); }
      .dr-kb-chip[data-status="todo"]     { background: rgba(148,163,184,0.08); }
      .dr-kb-chip[data-status="progress"] { background: rgba(251,191,36,0.1); }
      .dr-kb-chip[data-status="done"]     { background: rgba(34,197,94,0.1); }

/* ── Spaced Repetition (dashboard.js) ────────────────────────── */

      .sr-modal-box {
        background: #1e2433;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 16px;
        padding: 28px;
        width: 480px;
        max-width: 90vw;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      }
      .sr-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
      }
      .sr-modal-title {
        margin: 0;
        color: var(--text-dim);
        font-size: 1rem;
      }
      .sr-close-btn {
        background: none;
        border: none;
        color: var(--text-muted, #64748b);
        cursor: pointer;
        font-size: 1.2rem;
      }
      .sr-field-group { margin-bottom: 12px; }
      .sr-field-group--last { margin-bottom: 18px; }
      .sr-field-label {
        display: block;
        color: var(--text-muted);
        font-size: var(--fs-base);
        margin-bottom: 6px;
      }
      .sr-textarea {
        width: 100%;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        padding: 10px;
        color: var(--text-dim);
        font-size: var(--fs-md);
        outline: none;
        box-sizing: border-box;
        resize: vertical;
      }
      .sr-actions {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        align-items: center;
      }
      .sr-ai-btn {
        background: rgba(var(--primary-rgb),0.15);
        border: 1px solid rgba(var(--primary-rgb),0.3);
        color: var(--primary-light);
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
      }
      .sr-cancel-btn {
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        color: var(--text-muted);
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
      }
      .sr-save-btn {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        color: #fff;
        padding: 8px 18px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
      }
      .sr-session-box {
        background: #0f172a;
        border: 1px solid rgba(var(--primary-rgb), 0.25);
        border-radius: var(--radius-lg);
        padding: 32px;
        width: 520px;
        max-width: 90vw;
        box-shadow: 0 24px 64px rgba(0,0,0,0.7);
      }
      .sr-session-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      .sr-session-label {
        color: var(--primary);
        font-size: var(--fs-base);
        font-weight: 600;
      }
      .sr-progress-track {
        background: rgba(255,255,255,0.04);
        border-radius: 8px;
        height: 4px;
        margin-bottom: 24px;
        overflow: hidden;
      }
      .sr-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        transition: width 0.3s;
      }
      .sr-front-area {
        min-height: 80px;
        background: rgba(var(--primary-rgb), 0.08);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        color: var(--text-dim);
        font-size: 1rem;
        line-height: 1.6;
      }
      .sr-back-area {
        min-height: 80px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        color: var(--text-muted);
        font-size: var(--fs-md);
        line-height: 1.6;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .sr-placeholder {
        color: var(--text-muted);
        font-size: var(--fs-md);
      }
      .sr-show-btn {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        color: #fff;
        padding: 12px 32px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
      }
      .sr-rate-btns {
        display: none;
        gap: 10px;
        width: 100%;
      }
      .sr-rate-btn {
        flex: 1;
        padding: 12px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
      }
      .sr-rate-btn--forgot {
        background: rgba(239,68,68,0.15);
        border: 1px solid rgba(239,68,68,0.3);
        color: #f87171;
      }
      .sr-rate-btn--knew {
        background: rgba(34,197,94,0.15);
        border: 1px solid rgba(34,197,94,0.3);
        color: #4ade80;
      }
      .sr-session-footer {
        margin-top: 14px;
        text-align: center;
        color: var(--text-muted);
        font-size: 0.75rem;
      }
      .sr-end-box {
        background: #0f172a;
        border: 1px solid rgba(var(--primary-rgb), 0.25);
        border-radius: var(--radius-lg);
        padding: 40px 32px;
        width: 400px;
        max-width: 90vw;
        text-align: center;
        box-shadow: 0 24px 64px rgba(0,0,0,0.7);
      }
      .sr-end-emoji { font-size: 3rem; margin-bottom: 16px; }
      .sr-end-title {
        color: var(--text-dim);
        margin: 0 0 8px;
      }
      .sr-end-subtitle {
        color: var(--text-muted);
        font-size: var(--fs-md);
        margin-bottom: 24px;
      }
      .sr-end-stats {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-bottom: 24px;
      }
      .sr-end-stat { text-align: center; }
      .sr-end-stat-num {
        font-size: 1.5rem;
        font-weight: 700;
      }
      .sr-end-stat-label {
        font-size: 0.75rem;
        color: #6b7280;
      }
      .sr-done-btn {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        color: #fff;
        padding: 12px 32px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
      }
      body.light-mode .sr-modal-box { background: #fff; border-color: rgba(0,0,0,0.12); }
      body.light-mode .sr-textarea { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
      body.light-mode .sr-session-box { background: #fff; border-color: rgba(var(--primary-rgb),0.15); box-shadow: 0 24px 64px rgba(0,0,0,0.15); }
      body.light-mode .sr-front-area { background: rgba(var(--primary-rgb), 0.06); border-color: rgba(var(--primary-rgb), 0.12); color: #1e293b; }
      body.light-mode .sr-back-area { background: #f8fafc; border-color: rgba(0,0,0,0.08); }
      body.light-mode .sr-end-box { background: #fff; border-color: rgba(var(--primary-rgb),0.15); box-shadow: 0 24px 64px rgba(0,0,0,0.15); }

/* ── Sidebar & Smart Folders (app.js) ────────────────────────── */

      .sidebar-empty {
        text-align: center;
        padding: 20px;
        opacity: 0.4;
        font-size: 0.85rem;
      }
      .sidebar-date {
        font-size: 0.6rem;
        opacity: 0.4;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .sidebar-restore-btn {
        font-size: var(--fs-sm);
        padding: 2px 7px;
        background: rgba(var(--primary-rgb), 0.15);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 6px;
        color: var(--primary-light);
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .sidebar-restore-btn:hover { background: rgba(var(--primary-rgb), 0.25); }
      .section-label {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        letter-spacing: 0.1em;
        padding: 8px 12px 4px;
        text-transform: uppercase;
        user-select: none;
      }
      .folder-item {
        padding: 7px 12px;
        border-radius: 10px;
        cursor: pointer;
        font-size: var(--fs-base);
        color: var(--text-dim);
        display: flex;
        align-items: center;
        gap: 6px;
        transition: 0.2s;
        margin-bottom: 2px;
        user-select: none;
      }
      .folder-item:hover {
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--text-main);
      }
      .folder-item.drop-target {
        background: rgba(var(--primary-rgb), 0.2);
        border: 1px dashed var(--primary);
      }
      .folder-toggle {
        font-size: var(--fs-sm);
        width: 12px;
        display: inline-block;
        transition: transform 0.2s;
      }
      .folder-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .folder-count {
        font-size: var(--fs-sm);
        color: var(--text-muted);
        min-width: 14px;
        text-align: right;
      }
      .folder-delete {
        opacity: 0;
        background: none;
        border: none;
        color: var(--color-danger);
        cursor: pointer;
        font-size: 0.75rem;
        padding: 2px 4px;
        border-radius: 4px;
        transition: 0.2s;
      }
      .folder-item:hover .folder-delete {
        opacity: 0.7;
      }
      .folder-delete:hover {
        opacity: 1 !important;
        background: rgba(239, 68, 68, 0.15);
      }
      .folder-note {
        padding-left: 24px;
      }
      .pin-btn {
        opacity: 0;
        background: none;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: 0.75rem;
        padding: 2px 4px;
        border-radius: 4px;
        transition: 0.2s;
      }
      .tree-item:hover .pin-btn {
        opacity: 0.6;
      }
      .pin-btn.pinned {
        opacity: 1 !important;
        color: var(--accent);
      }
      .tree-item.is-pinned {
        border-left: 2px solid var(--accent);
        padding-left: 10px;
      }
      .search-highlight-mark {
        background: rgba(251, 191, 36, 0.35);
        color: var(--text-main);
        border-radius: 2px;
        padding: 0 1px;
        outline: 1px solid rgba(251, 191, 36, 0.4);
      }
      .sidebar-bottom-btn {
        flex: 1;
        padding: 6px;
        border-radius: 8px;
        border: 1px solid var(--glass-border);
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.75rem;
        transition: all 0.2s;
      }
      .sidebar-trash-btn:hover {
        background: rgba(239, 68, 68, 0.15);
        color: var(--danger);
      }
      .sidebar-archive-btn:hover {
        background: rgba(var(--primary-rgb), 0.15);
        color: var(--accent);
      }
      .tag-suggestion-item {
        padding: 6px 10px;
        cursor: pointer;
        font-size: 0.85rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: background 0.15s;
      }
      .tag-suggestion-item:hover {
        background: rgba(var(--primary-rgb), 0.2);
      }
      .backlink-item {
        cursor: pointer;
        padding: 4px 0;
        color: var(--text-dim, #8b9bb4);
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.15s;
      }
      .backlink-item:hover {
        color: var(--primary-light);
      }
      .note-color-indicator {
        width: 4px;
        border-radius: 2px;
        align-self: stretch;
        flex-shrink: 0;
        margin-right: 4px;
      }
      .note-color-picker {
        display: flex;
        gap: 5px;
        padding: 8px 10px;
        background: var(--card-bg-solid);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      }
      .note-color-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        transition: 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        color: rgba(255,255,255,0.5);
        padding: 0;
      }
      .note-color-dot:hover {
        transform: scale(1.2);
        border-color: var(--text-muted);
      }
      .note-color-dot.active {
        border-color: var(--text-main);
        box-shadow: 0 0 8px rgba(var(--primary-rgb),0.5);
      }
      body.light-mode .note-color-picker {
        background: #f0f4ff !important;
        border-color: rgba(0,0,0,0.1) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
      }
      body.light-mode .note-color-dot {
        color: rgba(0,0,0,0.3) !important;
      }
      body.light-mode .note-color-dot.active {
        border-color: #1e293b !important;
      }
.search-row {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 0.75rem;
}
.search-row .search-input {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.sort-picker-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  flex-shrink: 0;
}
.sort-picker-btn:hover {
  background: rgba(var(--primary-rgb),0.15);
  color: var(--primary-light);
  border-color: rgba(var(--primary-rgb),0.4);
}
.sort-picker-btn.active {
  background: rgba(var(--primary-rgb),0.2);
  color: var(--primary-light);
  border-color: rgba(var(--primary-rgb),0.5);
}
.sort-picker-dropdown {
  position: absolute;
  top: 100%;
  right: auto;
  z-index: 100;
  background: rgba(20,20,30,0.96);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px;
  min-width: 200px;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: gn-popup-in 0.15s ease;
}
.sort-picker-dropdown .sort-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-dim);
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.sort-picker-dropdown .sort-option:hover {
  background: rgba(var(--primary-rgb),0.15);
  color: var(--primary-light);
}
.sort-picker-dropdown .sort-option.active {
  background: rgba(var(--primary-rgb),0.2);
  color: var(--primary-light);
  font-weight: 600;
}
.sort-picker-dropdown .sort-option .sort-check {
  width: 16px;
  text-align: center;
  font-size: var(--fs-sm);
}
body.light-mode .sort-picker-dropdown {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
body.light-mode .sort-picker-dropdown .sort-option:hover {
  background: rgba(var(--primary-rgb),0.08);
}
.sidebar-left {
  transition: width 0.2s ease, padding 0.2s ease, min-width 0.2s ease, opacity 0.2s ease;
}
.sidebar-left.sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0;
}
.sidebar-collapse-btn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  transition: 0.2s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  background: rgba(var(--primary-rgb),0.2);
  color: var(--primary-light);
}
.sidebar-expand-btn {
  position: fixed;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 20px;
  height: 48px;
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--glass-border);
  border-left: none;
  background: rgba(20,20,30,0.9);
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--fs-sm);
  display: none;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  backdrop-filter: blur(10px);
}
.sidebar-expand-btn:hover {
  background: rgba(var(--primary-rgb),0.3);
  color: var(--primary-light);
  width: 24px;
}
.sidebar-expand-btn.visible {
  display: flex;
}
body.light-mode .sidebar-expand-btn {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.1);
}
.recent-section-label {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  letter-spacing: 0.08em;
  padding: 6px 12px 2px;
  text-transform: uppercase;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.recent-section-label:hover {
  color: var(--primary-light);
}
.recent-section-label .toggle-arrow {
  font-size: 0.6rem;
  transition: transform 0.15s;
}
.recent-note-item {
  padding: 4px 12px 4px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.76rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}
.recent-note-item:hover {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--text-main);
  opacity: 1;
}
.recent-note-item .recent-note-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.recent-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--primary-rgb),0.5) 50%, transparent 95%);
  margin: 8px 12px;
}
.note-drop-indicator {
  height: 2px;
  background: var(--primary);
  margin: 0 8px;
  border-radius: 1px;
  transition: opacity 0.15s;
  pointer-events: none;
}
.tag-chip.untagged-chip {
  border-style: dashed;
  font-style: italic;
  opacity: 0.8;
}
.tag-chip.untagged-chip:hover {
  opacity: 1;
}
.tag-chip.untagged-chip.active-filter {
  border-style: solid;
  font-style: normal;
  opacity: 1;
}
.search-input-tokens-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 5px 10px;
  min-height: 34px;
  box-sizing: border-box;
  cursor: text;
  transition: border-color 0.2s;
}
.search-input-tokens-wrap:focus-within {
  border-color: var(--primary);
}
.search-input-tokens-wrap .search-input {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-width: 60px;
  flex: 1;
  width: auto;
  height: auto;
  font-size: var(--fs-base);
}
.search-input-tokens-wrap .search-input:focus {
  border-color: transparent;
  outline: none;
}
.search-token-chips {
  display: contents;
}
.search-token-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary-light);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 6px;
  padding: 1px 5px 1px 6px;
  font-size: 0.71rem;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}
.search-token-chip .chip-remove {
  cursor: pointer;
  opacity: 0.55;
  font-size: 0.8em;
  line-height: 1;
  padding: 0 1px;
  border-radius: var(--radius-xs);
  transition: opacity 0.15s;
}
.search-token-chip .chip-remove:hover { opacity: 1; }
.tag-picker-btn.has-filter {
  background: rgba(var(--primary-rgb), 0.2);
  color: var(--primary-light);
  border-color: rgba(var(--primary-rgb), 0.5);
}
.tag-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  width: 240px;
  background: rgba(20, 27, 45, 0.5);
  border: 1px solid rgba(var(--primary-rgb),0.3);
  border-radius: 10px;
  padding: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
}
.tag-dropdown-panel.open { display: block; }
.tag-dropdown-panel::-webkit-scrollbar { width: 6px; }
.tag-dropdown-panel::-webkit-scrollbar-track { background: transparent; }
.tag-dropdown-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: var(--radius-xs); }
.tag-dropdown-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.tag-dd-empty {
  padding: 8px 10px;
  color: var(--text-dim);
  font-size: var(--fs-base);
  font-style: italic;
  text-align: center;
}
.tag-dd-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-main);
  transition: background 0.15s;
}
.tag-dd-item:hover { background: rgba(var(--primary-rgb),0.12); }
.tag-dd-cb {
  accent-color: var(--primary);
  margin: 0;
  pointer-events: none;
  flex-shrink: 0;
}
.tag-dd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-dd-untagged { flex: 1; font-style: italic; opacity: 0.7; }
.tag-dd-action {
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-sm); padding: 2px 3px; border-radius: 4px;
  opacity: 0; transition: opacity 0.15s, background 0.15s;
  color: var(--text-dim);
  line-height: 1;
}
.tag-dd-item:hover .tag-dd-action { opacity: 0.7; }
.tag-dd-action:hover { opacity: 1 !important; background: rgba(var(--primary-rgb),0.15); }
.tag-dd-del:hover { color: #ff4444 !important; background: rgba(255,68,68,0.12) !important; }
.tag-dd-sep {
  height: 1px;
  background: rgba(var(--primary-rgb),0.15);
  margin: 4px 6px;
}
.tag-dd-mode {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  font-size: 0.75rem;
}
.tag-dd-mode-label { color: var(--text-dim); flex-shrink: 0; }
.tag-dd-mode-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: 0.2s;
}
.tag-dd-mode-btn:hover { border-color: var(--primary); color: var(--text-main); }
.tag-dd-mode-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
body.light-mode .search-input-tokens-wrap {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
}
body.light-mode .search-input-tokens-wrap:focus-within {
  border-color: var(--primary) !important;
}
body.light-mode .tag-dropdown-panel {
  background: #fff !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
body.light-mode .tag-dropdown-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
body.light-mode .tag-dropdown-panel::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
body.light-mode .tag-dd-item { color: #1e293b !important; }
body.light-mode .tag-dd-item:hover { background: rgba(var(--primary-rgb),0.1) !important; }
body.light-mode .tag-dd-mode-btn {
  background: rgba(0,0,0,0.04) !important;
  color: #64748b !important;
  border-color: rgba(0,0,0,0.12) !important;
}
body.light-mode .tag-dd-mode-btn:hover {
  border-color: var(--primary) !important;
  color: #0f172a !important;
}
body.light-mode .tag-dd-mode-btn.active {
  background: var(--primary) !important;
  color: white !important;
}
.note-modified-date {
  font-size: 0.65rem;
  color: var(--text-muted, var(--text-dim));
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  margin-top: -1px;
}
.tree-item .note-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tree-item .note-title-group .note-title {
  flex: initial;
}
.search-hint-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  flex-shrink: 0;
}
.search-hint-btn:hover {
  background: rgba(var(--primary-rgb),0.15);
  color: var(--primary-light);
  border-color: rgba(var(--primary-rgb),0.4);
}
.search-hints-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(20,20,30,0.97);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: gn-popup-in 0.15s ease;
  font-size: 0.76rem;
  line-height: 1.6;
}
.search-hints-popup .hint-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.search-hints-popup .hint-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}
.search-hints-popup .hint-code {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(var(--primary-rgb),0.1);
  border: 1px solid rgba(var(--primary-rgb),0.2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: var(--fs-sm);
  color: var(--primary-light);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-hints-popup .hint-desc {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
body.light-mode .search-hints-popup {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.note-preview-tooltip {
  position: fixed;
  z-index: var(--z-toast);
  max-width: 280px;
  padding: 10px 14px;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size: var(--fs-base);
  color: var(--text-dim, #e8e8f0);
  line-height: 1.5;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  max-height: 120px;
}
.note-preview-tooltip.visible { opacity: 1; }
body.light-mode .note-preview-tooltip {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.1);
  color: #333;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.folder-empty-placeholder {
  padding: 12px 16px;
  margin: 4px 8px;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: var(--fs-base);
  opacity: 0.6;
}
.folder-empty-placeholder.drop-target {
  border-color: var(--primary);
  opacity: 1;
  background: rgba(var(--primary-rgb),0.08);
}
body.light-mode .folder-empty-placeholder {
  border-color: rgba(0,0,0,0.15);
}
.save-search-btn {
  background: none;
  border: 1px solid rgba(var(--primary-rgb),0.3);
  color: var(--primary-light);
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-base);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.save-search-btn:hover {
  background: rgba(var(--primary-rgb),0.15);
  border-color: rgba(var(--primary-rgb),0.5);
}
.saved-search-item {
  display: flex;
  align-items: center;
  width: calc(100% - 16px);
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim, #8b9bb4);
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-base);
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  margin: 2px 8px 0;
}
.saved-search-item:hover {
  background: rgba(var(--primary-rgb),0.1);
}
.saved-search-item.sf-active {
  background: rgba(var(--primary-rgb),0.15);
  border-color: rgba(var(--primary-rgb),0.4);
  color: var(--primary-light);
}
.saved-search-item.sf-add-btn {
  opacity: 0.7;
  border-style: dashed;
  border-color: rgba(var(--primary-rgb),0.2);
}
.saved-search-item.sf-add-btn:hover {
  opacity: 1;
  border-color: rgba(var(--primary-rgb),0.4);
}
.saved-search-badge {
  background: rgba(var(--primary-rgb),0.15);
  color: var(--primary-light);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.bulk-tag-popup {
  position: fixed;
  z-index: var(--z-toast);
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  width: 260px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
}
.bulk-tag-popup .btag-input {
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: var(--fs-base);
  outline: none;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.bulk-tag-popup .btag-input::placeholder {
  color: var(--text-muted, #64748b);
}
.bulk-tag-popup label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-dim, #e8e8f0);
  transition: background 0.12s;
}
.bulk-tag-popup label:hover {
  background: rgba(var(--primary-rgb),0.1);
}
.bulk-tag-popup input[type="checkbox"] {
  accent-color: var(--primary, #6366f1);
  cursor: pointer;
}
body.light-mode .bulk-tag-popup {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
body.light-mode .bulk-tag-popup label {
  color: #333;
}
body.light-mode .bulk-tag-popup .btag-input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
  color: #333;
}
.breadcrumbs-bar {
  padding: 2px 12px;
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 14px;
}
.breadcrumbs-bar .bc-folder {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.breadcrumbs-bar .bc-folder:hover {
  opacity: 1;
  color: var(--primary, #6366f1);
}
.breadcrumbs-bar .bc-sep { opacity: 0.4; }
.breadcrumbs-bar .bc-note { opacity: 0.9; }
body.light-mode .breadcrumbs-bar {
  border-bottom-color: rgba(0,0,0,0.06);
}
.folder-emoji-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.folder-item:hover .folder-emoji-btn {
  opacity: 0.6;
}
.folder-emoji-btn:hover {
  opacity: 1 !important;
}
.folder-emoji-picker {
  position: fixed;
  z-index: var(--z-toast);
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.folder-emoji-picker span {
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.12s;
}
.folder-emoji-picker span:hover {
  background: rgba(var(--primary-rgb),0.2);
}
body.light-mode .folder-emoji-picker {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.folder-more-btn,
.note-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  color: var(--text-dim);
  letter-spacing: 1px;
  flex-shrink: 0;
  margin-left: auto;
}
.folder-item:hover .folder-more-btn,
.tree-item:hover .note-more-btn {
  visibility: visible;
  opacity: 0.6;
}
.folder-more-btn:hover,
.note-more-btn:hover {
  opacity: 1 !important;
  color: var(--primary-light);
}
body.light-mode .folder-item:hover .folder-more-btn,
body.light-mode .tree-item:hover .note-more-btn {
  color: #475569;
}
body.light-mode .folder-more-btn:hover,
body.light-mode .note-more-btn:hover {
  color: var(--primary) !important;
}
body.light-mode .saved-search-item.sf-active {
  background: rgba(var(--primary-rgb),0.12);
  border-color: rgba(var(--primary-rgb),0.35);
}
body.light-mode .saved-search-badge {
  background: rgba(var(--primary-rgb),0.12);
}
body.light-mode .note-color-picker {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.section-label--nav { border-bottom: 2px solid rgba(var(--primary-rgb),0.35); padding-bottom: 8px; margin-bottom: 6px; }
.section-label-back { cursor: pointer; float: right; font-size: var(--fs-sm); opacity: 0.6; }
.section-label--flex { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.sidebar-lazy-indicator { padding: 8px; font-size: var(--fs-sm); }
      .sf-active-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        margin: 0 6px 6px;
        background: rgba(var(--primary-rgb), 0.12);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 8px;
        font-size: var(--fs-base);
        color: var(--primary-light);
      }
      .sf-clear-btn {
        border: none;
        background: none;
        color: var(--primary-light);
        cursor: pointer;
        font-size: 1rem;
        padding: 0 2px;
        opacity: 0.7;
      }
      .sf-clear-btn:hover { opacity: 1; }
      .sf-add-btn {
        display: flex;
        align-items: center;
        width: calc(100% - 16px);
        background: none;
        border: none;
        color: var(--text-dim, #8b9bb4);
        padding: 4px 8px;
        border-radius: var(--radius-base);
        cursor: pointer;
        font-size: var(--fs-base);
        gap: 6px;
        transition: background 0.15s;
        text-align: left;
        margin: 2px 8px 0;
      }
      .sf-add-btn:hover { background: rgba(255,255,255,0.06); }
      .sf-select {
        padding: 6px 8px;
        border-radius: var(--radius-base);
        border: 1px solid var(--glass-border);
        background: var(--input-bg, rgba(255,255,255,0.06));
        color: var(--text-main);
        font-size: var(--fs-base);
        font-family: inherit;
        box-sizing: border-box;
      }
      body.light-mode .sf-select { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
      .sf-rule-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        flex-wrap: wrap;
      }
      .sf-modal-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
      }
      .sf-modal-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-main);
      }
      .sf-name-row { margin-bottom: 14px; }
      .sf-logic-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
      }
      .sf-logic-toggle {
        padding: 4px 12px;
        border-radius: 6px;
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        background: rgba(var(--primary-rgb), 0.1);
        color: var(--primary-light);
        cursor: pointer;
        font-size: var(--fs-base);
        font-family: inherit;
      }
      .sf-del-rule {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        border: 1px solid rgba(255,80,80,0.3);
        background: rgba(255,80,80,0.1);
        color: #ff5050;
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .sf-del-rule:hover { background: rgba(255,80,80,0.2); }
      .sf-add-rule {
        margin: 8px 0 16px;
        padding: 6px 14px;
        border-radius: var(--radius-base);
        border: 1px dashed rgba(var(--primary-rgb), 0.4);
        background: transparent;
        color: var(--primary-light);
        cursor: pointer;
        font-size: var(--fs-base);
        font-family: inherit;
      }
      .sf-add-rule:hover { border-color: rgba(var(--primary-rgb), 0.7); }

/* ── Version History (app.js) ────────────────────────────────── */

      .vh-box {
        background: #0f0f1a;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: var(--radius-md);
        width: min(860px, 95vw);
        height: min(580px, 90vh);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.6);
      }
      .vh-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        flex-shrink: 0;
      }
      .vh-body {
        display: flex;
        flex: 1;
        overflow: hidden;
      }
      .vh-list {
        width: 220px;
        flex-shrink: 0;
        border-right: 1px solid rgba(255,255,255,0.07);
        overflow-y: auto;
        padding: 10px 8px;
      }
      .vh-diff {
        flex: 1;
        overflow-y: auto;
        padding: 12px 14px;
      }
      .vh-footer {
        padding: 12px 20px;
        border-top: 1px solid rgba(255,255,255,0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
      }
      .vh-restore-btn {
        padding: 7px 16px;
        border-radius: 8px;
        border: none;
        background: var(--primary);
        color: #fff;
        cursor: pointer;
        font-size: var(--fs-base);
        transition: 0.15s;
      }
      .vh-restore-btn:hover { background: #4f46e5; }
      .vh-item {
        padding: 9px 10px;
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 8px;
        margin: 0 0 5px;
        cursor: pointer;
        font-size: 0.75rem;
        transition: 0.15s;
      }
      .vh-item:hover { background: rgba(255,255,255,0.06); }
      .vh-item--active {
        border-color: var(--primary);
        background: rgba(var(--primary-rgb), 0.1);
      }
      body.light-mode .vh-box { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 24px 64px rgba(0,0,0,0.15); }
      body.light-mode .vh-header { border-bottom-color: rgba(0,0,0,0.08); }
      body.light-mode .vh-list { border-right-color: rgba(0,0,0,0.06); }
      body.light-mode .vh-footer { border-top-color: rgba(0,0,0,0.08); }
      body.light-mode .vh-item { border-color: rgba(0,0,0,0.06); }
      body.light-mode .vh-item:hover { background: rgba(0,0,0,0.04); }
.vh-diff-line { font-family: monospace; font-size: 0.75rem; padding: 1px 8px; white-space: pre-wrap; word-break: break-all; }
.vh-diff-line--add { background: rgba(34,197,94,0.15); color: #86efac; border-left: 2px solid var(--color-success); }
.vh-diff-line--del { background: rgba(239,68,68,0.15); color: #fca5a5; border-left: 2px solid var(--color-danger); }
.vh-diff-line--eq  { color: var(--text-muted, #64748b); }
.vh-diff-empty { color: #888; padding: 20px; text-align: center; }
body.light-mode .vh-diff-line--add { background: rgba(34,197,94,0.08); color: #166534; border-left-color: var(--color-success); }
body.light-mode .vh-diff-line--del { background: rgba(239,68,68,0.08); color: #991b1b; border-left-color: var(--color-danger); }
body.light-mode .vh-diff-line--eq  { color: #64748b; }

/* ── Editor (editor.js) ──────────────────────────────────────── */

      .preview-area table {
        width: 100%;
        border-collapse: collapse;
        margin: 12px 0;
        font-size: 0.85rem;
      }
      .preview-area th {
        background: rgba(var(--primary-rgb), 0.15);
        color: var(--primary);
        padding: 8px 12px;
        text-align: left;
        border: 1px solid var(--glass-border);
        font-weight: 600;
      }
      .preview-area td {
        padding: 8px 12px;
        border: 1px solid var(--glass-border);
      }
      .preview-area tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.02);
      }
      .preview-area tr:hover {
        background: rgba(var(--primary-rgb), 0.06);
      }
      .preview-area pre {
        background: rgba(13, 17, 23, 0.9);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 14px;
        margin: 10px 0;
        overflow-x: auto;
      }
      .preview-area pre code {
        font-family: "JetBrains Mono", monospace;
        font-size: var(--fs-base);
        line-height: 1.5;
      }
      .preview-area code {
        font-family: "JetBrains Mono", monospace;
        font-size: var(--fs-base);
        background: rgba(var(--primary-rgb), 0.1);
        padding: 2px 6px;
        border-radius: 4px;
      }
      .preview-area pre code {
        background: none;
        padding: 0;
      }
      .preview-area .katex-display {
        margin: 12px 0;
        overflow-x: auto;
      }
      .preview-area .katex {
        color: var(--text-main);
      }
      .wiki-preview-popup {
        position: fixed;
        z-index: 9999;
        background: var(--card-bg-solid);
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: 10px;
        padding: 12px 14px;
        max-width: 280px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        pointer-events: none;
        animation: gn-popup-in 0.15s ease;
      }
      .wiki-preview-popup .wp-title {
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--primary-light);
        margin-bottom: 5px;
      }
      .wiki-preview-popup .wp-body {
        font-size: 0.74rem;
        color: var(--text-dim);
        line-height: 1.5;
      }
      .wiki-preview-popup .wp-hint {
        font-size: 0.67rem;
        color: rgba(var(--primary-rgb), 0.6);
        margin-top: 6px;
      }
body.light-mode .wiki-preview-popup {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.wiki-preview-empty {
  opacity: 0.4;
  font-style: italic;
}
.at-item { display: flex; align-items: center; gap: 8px; }
.at-item--selected { background: rgba(var(--primary-rgb), 0.15); }
.at-label-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.at-label { font-size: var(--fs-base); color: var(--text-main); min-width: 0; flex: 1; }
.at-badge { border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 2px 6px; flex-shrink: 0; }
body.light-mode .at-badge { border-color: rgba(0,0,0,0.12); }
.at-search-wrap { padding: 6px 8px 4px; }

/* ── Kanban (kanban.js) ──────────────────────────────────────── */

      .kanban-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 900;
        display: none;
        flex-direction: column;
        padding: 0 20px 20px;
        -webkit-app-region: no-drag;
      }
      .kanban-overlay.active {
        display: flex;
        animation: gn-overlay-in 1.2s both;
      }
      .kanban-velocity {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        margin: 0 auto;
      }
      .kanban-header {
        margin: 0 -20px 0;
        position: relative;
      }
      .kb-tools-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 24px;
        flex-shrink: 0;
        flex-wrap: wrap;
        background: rgba(255, 255, 255, 0.015);
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      }
      .kb-tools-row .kb-header-tools {
        display: flex;
        gap: 6px;
        margin-left: auto;
      }
      .kanban-header h2 {
        margin: 0;
      }
      .kanban-board {
        display: flex;
        gap: 16px;
        flex: 1;
        overflow-x: auto;
      }
      .kanban-col {
        flex: 1;
        min-width: 220px;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 12px;
        display: flex;
        flex-direction: column;
      }
      .kanban-col-title {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--glass-border);
        position: relative;
      }
      .kanban-cards {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-height: 40px;
      }
      .kanban-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 8px 10px;
        font-size: var(--fs-base);
        cursor: grab;
        transition: all 0.15s;
        position: relative;
      }
      .kanban-card:hover {
        background: rgba(var(--primary-rgb), 0.1);
        border-color: var(--primary);
      }
      .kanban-card.dragging {
        opacity: 0.4;
      }
      .kanban-col.drag-over {
        background: rgba(var(--primary-rgb), 0.08);
        border-color: var(--primary);
      }
      .kanban-card-header {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        justify-content: space-between;
      }
      .kanban-card-text {
        flex: 1;
        line-height: 1.4;
        word-break: break-word;
      }
      .kanban-card-close {
        font-size: var(--fs-sm);
        background: none;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        padding: 0 2px;
        opacity: 0;
        transition: opacity 0.15s;
        line-height: 1;
        flex-shrink: 0;
      }
      .kanban-card:hover .kanban-card-close {
        opacity: 1;
      }
      .kanban-card-close:hover {
        color: rgba(239, 68, 68, 0.9) !important;
      }
      .kanban-add {
        margin-top: 8px;
        background: none;
        border: 1px dashed var(--glass-border);
        border-radius: 8px;
        padding: 6px;
        color: var(--text-dim);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.15s;
      }
      .kanban-add:hover {
        border-color: var(--primary);
        color: var(--primary);
      }
      .kanban-card-actions {
        display: flex;
        gap: 4px;
        margin-top: 5px;
        opacity: 0;
        transition: opacity 0.15s;
      }
      .kanban-card:hover .kanban-card-actions {
        opacity: 1;
      }
      .kanban-card-actions button {
        font-size: 0.65rem;
        background: none;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 4px;
      }
      .kanban-card-actions button:hover {
        color: var(--primary);
        background: rgba(var(--primary-rgb), 0.1);
      }
      .kanban-col-count {
        font-size: var(--fs-sm);
        background: rgba(var(--primary-rgb), 0.2);
        color: rgba(var(--primary-rgb), 0.9);
        padding: 1px 6px;
        border-radius: 8px;
        margin-left: 6px;
        font-weight: normal;
      }
      .kanban-archive-section {
        margin-top: 16px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
      }
      .kanban-archive-toggle {
        background: none;
        border: none;
        color: var(--text-dim);
        font-size: var(--fs-base);
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
      }
      .kanban-archive-toggle:hover {
        color: var(--text-main);
      }
      .kanban-archive-cards {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .kanban-archived-card {
        font-size: 0.75rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 6px;
        padding: 4px 8px;
        color: var(--text-dim);
        text-decoration: line-through;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
      }
      .kanban-archived-card button {
        background: none;
        border: none;
        color: rgba(239, 68, 68, 0.5);
        cursor: pointer;
        font-size: 0.75rem;
        padding: 2px 4px;
        border-radius: 4px;
        transition: all 0.15s;
      }
      .kanban-archived-card button:hover {
        color: rgba(239, 68, 68, 0.9);
        background: rgba(239, 68, 68, 0.08);
      }
      .kanban-card-footer {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        flex-wrap: wrap;
      }
      .kanban-col:hover .kb-col-del {
        opacity: 1;
      }
      .kanban-col:hover .kb-col-drag-handle { color: rgba(255,255,255,0.5); }
      body.light-mode .kanban-col:hover .kb-col-drag-handle { color: rgba(0,0,0,0.4); }
      .kanban-card.kb-focused { outline: 2px solid rgba(var(--primary-rgb),0.5); outline-offset: -1px; transition: outline 0.15s; }
      .kanban-card.kb-aged-3 {
        opacity: 0.92;
      }
      .kanban-card.kb-aged-7 {
        opacity: 0.8;
      }
      .kanban-card.kb-aged-14 {
        opacity: 0.65;
        filter: saturate(0.7);
      }
      .kanban-card {
        position: relative;
      }
      .kanban-card:hover .kb-select-checkbox {
        opacity: 1;
      }
      .kanban-card:hover,
      .kanban-card.kb-selected {
        padding-left: 28px;
      }
      .kanban-card:hover .kb-select-checkbox,
      .kanban-card.kb-selected .kb-select-checkbox {
        opacity: 1;
      }
      .kanban-card.kb-selected {
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.6) !important;
        background: rgba(var(--primary-rgb), 0.08);
      }
      .kb-quick-add-input {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        outline: none;
        transition: border 0.2s;
      }
      .kb-quick-add-input:focus { border-color: rgba(var(--primary-rgb), 0.5); }
      .kb-tt-row {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .kb-tt-label {
        font-size: 0.75rem;
        color: var(--text-dim);
      }
      .kb-tt-input {
        width: 60px;
        padding: 4px 6px;
        background: rgba(0,0,0,0.2);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 6px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        outline: none;
        box-sizing: border-box;
      }
      body.light-mode .kb-tt-input { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
      .kb-tt-pomo-hint {
        font-size: var(--fs-sm);
        color: var(--text-dim);
      }
      .kb-drop-line {
        height: 2px;
        background: var(--primary);
        border-radius: 2px;
        margin: 2px 0;
      }
      .kb-date-picker {
        background: var(--card-bg-solid);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: var(--radius-md);
        padding: 14px;
        z-index: var(--z-toast);
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        width: 260px;
        user-select: none;
      }
      .kb-pomo-btn { padding: 6px 16px; font-size: var(--fs-base); }
      .kb-priority {
        cursor: pointer;
        font-size: var(--fs-base);
        transition: transform 0.15s;
        user-select: none;
      }
      .kb-priority:hover {
        transform: scale(1.3);
      }
      .kb-due {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        padding: 1px 6px;
        cursor: pointer;
        transition: all 0.15s;
      }
      .kb-due:hover {
        background: rgba(var(--primary-rgb), 0.15);
        color: var(--primary-light);
      }
      .kb-due.overdue {
        color: #f87171;
        background: rgba(239, 68, 68, 0.12);
        animation: pulseDue 2s ease-in-out infinite;
      }
      @keyframes pulseDue {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.6;
        }
      }
      .kb-date-btn {
        font-size: 0.75rem;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.15s;
        user-select: none;
      }
      .kb-date-btn:hover {
        opacity: 1;
      }
      .kb-note-badge {
        font-size: var(--fs-sm);
        color: var(--primary-light);
        background: rgba(var(--primary-rgb), 0.1);
        border-radius: 4px;
        padding: 1px 5px;
        cursor: pointer;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all 0.15s;
      }
      .kb-note-badge:hover {
        background: rgba(var(--primary-rgb), 0.25);
      }
      .kb-create-note-btn {
        font-size: var(--fs-base);
        cursor: pointer;
        opacity: 0.55;
        transition: opacity 0.15s;
        user-select: none;
        padding: 1px 3px;
        border-radius: 4px;
      }
      .kb-create-note-btn:hover {
        opacity: 1;
        background: rgba(var(--primary-rgb), 0.15);
      }
      .kb-col-del {
        position: absolute;
        top: 8px;
        right: 8px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.15);
        cursor: pointer;
        font-size: 0.6rem;
        padding: 2px 4px;
        border-radius: 4px;
        opacity: 0;
        transition: all 0.15s;
      }
      .kb-col-del:hover {
        color: #f87171;
        background: rgba(239, 68, 68, 0.1);
      }
      .kb-col-title-text {
        cursor: default;
      }
      .kb-col-drag-handle {
        color: rgba(255,255,255,0.2);
        font-size: var(--fs-md);
        cursor: grab;
        user-select: none;
        margin-right: 4px;
        transition: color 0.15s;
        line-height: 1;
      }
      .kb-col-drag-handle:active { cursor: grabbing; }
      .kb-col-dragging { opacity: 0.35; transition: opacity 0.2s; }
      .kb-col-drop-left { box-shadow: -3px 0 0 0 var(--primary); }
      .kb-col-drop-right { box-shadow: 3px 0 0 0 var(--primary); }
      body.light-mode .kb-col-drag-handle { color: rgba(0,0,0,0.15); }
      .kb-col-add {
        min-width: 60px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 12px;
      }
      .kb-col-add-btn {
        background: none;
        border: 1px dashed rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 8px 16px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .kb-col-add-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
      }
      .kb-card-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        margin: 4px 0 2px;
      }
      .kb-card-label {
        font-size: 0.6rem;
        padding: 1px 6px;
        border-radius: 4px;
        font-weight: 600;
        letter-spacing: 0.02em;
      }
      .kb-sub-badge {
        font-size: 0.65rem;
        color: var(--text-dim);
        background: rgba(255, 255, 255, 0.06);
        border-radius: 4px;
        padding: 1px 5px;
        margin-left: 2px;
      }
      .kb-sub-badge.complete {
        color: var(--color-success);
        background: rgba(34, 197, 94, 0.12);
      }
      .kb-created-badge { font-size:0.6rem; color:var(--text-muted); margin-left:auto; white-space:nowrap; }
      .kb-days-badge { font-size:0.6rem; color:var(--text-muted); background:rgba(255,255,255,0.06); border-radius:4px; padding:1px 4px; margin-left:2px; }
      .kb-days-badge.stale { color:#fbbf24; background:rgba(251,191,36,0.12); }
      .kb-pomo-badge { font-size:0.6rem; color:var(--color-danger); background:rgba(239,68,68,0.12); border-radius:4px; padding:1px 5px; margin-left:2px; }
      .kb-time-badge { font-size:0.6rem; color:#3b82f6; background:rgba(59,130,246,0.12); border-radius:4px; padding:1px 5px; margin-left:2px; }
      .kb-preset-filters { display:flex; gap:6px; padding:4px 16px 8px; flex-wrap:wrap; }
      .kb-preset-btn {
        background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
        color: var(--text-muted); font-size: var(--fs-sm); padding: 3px 10px; border-radius: 12px;
        cursor: pointer; transition: all 0.2s; white-space: nowrap;
      }
      .kb-preset-btn:hover { background: rgba(var(--primary-rgb),0.12); border-color: rgba(var(--primary-rgb),0.3); color: var(--primary-light); }
      .kb-preset-btn.active { background: rgba(var(--primary-rgb),0.2); border-color: rgba(var(--primary-rgb),0.5); color: var(--primary-light); }
      .kb-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        display: none;
        align-items: center;
        justify-content: center;
        -webkit-app-region: no-drag;
      }
      .kb-modal-overlay.active {
        display: flex;
        animation: gn-overlay-in 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .kb-modal-overlay.active .kb-modal {
        animation: gn-modal-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .kb-modal {
        background: var(--bg-solid);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 18px;
        width: min(560px, 92vw);
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
      }
      .kb-modal-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 18px 20px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .kb-modal-title {
        flex: 1;
        background: none;
        border: none;
        color: var(--text-dim);
        font-size: 1.1rem;
        font-weight: 600;
        font-family: inherit;
        outline: none;
        padding: 4px 0;
        border-bottom: 1px solid transparent;
        transition: border-color 0.15s;
      }
      .kb-modal-title:focus {
        border-bottom-color: rgba(var(--primary-rgb), 0.4);
      }
      .kb-modal-close {
        background: none;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all 0.15s;
      }
      .kb-modal-close:hover {
        color: #f87171;
        background: rgba(239, 68, 68, 0.1);
      }
      .kb-modal-body {
        padding: 16px 20px;
        overflow-y: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .kb-modal-meta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .kb-meta-field {
        flex: 1;
        min-width: 120px;
      }
      .kb-modal-label {
        font-size: var(--fs-sm);
        color: rgba(255, 255, 255, 0.35);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
        font-weight: 600;
      }
      .kb-modal-select {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        font-family: inherit;
        outline: none;
        cursor: pointer;
      }
      .kb-modal-select:focus {
        border-color: rgba(var(--primary-rgb), 0.4);
      }
      .kb-modal-date {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        font-family: inherit;
        outline: none;
      }
      .kb-modal-date:focus {
        border-color: rgba(var(--primary-rgb), 0.4);
      }
      .kb-prio-btns {
        display: flex;
        gap: 4px;
      }
      .kb-prio-btn {
        flex: 1;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 5px;
        text-align: center;
        cursor: pointer;
        font-size: var(--fs-md);
        transition: all 0.15s;
      }
      .kb-prio-btn:hover {
        background: rgba(255, 255, 255, 0.08);
      }
      .kb-prio-btn.active {
        border-width: 2px;
      }
      .kb-labels-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .kb-label-chip {
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent;
        font-family: inherit;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-dim);
        transition: all 0.15s;
      }
      .kb-label-chip.active {
        background: var(--lbl-bg);
        color: var(--lbl-color);
        border-color: var(--lbl-color);
      }
      .kb-label-chip:hover {
        opacity: 0.85;
      }
      .kb-modal-desc {
        width: 100%;
        min-height: 80px;
        resize: vertical;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 10px 12px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        font-family: inherit;
        outline: none;
        line-height: 1.5;
        box-sizing: border-box;
      }
      .kb-modal-desc:focus {
        border-color: rgba(var(--primary-rgb), 0.3);
      }
      .kb-subtask-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .kb-subtask-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      }
      .kb-subtask-row input[type="checkbox"] {
        accent-color: var(--primary);
        width: 15px;
        height: 15px;
        cursor: pointer;
        flex-shrink: 0;
      }
      .kb-subtask-text {
        flex: 1;
        font-size: var(--fs-base);
        color: var(--text-dim);
      }
      .kb-subtask-text.done {
        text-decoration: line-through;
        color: var(--text-muted);
      }
      .kb-subtask-del {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.15);
        cursor: pointer;
        font-size: 0.65rem;
        padding: 2px 4px;
        border-radius: 4px;
        transition: all 0.15s;
      }
      .kb-subtask-del:hover {
        color: #f87171;
        background: rgba(239, 68, 68, 0.1);
      }
      .kb-subtask-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px dashed rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        font-family: inherit;
        outline: none;
        margin-top: 4px;
      }
      .kb-subtask-input:focus {
        border-color: rgba(var(--primary-rgb), 0.3);
        border-style: solid;
      }
      .kb-sub-counter {
        font-size: 0.65rem;
        color: var(--primary);
        background: rgba(var(--primary-rgb), 0.12);
        padding: 1px 6px;
        border-radius: 8px;
        margin-left: 4px;
        font-weight: 400;
      }
      .kb-progress-bar {
        width: 100%;
        height: 4px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 2px;
        margin-bottom: 8px;
        overflow: hidden;
      }
      .kb-progress-fill {
        height: 100%;
        background: var(--primary);
        border-radius: 2px;
        transition: width 0.3s ease;
      }
      .kb-history-list {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .kb-history-row {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        padding: 3px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      }
      .kb-modal-footer {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .kb-modal-created {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        margin-right: auto;
      }
      .kb-modal-btn-archive {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 6px 14px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
      }
      .kb-modal-btn-archive:hover {
        background: rgba(var(--primary-rgb), 0.1);
        border-color: rgba(var(--primary-rgb), 0.3);
        color: var(--primary-light);
      }
      .kb-modal-btn-delete {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: 8px;
        padding: 6px 14px;
        color: #f87171;
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
      }
      .kb-modal-btn-delete:hover {
        background: rgba(239, 68, 68, 0.18);
        border-color: rgba(239, 68, 68, 0.4);
      }
      .kb-sp-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(var(--primary-rgb), 0.15);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        color: var(--primary-light);
        border-radius: 6px;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 1px 5px;
        line-height: 1.4;
      }
      .kb-col-sp-sum {
        font-size: 0.65rem;
        color: var(--text-muted);
        margin-left: 4px;
        font-weight: 500;
      }
      .kb-sp-btns {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
      }
      .kb-sp-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-muted);
        border-radius: 8px;
        padding: 4px 10px;
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
      }
      .kb-sp-btn.active {
        background: rgba(var(--primary-rgb), 0.2);
        border-color: rgba(var(--primary-rgb), 0.5);
        color: var(--primary-light);
      }
      .kb-sp-btn:hover {
        border-color: rgba(var(--primary-rgb), 0.4);
        color: var(--primary-light);
      }
      .kb-swimlane-header {
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 4px 8px;
        margin: 6px 0 3px;
        border-left: 3px solid;
        border-radius: 0 5px 5px 0;
        opacity: 0.85;
      }
      .kb-swimlane-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-muted);
        border-radius: 8px;
        padding: 4px 10px;
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .kb-swimlane-btn.active {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: rgba(var(--primary-rgb), 0.4);
        color: var(--primary-light);
      }
      .kb-swimlane-btn:hover {
        border-color: rgba(var(--primary-rgb), 0.3);
        color: var(--primary-light);
      }
      .kb-filters-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        padding: 0;
        align-items: center;
        align-self: center;
      }
      .kb-filter-chip {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-muted);
        border-radius: var(--radius-lg);
        padding: 3px 12px;
        font-size: 0.73rem;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .kb-filter-chip:hover {
        border-color: rgba(var(--primary-rgb), 0.4);
        color: var(--primary-light);
      }
      .kb-filter-chip.active {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: rgba(var(--primary-rgb), 0.45);
        color: var(--primary-light);
        font-weight: 600;
      }
      .kb-select-checkbox {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s;
        z-index: 2;
        accent-color: var(--primary);
      }
      .kb-bulk-bar {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--card-bg-solid);
        border: 1px solid rgba(var(--primary-rgb), 0.35);
        border-radius: var(--radius-md);
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
        z-index: 9990;
        animation: gn-drop-in 0.2s ease;
        font-size: var(--fs-base);
      }
      .kb-bulk-bar span {
        color: var(--text-muted);
        white-space: nowrap;
      }
      .kb-bulk-btn {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-dim);
        border-radius: 8px;
        padding: 6px 12px;
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .kb-bulk-btn:hover {
        background: rgba(var(--primary-rgb), 0.2);
        border-color: rgba(var(--primary-rgb), 0.4);
        color: var(--primary-light);
      }
      .kb-bulk-btn.danger {
        color: #f87171;
      }
      .kb-bulk-btn.danger:hover {
        background: rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.35);
      }
      .kb-bulk-sep {
        width: 1px;
        height: 20px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0 2px;
      }
      .kb-repeat-badge {
        font-size: 0.65rem;
        color: var(--color-success);
        opacity: 0.85;
      }
      .kb-header-tools {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-left: 8px;
      }
      .kb-tool-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--text-muted);
        border-radius: 8px;
        padding: 5px 11px;
        font-size: var(--fs-base);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .kb-tool-btn:hover {
        border-color: rgba(var(--primary-rgb), 0.4);
        color: var(--primary-light);
        background: rgba(var(--primary-rgb), 0.1);
      }
      .kb-burndown-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(6px);
        animation: gn-overlay-in 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .kb-burndown-modal {
        background: var(--card-bg-solid, #141b2d);
        animation: gn-modal-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 20px;
        width: min(700px, 94vw);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
      }
      .kb-burndown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      }
      .kb-burndown-header h3 {
        margin: 0;
        font-size: 1rem;
        color: var(--text-dim);
      }
      .kb-burndown-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all 0.15s;
      }
      .kb-burndown-close:hover {
        color: #f87171;
        background: rgba(239, 68, 68, 0.1);
      }
      .kb-burndown-legend {
        display: flex;
        gap: 16px;
        margin-bottom: 10px;
        font-size: 0.75rem;
      }
      .kb-burndown-legend span {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--text-muted);
      }
      .kb-burndown-legend i {
        display: inline-block;
        width: 20px;
        height: 3px;
        border-radius: 2px;
      }
      .kb-repeat-select {
        background: var(--card-bg-solid);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--text-muted);
        font-size: var(--fs-base);
        font-family: inherit;
        cursor: pointer;
        outline: none;
        width: 100%;
      }
      .kb-repeat-select:focus {
        border-color: rgba(var(--primary-rgb), 0.4);
      }
      .kb-hotkey-hint {
        position: fixed;
        bottom: 18px;
        right: 18px;
        background: rgba(20, 27, 45, 0.95);
        border: 1px solid rgba(var(--primary-rgb), 0.25);
        border-radius: 10px;
        padding: 8px 14px;
        font-size: var(--fs-sm);
        color: var(--text-muted);
        z-index: 9985;
        pointer-events: none;
        animation: gn-popup-in 0.2s ease;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .kb-hotkey-hint kbd {
        display: inline-block;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        padding: 1px 5px;
        font-family: "JetBrains Mono", monospace;
        font-size: var(--fs-sm);
        color: var(--primary-light);
        margin-right: 4px;
      }
body.light-mode .kb-modal-btn-archive {
  background: rgba(0, 0, 0, 0.06);
  color: #1e293b;
}
body.light-mode .kb-modal-btn-delete {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}
body.light-mode .kb-bulk-bar {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
body.light-mode .kb-sub-badge,
body.light-mode .kb-days-badge,
body.light-mode .kb-pomo-badge,
body.light-mode .kb-time-badge {
  background: rgba(0, 0, 0, 0.06);
  color: #475569;
}
      .kv-chip {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 18px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 10px;
        min-width: 80px;
        transition: 0.2s;
      }
      .kv-chip .kv-num {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary);
        line-height: 1.1;
      }
      .kv-chip .kv-label {
        font-size: 0.65rem;
        color: var(--text-muted);
        white-space: nowrap;
      }

/* ── AI (ai.js) ──────────────────────────────────────────────── */

      .ai-popup {
        background: var(--card-bg-solid);
        border: 1px solid rgba(var(--primary-rgb), 0.3);
        border-radius: 16px;
        padding: 0;
        z-index: var(--z-toast);
        box-shadow: 0 16px 48px rgba(0,0,0,0.6);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .ai-popup--sm { border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
      .ai-popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        flex-shrink: 0;
      }
      .ai-popup-header--sm { padding: 10px 14px; }
      .ai-popup-body {
        padding: 16px;
        overflow-y: auto;
        flex: 1;
        font-size: 0.85rem;
        color: var(--text-dim);
        line-height: 1.7;
        min-height: 60px;
      }
      .ai-popup-body--sm { padding: 14px; min-height: 50px; }
      .ai-popup-footer {
        display: flex;
        gap: 8px;
        padding: 10px 16px;
        border-top: 1px solid rgba(255,255,255,0.06);
        flex-shrink: 0;
      }
      .ai-popup-footer--sm { padding: 8px 14px; }
      .ai-popup-input-row {
        display: flex;
        gap: 6px;
        padding: 8px 16px;
        border-top: 1px solid rgba(255,255,255,0.06);
        flex-shrink: 0;
      }
      .ai-popup-input {
        flex: 1;
        background: #0d1117;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        padding: 8px 12px;
        color: var(--text-dim);
        font-size: var(--fs-base);
        outline: none;
      }
      .ai-popup-send {
        width: 36px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: #fff;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 700;
        flex-shrink: 0;
      }
      .ai-insert-btn {
        flex: 1;
        padding: 8px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: #fff;
        cursor: pointer;
        font-size: var(--fs-base);
        font-weight: 600;
      }
      .ai-copy-btn {
        padding: 8px 14px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.1);
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        font-size: var(--fs-base);
      }
      .ai-tag-banner {
        position: fixed;
        bottom: 24px;
        right: 24px;
        background: linear-gradient(135deg, var(--bg-solid), var(--card-bg-solid));
        border: 1px solid rgba(var(--primary-rgb), 0.4);
        border-radius: var(--radius-md);
        padding: 14px 16px;
        z-index: 9999;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        animation: gn-slide-right-in 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
      }
      .ai-banner-header {
        font-size: 0.75rem;
        color: var(--primary-light);
        margin-bottom: 8px;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
      .ai-tag-pill {
        background: rgba(var(--primary-rgb), 0.2);
        border-radius: 6px;
        padding: 1px 6px;
        margin: 2px;
        display: inline-block;
      }
      .ai-banner-btns {
        display: flex;
        gap: 8px;
        margin-top: 6px;
      }
      .ai-banner-apply {
        flex: 1;
        padding: 6px 10px;
        background: var(--primary);
        border: none;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        font-size: var(--fs-base);
        font-weight: 600;
      }
      .ai-banner-dismiss {
        padding: 6px 10px;
        background: rgba(255,255,255,0.08);
        border: none;
        border-radius: 8px;
        color: #aaa;
        cursor: pointer;
        font-size: var(--fs-base);
      }
      .ai-model-dropdown {
        position: absolute;
        bottom: 100%;
        right: 0;
        margin-bottom: 6px;
        background: var(--card-bg, #1a1a2e);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        padding: 8px 0;
        min-width: 240px;
        max-height: 320px;
        overflow-y: auto;
        z-index: 9999;
        box-shadow: 0 12px 40px rgba(0,0,0,0.5);
      }
      .ai-model-item {
        padding: 8px 14px;
        cursor: pointer;
        font-size: var(--fs-base);
        color: var(--text-dim);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.15s;
      }
      .ai-model-item:hover { background: rgba(var(--primary-rgb), 0.1); }
      .ai-voice-badge {
        position: fixed;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: #fff;
        padding: 8px 18px;
        border-radius: 50px;
        z-index: var(--z-toast);
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: var(--fs-base);
        box-shadow: 0 8px 24px rgba(239,68,68,0.4);
        animation: gn-popup-in 0.2s both;
      }
      .ai-sysprompt-box {
        background: var(--card-bg, #1a1a2e);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: var(--radius-lg);
        padding: 24px 28px;
        max-width: 560px;
        width: 95%;
        max-height: 80vh;
        overflow-y: auto;
      }
      body.light-mode .ai-popup { background: #fff; border-color: rgba(var(--primary-rgb),0.15); box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
      body.light-mode .ai-popup-input { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
      body.light-mode .ai-tag-banner { background: linear-gradient(135deg, #f8fafc, #fff); border-color: rgba(var(--primary-rgb),0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
      body.light-mode .ai-model-dropdown { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
      body.light-mode .ai-model-item:hover { background: rgba(0,0,0,0.04); }
      body.light-mode .ai-sysprompt-box { background: #fff; border-color: rgba(0,0,0,0.12); }
body.light-mode #inline-ai-toolbar {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.ai-ghost-text {
  color: rgba(165,180,252,0.45);
  pointer-events: none;
  user-select: none;
  font-style: italic;
}
.ai-banner-content-scroll { max-height: 180px; overflow-y: auto; margin-bottom: 8px; }
.ai-banner-row { margin-bottom: 8px; }
.ai-banner-row--card { padding: 6px 8px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.ai-banner-note-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-banner-desc { margin-bottom: 4px; font-size: var(--fs-base); color: var(--text-dim); }
.ai-link-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, var(--bg-solid), var(--card-bg-solid));
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  max-width: 360px;
  z-index: 9998;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: gn-slide-right-in 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.ai-link-banner-header {
  font-size: 0.75rem;
  color: var(--primary-light);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.ai-link-banner-list { margin-bottom: 10px; }
.ai-link-banner-item { font-size: var(--fs-base); color: var(--text-dim); margin-bottom: 4px; }
.ai-link-banner-item-link { color: var(--primary-light); font-weight: 500; }
.ai-link-banner-item-reason { opacity: 0.5; font-size: var(--fs-sm); margin-left: 4px; }
.ai-link-banner-btns { display: flex; gap: 8px; margin-top: 6px; }
.ai-link-banner-apply {
  flex: 1;
  padding: 6px 10px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 600;
}
.ai-link-banner-dismiss {
  padding: 6px 10px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  color: #aaa;
  cursor: pointer;
  font-size: var(--fs-base);
}
body.light-mode .ai-link-banner { background: linear-gradient(135deg, #f8fafc, #fff); border-color: rgba(var(--primary-rgb),0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.ai-chat-thumb { max-height: 120px; border-radius: 8px; margin-top: 6px; display: block; }
.ai-insert-wrapper { display: block; margin-top: 10px; }
.ai-rag-sources {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ai-rag-source-link { cursor: pointer; color: var(--primary-light); margin-right: 6px; }
.ai-voice-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: gn-blink 1s infinite;
}
.ai-voice-badge-stop {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  padding: 4px 12px;
  border-radius: 99px;
  cursor: pointer;
  font-size: var(--fs-base);
}
.ai-popup--fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-width: 92vw;
  max-height: 75vh;
}
.ai-popup-label {
  font-size: var(--fs-base);
  color: var(--primary-light);
  font-weight: 600;
}
.ai-followup-q {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ai-followup-q-label { color: var(--primary-light); font-size: 0.75rem; font-weight: 600; }
.ai-followup-q-text { color: var(--text-muted); }
.ai-followup-a-label { color: var(--primary-light); font-size: 0.75rem; font-weight: 600; }
.ai-thinking { margin-top: 8px; opacity: 0.5; }
.ai-error-text { color: #f87171; }
.ai-explain-insert { color: var(--primary-light); font-size: 0.9em; }
.ai-tmpl-del-btn {
  color: var(--color-danger);
  opacity: 0.5;
  cursor: pointer;
  margin-left: 8px;
  font-size: var(--fs-sm);
}
.ai-tmpl-sep { border-top: 1px solid rgba(255,255,255,0.08); margin: 4px 0; }
.ai-tmpl-add-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--primary-light, #818cf8);
  transition: background 0.15s;
}
.ai-tmpl-add-item:hover { background: rgba(var(--primary-rgb), 0.08); }

/* ── Meeting Transcript (ai.js) ──────────────────────────────── */

.mt-title { margin: 0 0 6px; color: var(--text-dim); font-size: 1.1rem; }
.mt-desc { margin: 0 0 14px; color: var(--text-muted); font-size: var(--fs-base); }
.mt-textarea {
  width: 100%;
  height: 200px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 12px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.mt-btn-row { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.mt-process-btn {
  padding: 9px 22px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 600;
}
.mt-result { margin-top: 14px; }
.mt-loading { color: var(--text-muted); font-size: var(--fs-base); text-align: center; padding: 12px; }
.mt-error { color: #f87171; font-size: var(--fs-base); padding: 8px; }
body.light-mode .mt-textarea { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }

/* ── Pomodoro (pomodoro.js) ──────────────────────────────────── */

      .pomo-stepper-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
      }
      .pomo-stepper-actions {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 4px;
      }
      .pomo-btn--sm { padding: 3px 14px; font-size: var(--fs-base); }
      .pomo-alert-overlay {
        position: fixed;
        inset: 0;
        z-index: 9000;
        background: rgba(0,0,0,0.75);
        backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pomo-alert-card {
        background: var(--bg-solid);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 32px;
        padding: 3rem 4rem;
        text-align: center;
        box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 60px rgba(var(--primary-rgb),0.2);
        max-width: 480px;
        width: 90%;
      }
      .pomo-alert-emoji { font-size: 5rem; margin-bottom: 1rem; line-height: 1; }
      .pomo-alert-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; color: white; }
      .pomo-alert-subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 2rem; }
      .pomo-alert-close {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: none;
        color: white;
        padding: 14px 40px;
        border-radius: 16px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 8px 24px rgba(var(--primary-rgb),0.4);
        transition: transform 0.2s, box-shadow 0.2s;
      }
      .pomo-alert-close:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 32px rgba(var(--primary-rgb),0.6);
      }
      .pomo-alert-close--success {
        background: linear-gradient(135deg, var(--success), var(--secondary));
      }

/* ── Timeline (export.js) ─────────────────────────────────── */

      .tl-empty { color: var(--primary); opacity: 0.5; margin: auto; font-size: 1rem; }
      .tl-line { width: 32px; height: 2px; background: linear-gradient(90deg,rgba(var(--primary-rgb),0.4),rgba(var(--primary-rgb),0.1)); flex-shrink: 0; align-self: center; margin-top: -60px; }
      .tl-col { flex-shrink: 0; width: 200px; display: flex; flex-direction: column; gap: 8px; }
      .tl-today-dot { position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; border: 2px solid #0f172a; }
      .tl-card { padding: 10px 12px; border-radius: 10px; background: rgba(15,23,42,0.7); border: 1px solid rgba(var(--primary-rgb),0.12); cursor: pointer; transition: all 0.15s; font-size: var(--fs-base); }
      .tl-card:hover { border-color: rgba(var(--primary-rgb),0.4); background: rgba(var(--primary-rgb),0.08); }
      .tl-card-title { font-weight: 600; color: var(--text-dim); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .tl-card-preview { color: var(--text-muted, #64748b); font-size: var(--fs-sm); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .tl-card-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 3px; }
      .tl-tag { background: rgba(var(--primary-rgb),0.15); color: var(--primary-light); border-radius: 6px; padding: 1px 5px; font-size: 0.65rem; }
      .tl-card-time { margin-top: 5px; color: var(--text-muted); font-size: 0.65rem; }
      .tl-more { text-align: center; font-size: var(--fs-sm); color: var(--primary); opacity: 0.7; padding: 2px 0; }

/* ── Canvas (canvas.js, canvas-layout.js, canvas-draw.js) ──── */

#canvas-view {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg-solid);
  backdrop-filter: blur(20px);
  display: none; flex-direction: column;
  -webkit-app-region: no-drag;
}
.cv-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 24px;
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  z-index: 1; flex-shrink: 0;
  -webkit-app-region: no-drag;
}
.cv-toolbar-row2 { padding-top: 0; padding-left: 16px; border-top: none; }
.cv-figma-bottom {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  padding: 6px 10px; gap: 4px;
  background: rgba(15, 15, 40, 0.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-bottom: none; border-radius: 14px 14px 0 0;
  z-index: 5; flex-shrink: 0;
  flex-direction: column; align-items: center;
  -webkit-app-region: no-drag;
}
.cv-figma-content {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cv-figma-row1, .cv-figma-row2 {
  display: flex; align-items: center; gap: 3px;
}
.cv-figma-row2 {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 3px; margin-top: 1px;
}
.cv-figma-collapsed .cv-figma-content { display: none; }
.cv-fig-collapse-btn {
  width: 24px !important; height: 14px !important; min-width: 24px !important;
  font-size: 8px; color: rgba(255,255,255,0.3); border: none; background: transparent;
  cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.cv-fig-collapse-btn:hover { color: rgba(255,255,255,0.6); }
.cv-fig-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 32px;
  padding: 0; border: none; border-radius: 6px;
  background: transparent; color: rgba(255,255,255,0.55);
  cursor: pointer; transition: all 0.12s ease;
  flex-shrink: 0; position: relative;
}
.cv-fig-btn svg { width: 18px; height: 18px; }
.cv-fig-btn:hover { background: rgba(var(--primary-rgb), 0.15); color: #fff; }
.cv-fig-btn:active { transform: scale(0.92); }
.cv-fig-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; }
.cv-fig-btn.cv-fig-active { background: rgba(var(--primary-rgb), 0.25); color: var(--primary-light); box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.4); }
.cv-fig-more {
  width: auto; padding: 0 8px; font-size: var(--fs-base); font-weight: 600;
  color: rgba(255,255,255,0.4); gap: 4px;
}
.cv-fig-more:hover { color: rgba(255,255,255,0.7); }
.cv-shapes-group { gap: 1px; }
.cv-fig-sep {
  width: 1px; height: 20px; background: rgba(255,255,255,0.1);
  margin: 0 4px; flex-shrink: 0;
}
.cv-tb-sep {
  width: 1px; height: 18px; background: rgba(255,255,255,0.1);
  margin: 0 4px; flex-shrink: 0; align-self: center;
}
.cv-quick-color-indicator {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid rgba(255,255,255,0.3);
  display: block;
}
.cv-quick-color-popup {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  padding: 8px; background: rgba(15, 15, 40, 0.95); backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--primary-rgb), 0.2); border-radius: 10px;
  z-index: 9999;
}
.cv-qc-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: all 0.12s;
}
.cv-qc-swatch:hover { transform: scale(1.2); border-color: rgba(255,255,255,0.5); }
.cv-qc-swatch.cv-qc-active { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.3); }
.cv-recent-shapes { gap: 1px; }
.cv-fig-recent { opacity: 0.7; }
.cv-fig-recent:hover { opacity: 1; }
.cv-shape-tool-ghost { pointer-events: none; }
.cv-shape-tooltip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 12px; background: rgba(10, 10, 30, 0.95); backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--primary-rgb), 0.25); border-radius: 10px;
  transform: translateX(-50%); z-index: 99999; pointer-events: none;
  animation: cv-tip-in 0.15s ease;
}
.cv-shape-tooltip-svg { width: 48px; height: 48px; }
.cv-shape-tooltip-svg .cv-shape-path { stroke: var(--primary-light); stroke-width: 3; fill: none; }
.cv-shape-tooltip-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.8); white-space: nowrap; }
.cv-shape-tooltip-kbd {
  display: inline-block; padding: 1px 6px; font-size: 0.65rem; font-family: monospace;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px; color: rgba(255,255,255,0.6);
}
body.light-mode .cv-figma-bottom { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.1); }
body.light-mode .cv-fig-btn { color: rgba(0,0,0,0.5); }
body.light-mode .cv-fig-btn:hover { background: rgba(var(--primary-rgb), 0.1); color: rgba(0,0,0,0.8); }
body.light-mode .cv-fig-btn.cv-fig-active { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); }
body.light-mode .cv-fig-more { color: rgba(0,0,0,0.35); }
body.light-mode .cv-fig-sep { background: rgba(0,0,0,0.1); }
body.light-mode .cv-tb-sep { background: rgba(0,0,0,0.1); }
body.light-mode .cv-figma-row2 { border-top-color: rgba(0,0,0,0.08); }
body.light-mode .cv-quick-color-popup { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.15); }
body.light-mode .cv-fig-collapse-btn { color: rgba(0,0,0,0.3); }
body.light-mode .cv-fig-collapse-btn:hover { color: rgba(0,0,0,0.6); }
body.light-mode .cv-shape-tooltip { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.12); }
body.light-mode .cv-shape-tooltip-svg .cv-shape-path { stroke: var(--primary); }
body.light-mode .cv-shape-tooltip-label { color: rgba(0,0,0,0.7); }
body.light-mode .cv-shape-tooltip-kbd { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.5); }
.cv-tb-group {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
}
.cv-toolbar-title { font-weight: 700; font-size: 1rem; color: var(--primary-light); margin-right: 4px; }
.cv-tool-btn {
  padding: 4px 8px; border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.08); color: var(--text-main);
  border-radius: 6px; cursor: pointer; font-size: var(--fs-base); white-space: nowrap;
  transition: all 0.15s;
}
.cv-tool-btn:hover { background: rgba(var(--primary-rgb), 0.2); border-color: rgba(var(--primary-rgb), 0.4); }
.cv-zoom-label { font-size: var(--fs-base); color: var(--text-dim); min-width: 36px; text-align: center; }
.cv-zoom-btn { min-width: 28px; text-align: center; font-weight: 700; font-size: var(--fs-md); }
.cv-workspace { flex: 1; overflow: hidden; position: relative; cursor: grab; }
.cv-workspace:active { cursor: grabbing; }
.cv-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: 0 0; }
.cv-arrows { position: absolute; top: 0; left: 0; width: 32000px; height: 32000px; overflow: visible; pointer-events: none; z-index: 0; }
.cv-empty-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text-dim); opacity: 0.5; font-size: 1.1rem; pointer-events: none;
}
.cv-block {
  position: absolute; background: rgba(20, 20, 50, 0.92);
  border: 1.5px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 10px; overflow: visible;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: box-shadow 0.15s, border-color 0.15s;
  display: flex; flex-direction: column; min-width: 120px; min-height: 60px;
  cursor: move;
}
.cv-block:hover { border-color: rgba(var(--primary-rgb), 0.5); box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
.cv-block.cv-selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3), 0 6px 24px rgba(0,0,0,0.4); }
.cv-block.cv-arrow-drop-target { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.4), 0 6px 24px rgba(0,0,0,0.4) !important; }
.cv-rubber-band { position: absolute; border: 1.5px solid var(--primary); background: rgba(var(--primary-rgb), 0.08); pointer-events: none; z-index: 100; border-radius: 2px; }
.cv-multi-toolbar { position: fixed; display: flex; align-items: center; gap: 6px; background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 10px; padding: 6px 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10020; transform: translateX(-50%); white-space: nowrap; }
.cv-multi-count { font-size: var(--fs-base); color: var(--text-dim); margin-right: 4px; }
.cv-multi-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: var(--fs-base); color: var(--text-main); transition: background 0.15s; }
.cv-multi-btn:hover { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
.cv-arrow-label-input { position: fixed; width: 120px; background: var(--card-bg); border: 1.5px solid var(--primary); border-radius: 6px; padding: 2px 8px; color: var(--text-main); font-size: 12px; font-family: system-ui, sans-serif; outline: none; z-index: 10030; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.cv-block-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; background: rgba(var(--primary-rgb), 0.08);
  cursor: move; user-select: none; flex-shrink: 0;
  border-radius: 9px 9px 0 0;
}
.cv-block-icon { font-size: 0.85rem; }
.cv-block-del {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 0.85rem; padding: 0 2px; border-radius: var(--radius-xs);
  opacity: 0; transition: opacity 0.15s;
}
.cv-block:hover .cv-block-del { opacity: 1; }
.cv-block-del:hover { color: var(--color-danger); background: rgba(239,68,68,0.15); }
.cv-block-color {
  background: none; border: none; cursor: pointer; font-size: 0.85rem;
  padding: 0 2px; border-radius: var(--radius-xs); opacity: 0; transition: opacity 0.15s;
  margin-right: auto;
}
.cv-block:hover .cv-block-color { opacity: 0.7; }
.cv-block-color:hover { opacity: 1 !important; }
.cv-block[data-color="cv-color-yellow"] { border-color: rgba(234,179,8,0.6); background: rgba(234,179,8,0.08); border-left: 3px solid #EAB308; }
.cv-block[data-color="cv-color-yellow"] .cv-block-header { background: rgba(234,179,8,0.15); }
.cv-block[data-color="cv-color-green"]  { border-color: rgba(34,197,94,0.6); background: rgba(34,197,94,0.08); border-left: 3px solid #22C55E; }
.cv-block[data-color="cv-color-green"]  .cv-block-header { background: rgba(34,197,94,0.15); }
.cv-block[data-color="cv-color-red"]    { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.08); border-left: 3px solid #EF4444; }
.cv-block[data-color="cv-color-red"]    .cv-block-header { background: rgba(239,68,68,0.15); }
.cv-block[data-color="cv-color-blue"]   { border-color: rgba(59,130,246,0.6); background: rgba(59,130,246,0.08); border-left: 3px solid #3B82F6; }
.cv-block[data-color="cv-color-blue"]   .cv-block-header { background: rgba(59,130,246,0.15); }
.cv-block[data-color="cv-color-purple"] { border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.08); border-left: 3px solid #A855F7; }
.cv-block[data-color="cv-color-purple"] .cv-block-header { background: rgba(168,85,247,0.15); }
.cv-block[data-color="cv-color-orange"] { border-color: rgba(249,115,22,0.6); background: rgba(249,115,22,0.08); border-left: 3px solid #F97316; }
.cv-block[data-color="cv-color-orange"] .cv-block-header { background: rgba(249,115,22,0.15); }
.cv-block[data-color="cv-color-dark"]   { border-color: rgba(100,116,139,0.6); background: rgba(30,30,45,0.9); border-left: 3px solid #64748B; }
.cv-block[data-color="cv-color-dark"]   .cv-block-header { background: rgba(100,116,139,0.2); }
.cv-marker-bar { position: absolute; bottom: 4px; left: 6px; display: flex; gap: 2px; pointer-events: none; }
.cv-marker { font-size: 12px; line-height: 1; }
.cv-marker-picker {
  position: fixed; z-index: 10020; background: var(--card-bg);
  border: 1px solid var(--glass-border); border-radius: 10px;
  padding: 8px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.cv-marker-opt {
  font-size: 18px; cursor: pointer; padding: 4px; border-radius: 6px;
  border: 2px solid transparent; transition: border-color 0.15s, background 0.15s;
  line-height: 1;
}
.cv-marker-opt:hover { background: rgba(255,255,255,0.08); }
.cv-marker-opt.active { border-color: var(--primary); background: rgba(var(--primary-rgb),0.12); }
.cv-block-marker {
  background: none; border: none; cursor: pointer; font-size: 0.75rem;
  padding: 2px 3px; border-radius: 4px; opacity: 0.6; transition: opacity 0.15s;
  color: var(--text-main);
}
.cv-block-marker:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.cv-color-picker-popup {
  z-index: 10010; background: var(--card-bg); border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 6px; display: flex; gap: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.cv-color-swatch {
  background: none; border: 2px solid transparent; border-radius: 4px;
  cursor: pointer; font-size: 1.1rem; padding: 2px 4px; transition: border-color 0.15s;
}
.cv-color-swatch:hover { border-color: var(--primary); }
.cv-color-swatch.active { border-color: var(--primary); }
.cv-block-content {
  flex: 1; padding: 8px 10px; overflow: hidden;
  font-size: 0.85rem; line-height: 1.5; color: var(--text-main); outline: none;
  cursor: default; border-radius: 9px;
}
.cv-block-content[contenteditable] { cursor: text; }
.cv-block-content:focus { background: rgba(var(--primary-rgb), 0.04); }
.cv-note-title { font-weight: 600; color: var(--primary-light); margin-bottom: 4px; font-size: 0.85rem; }
.cv-note-snippet { font-size: var(--fs-base); color: var(--text-dim); line-height: 1.4; }
.cv-img-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); opacity: 0.6; }
.cv-handle {
  position: absolute; width: 8px; height: 8px; background: #fff;
  border: 1.5px solid #0D99FF; border-radius: 1px; z-index: 5;
  opacity: 0; transition: opacity 0.12s; pointer-events: all; box-sizing: border-box;
}
.cv-block.cv-selected .cv-handle { opacity: 1; }
.cv-block:hover .cv-handle { opacity: 0.5; }
.cv-block.cv-selected:hover .cv-handle { opacity: 1; }
.cv-handle-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.cv-handle-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.cv-handle-se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.cv-handle-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.cv-handle-n { top: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.cv-handle-s { bottom: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.cv-handle-e { top: 50%; right: -4px; margin-top: -4px; cursor: ew-resize; }
.cv-handle-w { top: 50%; left: -4px; margin-top: -4px; cursor: ew-resize; }
.cv-handle:hover { background: #0D99FF; }
.cv-dim-label {
  position: fixed; background: #0D99FF; color: #fff; font-size: 11px;
  padding: 2px 6px; border-radius: 4px; pointer-events: none; z-index: 10050;
  white-space: nowrap; display: none; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500; letter-spacing: 0.3px;
}
.cv-connector {
  position: absolute; width: 12px; height: 12px;
  border-radius: 50%; background: rgba(var(--primary-rgb), 0.3);
  border: 2px solid var(--primary);
  cursor: crosshair; opacity: 0; transition: opacity 0.15s; z-index: 2;
}
.cv-block:hover .cv-connector { opacity: 1; }
.cv-connector:hover { background: var(--primary); transform: scale(1.3); }
.cv-conn-top    { top: -6px; left: 50%; margin-left: -6px; }
.cv-conn-bottom { bottom: -6px; left: 50%; margin-left: -6px; }
.cv-conn-left   { left: -6px; top: 50%; margin-top: -6px; }
.cv-conn-right  { right: -6px; top: 50%; margin-top: -6px; }
.cv-note-picker-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.6); display: flex;
  align-items: center; justify-content: center;
}
.cv-note-picker {
  background: var(--card-bg); border: 1px solid var(--glass-border);
  border-radius: 12px; width: 380px; max-height: 500px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.cv-note-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--glass-border); font-weight: 600;
}
.cv-note-picker-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; }
.cv-note-picker-search {
  margin: 8px 12px; padding: 8px 12px;
  border: 1px solid var(--glass-border); border-radius: 8px;
  background: var(--bg); color: var(--text-main); font-size: 0.85rem; outline: none;
}
.cv-note-picker-search:focus { border-color: var(--primary); }
.cv-note-picker-list { overflow-y: auto; max-height: 350px; padding: 4px 0; }
.cv-note-picker-item {
  padding: 8px 16px; cursor: pointer; font-size: 0.85rem;
  color: var(--text-main); transition: background 0.1s;
}
.cv-note-picker-item:hover { background: rgba(var(--primary-rgb), 0.1); }
body.light-mode #canvas-view { background: rgba(245, 245, 250, 0.97); }
body.light-mode .cv-toolbar { background: rgba(255,255,255,0.95); border-bottom-color: rgba(0,0,0,0.08); }
body.light-mode .cv-tb-group { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light-mode .cv-block { background: rgba(255,255,255,0.95); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
body.light-mode .cv-empty-hint { color: #888; }
.cv-minimap { position: absolute; bottom: 16px; right: 16px; width: 180px; height: 120px; border-radius: 8px; z-index: 120; cursor: crosshair; opacity: 0.82; transition: opacity 0.2s; box-shadow: 0 4px 20px rgba(0,0,0,0.6); pointer-events: auto; }
.cv-minimap:hover { opacity: 1; }
.cv-block-collapse {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 11px; padding: 0 2px; opacity: 0; transition: opacity 0.15s;
  line-height: 1;
}
.cv-block:hover .cv-block-collapse { opacity: 0.5; }
.cv-block-collapse:hover { opacity: 1 !important; color: var(--primary); }
.cv-block-collapse.collapsed { opacity: 0.7; color: var(--primary); }
.cv-collapse-badge {
  position: absolute; bottom: 4px; right: 4px;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px; pointer-events: none; z-index: 5;
}
.cv-block-section {
  background: rgba(124,92,252,0.06) !important;
  border: 2px dashed rgba(124,92,252,0.4) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  z-index: 1;
}
.cv-block-section .cv-block-header {
  background: rgba(124,92,252,0.12);
  border-bottom: 1px dashed rgba(124,92,252,0.25);
}
.cv-block-section .cv-block-content {
  padding: 4px 8px; height: calc(100% - 28px);
}
.cv-section-title {
  font-size: 14px; font-weight: 600; color: rgba(124,92,252,0.9);
  outline: none; padding: 2px 4px; border-radius: 4px;
  cursor: text; display: inline-block;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-section-title:focus { background: rgba(124,92,252,0.1); }
body.light-mode .cv-block-section {
  background: rgba(124,92,252,0.04) !important;
  border-color: rgba(124,92,252,0.3) !important;
}
body.light-mode .cv-block-section .cv-block-header { background: rgba(124,92,252,0.08); }
body.light-mode .cv-section-title { color: rgba(100,70,220,0.9); }
body.light-mode .cv-section-title:focus { background: rgba(124,92,252,0.08); }
.cv-block-shape {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
.cv-block-shape .cv-block-header {
  position: absolute; top: -2px; right: -2px; left: auto;
  background: transparent; border: none;
  z-index: 2; width: auto; padding: 2px 4px;
  opacity: 0; transition: opacity 0.15s;
}
.cv-block-shape:hover .cv-block-header,
.cv-block-shape.cv-selected .cv-block-header { opacity: 1; }
.cv-shape-content {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 !important;
}
.cv-shape-svg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.cv-shape-path {
  fill: rgba(var(--primary-rgb), 0.08);
  stroke: rgba(var(--primary-rgb), 0.6);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s, stroke 0.15s;
}
g.cv-shape-path > * {
  fill: inherit; stroke: inherit; stroke-width: inherit;
  vector-effect: non-scaling-stroke;
}
.cv-block-shape:hover .cv-shape-path {
  stroke: rgba(var(--primary-rgb), 0.85);
  fill: rgba(var(--primary-rgb), 0.12);
}
.cv-block-shape.cv-selected .cv-shape-path {
  stroke: var(--primary);
  fill: rgba(var(--primary-rgb), 0.15);
  stroke-width: 2.5;
}
.cv-block-shape:hover { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25) !important; }
.cv-block-shape.cv-selected { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.5), 0 0 16px rgba(var(--primary-rgb), 0.15) !important; }
.cv-block-shape[data-color="cv-color-yellow"] .cv-shape-path { stroke: rgba(234,179,8,0.7); fill: rgba(234,179,8,0.1); }
.cv-block-shape[data-color="cv-color-green"]  .cv-shape-path { stroke: rgba(34,197,94,0.7); fill: rgba(34,197,94,0.1); }
.cv-block-shape[data-color="cv-color-red"]    .cv-shape-path { stroke: rgba(239,68,68,0.7); fill: rgba(239,68,68,0.1); }
.cv-block-shape[data-color="cv-color-blue"]   .cv-shape-path { stroke: rgba(59,130,246,0.7); fill: rgba(59,130,246,0.1); }
.cv-block-shape[data-color="cv-color-purple"] .cv-shape-path { stroke: rgba(168,85,247,0.7); fill: rgba(168,85,247,0.1); }
.cv-block-shape[data-color="cv-color-orange"] .cv-shape-path { stroke: rgba(249,115,22,0.7); fill: rgba(249,115,22,0.1); }
.cv-block-shape[data-color="cv-color-dark"]   .cv-shape-path { stroke: rgba(100,116,139,0.7); fill: rgba(30,30,45,0.3); }
.cv-shape-label {
  position: relative; z-index: 1;
  font-size: 13px; color: var(--text-main);
  text-align: center; outline: none;
  padding: 4px 8px; max-width: 80%;
  word-break: break-word;
  max-height: 100%; overflow: hidden; text-overflow: ellipsis;
}
.cv-shape-label:empty::before { content: ''; }
.cv-shape-label:focus { background: rgba(var(--primary-rgb), 0.08); border-radius: 4px; }
body.light-mode .cv-block-shape { background: transparent !important; border: none !important; box-shadow: none !important; }
body.light-mode .cv-block-shape:hover { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2) !important; }
body.light-mode .cv-shape-path { fill: rgba(var(--primary-rgb), 0.06); stroke: rgba(var(--primary-rgb), 0.5); stroke-width: 1.5; }
body.light-mode .cv-block-shape:hover .cv-shape-path { fill: rgba(var(--primary-rgb), 0.12); }
.cv-shape-picker {
  z-index: 10010;
  background: rgba(10, 12, 20, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px; padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: gn-popup-in 0.12s ease-out;
}
body.light-mode .cv-shape-picker {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.cv-shape-picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.cv-shape-picker-btn {
  width: 44px; height: 44px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.06);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; transition: all 0.15s;
}
.cv-shape-picker-btn:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.4);
}
.cv-shape-picker-btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}
.cv-shape-picker-btn.active {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: var(--primary);
}
.cv-shape-picker-icon { width: 28px; height: 28px; }
.cv-shape-picker-icon .cv-shape-path {
  fill: rgba(255,255,255,0.15); stroke: rgba(255,255,255,0.7); stroke-width: 2.5;
}
.cv-shape-picker-btn:hover .cv-shape-path {
  fill: rgba(var(--primary-rgb), 0.2); stroke: var(--primary-light);
}
.cv-shape-picker-btn.active .cv-shape-path {
  fill: rgba(var(--primary-rgb), 0.25); stroke: var(--primary);
}
body.light-mode .cv-shape-picker-btn { background: rgba(0,0,0,0.04); }
body.light-mode .cv-shape-picker-btn:hover { background: rgba(var(--primary-rgb), 0.1); }
body.light-mode .cv-shape-picker-icon .cv-shape-path { fill: rgba(0,0,0,0.06); stroke: rgba(0,0,0,0.55); }
body.light-mode .cv-shape-picker-btn:hover .cv-shape-path { fill: rgba(var(--primary-rgb), 0.1); stroke: var(--primary); }
.cv-present-bar {
  display: none; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200; background: rgba(10,12,20,0.92); backdrop-filter: blur(12px);
  border-radius: var(--radius-md); padding: 8px 16px; gap: 12px; align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);
}
.cv-present-bar.active { display: flex; }
.cv-present-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; border-radius: 8px; padding: 6px 14px; cursor: pointer;
  font-size: 14px; transition: background 0.15s;
}
.cv-present-btn:hover { background: rgba(255,255,255,0.18); }
.cv-present-stop { background: rgba(255,60,60,0.2); border-color: rgba(255,60,60,0.4); }
.cv-present-stop:hover { background: rgba(255,60,60,0.35); }
.cv-present-counter {
  color: #fff; font-size: 15px; font-weight: 600;
  min-width: 60px; text-align: center; letter-spacing: 0.5px;
}
.cv-slide-badge {
  position: absolute; top: 4px; left: 4px; width: 22px; height: 22px;
  border-radius: 50%; background: linear-gradient(135deg, #7c5cfc, #00d4ff);
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; box-shadow: 0 2px 8px rgba(124,92,252,0.5); pointer-events: none;
}
.cv-block.cv-slide-highlight {
  box-shadow: 0 0 0 3px #7c5cfc, 0 0 30px rgba(124,92,252,0.4) !important; z-index: 50;
}
.cv-block-slide {
  background: none; border: none; cursor: pointer; font-size: 13px;
  padding: 0 2px; opacity: 0; transition: opacity 0.15s;
}
.cv-block:hover .cv-block-slide { opacity: 0.5; }
.cv-block-slide:hover { opacity: 0.8 !important; }
.cv-block-slide.active { opacity: 1 !important; }
.cv-presenting .cv-toolbar { opacity: 0.3; pointer-events: none; transition: opacity 0.3s; }
.cv-presenting .cv-minimap { opacity: 0.3; pointer-events: none; }
body.light-mode .cv-present-bar { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
body.light-mode .cv-present-btn { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #333; }
body.light-mode .cv-present-counter { color: #333; }
.cv-present-timer {
  color: rgba(255,255,255,0.7);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.5px; min-width: 44px;
  text-align: center; font-variant-numeric: tabular-nums;
}
body.light-mode .cv-present-timer { color: rgba(0,0,0,0.6); }
.cv-laser-dot {
  position: absolute; width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff2020 30%, rgba(255,32,32,0.4) 70%, transparent 100%);
  box-shadow: 0 0 12px 4px rgba(255,32,32,0.7);
  pointer-events: none; transform: translate(-50%, -50%);
  z-index: 300; opacity: 0; transition: opacity 0.1s;
}
.cv-laser-cursor, .cv-laser-cursor * { cursor: crosshair !important; }
.cv-speaker-notes {
  position: absolute; bottom: 80px; right: 20px; width: 280px;
  background: rgba(10,12,20,0.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 12px 14px; z-index: 190; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.cv-sn-header {
  font-size: var(--fs-sm); font-weight: 600; color: var(--primary);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.cv-sn-text {
  font-size: 0.85rem; color: rgba(255,255,255,0.8);
  line-height: 1.5; white-space: pre-wrap; max-height: 180px; overflow-y: auto;
}
body.light-mode .cv-speaker-notes { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); }
body.light-mode .cv-sn-text { color: rgba(0,0,0,0.75); }
.cv-sn-text::-webkit-scrollbar { width: 4px; }
.cv-sn-text::-webkit-scrollbar-track { background: transparent; }
.cv-sn-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
body.light-mode .cv-sn-text::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
.cv-present-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.15); margin: 0 2px; flex-shrink: 0; }
body.light-mode .cv-present-divider { background: rgba(0,0,0,0.12); }
.cv-slide-fade {
  position: absolute; inset: 0;
  background: var(--bg-solid, #0d0f1a);
  z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.cv-slide-fade.active { opacity: 1; }
.cv-tab-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 8px 0; flex-shrink: 0;
  background: rgba(10, 10, 30, 0.92);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
  overflow-x: auto; scrollbar-width: none; min-height: 32px;
}
.cv-tab-bar::-webkit-scrollbar { display: none; }
.cv-tab {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px 6px 0 0;
  background: rgba(255,255,255,0.05); cursor: pointer;
  font-size: 12px; color: rgba(255,255,255,0.55);
  user-select: none; white-space: nowrap;
  max-width: 150px; min-width: 64px; flex-shrink: 0;
  border: 1px solid transparent; border-bottom: none;
  transition: background 0.15s, color 0.15s;
}
.cv-tab.active {
  background: rgba(255,255,255,0.12); color: #fff;
  border-color: rgba(var(--primary-rgb), 0.2);
}
.cv-tab:hover:not(.active) {
  background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.85);
}
.cv-tab-name { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cv-tab-close {
  background: none; border: none; color: rgba(255,255,255,0.35);
  cursor: pointer; padding: 0; font-size: 15px; line-height: 1;
  width: 16px; height: 16px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--radius-xs); flex-shrink: 0;
}
.cv-tab-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.cv-tab-add {
  background: none; border: none; color: rgba(255,255,255,0.45);
  cursor: pointer; padding: 0 7px; font-size: 20px; line-height: 1;
  height: 28px; display: flex; align-items: center;
  border-radius: 4px; flex-shrink: 0; margin-left: 2px;
}
.cv-tab-add:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cv-tab-rename-input {
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-xs); color: #fff; font-size: 12px;
  padding: 1px 4px; width: 90px; outline: none; flex: 1;
}
body.light-mode #canvas-view .cv-tab-bar {
  background: rgba(230, 230, 245, 0.97);
  border-bottom-color: rgba(0,0,0,0.1);
}
body.light-mode #canvas-view .cv-tab {
  background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.5);
}
body.light-mode #canvas-view .cv-tab.active {
  background: rgba(0,0,0,0.09); color: #111;
  border-color: rgba(0,0,0,0.12);
}
body.light-mode #canvas-view .cv-tab:hover:not(.active) {
  background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.8);
}
body.light-mode #canvas-view .cv-tab-add,
body.light-mode #canvas-view .cv-tab-close { color: rgba(0,0,0,0.4); }
body.light-mode #canvas-view .cv-tab-add:hover,
body.light-mode #canvas-view .cv-tab-close:hover {
  background: rgba(0,0,0,0.08); color: #000;
}
body.light-mode #canvas-view .cv-tab-rename-input {
  background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.3); color: #111;
}
.cv-focus-breadcrumb {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 10px;
  background: rgba(10,12,20,0.92); backdrop-filter: blur(12px);
  border-radius: 10px; padding: 6px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4); border: 1px solid rgba(124,92,252,0.25);
}
.cv-focus-back {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer;
  font-size: 13px; transition: background 0.15s;
}
.cv-focus-back:hover { background: rgba(255,255,255,0.18); }
.cv-focus-label {
  color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500;
  white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis;
}
body.light-mode .cv-focus-breadcrumb {
  background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
body.light-mode .cv-focus-back {
  background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #333;
}
body.light-mode .cv-focus-label { color: #333; }
.cv-context-menu {
  position: fixed; z-index: 9999;
  background: rgba(10,12,20,0.95); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 4px; min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: cvCtxIn 0.12s ease-out;
}
@keyframes cvCtxIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.cv-context-item {
  display: block; width: 100%; background: none; border: none;
  color: rgba(255,255,255,0.85); font-size: 13px; padding: 7px 12px;
  text-align: left; cursor: pointer; border-radius: 6px;
  transition: background 0.12s;
}
.cv-context-item:hover { background: rgba(124,92,252,0.2); color: #fff; }
body.light-mode .cv-context-menu {
  background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
body.light-mode .cv-context-item { color: #333; }
body.light-mode .cv-context-item:hover { background: rgba(124,92,252,0.1); color: #111; }
.cv-sticker-badge {
  position: absolute; top: -8px; left: -8px;
  font-size: 18px; line-height: 1; z-index: 15;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
  pointer-events: none;
}
.cv-priority-badge {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; line-height: 1; z-index: 15;
  background: rgba(20,20,40,0.85); padding: 2px 6px; border-radius: 8px;
  pointer-events: none; white-space: nowrap;
  border: 1px solid rgba(234,179,8,0.3);
}
body.light-mode .cv-priority-badge { background: rgba(255,255,255,0.9); }
.cv-drop-zone {
  box-shadow: 0 0 0 3px rgba(0,200,120,0.6), 0 0 20px rgba(0,200,120,0.2) !important;
  transition: box-shadow 0.15s;
}
.cv-outline-panel {
  position: absolute; top: 36px; left: 0; bottom: 0; width: 260px;
  background: rgba(10,12,20,0.95); backdrop-filter: blur(16px);
  border-right: 1px solid rgba(124,92,252,0.2);
  z-index: 150; display: none; flex-direction: column; overflow: hidden;
}
.cv-outline-panel.active { display: flex; }
.cv-outline-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
}
.cv-outline-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  cursor: pointer; font-size: 16px; padding: 0; line-height: 1;
}
.cv-outline-close:hover { color: #fff; }
.cv-outline-tree {
  flex: 1; overflow-y: auto; padding: 4px 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.cv-outline-row {
  padding: 5px 8px; font-size: 12px; color: rgba(255,255,255,0.7);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 4px; margin: 1px 4px; transition: background 0.1s;
}
.cv-outline-row:hover { background: rgba(124,92,252,0.15); color: #fff; }
.cv-block.cv-outline-highlight {
  box-shadow: 0 0 0 2px rgba(59,130,246,0.7), 0 0 16px rgba(59,130,246,0.3) !important;
}
body.light-mode .cv-outline-panel {
  background: rgba(245,245,250,0.97); border-right-color: rgba(0,0,0,0.1);
}
body.light-mode .cv-outline-header { color: #333; border-bottom-color: rgba(0,0,0,0.08); }
body.light-mode .cv-outline-close { color: rgba(0,0,0,0.4); }
body.light-mode .cv-outline-close:hover { color: #000; }
body.light-mode .cv-outline-row { color: rgba(0,0,0,0.65); }
body.light-mode .cv-outline-row:hover { background: rgba(124,92,252,0.1); color: #111; }
.cv-sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 4px;
}
.cv-emoji-btn {
  background: none;
  border: none;
  font-size: 20px;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}
.cv-emoji-btn:hover {
  background: rgba(124, 92, 252, 0.2);
}
.cv-priority-row {
  display: flex;
  gap: 4px;
  padding: 8px;
}
.cv-outline-empty {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  padding: 8px;
}
.cv-ai-map-box {
  background: rgba(15,18,30,0.97);
  border: 1px solid rgba(124,92,252,0.3);
  border-radius: var(--radius-md);
  padding: 20px;
  width: 400px;
  max-width: 90vw;
  backdrop-filter: blur(16px);
}
.cv-ai-map-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}
.cv-ai-map-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}
.cv-ai-map-input {
  width: 100%;
  height: 80px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  padding: 10px;
  font-size: 14px;
  resize: none;
  outline: none;
  box-sizing: border-box;
}
.cv-ai-map-cancel {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 8px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 13px;
}
.cv-ai-map-go {
  background: rgba(124,92,252,0.3);
  border: 1px solid rgba(124,92,252,0.5);
  color: #fff;
  border-radius: 8px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
body.light-mode .cv-ai-map-box {
  background: rgba(255,255,255,0.97);
  border-color: rgba(124,92,252,0.2);
}
body.light-mode .cv-ai-map-title { color: #1e293b; }
body.light-mode .cv-ai-map-desc { color: rgba(0,0,0,0.5); }
body.light-mode .cv-ai-map-input { background: #f5f7fa; border-color: rgba(0,0,0,0.12); color: #1e293b; }
body.light-mode .cv-outline-empty { color: rgba(0,0,0,0.35); }

/* ── Graph (graph.js) ─────────────────────────────────────── */

.g-temporal-divider {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.g-temporal-title {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 6px;
}
.g-temporal-label {
  font-size: var(--fs-sm);
  opacity: 0.6;
  text-align: center;
  margin-bottom: 8px;
}

/* ── 3D Graph (graph3d.js) ────────────────────────────────── */

.g3d-label {
  position: absolute;
  font-size: 10px;
  color: rgba(255,255,255,0.8);
  font-family: Outfit, sans-serif;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  transform: translate(-50%,-100%);
}
body.light-mode .g3d-label {
  color: rgba(0,0,0,0.72);
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* ── Jam / Yandex Music (jam-ui.js) ──────────────────────── */

.jm-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.jm-form-label {
  color: var(--text-dim);
  font-size: var(--fs-base);
  min-width: 60px;
}
.jm-empty-text {
  color: var(--text-dim);
  font-size: var(--fs-base);
  padding: 8px;
}
.jm-mini-drag {
  display: flex;
  align-items: center;
  cursor: grab;
  user-select: none;
  padding-right: 4px;
}
.jm-mini-drag-icon {
  font-size: 1.1rem;
  opacity: 0.7;
}
.jm-mini-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}
.jm-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 10px;
  position: relative;
  z-index: 20;
  cursor: grab;
  user-select: none;
  -webkit-app-region: no-drag;
}
.jm-collapse-btn {
  font-size: 1.2rem;
  padding: 6px 14px;
  background: rgba(var(--primary-rgb, 99,102,241), 0.15);
  border: none;
  color: var(--text-main, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  z-index: 30;
  pointer-events: all;
  -webkit-app-region: no-drag;
}
.jm-iframe-slot {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 120px;
}
.jm-bottom-section-inner {
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 40%;
  position: relative;
  z-index: 5;
}
.jm-preset-label-row {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 8px 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jm-add-preset-btn {
  background: rgba(var(--primary-rgb, 99,102,241), 0.15);
  border: none;
  color: var(--text-main, #e2e8f0);
  border-radius: 4px;
  padding: 1px 7px;
  cursor: pointer;
  font-size: var(--fs-base);
}
.jm-preset-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.jm-preset-del {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
  opacity: 0.5;
}
.jm-login-btn {
  margin-top: 8px;
  background: rgba(255,204,0,0.15);
  border-color: rgba(255,204,0,0.3);
  color: #fcd34d;
  font-weight: 600;
}
.jm-login-btn--logged { opacity: 0.5; }
.jm-browse-btn {
  margin-top: 4px;
  opacity: 0.6;
  font-style: italic;
}
.jm-input-label {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 10px 0 4px;
}
.jm-preset-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jm-preset-dialog-box {
  background: var(--card-bg-solid, #1e293b);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 20px;
  width: 320px;
}

/* ── Onboarding (onboarding.js) ──────────────────────────── */

      .ob-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
      .ob-tooltip { position: absolute; background: #1e1e2e; border: 1px solid var(--primary); border-radius: 10px; padding: 14px 18px; max-width: 280px; color: #e0e0e0; font-size: 0.85rem; box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 10002; }
      .ob-footer { display: flex; justify-content: space-between; align-items: center; }
      .ob-counter { color: #888; font-size: var(--fs-sm); }
      .ob-skip-btn { background: none; border: none; color: #aaa; cursor: pointer; margin-right: 8px; font-size: var(--fs-base); padding: 4px 8px; }
      .ob-next-btn { background: var(--primary); color: white; border: none; border-radius: 6px; padding: 5px 14px; cursor: pointer; font-size: var(--fs-base); }

/* ── Diagnostics (diagnostics.js) ────────────────────────── */

      .diag-empty { text-align: center; padding: 40px; color: var(--text-muted, #64748b); }
      .diag-total { margin-bottom: 6px; font-weight: 600; }
      .diag-ls-list { max-height: 150px; overflow-y: auto; font-size: 11px; }
      .diag-ls-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
      .diag-perf-label { font-weight: 600; margin-bottom: 2px; }
      .diag-perf-stats { font-size: 11px; color: var(--text-muted); }

/* ── UI Extras (ui-extras.js) ────────────────────────────── */

      .spotlight-overlay {
        position: fixed;
        inset: 0;
        z-index: 9995;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding-top: 18vh;
        -webkit-app-region: no-drag;
      }
      .spotlight-overlay.active {
        display: flex;
        animation: gn-overlay-in 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .spotlight-overlay.active .spotlight-box {
        animation: gn-drop-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
      }
      .spotlight-box {
        width: 560px;
        max-width: 90vw;
        background: rgba(15, 23, 42, 0.95);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
      }
      .spotlight-input-wrap {
        display: flex;
        align-items: center;
        padding: 14px 18px;
        gap: 10px;
        border-bottom: 1px solid var(--glass-border);
      }
      .spotlight-input-wrap .search-icon {
        color: var(--primary);
        font-size: 1.1rem;
      }
      .spotlight-input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        color: var(--text-main);
        font-size: 1rem;
        font-family: 'Outfit', sans-serif;
      }
      .spotlight-input::placeholder {
        color: var(--text-dim);
      }
      .spotlight-hint {
        font-size: 0.65rem;
        color: var(--text-dim);
        background: rgba(255, 255, 255, 0.06);
        padding: 2px 8px;
        border-radius: 6px;
        letter-spacing: 0.05em;
      }
      .spotlight-results {
        max-height: 340px;
        overflow-y: auto;
      }
      .spotlight-item {
        padding: 10px 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: background 0.15s;
        border-left: 3px solid transparent;
      }
      .spotlight-item:hover,
      .spotlight-item.selected {
        background: rgba(var(--primary-rgb), 0.12);
        border-left-color: var(--primary);
      }
      .spotlight-item .si-icon {
        font-size: var(--fs-md);
      }
      .spotlight-item .si-title {
        flex: 1;
        font-size: var(--fs-md);
        color: var(--text-main);
      }
      .spotlight-item .si-preview {
        font-size: var(--fs-sm);
        color: var(--text-dim);
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .spotlight-item .si-tags {
        display: flex;
        gap: 4px;
      }
      .spotlight-item .si-tag {
        font-size: 0.6rem;
        background: rgba(var(--primary-rgb), 0.2);
        color: var(--primary);
        padding: 1px 6px;
        border-radius: 8px;
      }
      .spotlight-empty {
        padding: 24px 18px;
        text-align: center;
        color: var(--text-dim);
        font-size: 0.85rem;
      }
      .ambient-btn {
        padding: 6px 10px;
        border: 1px solid var(--glass-border);
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        cursor: pointer;
        font-size: 1.1rem;
        transition: all 0.2s;
      }
      .ambient-btn:hover {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary);
        transform: scale(1.1);
      }
      .ambient-btn.active {
        background: rgba(var(--primary-rgb), 0.25);
        border-color: var(--primary);
        box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.3);
      }
      .main-view .editor-col {
        flex: 1;
        min-width: 0;
      }
      .split-panel {
        flex: 1;
        min-width: 0;
        border-left: 1px solid var(--glass-border);
        display: flex;
        flex-direction: column;
        padding: 16px;
      }
      .split-header {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
      }
      .split-search-input {
        width: 100%;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        color: var(--text-main);
        padding: 6px 10px;
        border-radius: 8px;
        font-family: 'Outfit', sans-serif;
        font-size: var(--fs-base);
        outline: none;
        box-sizing: border-box;
      }
      .split-search-input:focus {
        border-color: var(--primary);
      }
      .split-search-results {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: var(--card-bg);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 9999;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      }
      .split-result-item {
        padding: 7px 12px;
        font-size: var(--fs-base);
        color: var(--text-main);
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .split-result-item:hover {
        background: rgba(var(--primary-rgb), 0.12);
      }
      .split-note-title {
        font-size: var(--fs-base);
        color: var(--text-dim);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
        flex-shrink: 1;
      }
      .split-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .split-editor {
        flex: 1;
        overflow-y: auto;
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 12px;
        outline: none;
        font-size: var(--fs-md);
        color: var(--text-main);
        min-height: 0;
      }
      .split-editor:empty::before {
        content: attr(data-placeholder);
        color: var(--text-dim);
        pointer-events: none;
      }
      .tab-bar {
        display: flex;
        gap: 2px;
        padding: 4px 12px 0;
        overflow-x: auto;
        border-bottom: 1px solid var(--glass-border);
        min-height: 32px;
        flex-shrink: 0;
      }
      .tab-bar:empty {
        display: none;
      }
      .tab-bar::-webkit-scrollbar {
        height: 2px;
      }
      .tab-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        font-size: var(--fs-sm);
        color: var(--text-dim);
        white-space: nowrap;
        transition: all 0.15s;
        max-width: 160px;
      }
      .tab-item:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-main);
      }
      .tab-item.active {
        background: rgba(var(--primary-rgb), 0.12);
        border-color: var(--glass-border);
        color: var(--text-main);
        border-bottom: 2px solid var(--primary);
      }
      .tab-item .tab-title {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tab-item .tab-close {
        font-size: 0.6rem;
        opacity: 0;
        flex-shrink: 0;
        padding: 2px 4px;
        border-radius: 4px;
        transition: all 0.15s;
      }
      .tab-item:hover .tab-close {
        opacity: 0.5;
      }
      .tab-item .tab-close:hover {
        opacity: 1;
        background: rgba(255, 50, 50, 0.3);
      }
      .tab-item .tab-pin {
        font-size: 0.6rem;
        opacity: 0;
        cursor: pointer;
        transition: all 0.15s;
        flex-shrink: 0;
      }
      .tab-item:hover .tab-pin { opacity: 0.4; }
      .tab-item .tab-pin:hover { opacity: 1; transform: scale(1.2); }
      .tab-item .tab-pin.active { opacity: 1; }
      .tab-item.tab-dragging { opacity: 0.35; cursor: grabbing; }
      .tab-item.tab-drop-left { box-shadow: -3px 0 0 0 var(--primary); background: rgba(var(--primary-rgb),0.08); }
      .tab-item.tab-drop-right { box-shadow: 3px 0 0 0 var(--primary); background: rgba(var(--primary-rgb),0.08); }
      .tab-bar { user-select: none; }
      .tab-item.tab-pinned {
        border-top: 2px solid var(--primary) !important;
        padding: 5px 8px;
        gap: 4px;
        max-width: 68px;
        min-width: 48px;
      }
      .tab-item.tab-pinned .tab-title {
        display: none;
      }
      .tab-item.tab-pinned .tab-pin {
        opacity: 1;
        font-size: 0.65rem;
      }
      .tab-item.tab-pinned .tab-close {
        opacity: 0.5;
        font-size: 0.55rem;
      }
      .tab-item.tab-pinned:hover .tab-close {
        opacity: 1;
      }
      .main-view {
        flex-direction: column;
      }
      .help-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 950;
        display: none;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(8px);
        -webkit-app-region: no-drag;
      }
      .help-overlay.active {
        display: flex;
        animation: gn-overlay-in 1.2s both;
      }
      .help-modal {
        background: var(--card-bg);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        width: min(700px, 90vw);
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(20px);
      }
      .help-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--glass-border);
      }
      .help-header h2 {
        margin: 0;
        font-size: 1.1rem;
      }
      #help-view .help-header {
        position: relative;
        justify-content: center;
      }
      #help-view .help-header h2 {
        text-align: center;
      }
      #help-view .help-header > button {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
      }
      .help-content {
        padding: 20px;
        overflow-y: auto;
        font-size: var(--fs-base);
        line-height: 1.6;
      }
      #help-view .help-content {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--primary-rgb), 0.4) rgba(255, 255, 255, 0.05);
      }
      #help-view .help-content::-webkit-scrollbar {
        width: 10px;
      }
      #help-view .help-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
      }
      #help-view .help-content::-webkit-scrollbar-thumb {
        background: rgba(var(--primary-rgb), 0.4);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: padding-box;
      }
      #help-view .help-content::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--primary-rgb), 0.55);
        background-clip: padding-box;
      }
      .help-content h3 {
        color: var(--primary);
        margin: 18px 0 8px;
        font-size: var(--fs-md);
      }
      .help-content h3:first-child {
        margin-top: 0;
      }
      .help-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 8px 0 16px;
      }
      .help-content th {
        background: rgba(var(--primary-rgb), 0.12);
        color: var(--primary);
        padding: 6px 10px;
        text-align: left;
        font-size: var(--fs-base);
        border: 1px solid var(--glass-border);
      }
      .help-content td {
        padding: 6px 10px;
        border: 1px solid var(--glass-border);
      }
      .help-content kbd {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--glass-border);
        border-radius: 4px;
        padding: 2px 6px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
      }
      .help-content ul {
        padding-left: 18px;
      }
      body.light-mode #help-view .help-content {
        scrollbar-color: rgba(var(--primary-rgb), 0.45) rgba(15, 23, 42, 0.08);
      }
      body.light-mode #help-view .help-content::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.08);
      }
      body.light-mode #help-view .help-content::-webkit-scrollbar-thumb {
        background: rgba(var(--primary-rgb), 0.45);
        background-clip: padding-box;
      }
      body.light-mode #help-view .help-content::-webkit-scrollbar-thumb:hover {
        background: rgba(var(--primary-rgb), 0.6);
        background-clip: padding-box;
      }
      .help-content li {
        margin: 4px 0;
      }
      .help-content code {
        background: rgba(var(--primary-rgb), 0.1);
        padding: 1px 5px;
        border-radius: var(--radius-xs);
        font-size: var(--fs-base);
      }
body.light-mode .ambient-btn,
body.light-mode .kb-col-add-btn,
body.light-mode .msg-edit-cancel,
body.light-mode .sidebar-bottom-btn,
body.light-mode .dr-close-btn,
body.light-mode .kb-sp-btn,
body.light-mode .kb-swimlane-btn,
body.light-mode .sort-picker-btn,
body.light-mode .search-hint-btn,
body.light-mode .save-search-btn,
body.light-mode .pin-btn,
body.light-mode .undo-toast-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .ambient-btn:hover,
body.light-mode .kb-col-add-btn:hover,
body.light-mode .msg-edit-cancel:hover,
body.light-mode .sidebar-bottom-btn:hover,
body.light-mode .dr-close-btn:hover,
body.light-mode .kb-sp-btn:hover,
body.light-mode .kb-swimlane-btn:hover,
body.light-mode .sort-picker-btn:hover,
body.light-mode .search-hint-btn:hover,
body.light-mode .save-search-btn:hover,
body.light-mode .pin-btn:hover,
body.light-mode .undo-toast-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.18);
}
      #zen-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 900;
        display: none;
        -webkit-app-region: no-drag;
      }
      .zen-pomo-overlay {
        position: absolute; bottom: 52px; right: 2.5rem; z-index: 9999;
        background: rgba(15,23,42,0.95);
        border: 1px solid rgba(var(--primary-rgb),0.3);
        border-radius: 16px; padding: 16px 20px;
        backdrop-filter: blur(20px);
        display: flex; flex-direction: column; align-items: stretch;
        width: 220px;
        animation: gn-popup-in 0.3s ease-out;
      }
      body.light-mode .zen-pomo-overlay {
        background: rgba(255,255,255,0.95) !important;
        border-color: rgba(var(--primary-rgb),0.2) !important;
      }
.zen-close-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 14px 140px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-app-region: drag;
  pointer-events: all;
}
.zen-close-row > * { -webkit-app-region: no-drag; }
.zen-close-row--visible { display: flex; }
.zen-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
}
.zen-close-btn-extra {
  flex-shrink: 0;
  -webkit-app-region: no-drag;
  pointer-events: all;
  cursor: pointer;
}
body.light-mode .zen-close-row {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.cmd-palette-header {
  padding: 4px 14px 2px;
  opacity: 0.7;
  color: var(--primary);
}
.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmd-palette-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
}
.cmd-palette-label {
  flex: 1;
  font-size: var(--fs-md);
}
.cmd-palette-shortcut {
  font-size: var(--fs-sm);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  padding: 2px 6px;
  border-radius: 5px;
}
.rm-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--primary);
  z-index: 9998;
  transition: width 0.1s linear;
  pointer-events: none;
}
.rm-exit-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 7px 16px;
  border-radius: 99px;
  cursor: pointer;
  font-size: var(--fs-base);
  backdrop-filter: blur(8px);
  transition: 0.15s;
}
.rm-exit-btn:hover {
  background: rgba(0,0,0,0.8);
  color: #fff;
}
body.light-mode .rm-exit-btn {
  background: rgba(0,0,0,0.35);
  border-color: rgba(0,0,0,0.15);
}
.wc-status-text {
  font-size: 0.85rem;
  color: var(--text-dim);
  min-height: 20px;
  margin-bottom: 8px;
}
.api-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-main);
}
.api-toggle-cb {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}
.api-desc-text {
  font-size: var(--fs-base);
  color: var(--text-dim);
  margin-bottom: 12px;
  line-height: 1.5;
}
.api-endpoints-block {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.8;
}
.api-code-badge {
  background: var(--card-bg);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--primary-light);
  font-size: var(--fs-base);
}

/* ── Hemingway Writing Assistant ──────────────────────────── */

.hw-panel {
  background: var(--card-bg);
  border-bottom: 1px solid var(--glass-border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--fs-base);
  animation: hw-slide-down 0.2s ease;
}
.hw-panel-title { font-weight: 600; color: var(--text-main); }
.hw-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 24px; border-radius: 12px;
  font-weight: 700; font-size: var(--fs-base); padding: 0 8px;
}
.hw-score-good { background: #22c55e22; color: var(--color-success); }
.hw-score-ok   { background: #eab30822; color: #eab308; }
.hw-score-bad  { background: #ef444422; color: var(--color-danger); }
.hw-stats { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hw-stat { display: flex; align-items: center; gap: 4px; color: var(--text-dim); }
.hw-stat-count { font-weight: 600; min-width: 16px; }
.hw-legend { display: flex; gap: 10px; flex-wrap: wrap; }
.hw-legend-item { display: flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: var(--fs-base); }
.hw-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hw-dot-long   { background: #fbbf24; }
.hw-dot-vlong  { background: #ef4444; }
.hw-dot-complex{ background: #a855f7; }
.hw-dot-adverb { background: #3b82f6; }
.hw-dot-repeat { background: #22c55e; }
.hw-panel-close {
  margin-left: auto; background: none; border: none;
  color: var(--text-dim); cursor: pointer; font-size: 1rem;
  padding: 2px 6px; border-radius: 4px;
}
.hw-panel-close:hover { background: rgba(var(--primary-rgb), 0.1); color: var(--text-main); }
.hw-block-long {
  background: rgba(251, 191, 36, 0.12) !important;
  border-left: 3px solid #fbbf24;
  padding-left: 8px !important;
  transition: background 0.2s;
}
.hw-block-vlong {
  background: rgba(239, 68, 68, 0.12) !important;
  border-left: 3px solid #ef4444;
  padding-left: 8px !important;
  transition: background 0.2s;
}
.hw-complex { background: rgba(168, 85, 247, 0.2); border-radius: 2px; padding: 0 1px; cursor: pointer; }
.hw-adverb  { background: rgba(59, 130, 246, 0.2); border-radius: 2px; padding: 0 1px; cursor: pointer; }
.hw-repeat  { background: rgba(34, 197, 94, 0.2);  border-radius: 2px; padding: 0 1px; cursor: pointer; }
.hw-complex:hover, .hw-adverb:hover, .hw-repeat:hover { filter: brightness(1.15); }
.hw-block-long:hover, .hw-block-vlong:hover { filter: brightness(1.05); cursor: pointer; }
.hw-tooltip {
  position: fixed; z-index: 10000;
  background: var(--card-bg); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 12px 16px;
  max-width: 400px; min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: gn-fade-in 0.15s ease;
}
.hw-tooltip-label { font-size: 0.75rem; color: var(--text-dim); opacity: 0.7; margin-bottom: 4px; }
.hw-tooltip-text { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 8px; line-height: 1.5; font-style: italic; }
.hw-tooltip-suggestion {
  font-size: 0.85rem; color: var(--text-main); line-height: 1.5;
  margin-bottom: 8px; padding: 8px;
  background: rgba(var(--primary-rgb), 0.08); border-radius: 6px;
}
.hw-tooltip-actions { display: flex; gap: 8px; }
.hw-tooltip-btn {
  padding: 4px 12px; border-radius: 6px; border: none;
  cursor: pointer; font-size: var(--fs-base); font-weight: 500;
}
.hw-tooltip-btn-primary { background: var(--primary); color: white; }
.hw-tooltip-btn-primary:hover { filter: brightness(1.1); }
.hw-tooltip-btn-ai { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); }
.hw-tooltip-btn-ai:hover { background: rgba(var(--primary-rgb), 0.25); }
.hw-tooltip-btn-cancel { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.hw-tooltip-btn-cancel:hover { background: rgba(255,255,255,0.15); }
.hw-tooltip-loading { color: var(--primary); font-size: var(--fs-base); padding: 8px 0; }
body.light-mode .hw-tooltip { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.light-mode .hw-tooltip-btn-cancel { background: rgba(0,0,0,0.06); }
body.light-mode .hw-tooltip-btn-cancel:hover { background: rgba(0,0,0,0.1); }

/* ── Fact-Check Panel ────────────────────────────────────── */

.fc-panel {
  background: rgba(15, 18, 30, 0.95);
  border: 1px solid rgba(124, 92, 252, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  backdrop-filter: blur(12px);
}
.fc-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fc-panel-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-main);
}
.fc-status {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.fc-panel-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.fc-btn-cite {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(124, 92, 252, 0.3);
  background: rgba(124, 92, 252, 0.12);
  color: var(--primary-light);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.fc-btn-cite:hover { background: rgba(124, 92, 252, 0.25); }
.fc-btn-recheck, .fc-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  transition: color 0.2s;
}
.fc-btn-recheck:hover, .fc-panel-close:hover { color: var(--text-main); }
.fc-claims {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.fc-claim {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid #888;
  transition: border-color 0.3s;
}
.fc-claim.fc-verified { border-left-color: #4caf50; }
.fc-claim.fc-unverified { border-left-color: #ff9800; }
.fc-claim.fc-false { border-left-color: #f44336; }
.fc-claim-text {
  font-size: var(--fs-base);
  color: var(--text-main);
  margin-bottom: 6px;
  line-height: 1.4;
}
.fc-claim-verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.fc-verdict-ok { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.fc-verdict-warn { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.fc-verdict-bad { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.fc-claim-sources {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.fc-source {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  display: flex;
  gap: 4px;
  align-items: baseline;
}
.fc-source a {
  color: var(--primary-light);
  text-decoration: none;
  word-break: break-all;
}
.fc-source a:hover { text-decoration: underline; }
.fc-source-num {
  color: var(--primary-light);
  font-weight: 700;
  min-width: 16px;
}
.fc-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
  font-size: var(--fs-base);
}
.fc-loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(124, 92, 252, 0.2);
  border-top: 2px solid var(--primary-light);
  border-radius: 50%;
  animation: fc-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
.fc-footnote {
  color: var(--primary-light);
  font-size: 0.7em;
  vertical-align: super;
  font-weight: 700;
  cursor: help;
}
body.light-mode .fc-panel { background: rgba(248, 248, 255, 0.95); border-color: rgba(124, 92, 252, 0.15); }
body.light-mode .fc-claim { background: rgba(0, 0, 0, 0.02); }
body.light-mode .fc-btn-cite { background: rgba(124, 92, 252, 0.08); }

/* ── Markdown Linter Panel ───────────────────────────────── */

.ml-panel {
  background: rgba(15, 18, 30, 0.95);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  backdrop-filter: blur(12px);
}
.ml-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ml-panel-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-main);
}
.ml-score {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}
.ml-score-ok { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.ml-score-bad { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.ml-score-warn { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.ml-score-info { background: rgba(33, 150, 243, 0.15); color: #2196f3; }
.ml-panel-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.ml-btn-recheck, .ml-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  transition: color 0.2s;
}
.ml-btn-recheck:hover, .ml-panel-close:hover { color: var(--text-main); }
.ml-stats {
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ml-issue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.ml-issue:hover { background: rgba(255, 255, 255, 0.04); }
.ml-issue-error { border-left: 2px solid #f44336; }
.ml-issue-warn { border-left: 2px solid #ff9800; }
.ml-issue-info { border-left: 2px solid #2196f3; }
.ml-issue-icon { font-size: var(--fs-base); flex-shrink: 0; margin-top: 1px; }
.ml-issue-body { flex: 1; min-width: 0; }
.ml-issue-msg {
  font-size: var(--fs-base);
  color: var(--text-main);
  line-height: 1.3;
}
.ml-issue-fix {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-top: 2px;
}
.ml-mark-error {
  outline: 2px solid rgba(244, 67, 54, 0.5);
  outline-offset: 1px;
  border-radius: var(--radius-xs);
  background: rgba(244, 67, 54, 0.08);
}
.ml-mark-warn {
  outline: 2px solid rgba(255, 152, 0, 0.4);
  outline-offset: 1px;
  border-radius: var(--radius-xs);
  background: rgba(255, 152, 0, 0.06);
}
.ml-mark-info {
  outline: 1px dashed rgba(33, 150, 243, 0.3);
  outline-offset: 1px;
  background: rgba(33, 150, 243, 0.04);
}
.ml-mark-flash {
  animation: ml-flash 0.6s ease 2;
}
body.light-mode .ml-panel { background: rgba(248, 248, 255, 0.95); border-color: rgba(0, 150, 200, 0.15); }
body.light-mode .ml-issue:hover { background: rgba(0, 0, 0, 0.03); }
body.light-mode .ml-mark-error { background: rgba(244, 67, 54, 0.06); }
body.light-mode .ml-mark-warn { background: rgba(255, 152, 0, 0.04); }

/* ── Autopilot Settings ──────────────────────────────────── */

.ap-settings-modal {
  background: linear-gradient(135deg, var(--bg-solid, #0f172a), var(--card-bg-solid, #1a1035));
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 460px;
  width: 92%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}
.ap-settings-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.ap-master-toggle {
  padding: 10px 14px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 10px;
  margin-bottom: 14px;
}
.ap-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-task-card {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.2s;
}
.ap-task-card:hover {
  border-color: rgba(var(--primary-rgb), 0.2);
}
.ap-task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ap-check {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.ap-task-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.ap-task-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}
.ap-task-config {
  margin-top: 6px;
  padding-left: 26px;
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
}
.ap-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: 4px;
}
body.light-mode .ap-settings-modal {
  background: linear-gradient(135deg, #f8f9fc, #f0f0ff);
  border-color: rgba(99, 102, 241, 0.2);
}
body.light-mode .ap-task-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .ap-master-toggle {
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.1);
}
body.light-mode .ap-select {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #334155;
}

/* ── Error Log Viewer ────────────────────────────────────── */

#error-log-viewer {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: none;
  align-items: center; justify-content: center;
}
.error-log-inner {
  background: var(--bg-solid);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: 90vw; max-width: 900px;
  height: 70vh;
  padding: 24px;
  display: flex; flex-direction: column;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
}
.error-log-row {
  display: grid;
  grid-template-columns: 140px 120px 1fr 100px;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  font-size: 12px;
  align-items: center;
  transition: background 0.15s;
}
.error-log-row:hover { background: rgba(255,255,255,0.04); }
.error-log-time { color: var(--text-muted, #7c8ba0); font-family: monospace; font-size: 11px; }
.error-log-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.error-log-msg { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.error-log-src { color: var(--text-muted, #7c8ba0); font-family: monospace; font-size: 11px; text-align: right; }
.error-log-stack {
  margin: 0 12px 8px 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  border-left: 3px solid rgba(239,68,68,0.4);
}
body.light-mode #error-log-viewer { background: rgba(255,255,255,0.75); }
body.light-mode .error-log-inner { background: #fff; border-color: rgba(0,0,0,0.1); }
body.light-mode .error-log-row:hover { background: rgba(0,0,0,0.03); }
body.light-mode .error-log-msg { color: #0f172a; }
body.light-mode .error-log-stack { background: rgba(0,0,0,0.04); color: #475569; }

/* ── Performance Dashboard ───────────────────────────────── */

#perf-dashboard {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: none;
  align-items: center; justify-content: center;
}
.perf-dash-inner {
  background: var(--bg-solid);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: 90vw; max-width: 800px;
  max-height: 80vh;
  padding: 24px;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
}
.perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.perf-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.perf-card-label {
  font-size: 11px;
  color: var(--text-muted, #7c8ba0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.perf-card-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dim);
}
.perf-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  margin-top: 6px;
}
body.light-mode #perf-dashboard { background: rgba(255,255,255,0.75); }
body.light-mode .perf-dash-inner { background: #fff; border-color: rgba(0,0,0,0.1); }
body.light-mode .perf-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
body.light-mode .perf-card-value { color: #0f172a; }
body.light-mode .perf-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

/* ── Log Viewer ──────────────────────────────────────────── */

.log-entry { padding: 2px 4px; border-bottom: 1px solid var(--glass-border); white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
.log-entry:hover { background: var(--hover-bg, rgba(255,255,255,0.03)); }
.log-error { color: var(--accent-red, #ef4444); }
.log-warn { color: var(--accent-yellow, #f59e0b); }
.log-time { color: var(--text-dim); margin-right: 4px; }
.log-type { color: var(--accent-blue, #3b82f6); margin-right: 4px; }
.log-level-badge { font-weight: 600; font-size: 10px; padding: 1px 4px; border-radius: var(--radius-xs); margin-right: 4px; }
.log-level-error { background: rgba(239,68,68,0.15); color: var(--accent-red, #ef4444); }
.log-level-warn { background: rgba(245,158,11,0.15); color: var(--accent-yellow, #f59e0b); }
.log-level-info { background: rgba(59,130,246,0.1); color: var(--text-dim); }
#log-viewer-modal select, #log-viewer-modal input { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--glass-border); border-radius: 6px; padding: 4px 8px; font-size: 13px; }
#log-viewer-modal select:focus, #log-viewer-modal input:focus { outline: none; border-color: var(--accent); }

/* ── Home Screen (home.js) ───────────────────────────────── */

#home-screen {
  flex: 1;
  overflow-y: auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  min-height: 0;
  animation: hs-fade-in 0.25s ease-out both; /* entrance animation */
}
.hs-inner {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hs-header {
  text-align: center;
  margin-bottom: 8px;
}
.hs-greeting {
  font-size: var(--fs-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.hs-date {
  font-size: 0.85rem;
  color: var(--text-dim);
}
.hs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hs-grid-bottom {
  grid-template-columns: repeat(2, 1fr);
}
.hs-card {
  background: var(--card-bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 140px; /* prevent collapsing on empty data */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hs-card-wide {
  width: 100%;
}
.hs-card-header {
  padding: 10px 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hs-card-body {
  flex: 1;
  padding: 8px 0;
}
.hs-card-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--glass-border);
}
.hs-note-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hs-note-item:hover {
  background: rgba(var(--primary-rgb), 0.08);
}
.hs-note-title {
  font-size: var(--fs-base);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.hs-note-time {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.hs-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
}
.hs-task-pri {
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.hs-task-text {
  font-size: var(--fs-base);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-habit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.hs-habit-item:hover {
  opacity: 1;
}
.hs-habit-done {
  opacity: 1;
}
.hs-habit-icon { font-size: var(--fs-md); }
.hs-habit-name {
  font-size: var(--fs-base);
  color: var(--text-main);
}
.hs-calendar-row {
  width: 100%;
  border-top: 1px solid var(--glass-border);
  padding-top: 12px;
}
.hs-grid-bottom {
  border-top: 1px solid var(--glass-border);
  padding-top: 12px;
}
.hs-cal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 8px 0;
}
.hs-cal-col {
  padding: 10px 14px;
  border-right: 2px solid rgba(var(--primary-rgb), 0.25);
}
.hs-cal-col:last-child {
  border-right: none;
}
.hs-cal-today {
  background: rgba(var(--primary-rgb), 0.05);
  border-radius: 0;
}
.hs-cal-today .hs-cal-label {
  color: var(--primary);
  font-weight: 600;
}
.hs-cal-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hs-cal-label::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--primary-rgb),0.5) 50%, transparent 95%);
}
.hs-cal-events {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hs-cal-event {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-base);
}
.hs-cal-time {
  color: var(--primary);
  font-size: var(--fs-sm);
  min-width: 32px;
  flex-shrink: 0;
}
.hs-cal-title {
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-cal-reminder .hs-cal-title {
  color: var(--text-dim);
}
.hs-cal-empty {
  color: var(--text-dim);
  font-size: var(--fs-base);
  opacity: 0.45;
}
.hs-stat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 14px;
}
.hs-stat-val {
  font-size: 1.5rem; /* было 1.1rem — слишком мелко */
  font-weight: 700;
  color: var(--primary);
  min-width: 56px;
  line-height: 1;
}
.hs-stat-label {
  font-size: var(--fs-base);
  color: var(--text-dim);
}
.hs-empty {
  font-size: var(--fs-base);
  color: var(--text-dim);
  padding: 14px 14px;
  opacity: 0.55;
}
.hs-loading {
  font-style: italic;
}
.hs-badge {
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  animation: hs-badge-pulse 2.5s ease-in-out infinite;
}
.hs-btn {
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: var(--fs-base);
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  width: 100%;
}
.hs-btn:hover {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border-color: var(--primary);
}
body.light-mode #home-screen {
  background: var(--bg-solid); /* fix: --bg-main → --bg-solid (= #f0f4ff в light mode) */
}
body.light-mode .hs-card {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.light-mode .hs-cal-today {
  background: rgba(var(--primary-rgb), 0.06);
}
.hs-quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hs-quick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  backdrop-filter: blur(8px);
}
.hs-quick-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
body.light-mode .hs-quick-btn:hover {
  background: rgba(0,0,0,0.05);
}

/* ── Small Modules ───────────────────────────────────────── */

.anim-preview-inner {
  background: var(--card-bg-solid, #1a1a2e);
  border-radius: 16px;
  padding: 40px 60px;
  text-align: center;
}
.anim-preview-label {
  color: var(--text-dim);
  font-size: var(--fs-md);
  margin-top: 8px;
}
.export-note-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  border-radius: 6px;
}
.obj-list-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.light-mode .anim-preview-inner { background: #fff; }
      .wg-bar { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 0; font-size: 0.71rem; color: var(--text-muted); }
      .fmt-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.08); margin: 0 2px; display: inline-block; vertical-align: middle; }
      .fmt-badge { font-size: 10px; color: var(--text-muted, #64748b); padding: 0 2px; vertical-align: middle; }

/* ── Batch Light-Mode Overrides & Misc ───────────────────── */

      .wip-badge {
        font-size: 0.65rem;
        padding: 1px 6px;
        border-radius: 10px;
        margin-left: 6px;
        cursor: pointer;
      }
      .done-total-badge {
        font-size: 0.63rem;
        color: var(--color-success);
        margin-left: 4px;
        opacity: 0.7;
      }
      #zen-overlay.active {
        display: flex;
        animation: gn-overlay-in 1.2s both;
      }
#error-log-viewer.active { display: flex; }
#perf-dashboard.active { display: flex; }
#tool-hemingway.active {
  background: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
}
@keyframes hw-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
body.light-mode .msg-ua-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
}
body.light-mode .theme-dropdown-panel {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
#canvas-view.active { display: flex; }
#canvas-view.active .cv-workspace { animation: gn-overlay-in 0.8s both; }
@keyframes cv-tip-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes fc-spin { to { transform: rotate(360deg); } }
@keyframes ml-flash {
  0%, 100% { outline-color: transparent; }
  50% { outline-color: var(--primary-light); outline-width: 3px; }
}
@keyframes hs-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hs-badge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
@media (max-width: 700px) {
  .hs-grid, .hs-grid-bottom { grid-template-columns: 1fr; }
  .hs-cal-grid { grid-template-columns: 1fr; }
  .hs-cal-col { border-right: none; border-bottom: 1px solid var(--glass-border); }
}
@media (prefers-reduced-motion: reduce) {
  #home-screen { animation: none; }
  .hs-badge { animation: none; }
}

/* ── Utility classes (inline-style refactoring v8.86) ──────── */
.flex-noshrink { flex-shrink: 0; }
.flex-spacer { flex: 1; }
.d-flex { display: flex; }
.d-flex-gap4 { display: flex; gap: 4px; }
.d-flex-gap6 { display: flex; gap: 6px; }
.d-flex-gap8 { display: flex; gap: 8px; }
.d-flex-gap10 { display: flex; gap: 10px; }
.d-flex-gap12 { display: flex; gap: 12px; }
.d-flex-center { display: flex; align-items: center; }
.d-flex-center-gap8 { display: flex; align-items: center; gap: 8px; }
.d-flex-center-gap10 { display: flex; align-items: center; gap: 10px; }
.d-flex-center-gap12 { display: flex; align-items: center; gap: 12px; }
.d-flex-wrap { display: flex; flex-wrap: wrap; }
.d-flex-col { display: flex; flex-direction: column; }

/* Theme / accent swatches */
.theme-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  margin: 0 auto 4px; border: 2px solid transparent;
}
.accent-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
}
.swatch-wrap { cursor: pointer; text-align: center; }
.swatch-label { font-size: var(--fs-xs); color: var(--text-dim); }

/* Dropdown section titles */
.dropdown-section-title {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px;
}

/* Modal utility classes */
.modal-header-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.fullscreen-overlay {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
}
.dialog-box {
  background: linear-gradient(135deg, var(--bg-solid), var(--card-bg-solid));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px; padding: 28px;
  max-width: 520px; width: 92%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}
.dialog-close-btn {
  margin-left: auto; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 1.1rem;
}
.dialog-close-btn:hover { color: var(--text-main); }
.emoji-icon-lg { font-size: 1.6rem; }
.modal-title-lg { font-size: var(--fs-xl); font-weight: 700; }
.modal-subtitle { font-size: var(--fs-sm); color: var(--primary); }

/* Form elements */
.gn-input-dark {
  background: #1a2030; border: 1px solid rgba(var(--primary-rgb), 0.3);
  color: var(--text-dim); border-radius: var(--radius-base);
  padding: 10px 14px; font-size: var(--fs-base); outline: none;
  width: 100%; box-sizing: border-box;
}
.gn-input-glass {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim); border-radius: var(--radius-base);
  padding: 10px 14px; font-size: var(--fs-base); outline: none;
  width: 100%; box-sizing: border-box;
}
.form-label {
  display: block; color: var(--text-muted);
  font-size: var(--fs-sm); margin-bottom: 6px;
}
.section-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 10px; padding-top: 10px;
}
.label-uppercase {
  font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}

/* Light mode overrides for utility classes */
body.light-mode .gn-input-dark {
  background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12);
  color: #1e293b;
}
body.light-mode .gn-input-glass {
  background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}
body.light-mode .dialog-close-btn { color: #64748b; }
body.light-mode .dialog-close-btn:hover { color: #1e293b; }
body.light-mode .section-divider { border-top-color: rgba(0, 0, 0, 0.08); }