@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--bg-app: #090b10;--bg-surface: #10131b;--bg-surface-elevated: #161b26;--bg-surface-hover: #1c2230;--bg-header: rgba(9, 11, 16, .85);--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .14);--border-focus: #38bdf8;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent: #38bdf8;--accent-hover: #0284c7;--accent-subtle: rgba(56, 189, 248, .12);--danger: #ef4444;--danger-subtle: rgba(239, 68, 68, .12);--warning: #f59e0b;--warning-subtle: rgba(245, 158, 11, .12);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px;--card-bg-default: #10131b;--card-border-default: rgba(255, 255, 255, .08);--card-bg-slate: #131720;--card-border-slate: rgba(148, 163, 184, .18);--card-bg-blue: #0f1728;--card-border-blue: rgba(56, 189, 248, .22);--card-bg-emerald: #0b1a17;--card-border-emerald: rgba(52, 211, 153, .22);--card-bg-amber: #1a160d;--card-border-amber: rgba(245, 158, 11, .22);--card-bg-purple: #161222;--card-border-purple: rgba(168, 85, 247, .22);--card-bg-rose: #1c1117;--card-border-rose: rgba(244, 63, 94, .22)}[data-theme=light]{--bg-app: #f8fafc;--bg-surface: #ffffff;--bg-surface-elevated: #f1f5f9;--bg-surface-hover: #e2e8f0;--bg-header: rgba(248, 250, 252, .9);--border-subtle: #e2e8f0;--border-medium: #cbd5e1;--border-focus: #0284c7;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--accent: #0284c7;--accent-hover: #0369a1;--accent-subtle: rgba(2, 132, 199, .08);--danger: #dc2626;--danger-subtle: rgba(220, 38, 38, .08);--warning: #d97706;--warning-subtle: rgba(217, 119, 6, .08);--card-bg-default: #ffffff;--card-border-default: #e2e8f0;--card-bg-slate: #f8fafc;--card-border-slate: #cbd5e1;--card-bg-blue: #f0f9ff;--card-border-blue: #bae6fd;--card-bg-emerald: #f0fdf4;--card-border-emerald: #bbf7d0;--card-bg-amber: #fffbeb;--card-border-amber: #fde68a;--card-bg-purple: #faf5ff;--card-border-purple: #e9d5ff;--card-bg-rose: #fff1f2;--card-border-rose: #fecdd3}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-header{position:sticky;top:0;z-index:100;background-color:var(--bg-header);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);height:52px;display:flex;align-items:center}.header-container{width:100%;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.brand{display:flex;align-items:center;gap:.75rem;-webkit-user-select:none;user-select:none}.brand-logo{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--bg-surface-elevated);border:1px solid var(--border-medium);display:flex;align-items:center;justify-content:center;color:var(--accent)}.brand-text{display:flex;align-items:baseline;gap:.5rem}.brand-title{font-weight:700;font-size:.95rem;letter-spacing:-.02em;color:var(--text-primary)}.brand-domain{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}.search-wrapper{flex:1;max-width:480px;position:relative;display:flex;align-items:center}.search-input{width:100%;height:32px;padding:0 2.5rem 0 2rem;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background-color:var(--bg-surface);color:var(--text-primary);font-family:var(--font-sans);font-size:.85rem;transition:all .15s ease;outline:none}.search-input:focus{border-color:var(--border-focus);background-color:var(--bg-surface-elevated)}.search-icon{position:absolute;left:.65rem;color:var(--text-muted);pointer-events:none;display:flex}.search-shortcut{position:absolute;right:.5rem;font-family:var(--font-mono);font-size:.68rem;padding:.1rem .35rem;border-radius:var(--radius-xs);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-muted);pointer-events:none}.header-actions{display:flex;align-items:center;gap:.5rem}.live-indicator{display:flex;align-items:center;gap:.4rem;padding:.2rem .55rem;border-radius:var(--radius-full);background:#10b98114;border:1px solid rgba(16,185,129,.2);-webkit-user-select:none;user-select:none}.live-dot{width:6px;height:6px;border-radius:50%;background-color:#10b981}.live-text{font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:#10b981}.header-divider{width:1px;height:18px;background-color:var(--border-subtle);margin:0 .25rem}.btn-icon{background:transparent;border:1px solid transparent;color:var(--text-secondary);width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.btn-icon:hover{background-color:var(--bg-surface-elevated);border-color:var(--border-subtle);color:var(--text-primary)}.main-content{width:100%;padding:1.5rem 2rem 4rem}.creator-wrapper{max-width:680px;margin:0 auto 1.75rem}.creator-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all .2s ease;overflow:hidden}.creator-card:focus-within,.creator-card.expanded{border-color:var(--border-medium);box-shadow:0 4px 20px #0000001f}.creator-collapsed{height:42px;padding:0 .85rem;display:flex;align-items:center;justify-content:space-between;cursor:text;gap:.75rem}.creator-collapsed-placeholder{color:var(--text-muted);font-size:.88rem;flex:1}.creator-quick-actions{display:flex;align-items:center;gap:.25rem}.btn-quick-action{background:transparent;border:none;color:var(--text-muted);width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.btn-quick-action:hover{background-color:var(--bg-surface-elevated);color:var(--text-primary)}.creator-expanded{display:none;flex-direction:column;padding:.85rem 1rem .75rem}.creator-card.expanded .creator-collapsed{display:none}.creator-card.expanded .creator-expanded{display:flex}.creator-header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.creator-input-title{width:100%;border:none;background:transparent;color:var(--text-primary);font-family:var(--font-sans);font-size:.95rem;font-weight:600;outline:none}.creator-input-title::placeholder{color:var(--text-muted)}.btn-pin{background:transparent;border:none;color:var(--text-muted);width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.btn-pin:hover{background-color:var(--bg-surface-elevated);color:var(--text-primary)}.btn-pin.pinned{color:var(--accent);transform:rotate(45deg)}.creator-input-content{width:100%;min-height:72px;max-height:320px;border:none;background:transparent;color:var(--text-primary);font-family:var(--font-sans);font-size:.9rem;line-height:1.6;resize:vertical;outline:none;margin-bottom:.65rem}.creator-input-content::placeholder{color:var(--text-muted)}.creator-media-preview{position:relative;margin-bottom:.75rem;border-radius:var(--radius-sm);overflow:hidden;max-height:240px;background:var(--bg-app);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center}.creator-media-preview img{max-width:100%;max-height:240px;object-fit:contain;display:block}.btn-remove-media{position:absolute;top:8px;right:8px;background:#000000b3;color:#fff;border:none;border-radius:var(--radius-xs);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}.btn-remove-media:hover{background:var(--danger)}.creator-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding-top:.65rem;border-top:1px solid var(--border-subtle)}.creator-tools-left{display:flex;align-items:center;gap:.35rem}.color-picker-popover{position:relative}.color-dropdown{position:absolute;bottom:120%;left:0;background:var(--bg-surface-elevated);border:1px solid var(--border-medium);border-radius:var(--radius-sm);padding:.4rem;display:none;grid-template-columns:repeat(7,1fr);gap:.35rem;box-shadow:0 8px 24px #00000040;z-index:100}.color-dropdown.show{display:grid}.color-swatch{width:20px;height:20px;border-radius:var(--radius-xs);border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:transform .1s,border-color .1s}.color-swatch:hover,.color-swatch.active{transform:scale(1.15);border-color:#fff}.expiry-select-wrapper{display:flex;align-items:center;gap:.35rem;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);padding:.2rem .5rem;color:var(--text-secondary)}.expiry-select{background:transparent;border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:.75rem;outline:none;cursor:pointer}.expiry-select option{background:var(--bg-surface-elevated);color:var(--text-primary)}.creator-tools-right{display:flex;align-items:center;gap:.4rem;margin-left:auto}.btn-secondary{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary);padding:.35rem .75rem;border-radius:var(--radius-xs);font-family:var(--font-sans);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.btn-secondary:hover{background:var(--bg-surface-elevated);color:var(--text-primary)}.btn-primary{background:var(--text-primary);border:1px solid var(--text-primary);color:var(--bg-app);padding:.35rem .85rem;border-radius:var(--radius-xs);font-family:var(--font-sans);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:.35rem}.btn-primary:hover{opacity:.9}.controls-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle)}.filter-group{display:flex;align-items:center;gap:.25rem}.filter-tab{background:transparent;border:none;color:var(--text-muted);font-family:var(--font-sans);font-size:.82rem;font-weight:500;padding:.3rem .65rem;border-radius:var(--radius-xs);cursor:pointer;transition:all .15s ease}.filter-tab:hover{color:var(--text-primary);background-color:var(--bg-surface-elevated)}.filter-tab.active{color:var(--text-primary);background-color:var(--bg-surface-elevated);font-weight:600}.notes-counter{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}.notes-section{margin-bottom:2rem}.section-header{display:flex;align-items:center;gap:.45rem;color:var(--text-muted);margin-bottom:.85rem}.section-title{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.08em}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;align-items:start}.note-card{border-radius:var(--radius-sm);background-color:var(--card-bg-default);border:1px solid var(--card-border-default);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .15s ease,transform .15s ease}.note-card:hover{border-color:var(--border-medium);transform:translateY(-1px)}.note-card[data-color=default]{background-color:var(--card-bg-default);border-color:var(--card-border-default)}.note-card[data-color=slate]{background-color:var(--card-bg-slate);border-color:var(--card-border-slate)}.note-card[data-color=blue]{background-color:var(--card-bg-blue);border-color:var(--card-border-blue)}.note-card[data-color=emerald]{background-color:var(--card-bg-emerald);border-color:var(--card-border-emerald)}.note-card[data-color=amber]{background-color:var(--card-bg-amber);border-color:var(--card-border-amber)}.note-card[data-color=purple]{background-color:var(--card-bg-purple);border-color:var(--card-border-purple)}.note-card[data-color=rose],.note-card[data-color=red]{background-color:var(--card-bg-rose);border-color:var(--card-border-rose)}.note-card[data-color=orange],.note-card[data-color=yellow]{background-color:var(--card-bg-amber);border-color:var(--card-border-amber)}.note-card[data-color=green],.note-card[data-color=teal]{background-color:var(--card-bg-emerald);border-color:var(--card-border-emerald)}.note-card[data-color=pink]{background-color:var(--card-bg-rose);border-color:var(--card-border-rose)}.note-header{padding:.85rem .85rem .35rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.note-title{font-size:.92rem;font-weight:600;line-height:1.35;color:var(--text-primary);word-break:break-word}.note-pin-btn{background:transparent;border:none;color:var(--text-muted);width:24px;height:24px;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.5;transition:all .15s ease;flex-shrink:0}.note-card:hover .note-pin-btn,.note-pin-btn.pinned{opacity:1}.note-pin-btn.pinned{color:var(--accent);transform:rotate(45deg)}.note-pin-btn:hover{background:var(--bg-surface-elevated);color:var(--text-primary)}.note-media-wrap{width:100%;max-height:240px;overflow:hidden;cursor:pointer;position:relative;background:var(--bg-app);display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.note-media-wrap img{width:100%;height:auto;max-height:240px;object-fit:cover;display:block}.media-zoom-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .15s ease}.note-media-wrap:hover .media-zoom-overlay{opacity:1}.note-body{padding:.65rem .85rem;font-size:.88rem;line-height:1.55;color:var(--text-primary);word-break:break-word;white-space:pre-wrap;flex:1}.url-preview-box{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);text-decoration:none;color:var(--text-primary);margin-top:.4rem;transition:all .15s ease}.url-preview-box:hover{border-color:var(--border-focus)}.url-preview-icon{font-size:1rem;color:var(--accent);display:flex}.url-preview-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:.78rem}.note-footer{padding:.5rem .85rem;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:.5rem}.note-expiry-badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted)}.note-expiry-badge .expiry-indicator{width:5px;height:5px;border-radius:50%;background:var(--text-muted)}.note-expiry-badge.warning{color:var(--warning)}.note-expiry-badge.warning .expiry-indicator{background:var(--warning)}.note-expiry-badge.danger{color:var(--danger)}.note-expiry-badge.danger .expiry-indicator{background:var(--danger)}.note-actions{display:flex;align-items:center;gap:.2rem;opacity:.4;transition:opacity .15s ease}.note-card:hover .note-actions{opacity:1}.btn-card-action{background:transparent;border:none;color:var(--text-muted);width:26px;height:26px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.btn-card-action:hover{background:var(--bg-surface-elevated);color:var(--text-primary)}.btn-card-action.delete:hover{background:var(--danger-subtle);color:var(--danger)}.empty-state{text-align:center;padding:5rem 1.5rem;max-width:400px;margin:0 auto}.empty-state-icon{width:56px;height:56px;border-radius:var(--radius-sm);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;color:var(--text-muted)}.empty-state-title{font-size:1.05rem;font-weight:600;color:var(--text-primary);margin-bottom:.35rem}.empty-state-desc{font-size:.85rem;color:var(--text-muted);line-height:1.5}.empty-state-desc kbd{font-family:var(--font-mono);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);padding:.1rem .35rem;border-radius:var(--radius-xs);font-size:.75rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .15s ease}.modal-backdrop.active{opacity:1;pointer-events:auto}.canvas-modal{background:var(--bg-surface);border:1px solid var(--border-medium);border-radius:var(--radius-md);width:100%;max-width:800px;display:flex;flex-direction:column;overflow:hidden}.canvas-header{padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle)}.canvas-title{font-size:.92rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.canvas-body{position:relative;background:#090b10;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:1;min-height:380px}.drawing-canvas{background:#0f121a;cursor:crosshair;touch-action:none}.canvas-toolbar{padding:.65rem 1rem;background:var(--bg-surface-elevated);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:.75rem}.canvas-tools-group{display:flex;align-items:center;gap:.35rem}.canvas-color-swatch{width:18px;height:18px;border-radius:var(--radius-xs);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:transform .1s ease}.canvas-color-swatch.active{transform:scale(1.2);border-color:#fff}.stroke-select{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-primary);padding:.25rem .5rem;border-radius:var(--radius-xs);font-family:var(--font-sans);font-size:.75rem;outline:none}.image-viewer-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:2000;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .15s ease}.image-viewer-modal.active{opacity:1;pointer-events:auto}.viewer-header{padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff}.viewer-title{font-size:.88rem;font-weight:500;color:#94a3b8}.viewer-content{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem}.viewer-img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1)}.viewer-footer{padding:.85rem;display:flex;align-items:center;justify-content:center;gap:.75rem}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.4rem}.toast{background:var(--bg-surface-elevated);border:1px solid var(--border-medium);color:var(--text-primary);padding:.55rem .95rem;border-radius:var(--radius-sm);box-shadow:0 4px 12px #0003;font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:.45rem;animation:toast-in .2s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.header-container{padding:0 1rem}.main-content{padding:1rem 1rem 3rem}.search-shortcut{display:none}.notes-grid{grid-template-columns:1fr}}