:root {
  --bg: #0a0a0a; --surface: #111111; --surface2: #181818;
  --border: #222222; --border2: #2a2a2a;
  --text: #e8e8e8; --text2: #888; --text3: #444;
  --blue: #3b82f6; --blue-dim: #1e3a5f;
  --green: #10b981; --green-dim: #052e1c;
  --purple: #8b5cf6; --purple-dim: #2e1065;
  --amber: #f59e0b; --amber-dim: #1c1500;
  --red: #ef4444; --sidebar-w: 220px;
}
body.light {
  --bg: #f0f2f5; --surface: #ffffff; --surface2: #f4f6f8;
  --border: #e2e5ea; --border2: #d0d4db;
  --text: #1a1d23; --text2: #5a6070; --text3: #a0a8b8;
  --blue-dim: #dbeafe; --green-dim: #d1fae5;
  --purple-dim: #ede9fe; --amber-dim: #fef3c7;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; }

/* ─── A11y ────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
button:focus-visible, a:focus-visible { box-shadow:0 0 0 3px rgba(59,130,246,0.35); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ─── Sidebar ─────────────────────────────────────── */
.sidebar { width:var(--sidebar-w); min-height:100vh; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:24px 0; flex-shrink:0; }
.sidebar-logo { font-size:17px; font-weight:600; color:var(--text); padding:0 20px 24px; border-bottom:1px solid var(--border); letter-spacing:-0.02em; }
.sidebar-logo span { color:var(--blue); }
.sidebar-section { padding:16px 12px 8px; font-size:10px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.1em; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 20px; cursor:pointer; font-size:14px; color:var(--text2); transition:all 0.15s; border-left:2px solid transparent; user-select:none; }
.nav-item:hover { color:var(--text); background:var(--surface2); }
.nav-item.active { color:var(--text); border-left-color:var(--blue); background:rgba(59,130,246,0.06); }
.nav-item .nav-icon { font-size:15px; width:20px; text-align:center; }
.nav-item .nav-badge { margin-left:auto; background:var(--surface2); color:var(--text3); font-size:10px; font-family:'DM Mono',monospace; padding:1px 6px; border-radius:10px; }
.nav-item.active .nav-badge { background:var(--blue-dim); color:var(--blue); }

/* ─── Main Layout ─────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; min-height:100vh; overflow:hidden; }
.topbar { height:56px; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 28px; gap:12px; flex-shrink:0; background:var(--surface); }
.topbar-title { font-size:15px; font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.topbar-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.btn { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:7px; font-size:13px; font-family:'DM Sans',sans-serif; font-weight:500; cursor:pointer; border:1px solid var(--border2); background:var(--surface2); color:var(--text2); transition:all 0.15s; }
.btn:hover { color:var(--text); border-color:#444; }
.btn-primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover { background:#2563eb; border-color:#2563eb; color:#fff; }
#refresh-btn { padding:7px 10px; }
#synced-label { font-size:11px; color:var(--text3); font-family:'DM Mono',monospace; }
.content { flex:1; padding:24px 28px; overflow-y:auto; }
.view { display:none; }
.view.active { display:block; }

/* ─── Kanban (Teams Planner Style) ───────────────── */
.kanban { display:flex; gap:18px; overflow-x:auto; padding:4px 2px 20px; align-items:flex-start; }
.kanban::-webkit-scrollbar { height:5px; }
.kanban::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
.k-col { min-width:280px; width:280px; flex-shrink:0; }
.k-col-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:4px 0 10px; border-bottom:2px solid var(--border); }
.k-col-bar { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.k-col-label { font-size:13px; font-weight:600; color:var(--text); flex:1; letter-spacing:-0.01em; }
.k-col-count { font-size:11px; font-family:'DM Mono',monospace; color:var(--text3); background:var(--surface2); padding:1px 7px; border-radius:10px; border:1px solid var(--border); }
.k-cards { display:flex; flex-direction:column; gap:8px; }
.k-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 13px; cursor:pointer; transition:all 0.15s; position:relative; }
.k-card:hover { border-color:var(--border2); box-shadow:0 3px 12px rgba(0,0,0,0.18); transform:translateY(-1px); }
body.light .k-card { box-shadow:0 1px 3px rgba(0,0,0,0.06); }
body.light .k-card:hover { box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.k-card.done { opacity:0.45; }
.k-card-top { display:flex; align-items:flex-start; gap:8px; margin-bottom:4px; }
.k-card-check { margin-top:2px; accent-color:var(--blue); cursor:pointer; flex-shrink:0; width:14px; height:14px; }
.k-card-title { font-size:13px; font-weight:500; flex:1; line-height:1.45; word-break:break-word; }
.k-card.done .k-card-title { text-decoration:line-through; color:var(--text3); }
.k-card-actions { display:flex; gap:1px; opacity:0; transition:opacity 0.15s; margin-left:4px; flex-shrink:0; }
.k-card:hover .k-card-actions { opacity:1; }
.k-card-act { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; padding:2px 5px; border-radius:5px; transition:all 0.15s; line-height:1; }
.k-card-act:hover { color:var(--text); background:var(--surface2); }
.k-card-act.del:hover { color:var(--red); }
.k-card-desc { font-size:12px; color:var(--text2); line-height:1.45; margin:5px 0 8px 22px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.k-card-foot { display:flex; align-items:center; gap:6px; margin-top:8px; margin-left:22px; }
.k-card-date { font-size:11px; font-family:'DM Mono',monospace; color:var(--text3); flex:1; }
.k-card-date.overdue { color:var(--red); }
.k-card-date.today-date { color:var(--amber); }
.k-pill { font-size:10px; font-weight:500; padding:2px 8px; border-radius:10px; }
.k-pill.task { background:var(--blue-dim); color:var(--blue); }
.k-pill.event { background:var(--green-dim); color:var(--green); }
.k-empty { font-size:12px; color:var(--text3); text-align:center; padding:24px 0; letter-spacing:0.02em; }
.k-empty.big { padding:40px 0; font-size:14px; }

.col-overdue .k-col-bar { background:var(--red); }
.col-overdue .k-col-label { color:#f87171; }
.col-overdue .k-col-head { border-bottom-color:rgba(239,68,68,0.3); }
.col-today .k-col-bar { background:var(--amber); }
.col-today .k-col-label { color:var(--amber); }
.col-today .k-col-head { border-bottom-color:rgba(245,158,11,0.3); }
.col-tomorrow .k-col-bar { background:var(--blue); }
.col-tomorrow .k-col-label { color:var(--blue); }
.col-tomorrow .k-col-head { border-bottom-color:rgba(59,130,246,0.3); }
.col-week .k-col-bar { background:var(--purple); }
.col-week .k-col-label { color:var(--purple); }
.col-week .k-col-head { border-bottom-color:rgba(139,92,246,0.3); }
.col-later .k-col-bar { background:var(--text3); }
.col-open .k-col-bar { background:var(--border2); }
.col-done .k-col-bar { background:var(--green); }
.col-done .k-col-label { color:var(--green); }
.col-done .k-col-head { border-bottom-color:rgba(16,185,129,0.3); }

/* ─── Calendar ────────────────────────────────────── */
.cal-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.cal-month { font-size:22px; font-weight:600; letter-spacing:-0.02em; min-width:200px; }
.cal-nav-btn { background:var(--surface); border:1px solid var(--border2); color:var(--text2); width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.cal-nav-btn:hover { color:var(--text); border-color:#555; background:var(--surface2); }
.cal-today-btn { padding:0 14px; width:auto; font-size:12px; font-family:'DM Sans',sans-serif; font-weight:500; }
.cal-grid { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.1); }
body.light .cal-grid { box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface2); border-bottom:1px solid var(--border); }
.cal-wday { padding:12px 8px; text-align:center; font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.08em; }
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-day { min-height:140px; padding:8px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; display:flex; flex-direction:column; transition:background 0.1s; }
.cal-day:nth-child(7n) { border-right:none; }
.cal-day:not(.ghost):hover { background:rgba(59,130,246,0.03); cursor:pointer; }
body.light .cal-day:not(.ghost):hover { background:rgba(59,130,246,0.04); }
.cal-day.ghost { pointer-events:none; background:var(--surface2); }
.cal-day.ghost .cal-daynum { color:var(--text3); opacity:0.4; }
.cal-day.today-day { background:rgba(59,130,246,0.06); }
body.light .cal-day.today-day { background:rgba(59,130,246,0.04); }
.cal-daynum { font-size:13px; font-family:'DM Mono',monospace; color:var(--text2); margin-bottom:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; transition:all 0.15s; }
.cal-day.today-day .cal-daynum { background:var(--blue); color:#fff; font-weight:700; font-size:13px; }
.cal-chips { flex:1; overflow:hidden; display:flex; flex-direction:column; gap:3px; }
.cal-chip { font-size:11px; padding:3px 7px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:opacity 0.15s; flex-shrink:0; line-height:1.3; font-weight:500; }
.cal-chip:hover { opacity:0.75; }
.cal-chip.work { background:var(--blue-dim); color:#60a5fa; }
.cal-chip.private { background:var(--green-dim); color:#34d399; }
.cal-chip.outlook-chip { background:var(--purple-dim); color:#a78bfa; }
body.light .cal-chip.work { color:#2563eb; }
body.light .cal-chip.private { color:#059669; }
body.light .cal-chip.outlook-chip { color:#7c3aed; }
.cal-more { font-size:11px; color:var(--blue); padding:2px 6px; cursor:pointer; font-weight:500; display:inline-block; }
.cal-more:hover { opacity:0.75; }
.cal-legend { display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.leg { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); }
.leg-dot { width:8px; height:8px; border-radius:3px; }
.leg-dot.work { background:var(--blue); }
.leg-dot.private { background:var(--green); }
.leg-dot.outlook { background:var(--purple); }

/* ─── Day Overlay ─────────────────────────────────── */
.day-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.day-overlay.open { display:flex; }
.day-box { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:24px; width:360px; max-width:95vw; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
body.light .day-box { box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.day-box-title { font-size:17px; font-weight:600; margin-bottom:16px; letter-spacing:-0.02em; }
.day-box-chip { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:9px; cursor:pointer; font-size:13px; margin-bottom:6px; transition:opacity 0.15s; font-weight:500; }
.day-box-chip:hover { opacity:0.8; }
.day-box-chip.work { background:var(--blue-dim); color:#60a5fa; }
.day-box-chip.private { background:var(--green-dim); color:#34d399; }
.day-box-chip.outlook-chip { background:var(--purple-dim); color:#a78bfa; }
body.light .day-box-chip.work { color:#2563eb; }
body.light .day-box-chip.private { color:#059669; }
body.light .day-box-chip.outlook-chip { color:#7c3aed; }
.day-time { font-size:11px; opacity:0.7; margin-right:4px; }

/* ─── Modals ──────────────────────────────────────── */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:300; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
.overlay.open { display:flex; }
.modal-box { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:26px; width:460px; max-width:95vw; max-height:92vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
body.light .modal-box { box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.modal-box h3 { font-size:16px; font-weight:600; margin-bottom:20px; letter-spacing:-0.01em; }
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:11px; font-weight:600; color:var(--text2); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.06em; }
.fg input,.fg textarea { width:100%; background:var(--surface2); border:1px solid var(--border2); color:var(--text); padding:9px 12px; border-radius:8px; font-size:14px; font-family:'DM Sans',sans-serif; transition:border-color 0.15s; }
.fg input:focus,.fg textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.fg input:disabled { opacity:0.3; cursor:not-allowed; }
.fg textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cat-toggle { display:flex; gap:8px; }
.cat-btn { flex:1; padding:9px 8px; border:1px solid var(--border2); background:none; color:var(--text2); border-radius:8px; cursor:pointer; font-size:13px; font-family:'DM Sans',sans-serif; font-weight:500; transition:all 0.15s; }
.cat-btn.active-work { border-color:var(--blue); background:var(--blue-dim); color:#60a5fa; }
body.light .cat-btn.active-work { color:#2563eb; }
.cat-btn.active-private { border-color:var(--green); background:var(--green-dim); color:#34d399; }
body.light .cat-btn.active-private { color:#059669; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px; }
.toggle-label { font-size:13px; color:var(--text2); }
.toggle-switch { position:relative; width:36px; height:20px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--border2); border-radius:10px; cursor:pointer; transition:background 0.2s; }
.toggle-slider:before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.2s; }
.toggle-switch input:checked + .toggle-slider { background:var(--blue); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(16px); }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.modal-actions button { padding:9px 20px; border-radius:8px; cursor:pointer; font-size:14px; font-family:'DM Sans',sans-serif; font-weight:500; border:none; transition:all 0.15s; }
.btn-cancel2 { background:var(--surface2); color:var(--text2); border:1px solid var(--border2); }
.btn-cancel2:hover { color:var(--text); }
.btn-save2 { background:var(--blue); color:#fff; }
.btn-save2:hover { background:#2563eb; }

/* ─── Detail Modal ────────────────────────────────── */
.detail-box { background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:26px; width:500px; max-width:95vw; max-height:84vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
body.light .detail-box { box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.detail-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.detail-title { font-size:19px; font-weight:600; letter-spacing:-0.02em; flex:1; line-height:1.3; }
.detail-row { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; font-size:14px; }
.detail-key { color:var(--text3); width:22px; flex-shrink:0; text-align:center; }
.detail-val { color:var(--text2); line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.detail-desc { max-height:9em; overflow:hidden; transition:max-height 0.2s; }
.detail-desc.expanded { max-height:none; }
.detail-more { background:none; border:none; color:var(--blue); font-size:12px; cursor:pointer; padding:2px 0; font-family:'DM Sans',sans-serif; }
.detail-footer { display:flex; gap:8px; margin-top:22px; }
.detail-edit-btn { flex:1; padding:9px; background:var(--surface2); border:1px solid var(--border2); color:var(--text2); border-radius:8px; cursor:pointer; font-size:14px; font-family:'DM Sans',sans-serif; font-weight:500; transition:all 0.15s; }
.detail-edit-btn:hover { color:var(--blue); border-color:var(--blue); background:var(--blue-dim); }
.detail-close { flex:1; padding:9px; background:var(--surface2); border:1px solid var(--border2); color:var(--text2); border-radius:8px; cursor:pointer; font-size:14px; font-family:'DM Sans',sans-serif; font-weight:500; transition:all 0.15s; }
.detail-close:hover { color:var(--text); }
.detail-close.day-close { margin-top:16px; width:100%; padding:9px; border-radius:8px; }

.loading { color:var(--text3); font-size:14px; padding:60px; text-align:center; }

/* ─── Toasts ──────────────────────────────────────── */
#toast-stack { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:var(--surface); border:1px solid var(--border2); color:var(--text); padding:10px 16px; border-radius:10px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,0.3); opacity:0; transform:translateY(6px); transition:opacity 0.18s, transform 0.18s; max-width:90vw; }
body.light .toast { box-shadow:0 4px 14px rgba(0,0,0,0.15); }
.toast.in { opacity:1; transform:translateY(0); }
.toast.err { border-color:var(--red); color:#fca5a5; }
body.light .toast.err { color:#b91c1c; }
@media (max-width:768px) { #toast-stack { bottom:78px; } }

/* ─── Theme Toggle ────────────────────────────────── */
#theme-toggle { position:fixed; bottom:24px; right:24px; z-index:300; width:40px; height:40px; border-radius:50%; border:1px solid var(--border2); background:var(--surface); color:var(--text2); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.2); transition:all 0.15s; }
#theme-toggle:hover { color:var(--text); }

/* ─── Login overlay ──────────────────────────────────── */
#login-overlay { position:fixed; inset:0; background:var(--bg); z-index:1000; display:none; align-items:center; justify-content:center; flex-direction:column; gap:20px; }
#login-overlay.visible { display:flex; }
.login-logo { font-size:32px; font-weight:700; letter-spacing:-0.04em; text-align:center; }
.login-logo span { color:var(--blue); }
.login-sub { font-size:14px; color:var(--text2); }
.login-btn { display:inline-flex; align-items:center; gap:10px; padding:12px 22px; background:var(--surface); border:1px solid var(--border2); border-radius:10px; color:var(--text); text-decoration:none; font-size:14px; font-weight:500; transition:all 0.15s; }
.login-btn:hover { border-color:#555; background:var(--surface2); }
.login-error { font-size:12px; color:var(--red); display:none; }
.login-error.visible { display:block; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  body { flex-direction:column; height:100dvh; height:100vh; overflow:hidden; }
  .sidebar { width:100%; min-height:auto; height:58px; flex-direction:row; position:fixed; bottom:0; left:0; right:0; z-index:200; border-right:none; border-top:1px solid var(--border); padding:0; }
  .sidebar-logo { display:none; }
  .sidebar-section { display:none; }
  .nav-item { flex:1; flex-direction:column; padding:6px 4px; gap:2px; font-size:10px; border-left:none; border-top:2px solid transparent; justify-content:center; align-items:center; text-align:center; }
  .nav-item.active { background:rgba(59,130,246,0.06); border-top-color:var(--blue); border-left-color:transparent; }
  .nav-item .nav-icon { font-size:20px; width:auto; }
  .nav-item .nav-badge { margin-left:0; }
  .main { padding-bottom:58px; min-height:0; overflow-y:auto; }
  .topbar { padding:0 16px; height:52px; flex-shrink:0; }
  .topbar-title { font-size:14px; }
  .content { padding:12px; overflow-y:visible; }
  #theme-toggle { bottom:72px; right:16px; width:36px; height:36px; font-size:16px; }

  /* Kanban mobile */
  .kanban { flex-direction:column; overflow-x:visible; padding-bottom:8px; gap:12px; }
  .k-col { width:100%; min-width:0; }
  .k-card { padding:10px 11px; }
  .k-card-actions { opacity:1; }

  /* Calendar mobile */
  .cal-day { min-height:80px; padding:5px; }
  .cal-daynum { width:24px; height:24px; font-size:11px; margin-bottom:4px; }
  .cal-chip { font-size:10px; padding:2px 5px; }
  .cal-wday { padding:9px 4px; font-size:10px; }
  .cal-month { font-size:18px; min-width:160px; }
}

@media (max-width: 480px) {
  .content { padding:10px; }
  .k-col-label { font-size:12px; }
  .k-card-title { font-size:12px; }
  .k-card-act { padding:4px 7px; font-size:14px; }
  .cal-day { min-height:60px; padding:4px; }
  .cal-chip { display:none; }
  .cal-more { font-size:10px; padding:1px 4px; }
  .topbar-title { font-size:13px; }
  .form-row { grid-template-columns:1fr; }
}

@media (hover:none) {
  .k-card-actions { opacity:1; }
}