:root {
  --ink: #25263b;
  --muted: #85879c;
  --line: #ececf3;
  --canvas: #f7f7fb;
  --surface: #fff;
  --violet: #635bdf;
  --violet-soft: #f0efff;
  --green: #258a68;
  --shadow: 0 10px 30px rgba(37, 38, 59, .045);
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }
body { color: var(--ink); background: var(--canvas); }
.shell { min-height: 100vh; }
.sidebar {
  width: 252px; padding: 26px 17px 20px; background: #fff; color: var(--ink);
  border-right: 1px solid var(--line); box-shadow: 3px 0 18px rgba(37,38,59,.018);
}
.brand { padding: 0 9px 40px; gap: 11px; font-size: 16px; }
.brand strong { letter-spacing: -.035em; }
.brand small { color: #9a9bad; font-size: 11px; }
.brand-mark { background: var(--violet); color: white; border-radius: 13px; box-shadow: 0 5px 13px #635bdf36; }
.side-label { color: #a2a3b1; font-size: 10px; letter-spacing: .13em; }
.sidebar nav { gap: 5px; }
.nav-item {
  min-height: 46px; padding: 8px 10px; border-radius: 12px; gap: 11px;
  color: #74768b; font-size: 13px; font-weight: 700; transition: .18s ease;
}
.nav-item:hover { color: var(--violet); background: #f8f7ff; }
.nav-item.active { color: var(--violet); background: var(--violet-soft); }
.nav-dot { width: 27px; height: 27px; border-radius: 9px; }
.nav-item b { color: #9798a8; font-size: 11px; }
.sidebar-bottom { border-color: var(--line); }
.source-status { color: #585a70; font-size: 12px; }
.sidebar-bottom p { color: #9697a7; font-size: 11px; }
.main { max-width: 1600px; padding: 35px clamp(20px, 3.3vw, 52px) 64px; }
.topbar { margin-bottom: 24px; }
.topbar .eyebrow { color: #9b9caf; font-size: 10px; letter-spacing: .12em; }
.topbar h1 { color: var(--ink); font-size: clamp(27px, 2.5vw, 34px); letter-spacing: -.055em; }
.subhead { color: #85879a; font-size: 13px; }
.primary-button { background: var(--violet); border-radius: 11px; padding: 12px 17px; box-shadow: 0 6px 15px #635bdf30; transition: .18s ease; }
.primary-button:hover { background: #5148cb; transform: translateY(-1px); }
.secondary-button { border-radius: 10px; }
.view-tabs { margin: -2px 0 21px; background: #eeedf4; border-radius: 13px; }
.view-tab { color: #85869a; font-size: 13px; }
.view-tab.active { color: var(--violet); box-shadow: 0 2px 8px #28284412; }
.metrics { gap: 13px; margin-bottom: 17px; }
.metric {
  position: relative; overflow: hidden; min-height: 112px; padding: 17px 19px;
  border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow);
}
.metric::after { content: ""; position: absolute; width: 58px; height: 58px; right: 14px; top: 14px; border-radius: 19px; background: #f4f3ff; opacity: .9; }
.metric:nth-child(2)::after { background: #fff0ef; }
.metric:nth-child(3)::after { background: #fff6e9; }
.metric:nth-child(4)::after { background: #eaf8f2; }
.metric span { position: relative; z-index: 1; color: #85879a; font-size: 12px; font-weight: 650; }
.metric strong { position: relative; z-index: 1; margin: 9px 0 1px; font-size: 30px; letter-spacing: -.06em; }
.metric small { position: relative; z-index: 1; color: #a0a1af; font-size: 11px; }
.metric-alert strong { color: #e16c68; }
.content-grid { grid-template-columns: minmax(0, 1.5fr) minmax(305px, .86fr); gap: 17px; }
.left-column, .right-column { gap: 16px; }
.panel, .team-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 17px;
  box-shadow: var(--shadow); padding: 20px;
}
.section-heading { margin-bottom: 17px; }
.section-heading h2 { color: var(--ink); font-size: 17px; letter-spacing: -.035em; }
.section-heading .eyebrow { color: #a0a1b0; font-size: 9px; letter-spacing: .13em; }
.pill { background: var(--violet-soft); color: var(--violet); border-radius: 8px; padding: 7px 9px; font-size: 10px; }
.task-list { gap: 7px; }
.task-row {
  position: relative; gap: 12px; padding: 13px 11px; border: 1px solid transparent;
  border-radius: 12px; background: #fafafe; transition: .18s ease;
}
.task-row:hover { background: #fff; border-color: #e5e3fb; box-shadow: 0 5px 14px #342d7710; transform: translateY(-1px); }
.task-check { width: 20px; min-width: 20px; height: 20px; min-height: 20px; border: 1.6px solid #d4d5e1; border-radius: 50%; color: white; transition: .18s ease; }
.task-check:hover { border-color: var(--violet); background: var(--violet); }
.task-main { align-self: center; }
.task-title { color: #34354b; font-size: 13px; font-weight: 750; letter-spacing: -.012em; }
.task-title a:hover { color: var(--violet); }
.task-meta { gap: 5px 9px; margin-top: 7px; color: #9596a8; font-size: 10px; }
.area-badge { color: var(--area-color); }
.area-badge:before { width: 6px; height: 6px; }
.due { color: #87899d; }
.due.today { color: #d38a30; }
.due.overdue { color: #df625e; }
.task-status { padding: 3px 7px; border-radius: 6px; background: #f0f0f5; color: #797b90; font-size: 9px; }
.task-status.status-progress { color: #5377c9; background: #edf2ff; }
.task-status.status-review { color: #b27c2a; background: #fff5e3; }
.task-status.status-blocked { color: #cf6264; background: #fff0f0; }
.task-status.status-done { color: #398a69; background: #eaf7f0; }
.priority { border-radius: 6px; padding: 5px 7px; background: #fff0ef; color: #d56763; font-size: 9px; }
.task-edit { width: 31px; min-height: 31px; border-radius: 9px; color: #9b9cad; font-size: 18px; }
.task-edit:hover { color: var(--violet); background: var(--violet-soft); }
.compact .task-row { padding: 11px; }
.count { color: var(--violet); background: var(--violet-soft); border-radius: 8px; font-size: 11px; }
.empty { border: 1px dashed #e4e4ed; border-radius: 12px; background: #fbfbfe; color: #9293a5; }
.search-label input, .assignee-filter-label select { border-color: #e6e6ef; border-radius: 10px; background: #fbfbfe; }
.search-label input:focus, .entry-dialog input:focus, .entry-dialog select:focus { border-color: #aaa4f3; outline: 2px solid #eae8ff; }
.filter-button { border-color: #e9e9f0; color: #85869a; background: #fff; border-radius: 8px; }
.filter-button.active { color: white; background: var(--violet); border-color: var(--violet); }
.habit-row { padding: 9px; margin: 0 -7px; border-radius: 12px; transition: background .18s ease; }
.habit-row:hover { background: #fafafe; }
.habit-symbol { border-radius: 10px; }
.habit-head strong { color: #3c3d52; font-size: 12px; }
.habit-head span { color: #9192a3; font-size: 10px; }
.habit-progress { height: 6px; background: #efeff5; }
.habit-action { border-color: #e8e7f0; border-radius: 8px; color: var(--violet); font-size: 10px; }
.habit-action.done { color: var(--green); background: #eaf7f0; border-color: #cfeadb; }
.habit-message { color: #9697a8; font-size: 11px; }
.agenda-row { gap: 10px; padding: 9px 0 12px; }
.agenda-row + .agenda-row { border-color: #f0f0f5; padding-top: 12px; }
.agenda-time { width: 47px; color: #77798f; font-size: 10px; }
.agenda-stripe { width: 3px; border-radius: 4px; }
.agenda-detail strong { color: #414257; font-size: 11px; }
.agenda-detail small { margin-top: 4px; color: #999aab; font-size: 10px; }
.agenda-remove { font-size: 17px; }
.text-button { color: var(--violet); font-size: 11px; }
.insight-panel { background: linear-gradient(135deg, #f3f1ff, #fbfaff); border-color: #e9e6ff; }
.sparkle { color: var(--violet); }
.insight-main { color: #37384f; font-size: 13px; }
.insight-reason { color: #77788e; font-size: 11px; }
.insight-foot { border-color: #e9e6ff; color: #9998b4; font-size: 10px; }
.team-view { padding-top: 4px; }
.team-intro { color: #85879a; font-size: 12px; }
.team-grid { gap: 14px; }
.team-card { padding: 17px; }
.team-avatar { border-radius: 12px; }
.team-card-head h3 { color: #3c3d52; font-size: 14px; }
.team-card-head p { color: #9293a4; font-size: 10px; }
.team-count { margin: 17px 0 9px; }
.team-count strong { color: var(--ink); font-size: 27px; }
.team-count span { color: #85879a; font-size: 11px; }
.team-stats span { border-radius: 7px; background: #f6f6fa; color: #73758a; font-size: 9px; }
.team-tasks { border-color: #efeff5; }
.team-task { border-color: #efeff5; }
.team-task-title { color: #44455a; font-size: 11px; }
.team-task-meta, .team-source { color: #999aab; font-size: 9px; }
.team-actions .text-button { font-size: 10px; }
.connection { border-color: #f0f0f5; padding: 11px 0; }
.connection-icon { border-radius: 9px; }
.connection>span:nth-child(2) { color: #47485e; font-size: 11px; }
.connection small { color: #9293a4; font-size: 9px; }
.connection em { border-radius: 7px; font-size: 9px; }
.connection em.connected { color: #328562; background: #eaf7f0; }
.connection .text-button { font-size: 10px; }
.entry-dialog { border-radius: 19px; }
.entry-dialog form { gap: 14px; }
.entry-dialog label { color: #67697e; font-size: 11px; }
.entry-dialog input, .entry-dialog select { border-color: #e5e5ef; border-radius: 10px; background: #fbfbfe; }
.form-more { border-color: #e8e8f0; border-radius: 10px; }
.form-more summary { color: #686a80; font-size: 11px; }
.form-note, .board-preview { color: #9697a8; font-size: 10px; }
.danger-button { font-size: 11px; }
.install-panel p { color: #77798e; font-size: 12px; }
.install-panel .local-note { color: #999aab; font-size: 10px; }
.bottom-nav { background: rgba(255,255,255,.96); border-color: #e9e9f0; box-shadow: 0 -8px 24px #2727470b; backdrop-filter: blur(14px); }
.bottom-nav-button { color: #9091a2; font-size: 12px; }
.bottom-nav-button.active { color: var(--violet); background: var(--violet-soft); }
.source-status .status-light { background: #39b78a; box-shadow: 0 0 0 4px #e9f8f1; }
.auth-gate { background: radial-gradient(circle at 12% 15%, #8580e8 0, transparent 32%), linear-gradient(135deg, #252744, #41407d); }
.auth-card { border: 1px solid #ffffff9c; border-radius: 24px; box-shadow: 0 25px 90px #19193455; }
.auth-mark { background: var(--violet); border-radius: 14px; box-shadow: 0 7px 17px #635bdf42; }
.auth-card .eyebrow { color: #9998b4; font-size: 9px; }
.auth-card h1 { color: #292a40; }
.auth-card form { gap: 10px; }
.auth-card label { color: #5e6076; font-size: 11px; }
.auth-card input { border-color: #e3e3ed; border-radius: 10px; }
.connection small { line-height: 1.5; max-width: 370px; }
.connection .text-button { margin-left: auto; text-decoration: none; }
.connection .text-button + em { margin-left: 0; }
.external-check { color: var(--violet); border-color: #d8d4ff; font-size: 12px; }
.task-edit { text-decoration: none; display: grid; place-items: center; }
.team-task { text-decoration: none; color: inherit; }
.agenda-detail a { color: inherit; text-decoration: none; }
.agenda-detail a:hover { color: var(--violet); }
.install-panel .secondary-button { margin: 7px 8px 0 0; white-space: normal; }
.local-note { line-height: 1.5; }

@media (max-width: 1050px) {
  .sidebar { width: 220px; }
  .main { padding-left: 24px; padding-right: 24px; }
  .content-grid { grid-template-columns: minmax(0, 1.25fr) minmax(285px, .85fr); }
}
@media (max-width: 800px) {
  .shell { display: block; }
  .sidebar { width: auto; height: auto; padding: 12px 16px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 0 12px; }
  .brand small, .side-label, .sidebar-bottom { display: none; }
  .sidebar nav { display: flex; overflow-x: auto; gap: 5px; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-item { width: auto; min-height: 38px; white-space: nowrap; padding: 5px 9px; }
  .nav-dot { width: 20px; height: 20px; border-radius: 7px; }
  .nav-item b { display: none; }
  .main { padding: 23px 16px calc(95px + env(safe-area-inset-bottom)); }
  .view-tabs { display: none; }
  .bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); }
  .content-grid { display: flex; flex-direction: column; }
  .left-column, .right-column { display: contents; }
  .focus-panel { order: 1; }
  .habits-panel { order: 2; }
  .agenda-panel { order: 3; }
  .waiting-panel { order: 4; }
  .insight-panel { order: 5; }
  .all-tasks-panel, .connections-panel, .install-panel { order: 1; width: 100%; }
  .main[data-active-tab="tasks"] .right-column, .main[data-active-tab="more"] .left-column { display: none; }
  .main[data-active-tab="more"] .right-column { max-width: none; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
  .topbar h1 { margin-bottom: 0; font-size: 25px; }
  .topbar .subhead { display: none; }
  .topbar .primary-button { margin-top: 0; padding: 10px 12px; font-size: 12px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .metric { min-height: 88px; padding: 11px 13px; border-radius: 14px; }
  .metric::after { width: 39px; height: 39px; right: 8px; top: 8px; border-radius: 13px; }
  .metric strong { margin: 7px 0 0; font-size: 24px; }
  .metric small { display: none; }
  .metric span { font-size: 10px; }
  .panel { padding: 15px; border-radius: 15px; }
  .section-heading { align-items: flex-start; }
  .section-heading h2 { font-size: 15px; }
  .content-grid, .left-column, .right-column { gap: 12px; }
  .team-grid { grid-template-columns: 1fr; }
  .task-row { gap: 9px; padding: 11px 9px; }
  .task-title { font-size: 12px; }
  .task-meta { font-size: 9px; }
  .search-label input { width: 130px; }
  .task-filters { display: block; }
  .assignee-filter-label select { width: 100%; margin: 0 0 11px; }
  .habit-head { display: block; }
  .habit-head span { display: block; margin-top: 3px; }
  .connection { flex-wrap: wrap; }
  .connection em { margin-left: auto; }
  .agenda-time { width: 45px; }
  .form-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 27px; }
  .bottom-nav-button { min-height: 45px; font-size: 11px; }
}
@media (min-width: 700px) and (max-width: 800px) {
  .content-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .left-column, .right-column { display: grid; grid-template-columns: minmax(0, 1fr); }
  .main[data-active-tab="tasks"] .content-grid, .main[data-active-tab="more"] .content-grid { grid-template-columns: minmax(0, 1fr); }
  .main[data-active-tab="tasks"] .right-column, .main[data-active-tab="more"] .left-column { display: none; }
}