:root{--app-padding-top: 24px;--app-padding-bottom: 110px;--mobile-shell-bar-height: 0px;--surface: #f6f4f1;--surface-alt: #fff8ee;--surface-card: #ffffff;--surface-gradient-end: #efe9e2;--surface-glass: rgba(246, 244, 241, .85);--text-primary: #1c1c1c;--text-muted: #6b6b6b;--text-inverse: #ffffff;--accent: #1f6f78;--accent-soft: #f0c987;--accent-soft-text: #1c1c1c;--nav-active-bg: #1c1c1c;--nav-active-text: #ffffff;--border: #e2ded8;--sync-connected: #2e7d32;--sync-offline: #c77700;--sync-busy: #2b6de0;--note-body-font-size: .9rem;--chip-bg: #efe9e2;--chip-hover: #e7dfd5;--inline-code-bg: #f5f1ea;--input-bg: #ffffff;--card-fade-start: rgba(255, 255, 255, 0);--shadow: 0 10px 30px rgba(0, 0, 0, .08);--fab-shadow: 0 14px 28px rgba(31, 111, 120, .3);--ring: 0 0 0 2px rgba(31, 111, 120, .22);font-family:Cascadia Mono,Cascadia Code,SFMono-Regular,Consolas,monospace}:root[data-theme=dark]{--surface: #161514;--surface-alt: #1d1b19;--surface-card: #24211e;--surface-gradient-end: #2b241f;--surface-glass: rgba(22, 21, 20, .82);--text-primary: #f3eee7;--text-muted: #b7ada1;--text-inverse: #fffdf8;--accent: #4aa0ab;--accent-soft: #c8a163;--accent-soft-text: #1a140b;--nav-active-bg: #c8a163;--nav-active-text: #1a140b;--border: #3b352f;--sync-connected: #70d27e;--sync-offline: #f0ab3d;--sync-busy: #6ea4ff;--note-body-font-size: .9rem;--chip-bg: #302a25;--chip-hover: #3a332d;--inline-code-bg: #1c1917;--input-bg: #1b1815;--card-fade-start: rgba(36, 33, 30, 0);--shadow: 0 16px 36px rgba(0, 0, 0, .35);--fab-shadow: 0 14px 28px rgba(0, 0, 0, .4);--ring: 0 0 0 2px rgba(74, 160, 171, .3)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,var(--surface-alt),var(--surface) 55%,var(--surface-gradient-end) 100%);color:var(--text-primary);min-height:100vh}body.shell-drawer-open{overflow:hidden}#app{max-width:1220px;margin:0 auto;padding:24px 20px 110px}.app-shell{display:grid;grid-template-columns:minmax(220px,250px) minmax(0,1fr);gap:24px;align-items:start}.brand{font-weight:700;font-size:1.2rem}.shell-mobile-bar{display:none}.shell-main{min-width:0}.side-nav{position:sticky;top:16px;display:grid;align-content:start;gap:12px;padding:18px 16px;border:1px solid var(--border);border-radius:18px;background:var(--surface-glass);backdrop-filter:blur(6px);box-shadow:var(--shadow)}.side-nav-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:6px}.side-nav-group{display:grid;gap:8px}.side-nav-group-secondary{margin-top:4px}.side-nav-section-label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:0 10px}.nav-link{width:100%;text-align:left;justify-content:flex-start;padding:12px 14px;border-radius:14px;background:transparent;color:var(--text-primary);border:1px solid transparent;display:inline-flex;align-items:center;min-height:48px}.nav-link:hover{background:var(--chip-bg)}.nav-link.active,.nav-link[aria-current=page]{background:var(--nav-active-bg);color:var(--nav-active-text)}.shell-drawer-close,.shell-backdrop{display:none}.sync-status-bar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--sync-busy);z-index:100}.sync-status-bar[data-sync-state=connected]{background:var(--sync-connected)}.sync-status-bar[data-sync-state=offline]{background:var(--sync-offline)}button{border:none;background:var(--accent);color:var(--text-inverse);padding:10px 16px;border-radius:999px;cursor:pointer;font-size:.95rem}button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}button.active{background:var(--text-primary)}button:disabled{opacity:.6;cursor:not-allowed}.login{max-width:420px;margin:120px auto 0;background:var(--surface-card);padding:32px;border-radius:20px;box-shadow:var(--shadow);animation:fade-slide-in .24s ease}.login h1{margin-top:0}.login form{display:grid;gap:16px}label{display:grid;gap:8px;font-size:.95rem}input,textarea{padding:12px 14px;border-radius:12px;border:1px solid var(--border);font-size:1rem;background:var(--input-bg);color:var(--text-primary)}.editor #noteBody{font-size:var(--note-body-font-size)}input::placeholder,textarea::placeholder{color:var(--text-muted)}textarea{resize:vertical}.hint{color:var(--text-muted);font-size:.85rem}.chip-bar{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0 16px}.date-chip-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 0 12px}.filters-sticky{position:sticky;top:10px;z-index:15;margin-bottom:14px;background:var(--surface-glass);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:14px;padding:12px}.filters-summary-bar,.filters-panel[hidden]{display:none}.filters-toggle{width:40px;height:40px;min-width:40px;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1}.filters-summary-meta{min-width:0}.filters-summary-empty{min-height:40px;display:flex;align-items:center;color:var(--text-muted);font-size:.9rem}.filters-active-summary{min-height:40px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.summary-chip{pointer-events:none}.filters-sticky .chip-bar{padding:0 0 10px}.filters-sticky .date-chip-bar{padding:0}.tag-filter-search{display:grid;gap:8px;margin-bottom:12px;position:relative}.tag-filter-search-label{font-size:.85rem;color:var(--text-muted)}.tag-filter-input{width:100%}.tag-filter-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;display:grid;gap:4px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface-card);box-shadow:var(--shadow);z-index:20}.tag-filter-suggestion{width:100%;border-radius:10px;background:transparent;color:var(--text-primary);text-align:left;padding:10px 12px}.tag-filter-suggestion:hover,.tag-filter-suggestion.active{background:var(--chip-bg)}.date-range-row{display:flex;gap:8px;align-items:center;width:100%}.date-range-row input[type=date]{max-width:150px}.chip{background:var(--chip-bg);color:var(--text-primary);padding:6px 12px;border-radius:999px;font-size:.85rem;border:none;transition:background-color .15s ease,transform .12s ease}.chip:hover{background:var(--chip-hover)}.chip:active{transform:translateY(1px)}.chip.selected{background:var(--accent-soft);color:var(--accent-soft-text)}.chip span{color:var(--text-muted);margin-left:4px}.toolbar{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:45}#newNote{width:64px;height:64px;border-radius:50%;padding:0;font-size:2rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--fab-shadow)}.notes{display:grid;gap:16px}.card{background:var(--surface-card);border-radius:18px;padding:16px;box-shadow:var(--shadow);display:grid;gap:10px;animation:fade-slide-in .18s ease both;cursor:pointer;transition:box-shadow .14s ease,transform .12s ease}.card:hover{transform:translateY(-2px)}.card:focus-visible{outline:none;box-shadow:var(--ring),var(--shadow)}.card header,.read header{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);align-items:flex-start;gap:12px}.card-time{color:var(--text-muted);font-size:.78rem;letter-spacing:.01em}.editor .actions,.read .actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px;padding-top:8px;border-top:1px solid var(--border)}.card .tags,.read .tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;justify-self:end;max-width:100%}.card .body{max-height:28rem;overflow:hidden;position:relative}.card.has-overflow .body:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4rem;background:linear-gradient(to bottom,var(--card-fade-start),var(--surface-card))}.markdown-body{line-height:1.7;font-size:var(--note-body-font-size);overflow-wrap:anywhere;word-break:break-word;min-width:0}.markdown-body h1,.markdown-body h2,.markdown-body h3{line-height:1.28}.markdown-body :is(p,ul,ol,blockquote,pre,table){margin:0 0 .85em}.markdown-body :is(img,video,iframe,table,pre){max-width:100%;min-width:0}.markdown-body code{background:var(--inline-code-bg);border-radius:6px;padding:.1em .35em;overflow-wrap:anywhere}.markdown-body pre{width:100%;box-sizing:border-box;background:var(--inline-code-bg);border-radius:10px;padding:10px;white-space:pre-wrap;word-break:break-word;overflow-x:hidden}.markdown-body pre code{display:block;max-width:100%;white-space:pre-wrap;word-break:break-word;background:transparent;border-radius:0;padding:0}.markdown-body blockquote{border-left:3px solid var(--accent-soft);margin-left:0;padding-left:10px;color:var(--text-muted)}.markdown-body>:last-child{margin-bottom:0}.editor{display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:16px;background:var(--surface-card);padding:20px;border-radius:18px;box-shadow:var(--shadow);animation:fade-slide-in .2s ease;min-height:0;width:100%;flex:1}.editor-screen{min-height:calc(100dvh - var(--app-padding-top) - var(--app-padding-bottom));align-items:start}.editor-screen .shell-main{min-height:calc(100dvh - var(--app-padding-top) - var(--app-padding-bottom));display:flex;align-self:stretch}.editor>label:first-child{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.editor #noteBody{min-height:0;height:100%}.tag-editor{display:grid;gap:10px}.tag-editor #tagList{display:flex;flex-wrap:wrap;gap:8px}.read{background:var(--surface-card);padding:24px;border-radius:20px;box-shadow:var(--shadow);display:grid;gap:16px;width:100%;animation:fade-slide-in .2s ease;overflow:hidden;min-width:0;cursor:pointer;transition:box-shadow .14s ease}.read,.editor,.tag-refs,.filters-sticky,.notes{max-width:960px}.read:focus-visible{outline:none;box-shadow:var(--ring),var(--shadow)}.read .body{min-width:0}.tag-refs{background:var(--surface-card);padding:20px;border-radius:18px;box-shadow:var(--shadow);animation:fade-slide-in .2s ease}.ref-form{display:flex;gap:10px;margin-bottom:16px}.ref-form input{flex:1}table{width:100%;border-collapse:collapse}thead th{text-align:left;color:var(--text-muted);font-weight:600;font-size:.85rem}td,th{padding:10px 6px;border-bottom:1px solid var(--border)}.empty{color:var(--text-muted);font-size:.9rem}.notes .empty{margin:4px 0}.clear-filters{border:1px dashed var(--accent)}.loader{text-align:center;padding:60px 0;color:var(--text-muted)}.dirty-indicator{margin-left:auto;color:var(--text-muted);font-size:.84rem;opacity:0;transform:translateY(2px);transition:opacity .16s ease,transform .16s ease}.dirty-indicator.visible{opacity:1;transform:translateY(0)}button,input,textarea{transition:box-shadow .14s ease,border-color .14s ease,transform .1s ease}button:hover{transform:translateY(-1px)}button:active{transform:translateY(1px)}input:focus,textarea:focus,button:focus-visible{outline:none;box-shadow:var(--ring)}@keyframes fade-slide-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 720px){:root{--app-padding-top: 16px;--app-padding-bottom: 100px;--mobile-shell-bar-height: 60px}#app{padding:16px 14px 100px}.app-shell{grid-template-columns:minmax(0,1fr);gap:16px}.shell-mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:10px;z-index:30;background:var(--surface-glass);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:14px;padding:10px 12px}.shell-mobile-bar .brand{font-size:1rem}.shell-drawer-toggle{min-height:42px;padding:8px 14px}.shell-drawer-close{display:inline-flex}.shell-backdrop{position:fixed;inset:0;background:#00000059;z-index:55}.shell-backdrop[hidden]{display:none}.side-nav{position:fixed;top:0;left:0;bottom:0;width:min(82vw,320px);max-width:320px;border-radius:0 20px 20px 0;border-left:none;transform:translate(calc(-100% - 12px));transition:transform .18s ease;z-index:60;padding-top:20px;overflow-y:auto;background:var(--surface-card)}.side-nav.open{transform:translate(0)}.shell-main>*{max-width:100%}.filters-summary-bar{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}.filters-summary-meta{display:grid;gap:8px;flex:1}.editor-screen{min-height:calc(100dvh - var(--app-padding-top) - var(--app-padding-bottom))}.editor-screen .shell-main{min-height:calc(100dvh - var(--app-padding-top) - var(--app-padding-bottom) - var(--mobile-shell-bar-height) - 16px)}.filters-sticky{top:74px;padding:10px}.toolbar{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}#newNote{width:58px;height:58px;font-size:1.8rem}.ref-form{flex-direction:column}.date-range-row{flex-direction:column;align-items:stretch}.date-range-row input[type=date]{max-width:100%}}