/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg0: #ffffff; --bg1: #f8f7f5; --bg2: #f0efe9; --bg3: #e8e6de;
  --tx0: #18181a; --tx1: #5a5856; --tx2: #9b9990;
  --border: rgba(0,0,0,0.09); --border-md: rgba(0,0,0,0.15);
  --accent: #185FA5; --accent-bg: #e6f1fb; --accent-tx: #0c447c;
  --green: #3B6D11; --green-bg: #eaf3de; --green-tx: #27500a;
  --amber: #BA7517; --amber-bg: #faeeda; --amber-tx: #633806;
  --red: #A32D2D; --red-bg: #fcebeb; --red-tx: #501313;
  --gray-bg: #f0efe9; --gray-tx: #5f5e5a;
  --sidebar-w: 242px; --sidebar-collapsed: 52px; --header-h: 52px;
  --radius: 8px; --radius-lg: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg0: #1c1b19; --bg1: #232220; --bg2: #2b2a27; --bg3: #35332f;
    --tx0: #f0ede6; --tx1: #a09d96; --tx2: #6a6860;
    --border: rgba(255,255,255,0.08); --border-md: rgba(255,255,255,0.15);
    --accent: #5ba3e8; --accent-bg: #1a2c3e; --accent-tx: #93c5f5;
    --green: #639922; --green-bg: #1a2a0a; --green-tx: #9fd455;
    --amber: #EF9F27; --amber-bg: #2a1e00; --amber-tx: #f5c36b;
    --red: #E24B4A; --red-bg: #2a0e0e; --red-tx: #f08080;
    --gray-bg: #2b2a27; --gray-tx: #a09d96;
  }
}

html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; background: var(--bg2); color: var(--tx0); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg2); }
.login-card { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 2.25rem; width: 100%; max-width: 360px; }
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.login-logo i { font-size: 22px; color: var(--accent); }
.login-logo h1 { font-size: 17px; font-weight: 500; }
.login-card label { display: block; font-size: 12px; color: var(--tx1); margin-bottom: 5px; margin-top: 14px; }
.login-card input { width: 100%; padding: 9px 12px; border: 0.5px solid var(--border-md); border-radius: var(--radius); background: var(--bg1); color: var(--tx0); font-size: 14px; outline: none; transition: border-color 0.15s; }
.login-card input:focus { border-color: var(--accent); }
.btn-primary { display: block; width: 100%; margin-top: 1.25rem; padding: 10px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.15s; }
.btn-primary:hover { opacity: 0.88; }
.login-error { color: var(--red); font-size: 12px; margin-top: 10px; }

