:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #18191a;
  --sidebar: #242526;
  --list: #242526;
  --editor: #18191a;
  --card: #3a3b3c;
  --card-hover: #4e4f50;
  --line: #3e4042;
  --text: #e4e6eb;
  --muted: #b0b3b8;
  --faint: #8a8d91;
  --green: #2374e1;
  --green-2: #1877f2;
  --purple: #4599ff;
  --orange: #0e5fcb;
  --blue: #1877f2;
  --share: #1877f2;
  --active: #263951;
  --danger: #f07178;
  --input: #3a3b3c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --menu: #242526;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f2f5;
  --sidebar: #ffffff;
  --list: #ffffff;
  --editor: #ffffff;
  --card: #ffffff;
  --card-hover: #f0f2f5;
  --line: #ced0d4;
  --text: #050505;
  --muted: #65676b;
  --faint: #8a8d91;
  --green: #1877f2;
  --green-2: #166fe5;
  --purple: #4599ff;
  --orange: #0c63d4;
  --blue: #1877f2;
  --share: #1877f2;
  --active: #e7f3ff;
  --input: #f0f2f5;
  --menu: #ffffff;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Segoe UI Variable", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.gate {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: center;
  background: var(--bg);
}
.card {
  width: min(420px, calc(100% - 32px));
  background: var(--sidebar);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.brand-mark, .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: white; font-weight: 700;
}
.brand-mark { width: 76px; height: 76px; border-radius: 20px; background: transparent; margin: 0 auto; }
.brand-mark img { width: 76px; height: 76px; border-radius: 20px; display: block; }
.nav-ico { width: 1.4em; text-align: center; flex: 0 0 auto; }
.icon-btn { font-size: 15px; }
.toolbar button { font-size: 14px; }
.card h1 { margin: 12px 0 4px; font-size: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13px; color: var(--muted); }
.field input, .field select, .composer input, .settings input, .settings select {
  background: var(--input); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; color: var(--text); outline: none;
}
.field input:focus, .composer input:focus { border-color: var(--blue); }
.btn-note, .btn-task, .btn-event, .btn-share, .btn-more {
  border: 0; border-radius: 8px; font-weight: 700;
}
.btn-note { background: var(--green); color: white; }
.btn-note:hover { background: var(--green-2); }
.btn-note.wide { width: 100%; height: 42px; margin-top: 8px; }
.btn-task { background: var(--purple); color: white; }
.btn-event { background: var(--orange); color: white; }
.btn-share { background: var(--share); color: white; height: 32px; padding: 0 14px; }
.history-btn { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 8px; height: 32px; padding: 0 10px; }
.history-btn:hover { background: var(--card-hover); }
.rev-menu { min-width: 280px; max-height: 380px; overflow: auto; }
.rev-menu button { align-items: flex-start; flex-direction: column; gap: 2px; }
.rev-menu .rev-when { font-weight: 650; }
.rev-menu .rev-name { color: var(--faint); font-size: 12px; }
.rev-window {
  width: min(980px, calc(100% - 32px)); height: min(740px, calc(100% - 32px));
  background: var(--sidebar); color: var(--text); border-radius: 16px; display: grid;
  grid-template-rows: auto minmax(0, 1fr); overflow: hidden; box-shadow: var(--shadow);
}
.rev-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.rev-top h2 { margin: 0; font-size: 22px; }
.rev-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.rev-list { overflow: auto; border-right: 1px solid var(--line); }
.rev-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); padding: 12px 14px; }
.rev-item.on { background: var(--active); }
.rev-item strong, .rev-item em { display: block; }
.rev-item em { color: var(--faint); font-style: normal; font-size: 12px; margin-top: 2px; }
.rev-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rev-doc { flex: 1; overflow: auto; padding: 22px 28px; }
.rev-doc h3 { margin: 0 0 12px; }
.rev-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.rev-actions p { margin: 0; margin-right: auto; }
.text-btn, .icon-btn {
  background: transparent; border: 0; color: var(--muted); border-radius: 8px;
}
.icon-btn { width: 32px; height: 32px; }
.icon-btn:hover, .text-btn:hover, .icon-btn.active { background: var(--card-hover); color: var(--text); }
.error { background: rgba(240, 113, 120, 0.15); color: var(--danger); padding: 8px 10px; border-radius: 8px; }
.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: 42px minmax(0, 1fr); }
.topbar {
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
  background: var(--sidebar); border-bottom: 1px solid var(--line);
}
.menu-toggle {
  display: none; width: 36px; height: 36px; place-items: center; flex: none;
  background: transparent; border: 0; color: var(--text); border-radius: 8px; padding: 0;
}
.menu-toggle:hover, .menu-toggle.open { background: var(--card-hover); }
.sidebar-backdrop { display: none; }
.note-back { display: none; }
.app-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 0 8px 0 4px; }
.app-brand img, .about-mark, .empty-mark { display: block; }
.app-brand img { width: 22px; height: 22px; border-radius: 6px; }
.about-card { text-align: center; }
.about-mark { width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 18px; }
.empty-mark { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 20px; }
.sync-bird { font-size: 42px; margin: 0; }
.menubar {
  display: flex; align-items: center; gap: 2px; padding: 0; flex: 1;
  background: transparent; border: 0;
}
.menubar > button { background: none; border: 0; color: var(--text); padding: 4px 10px; border-radius: 6px; font-size: 13px; }
.menubar > button:hover, .menubar > button.open { background: var(--card-hover); }
.workspace { min-height: 0; display: grid; grid-template-columns: 252px 372px minmax(0, 1fr); }
.workspace.collapsed { grid-template-columns: 72px 372px minmax(0, 1fr); }
.workspace.stage-mode { grid-template-columns: 252px minmax(0, 1fr); }
.workspace.stage-mode.collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.workspace.stage-mode .list, .workspace.stage-mode .editor { display: none; }
.workspace.stage-mode .stage { display: flex; }
.sidebar, .list, .editor, .stage { min-height: 0; min-width: 0; }
.sidebar {
  background: var(--sidebar); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 8px;
}
.side-scroll { overflow: auto; flex: 1; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-row .who { min-width: 0; flex: 1; }
.user-row .email { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-wrap { position: relative; margin: 8px; }
.search-wrap input {
  width: 100%; height: 36px; border-radius: 8px; border: 1px solid #333; background: #242424;
  padding: 0 32px; outline: none;
}
.search-clear {
  position: absolute; right: 4px; top: 4px; width: 28px; height: 28px;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1;
}
.search-clear:hover { background: var(--card-hover); color: var(--text); }
[data-theme="light"] .search-wrap input { background: #fff; border-color: var(--line); }
.search-wrap span { position: absolute; left: 10px; top: 8px; color: var(--faint); }
.action-row { display: flex; gap: 8px; margin: 4px 8px 10px; }
.action-row.split .btn-task, .action-row.split .btn-event { flex: 1; height: 36px; }
.btn-note.main { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-more { width: 40px; height: 40px; background: var(--card); color: var(--text); }
.nav-item, .nb-item, .recent-item {
  width: 100%; text-align: left; background: transparent; border: 0; color: var(--text);
  border-radius: 8px; padding: 7px 10px; display: flex; gap: 8px; align-items: center; font-size: 14px;
}
.nav-item.active, .nb-item.active, .recent-item.active, .nav-item:hover, .nb-item:hover, .recent-item:hover {
  background: var(--card-hover);
}
.section-label {
  margin: 16px 10px 6px; font-size: 11px; letter-spacing: 0.08em; color: var(--faint); font-weight: 700;
}
.nb-name, .recent-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace.collapsed .hide-collapsed { display: none; }
.workspace.collapsed .sidebar { align-items: center; padding: 10px 0; }
.workspace.collapsed .user-row { flex-direction: column; gap: 8px; width: 100%; padding: 0; }
.workspace.collapsed .user-row .who { display: none; }
.workspace.collapsed .action-row { width: 100%; margin: 8px 0; justify-content: center; }
.workspace.collapsed .btn-note.main { width: 44px; height: 44px; flex: none; padding: 0; }
.workspace.collapsed .side-scroll { display: flex; flex-direction: column; align-items: center; width: 100%; }
.workspace.collapsed .nav-item { width: 44px; height: 40px; padding: 0; justify-content: center; }
.workspace.collapsed .chevron,
.workspace.collapsed .recent-item,
.workspace.collapsed .section-label,
.workspace.collapsed .nav-child { display: none; }
.workspace.collapsed .expand-side { width: 44px; height: 36px; font-size: 20px; color: var(--text); }
.list { background: var(--list); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.list-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 16px 8px; }
.list-head h2 { margin: 0; font-size: 28px; }
.list-head p { margin: 2px 0 0; font-size: 13px; }
.list-tools { display: flex; gap: 4px; align-items: center; }
.list-tools .icon-btn { display: grid; place-items: center; padding: 0; color: var(--text); }
.list-tools .icon-btn svg { display: block; }
.filter-pop { width: 340px; padding: 6px 8px 8px; }
.filter-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 10px; }
.filter-head strong { font-size: 16px; }
.filter-row { display: grid; grid-template-columns: 18px 92px 1fr; gap: 10px; align-items: center; margin: 8px 6px; color: var(--text); }
.filter-row select { width: 100%; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--text); padding: 0 8px; }
.filter-links { border-top: 1px solid var(--line); margin: 12px 6px 0; padding-top: 6px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; color: #1877f2; font-size: 14px; }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #4e4f50; border-radius: 99px; transition: background .15s; }
.switch input:checked + span { background: #1877f2; }
.switch span::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .15s; }
.switch input:checked + span::after { transform: translateX(18px); }
.note-list { overflow: auto; padding-bottom: 16px; }
.note-card {
  position: relative;
  margin: 4px 12px; padding: 12px 14px; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
}
.note-card:hover { background: var(--card-hover); }
.note-card.active, .note-card.selected { border-color: var(--blue); background: var(--active); }
.note-check { display: none; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; }
.note-list.multi .note-check { display: grid; }
.note-check input { width: 16px; height: 16px; margin: 0; accent-color: #1877f2; cursor: pointer; }
.delete-card { width: min(480px, calc(100% - 32px)); }
.delete-list { max-height: 240px; overflow: auto; margin: 8px 0 0; padding: 0 4px 0 18px; }
.delete-list li { margin: 6px 0; }
.note-title-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.note-card h3 {
  flex: 1; min-width: 0; margin: 0; padding: 0;
  font-size: 15px; font-weight: 650; line-height: 22px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-delete {
  flex: none; margin-left: auto; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--muted);
  font-size: 18px; line-height: 20px; cursor: pointer; opacity: 0;
}
.note-card:hover .note-delete,
.note-card.active .note-delete,
.note-delete:focus-visible { opacity: 1; }
.note-delete:hover,
.note-delete:focus-visible,
#delete-note:hover,
#delete-note:focus-visible {
  color: #fff;
  background: #1877f2;
}
.note-restore {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: #1877f2; font-size: 16px; line-height: 20px; cursor: pointer;
}
.note-restore:hover { color: #fff; background: #1877f2; }
.delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.btn-danger {
  background: #e41e3f; color: white; border: 0; border-radius: 8px;
  height: 36px; padding: 0 16px; font-weight: 650; cursor: pointer;
}
.btn-danger:hover { background: #c91836; }
.btn-danger:disabled { opacity: 0.7; cursor: progress; }
.note-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.note-card .when { display: block; margin-top: 8px; color: var(--faint); font-size: 12px; }
.note-card.compact { padding: 8px 14px; }
.note-card.compact p, .note-card.compact .when { display: none; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.editor { background: var(--editor); display: flex; flex-direction: column; position: relative; }
.editor-top, .toolbar, .editor-bottom { display: flex; align-items: center; gap: 6px; }
.editor-top { height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); min-width: 0; overflow-x: auto; }
.crumb { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { padding: 4px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; min-width: 0; }
.tool-main, .tool-row, .tool-more-row { display: contents; }
#format-more { display: none; }
.toolbar button, .toolbar select, .toolbar input[type="color"] { flex: 0 0 auto; }
.toolbar button, .toolbar select {
  background: transparent; border: 0; color: var(--text); height: 30px; border-radius: 6px; padding: 0 8px;
  white-space: nowrap;
}
.toolbar button:hover, .toolbar button.active { background: var(--card-hover); }
.toolbar #insert-btn { color: #1877f2; font-weight: 700; }
.toolbar input[type="color"] { width: 22px; height: 22px; border: 0; background: transparent; padding: 0; border-radius: 50%; }
.insert-menu { min-width: 240px; max-height: min(480px, calc(100vh - 120px)); overflow: auto; }
.insert-menu button { justify-content: flex-start; gap: 10px; }
.editor-body table { border-collapse: collapse; margin: 8px 0; }
.editor-body td { border: 1px solid var(--line); min-width: 72px; padding: 6px 8px; }
.editor-body audio { display: block; margin: 8px 0; max-width: 100%; }
.editor-body math { font-size: 1.2em; }
.editor-body .toc { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.editor-body .toc ol { margin: 8px 0 0; padding-left: 18px; }
.sketch-card { width: min(720px, calc(100% - 32px)); }
.sketch-card canvas { width: 100%; height: auto; background: #fff; border-radius: 8px; cursor: crosshair; touch-action: none; }
.banner { background: #3a2e12; color: #ffd58a; padding: 8px 16px; }
.editor-scroll { overflow: auto; flex: 1; }
.editor-paper { max-width: 920px; padding: 28px 56px 80px; }
#note-title {
  width: 100%; resize: none; border: 0; background: transparent; outline: none;
  font-size: 34px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; padding: 0;
}
.editor-body { min-height: 280px; outline: none; font-size: 16px; line-height: 1.65; margin-top: 18px; color: var(--text); }
.editor-body:empty:before { content: attr(data-placeholder); color: var(--faint); }
.editor-body h1 { font-size: 1.7em; } .editor-body h2 { font-size: 1.35em; }
.editor-body pre { background: var(--card); padding: 12px; border-radius: 8px; overflow: auto; }
.editor-body blockquote { margin-left: 0; border-left: 3px solid var(--green); padding-left: 12px; color: var(--muted); }
.editor-body a { color: #7eb6ff; }
.editor-body img { max-width: 100%; border-radius: 8px; }
.editor-body .todo { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.editor-body .todo input[type=checkbox] { pointer-events: auto; cursor: pointer; margin-top: 5px; flex: none; width: 16px; height: 16px; }
.editor-body .todo span[contenteditable="true"] { flex: 1; min-width: 0; outline: none; }
.editor-bottom { height: 46px; padding: 0 16px; border-top: 1px solid var(--line); color: var(--muted); }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  background: var(--card); border-radius: 99px; padding: 3px 8px; font-size: 12px; color: var(--text);
}
.tag button { background: none; border: 0; color: var(--faint); }
.save-state { margin-left: auto; font-size: 12px; color: var(--faint); }
.empty-editor {
  position: absolute; inset: 52px 0 46px; display: grid; place-items: center; text-align: center; background: var(--editor);
}
.side-scroll { display: flex; flex-direction: column; }
.chevron { width: 14px; color: var(--muted); }
.recent-item { padding-left: 28px; }
.nav-ico { width: 1.5em; font-size: 16px; text-align: center; flex: 0 0 auto; }
.stage { background: var(--editor); overflow: auto; padding: 22px 28px 48px; display: none; flex-direction: column; }
.home-head, .manager-head, .widget-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.home-head h2, .manager h2 { margin: 0; }
.home-board { display: grid; grid-template-columns: 1.3fr 0.8fr 0.9fr; gap: 14px; margin-top: 18px; }
.widget { background: #242526; border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-height: 180px; }
.widget.span2 { grid-column: span 2; }
.widget.scratch { background: #3a3422; }
.widget.scratch textarea { width: 100%; min-height: 120px; background: transparent; border: 0; color: #f3e6c0; resize: vertical; outline: none; }
.home-notes, .nb-cards, .nb-manage { display: flex; gap: 10px; overflow: auto; }
.home-note, .nb-card { min-width: 160px; text-align: left; background: #18191a; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.home-note p, .nb-card p { margin: 6px 0; color: var(--muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nb-card.static { min-width: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.nb-manage { flex-direction: column; }
.empty-widget { text-align: center; color: var(--muted); padding: 12px; }
.blob { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 8px auto; font-size: 22px; }
.blob.purple { background: #5b4b8a; } .blob.gold { background: #8a6a22; } .blob.blue { background: #1d4e89; }
.plain { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 0; }
.mini-cal { margin-top: 8px; }
.mini-grid, .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12px; }
.mini-grid { justify-items: center; }
.mini-grid span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; line-height: 1;
}
.mini-grid span.today:not(.picked), .day strong { color: #1877f2; }
.connect-row, .cal-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cal-btn { background: #3a3b3c; color: white; border: 0; border-radius: 8px; height: 32px; padding: 0 10px; }
.cal-btn.wide { width: 100%; margin-top: 6px; }
.calendar-page { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100%; height: 100%; }
.cal-side { padding: 22px 18px; border-right: 1px solid var(--line); }
.cal-side h2, .board h2, .file-side h2, .catalog h2 { margin: 0; font-size: 28px; }
.cal-main { display: flex; flex-direction: column; min-width: 0; min-height: 100%; }
.cal-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 18px; }
.cal-jump { margin-left: 12px; display: flex; gap: 4px; }
.cal-board { flex: 1; }
.day-agenda { padding: 8px 24px; display: flex; flex-direction: column; gap: 8px; }
.agenda { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #242526; }
.agenda.event { border-left: 3px solid #3ddc84; }
.agenda.task { border-left: 3px solid #a78bfa; }
.week-board { display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; }
.week-board section { border-right: 1px solid var(--line); padding: 10px; }
.week-board h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.week-board .event { color: #3ddc84; } .week-board .task { color: #a78bfa; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.green { background: #3ddc84; } .dot.purple { background: #a78bfa; }
.mini-label, .mini-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-nav button, .cal-jump button, .btn-outline {
  background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 8px; height: 32px; padding: 0 10px;
}
.mini-grid span.picked { background: #1877f2; color: white; }
.mini-grid span[data-day] { cursor: pointer; }
.stage.bleed { padding: 0; overflow: hidden; }
.board, .files-page { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 8px; }
.sheet-tools { display: flex; gap: 8px; align-items: center; }
.sheet-tools input, .file-side input { background: var(--input); border: 1px solid var(--line); border-radius: 8px; color: var(--text); height: 34px; padding: 0 10px; }
.sheet-tabs { display: flex; gap: 16px; padding: 8px 20px; border-bottom: 1px solid var(--line); }
.sheet-tabs button { background: none; border: 0; color: var(--muted); padding: 8px 0; border-bottom: 2px solid transparent; }
.sheet-tabs button.on { color: var(--text); border-bottom-color: #1877f2; }
.task-table { flex: 1; min-height: 0; padding: 0 8px 24px; overflow: auto; display: flex; flex-direction: column; }
.task-table .sheet-empty { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.task-table .sheet-empty strong { color: var(--text); font-size: 16px; }
.task-table .sheet-empty p { max-width: 420px; margin: 8px 0 0; }
.catalog { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; }
.catalog-tools { display: flex; align-items: center; gap: 10px; }
.catalog-tools input { width: 220px; background: var(--input); border: 1px solid var(--line); border-radius: 8px; color: var(--text); height: 34px; padding: 0 12px; }
.link-action { background: none; border: 0; color: #1877f2; font-weight: 650; padding: 6px 4px; cursor: pointer; }
.grid-nb, .grid-tag { display: grid; align-items: center; gap: 12px; padding: 0 20px; min-height: 46px; }
.grid-nb { grid-template-columns: minmax(200px, 1.8fr) minmax(70px, 0.7fr) minmax(140px, 1.3fr) minmax(90px, 0.8fr) minmax(80px, 0.7fr) 64px; }
.grid-tag { grid-template-columns: minmax(200px, 2fr) minmax(80px, 0.5fr) 64px; }
.catalog-head { color: var(--faint); font-size: 13px; border-bottom: 1px solid var(--line); }
.catalog-head button { background: none; border: 0; color: inherit; padding: 0; text-align: left; }
.catalog-row { border-bottom: 1px solid var(--line); cursor: pointer; }
.catalog-row:hover { background: var(--card-hover); }
.catalog-body { flex: 1; min-height: 0; overflow: auto; }
.cell-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cell-title em { color: var(--faint); font-style: normal; flex: none; }
.nb-ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.grid-nb > span, .grid-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-dash { color: var(--faint); }
.cell-actions { overflow: visible; text-align: right; }
.catalog .sheet-empty strong { color: var(--text); }
.tag-picker { width: min(440px, calc(100% - 32px)); }
.tag-picker input { width: 100%; background: var(--input); border: 1px solid var(--line); border-radius: 8px; color: var(--text); height: 36px; padding: 0 10px; margin-top: 8px; }
.tag-choices { max-height: 320px; overflow: auto; margin: 10px 0; }
.tag-choice { display: flex; gap: 10px; align-items: center; padding: 8px 2px; }
.task-head, .task-row { display: grid; grid-template-columns: 1.6fr 0.8fr 1fr 0.8fr auto; gap: 8px; align-items: center; padding: 10px 12px; }
.task-head { color: var(--faint); font-size: 13px; border-bottom: 1px solid var(--line); }
.task-row { border-bottom: 1px solid var(--line); }
.task-row.done span { text-decoration: line-through; color: var(--faint); }
.task-row label { display: flex; gap: 8px; align-items: center; }
.sheet-empty { margin: auto; text-align: center; color: var(--muted); padding: 48px 16px; }
.check-bubble { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: #6d4aff; color: white; font-size: 32px; }
.files-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.file-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding-bottom: 12px; }
.file-side .sheet-tabs { padding-left: 16px; }
.file-side input { margin: 0 16px 8px; }
.file-rows { overflow: auto; }
.file-row { width: 100%; display: flex; gap: 10px; text-align: left; background: none; border: 0; color: var(--text); padding: 10px 16px; }
.file-row.on, .file-row:hover { background: var(--card-hover); }
.file-row strong, .file-row em { display: block; font-style: normal; }
.file-row em { color: var(--faint); font-size: 12px; }
.file-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.file-stage { flex: 1; min-height: 0; margin: 24px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: auto; }
.file-stage.empty { border: 2px dashed var(--line); }
.file-stage.over { border: 2px dashed #1877f2; background: rgba(24, 119, 242, 0.08); }
.file-drop { width: 100%; height: 100%; min-height: 240px; border: 0; background: transparent; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; cursor: pointer; }
.file-drop strong { font-size: 16px; }
.file-drop p { margin: 0; max-width: 360px; color: var(--muted); }
.file-view { max-width: 100%; max-height: 100%; object-fit: contain; background: white; }
.month-grid { margin-top: 12px; }
.day { min-height: 72px; background: #18191a; border-radius: 8px; padding: 6px; }
.day em { display: block; font-style: normal; font-size: 11px; color: #7eb6ff; white-space: nowrap; overflow: hidden; }
.manager { display: flex; flex-direction: column; gap: 14px; }
.file-table { width: 100%; border-collapse: collapse; }
.file-table th, .file-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.task-dialog { width: min(640px, calc(100% - 32px)); }
.task-line { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; margin: 10px 0; }
.task-line input, .task-line textarea { width: 100%; background: var(--input); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { background: #3a3b3c; color: var(--text); border: 0; border-radius: 8px; padding: 6px 10px; }
.chips button.on { background: #1877f2; color: white; }
.tag-cloud { display: flex; gap: 8px; flex-wrap: wrap; }
.share-row { border-bottom: 1px solid var(--line); }
.stage { background: var(--editor); overflow: auto; padding: 22px 28px 48px; display: none; flex-direction: column; }
.home-grid, .task-list, .event-list { max-width: 860px; }
.home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.panel h3 { margin: 0 0 10px; }
.composer { display: flex; gap: 8px; margin-bottom: 16px; }
.composer input { flex: 1; }
.check-row, .event-row {
  display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.check-row.done span { text-decoration: line-through; color: var(--faint); }
.popover, .menu {
  position: fixed; z-index: 28; background: var(--menu); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); min-width: 180px; padding: 6px;
}
.menu button, .popover button.menu-item {
  display: flex; width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  padding: 8px 10px; border-radius: 6px; justify-content: space-between; gap: 28px; align-items: center;
}
.menu button:hover, .popover button.menu-item:hover { background: var(--card-hover); }
.menu button:disabled { opacity: 0.4; }
.menu .kbd { color: var(--faint); font-size: 12px; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 8px; }
.menu-head { padding: 8px 10px 2px; color: var(--faint); font-size: 11px; }
.menu-app { min-width: 280px; max-height: calc(100vh - 80px); overflow: auto; }
.note-more { min-width: 292px; position: relative; }
.note-more button { gap: 10px; }
.note-more .mi { width: 1.2em; text-align: center; flex: 0 0 auto; }
.note-more .ml { flex: 1; text-align: left; }
.note-more .mk, .note-more .chev { color: var(--faint); font-size: 12px; margin-left: 16px; }
.has-sub { position: relative; }
.subpop {
  position: absolute; right: calc(100% + 8px); top: 0; z-index: 2;
  background: var(--menu); border: 1px solid var(--line); border-radius: 10px;
  min-width: 210px; padding: 6px; box-shadow: var(--shadow);
}
.editor-body details.fold { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.editor-body details.fold summary { cursor: pointer; font-weight: 700; }
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 30;
  display: grid; place-items: center;
}
.settings {
  width: min(1040px, calc(100% - 32px)); height: min(740px, calc(100% - 32px));
  background: #1c1d1f; color: var(--text); border-radius: 16px; display: grid;
  grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden; box-shadow: var(--shadow);
}
.settings.prefs { grid-template-columns: 230px 176px minmax(0, 1fr); }
.settings-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 6px 22px; }
.settings-top h1 { margin: 0; font-size: 28px; font-weight: 650; }
.settings input, .settings select { accent-color: #1877f2; }
.settings nav.sub { border-right: 1px solid var(--line); padding: 8px; }
.settings .body { position: relative; padding: 18px 26px 22px; overflow: auto; }
.settings h3 { margin: 18px 0 8px; font-size: 13px; color: var(--faint); font-weight: 600; }
.choice.column { flex-direction: column; gap: 8px; align-items: flex-start; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.setting-line, .sync-head, .sync-row, .device-row, .eye-row, .shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.theme-picks, .width-picks { display: flex; gap: 12px; flex-wrap: wrap; }
.theme-card, .width-card { display: grid; gap: 8px; justify-items: center; font-size: 13px; }
.mock, .sheet { display: block; width: 120px; height: 78px; border-radius: 8px; border: 2px solid transparent; background: #fff; }
.mock.dark { background: #2a2b2d; }
.mock.system { background: linear-gradient(90deg, #fff 50%, #2a2b2d 50%); }
.theme-card:has(input:checked) .mock, .width-card:has(input:checked) .sheet { border-color: #1877f2; }
.sheet.narrow { width: 92px; background: linear-gradient(#d7d7d7, #d7d7d7) center/70% 8px no-repeat, #fff; }
.sheet.wide { background: linear-gradient(#d7d7d7, #d7d7d7) center/88% 8px no-repeat, #fff; }
.drop-zone { border: 1px dashed #5a5d62; border-radius: 12px; min-height: 180px; display: grid; place-items: center; text-align: center; margin: 12px 0 20px; }
.drop-zone.over { border-color: #1877f2; }
.linkish { background: none; border: 0; color: #1877f2; padding: 0; font: inherit; cursor: pointer; }
.import-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.import-cards div, .device-row, .eye-row, .sync-row { background: #2a2b2e; border-radius: 10px; padding: 12px 14px; }
.sync-table { display: grid; grid-template-columns: 1fr 1fr; color: var(--faint); border-bottom: 1px solid var(--line); padding: 8px 0; margin-top: 16px; }
.sync-empty { text-align: center; padding: 48px 12px; }
.sync-apply { display: flex; justify-content: flex-end; margin-top: 18px; }
.shortcut-row { padding: 7px 0; border-bottom: 1px solid var(--line); }
.kbd-pill { border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--faint); font-size: 12px; }
.eye { background: none; border: 0; color: var(--text); font-size: 16px; cursor: pointer; }
.connected-empty { max-width: 520px; margin: 40px auto; text-align: center; }
html.strike-todos .todo input:checked + span { text-decoration: line-through; opacity: 0.65; }
[data-theme="light"] .settings { background: white; }
[data-theme="light"] .import-cards div,
[data-theme="light"] .device-row,
[data-theme="light"] .eye-row,
[data-theme="light"] .sync-row { background: #f3f4f6; }
.settings nav { padding: 18px 10px; border-right: 1px solid var(--line); }
.settings nav button { width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 10px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; }
.settings .main-nav button.active { color: #1877f2; background: transparent; }
.settings .main-nav button.active::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1877f2; margin-left: auto; }
.settings nav.sub button.active { background: #3a3b3c; }
.settings h2 { margin: 0 0 16px; }
.choice { display: flex; gap: 16px; margin: 8px 0 16px; }
.token {
  font-family: Consolas, monospace; font-size: 13px; background: var(--input);
  padding: 10px; border-radius: 8px; word-break: break-all;
}
pre.curl { white-space: pre-wrap; background: var(--input); padding: 12px; border-radius: 8px; font-size: 12px; }
.import-progress {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55);
  display: grid; place-items: center;
}
.import-card { width: min(480px, calc(100% - 32px)); }
.import-current {
  font-size: 18px; font-weight: 650; margin: 14px 0 4px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.import-count { margin: 0 0 12px; color: var(--muted); }
.import-bar { height: 8px; border-radius: 99px; background: #3a3b3c; overflow: hidden; }
.import-bar span { display: block; height: 100%; width: 0; background: #1877f2; border-radius: 99px; transition: width .2s ease; }
.import-bar.reading span { width: 40%; transition: none; animation: busy-slide 1.15s ease-in-out infinite; }
.import-meta { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; margin: 16px 0 0; font-size: 13px; }
.import-meta dt { color: var(--muted); }
.import-meta dd { margin: 0; overflow-wrap: anywhere; }
#import-summary { min-height: 1.2em; }
[data-theme="light"] .import-bar { background: #e8eaed; }
.btn-note:disabled { opacity: 0.7; cursor: progress; }
.gate:has(#busy:not(.hidden)) #gate-form { visibility: hidden; }
.gate:has(#busy.hidden) #gate-form { visibility: visible; }
.busy {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; color: #202124; text-align: center;
}
[data-theme="dark"] .busy { background: #18191a; color: #e4e6eb; }
.busy-mark { width: 88px; height: 88px; border-radius: 22px; display: block; }
.busy-name { margin: 16px 0 0; font-size: 22px; font-weight: 400; letter-spacing: 0; }
.busy-bar { width: 200px; height: 4px; margin: 28px 0 0; background: #e8eaed; overflow: hidden; position: relative; }
[data-theme="dark"] .busy-bar { background: #3a3b3c; }
.busy-bar span {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: #1877f2;
  animation: busy-long 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.busy-bar span:last-child {
  animation-name: busy-short;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: 1.15s;
}
@keyframes busy-long {
  0% { left: -35%; width: 30%; }
  60% { left: 100%; width: 100%; }
  100% { left: 100%; width: 0; }
}
@keyframes busy-short {
  0% { left: -200%; width: 200%; }
  60% { left: 107%; width: 10%; }
  100% { left: 107%; width: 0; }
}
@keyframes busy-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.busy #busy-label { margin: 18px 0 0; font-size: 13px; font-weight: 400; color: #5f6368; }
[data-theme="dark"] .busy #busy-label { color: #b0b3b8; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #1877f2;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.note-loading {
  display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 8px 0 16px;
}
.note-list.is-loading { opacity: 0.55; pointer-events: none; }
.editor-paper { position: relative; }
@media (hover: none) {
  .note-delete { opacity: 1; }
}
@media (max-width: 820px), (max-width: 1024px) and (pointer: coarse) {
  .app { grid-template-rows: calc(42px + env(safe-area-inset-top)) minmax(0, 1fr); }
  .topbar { padding-top: env(safe-area-inset-top); }
  .menu-toggle { display: grid; }
  .menubar > button { display: none; }
  .insert-label { display: none; }
  .note-back { display: grid; place-items: center; font-size: 22px; color: var(--text); }
  .workspace, .workspace.collapsed, .workspace.stage-mode, .workspace.stage-mode.collapsed {
    position: relative;
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .workspace:not(.stage-mode) .list { display: flex; }
  .workspace:not(.stage-mode) .editor { display: none; }
  .workspace.phone-note:not(.stage-mode) .list { display: none; }
  .workspace.phone-note:not(.stage-mode) .editor { display: flex; }
  .workspace.searching:not(.stage-mode) .list { display: flex; }
  .workspace.searching:not(.stage-mode) .editor { display: none; }
  .workspace.phone-max,
  .workspace.phone-max.stage-mode {
    grid-template-columns: min(240px, 62vw) minmax(0, 1fr);
  }
  .workspace.phone-max .sidebar-backdrop { display: none; }
  .workspace.phone-max .sidebar {
    position: relative; width: auto; z-index: auto; box-shadow: none;
  }
  .list-head { padding: 12px 12px 6px; }
  .list-head h2 { font-size: 22px; }
  .editor-top { height: 48px; padding: 0 8px; }
  .editor-top > button, .editor-top .btn-share, .editor-top .history-btn { flex: 0 0 auto; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; padding: 0; }
  .tool-main { display: flex; align-items: center; min-width: 0; }
  .tool-row, .toolbar.tools-open .tool-more-row {
    display: flex; align-items: center; gap: 2px; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    padding: 4px 8px; scrollbar-width: thin;
  }
  .tool-row { flex: 1; }
  .tool-more-row { display: none; }
  #format-more {
    display: inline-flex; align-items: center; flex: none; margin-right: 6px;
    color: #1877f2; font-weight: 700; background: var(--editor);
  }
  .toolbar.tools-open #format-more { background: var(--card-hover); }
  .editor-paper { padding: 16px 16px 64px; }
  #note-title { font-size: 28px; }
  .editor-bottom {
    height: auto; min-height: 46px; flex-wrap: wrap; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .stage { padding: 16px 14px 32px; }
  .home-board, .home-grid { grid-template-columns: 1fr; }
  .widget.span2 { grid-column: auto; }
  .calendar-page { grid-template-columns: 1fr; }
  .cal-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .rev-body { grid-template-columns: 1fr; grid-template-rows: 180px minmax(0, 1fr); }
  .rev-window, .settings, .settings.prefs {
    width: calc(100vw - 12px); height: calc(100dvh - 12px);
  }
  .settings, .settings.prefs { display: flex; flex-direction: column; }
  .settings nav {
    display: flex; flex: none; overflow-x: auto; gap: 2px;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 6px;
  }
  .settings nav button { width: auto; white-space: nowrap; flex: 0 0 auto; }
  .settings .body { flex: 1; min-height: 0; }
  .popover, .menu-app, .filter-pop, .note-more { max-width: calc(100vw - 16px); }
  .menu .kbd { display: none; }
  .import-cards { grid-template-columns: 1fr; }
}