:root{--surface: #f6f4f1;--surface-alt: #fff8ee;--surface-card: #ffffff;--text-primary: #1c1c1c;--text-muted: #6b6b6b;--accent: #1f6f78;--accent-soft: #f0c987;--border: #e2ded8;--chip-bg: #efe9e2;--chip-hover: #e7dfd5;--inline-code-bg: #f5f1ea;--shadow: 0 10px 30px rgba(0, 0, 0, .08);--ring: 0 0 0 2px rgba(31, 111, 120, .22);font-family:Cascadia Mono,Cascadia Code,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,var(--surface-alt),var(--surface) 55%,#efe9e2 100%);color:var(--text-primary);min-height:100vh}#app{max-width:960px;margin:0 auto;padding:32px 20px 60px}nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;position:relative;z-index:30;background:#f6f4f1d9;backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:14px;padding:10px 12px}nav .brand{font-weight:700;font-size:1.2rem}.nav-actions{position:relative}.menu-toggle{min-width:42px;min-height:42px;padding:6px 12px;font-size:1.3rem;line-height:1}.menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--surface-card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;gap:6px;z-index:40}.menu-panel.open{display:grid}.menu-item{width:100%;text-align:left;border-radius:10px;background:transparent;color:var(--text-primary);border:1px solid transparent}.menu-item:hover{background:var(--chip-bg)}.menu-item.active{background:var(--text-primary);color:#fff}button{border:none;background:var(--accent);color:#fff;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:#fff}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:#f6f4f1d9;backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:14px;padding:12px}.filters-sticky .chip-bar{padding:0 0 10px}.filters-sticky .date-chip-bar{padding:0}.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)}.chip span{color:var(--text-muted);margin-left:4px}.toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.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}.card header{display:flex;justify-content:space-between;align-items:center}.card-time{color:var(--text-muted);font-size:.78rem;letter-spacing:.01em}.card .actions,.read .actions{display:flex;gap:10px;padding-top:8px;border-top:1px solid var(--border)}.card .tags,.read .tags{display:flex;gap:8px;flex-wrap:wrap}.card .body{line-height:1.5;font-size:.97rem;height:10.5em;overflow:hidden;position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7}.card .body:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface-card))}.card .body :is(p,ul,ol,blockquote,pre,h1,h2,h3,h4,h5,h6){margin:0 0 .5em}.card .body p:last-child{margin-bottom:0}.card .body code{background:var(--inline-code-bg);border-radius:6px;padding:.1em .35em}.card .body pre{background:var(--inline-code-bg);border-radius:10px;padding:10px;overflow-x:auto}.card .body blockquote{border-left:3px solid var(--accent-soft);margin-left:0;padding-left:10px;color:var(--text-muted)}.editor{display:grid;gap:16px;background:var(--surface-card);padding:20px;border-radius:18px;box-shadow:var(--shadow);animation:fade-slide-in .2s ease}.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;max-width:760px;margin:0 auto;animation:fade-slide-in .2s ease;overflow:hidden;min-width:0}.read header{display:flex;justify-content:space-between;align-items:center;color:var(--text-muted)}.read .body{line-height:1.78;font-size:1.03rem;overflow-wrap:anywhere;word-break:break-word;min-width:0}.read .body h1,.read .body h2,.read .body h3{line-height:1.28}.read .body p,.read .body ul,.read .body ol,.read .body pre,.read .body blockquote{margin:0 0 .85em}.read .body :is(img,video,iframe,table,pre){max-width:100%;min-width:0}.read .body pre{width:100%;box-sizing:border-box;overflow-x:hidden;white-space:pre-wrap;word-break:break-word}.read .body code{overflow-wrap:anywhere}.read .body pre code{display:block;max-width:100%;white-space:pre-wrap;word-break:break-word}.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-right: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){.ref-form{flex-direction:column}.date-range-row{flex-direction:column;align-items:stretch}.date-range-row input[type=date]{max-width:100%}}