:root {
  color-scheme: light;
  --side:#1e1f21; --side-hover:#2b2c2f; --side-on:#3a3b3e; --side-text:#e6e6e7; --side-muted:#9a9b9e;
  --bg:#ffffff; --soft:#f6f7f8; --line:#e6e7e9; --line-strong:#d0d2d6; --text:#1e1f21; --muted:#6d6e6f;
  --accent:#4573d2; --accent-dark:#3a62b5; --accent-soft:#edf2fc; --brand:#f06a6a;
  --ok:#5da283; --warn:#f1bd6c; --bad:#e8384f; --radius:6px;
  --shadow:0 8px 28px rgba(30,31,33,.16);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:14px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
button, input, select, textarea { font:inherit; color:inherit; }
h1 { font-size:22px; font-weight:600; margin:0; letter-spacing:-.2px; }
h2 { font-size:16px; font-weight:600; margin:24px 0 10px; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .nowrap { white-space:nowrap; }
.hidden { display:none !important; }

/* ---------- layout ---------- */
.app { display:flex; height:100vh; overflow:hidden; }
.side { width:240px; flex:none; background:var(--side); color:var(--side-text); display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#45464a transparent; }
.brand { display:flex; align-items:center; gap:9px; padding:16px 16px 10px; color:#fff; font-weight:700; font-size:16px; }
.brand:hover { text-decoration:none; }
.brand .dot { width:22px; height:22px; border-radius:6px; background:var(--brand); display:grid; place-items:center; font-size:13px; }
.side-search { margin:4px 12px 8px; }
.side-search input { width:100%; background:var(--side-hover); border:1px solid #3a3b3e; color:#fff; border-radius:6px; padding:6px 10px; }
.side-search input::placeholder { color:var(--side-muted); }
.side-search input:focus { outline:none; border-color:#6d6e6f; }
.side-group { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--side-muted); padding:14px 16px 4px; font-weight:600; }
.side-group button, .side-group a { background:none; border:0; color:var(--side-muted); cursor:pointer; font-size:17px; line-height:1; padding:0 4px; border-radius:4px; }
.side-group button:hover, .side-group a:hover { color:#fff; background:var(--side-hover); text-decoration:none; }
.nav a, .tree a { display:flex; align-items:center; gap:9px; margin:0 8px; padding:5px 8px; border-radius:6px; color:var(--side-text); font-size:14px; min-width:0; }
.nav a:hover, .tree a:hover { background:var(--side-hover); text-decoration:none; }
.nav a.on, .tree a.on { background:var(--side-on); color:#fff; }
.nav .ico { width:18px; text-align:center; flex:none; opacity:.85; }
.nav .count { margin-left:auto; background:var(--brand); color:#fff; font-size:11px; border-radius:99px; padding:0 7px; font-weight:700; }
.swatch { width:10px; height:10px; border-radius:3px; flex:none; }
.tree ul { list-style:none; margin:0; padding:0; }
.tree ul ul { padding-left:14px; }
.tree .row { display:flex; align-items:center; }
.tree .tw { width:18px; height:22px; flex:none; background:none; border:0; color:var(--side-muted); cursor:pointer; padding:0; margin-left:6px; border-radius:4px; font-size:10px; }
.tree .tw:hover { background:var(--side-hover); color:#fff; }
.tree .tw.leaf { visibility:hidden; }
.tree a { margin-left:0; flex:1; padding-left:4px; }
.tree a span.t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-foot { margin-top:auto; padding:10px 8px 14px; border-top:1px solid #2f3033; }
.side-foot .me { display:flex; align-items:center; gap:9px; padding:6px 8px; color:var(--side-text); border-radius:6px; }
.side-foot .me:hover { background:var(--side-hover); text-decoration:none; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.head { display:flex; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid var(--line); min-height:62px; flex-wrap:wrap; }
.head .grow { flex:1; }
.content { flex:1; overflow:auto; padding:20px 24px 80px; }
.content.flush { padding:0; }
.menu-btn { display:none; background:none; border:0; font-size:20px; cursor:pointer; padding:2px 6px; }
@media (max-width: 860px) {
  .side { position:fixed; z-index:40; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform .2s; }
  body.nav-open .side { transform:none; box-shadow:var(--shadow); }
  .menu-btn { display:block; }
  .head, .content { padding-left:16px; padding-right:16px; }
}

/* ---------- controls ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:#fff; border-radius:var(--radius); padding:6px 12px; cursor:pointer; font-weight:500; color:var(--text); white-space:nowrap; }
.btn:hover { background:var(--soft); text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-dark); }
.btn.danger { color:var(--bad); }
.btn.ghost { border-color:transparent; background:none; }
.btn.ghost:hover { background:var(--soft); }
.btn.sm { padding:3px 9px; font-size:13px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=date], input[type=time], select, textarea {
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:6px 10px; background:#fff; max-width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
label { display:block; font-size:13px; font-weight:600; margin:12px 0 4px; }
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; }
.seg a, .seg button { padding:5px 12px; border:0; background:#fff; color:var(--text); cursor:pointer; font-size:13.5px; }
.seg a + a, .seg button + button { border-left:1px solid var(--line-strong); }
.seg .on { background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.seg a:hover { text-decoration:none; background:var(--soft); }
.flash { margin:12px 24px 0; padding:9px 14px; border-radius:var(--radius); background:#e8f5ee; color:#235a3f; }
.flash.err { background:#fdecee; color:#9b1c2c; }
.card { border:1px solid var(--line); border-radius:8px; padding:18px 20px; background:#fff; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
table.list { width:100%; border-collapse:collapse; }
table.list th { text-align:left; font-size:12px; font-weight:600; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
table.list td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.list tr:hover td { background:var(--soft); }
.avatar { width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-size:10.5px; font-weight:700; flex:none; }
.avatar.lg { width:30px; height:30px; font-size:12px; }
.avatar.empty { background:none; border:1.5px dashed #b4b5b8; color:#b4b5b8; }
.pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:1px 8px; border-radius:99px; background:var(--soft); color:var(--muted); white-space:nowrap; }
.empty-state { text-align:center; color:var(--muted); padding:50px 20px; }

/* ---------- task list ---------- */
.tasklist { max-width:1100px; }
.quickadd { display:flex; gap:8px; margin-bottom:14px; }
.quickadd input { flex:1; padding:8px 12px; }
.tgroup { margin-bottom:14px; }
.tgroup > h3 { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin:0; padding:8px 4px; cursor:pointer; user-select:none; }
.tgroup > h3 .n { color:var(--muted); font-weight:400; }
.tgroup > h3 .caret { width:14px; color:var(--muted); font-size:11px; transition:transform .15s; }
.tgroup.closed > h3 .caret { transform:rotate(-90deg); }
.tgroup.closed .trows { display:none; }
.tgroup.overdue > h3 { color:var(--bad); }
.trow { display:flex; align-items:center; gap:10px; padding:7px 8px; border-top:1px solid var(--line); cursor:pointer; background:#fff; }
.trows .trow:last-child { border-bottom:1px solid var(--line); }
.trow:hover { background:var(--soft); }
.trow.sel { background:var(--accent-soft); }
.trow .title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trow.done .title { color:var(--muted); text-decoration:line-through; }
.trow .meta { display:flex; align-items:center; gap:8px; flex:none; font-size:12.5px; }
.trow .due { min-width:72px; text-align:right; color:var(--muted); }
.trow .due.late { color:var(--bad); } .trow .due.today { color:var(--ok); font-weight:600; }
.trow .handle { cursor:grab; color:#c4c5c8; font-size:12px; width:10px; }
.trow.dragging { opacity:.4; }
.check { width:18px; height:18px; flex:none; border-radius:50%; border:1.5px solid #9a9b9e; background:#fff; display:grid; place-items:center; cursor:pointer; padding:0; color:transparent; font-size:11px; }
.check:hover { border-color:var(--ok); color:var(--ok); }
.check.on { background:var(--ok); border-color:var(--ok); color:#fff; }
.add-inline { display:block; width:100%; text-align:left; background:none; border:0; color:var(--muted); padding:7px 36px; cursor:pointer; }
.add-inline:hover { color:var(--text); background:var(--soft); }

/* ---------- task side panel ---------- */
.panel { position:fixed; top:0; right:0; bottom:0; width:min(560px, 100vw); background:#fff; box-shadow:var(--shadow); z-index:30; display:flex; flex-direction:column; transform:translateX(105%); transition:transform .18s ease; }
.panel.open { transform:none; }
.panel-top { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.panel-body { flex:1; overflow-y:auto; padding:16px 22px 30px; }
.panel textarea.ptitle { field-sizing:content; width:100%; overflow:hidden; border:1px solid transparent; font-size:21px; font-weight:600; resize:none; padding:4px 6px; margin-left:-7px; line-height:1.3; }
.panel textarea.ptitle:hover { border-color:var(--line); }
.fields { display:grid; grid-template-columns:110px 1fr; gap:8px 12px; align-items:center; margin:12px 0 18px; font-size:13.5px; }
.fields > .k { color:var(--muted); }
.fields select, .fields input { padding:4px 8px; }
.panel textarea.notes { width:100%; min-height:110px; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; resize:vertical; }
.panel h4 { font-size:13px; margin:22px 0 6px; color:var(--muted); font-weight:600; }
.subs .trow { border-top:1px solid var(--line); padding:5px 4px; }
.subadd { width:100%; border:0; border-bottom:1px solid var(--line); padding:6px 4px 6px 32px; }
.subadd:focus { outline:none; border-color:var(--accent); }
.comment { display:flex; gap:10px; margin:12px 0; }
.comment .who { font-weight:600; font-size:13px; }
.comment .when { color:var(--muted); font-size:12px; margin-left:6px; font-weight:400; }
.comment .body { white-space:pre-wrap; }
.panel-foot { border-top:1px solid var(--line); padding:12px 22px; background:var(--soft); }
.panel-foot textarea { width:100%; min-height:44px; border:1px solid var(--line-strong); border-radius:var(--radius); padding:7px 10px; resize:vertical; background:#fff; }
.crumb-parent { font-size:13px; margin-bottom:4px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--side); color:#fff; padding:9px 16px; border-radius:8px; box-shadow:var(--shadow); z-index:60; font-size:13.5px; display:flex; gap:14px; align-items:center; }
.toast button { background:none; border:0; color:#8fb0f0; cursor:pointer; font-weight:600; }

/* ---------- calendar ---------- */
.cal-wrap { display:flex; height:100%; }
.cal-main { flex:1; min-width:0; padding:10px 16px 16px; display:flex; flex-direction:column; }
#calendar { flex:1; min-height:500px; }
.tray { width:250px; flex:none; border-left:1px solid var(--line); padding:14px; overflow-y:auto; background:var(--soft); }
.tray h3 { font-size:13px; margin:0 0 4px; }
.tray .tray-item { background:#fff; border:1px solid var(--line); border-left:3px solid #8da3a6; border-radius:5px; padding:6px 8px; margin:6px 0; cursor:grab; font-size:13px; }
.tray .tray-item:hover { border-color:var(--line-strong); }
.fc { --fc-border-color:var(--line); --fc-today-bg-color:#fbf6e9; --fc-page-bg-color:#fff; --fc-neutral-bg-color:var(--soft); font-size:13px; }
.fc .fc-toolbar-title { font-size:19px; font-weight:600; }
.fc .fc-button { background:#fff; border:1px solid var(--line-strong); color:var(--text); font-weight:500; text-transform:capitalize; box-shadow:none !important; padding:4px 11px; }
.fc .fc-button:hover { background:var(--soft); color:var(--text); border-color:var(--line-strong); }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background:var(--accent-soft); color:var(--accent-dark); border-color:var(--line-strong); }
.fc .fc-daygrid-day-number { color:var(--muted); font-size:12.5px; padding:4px 7px; }
.fc .fc-col-header-cell-cushion { color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; }
.fc .fc-daygrid-event { border-radius:4px; padding:1px 2px; cursor:pointer; }
.fc-event .ev { display:flex; align-items:center; gap:4px; overflow:hidden; min-width:0; }
.fc-event .ev .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.fc-event .ev .a { width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.3); color:#fff; font-size:8.5px; font-weight:700; display:grid; place-items:center; flex:none; }
.fc-event .ev .c { width:12px; height:12px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); flex:none; display:grid; place-items:center; font-size:8px; color:#fff; }
.fc-event.done { opacity:.5; } .fc-event.done .t { text-decoration:line-through; }
.fc .fc-daygrid-day:hover .fc-daygrid-day-frame { background:#fafbfc; }
.fc .fc-list-event { cursor:pointer; }
.cal-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.popover { position:fixed; z-index:50; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:12px; width:290px; }
.popover input[type=text] { width:100%; }

/* ---------- docs ---------- */
.doc { max-width:860px; margin:0 auto; padding:30px 56px 140px; }
@media (max-width: 860px) { .doc { padding:20px 18px 100px; } }
.crumbs { font-size:13px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-width:0; }
.crumbs a { color:var(--muted); }
.icon-pick { font-size:42px; line-height:1; background:none; border:0; cursor:pointer; padding:4px; border-radius:8px; margin-left:-4px; }
.icon-pick:hover { background:var(--soft); }
.icon-pick.empty { font-size:13px; color:var(--muted); padding:6px 8px; }
.doc-title { field-sizing:content; width:100%; border:0; font-size:36px; font-weight:700; letter-spacing:-.5px; padding:4px 0; margin:6px 0 4px; resize:none; overflow:hidden; line-height:1.2; }
.doc-title:focus { outline:none; }
.doc-title::placeholder { color:#c7c8ca; }
.doc-meta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted); margin-bottom:14px; }
.doc-meta select, .doc-meta input { font-size:13px; padding:2px 6px; }
.meeting-box { display:grid; grid-template-columns:110px 1fr; gap:6px 12px; font-size:13.5px; background:var(--soft); border-radius:8px; padding:12px 14px; margin-bottom:16px; align-items:center; }
.meeting-box .k { color:var(--muted); }
.meeting-box input { width:100%; padding:3px 8px; }
.save-state { font-size:12.5px; color:var(--muted); min-width:70px; text-align:right; }
.save-state.err { color:var(--bad); }
.subpages { margin-top:30px; border-top:1px solid var(--line); padding-top:12px; }
.subpages a { display:flex; gap:8px; padding:5px 6px; border-radius:5px; color:var(--text); }
.subpages a:hover { background:var(--soft); text-decoration:none; }
.share-box { position:absolute; right:24px; top:56px; width:360px; z-index:20; }
.share-box input { width:100%; }
.emoji-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; }
.emoji-grid button { background:none; border:0; font-size:20px; cursor:pointer; border-radius:5px; padding:3px; }
.emoji-grid button:hover { background:var(--soft); }

/* editor content (shared by editor and public pages) */
.prose { font-size:16px; line-height:1.65; color:var(--text); }
.prose:focus, .ProseMirror:focus { outline:none; }
.prose > * + * { margin-top:.35em; }
.prose p { margin:.15em 0; min-height:1.6em; }
.prose h1 { font-size:30px; font-weight:700; margin:1.1em 0 .2em; }
.prose h2 { font-size:24px; font-weight:600; margin:1em 0 .2em; }
.prose h3 { font-size:19px; font-weight:600; margin:.9em 0 .15em; }
.prose ul, .prose ol { padding-left:1.6em; margin:.2em 0; }
.prose li p { margin:0; }
.prose blockquote { border-left:3px solid var(--text); margin:.4em 0; padding:2px 14px; }
.prose pre { background:#f7f6f3; border-radius:6px; padding:12px 14px; font-size:13.5px; overflow-x:auto; }
.prose code { background:#f1f1ef; color:#c2185b; border-radius:4px; padding:1px 4px; font-size:.88em; }
.prose pre code { background:none; color:inherit; padding:0; }
.prose hr { border:0; border-top:1px solid var(--line-strong); margin:1.2em 0; }
.prose img { max-width:100%; height:auto; border-radius:4px; display:block; margin:.5em 0; }
.prose img.ProseMirror-selectednode { outline:3px solid var(--accent); }
.prose a { color:var(--text); text-decoration:underline; text-decoration-color:#b4b5b8; text-underline-offset:2px; }
.prose a:hover { text-decoration-color:var(--text); }
.prose mark { background:#fbf3db; padding:0 2px; border-radius:2px; }
.prose table { border-collapse:collapse; width:100%; margin:.6em 0; table-layout:fixed; }
.prose th, .prose td { border:1px solid var(--line-strong); padding:6px 9px; vertical-align:top; text-align:left; }
.prose th { background:var(--soft); font-weight:600; }
.prose .selectedCell { background:var(--accent-soft); }
.prose ul[data-type=taskList] { list-style:none; padding-left:.2em; }
.prose ul[data-type=taskList] li { display:flex; gap:8px; align-items:flex-start; }
.prose ul[data-type=taskList] li > label { flex:none; margin:0; padding-top:.2em; user-select:none; }
.prose ul[data-type=taskList] li > div { flex:1; }
.prose ul[data-type=taskList] li[data-checked=true] > div { color:var(--muted); text-decoration:line-through; }
.prose ul[data-type=taskList] input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.prose details { margin:.25em 0; padding-left:0; }
.prose details > summary { cursor:pointer; list-style:none; padding-left:24px; position:relative; font-weight:500; }
.prose details > summary::-webkit-details-marker { display:none; }
.prose details > summary::before { content:"▸"; position:absolute; left:4px; top:0; color:var(--muted); transition:transform .12s; }
.prose details[open] > summary::before { transform:rotate(90deg); }
.prose details > div { padding-left:24px; }
/* tiptap renders toggles as a div with a button */
.prose div[data-type=details] { display:flex; gap:4px; margin:.25em 0; }
.prose div[data-type=details] > button { background:none; border:0; cursor:pointer; color:var(--muted); width:20px; flex:none; padding:0; height:1.6em; border-radius:4px; }
.prose div[data-type=details] > button:hover { background:var(--soft); }
.prose div[data-type=details] > button::before { content:"▸"; display:inline-block; transition:transform .12s; }
.prose div[data-type=details].is-open > button::before { transform:rotate(90deg); }
.prose div[data-type=details] > div { flex:1; min-width:0; }
.prose div[data-type=details] summary { font-weight:500; list-style:none; }
.prose div[data-type=details] summary::-webkit-details-marker { display:none; }
.prose div[data-type=details]:not(.is-open) div[data-type=detailsContent] { display:none; }
.prose .is-empty::before, .prose p.is-editor-empty:first-child::before { content:attr(data-placeholder); color:#c2c3c5; float:left; height:0; pointer-events:none; }
.prose p.is-empty:not(:focus-within)::before { content:none; }
.ProseMirror-focused p.is-empty.has-focus::before, .ProseMirror p.is-editor-empty:first-child::before { content:attr(data-placeholder); }
.slash-menu { position:fixed; z-index:70; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); width:280px; max-height:320px; overflow-y:auto; padding:5px; }
.slash-item { display:flex; flex-direction:column; align-items:flex-start; width:100%; background:none; border:0; text-align:left; padding:6px 10px; border-radius:5px; cursor:pointer; }
.slash-item b { font-weight:500; font-size:14px; }
.slash-item span { font-size:12px; color:var(--muted); }
.slash-item.on, .slash-item:hover { background:var(--soft); }
.slash-empty { padding:8px 10px; color:var(--muted); font-size:13px; }
.bubble { display:flex; background:var(--side); border-radius:7px; padding:3px; box-shadow:var(--shadow); gap:1px; }
.bubble-btn { background:none; border:0; color:#ddd; padding:4px 9px; border-radius:5px; cursor:pointer; font-weight:600; font-size:13px; }
.bubble-btn:hover { background:#3a3b3e; color:#fff; }
.bubble-btn.on { color:#8fb0f0; }
#editor { position:relative; }
#editor:not(:hover) .drag-handle { opacity:0; }
.drag-handle { color:#bfc0c2; cursor:grab; font-size:13px; letter-spacing:-3px; padding:2px 4px; border-radius:4px; line-height:1.5; margin-right:4px; user-select:none; }
.drag-handle:hover { background:var(--soft); color:var(--muted); }

/* ---------- public page ---------- */
.public { max-width:820px; margin:0 auto; padding:56px 28px 100px; }
.public h1.ptitle { font-size:38px; font-weight:700; letter-spacing:-.5px; margin:8px 0 22px; }
.public .picon { font-size:52px; }

/* ---------- auth pages ---------- */
.auth { min-height:100vh; display:grid; place-items:center; background:var(--soft); padding:20px; }
.auth .card { width:min(400px, 100%); }
.auth input { width:100%; }
.auth h1 { text-align:center; margin-bottom:6px; }
.log { background:#1e1f21; color:#ddd; font:12.5px/1.5 ui-monospace,Consolas,monospace; padding:14px; border-radius:8px; white-space:pre-wrap; max-height:60vh; overflow:auto; }