.app-wrap { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--bg0); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s ease, min-width 0.2s ease; flex-shrink: 0; }
.sidebar.collapsed { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); }
.sidebar-header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 0.5px solid var(--border); flex-shrink: 0; }
.sidebar-brand { display: flex; align-items: center; gap: 9px; overflow: hidden; white-space: nowrap; }
.sidebar-brand i { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.sidebar-brand span { font-size: 13px; font-weight: 500; color: var(--tx0); }
.sidebar-toggle { background: none; border: none; cursor: pointer; color: var(--tx2); padding: 6px; border-radius: var(--radius); flex-shrink: 0; line-height: 1; }
.sidebar-toggle:hover { background: var(--bg1); color: var(--tx1); }
.sidebar-toggle i { font-size: 17px; display: block; }
.sidebar-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }
.sidebar-body::-webkit-scrollbar { width: 3px; }
.sidebar-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sidebar-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tx2); padding: 6px 14px 3px; white-space: nowrap; overflow: hidden; }
.sidebar-item { display: flex; align-items: center; gap: 9px; padding: 6px 12px; cursor: pointer; transition: background 0.1s; overflow: hidden; white-space: nowrap; }
.sidebar-item:hover { background: var(--bg1); }
.sidebar-item.active { background: var(--accent-bg); }
.sidebar-item .si-icon { font-size: 15px; color: var(--tx2); flex-shrink: 0; }
.sidebar-item.active .si-icon { color: var(--accent); }
.sidebar-item .si-text { flex: 1; overflow: hidden; }
.sidebar-item .si-name { font-size: 12.5px; color: var(--tx0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-item .si-sub { font-size: 10.5px; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-item.active .si-name { color: var(--accent-tx); font-weight: 500; }
.status-pip { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pip-active { background: var(--green); } .pip-waiting { background: var(--amber); } .pip-blocked { background: var(--red); }
.pip-backburner, .pip-not_started { background: var(--tx2); } .pip-complete { background: var(--green); opacity: 0.5; }
.sidebar-divider { height: 0.5px; background: var(--border); margin: 6px 0; }
.cat-row { display: flex; align-items: center; padding: 5px 12px; cursor: pointer; transition: background 0.1s; overflow: hidden; }
.cat-row:hover { background: var(--bg1); }
.cat-row .cr-icon { font-size: 15px; color: var(--tx2); flex-shrink: 0; }
.cat-row .cr-name { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--tx1); padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .cr-badge { font-size: 10px; background: var(--bg2); color: var(--tx1); border-radius: 10px; padding: 1px 7px; flex-shrink: 0; cursor: pointer; border: 0.5px solid var(--border); transition: background 0.1s, color 0.1s; }
.cat-row .cr-badge:hover { background: var(--accent-bg); color: var(--accent-tx); }
.cat-row .cr-chevron { font-size: 13px; color: var(--tx2); flex-shrink: 0; transition: transform 0.15s; }
.cat-row.expanded .cr-chevron { transform: rotate(90deg); }
.cat-subs { overflow: hidden; }
.cat-sub-item { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 30px; cursor: pointer; transition: background 0.1s; overflow: hidden; }
.cat-sub-item:hover { background: var(--bg1); }
.cat-sub-item .cs-name { font-size: 12px; color: var(--tx0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sidebar-footer { border-top: 0.5px solid var(--border); padding: 8px; flex-shrink: 0; }
.see-all-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: none; border: 0.5px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--tx1); font-size: 12.5px; transition: background 0.1s; white-space: nowrap; overflow: hidden; }
.see-all-btn:hover { background: var(--bg1); }
.see-all-btn i { font-size: 15px; flex-shrink: 0; }
.sidebar.collapsed .sidebar-label,.sidebar.collapsed .si-text,.sidebar.collapsed .sidebar-brand span,.sidebar.collapsed .cat-subs,.sidebar.collapsed .cr-name,.sidebar.collapsed .cr-badge,.sidebar.collapsed .cr-chevron,.sidebar.collapsed .see-all-btn span,.sidebar.collapsed .see-all-btn .badge-count { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: 8px; }
.sidebar.collapsed .cat-row { justify-content: center; }
.sidebar.collapsed .see-all-btn { justify-content: center; padding: 8px; }
.sidebar.collapsed .status-pip { display: none; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.main-header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--bg0); border-bottom: 0.5px solid var(--border); flex-shrink: 0; gap: 12px; }
.main-header h2 { font-size: 15px; font-weight: 500; color: var(--tx0); display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breadcrumb-sep { color: var(--tx2); font-size: 13px; }
.breadcrumb-link { color: var(--tx2); cursor: pointer; font-weight: 400; font-size: 13px; }
.breadcrumb-link:hover { color: var(--accent); }
.header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-sm { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: none; border: 0.5px solid var(--border-md); border-radius: var(--radius); font-size: 12px; color: var(--tx1); cursor: pointer; white-space: nowrap; transition: background 0.1s; }
.btn-sm:hover { background: var(--bg1); }
.btn-sm i { font-size: 14px; }
.btn-sm.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-sm.accent:hover { opacity: 0.88; }
.tickler-badge { background: var(--amber-bg); color: var(--amber-tx); border-color: var(--amber); }
.main-body { flex: 1; overflow-y: auto; padding: 20px; }
.main-body::-webkit-scrollbar { width: 4px; }
.main-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tx2); }
.tickler-bar { background: var(--amber-bg); border: 0.5px solid var(--amber); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; }
.tickler-bar i { font-size: 15px; color: var(--amber); flex-shrink: 0; margin-top: 1px; }
.tickler-bar-content { flex: 1; }
.tickler-bar-title { font-size: 12px; font-weight: 500; color: var(--amber-tx); margin-bottom: 4px; }
.tickler-item { font-size: 12px; color: var(--amber-tx); display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.tickler-item-text { flex: 1; }
.tickler-dismiss-btn { font-size: 11px; color: var(--amber-tx); background: none; border: 0.5px solid var(--amber); border-radius: 4px; padding: 1px 7px; cursor: pointer; flex-shrink: 0; }
.tickler-dismiss-btn:hover { background: rgba(0,0,0,0.06); }
.priority-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 24px; }
.proj-card { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; }
.proj-card:hover { border-color: var(--border-md); }
.proj-card.priority { border-left: 3px solid var(--accent); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.proj-card-name { font-size: 13px; font-weight: 500; color: var(--tx0); line-height: 1.35; }
.badge { font-size: 10px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; font-weight: 500; }
.badge-active { background: var(--green-bg); color: var(--green-tx); }
.badge-waiting { background: var(--amber-bg); color: var(--amber-tx); }
.badge-blocked { background: var(--red-bg); color: var(--red-tx); }
.badge-backburner, .badge-not_started { background: var(--gray-bg); color: var(--gray-tx); }
.badge-complete { background: var(--green-bg); color: var(--green-tx); opacity: 0.7; }
.proj-card-next { font-size: 11.5px; color: var(--tx1); line-height: 1.5; margin-bottom: 8px; }
.proj-card-next strong { color: var(--tx0); font-weight: 500; }
.proj-card-waiting { font-size: 11px; color: var(--amber-tx); background: var(--amber-bg); border-radius: var(--radius); padding: 4px 8px; margin-bottom: 8px; }
.proj-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta-item { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--tx2); }
.meta-item i { font-size: 12px; }
.cat-highlight { margin-bottom: 18px; }
.cat-highlight-header { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cat-highlight-header .cat-hl-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tx2); display: flex; align-items: center; gap: 5px; }
.cat-highlight-header .cat-hl-name i { font-size: 13px; }
.cat-hl-link { font-size: 11px; color: var(--accent); cursor: pointer; margin-left: auto; }
.cat-hl-link:hover { text-decoration: underline; }
.proj-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius); margin-bottom: 5px; cursor: pointer; transition: border-color 0.12s; }
.proj-list-item:hover { border-color: var(--border-md); }
.proj-list-item .pli-name { font-size: 12.5px; font-weight: 500; color: var(--tx0); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-list-item .pli-sub { font-size: 11px; color: var(--tx2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-detail-meta { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; }
.proj-detail-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.proj-detail-desc { font-size: 13px; color: var(--tx1); line-height: 1.65; margin-bottom: 12px; }
.proj-waiting-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.waiting-chip { display: flex; align-items: center; gap: 5px; background: var(--amber-bg); color: var(--amber-tx); border-radius: var(--radius); padding: 4px 10px; font-size: 11.5px; }
.waiting-chip i { font-size: 13px; }
.last-session-box { background: var(--amber-bg); border: 0.5px solid var(--amber); border-radius: var(--radius); padding: 10px 14px; }
.last-session-box .ls-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.last-session-box .ls-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--amber-tx); display: flex; align-items: center; gap: 5px; }
.last-session-box .ls-label i { font-size: 13px; }
.ls-history-link { font-size: 11px; color: var(--amber-tx); cursor: pointer; text-decoration: underline; background: none; border: none; font-family: inherit; }
.last-session-box .ls-text { font-size: 12.5px; color: var(--amber-tx); line-height: 1.6; }
.no-session { font-size: 12px; color: var(--tx2); font-style: italic; }
.tasks-section { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.tasks-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 0.5px solid var(--border); }
.tasks-header h3 { font-size: 13px; font-weight: 500; color: var(--tx0); }
.task-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); transition: background 0.1s; }
.task-item:last-child { border-bottom: none; }
.task-item:hover { background: var(--bg1); }
.task-item.drag-over { background: var(--accent-bg); }
.task-drag { font-size: 16px; color: var(--tx2); cursor: grab; margin-top: 1px; flex-shrink: 0; }
.task-drag:active { cursor: grabbing; }
.task-status-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; cursor: pointer; }
.task-status-icon.s-complete { color: var(--green); } .task-status-icon.s-working { color: var(--accent); }
.task-status-icon.s-waiting { color: var(--amber); } .task-status-icon.s-blocked { color: var(--red); }
.task-status-icon.s-not_started { color: var(--tx2); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 12.5px; font-weight: 500; color: var(--tx0); margin-bottom: 3px; }
.task-title.done { text-decoration: line-through; color: var(--tx2); font-weight: 400; }
.task-notes { font-size: 11px; color: var(--tx2); line-height: 1.5; }
.task-assignee { font-size: 10.5px; color: var(--tx2); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.task-assignee i { font-size: 12px; }
.task-assignee.waiting-on { color: var(--amber-tx); }
.task-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.1s; }
.task-item:hover .task-actions { opacity: 1; }
.task-btn { background: none; border: none; cursor: pointer; color: var(--tx2); padding: 3px; border-radius: 4px; line-height: 1; }
.task-btn:hover { color: var(--tx0); background: var(--bg2); }
.task-btn i { font-size: 14px; }
.task-btn.danger:hover { color: var(--red); }
.all-projects-cat { margin-bottom: 20px; }
.all-cat-header { display: flex; align-items: center; gap: 8px; padding: 6px 0; margin-bottom: 8px; border-bottom: 0.5px solid var(--border); }
.all-cat-header .ach-name { font-size: 12px; font-weight: 600; color: var(--tx1); text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 6px; }
.all-cat-header .ach-name i { font-size: 14px; }
.all-cat-count { font-size: 11px; color: var(--tx2); margin-left: auto; }
.sort-toggle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.sort-option { font-size: 12px; color: var(--tx2); cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.sort-option.active { background: var(--accent-bg); color: var(--accent-tx); font-weight: 500; }
.log-entry { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.log-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.log-date { font-size: 11px; color: var(--tx2); }
.log-source { font-size: 10px; padding: 1px 7px; border-radius: 6px; background: var(--bg2); color: var(--tx1); }
.log-source.claude { background: var(--accent-bg); color: var(--accent-tx); }
.log-source.gemini { background: var(--green-bg); color: var(--green-tx); }
.log-source.chatgpt { background: var(--green-bg); color: var(--green-tx); }
.log-source.manual { background: var(--gray-bg); color: var(--gray-tx); }
.log-content { font-size: 12.5px; color: var(--tx1); line-height: 1.65; }
.category-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 60px 16px 16px; overflow-y: auto; }
.modal { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 480px; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 0.5px solid var(--border); }
.modal-header h3 { font-size: 14px; font-weight: 500; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--tx2); padding: 4px; border-radius: 4px; line-height: 1; }
.modal-close:hover { color: var(--tx0); }
.modal-close i { font-size: 18px; display: block; }
.modal-body { padding: 18px; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; color: var(--tx1); margin-bottom: 5px; font-weight: 500; }
.form-input,.form-select,.form-textarea { width: 100%; padding: 8px 11px; background: var(--bg1); border: 0.5px solid var(--border-md); border-radius: var(--radius); color: var(--tx0); font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.15s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 0.5px solid var(--border); }
.btn-cancel { padding: 8px 14px; background: none; border: 0.5px solid var(--border-md); border-radius: var(--radius); font-size: 13px; color: var(--tx1); cursor: pointer; }
.btn-cancel:hover { background: var(--bg1); }
.btn-save { padding: 8px 16px; background: var(--accent); border: none; border-radius: var(--radius); font-size: 13px; color: #fff; cursor: pointer; font-weight: 500; }
.btn-save:hover { opacity: 0.88; }
.settings-section { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; max-width: 480px; margin-bottom: 16px; }
.settings-section h3 { font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--tx2); }
.empty-state i { font-size: 36px; display: block; margin-bottom: 10px; }
.empty-state p { font-size: 13px; }
.api-info { background: var(--bg0); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; }
.api-info h3 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.code-block { background: var(--bg2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11.5px; color: var(--tx0); overflow-x: auto; white-space: pre; margin-bottom: 8px; }
@media (max-width: 700px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; transform: translateX(-100%); transition: transform 0.22s ease; width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important; box-shadow: 2px 0 20px rgba(0,0,0,0.15); }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 199; }
  .mobile-overlay.visible { display: block; }
  .mobile-menu-btn { display: flex !important; }
  .sidebar.collapsed { transform: translateX(-100%); }
}
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--tx1); padding: 6px; border-radius: var(--radius); }
.mobile-menu-btn i { font-size: 20px; }
.task-item.dragging { opacity: 0.4; }