:root{
  --ink:#17301f;
  --muted:#607565;
  --forest:#0b4828;
  --deep:#06331b;
  --sage:#e6f0e1;
  --gold:#bf923d;
  --soft:#f4e5c2;
  --paper:#fbfcf8;
  --line:#d6e2d3;
  --danger:#b34635;
  --shadow:0 14px 38px #143d221c
}

*{
  box-sizing:border-box
}

body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(140deg,#f4f8f1,var(--paper) 48%,#f8f3e8);
  font-family:Inter,system-ui,sans-serif
}

html.dark{--ink:#f4e5c2;--muted:#b8c9aa;--forest:#e3bc63;--deep:#f4e5c2;--sage:#1a341d;--gold:#e3bc63;--soft:#3c341a;--paper:#071008;--line:#5b5428;--danger:#ed9687;--shadow:0 14px 38px #0008}
html.dark body{background:radial-gradient(circle at top,#1a2b16,#071008 55%,#030703)}
html.dark .app-header,html.dark .sidebar,html.dark .auth-card{background:#071008ed;border-color:#5b5428}
html.dark .writing,html.dark .preview,html.dark .note-card,html.dark .modal-card{background:#102014}
html.dark input,html.dark textarea,html.dark .search{background:#102014;color:#f4e5c2}
html.dark .quiet-button{background:#102014;color:#e3bc63;border-color:#5b5428}
html.dark .primary-button{background:#e3bc63;border-color:#e3bc63;color:#071008}
html.dark .danger-button{background:#102014;color:#ed9687;border-color:#8a4f48}
html.dark .auth-tabs{background:#102014}
html.dark .tab.active{background:#263c27;color:#f4e5c2;box-shadow:0 2px 7px #0008}
html.dark .auth-form button{color:#071008}
html.dark .icon-button{background:#102014;color:#e3bc63;border-color:#5b5428}
html.dark .library button.active,html.dark .library button:hover{color:#071008}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--forest);
  font:700 21px Georgia,serif;
  text-decoration:none
}

.brand span{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:50%;
  color:transparent;
  background:url('/images/lundie_heart.png') center/cover no-repeat;
  box-shadow:none
}

.eyebrow{
  margin:0 0 8px;
  color:var(--forest);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase
}

h1{
  margin:0;
  color:var(--deep);
  font:700 clamp(29px,4vw,43px)/1.1 Georgia,serif
}

.intro,.muted{
  color:var(--muted);
  line-height:1.6
}

button,input,textarea{
  font:inherit
}

button{
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease
}

button:hover{
  transform:translateY(-1px)
}

button:active{
  transform:translateY(0)
}

button:focus-visible{
  outline:3px solid #bf923d42;
  outline-offset:2px
}

input,textarea{
  border:1px solid #bfd0be;
  border-radius:9px;
  color:var(--ink);
  background:#fff
}

input{
  min-height:45px;
  padding:9px 11px
}

input:focus,textarea:focus{
  border-color:var(--gold);
  outline:3px solid #bf923d2e
}

.auth-page{
  display:grid;
  min-height:100vh;
  place-items:center;
  padding:24px
}

.auth-card{
  width:min(470px,100%);
  padding:clamp(28px,6vw,52px);
  border:1px solid var(--line);
  border-radius:22px;
  background:#ffffffd9;
  box-shadow:var(--shadow)
}

.auth-card .brand{
  margin-bottom:42px
}

.auth-card .intro{
  margin:14px 0 28px
}

.auth-tabs{
  display:flex;
  gap:5px;
  margin-bottom:20px;
  padding:4px;
  border-radius:10px;
  background:var(--sage)
}

.tab{
  flex:1;
  border:0;
  border-radius:7px;
  padding:10px;
  color:var(--forest);
  background:transparent;
  font-weight:750
}

.tab.active{
  background:#fff;
  box-shadow:0 2px 7px #143d221c
}

.auth-form{
  display:grid;
  gap:15px
}

.auth-form[hidden]{
  display:none!important
}

.auth-form label{
  display:grid;
  gap:6px;
  color:var(--deep);
  font-size:14px;
  font-weight:700
}

.auth-form button,.primary-button{
  border:1px solid var(--forest);
  border-radius:9px;
  padding:11px 16px;
  color:#fff;
  background:var(--forest);
  font-weight:800
}

.auth-form button:hover,.primary-button:hover{
  border-color:var(--deep);
  background:var(--deep);
  box-shadow:0 5px 14px #143d222b
}

.message{
  min-height:22px;
  color:var(--danger);
  font-size:14px
}

.auth-foot{
  color:var(--muted);
  font-size:13px;
  text-align:center
}

.app-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  min-height:67px;
  padding:0 20px;
  border-bottom:1px solid #0b48281f;
  background:#fbfcf8ed;
  backdrop-filter:blur(12px)
}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto
}

.user-name{
  color:var(--muted);
  font-size:14px;
  font-weight:700
}

.quiet-button,.danger-button,.icon-button{
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 12px;
  color:var(--forest);
  background:#fff;
  font-weight:750
}

.danger-button{
  color:var(--danger);
  border-color:#e7bbb2
}

.quiet-button:hover,.icon-button:hover{
  border-color:var(--gold);
  background:var(--sage);
  box-shadow:0 4px 12px #143d221f
}

.danger-button:hover{
  border-color:var(--danger);
  color:#fff;
  background:var(--danger);
  box-shadow:0 4px 12px #b3463530
}

.tab:hover{
  background:#ffffff80
}

html.dark .tab:hover{
  background:#1a341d
}

html.dark .auth-form button:hover,html.dark .primary-button:hover{
  border-color:#f0cf83;
  background:#f0cf83
}

html.dark .quiet-button:hover,html.dark .icon-button:hover{
  border-color:#e3bc63;
  background:#263c27
}

.icon-button{
  display:none;
  font-size:19px
}

.app-shell{
  display:flex;
  height:calc(100vh - 67px)
}

.sidebar{
  display:flex;
  flex:0 0 280px;
  flex-direction:column;
  padding:17px;
  border-right:1px solid var(--line);
  background:#ffffff8f;
  overflow:auto
}

.sidebar-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.sidebar-actions .primary-button{
  grid-column:1/-1
}

.search{
  display:flex;
  align-items:center;
  gap:8px;
  margin:18px 0;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--muted)
}

.search input{
  min-width:0;
  width:100%;
  border:0;
  outline:0
}

.clear-search{display:grid;width:22px;height:22px;padding:0;place-items:center;border:0;border-radius:50%;color:var(--muted);background:transparent;font-size:20px;line-height:1}
.clear-search:hover{color:var(--ink);background:var(--line)}

.library{
  display:grid;
  gap:5px
}

.library button{
  width:100%;
  border:0;
  border-radius:8px;
  padding:9px 10px;
  color:var(--ink);
  background:transparent;
  text-align:left
}

.library button:hover,.library button.active{
  color:#fff;
  background:var(--forest)
}

.library .root{
  font-weight:800
}

.library .folder{
  padding-left:calc(14px + var(--depth)*16px)
}

.sidebar-note{
  margin-top:auto;
  padding-top:18px;
  color:var(--muted);
  font-size:12px
}

.workspace{
  min-width:0;
  flex:1;
  overflow:auto
}

.welcome,.listing{
  max-width:1400px;
  margin:auto;
  padding:clamp(30px,5vw,58px)
}

.welcome{
  padding-top:14vh
}

.welcome p:last-child{
  max-width:470px;
  color:var(--muted);
  line-height:1.6
}

.listing-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:25px
}

.note-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:15px
}

.note-card{
  min-height:156px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#ffffffcc;
  box-shadow:0 5px 16px #143d220d;
  text-align:left;
  transition:.18s
}

.note-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px)
}

.note-card h2{
  margin:0 0 8px;
  color:var(--deep);
  font:700 20px Georgia,serif
}

.note-card p{
  display:-webkit-box;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3
}

.note-card time{
  display:block;
  margin-top:15px;
  color:#839383;
  font-size:12px
}

.editor{
  display:flex;
  min-height:100%;
  flex-direction:column;
  padding:22px 28px
}

.editor-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}

.breadcrumbs{
  color:var(--muted);
  font-size:13px
}

.editor-actions{
  display:flex;
  gap:8px
}

.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:#07100899}
.modal-card{width:min(520px,100%);max-height:min(680px,calc(100vh - 40px));overflow:auto;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow)}
.modal-head,.modal-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-head h2{margin:0;color:var(--deep);font-family:Georgia,serif}
.move-destinations{display:grid;gap:8px;margin:20px 0}
.move-destinations label{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.move-destinations label:has(input:checked){border-color:var(--gold);background:var(--sage)}
.auth-theme-toggle{position:fixed;top:18px;right:18px}
.theme-toggle{display:grid;width:37px;height:37px;padding:0;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--forest);background:transparent;cursor:pointer;font-size:16px;line-height:1}
.theme-toggle:hover{border-color:var(--gold);background:var(--sage);box-shadow:0 4px 12px #143d221f}

.note-title-input{
  width:100%;
  margin:20px 0 14px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:8px 0;
  color:var(--deep);
  background:transparent;
  font:700 clamp(28px,3.3vw,42px) Georgia,serif
}

.note-file-date,.preview-file-date{
  color:var(--muted);
  font-size:13px;
  line-height:1.4
}

.note-file-date{
  display:block;
  margin:-6px 0 18px
}

.preview-file-date{
  display:block;
  padding:12px 16px 0
}

.editor-grid{
  display:grid;
  min-height:0;
  flex:1;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.writing,.preview{
  display:flex;
  min-height:0;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:12px;
  background:#ffffffc4;
  overflow:hidden
}

.pane-label{
  display:flex;
  justify-content:space-between;
  padding:10px 13px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase
}

.upload-label{
  color:var(--forest);
  cursor:pointer
}

.writing textarea{
  min-height:470px;
  flex:1;
  border:0;
  border-radius:0;
  padding:16px;
  resize:none;
  line-height:1.55
}

.markdown{
  overflow:auto;
  padding:16px;
  line-height:1.65
}

.markdown h1,.markdown h2,.markdown h3{
  margin:18px 0 9px;
  font-family:Georgia,serif
}

.markdown h1{
  font-size:28px
}

.markdown h2{
  font-size:23px
}

.markdown h3{
  font-size:19px
}

.markdown p{
  margin:0 0 12px
}

.markdown pre{
  overflow:auto;
  padding:12px;
  border-radius:8px;
  background:#eef4eb
}

.markdown img{
  max-width:100%;
  border-radius:8px
}

.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:50;
  max-width:340px;
  padding:12px 15px;
  border-radius:10px;
  color:#fff;
  background:var(--forest);
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:.2s
}

.toast.show{
  opacity:1;
  transform:none
}

.toast.error{
  background:var(--danger)
}

@media(max-width:780px){
  .app-header{
  padding:0 13px
}

.icon-button{
  display:block;
  margin-right:10px
}

.user-name{
  display:none
}

.sidebar{
  position:fixed;
  top:67px;
  bottom:0;
  left:0;
  z-index:15;
  width:min(310px,88vw);
  box-shadow:var(--shadow);
  transform:translateX(-105%);
  transition:.2s
}

.sidebar.open{
  transform:none
}

.editor{
  padding:16px
}

.editor-grid{
  grid-template-columns:1fr
}

.preview{
  min-height:300px
}

.writing textarea{
  min-height:340px
}

.listing-head{
  align-items:start;
  flex-direction:column
}


}

@media(max-width:440px){
  .brand{
  font-size:18px
}

.quiet-button,.danger-button,.primary-button{
  padding:9px 10px
}

.editor-top{
  align-items:flex-start;
  flex-direction:column
}

.note-list{
  grid-template-columns:1fr
}


}