:root{
  --bg:#f4f5f2; --bg-raised:#ffffff; --bg-sunken:#eceee9;
  --text:#1b2130; --text-dim:#5b6472; --text-faint:#8a92a0;
  --border:#dbded7; --border-strong:#c3c7bd;
  --teal:#0f766e; --teal-soft:#0f766e14;
  --coral:#b8481f; --coral-soft:#b8481f14;
  --shadow: 0 1px 2px rgba(20,24,20,.04), 0 8px 24px -12px rgba(20,24,20,.14);
  --font-display:'Newsreader', Georgia, serif;
  --font-body:'Public Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1219; --bg-raised:#141b26; --bg-sunken:#0a0e14;
    --text:#e8e9e4; --text-dim:#a3aab8; --text-faint:#707988;
    --border:#232d3c; --border-strong:#334156;
    --teal:#5eead4; --teal-soft:#5eead41a;
    --coral:#f0a07a; --coral-soft:#f0a07a1a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0d1219; --bg-raised:#141b26; --bg-sunken:#0a0e14;
  --text:#e8e9e4; --text-dim:#a3aab8; --text-faint:#707988;
  --border:#232d3c; --border-strong:#334156;
  --teal:#5eead4; --teal-soft:#5eead41a;
  --coral:#f0a07a; --coral-soft:#f0a07a1a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh;}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--font-mono); font-size:.86em;}

.rail{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid var(--border);}
.rail-inner{max-width:1080px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:16px;}
.rail-brand{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--text-faint); white-space:nowrap; display:flex; align-items:center; gap:8px;}
.rail-brand .dot{width:6px; height:6px; border-radius:50%; background:var(--teal);}
.rail-search{flex:1 1 auto; position:relative; max-width:420px;}
.rail-search input{width:100%; background:var(--bg-sunken); border:1px solid var(--border-strong); border-radius:8px; padding:8px 12px; font-family:var(--font-body); font-size:13.5px; color:var(--text);}
.rail-search input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);}
.rail-search-results{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow); max-height:360px; overflow-y:auto; display:none; z-index:60;}
.rail-search-results.show{display:block}
.rail-search-results a{display:block; padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text);}
.rail-search-results a:last-child{border-bottom:none}
.rail-search-results a:hover{background:var(--bg-sunken); text-decoration:none}
.rail-search-results .rtitle{font-weight:600; font-size:13.5px;}
.rail-search-results .rsnippet{color:var(--text-faint); font-size:12px; margin-top:2px;}
.rail-actions{flex-shrink:0; display:flex; align-items:center; gap:8px;}
.theme-toggle,.logout-btn{flex-shrink:0; height:32px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg-raised); color:var(--text-dim); cursor:pointer; transition:background .15s,color .15s,border-color .15s;}
.theme-toggle{width:32px}
.logout-btn{padding:0 12px; font-family:var(--font-mono); font-size:11.5px; text-decoration:none;}
.theme-toggle:hover,.logout-btn:hover{background:var(--bg-sunken); color:var(--text); border-color:var(--teal);}
.theme-toggle svg{width:16px; height:16px;}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
}

.wrap{max-width:1080px; margin:0 auto; padding:32px 24px 100px;}

/* index */
.eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px;}
h1.page-title{font-family:var(--font-display); font-weight:500; font-style:italic; font-size:2rem; margin:0 0 28px; letter-spacing:-.01em;}

.folder-group{margin-bottom:30px;}
.folder-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid var(--border);}
.note-list{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; background:var(--bg-raised); overflow:hidden;}
.note-row{display:flex; gap:16px; align-items:baseline; padding:13px 16px; border-bottom:1px solid var(--border); transition:background .12s;}
.note-row:last-child{border-bottom:none}
.note-row:hover{background:var(--bg-sunken)}
.note-row a.note-title{font-weight:600; color:var(--text); flex-shrink:0; min-width:200px;}
.note-row a.note-title:hover{color:var(--teal); text-decoration:none}
.note-row .note-excerpt{color:var(--text-faint); font-size:.86rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.note-row .note-tags{flex-shrink:0; display:flex; gap:5px;}
.tag-badge{font-family:var(--font-mono); font-size:10.5px; background:var(--teal-soft); color:var(--teal); padding:2px 7px; border-radius:5px; white-space:nowrap;}

/* note detail */
.breadcrumb{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); margin-bottom:16px;}
.breadcrumb a{color:var(--text-faint)}
.note-header{margin-bottom:8px;}
h1.note-h1{font-family:var(--font-display); font-weight:500; font-style:italic; font-size:2.4rem; margin:0 0 12px; letter-spacing:-.01em; line-height:1.1;}
.note-meta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border);}
.note-meta .created{font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint);}
.note-body{font-size:1rem; color:var(--text-dim);}
.note-body h1,.note-body h2,.note-body h3{font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--text); margin-top:1.6em;}
.note-body h2{font-size:1.4rem}
.note-body h3{font-size:1.15rem}
.note-body p{margin:0 0 1em;}
.note-body strong{color:var(--text); font-weight:600}
.note-body code{background:var(--bg-sunken); padding:1px 6px; border-radius:5px;}
.note-body pre{background:var(--bg-sunken); border:1px solid var(--border); border-radius:8px; padding:14px 16px; overflow-x:auto;}
.note-body pre code{background:none; padding:0;}
.note-body ul,.note-body ol{padding-left:1.4em;}
.note-body table{width:100%; border-collapse:collapse; font-size:.9rem; margin:1em 0;}
.note-body th,.note-body td{padding:8px 10px; border-bottom:1px solid var(--border); text-align:left;}
.note-body hr{border:none; border-top:1px solid var(--border); margin:2em 0;}
.note-body blockquote{margin:0; padding-left:16px; border-left:3px solid var(--teal); color:var(--text-faint);}

.assets-panel,.backlinks-panel{margin-top:36px; padding:18px 20px; border:1px solid var(--border); border-radius:10px; background:var(--bg-raised);}
.panel-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px;}
.asset-item{display:flex; align-items:center; gap:10px; padding:9px 0;}
.asset-item a{font-weight:600;}
.backlinks-panel ul{list-style:none; padding:0; margin:0; display:grid; gap:6px;}
.backlinks-panel li::before{content:"← "; color:var(--text-faint);}

.empty-state{padding:60px 20px; text-align:center; color:var(--text-faint); font-family:var(--font-mono); font-size:13px;}

footer.pagefoot{margin-top:60px; padding-top:20px; border-top:1px solid var(--border); font-size:.8rem; color:var(--text-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media (max-width:640px){
  .rail-inner{flex-wrap:wrap}
  .note-row{flex-wrap:wrap}
  .note-row a.note-title{min-width:0; width:100%;}
  h1.note-h1{font-size:1.8rem}
}