:root {
  color-scheme: light;
  --ink: #20352a;
  --ink-soft: #65766c;
  --muted: #92a097;
  --paper: #ffffff;
  --canvas: #f6f9f6;
  --line: #e1e9e2;
  --line-strong: #cfddcf;
  --green-900: #174d32;
  --green-700: #177a46;
  --green-600: #199451;
  --green-500: #22ad61;
  --green-100: #e7f5eb;
  --green-050: #f2faf4;
  --danger: #c34a4a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body {
  min-height: 100dvh;
  margin: 0;
  background: radial-gradient(90% 420px at 50% -120px, #e5f5e8 0%, var(--canvas) 60%, #fff 100%);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(34, 173, 97, .23); outline-offset: 2px; }

.app { min-height: 100dvh; max-width: 760px; margin: auto; padding: env(safe-area-inset-top) 18px calc(24px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between;
  min-height: 70px; margin: 0 -18px; padding: 0 18px;
  background: rgba(246, 249, 246, .9); backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid rgba(207, 221, 207, .8);
}
.brand { display: flex; gap: 9px; align-items: center; color: var(--green-900); font-size: 20px; font-weight: 760; letter-spacing: -.035em; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #2bc16d, var(--green-700)); box-shadow: 0 5px 12px rgba(23, 122, 70, .22); font-size: 17px; }
.top-actions { display: flex; gap: 2px; align-items: center; }
.icon-button, .text-button { min-height: 38px; border: 0; border-radius: 10px; padding: 8px 11px; color: var(--green-700); background: transparent; font-weight: 680; transition: background .16s ease, transform .16s ease; }
.icon-button { min-width: 38px; padding: 7px; font-size: 21px; line-height: 1; }
.icon-button:active, .text-button:active { transform: scale(.96); background: var(--green-100); }
.icon-button:disabled { opacity: .45; cursor: wait; }
.text-button { font-size: 14px; }
.back-button { display: grid; width: 35px; height: 35px; place-items: center; padding: 0 2px 3px 0; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--green-700); background: var(--paper); box-shadow: 0 2px 6px rgba(30, 58, 40, .04); font-size: 30px; line-height: 1; }

.screen { padding-top: 18px; }
.view-switch { display: inline-flex; margin-bottom: 13px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.78); box-shadow: 0 2px 6px rgba(33, 60, 42, .03); }
.view-switch button { border: 0; border-radius: 8px; padding: 7px 11px; color: var(--ink-soft); background: transparent; font-size: 13px; transition: color .16s ease, background .16s ease; }
.view-switch button.active { color: var(--green-700); background: var(--green-100); font-weight: 730; }
.status { min-height: 20px; margin: 3px 2px 10px; color: var(--muted); font-size: 13px; }
.status.error { color: var(--danger); }

.search { width: 100%; border: 1px solid var(--line-strong); border-radius: 14px; padding: 13px 14px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(30, 62, 40, .045); outline: none; transition: border .16s ease, box-shadow .16s ease; }
.search::placeholder, .editor-body::placeholder { color: #a6b0a8; }
.search:focus, .editor-title:focus, .editor-body:focus, input:focus, select:focus { border-color: #63ba84; box-shadow: 0 0 0 4px rgba(34, 173, 97, .11); }
.notebook-tabs { display: flex; gap: 8px; margin: 13px -18px 0; padding: 0 18px 5px; overflow-x: auto; scrollbar-width: none; }
.notebook-tabs::-webkit-scrollbar { display: none; }
.notebook-tab { flex: 0 0 auto; max-width: 176px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; color: var(--ink-soft); background: rgba(255,255,255,.82); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; transition: border .16s ease, color .16s ease, background .16s ease; }
.notebook-tab.active { border-color: #b3dfc0; color: var(--green-700); background: var(--green-100); font-weight: 720; }
.notebook-tab.add-notebook { display: grid; width: 33px; height: 33px; place-items: center; padding: 0; color: var(--green-700); font-size: 19px; line-height: 1; }
.notebook-count { margin: 14px 3px 0; color: var(--muted); font-size: 13px; }

.note-list, .cloud-list { display: grid; gap: 3px; margin-top: 11px; }
.cloud-list { margin-top: 0; }
.note-row { width: 100%; padding: 15px 11px; border: 1px solid transparent; border-bottom-color: var(--line); color: inherit; background: transparent; text-align: left; transition: background .16s ease, border .16s ease, transform .16s ease; }
.note-row:active { transform: scale(.992); background: var(--green-050); border-color: #d7ecdc; border-radius: 12px; }
.note-row.active { border-color: #c9e7d0; border-radius: 12px; background: var(--green-100); }
.note-row b { display: block; overflow: hidden; color: #263a2d; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.note-row span { display: block; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.empty { margin: 76px 8px; color: var(--muted); text-align: center; line-height: 1.8; }

.primary { border: 0; border-radius: 11px; padding: 11px 17px; color: #fff; background: linear-gradient(135deg, #23b861, var(--green-700)); box-shadow: 0 7px 16px rgba(23, 122, 70, .2); font-weight: 720; }
.primary:active { transform: translateY(1px); box-shadow: 0 3px 9px rgba(23, 122, 70, .18); }
.secondary { border: 1px solid var(--line-strong); border-radius: 11px; padding: 10px 14px; color: var(--ink); background: var(--paper); font-weight: 650; }

.editor-head { padding: 20px 0 13px; }
.editor-title { width: 100%; border: 0; outline: none; padding: 0; color: var(--green-900); background: transparent; font-size: clamp(30px, 8vw, 43px); font-weight: 770; line-height: 1.14; letter-spacing: -.052em; }
.note-meta { display: flex; gap: 8px; margin-top: 15px; }
.note-meta select { flex: 1; max-width: 215px; border: 0; border-bottom: 1px solid var(--line); padding: 8px 5px; color: var(--ink-soft); background: transparent; }
.editor-toolbar { display: flex; gap: 5px; align-items: center; margin: 9px 0; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.editor-toolbar button { min-width: 35px; min-height: 35px; border: 0; border-radius: 9px; padding: 6px 8px; color: #55675b; background: transparent; font-weight: 740; }
.editor-toolbar button:active { color: var(--green-700); background: var(--green-100); }
.editor-body { width: 100%; min-height: calc(100dvh - 285px); resize: none; border: 0; outline: none; padding: 22px 1px 90px; color: #2f3932; background: transparent; font-family: ui-serif, "Songti SC", "STSong", Georgia, serif; font-size: 19px; line-height: 1.88; }

.sheet-backdrop { position: fixed; z-index: 10; inset: 0; background: rgba(22, 52, 34, .32); backdrop-filter: blur(2px); }
.sheet { position: fixed; z-index: 11; inset: auto 0 0; padding: 21px 20px calc(24px + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.84); border-bottom: 0; border-radius: 24px 24px 0 0; background: rgba(255,255,255,.98); box-shadow: 0 -16px 46px rgba(19, 59, 35, .18); }
.sheet h2 { margin: 0 0 7px; color: var(--green-900); font-size: 22px; letter-spacing: -.025em; }
.sheet p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.sheet label { display: grid; gap: 7px; margin: 13px 0; color: #57665b; font-size: 14px; }
.sheet input { width: 100%; border: 1px solid var(--line-strong); border-radius: 11px; padding: 12px; outline: none; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

@media (min-width: 761px) {
  body { background: radial-gradient(65% 500px at 50% -80px, #e5f5e8 0%, var(--canvas) 65%, #fff 100%); }
  .app { border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: rgba(255,255,255,.4); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }