:root {
  --bg:#ffffff; --side:#f9f9f9; --surface:#ffffff; --surface2:#f1f3f4; --ink:#1f1f1f; --ink2:#5f6368; --ink3:#80868b;
  --line:#e3e3e3; --accent:#111111; --accentOn:#ffffff; --danger:#d93025; --bubble:#f1f1f1; --hover:#ececec;
  --shadow:0 8px 28px rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#212121; --side:#171717; --surface:#2a2a2a; --surface2:#2f2f2f; --ink:#ececec; --ink2:#b4b4b4; --ink3:#8e8e8e;
    --line:#3a3a3a; --accent:#f2f2f2; --accentOn:#111111; --danger:#f28b82; --bubble:#303030; --hover:#2a2a2a; --shadow:0 8px 28px rgba(0,0,0,.5); }
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.center { min-height:100%; display:grid; place-items:center; padding:24px 16px; }
.card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow); }
.mark { width:48px; height:48px; border-radius:14px; background:var(--accent); color:var(--accentOn); display:grid; place-items:center; font-weight:700; font-size:22px; margin-bottom:14px; }
h1 { font-size:22px; margin:0 0 6px; }
.lead { color:var(--ink2); margin:0 0 18px; }
.fine { color:var(--ink3); font-size:12.5px; margin:14px 0 0; }
.msg { min-height:20px; margin:12px 0 0; color:var(--ink2); }
.msg.err { color:var(--danger); }
.btn { border:1px solid var(--line); border-radius:999px; padding:11px 18px; font-weight:600; }
.btn:hover { background:var(--hover); }
.btn.primary { background:var(--accent); color:var(--accentOn); border-color:var(--accent); }
.btn.primary:hover { opacity:.9; }
.btn.wide { width:100%; min-height:48px; }
.btn:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.link { color:var(--ink2); text-decoration:underline; padding:6px 0; }

.shell { display:grid; grid-template-columns:280px 1fr; height:100%; }
.side { background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.side-top { display:flex; align-items:center; justify-content:space-between; padding:14px 12px 8px 16px; }
.brand { font-size:20px; font-weight:300; letter-spacing:.2px; }
.dot { color:var(--ink3); }
.icon-btn { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--ink2); }
.icon-btn:hover { background:var(--hover); }
.search { margin:4px 12px 8px; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; }

.tabs { display:flex; gap:4px; margin:4px 12px 6px; padding:3px; background:var(--surface2); border-radius:12px; }
.tab { flex:1; padding:7px 0; border-radius:9px; color:var(--ink2); font-weight:600; font-size:13.5px; }
.tab.on { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.list { flex:1; overflow:auto; padding:4px 8px 12px; }
.group { color:var(--ink3); font-size:12px; font-weight:600; padding:14px 10px 4px; }
.link-group { width:100%; text-align:left; }
.link-group:hover { color:var(--ink); }
.item { display:flex; align-items:center; border-radius:10px; }
.item:hover { background:var(--hover); }
.item.active { background:var(--surface2); }
.item.active .item-main { font-weight:600; }
.item-main { flex:1; min-width:0; text-align:left; padding:9px 10px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-more { width:32px; height:32px; border-radius:8px; color:var(--ink3); opacity:0; flex:none; }
.item:hover .item-more, .item.active .item-more, .item-more:focus-visible { opacity:1; }
.item-more:hover { background:var(--surface2); color:var(--ink); }
@media (hover: none) { .item-more { opacity:1; } }
.pad { padding:12px 10px; }
.side-bottom { border-top:1px solid var(--line); padding:8px 10px 10px; display:grid; gap:4px; }
.side-bottom .fine { margin:0 6px; }
.acct { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:10px; color:var(--ink); text-align:left; }
.acct:hover { background:var(--hover); }

.main { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; position:relative; }
.bar { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); min-height:56px; }
.bar h2 { font-size:16px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.view { flex:1; display:flex; flex-direction:column; min-height:0; position:relative; }
.bar-actions { margin-left:auto; display:flex; gap:4px; }
.bar h2 { flex:1; min-width:0; }
.thread { flex:1; overflow:auto; padding:24px 16px 12px; }
.turn { flex-wrap:wrap; }
.turn-tools { flex-basis:100%; display:flex; gap:10px; align-items:center; margin-top:4px; opacity:.0; transition:opacity .15s; }
.turn:hover .turn-tools, .turn:focus-within .turn-tools { opacity:1; }
@media (hover: none) { .turn-tools { opacity:1; } }
.tiny { font-size:12px; color:var(--ink3); padding:2px 0; }
.tiny:hover { color:var(--ink); text-decoration:underline; }
.inline { margin:0; }
.bubble p { margin:0 0 10px; } .bubble p:last-child { margin-bottom:0; }
.bubble ul, .bubble ol { margin:0 0 10px; padding-left:22px; } .bubble li { margin:2px 0; }
.bubble pre { background:var(--surface2); padding:12px; border-radius:10px; overflow:auto; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.bubble code { background:var(--surface2); padding:1px 5px; border-radius:5px; font:13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.bubble pre code { background:none; padding:0; }
.bubble blockquote { margin:0 0 10px; padding-left:12px; border-left:3px solid var(--line); color:var(--ink2); }
.bubble h3, .bubble h4, .bubble h5 { margin:12px 0 6px; font-size:15.5px; }
.bubble a { color:inherit; text-decoration:underline; }
.turn.assistant .bubble { white-space:normal; }
.btn.small { padding:6px 12px; font-size:13px; margin-top:8px; display:block; }
.btn.danger { color:var(--danger); border-color:var(--danger); }
.btn.danger-fill { background:var(--danger); color:#fff; border-color:var(--danger); }
.turn { max-width:760px; margin:0 auto 18px; display:flex; }
.turn.user { justify-content:flex-end; }
.bubble { white-space:pre-wrap; word-wrap:break-word; max-width:85%; }
.turn.user .bubble { background:var(--bubble); padding:10px 14px; border-radius:18px; }
.turn.assistant .bubble { max-width:100%; }
.turn.error .bubble { color:var(--danger); }
.turn.pending .bubble { color:var(--ink3); }
.empty { position:absolute; inset:56px 0 140px; display:grid; place-items:center; align-content:center; gap:4px; color:var(--ink2); pointer-events:none; }
.empty .mark { margin:0 auto 8px; }
.composer { max-width:800px; width:calc(100% - 32px); margin:0 auto; display:flex; align-items:flex-end; gap:8px; border:1px solid var(--line); border-radius:24px; padding:8px 8px 8px 16px; background:var(--surface); box-shadow:var(--shadow); }
.composer textarea { flex:1; border:0; outline:none; resize:none; background:transparent; color:var(--ink); font:inherit; max-height:200px; padding:8px 0; }
.send { width:40px; height:40px; border-radius:999px; background:var(--accent); color:var(--accentOn); display:grid; place-items:center; flex:none; }
.send:disabled { opacity:.35; cursor:default; }
.foot { text-align:center; margin:8px 16px 12px; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; padding:16px; z-index:10; }
.only-narrow { display:none; }

@media (max-width: 760px) {
  .shell { grid-template-columns:1fr; }
  .side { position:fixed; inset:0 25% 0 0; z-index:5; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }
  .side.open { transform:none; }
  .only-narrow { display:grid; }
  .composer { width:calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { .side { transition:none; } }

.form { display:grid; gap:12px; }
.field { display:grid; gap:4px; font-size:13px; color:var(--ink2); }
.field input { padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; }
.or { display:flex; align-items:center; gap:10px; color:var(--ink3); font-size:12px; margin:16px 0 12px; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }

.note-view { overflow:auto; }
.note-wrap { max-width:760px; width:100%; margin:0 auto; padding:24px 20px 60px; }
.note-title { width:100%; font-family:inherit; font-size:26px; font-weight:650; line-height:1.3; border:0; outline:none; background:transparent; color:var(--ink); padding:4px 0; }
.note-body { width:100%; border:0; outline:none; resize:none; background:transparent; color:var(--ink); font:inherit; line-height:1.6; margin-top:12px; min-height:240px; }
.checklist { display:grid; gap:6px; margin-top:14px; }
.check { display:flex; gap:10px; align-items:flex-start; }
.check input { margin-top:4px; width:18px; height:18px; accent-color:var(--accent); }
.check.done span { text-decoration:line-through; color:var(--ink3); }
.check-add { border:0; border-bottom:1px dashed var(--line); background:transparent; color:var(--ink); font:inherit; padding:6px 0; outline:none; }
.settings h3 { margin:22px 0 8px; font-size:15px; }
.setting { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.setting p { margin:4px 0 0; }
.ask-input { width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; margin-top:4px; }
.menu { position:fixed; z-index:20; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; }
.menu-item { display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; white-space:pre; }
.menu-item:hover, .menu-item:focus-visible { background:var(--hover); outline:none; }
.menu-item.danger { color:var(--danger); }
.menu-sep { height:1px; background:var(--line); margin:4px 2px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--accent); color:var(--accentOn); padding:10px 16px; border-radius:999px; box-shadow:var(--shadow); z-index:30; font-size:14px; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:4; }
@media (min-width: 761px) { .scrim { display:none !important; } }

.cal-view { overflow:auto; padding:16px 20px 40px; }
.cal-head { display:flex; align-items:center; gap:6px; max-width:1000px; margin:0 auto 10px; width:100%; }
.cal-head h3 { margin:0 8px; font-size:18px; min-width:180px; text-transform:capitalize; }
.btn.small-inline { padding:6px 14px; font-size:13px; margin-left:auto; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; max-width:1000px; margin:0 auto; width:100%; }
.cal-wd { font-size:12px; color:var(--ink3); text-align:center; padding:4px 0; font-weight:600; }
.cal-cell { min-height:92px; text-align:left; border:1px solid var(--line); border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:2px; overflow:hidden; background:var(--surface); }
.cal-cell:hover { background:var(--hover); }
.cal-cell.out { opacity:.45; }
.cal-cell.sel { outline:2px solid var(--accent); outline-offset:-1px; }
.cal-num { font-size:12.5px; font-weight:600; color:var(--ink2); }
.cal-cell.today .cal-num { background:var(--accent); color:var(--accentOn); border-radius:999px; padding:0 7px; align-self:flex-start; }
.cal-ev { font-size:11.5px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid var(--c); padding-left:5px; color:var(--ink); }
.cal-ev.allday { background:color-mix(in srgb, var(--c) 22%, transparent); border-radius:4px; }
.cal-more { font-size:11px; color:var(--ink3); }
.cal-day { max-width:1000px; margin:18px auto 0; width:100%; }
.cal-day h4 { margin:0 0 10px; font-size:16px; }
.cal-row { display:flex; gap:14px; padding:10px 12px; border-left:4px solid var(--c); background:var(--surface); border-radius:10px; margin-bottom:8px; border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-time { width:120px; flex:none; color:var(--ink2); font-size:13.5px; font-variant-numeric:tabular-nums; }
.cal-title { font-weight:600; }
.cal-notes { white-space:pre-wrap; color:var(--ink2); font-size:13.5px; margin-top:4px; }
.cal-link { display:inline-block; margin-top:6px; color:inherit; font-size:13.5px; }
.cal-item { gap:8px; padding:6px 8px; cursor:pointer; }
.cal-item input { accent-color:var(--accent); }
.dot-c { width:10px; height:10px; border-radius:999px; flex:none; }
.tab { font-size:13px; }
@media (max-width: 760px) { .cal-cell { min-height:56px; } .cal-ev { display:none; } .cal-cell .cal-num + .cal-ev { display:block; font-size:0; height:4px; border-left:0; background:var(--c); border-radius:2px; } .cal-time { width:84px; } }