:root {
      --bg-primary: #FCFCFB;
      --bg-secondary: #FCFCFB;
      --bg-card: #ffffff;
      --bg-page: #FCFCFB;
      --text-primary: #0f172a;
      --text-secondary: #64748b;
      --text-light: #94a3b8;
      --accent: #A8C500;
      --accent-hover: #95AD00;
      --p1: #ef4444; --p2: #f97316; --p3: #eab308; --p4: #22c55e;
      --q1: #ef4444; --q2: #A8C500; --q3: #f97316; --q4: #94a3b8;
      --border: #E8E8E0;
      --outline-guide: #94a3b8;
      --success: #22c55e;
      --sidebar-w: 260px;
      --pomodoro: #ef4444;
      --pomodoro-light: #fef2f2;
      --break: #22c55e;
      --break-light: #f0fdf4;
    }
    [data-theme="dark"] {
      --bg-page: #171717;
      --bg-primary: #262626;
      --bg-secondary: #262626;
      --bg-card: #262626;
      --text-primary: #e5e5e5;
      --text-secondary: #a3a3a3;
      --text-light: #737373;
      --border: #404040;
      --outline-guide: #555555;
    }
    [data-theme="dark"] body { background: #171717; }
    [data-theme="dark"] .input { background: #171717 !important; color: var(--text-primary); }
    [data-theme="dark"] select.input { background: #171717 !important; }
    [data-theme="dark"] .modal-content { background: #262626; }
    [data-theme="dark"] .task-row:hover { background: #404040; border-color: #525252; }
    [data-theme="dark"] .mobile-topbar { background: #262626; border-color: #404040; }
    [data-theme="dark"] .sidebar { border-right-color: #404040; }
    [data-theme="dark"] .stat-card { background: #262626; }
    [data-theme="dark"] .eisenhower-cell { background: #262626; border-color: #404040; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
    [data-theme="dark"] .badge-p1 { background: rgba(220,38,38,0.18); box-shadow: 0 0 0 1px rgba(220,38,38,0.3); }
    [data-theme="dark"] .badge-p2 { background: rgba(234,88,12,0.18); box-shadow: 0 0 0 1px rgba(234,88,12,0.3); }
    [data-theme="dark"] .badge-p3 { background: rgba(202,138,4,0.18); }
    [data-theme="dark"] .badge-p4 { background: rgba(100,116,139,0.18); }
    [data-theme="dark"] .badge-q1 { background: rgba(220,38,38,0.18); }
    [data-theme="dark"] .badge-q2 { background: rgba(168,197,0,0.18); }
    [data-theme="dark"] .badge-q3 { background: rgba(234,88,12,0.18); }
    [data-theme="dark"] .badge-q4 { background: rgba(100,116,139,0.18); }
    [data-theme="dark"] .badge-inbox { background: rgba(71,85,105,0.2); color: #94a3b8; }
    [data-theme="dark"] .badge-next { background: rgba(168,197,0,0.18); color: #A8C500; }
    [data-theme="dark"] .badge-waiting { background: rgba(202,138,4,0.18); color: #fbbf24; }
    [data-theme="dark"] .badge-someday { background: rgba(147,51,234,0.18); color: #c084fc; }
    [data-theme="dark"] .badge-project { background: rgba(5,150,105,0.18); color: #34d399; }
    [data-theme="dark"] .badge-done { background: rgba(22,163,74,0.18); color: #4ade80; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; font-optical-sizing: auto; background: var(--bg-page); color: var(--text-primary); }
    code, .mono { font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

    /* Modern dark scrollbar for note modal */
    .note-modal-scroll-area { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
    .note-modal-scroll-area::-webkit-scrollbar { width: 4px; }
    .note-modal-scroll-area::-webkit-scrollbar-track { background: transparent; }
    .note-modal-scroll-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
    .note-modal-scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
    .note-modal-content-input { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
    .note-modal-content-input::-webkit-scrollbar { width: 4px; }
    .note-modal-content-input::-webkit-scrollbar-track { background: transparent; }
    .note-modal-content-input::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
    .note-modal-content-input::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

    /* Animations */
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
    @keyframes checkPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }
    .fade-in { animation: fadeIn 0.3s ease-out; }
    .slide-in { animation: slideIn 0.3s ease-out; }
    .scale-in { animation: scaleIn 0.2s ease-out; }

    /* Section title */
    .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-secondary); margin-bottom: 16px; margin-top: 0; display: flex; align-items: center; gap: 10px; }
    .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    /* FAB */
    .fab { position: fixed; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); right: calc(28px + env(safe-area-inset-right, 0px)); z-index: 50; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: white; border: none; font-size: 26px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: all 0.2s; display: flex; align-items: center; justify-content: center; line-height: 1; }
    .fab:hover { background: var(--accent-hover); transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
    @media (min-width: 769px) { .fab { display: none; } }

    /* Sidebar */
    .sidebar { width: var(--sidebar-w); height: 100vh; background: var(--bg-primary); color: var(--text-primary); position: fixed; left: 0; top: 0; z-index: 40; transition: transform 0.3s; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid #DDDDD5; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .sidebar.collapsed { transform: translateX(-100%); }
    .sidebar-scroll { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: none; }
    .sidebar-scroll::-webkit-scrollbar { display: none; }
    .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #4A4A40; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; border-radius: 8px; margin: 2px 12px; }
    .sidebar-link:hover { background: rgba(0,0,0,0.05); color: #0f172a; }
    .sidebar-link.active { background: rgba(168,197,0,0.2); color: #6B8000; }
    .sidebar-section { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.8px; color: #aaa89f; padding: 18px 20px 5px; font-weight: 700; }
    [data-theme="dark"] .sidebar-link { color: #a3a3a3; }
    [data-theme="dark"] .sidebar-link:hover { background: rgba(255,255,255,0.07); color: #e5e5e5; }
    [data-theme="dark"] .sidebar-link.active { background: rgba(168,197,0,0.18); color: #A8C500; }
    [data-theme="dark"] .sidebar-section { color: #737373; }

    /* Dark theme — tags */
    [data-theme="dark"] .tag-pill { background: #2A2F36; color: #D0D5DD; border-color: #3A4048; }
    [data-theme="dark"] .tag-pill:hover { background: #343B44; border-color: #4A5058; }
    [data-theme="dark"] .tag-pill.active { background: #B6D400; color: #fff; border-color: #B6D400; }
    [data-theme="dark"] .tag-pill.active:hover { background: #A3C100; border-color: #A3C100; }
    [data-theme="dark"] .tag-count { background: #3A4048; color: #D0D5DD; }
    [data-theme="dark"] .tag-pill.active .tag-count { background: rgba(0,0,0,0.18); color: #fff; }
    [data-theme="dark"] .note-tag-untagged { color: #a3a3a3; border-color: #3A4048; }
    [data-theme="dark"] .tag-section-label { color: #6B7280; }

    /* Dark theme — search box */
    [data-theme="dark"] .scratchpad-bar { background: #1E2126; border-color: #2F343C; }
    [data-theme="dark"] .scratchpad-bar input { color: #D0D5DD; }
    [data-theme="dark"] .scratchpad-bar input::placeholder { color: #98A2B3; }

    /* Main content */
    .main-content { margin-left: 0; min-height: 100vh; padding: 16px 28px; transition: margin-left 0.3s; }
    .main-content.sidebar-visible { margin-left: var(--sidebar-w); }
    .desktop-topbar { position: sticky; top: 0; z-index: 30; background: var(--bg-page); margin: -16px -28px 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 28px 8px; border-bottom: 1px solid var(--border); }

    /* Mobile header */
    .mobile-topbar { display: none; position: sticky; top: 0; z-index: 30; background: white; border-bottom: 1px solid var(--border); padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); align-items: center; gap: 12px; }

    /* Cards */
    .card { background: var(--bg-card); border-radius: 14px; border: 1px solid rgba(0,0,0,0.06); padding: 20px; min-width: 0; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 8px -2px rgba(0,0,0,0.03); }
    .card-hover { transition: all 0.2s; }
    .card-hover:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }

    /* Stat card */
    .stat-card { padding: 20px 22px; border-radius: 14px; background: white; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 8px -2px rgba(0,0,0,0.04); position: relative; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; cursor: default; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
    .stat-number { font-size: 30px; font-weight: 700; line-height: 1; }
    .stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

    /* Badge */
    .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }

    /* Priority badges */
    .badge-p1 { background: #fef2f2; color: #dc2626; box-shadow: 0 0 0 1px rgba(220,38,38,0.2); font-weight: 700; }
    .badge-p2 { background: #fff7ed; color: #ea580c; box-shadow: 0 0 0 1px rgba(234,88,12,0.2); font-weight: 700; }
    .badge-p3 { background: #fefce8; color: #ca8a04; }
    .badge-p4 { background: #f0fdf4; color: #64748b; }

    /* Quadrant badges */
    .badge-q1 { background: #fef2f2; color: #dc2626; }
    .badge-q2 { background: #F4FAD6; color: #6B8000; }
    .badge-q3 { background: #fff7ed; color: #ea580c; }
    .badge-q4 { background: #FAFAF7; color: #64748b; }

    /* GTD status badges */
    .badge-inbox { background: #FAFAF7; color: #475569; }
    .badge-next { background: #F4FAD6; color: #6B8000; }
    .badge-waiting { background: #fefce8; color: #ca8a04; }
    .badge-someday { background: #faf5ff; color: #9333ea; }
    .badge-project { background: #ecfdf5; color: #059669; }
    .badge-done { background: #f0fdf4; color: #16a34a; }

    /* Button */
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
    .btn-primary { background: var(--accent); color: white; }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-secondary { background: #F0F0E8; color: #475569; }
    .btn-secondary:hover { background: #e2e8f0; }
    .btn-danger { background: #fef2f2; color: #dc2626; }
    .btn-danger:hover { background: #fee2e2; }
    .btn-success { background: #f0fdf4; color: #16a34a; }
    .btn-success:hover { background: #dcfce7; }
    .btn-sm { padding: 5px 12px; font-size: 13px; }
    /* ── Chat ── */
    /* ── Chat ── */
    .chat-layout {
      display: flex;
      height: calc(100vh - 84px);
      min-height: 480px;
      margin-top: 6px;
      overflow: hidden;
      position: relative;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      gap: 0;
      padding: 0;
    }
    /* Chat list panel */
    .chat-list-panel {
      width: 260px;
      flex-shrink: 0;
      border: none;
      border-right: 1px solid var(--border);
      border-radius: 0;
      display: flex;
      flex-direction: column;
      height: 100%;
      background: var(--bg-card);
      overflow: hidden;
      transition: width 0.2s ease;
    }
    .chat-list-panel.collapsed { width: 52px; overflow: hidden; }
    .chat-list-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; display: flex; align-items: center; gap: 10px; }
    .chat-list-item:hover { background: var(--bg-primary); }
    .chat-list-item.active { background: rgba(168,197,0,0.10); border-left: 3px solid var(--accent); }
    .chat-list-avatar { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 15px; font-weight: 700; flex-shrink: 0; }
    /* Chat room */
    .chat-room {
      border: none;
      border-radius: 0;
      height: 100%;
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-card);
    }
    .chat-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-page); }
    /* Header */
    .chat-room-header { background: var(--bg-card); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
    .chat-room-header-avatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 16px; flex-shrink: 0; }
    .chat-room-header .header-name { font-weight: 700; color: var(--text-primary); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-room-header .header-meta { font-size: 11px; color: var(--text-secondary); }
    /* Bubbles */
    .chat-bubble-wrap { display: flex; gap: 10px; align-items: flex-start; }
    .chat-bubble-wrap.self { flex-direction: row-reverse; }
    .chat-bubble-wrap > div { max-width: 72%; }
    .chat-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: 700; flex-shrink: 0; }
    .chat-bubble { padding: 10px 14px; border-radius: 6px 16px 16px 16px; font-size: 14px; line-height: 1.55; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
    [data-theme="dark"] .chat-bubble { background: #2a2a2a; border-color: #383838; }
    .chat-bubble.self { border-radius: 16px 10px 16px 16px; background: rgba(182,212,0,0.14); color: #364d00; border-color: rgba(182,212,0,0.35); }
    [data-theme="dark"] .chat-bubble.self { background: #4a7000; color: #fff; border-color: transparent; }
    .chat-bubble.mentioned { background: rgba(168,197,0,0.12); border-color: rgba(168,197,0,0.3); }
    .chat-sender { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
    .chat-time { font-size: 10px; color: var(--text-light); margin-top: 4px; }
    .chat-task-card { margin-top: 6px; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
    [data-theme="dark"] .chat-task-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
    [data-theme="dark"] .chat-task-card { border-color: rgba(253,230,138,0.3); background: rgba(253,230,138,0.05); }
    .chat-task-card:hover { border-color: var(--accent); }
    .chat-input-bar { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-end; background: var(--bg-card); position: relative; border-radius: 0; }
    .chat-input { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 20px; padding: 9px 14px; font-size: 14px; font-family: inherit; outline: none; background: var(--bg-primary); color: var(--text-primary); max-height: 120px; overflow-y: auto; }
    .chat-input:focus { border-color: var(--accent); }
    .chat-attach-popup { position: absolute; bottom: 64px; left: 12px; width: 280px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 20; overflow: hidden; }
    .chat-attach-item { padding: 10px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
    .chat-attach-item:hover { background: var(--bg-primary); }
    .chat-mention-dropdown { position: absolute; bottom: 64px; left: 12px; width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 21; overflow: hidden; }
    .chat-mention-item { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary); }
    .chat-mention-item:hover { background: var(--bg-primary); }
    /* ── Chat Reply ── */
    .chat-bubble-wrap { position: relative; }
    .chat-reply-btn {
      position: absolute; bottom: 5px; right: 6px;
      background: rgba(0,0,0,0.08); border: none; border-radius: 50%;
      width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
      font-size: 12px; cursor: pointer;
      opacity: 0; transition: opacity 0.15s; z-index: 10; color: var(--text-secondary);
    }
    .chat-bubble:hover .chat-reply-btn { opacity: 1; }
    .chat-bubble.self .chat-reply-btn { background: rgba(0,0,0,0.08); color: #364d00; }
    [data-theme="dark"] .chat-bubble.self .chat-reply-btn { background: rgba(255,255,255,0.18); color: #fff; }
    .chat-quote-block {
      border-left: 3px solid var(--accent); border-radius: 4px;
      background: rgba(0,0,0,0.07); padding: 4px 8px; margin-bottom: 6px; font-size: 12px;
    }
    [data-theme="dark"] .chat-quote-block { background: rgba(255,255,255,0.07); }
    .chat-quote-block .quote-sender { font-weight: 700; color: var(--accent); margin-bottom: 2px; font-size: 11px; }
    .chat-quote-block .quote-text {
      color: var(--text-secondary); overflow: hidden;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .chat-bubble.self .chat-quote-block { background: rgba(0,0,0,0.06); border-left-color: rgba(54,77,0,0.4); cursor: pointer; }
    .chat-bubble.self .chat-quote-block .quote-sender { color: #364d00; }
    .chat-bubble.self .chat-quote-block .quote-text { color: rgba(54,77,0,0.7); }
    [data-theme="dark"] .chat-bubble.self .chat-quote-block { background: rgba(0,0,0,0.2); border-left-color: rgba(255,255,255,0.5); }
    [data-theme="dark"] .chat-bubble.self .chat-quote-block .quote-sender { color: rgba(255,255,255,0.95); }
    [data-theme="dark"] .chat-bubble.self .chat-quote-block .quote-text { color: rgba(255,255,255,0.75); }
    .chat-quote-block { cursor: pointer; }
    .chat-quote-block:hover { opacity: 0.82; }
    /* ── Chat Header (Gradient) ── */
    .chat-room-header { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); padding: 10px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
    .chat-room-header-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; flex-shrink: 0; }
    .chat-room-header .header-name { font-weight: 700; color: white; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-room-header .header-meta { font-size: 11px; color: rgba(255,255,255,0.8); }
    /* ── Chat Send Button ── */
    .chat-send-btn { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 2px 6px rgba(168,197,0,0.35); transition: transform 0.15s, box-shadow 0.15s; }
    .chat-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 10px rgba(168,197,0,0.45); }
    .chat-send-btn:disabled { opacity: 0.45; transform: none; box-shadow: none; cursor: default; }
    .chat-reply-preview {
      border-left: 3px solid var(--accent); border-top: 1px solid var(--border);
      padding: 6px 12px; display: flex; align-items: flex-start; gap: 8px;
      font-size: 12px; background: var(--bg-primary);
    }
    .chat-reply-preview .preview-sender { font-weight: 700; color: var(--accent); font-size: 11px; }
    .chat-reply-preview .preview-text { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
    .chat-reply-preview .preview-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-light); font-size: 18px; padding: 0; flex-shrink: 0; line-height: 1; }
    @media (max-width: 768px) {
      /* Mobile: full-screen toggle — list OR chat, not side by side */
      .chat-layout { height: calc(100vh - 56px); margin: -8px -16px 0; border-radius: 0; border-left: none; border-right: none; padding: 0; gap: 0; }
      .chat-list-panel { width: 100%; border-right: none; border-radius: 0; }
      .chat-layout.has-selection .chat-list-panel { display: none; }
      .chat-room { display: none; }
      .chat-layout.has-selection .chat-room { display: flex; width: 100%; }
      /* Input bar */
      .chat-bubble { max-width: 88%; font-size: 13px; }
      .chat-input-bar { padding: 8px 10px; gap: 6px; }
      .chat-input { font-size: 13px; padding: 7px 10px; min-width: 0; }
      .chat-input-bar .btn { padding: 7px 12px; font-size: 12px; }
      .chat-messages { padding: 12px 16px; }
      .chat-reply-btn { opacity: 0; width: 22px; height: 22px; font-size: 11px; }
      .chat-bubble-wrap:not(.self) { flex-wrap: wrap; }
    }

    /* Pomodoro Button */
    .btn-pomodoro { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
    .btn-pomodoro:hover { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); transform: scale(1.02); }
    .btn-break { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; }
    .btn-break:hover { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }

    /* Input */
    .input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; transition: border-color 0.15s; outline: none; background: white; }
    .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168,197,0,0.15); }
    .input-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }

    /* Select */
    select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

    /* Modal */
    .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; }
    .modal-content { background: white; border-radius: 16px; width: 90%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 28px; scrollbar-width: none; position: relative; }
    .modal-content::-webkit-scrollbar { display: none; }

    /* Eisenhower grid */
    .eisenhower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .eisenhower-cell { border-radius: 12px; padding: 16px 20px; min-height: 160px; min-width: 0; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.06); transition: transform 0.18s, box-shadow 0.18s; }
    .eisenhower-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.09); }
    .eq1 { }
    .eq2 { }
    .eq3 { }
    .eq4 { }

    /* Task row */
    .task-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
    .task-row:hover { background: var(--bg-primary); border-color: var(--border); }
    .task-row.focusing { background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%); border-color: #fecaca; box-shadow: 0 2px 12px rgba(239,68,68,0.1); }
    [data-theme="dark"] .task-row.focusing { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); }
    [data-theme="dark"] .focus-card-overdue { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.3) !important; }
    [data-theme="dark"] .focus-card-focused { background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.3) !important; }
    [data-theme="dark"] .focus-card-normal { background: var(--bg-card) !important; border-color: var(--border) !important; }
    [data-theme="dark"] .focus-tips-card { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.25) !important; }
    .task-row-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .task-row-badges { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
    @media (max-width: 768px) {
      .task-row-header { flex-direction: column-reverse; gap: 4px; }
      .task-row-badges { align-self: flex-start; }
      .task-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; }
      .task-row:hover { background: var(--bg-primary); }
    }

    /* Toast */
    .toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 24px; padding: 12px 20px; border-radius: 10px; color: white; font-weight: 600; font-size: 14px; z-index: 100; animation: fadeIn 0.3s ease-out; }
    .toast-success { background: #22c55e; }
    .toast-error { background: #ef4444; }

    /* Pomodoro Timer Styles */
    .pomodoro-container {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border-radius: 20px;
      padding: 32px;
      color: white;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .pomodoro-container::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(239,68,68,0.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .pomodoro-timer {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }
    .pomodoro-circle {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .pomodoro-circle svg {
      position: absolute;
      top: 0;
      left: 0;
      transform: rotate(-90deg);
    }
    .pomodoro-time {
      font-size: 48px;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: -2px;
    }
    .pomodoro-label {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .pomodoro-controls {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 24px;
    }
    .pomodoro-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all 0.2s;
    }
    .pomodoro-btn:hover { transform: scale(1.1); }
    .pomodoro-btn-play { background: #ef4444; color: white; }
    .pomodoro-btn-play.break { background: #22c55e; }
    .pomodoro-btn-pause { background: #f59e0b; color: white; }
    .pomodoro-btn-reset { background: rgba(255,255,255,0.1); color: white; }
    .pomodoro-btn-skip { background: rgba(255,255,255,0.1); color: white; }
    
    .pomodoro-stats {
      display: flex;
      gap: 24px;
      justify-content: center;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .pomodoro-stat {
      text-align: center;
    }
    .pomodoro-stat-value {
      font-size: 24px;
      font-weight: 700;
    }
    .pomodoro-stat-label {
      font-size: 11px;
      color: rgba(255,255,255,0.75);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    .focus-task-card {
      background: rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 16px 20px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .focus-task-title {
      flex: 1;
      font-size: 15px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .focus-task-pomodoros {
      font-size: 14px;
      color: rgba(255,255,255,0.7);
    }

    /* Task with focus button */
    .task-focus-btn {
      padding: 6px 14px;
      border-radius: 8px;
      border: none;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .task-focus-btn.start {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      color: white;
    }
    .task-focus-btn.start:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 8px rgba(239,68,68,0.3);
    }
    .task-focus-btn.active {
      background: #22c55e;
      color: white;
      animation: pulse 2s infinite;
    }
    .task-focus-btn.disabled {
      background: rgba(0,0,0,0.05);
      color: var(--text-light);
      cursor: not-allowed;
      opacity: 0.45;
    }
    [data-theme="dark"] .task-focus-btn.disabled {
      background: rgba(255,255,255,0.05);
    }

    /* Pomodoro history */
    .pomodoro-history {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .pomodoro-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ef4444;
    }
    .pomodoro-dot.empty {
      background: rgba(239,68,68,0.2);
      border: 1px dashed rgba(239,68,68,0.4);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.open { transform: translateX(0); }
      .main-content, .main-content.sidebar-visible { margin-left: 0; padding: 16px; padding-top: 8px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
      .mobile-topbar { display: flex !important; }
      .desktop-topbar { display: none !important; }
      .eisenhower-grid { grid-template-columns: 1fr; }
      .charts-grid { grid-template-columns: 1fr !important; }
      .gtd-grid { grid-template-columns: 1fr !important; }
      .eisen-outer { display: flex; flex-direction: column; gap: 12px; }
      .eisen-outer > div { display: contents; }
      .eisen-label-col { display: none !important; }
      .eisen-header-row { display: none !important; }
      :root { --sidebar-w: 280px; }
      
      /* Pomodoro Mobile Styles */
      .pomodoro-container { 
        padding: 16px; 
        border-radius: 16px;
        margin-bottom: 16px;
      }
      .pomodoro-header { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 12px !important;
        margin-bottom: 16px !important;
      }
      .pomodoro-header-title { 
        font-size: 18px !important; 
      }
      .pomodoro-header-subtitle {
        font-size: 12px !important;
      }
      .pomodoro-mode-btns { 
        width: 100%;
        justify-content: flex-start !important;
      }
      .pomodoro-mode-btn {
        padding: 5px 12px !important;
        font-size: 12px !important;
      }
      .pomodoro-timer { 
        width: 140px; 
        height: 140px; 
        margin: 8px auto 16px;
      }
      .pomodoro-time { 
        font-size: 32px !important; 
        letter-spacing: -1px !important;
      }
      .pomodoro-label {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
      }
      .pomodoro-controls { 
        margin-top: 16px !important;
        gap: 10px !important;
      }
      .pomodoro-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
      }
      .pomodoro-stats { 
        flex-wrap: nowrap;
        gap: 12px;
        margin-top: 16px !important;
        padding-top: 16px !important;
      }
      .pomodoro-stat-value {
        font-size: 18px !important;
      }
      .pomodoro-stat-label {
        font-size: 9px !important;
      }
      .focus-task-card {
        padding: 12px !important;
        margin-top: 12px !important;
        gap: 8px !important;
      }
      .focus-task-card span:first-child {
        font-size: 16px !important;
      }
      .focus-task-title {
        font-size: 13px !important;
      }
      .focus-task-pomodoros {
        font-size: 12px !important;
      }
      .focus-layout { flex-direction: column !important; }
      .focus-layout > div { width: 100% !important; }
      
      /* Task focus button mobile */
      .task-focus-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
      }
      
      /* Focus page mobile */
      .focus-page-header {
        margin-bottom: 12px !important;
      }
      .focus-page-title {
        font-size: 20px !important;
      }
      .focus-page-subtitle {
        font-size: 12px !important;
        margin-top: 2px !important;
      }
      .focus-task-list {
        padding: 12px !important;
      }
      .focus-task-list h3 {
        font-size: 14px !important;
      }
      .focus-tips-card {
        padding: 12px !important;
        margin-top: 12px !important;
      }
      .focus-tips-card span:first-child {
        font-size: 20px !important;
      }
      .focus-tips-card ul {
        font-size: 12px !important;
      }
    }

    /* Overdue pulse */
    .overdue-indicator { display: inline-block; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; animation: pulse 1.5s infinite; }

    /* Extra small screens */
    @media (max-width: 400px) {
      .pomodoro-container { 
        padding: 14px; 
      }
      .pomodoro-header-title { 
        font-size: 16px !important; 
      }
      .pomodoro-mode-btn {
        padding: 4px 10px !important;
        font-size: 11px !important;
      }
      .pomodoro-timer { 
        width: 120px !important; 
        height: 120px !important; 
      }
      .pomodoro-time { 
        font-size: 28px !important; 
      }
      .pomodoro-label {
        font-size: 9px !important;
      }
      .pomodoro-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
      }
      .pomodoro-stat-value {
        font-size: 16px !important;
      }
      .pomodoro-stat-label {
        font-size: 8px !important;
      }
    }

    /* Checkbox */
    .check-btn { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #d1d5db; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
    .check-btn:hover { border-color: var(--success); background: #f0fdf4; transform: scale(1.1); }
    .check-btn:active { transform: scale(0.92); }
    .check-btn .check-icon { animation: checkPop 0.3s ease-out; }

    /* ── Habit Tracker ── */
    .habit-phase-header { font-weight: 700; font-size: 12px; letter-spacing: 0.05em; padding: 6px 10px; }
    /* Habit Card Grid Layout */
    .habit-card { background: var(--bg-card); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; cursor: pointer; border: 1px solid var(--border); transition: box-shadow 0.15s, transform 0.15s; }
    .habit-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-1px); }
    .habit-card-inner { display: flex; align-items: center; gap: 16px; }
    .habit-card-info { flex: 1; min-width: 0; }
    .habit-card-grid { display: flex; gap: 5px; flex-shrink: 0; }
    .habit-week-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .habit-week-label { font-size: 10px; font-weight: 600; color: var(--text-secondary); }
    .habit-week-label.today { color: #818cf8; font-weight: 700; }
    .habit-week-box { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--bg-primary); font-size: 13px; font-weight: 700; transition: all 0.1s; }
    .habit-week-box.done { background: #818cf8; border-color: #818cf8; color: #fff; }
    .habit-week-box.skipped { background: transparent; border: 1.5px dashed #94a3b8; }
    .habit-week-box.missed { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); }
    .habit-streak { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 8px; border-left: 1px solid var(--border); min-width: 36px; }
    /* Mobile: stack layout */
    @media (max-width: 640px) {
      .habit-card { padding: 12px 14px; }
      .habit-card-inner { flex-wrap: wrap; gap: 6px 10px; }
      .habit-card-info { order: 1; flex: 1; min-width: 0; }
      .habit-streak { order: 2; border-left: none; padding-left: 0; flex-direction: row; gap: 4px; min-width: auto; }
      .habit-card-menu { order: 3; }
      .habit-card-grid { order: 4; width: 100%; gap: 3px; justify-content: space-between; }
      .habit-week-col { flex: 1; }
      .habit-week-box { width: 100%; max-width: 40px; height: 28px; font-size: 11px; border-radius: 5px; }
      .habit-week-label { font-size: 9px; }
    }
    /* Habit Check-in Modal */
    .habit-checkin-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
    .habit-checkin-box { background: var(--bg-card); border-radius: 18px; padding: 24px 22px; width: 320px; max-width: calc(100vw - 32px); box-shadow: 0 16px 48px rgba(0,0,0,0.28); animation: scaleIn 0.18s ease-out; }
    .habit-done-btn { width: 100%; padding: 12px 0; border-radius: 10px; background: var(--accent); color: #fff; border: none; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; }
    .habit-done-btn:hover { background: var(--accent-hover); transform: scale(1.01); }
    .habit-done-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
    .habit-skip-btn { background: none; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: color 0.15s; }
    .habit-skip-btn:hover { color: var(--text-primary); }

    /* ── Scratchpad / Notes ──────────────────────────────── */
    .scratchpad-bar { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 16px; margin-bottom: 18px; }
    .scratchpad-bar input { flex: 1; background: none; border: none; outline: none; font-size: 14px; color: var(--text-primary); }
    .scratchpad-bar input::placeholder { color: var(--text-light); }
    .notes-layout {
      display: flex;
      height: calc(100vh - 84px);
      min-height: 480px;
      margin-top: 6px;
      overflow: hidden;
      position: relative;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .notes-left {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      background: var(--bg-card);
      flex-shrink: 0;
      height: 100%;
    }
    .notes-left-inner { flex: 1; overflow-y: auto; padding: 6px 16px 16px 0; scrollbar-width: none; min-height: 0; }
    .notes-left-inner::-webkit-scrollbar { display: none; }
    .notes-left > *:not(.notes-left-inner) { flex-shrink: 0; }
    .notes-tabs {
      display: flex;
      gap: 3px;
      padding: 2px;
      background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin: 0 16px 8px 0;
    }
    .notes-tab {
      flex: 1;
      padding: 4px 2px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background 0.12s ease, color 0.12s ease;
      font-family: inherit;
      white-space: nowrap;
    }
    .notes-tab:hover { color: var(--text-primary); }
    .notes-tab.active {
      background: var(--accent);
      color: #111;
    }

    /* Sidebar expand toggle — visible only when sidebar is collapsed */
    .sidebar-toggle {
      position: fixed; left: 0; top: 50%; transform: translateY(-50%);
      width: 28px; height: 64px;
      background: var(--accent);
      color: #111;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 200;
      border-radius: 0 10px 10px 0;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
      box-shadow: 0 0 0 0 rgba(168,197,0,0);
      transform: translateY(-50%) translateX(-28px);
    }
    .sidebar-toggle:hover {
      box-shadow: 2px 0 18px rgba(168,197,0,0.35);
    }
    .sidebar-toggle.visible {
      opacity: 1; pointer-events: auto;
      transform: translateY(-50%) translateX(0);
    }
    .sidebar-toggle svg {
      width: 16px; height: 16px;
      transition: transform 0.2s;
    }
    .sidebar-toggle:hover svg { transform: scale(1.2); }
    /* Sidebar collapse button */
    .sidebar-collapse-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px;
      background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: 7px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: all 0.18s ease;
      flex-shrink: 0;
    }
    .sidebar-collapse-btn:hover { background: rgba(168,197,0,0.12); border-color: var(--accent); color: var(--accent); }
    .sidebar-collapse-btn svg { width: 14px; height: 14px; }
    .pinned-list-expanded { max-height: 220px; overflow-y: auto; scrollbar-width: none; }
    .pinned-list-expanded::-webkit-scrollbar { display: none; }
    .pinned-note-item {
      display: flex; align-items: center; gap: 7px;
      padding: 7px 10px; border-radius: 10px; margin-bottom: 3px;
      cursor: pointer; font-size: 12.5px; color: var(--text-secondary);
      border: 1px solid transparent; background: transparent;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      transition: all 0.18s;
    }
    .pinned-note-item:hover { background: var(--bg-primary); border-color: var(--border); color: var(--text-primary); }
    .pinned-note-item.active { background: rgba(168,197,0,0.08); border-color: var(--accent); color: var(--accent); font-weight: 600; }
    .pinned-note-icon { font-size: 14px; flex-shrink: 0; opacity: 0.7; line-height: 1; }
    .pinned-note-item.active .pinned-note-icon { opacity: 1; }
    .pinned-note-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
    .pinned-note-tags { display: flex; gap: 3px; flex-shrink: 0; }
    .pinned-note-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.5; flex-shrink: 0; }
    .pinned-note-item.active .pinned-note-tag-dot { opacity: 1; }
    .notes-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
      height: 100%;
      background: var(--bg-card);
      margin-left: 0;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
    .notes-right-scroll { flex: 1; overflow-y: auto; padding: 16px 26px 28px; scrollbar-width: none; }
    .notes-right-scroll::-webkit-scrollbar { display: none; }
    .notes-panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-light); gap: 12px; }
    .notes-panel-header { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 14px; border-bottom: 2px solid var(--border); margin-bottom: 18px; flex-shrink: 0; flex-wrap: wrap; }
    .notes-panel-meta { flex: 1; min-width: 0; }
    .notes-panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; flex: 0 0 100%; padding-top: 8px; }
    .notes-panel-title { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; line-height: 1.35; word-break: break-word; }
    @media (max-width: 640px) {
      .notes-panel-meta { width: 100%; }
      .notes-panel-actions { width: 100%; }
    }
    .notes-nav-trail { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; color: var(--text-light); margin-bottom: 6px; background: var(--bg-primary); border-radius: 6px; padding: 4px 8px; }
    .notes-nav-crumb { cursor: pointer; color: var(--accent); }
    .notes-nav-crumb:hover { text-decoration: underline; }
    .notes-section-label { font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.8px; margin: 16px 0 8px; }
    .notes-link-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary); }
    .notes-link-item:hover { background: var(--bg-primary); }
    .note-conn { font-size: 10px; color: var(--text-light); margin-left: auto; flex-shrink: 0; white-space: nowrap; }
    @media (min-width: 768px) and (max-width: 1024px) {
      .notes-left { width: 320px !important; min-width: 280px !important; }
      .notes-right { margin-left: 0 !important; }
    }
    @media (max-width: 767px) {
      .notes-layout {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 56px);
        margin: -8px -16px 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
      .notes-left { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; border-right: none; overflow-y: auto !important; flex-direction: column !important; flex-shrink: 1 !important; }
      .notes-left-inner { padding: 6px 14px 84px 0 !important; }
      .notes-right { display: none; }
      .notes-layout.note-open .notes-left { display: none !important; }
      .notes-layout.note-open .notes-right { display: flex !important; width: 100% !important; margin-left: 0 !important; overflow: hidden; padding: 0; height: calc(100vh - 120px); background: var(--bg-card); border: none; border-radius: 0; box-shadow: none; }
      .notes-layout.note-open .notes-right-scroll { padding: 12px 14px 24px; }
      .notes-layout .sidebar-collapse-btn { display: none !important; }
    }
    @page { margin: 0; }
    /* Hidden except during print; @media print sets display:block. Prevents the
       print DOM lingering visibly if 'afterprint' never fires (e.g. Android webview). */
    #note-print-area { display: none; }
    @media print {
      html, body { background: #fff !important; color: #1f2937 !important; }
      body > *:not(#note-print-area) { display: none !important; }
      #note-print-area { display: block !important; background: #fff; font-family: 'Nunito Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #1f2937; }
      #note-print-area .print-container { width: 100%; border-collapse: collapse; }
      #note-print-area .page-header-space { height: 20mm; display: block; }
      #note-print-area .page-footer-space { height: 16mm; display: block; }
      #note-print-area .note-content { padding: 0 15mm; color: #1f2937 !important; }
      #note-print-area .npa-title { font-size: 24pt; font-weight: 700; margin: 0 0 2mm; color: #111827 !important; }
      #note-print-area .npa-meta { font-size: 10pt; color: #6b7280 !important; margin-bottom: 8mm; padding-bottom: 4mm; border-bottom: 1px solid #e5e7eb; }
      #note-print-area .note-rendered { font-size: 11pt; line-height: 1.6; color: #1f2937 !important; }
      #note-print-area .note-rendered * { color: #1f2937 !important; }
      #note-print-area .note-rendered p { margin-bottom: 4.5mm; text-align: justify; text-justify: inter-word; break-inside: avoid; page-break-inside: avoid; orphans: 3; widows: 3; }
      #note-print-area .note-rendered h1 { font-size: 18pt; margin: 16pt 0 6pt; }
      #note-print-area .note-rendered h2 { font-size: 15pt; margin: 14pt 0 5pt; }
      #note-print-area .note-rendered h3 { font-size: 13pt; margin: 12pt 0 4pt; }
      #note-print-area .note-rendered h4, #note-print-area .note-rendered h5, #note-print-area .note-rendered h6 { font-size: 11pt; margin: 10pt 0 4pt; }
      #note-print-area .note-rendered ul, #note-print-area .note-rendered ol { padding-left: 20pt; }
      #note-print-area .note-rendered blockquote { border-left: 3px solid #ccc; margin-left: 0; padding-left: 12pt; color: #555 !important; }
      #note-print-area .note-rendered code { font-family: monospace; background: #f4f4f4; padding: 1px 4px; border-radius: 3px; }
      #note-print-area .note-rendered hr { border: none; border-top: 1px solid #e5e7eb; margin: 14pt 0; }
      #note-print-area .wikilink, #note-print-area .wikilink-broken { color: #333 !important; border-bottom: none !important; font-style: normal !important; }
      #note-print-area .check-item { display: flex; gap: 6pt; align-items: baseline; }
      #note-print-area .tasklink-node, #note-print-area .tasklink-node-fallback { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 9pt; }
      #note-print-area .tasklink-status-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      #note-print-area .tasklink-priority-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      #note-print-area .highlight-mark { background: #fef08a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      #note-print-area .note-draw-card { border: 1px solid #d1d5db !important; background: #ffffff !important; border-radius: 6px !important; margin: 8pt auto !important; overflow: hidden !important; break-inside: avoid !important; page-break-inside: avoid !important; box-sizing: border-box !important; }
      #note-print-area .note-draw-card[data-size="S"] { width: 50% !important; max-width: 50% !important; margin: 6pt auto !important; }
      #note-print-area .note-draw-card[data-size="M"] { width: 75% !important; max-width: 75% !important; margin: 6pt auto !important; }
      #note-print-area .note-draw-card[data-size="L"], #note-print-area .note-draw-card[data-size="FULL"] { width: 100% !important; max-width: 100% !important; margin: 8pt 0 !important; }
      #note-print-area .note-draw-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 3pt 6pt !important; background: #f9fafb !important; border-bottom: 1px solid #e5e7eb !important; font-size: 9pt !important; font-weight: 600 !important; color: #374151 !important; }
      #note-print-area .note-draw-header button, #note-print-area .note-draw-size-pills { display: none !important; }
      #note-print-area .note-draw-preview-container { padding: 6pt !important; background: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: auto !important; overflow: hidden !important; }
      #note-print-area .note-draw-card[data-size="S"] .note-draw-preview-container svg { max-height: 180px !important; width: 100% !important; height: auto !important; display: block !important; }
      #note-print-area .note-draw-card[data-size="M"] .note-draw-preview-container svg { max-height: 280px !important; width: 100% !important; height: auto !important; display: block !important; }
      #note-print-area .note-draw-card[data-size="L"] .note-draw-preview-container svg, #note-print-area .note-draw-card .note-draw-preview-container svg { max-height: 380px !important; width: 100% !important; height: auto !important; display: block !important; }
      #note-print-area .drawing-preview-placeholder { display: none !important; }
      #note-print-area .npa-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 3mm 15mm; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-size: 9pt; color: #9ca3af; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }
    .note-rendered img { max-width: 100%; border-radius: 6px; margin: 6px 0; display: block; }
    /* Image resize presets via title attribute — works in viewer AND editor */
    :is(.note-rendered, .ProseMirror) img[title="10%"] { width: 10%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="20%"] { width: 20%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="30%"] { width: 30%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="40%"] { width: 40%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="50%"] { width: 50%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="60%"] { width: 60%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="70%"] { width: 70%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="80%"] { width: 80%; height: auto; }
    :is(.note-rendered, .ProseMirror) img[title="90%"] { width: 90%; height: auto; }
    /* Image resize toolbar */
    .img-resize-toolbar button:hover { background: var(--accent,#a8c500); color: #fff; border-color: var(--accent,#a8c500); }
    [data-theme="dark"] .img-resize-toolbar { background: #1e1e1e; border-color: #333; }
    [data-theme="dark"] .img-resize-toolbar button { background: #2a2a2a; color: #ddd; border-color: #444; }
    [data-theme="dark"] .img-resize-toolbar button:hover { background: var(--accent,#a8c500); color: #fff; }
    .note-rendered mark { background: #fef08a; border-radius: 2px; padding: 0 2px; }
    .img-offline-placeholder { font-size: 12px; color: var(--text-light); font-style: italic; }
    .note-attachments-panel { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
    .note-attach-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
    .note-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; margin-bottom: 6px; cursor: pointer; transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s; }
    .note-card:hover { box-shadow: 0 4px 20px rgba(168,197,0,0.15); border-color: var(--accent); transform: translateY(-1px); }
    .note-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.1px; }
    .note-card-preview { font-size: 12px; color: var(--text-light); line-height: 1.55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 2px; }
    .note-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(168,197,0,0.12); color: var(--accent); border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; transition: all 0.15s; user-select: none; }
    .note-tag-untagged { display: inline-block; background: var(--bg-primary); border: 1px dashed var(--border); border-radius: 8px; padding: 1px 7px; font-size: 10px; color: var(--text-light); font-style: italic; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
    .note-tag-untagged:hover { border-color: var(--accent); color: var(--accent); }
    /* ── Redesigned tag pills (sidebar filter area) ── */
    .tag-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 500; background: #F3F4F6; color: #475467; border: 1px solid #E4E7EC; cursor: pointer; userSelect: none; transition: all 0.15s; white-space: nowrap; line-height: 1; min-height: 26px; }
    .tag-pill:hover { background: #E9EEF5; border-color: #D0D5DD; }
    .tag-pill.active { background: #B6D400; color: #fff; border-color: #B6D400; font-weight: 600; }
    .tag-pill.active:hover { background: #A3C100; border-color: #A3C100; }
    .tag-count { font-size: 9px; background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 10px; font-weight: 600; min-width: 16px; text-align: center; line-height: 1.4; }
    .tag-pill.active .tag-count { background: rgba(255,255,255,0.25); color: #fff; }
    .tag-section-label { font-size: 9px; font-weight: 700; color: #98A2B3; text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 2px 3px; }
    /* -- Note tab bar (multi-note viewer) -- */
    .note-tab-bar {
      display: flex;
      align-items: stretch;
      gap: 4px;
      padding: 10px 26px 0;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card);
      min-height: 36px;
    }
    .note-tab-bar::-webkit-scrollbar { display: none; }
    .note-tab-item {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      border-radius: 8px 8px 0 0;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-bottom: none;
      cursor: pointer;
      white-space: nowrap;
      max-width: 180px;
      min-width: 80px;
      user-select: none;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .note-tab-item:hover {
      background: #E9EEF5;
    }
    .note-tab-item.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      font-weight: 600;
    }
    .note-tab-item.active:hover {
      background: #A3C100;
      border-color: #A3C100;
    }
    .note-tab-title {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 120px;
    }
    .note-tab-close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: inherit;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.15s, background 0.15s;
      flex-shrink: 0;
      padding: 0;
    }
    .note-tab-close:hover {
      opacity: 1;
      background: rgba(0,0,0,0.12);
    }
    .note-tab-item.active .note-tab-close:hover {
      background: rgba(255,255,255,0.2);
    }
    /* Hide tab bar on mobile */
    @media (max-width: 767px) {
      .note-tab-bar { display: none !important; }
    }
    .tag-scroll { display: flex; flex-wrap: wrap; gap: 5px; }
    .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .note-tab { flex: 1; text-align: center; padding: 8px 4px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; }
    .note-tab:hover { color: var(--text-primary); }
    .note-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
    .note-word-count { font-size: 11.5px; color: var(--text-light); display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 0 2px; }
    .note-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
    .note-modal-box { background: var(--bg-card); border-radius: 18px; padding: 24px; width: 480px; max-width: 100%; max-height: 85vh; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.28); animation: scaleIn 0.18s ease-out; display: flex; flex-direction: column; gap: 14px; }
    .note-modal-scroll-area { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
    .note-modal-title-input { font-size: 17px; font-weight: 700; background: none; border: none; outline: none; color: var(--text-primary); width: 100%; border-bottom: 1.5px solid var(--border); padding-bottom: 8px; }
    .note-modal-content-input { font-size: 14px; background: var(--bg-page); border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: var(--text-primary); width: 100%; resize: vertical; min-height: 120px; outline: none; font-family: inherit; line-height: 1.6; }
    .note-modal-section-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
    .note-toolbar { display: flex; gap: 2px; flex-wrap: nowrap; align-items: center; margin-bottom: 6px; overflow: visible; }
    .wikilink { color: var(--accent); font-weight: 600; cursor: pointer; border-bottom: 1px dashed var(--accent); transition: opacity 0.15s; }
    .wikilink:hover { opacity: 0.75; }
    .wikilink-broken { color: #b45309; background: rgba(245,158,11,0.10); border-radius: 4px; padding: 0 3px; border-bottom: 1px dashed #d97706; cursor: pointer; font-style: italic; }
    .wikilink-broken:hover { background: rgba(245,158,11,0.20); }
    /* Read-mode wikilink — higher specificity inside .note-rendered */
    .note-rendered .wikilink { color: var(--accent); font-weight: 600; cursor: pointer; border-bottom: 1px dashed var(--accent); }
    .note-rendered .wikilink:hover { opacity: 0.75; }
    .note-rendered .wikilink-broken { color: #b45309; background: rgba(245,158,11,0.10); border-radius: 4px; padding: 0 3px; border-bottom: 1px dashed #d97706; cursor: pointer; font-style: italic; }
    .note-rendered .wikilink-broken:hover { background: rgba(245,158,11,0.20); }
    .note-shared-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; padding: 1px 6px; vertical-align: middle; }
    .note-toc-panel::-webkit-scrollbar { display: none; }
    .wiki-autocomplete { position: fixed; background: var(--bg-card); border: 1.5px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); z-index: 2000; min-width: 200px; max-width: 320px; overflow: hidden; }
    .wiki-autocomplete-item { padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--text-primary); transition: background 0.1s; }
    .wiki-autocomplete-item:hover, .wiki-autocomplete-item.active { background: rgba(168,197,0,0.15); color: var(--accent); font-weight: 600; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .backlink-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg-primary); margin-bottom: 5px; cursor: pointer; font-size: 13px; transition: opacity 0.15s; }
    .backlink-item:hover { opacity: 0.75; }
    .note-toolbar button { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0 9px; height: 28px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; font-family: inherit; white-space: nowrap; }
    .note-toolbar button:hover { background: var(--bg-primary); border-color: var(--accent); color: var(--text-primary); }
    .note-toolbar .sep { width: 1px; background: var(--border); margin: 2px 3px; align-self: stretch; }
    .tpl-dropdown { position: absolute; top: 100%; left: 0; background: white; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 220px; z-index: 1000; overflow: hidden; padding: 4px 0; }
    .tpl-group-label { padding: 6px 14px 3px; font-size: 9px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.8px; }
    .tpl-item { padding: 7px 14px; font-size: 13px; cursor: pointer; color: #374151; }
    .tpl-item:hover { background: #f9fafb; }
    .tpl-footer { padding: 8px 14px; font-size: 12px; color: #b6d400; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
    .tpl-footer:hover { background: #f9fafb; }
    .tpl-divider { height: 1px; background: #f3f4f6; margin: 4px 0; }
    .note-rendered { font-size: 14px; line-height: 1.75; color: var(--text-primary); }
    .note-rendered h1 { font-size: 20px; font-weight: 800; margin: 10px 0 6px; }
    .note-rendered h2 { font-size: 16px; font-weight: 700; margin: 8px 0 4px; }
    .note-rendered h3 { font-size: 14px; font-weight: 700; margin: 6px 0 3px; color: var(--text-secondary); }
    .note-rendered ul, .note-rendered ol { margin: 4px 0; padding-left: 22px; }
    .note-rendered ul { list-style-type: disc; }
    .note-rendered ol { list-style-type: decimal; }
    .note-rendered ul ul { list-style-type: circle; }
    .note-rendered ul ul ul { list-style-type: square; }
    .note-rendered li { margin-bottom: 3px; }
    .note-rendered .check-item { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 4px; list-style: none; margin-left: 0; }
    .note-rendered .check-item input[type=checkbox] { margin-top: 3px; accent-color: var(--accent); cursor: default; flex-shrink: 0; }
    .note-rendered .check-item.done span { text-decoration: line-through; color: var(--text-light); }
    .note-rendered strong { font-weight: 700; }
    .note-rendered em { font-style: italic; color: var(--text-secondary); }
    .note-rendered hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
    .note-rendered blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--text-secondary); margin: 6px 0; font-style: italic; }

    /* Mobile Notes Modal */
    @media (max-width: 768px) {
      .note-hdr-icon { display: none; }
      .note-modal-overlay { padding: 12px; }
      .note-modal-box {
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 16px;
        padding: 20px 16px;
        gap: 10px;
      }
      .note-toolbar { 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .note-toolbar::-webkit-scrollbar { display: none; }
      .note-toolbar button { flex-shrink: 0; }
      .note-modal-title-input { font-size: 19px; }
      .note-modal-content-input { font-size: 15px; flex-grow: 1; }
      
      /* Fixed footer for mobile */
      .note-mobile-footer {
        position: sticky;
        bottom: -16px; /* align with box padding */
        margin: 0 -16px -16px;
        padding: 12px 16px;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        z-index: 10;
      }
      .note-modal-scroll-area {
        display: flex;
        flex-direction: column;
        gap: 14px;
        flex: 1;
        overflow-y: auto;
        margin: 0 -4px;
        padding: 0 4px;
      }
    }
    .milkdown-editor {
      outline: none;
      overflow-y: auto;
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-primary);
    }
    .milkdown-editor .ProseMirror {
      min-height: inherit;
      padding: 8px 12px;
      outline: none;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    /* Placeholder text */
    .milkdown-editor .ProseMirror p.is-editor-empty:first-child::before {
      content: attr(data-placeholder);
      color: var(--text-light);
      pointer-events: none;
      float: left;
      height: 0;
    }
    .wikilink-node {
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      border-radius: 4px;
      padding: 0 3px;
      cursor: pointer;
      text-decoration: none;
      border-bottom: 1.5px dashed var(--accent);
      font-size: 0.95em;
      user-select: all;
    }
    .wikilink-node:hover {
      background: color-mix(in srgb, var(--accent) 22%, transparent);
      border-bottom-color: var(--accent-hover);
      opacity: 0.85;
    }
    .tasklink-node {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #fef9c3;
      border: 1px solid #fde68a;
      border-radius: 4px;
      padding: 1px 7px;
      font-size: 12px;
      font-weight: 600;
      color: #92400e;
      cursor: pointer;
      vertical-align: middle;
      text-decoration: none;
      transition: opacity 0.15s;
      user-select: none;
    }
    .tasklink-node:hover { opacity: 0.75; }
    .tasklink-status-label {
      color: white;
      font-size: 9px;
      padding: 0 5px;
      border-radius: 2px;
      letter-spacing: 0.3px;
      font-weight: 700;
    }
    .tasklink-priority-label {
      color: white;
      font-size: 10px;
      padding: 0 4px;
      border-radius: 2px;
      font-weight: 700;
    }
    .tasklink-node-fallback {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 1px 7px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      vertical-align: middle;
      user-select: none;
    }
    /* Scoped typography — avoids bleeding into app chrome */
    .milkdown-editor .ProseMirror h1 { font-size: 1.6em; font-weight: 700; margin: 0.5em 0; }
    .milkdown-editor .ProseMirror h2 { font-size: 1.3em; font-weight: 700; margin: 0.5em 0; }
    .milkdown-editor .ProseMirror h3 { font-size: 1.1em; font-weight: 600; margin: 0.4em 0; }
    .milkdown-editor .ProseMirror h4,
    .milkdown-editor .ProseMirror h5,
    .milkdown-editor .ProseMirror h6 { font-size: 1em; font-weight: 600; margin: 0.3em 0; }
    .milkdown-editor .ProseMirror ul  { list-style: disc; padding-left: 1.5em; margin: 0.3em 0; }
    .milkdown-editor .ProseMirror ol  { list-style: decimal; padding-left: 1.5em; margin: 0.3em 0; }
    .milkdown-editor .ProseMirror li  { margin: 0.1em 0; }
    .milkdown-editor .ProseMirror blockquote {
      border-left: 3px solid var(--accent);
      padding-left: 12px;
      color: var(--text-secondary);
      margin: 0.5em 0;
    }
    .milkdown-editor .ProseMirror code {
      background: rgba(0,0,0,0.06);
      border-radius: 3px;
      padding: 1px 4px;
      font-family: ui-monospace, Consolas, 'Courier New', monospace;
      font-size: 0.9em;
    }
    .milkdown-editor .ProseMirror pre {
      background: rgba(0,0,0,0.06);
      padding: 10px 14px;
      border-radius: 6px;
      overflow-x: auto;
      margin: 0.5em 0;
    }
    .milkdown-editor .ProseMirror pre code { background: none; padding: 0; }
    .milkdown-editor .ProseMirror hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 1em 0;
    }
    .milkdown-editor .ProseMirror table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      overflow: hidden;
      margin: 0.5em 0;
    }
    .milkdown-editor .ProseMirror th,
    .milkdown-editor .ProseMirror td {
      border: 1px solid var(--border);
      padding: 4px 8px;
      font-size: 0.9em;
    }
    .milkdown-editor .ProseMirror th { background: rgba(0,0,0,0.06); font-weight: 600; }
    /* ── Milkdown Table Column Resizing & Selection ── */
    .milkdown-editor .ProseMirror .tableWrapper {
      overflow-x: auto;
      margin: 12px 0;
      max-width: 100%;
    }
    .milkdown-editor .ProseMirror td,
    .milkdown-editor .ProseMirror th {
      vertical-align: top;
      box-sizing: border-box;
      position: relative;
    }
    .milkdown-editor .ProseMirror .column-resize-handle {
      position: absolute;
      right: -2px;
      top: 0;
      bottom: 0;
      width: 4px;
      z-index: 20;
      background-color: var(--accent, #3b82f6);
      opacity: 0.85;
      pointer-events: none;
      border-radius: 2px;
    }
    .milkdown-editor .ProseMirror.resize-cursor,
    .milkdown-editor .ProseMirror.resize-cursor * {
      cursor: col-resize !important;
    }
    .milkdown-editor .ProseMirror .selectedCell:after {
      z-index: 2;
      position: absolute;
      content: '';
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(59, 130, 246, 0.2);
      pointer-events: none;
    }
    /* ── Table rendering in note viewer / published ──────────── */
    .note-rendered table {
      border-collapse: collapse;
      width: 100%;
      margin: 0.5em 0;
    }
    .note-rendered th,
    .note-rendered td {
      border: 1px solid var(--border, #d1d5db);
      padding: 6px 10px;
      font-size: 0.9em;
    }
    .note-rendered td[align="left"],
    .note-rendered th[align="left"] { text-align: left; }
    .note-rendered td[align="center"],
    .note-rendered th[align="center"] { text-align: center; }
    .note-rendered td[align="right"],
    .note-rendered th[align="right"] { text-align: right; }
    .note-rendered th {
      background: rgba(0,0,0,0.06);
      font-weight: 600;
    }
    .note-rendered tr:nth-child(even) td {
      background: rgba(0,0,0,0.02);
    }
    /* dark mode overrides */
    [data-theme="dark"] .note-rendered th,
    [data-theme="dark"] .note-rendered td {
      border-color: #333;
    }
    [data-theme="dark"] .note-rendered th {
      background: rgba(255,255,255,0.06);
    }
    [data-theme="dark"] .note-rendered tr:nth-child(even) td {
      background: rgba(255,255,255,0.02);
    }
    .milkdown-editor .ProseMirror input[type="checkbox"] {
      margin-right: 6px;
      accent-color: var(--accent);
    }
    /* GFM task list — Milkdown renders <li data-item-type="task"> tanpa <input>,
       jadi checkbox digambar via ::before; toggle ditangani createTaskCheckboxPlugin */
    .milkdown-editor .ProseMirror li[data-item-type="task"] { list-style: none; position: relative; }
    .milkdown-editor .ProseMirror li[data-item-type="task"]::before {
      content: "";
      position: absolute;
      left: -20px;
      top: 0.28em;
      width: 14px;
      height: 14px;
      box-sizing: border-box;
      border: 1.5px solid var(--text-light);
      border-radius: 4px;
      cursor: pointer;
    }
    .milkdown-editor .ProseMirror li[data-item-type="task"][data-checked="true"]::before {
      content: "✓";
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      font-size: 11px;
      line-height: 12px;
      font-weight: 700;
      text-align: center;
    }
    .milkdown-editor .ProseMirror li[data-item-type="task"][data-checked="true"] > p:first-of-type {
      text-decoration: line-through;
      color: var(--text-light);
    }
    .milkdown-editor .ProseMirror p { margin: 0.2em 0; }
    .milkdown-editor .ProseMirror strong { font-weight: 700; }
    .milkdown-editor .ProseMirror em { font-style: italic; }
    .milkdown-editor .ProseMirror del { text-decoration: line-through; opacity: 0.6; }
    .milkdown-editor .ProseMirror a { color: var(--accent); text-decoration: underline; }
    .milkdown-editor .ProseMirror .wikilink-node { text-decoration: none; }
    /* Twemoji inline sizing (from @milkdown/plugin-emoji) */
    .milkdown-editor .ProseMirror img.emoji,
    .note-rendered img.emoji { height: 1.2em; width: 1.2em; margin: 0 .05em 0 .1em; vertical-align: -0.2em; display: inline-block; border-radius: 0; }
    /* Dark mode */
    [data-theme="dark"] .milkdown-editor .ProseMirror { color: var(--text-primary); }
    [data-theme="dark"] .milkdown-editor .ProseMirror code,
    [data-theme="dark"] .milkdown-editor .ProseMirror pre { background: rgba(255,255,255,0.08); }
    [data-theme="dark"] .milkdown-editor .ProseMirror th { background: rgba(255,255,255,0.08); }
    /* Dark mode — wikilink editor node */
    [data-theme="dark"] .wikilink-node {
      background: color-mix(in srgb, var(--accent) 18%, transparent);
    }
    [data-theme="dark"] .wikilink-node:hover {
      background: color-mix(in srgb, var(--accent) 28%, transparent);
    }
    [data-theme="dark"] .tasklink-node {
      background: rgba(254,249,195,0.12);
      border-color: rgba(253,230,138,0.3);
      color: #fde68a;
    }
    [data-theme="dark"] .tasklink-node:hover { opacity: 0.75; }
    [data-theme="dark"] .tasklink-node-fallback {
      background: rgba(241,245,249,0.08);
      border-color: rgba(203,213,225,0.2);
      color: #94a3b8;
    }
    /* ── Slash command menu ──────────────────────────────────────── */
    .milkdown-slash-menu {
      position: absolute; z-index: 11000; top: 0; left: 0;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      min-width: 200px; max-height: 320px; overflow-y: auto;
      padding: 6px 0; display: none;
    }
    .milkdown-slash-menu[data-show="true"] { display: block; }
    .milkdown-slash-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px; cursor: pointer; font-size: 13px;
      color: var(--text-primary); transition: background 0.1s;
    }
    .milkdown-slash-item:hover,
    .milkdown-slash-item[aria-selected="true"] { background: var(--bg-primary); }
    .milkdown-slash-icon {
      font-size: 15px; font-weight: 700; width: 26px; text-align: center;
      flex-shrink: 0; color: var(--text-light);
    }
    /* ── Selection tooltip ───────────────────────────────────────── */
    .milkdown-tooltip {
      position: absolute; z-index: 11000; top: 0; left: 0;
      display: none; align-items: center; gap: 2px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.14);
      padding: 4px 6px;
    }
    .milkdown-tooltip[data-show="true"] { display: flex; }
    .milkdown-tooltip-btn {
      display: flex; align-items: center; justify-content: center;
      width: 30px; height: 28px; border: none; border-radius: 5px;
      background: none; cursor: pointer; font-size: 13px;
      color: var(--text-primary); transition: background 0.1s;
    }
    .milkdown-tooltip-btn:hover { background: var(--bg-primary); }
    /* Dark mode */
    [data-theme="dark"] .milkdown-slash-menu,
    [data-theme="dark"] .milkdown-tooltip {
      background: #1e1e2e; border-color: rgba(255,255,255,0.08);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    [data-theme="dark"] .milkdown-slash-item:hover,
    [data-theme="dark"] .milkdown-slash-item[aria-selected="true"],
    [data-theme="dark"] .milkdown-tooltip-btn:hover { background: rgba(255,255,255,0.06); }
    .highlight-mark {
      background: #fef08a;
      border-radius: 2px;
      padding: 0 2px;
      color: inherit;
    }
    [data-theme="dark"] .highlight-mark {
      background: rgba(254,240,138,0.28);
      color: var(--text-primary);
    }
    /* Dark mode — wikilink read view */
    [data-theme="dark"] .wikilink,
    [data-theme="dark"] .note-rendered .wikilink {
      border-bottom-color: var(--accent);
    }
    [data-theme="dark"] .wikilink:hover,
    [data-theme="dark"] .note-rendered .wikilink:hover {
      opacity: 0.8;
    }
    /* Dark mode — wikilink-broken (unresolved) */
    [data-theme="dark"] .wikilink-broken,
    [data-theme="dark"] .note-rendered .wikilink-broken {
      color: #fbbf24;
      background: rgba(251,191,36,0.12);
      border-bottom-color: #f59e0b;
    }
    [data-theme="dark"] .wikilink-broken:hover,
    [data-theme="dark"] .note-rendered .wikilink-broken:hover {
      background: rgba(251,191,36,0.22);
    }
    /* Math block (display) */
    .math-block {
      display: block;
      overflow-x: auto;
      padding: 0.75em 1em;
      margin: 0.75em 0;
      background: color-mix(in srgb, var(--bg-card) 60%, transparent);
      border-radius: 6px;
      border-left: 3px solid var(--accent);
      text-align: center;
    }
    /* Math inline */
    .math-inline .katex { font-size: 1em; }
    /* KaTeX error fallback */
    .math-error {
      color: #ef4444;
      font-family: monospace;
      font-size: 0.85em;
      background: rgba(239,68,68,0.08);
      border-radius: 4px;
      padding: 0 4px;
    }
    [data-theme="dark"] .math-block {
      background: rgba(255,255,255,0.05);
    }
    /* Print: render math as-is, no border */
    #note-print-area .math-block { border-left: none; background: none; text-align: left; }
    /* Math block in Milkdown editor: clickable to edit */
    .milkdown-editor div[data-type="math_block"] { cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: background 0.15s, outline 0.15s; }
    .milkdown-editor div[data-type="math_block"]:hover { background: rgba(99,102,241,0.06); outline: 1px dashed var(--accent); }
    [data-theme="dark"] .milkdown-editor div[data-type="math_block"]:hover { background: rgba(99,102,241,0.12); }
    .milkdown-editor span[data-type="math_inline"] { cursor: pointer; padding: 0 2px; border-radius: 3px; }
    .milkdown-editor span[data-type="math_inline"]:hover { background: rgba(99,102,241,0.1); outline: 1px dashed var(--accent); }
    /* React-controlled edit overlay */
    .mk-math-popover { position: absolute; z-index: 100; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 10px; }
    .mk-math-popover-ta { width: 100%; padding: 8px 10px; font-family: monospace; font-size: 13px; resize: vertical; min-height: 60px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); box-sizing: border-box; outline: none; }
    .mk-math-popover-ta:focus { border-color: var(--accent); }
    .mk-math-popover-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; }
    .mk-math-popover-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
    .mk-math-popover-actions button { padding: 4px 12px; font-size: 12px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-weight: 500; }
    .mk-math-popover-actions button.primary { background: var(--accent); color: white; border-color: var(--accent); }
    /* Driver.js tour overrides — match Alurik theme */
    .driver-popover { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important; max-width: 320px !important; }
    .driver-popover-title { color: var(--accent) !important; font-size: 15px !important; font-weight: 700 !important; font-family: inherit !important; }
    .driver-popover-description { color: var(--text-primary) !important; font-size: 13px !important; line-height: 1.6 !important; font-family: inherit !important; }
    .driver-popover-progress-text { color: var(--text-light) !important; font-size: 11px !important; }
    .driver-popover-navigation-btns button { background: var(--accent) !important; color: #1a2a00 !important; border: none !important; border-radius: 7px !important; font-weight: 700 !important; font-size: 12px !important; padding: 6px 14px !important; cursor: pointer !important; font-family: inherit !important; text-shadow: none !important; }
    .driver-popover-navigation-btns button.driver-popover-prev-btn { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; }
    .driver-popover-close-btn { color: var(--text-light) !important; font-size: 18px !important; }
    .driver-popover-footer { border-top: 1px solid var(--border) !important; margin-top: 10px !important; padding-top: 10px !important; }
    [data-theme="dark"] .driver-popover { box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }
    .tour-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; transition: all 0.15s; }
    .tour-btn:hover { background: var(--accent); color: #1a2a00; border-color: var(--accent); }
    /* Voice dictation mic button */
    @keyframes micPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
      50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
    }
    .note-mic-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      padding: 0 9px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.12s;
      font-family: inherit;
      flex-shrink: 0;
    }
    .note-mic-btn:hover {
      background: var(--bg-primary);
      border-color: var(--accent);
      color: var(--text-primary);
    }
    .note-mic-btn.listening {
      color: #ef4444;
      border-color: #ef4444;
      animation: micPulse 1.5s ease-in-out infinite;
    }
    .note-mic-btn.paused {
      color: #eab308;
      border-color: #eab308;
    }

/* Mindmap outline topic markdown */
.topic-md p { margin: 0; }
.topic-md ul, .topic-md ol { margin: 2px 0 2px 18px; padding: 0; }
.topic-md li { margin: 1px 0; }
.topic-md table { border-collapse: collapse; margin: 3px 0; font-size: 0.92em; }
.topic-md th, .topic-md td { border: 1px solid var(--border); padding: 2px 6px; }
.topic-md hr { border: none; border-top: 1px solid var(--border); margin: 5px 0; }
.topic-md code { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 0.9em; }
.topic-md a { color: var(--accent); }
.topic-md h1, .topic-md h2, .topic-md h3, .topic-md h4, .topic-md h5, .topic-md h6 { margin: 2px 0; font-weight: 700; }
.topic-md h1 { font-size: 1.3em; }
.topic-md h2 { font-size: 1.15em; }
.topic-md h3 { font-size: 1.05em; }

/* Mindmap, Draw, Notes & Chat Workspaces Full-Height Containers */
.mindmap-container,
.draw-container,
.notes-layout,
.chat-layout {
  display: flex;
  height: calc(100vh - 84px);
  min-height: 480px;
  margin-top: 6px;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mindmap-sidebar,
.draw-sidebar,
.notes-left,
.chat-list-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .mindmap-container,
  .draw-container {
    height: calc(100vh - 64px);
    margin: -8px -16px 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Mindmap Multi-Tab Bar */
.mindmap-tab-bar {
  display: flex;
  align-items: center;
  background-color: var(--bg-secondary, #f3f4f6);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  overflow-x: auto;
  flex-shrink: 0;
  height: 38px;
  padding: 0 4px;
  gap: 2px;
}
.dark .mindmap-tab-bar {
  background-color: var(--bg-secondary, #1f2937);
  border-bottom-color: var(--border-color, #374151);
}
.mindmap-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 30px;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary, #4b5563);
  cursor: pointer;
  user-select: none;
  max-width: 180px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .mindmap-tab-item {
  color: var(--text-secondary, #9ca3af);
}
.mindmap-tab-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-primary, #111827);
}
.dark .mindmap-tab-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f9fafb);
}
.mindmap-tab-item.active {
  background-color: var(--bg-primary, #ffffff);
  color: var(--accent-color, #84cc16);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-color, #84cc16);
}
.dark .mindmap-tab-item.active {
  background-color: var(--bg-primary, #111827);
  color: var(--accent-color, #a3e635);
  border-bottom-color: var(--accent-color, #a3e635);
}
.mindmap-tab-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mindmap-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}
.mindmap-tab-close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.dark .mindmap-tab-close:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.mindmap-tab-contents {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.mindmap-tab-view-instance {
  flex: 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Draw Multi-Tab Bar & Workspaces */
.draw-tab-bar {
  display: flex;
  align-items: center;
  background-color: var(--bg-secondary, #f3f4f6);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  overflow-x: auto;
  flex-shrink: 0;
  height: 38px;
  padding: 0 4px;
  gap: 2px;
}
.dark .draw-tab-bar {
  background-color: var(--bg-secondary, #1f2937);
  border-bottom-color: var(--border-color, #374151);
}
.draw-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 30px;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary, #4b5563);
  cursor: pointer;
  user-select: none;
  max-width: 180px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .draw-tab-item {
  color: var(--text-secondary, #9ca3af);
}
.draw-tab-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-primary, #111827);
}
.dark .draw-tab-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f9fafb);
}
.draw-tab-item.active {
  background-color: var(--bg-primary, #ffffff);
  color: var(--accent-color, #8b5cf6);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-color, #8b5cf6);
}
.dark .draw-tab-item.active {
  background-color: var(--bg-primary, #111827);
  color: var(--accent-color, #a78bfa);
  border-bottom-color: var(--accent-color, #a78bfa);
}
.draw-tab-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}
.draw-tab-close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.dark .draw-tab-close:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.draw-tab-contents {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.draw-tab-view-instance {
  flex: 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Note Inline Draw Card Embed */
.note-draw-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  overflow: hidden;
  margin: 12px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, width 0.2s ease;
  box-sizing: border-box;
}
.editor-draw-card {
  display: block;
  user-select: none;
}
.editor-draw-card .note-draw-header {
  cursor: default;
}
.note-draw-card[data-size="S"] {
  width: 50%;
  max-width: 50%;
  margin: 12px auto;
}
.note-draw-card[data-size="M"] {
  width: 75%;
  max-width: 75%;
  margin: 12px auto;
}
.note-draw-card[data-size="L"],
.note-draw-card[data-size="FULL"] {
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
}
.note-draw-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.note-draw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 6px;
}
.note-draw-size-pills {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-primary);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.note-draw-size-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s ease;
}
.note-draw-size-btn:hover {
  background: var(--bg-hover, rgba(0,0,0,0.06));
  color: var(--text-primary);
}
.note-draw-size-btn.active {
  background: var(--accent);
  color: #fff;
}
.note-draw-preview-container {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  max-height: 380px;
  overflow: auto;
  resize: vertical;
  background: var(--bg-primary);
  cursor: pointer;
  box-sizing: border-box;
}
.note-draw-preview-container svg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
}


/* ── Floating ToC ala Medium — tombol melayang (mobile-first: FAB di atas FAB Buat Baru) ── */
.floating-toc-anchor {
  position: fixed;
  right: 16px;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
}
.floating-toc-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.floating-toc-trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.06);
}
.floating-toc-trigger.active {
  background: rgba(168,197,0,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.floating-toc-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 250px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 10px 12px;
  backdrop-filter: blur(12px);
  scrollbar-width: none;
  animation: toc-pop-in 0.15s ease;
}
.floating-toc-popover::-webkit-scrollbar { display: none; }
@keyframes toc-pop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.note-toc-item {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
  transition: background 0.1s, color 0.1s;
}
.note-toc-item:hover { background: var(--bg-primary); color: var(--text-primary); }
.note-toc-item.active {
  background: rgba(168,197,0,0.12);
  color: var(--accent);
  font-weight: 700;
}
@media (min-width: 769px) {
  .floating-toc-anchor {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .floating-toc-trigger {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
  .floating-toc-popover {
    right: calc(100% + 8px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}