:root {
  color-scheme: dark;
  --bg: #0b0e14;
  --bg-deep: #07090d;
  --panel: rgba(30, 34, 46, .68);
  --panel-strong: rgba(26, 29, 39, .9);
  --panel-soft: rgba(255, 255, 255, .065);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-highlight: rgba(255, 255, 255, .17);
  --text: #f6f6f8;
  --muted: #9ca3b4;
  --subtle: #737b8d;
  --accent: #8d7cf7;
  --accent-2: #b06ef3;
  --accent-soft: rgba(141, 124, 247, .16);
  --shadow: 0 20px 60px rgba(0, 0, 0, .34);
  --radius: 22px;
  --radius-sm: 14px;
  --sidebar-width: 248px;
  --topbar-height: 72px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(circle at 44% 22%, rgba(92, 67, 172, .2), transparent 34%),
    linear-gradient(145deg, var(--bg), var(--bg-deep));
  color: var(--text);
  min-width: 320px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 80%, white); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ambient { position: fixed; pointer-events: none; border-radius: 999px; filter: blur(3px); opacity: .5; z-index: -1; }
.ambient-one { width: 420px; height: 420px; background: radial-gradient(circle, rgba(105, 75, 212, .33), transparent 67%); top: 4%; right: 5%; }
.ambient-two { width: 520px; height: 520px; background: radial-gradient(circle, rgba(36, 136, 178, .21), transparent 67%); bottom: -15%; left: 18%; }
.ambient-three { width: 320px; height: 320px; background: radial-gradient(circle, rgba(223, 92, 163, .16), transparent 68%); bottom: 8%; right: 18%; }
.glass { background: var(--panel); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow); backdrop-filter: blur(32px) saturate(145%); -webkit-backdrop-filter: blur(32px) saturate(145%); }
.glass-soft { background: var(--panel-soft); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }

.app-shell { height: 100vh; display: grid; grid-template: var(--topbar-height) 1fr / var(--sidebar-width) 1fr; gap: 0; }
.topbar { grid-column: 1 / -1; border-width: 0 0 1px; border-radius: 0; display: flex; align-items: center; padding: 0 22px; z-index: 20; box-shadow: inset 0 -1px rgba(255,255,255,.03), 0 14px 45px rgba(0,0,0,.17); }
.brand { width: calc(var(--sidebar-width) - 22px); display: flex; align-items: center; gap: 11px; background: none; border: 0; font-weight: 700; letter-spacing: -.04em; font-size: 24.7px; cursor: pointer; }
.brand-mark { width: 31px; height: 31px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 5px; border-radius: 10px; background: linear-gradient(150deg, #a395ff, #7c65ee 55%, #6946d2); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 6px 18px rgba(111,78,221,.35); }
.brand-mark span { background: rgba(255,255,255,.92); border-radius: 2px; }
.brand-mark span:first-child { grid-row: 1 / 3; }
.main-nav { display: flex; height: 100%; align-items: center; gap: 4px; }
.nav-item { height: 42px; display: flex; gap: 8px; align-items: center; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 16.9px; font-weight: 600; cursor: pointer; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.09); box-shadow: inset 0 1px rgba(255,255,255,.07); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.global-search { width: 245px; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 13px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.055); border-radius: 13px; color: var(--muted); transition: .2s ease; }
.global-search:focus-within { width: 290px; border-color: rgba(158,139,255,.4); background: rgba(255,255,255,.08); box-shadow: 0 0 0 4px rgba(141,124,247,.08); }
.global-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16.9px; }
.global-search input::placeholder { color: var(--subtle); }
kbd { min-width: 22px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.07); border-radius: 6px; color: var(--subtle); font: 500 14.3px/20.8px -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.icon-button { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.045); cursor: pointer; transition: .18s ease; position: relative; }
.icon-button:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.icon-button.small { width: 30px; height: 30px; border-radius: 9px; }
.icon-button.has-dot::after { content: ''; position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border: 2px solid #252834; border-radius: 50%; background: #ff5d79; }
.avatar { display: inline-grid; place-items: center; border: 0; border-radius: 50%; color: white; background: linear-gradient(145deg, #8f80f1, #654fc4); font-weight: 650; letter-spacing: -.02em; box-shadow: inset 0 1px 1px rgba(255,255,255,.32); }
.avatar-lg { width: 38px; height: 38px; font-size: 14.3px; cursor: pointer; }
.avatar-sm { width: 32px; height: 32px; font-size: 11.7px; border: 2px solid #1c1e27; }
.avatar-xs { width: 27px; height: 27px; font-size: 11.7px; }
.avatar-photo.a1 { background: linear-gradient(145deg, #ca6b9b, #884d86); }.avatar-photo.a2 { background: linear-gradient(145deg, #50a5a1, #377080); }.avatar-photo.a3 { background: linear-gradient(145deg, #d69254, #925641); }.avatar-photo.a4 { background: linear-gradient(145deg, #7096e5, #5860ae); }.avatar-more { background: #363a47; color: #bdc1cd; }

.sidebar { grid-row: 2; border-width: 0 1px 0 0; border-radius: 0; box-shadow: inset -1px 0 rgba(255,255,255,.02); padding: 18px 13px 14px; display: flex; flex-direction: column; overflow: auto; z-index: 10; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; padding: 10px 9px 17px; border-bottom: 1px solid rgba(255,255,255,.07); }
.workspace-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: linear-gradient(145deg, #2c8eaa, #3c576e); color: #fff; font-weight: 700; box-shadow: inset 0 1px rgba(255,255,255,.3); }
.workspace-switcher > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.workspace-switcher small { color: var(--subtle); font-size: 11.7px; letter-spacing: .07em; text-transform: uppercase; }
.workspace-switcher strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15.6px; }
.workspace-switcher > svg { width: 15px; margin-left: auto; color: var(--subtle); }
.sidebar-section { padding: 19px 2px 0; }
.section-label { padding: 0 10px 8px; color: var(--subtle); text-transform: uppercase; font-size: 11.7px; font-weight: 700; letter-spacing: .1em; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-between button { display: grid; place-items: center; border: 0; background: transparent; color: var(--subtle); cursor: pointer; }.row-between button svg { width: 14px; }
.side-link { width: 100%; height: 39px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); text-align: left; font-size: 15.6px; cursor: pointer; }
.side-link svg { width: 15px; }
.side-link span:nth-last-child(2), .side-link span:last-child:not(.color-dot) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-link small { margin-left: auto; color: var(--subtle); font-size: 13px; }
.side-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.side-link.active { color: #fff; background: linear-gradient(90deg, rgba(141,124,247,.17), rgba(141,124,247,.05)); box-shadow: inset 2px 0 0 var(--accent); }
.color-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 3px; box-shadow: inset 0 1px rgba(255,255,255,.4); }.purple { background: #8d7cf7; }.coral { background: #f17e73; }.mint { background: #55c8a6; }
.sidebar-bottom { margin-top: auto; }
.team-card { margin: 14px 5px 12px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: linear-gradient(145deg, rgba(141,124,247,.12), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.team-card-icon { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 9px; color: #c9bdff; background: rgba(141,124,247,.14); }.team-card-icon svg { width: 15px; }
.team-card strong { font-size: 14.3px; }.team-card p { margin: 5px 0 11px; color: var(--subtle); font-size: 11.7px; line-height: 1.5; }.mini-progress { height: 3px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }.mini-progress i { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, var(--accent), #be78ee); border-radius: inherit; }

.main-content { grid-row: 2; padding: 28px 28px 0; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.board-header { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; padding: 0 2px 20px; }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 11.7px; font-weight: 700; }
.pulse { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #52d6a7; box-shadow: 0 0 0 4px rgba(82,214,167,.1), 0 0 14px #52d6a7; }
.title-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.board-title-area h1 { margin: 0; min-width: 90px; border-radius: 7px; font-size: clamp(31.2px, 2.6vw, 40.3px); letter-spacing: -.045em; line-height: 1.15; }
.board-title-area h1:focus { padding: 2px 6px; margin: -2px -6px; background: rgba(255,255,255,.07); }
.board-title-area p { margin: 7px 0 0; color: var(--muted); font-size: 14.3px; }
.favorite-button { padding: 5px; border: 0; background: none; color: var(--subtle); font-size: 23.4px; cursor: pointer; }.favorite-button.active { color: #f0b84f; text-shadow: 0 3px 12px rgba(240,184,79,.25); }
.board-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.member-stack { display: flex; margin-right: 6px; }.member-stack .avatar { margin-left: -8px; }.member-stack .avatar:first-child { margin-left: 0; }
.button { height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; font-size: 14.3px; font-weight: 650; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }.button svg { width: 15px; }
.button.secondary { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.055); color: #d7d9e1; box-shadow: inset 0 1px rgba(255,255,255,.06); }.button.secondary:hover { background: rgba(255,255,255,.1); }
.button.primary { border-color: rgba(255,255,255,.13); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent) 72%, #4c2ca6)); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 23px color-mix(in srgb, var(--accent) 24%, transparent); }.button.primary:hover { box-shadow: inset 0 1px rgba(255,255,255,.42), 0 10px 30px color-mix(in srgb, var(--accent) 34%, transparent); }
.button.ghost { background: transparent; color: var(--muted); }.button.ghost:hover { background: rgba(255,255,255,.05); }
.button kbd { margin-left: 3px; color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.12); }
.filter-count { display: none; min-width: 17px; height: 17px; place-items: center; margin-left: 2px; padding: 0 5px; border-radius: 20px; background: var(--accent); color: #fff; font-size: 11.7px; }.filter-count.visible { display: inline-grid; }
.stats-strip { flex: 0 0 auto; height: 55px; display: flex; align-items: center; margin: 0 0 17px; padding: 0 16px; border-radius: 16px; }
.stat { min-width: 260px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px 14px; padding: 0 17px 0 3px; border-right: 1px solid rgba(255,255,255,.07); }.stat span { color: var(--subtle); font-size: 11.7px; text-transform: uppercase; letter-spacing: .07em; }.stat strong { justify-self: end; font-size: 14.3px; }.progress-bar { grid-column: 1 / -1; width: 100%; height: 4px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.07); }.progress-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6cddbc, #82dbec); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.stat.compact { min-width: 105px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-left: 17px; }.stat.compact strong { font-size: 16.9px; }
.view-toggle { margin-left: auto; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }.view-toggle svg { width: 14px; }.view-toggle:hover, .view-toggle.active { color: #fff; background: rgba(255,255,255,.07); }
.active-filters { display: flex; gap: 6px; min-height: 0; overflow: hidden; transition: min-height .2s; }.active-filters:has(.filter-pill) { min-height: 36px; }.filter-pill { height: 25px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(255,255,255,.055); color: var(--muted); font-size: 11.7px; }.filter-pill button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }.filter-pill svg { width: 11px; height: 11px; }

.board-wrap { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; padding: 0 2px 24px; display: flex; align-items: flex-start; scrollbar-color: rgba(255,255,255,.15) transparent; scrollbar-width: thin; }
.board { display: flex; align-items: flex-start; gap: 13px; }
.column { --column-accent: #8d7cf7; width: 286px; max-height: 100%; flex: 0 0 286px; display: flex; flex-direction: column; padding: 11px; border: 1px solid rgba(255,255,255,.105); border-radius: 19px; background: linear-gradient(145deg, rgba(37,40,52,.73), rgba(23,25,34,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 45px rgba(0,0,0,.18); backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); transition: opacity .16s, transform .16s; }
.column.dragging { opacity: .45; transform: scale(.98); }.column.drag-over { border-color: color-mix(in srgb, var(--column-accent) 60%, white); }
.column-header { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 3px 8px; cursor: grab; }.column-header:active { cursor: grabbing; }
.column-indicator { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 3px; background: var(--column-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--column-accent) 50%, transparent); }
.column-title { flex: 1; min-width: 0; margin: 0; border-radius: 6px; font-size: 15.6px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.column-title:focus { outline: none; padding: 4px; margin: -4px; background: rgba(255,255,255,.08); white-space: normal; }
.column-count { min-width: 23px; padding: 3px 6px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--muted); text-align: center; font-size: 11.7px; }
.column-menu-button { width: 27px; height: 27px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--subtle); cursor: pointer; }.column-menu-button:hover { color: #fff; background: rgba(255,255,255,.08); }.column-menu-button svg { width: 15px; }
.card-list { flex: 1; min-height: 58px; overflow-y: auto; padding: 1px 1px 3px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.card-list.empty::after { content: 'Solte um card aqui'; height: 60px; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; color: var(--subtle); font-size: 11.7px; }
.task-card { position: relative; margin-bottom: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.055)); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 8px 18px rgba(0,0,0,.12); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.task-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.075)); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 26px rgba(0,0,0,.18); }.task-card.dragging { opacity: .35; transform: rotate(2deg) scale(.98); }.task-card.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.card-top { display: flex; align-items: flex-start; gap: 8px; }.card-grip { margin-left: auto; opacity: 0; color: var(--subtle); transition: opacity .15s; }.task-card:hover .card-grip { opacity: 1; }.card-grip svg { width: 14px; }
.card-labels { display: flex; flex-wrap: wrap; gap: 4px; min-height: 4px; margin-bottom: 8px; }.card-label { width: 28px; height: 4px; border-radius: 10px; }.card-label.design { background: #a779f7; }.card-label.research { background: #53c6b0; }.card-label.marketing { background: #f1a653; }.card-label.tech { background: #5c91ed; }.card-label.urgent { background: #ed677d; }
.task-card h3 { margin: 0; color: #f1f2f5; font-size: 14.3px; font-weight: 600; line-height: 1.43; letter-spacing: -.005em; }.task-card p { display: -webkit-box; overflow: hidden; margin: 6px 0 0; color: var(--subtle); font-size: 11.7px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.priority-dot { width: 6px; height: 6px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; }.priority-dot.high { background: #f4677f; box-shadow: 0 0 8px rgba(244,103,127,.5); }.priority-dot.medium { background: #f2b85c; }.priority-dot.low { background: #5ac7ae; }.priority-dot.none { display: none; }
.card-footer { min-height: 24px; display: flex; align-items: center; gap: 8px; margin-top: 11px; }.card-meta { display: flex; align-items: center; gap: 8px; color: var(--subtle); font-size: 10.4px; }.card-meta span { display: flex; align-items: center; gap: 3px; }.card-meta svg { width: 11px; height: 11px; }.card-footer .avatar { margin-left: auto; }
.due-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 8px; background: rgba(255,255,255,.055); color: var(--muted); font-size: 10.4px; }.due-badge svg { width: 11px; }.due-badge.overdue { background: rgba(239,88,112,.12); color: #ff8396; }.due-badge.soon { background: rgba(240,179,76,.12); color: #f5c36e; }
.add-card-button { width: 100%; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 11px; background: transparent; color: var(--subtle); font-size: 13px; cursor: pointer; }.add-card-button span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.05); }.add-card-button svg { width: 13px; }.add-card-button:hover { color: #fff; background: rgba(255,255,255,.05); }
.add-column { width: 190px; height: 47px; flex: 0 0 190px; display: flex; align-items: center; gap: 9px; margin-left: 13px; padding: 0 12px; border-radius: 15px; color: var(--muted); font-size: 13px; cursor: pointer; }.add-column span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: #bdadff; }.add-column svg { width: 14px; }.add-column:hover { color: #fff; border-color: rgba(255,255,255,.15); }
.density-compact .task-card { padding: 9px 10px; margin-bottom: 6px; }.density-compact .task-card p { display: none; }.density-compact .card-footer { margin-top: 7px; }

.gantt-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 2px 24px; }.gantt-toolbar { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 20px; padding: 0 3px 15px; }.gantt-toolbar h2 { margin: 5px 0 3px; font-size: 23.4px; letter-spacing: -.035em; }.gantt-toolbar p { margin: 0; color: var(--subtle); font-size: 13px; }.gantt-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }.gantt-summary { color: var(--muted); font-size: 13px; }
.gantt-chart { flex: 1 1 auto; min-height: 0; overflow: auto; border-radius: 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }.gantt-grid { position: relative; display: grid; grid-template-columns: 340px var(--timeline-width); min-width: calc(340px + var(--timeline-width)); background: rgba(12,14,20,.2); }.gantt-task-head, .gantt-calendar-head { position: sticky; top: 0; z-index: 5; height: 62px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(26,29,39,.93); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }.gantt-task-head { left: 0; z-index: 7; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 18px; border-right: 1px solid rgba(255,255,255,.09); }.gantt-task-head span { font-size: 14.3px; font-weight: 650; }.gantt-task-head small { color: var(--subtle); font-size: 10.4px; text-transform: uppercase; letter-spacing: .08em; }.gantt-calendar-head { display: grid; grid-template-columns: repeat(auto-fit, var(--day-width)); align-items: stretch; width: var(--timeline-width); }.gantt-day { width: var(--day-width); display: grid; grid-template-rows: auto auto; place-content: center; position: relative; border-right: 1px solid rgba(255,255,255,.055); color: var(--muted); text-align: center; }.gantt-day small { font-size: 9.1px; text-transform: uppercase; }.gantt-day b { font-size: 13px; }.gantt-day em { position: absolute; left: 3px; bottom: 2px; color: var(--subtle); font-size: 9.1px; font-style: normal; }.gantt-day.today { color: #fff; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 -2px var(--accent); }
.gantt-task-info, .gantt-timeline-row { height: 74px; border: 0; border-bottom: 1px solid rgba(255,255,255,.065); background: transparent; cursor: pointer; }.gantt-task-info { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 0 14px; border-right: 1px solid rgba(255,255,255,.09); background: rgba(28,31,41,.88); text-align: left; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }.gantt-task-info:hover, .gantt-task-info:focus-visible { background: rgba(43,46,59,.95); }.gantt-task-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }.gantt-task-copy strong { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.gantt-task-copy small { color: var(--subtle); font-size: 10.4px; }.gantt-status { max-width: 82px; overflow: hidden; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--status-color) 28%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--status-color) 11%, transparent); color: color-mix(in srgb, var(--status-color) 75%, white); font-size: 9.1px; text-overflow: ellipsis; white-space: nowrap; }
.gantt-timeline-row { position: relative; width: var(--timeline-width); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--day-width) - 1px), rgba(255,255,255,.045) calc(var(--day-width) - 1px), rgba(255,255,255,.045) var(--day-width)); }.gantt-timeline-row:hover { background-color: rgba(255,255,255,.025); }.gantt-task-info:hover + .gantt-timeline-row { background-color: rgba(255,255,255,.025); }.gantt-bar { position: absolute; top: 19px; height: 36px; display: flex; align-items: center; justify-content: flex-end; min-width: 28px; overflow: hidden; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--gantt-color) 50%, white); border-radius: 11px; background: color-mix(in srgb, var(--gantt-color) 20%, #1a1c25); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 7px 18px color-mix(in srgb, var(--gantt-color) 14%, transparent); }.gantt-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--gantt-color) 78%, #32256b), var(--gantt-color)); opacity: .88; }.gantt-bar b { position: relative; z-index: 1; color: #fff; font-size: 11.7px; text-shadow: 0 1px 5px rgba(0,0,0,.4); }.gantt-bar.complete { border-color: rgba(93,224,182,.65); }.gantt-bar.complete i { background: linear-gradient(90deg,#35a886,#61d7b4); }.gantt-empty { min-height: 360px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--subtle); text-align: center; }.gantt-empty svg { width: 28px; height: 28px; margin-bottom: 5px; }.gantt-empty strong { color: var(--text); font-size: 16.9px; }.gantt-empty span { font-size: 13px; }

.popover { position: fixed; z-index: 80; width: 290px; padding: 13px; border-radius: 17px; }.popover[hidden] { display: none; }.popover-header { display: flex; align-items: center; justify-content: space-between; padding: 1px 2px 10px; }.popover-header strong { font-size: 15.6px; }.popover-search { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(0,0,0,.12); color: var(--subtle); }.popover-search svg { width: 14px; }.popover-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }.popover fieldset { display: grid; gap: 9px; margin: 13px 0; padding: 0 3px 13px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); }.popover legend { margin-bottom: 10px; color: var(--subtle); font-size: 11.7px; text-transform: uppercase; letter-spacing: .08em; }.popover fieldset label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }.popover input[type="checkbox"] { accent-color: var(--accent); }.priority-mark { width: 7px; height: 7px; border-radius: 50%; }.priority-mark.high { background: #f4677f; }.priority-mark.medium { background: #f2b85c; }.priority-mark.low { background: #5ac7ae; }.popover-footer { display: flex; align-items: center; justify-content: space-between; }.text-button { border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }.small-button { height: 32px; font-size: 11.7px; }

.panel-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(3,4,8,.35); backdrop-filter: blur(2px); }.panel-backdrop[hidden] { display: none; }
.customize-panel { position: fixed; z-index: 70; inset: 12px 12px 12px auto; width: min(390px, calc(100vw - 24px)); border-radius: 25px; transform: translateX(calc(100% + 24px)); transition: transform .35s cubic-bezier(.22,.8,.2,1); }.customize-panel.open { transform: translateX(0); }.panel-header { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); }.panel-header h2 { margin: 5px 0 0; font-size: 23.4px; letter-spacing: -.035em; }.panel-content { height: calc(100% - 92px); overflow-y: auto; padding: 20px; }.panel-content section { margin-bottom: 27px; }.panel-content h3 { margin: 0 0 5px; font-size: 15.6px; }.panel-content p { margin: 0 0 14px; color: var(--subtle); font-size: 11.7px; line-height: 1.5; }.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.theme-swatch { height: 80px; display: flex; align-items: flex-end; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; cursor: pointer; color: white; font-size: 11.7px; font-weight: 600; box-shadow: inset 0 1px rgba(255,255,255,.16); }.theme-swatch.active { outline: 2px solid var(--accent); outline-offset: 2px; }.theme-swatch[data-theme="aurora"] { background: radial-gradient(circle at 75% 20%, #6f5fd1, transparent 50%), linear-gradient(145deg,#1e3045,#11141f); }.theme-swatch[data-theme="ocean"] { background: radial-gradient(circle at 70% 20%, #1689a7, transparent 50%), linear-gradient(145deg,#16465f,#0b1520); }.theme-swatch[data-theme="sunset"] { background: radial-gradient(circle at 70% 20%, #d45f88, transparent 50%), linear-gradient(145deg,#593d67,#181222); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.04); }.segmented button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--subtle); font-size: 11.7px; cursor: pointer; }.segmented button.active { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.column-settings { display: grid; gap: 8px; }.column-setting { display: flex; align-items: center; gap: 9px; height: 43px; padding: 0 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.035); }.column-setting .color-dot { background: var(--setting-color); }.column-setting span:nth-child(2) { flex: 1; font-size: 13px; }.column-setting button { display: grid; place-items: center; border: 0; background: transparent; color: var(--subtle); cursor: pointer; }.column-setting svg { width: 14px; }

.card-dialog { width: min(1020px, calc(100vw - 36px)); max-height: calc(100vh - 36px); padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: rgba(20,22,30,.88); color: var(--text); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 35px 100px rgba(0,0,0,.6); backdrop-filter: blur(38px) saturate(140%); -webkit-backdrop-filter: blur(38px) saturate(140%); overflow: hidden; }
.card-dialog::backdrop { background: rgba(4,5,9,.63); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.card-dialog[open] { animation: modal-in .28s cubic-bezier(.2,.8,.2,1); } @keyframes modal-in { from { opacity: 0; transform: translateY(15px) scale(.98); } }
.modal-shell { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); max-height: calc(100vh - 38px); }.modal-main { padding: 25px 27px 21px; overflow-y: auto; }.modal-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }.modal-heading h2 { margin: 5px 0 0; font-size: 26px; letter-spacing: -.04em; }.modal-icon { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #c4b7ff; background: linear-gradient(145deg, rgba(141,124,247,.22), rgba(141,124,247,.07)); box-shadow: inset 0 1px rgba(255,255,255,.12); }.modal-icon svg { width: 19px; }.modal-close { margin-left: auto; }
.form-group { margin-bottom: 17px; }.form-group > label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #d4d6de; font-size: 13px; font-weight: 600; }.form-group > label span { color: var(--subtle); font-size: 11.7px; font-weight: 400; }
.form-group textarea, .form-group input, .form-group select { width: 100%; border: 1px solid rgba(255,255,255,.09); outline: 0; background: rgba(255,255,255,.045); color: var(--text); transition: border .18s, background .18s, box-shadow .18s; }.form-group textarea:focus, .form-group input:focus, .form-group select:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px var(--accent-soft); }.form-group textarea::placeholder, .form-group input::placeholder { color: #626979; }
.title-group textarea { min-height: 77px; padding: 15px 16px; resize: none; border-radius: 14px; font-size: 20.8px; font-weight: 600; letter-spacing: -.02em; line-height: 1.45; }
.smart-hint { display: flex; align-items: center; gap: 6px; margin: 7px 4px 0; color: var(--subtle); font-size: 10.4px; }.smart-hint svg { width: 11px; color: #b8a8ff; }.smart-hint b { color: #aaa2c7; font-weight: 600; }
.quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 18px; }.quick-chip { height: 29px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 10.4px; cursor: pointer; }.quick-chip:hover, .quick-chip.active { border-color: rgba(141,124,247,.28); background: var(--accent-soft); color: #d5ceff; }.quick-chip svg { width: 11px; }.label-dot { width: 6px; height: 6px; border-radius: 3px; }.label-dot.design { background: #a779f7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 13px; }.input-wrap, .select-wrap { position: relative; }.field-icon { position: absolute; z-index: 1; left: 11px; top: 50%; display: grid; place-items: center; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }.field-icon svg { width: 14px; }.form-group input, .form-group select { height: 40px; padding: 0 34px; border-radius: 11px; font-size: 11.7px; }.form-group select { appearance: none; cursor: pointer; }.form-group select option { background: #242732; color: #fff; }.select-wrap .chevron { position: absolute; right: 10px; top: 50%; width: 13px; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }
.milestone-editor { display: grid; grid-template-columns: 108px auto 108px minmax(190px, 1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; background: rgba(255,255,255,.025); }.milestone-editor > label:not(.completion-toggle) { display: grid; gap: 5px; color: var(--subtle); font-size: 10.4px; }.milestone-editor > label:not(.completion-toggle) input { height: 36px; padding: 0 10px; text-align: center; }.milestone-divider { align-self: end; padding-bottom: 10px; color: var(--subtle); font-size: 11.7px; }.completion-toggle { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; background: rgba(255,255,255,.035); cursor: pointer; }.form-group .completion-toggle input { width: 17px; height: 17px; flex: 0 0 auto; padding: 0; accent-color: var(--accent); }.completion-toggle > span { display: flex; flex-direction: column; gap: 3px; }.completion-toggle b { font-size: 11.7px; }.completion-toggle small { color: var(--subtle); font-size: 9.1px; }
.label-picker { display: flex; flex-wrap: wrap; gap: 7px; }.label-option { height: 29px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 10.4px; cursor: pointer; }.label-option::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--label-color); }.label-option.selected { border-color: color-mix(in srgb, var(--label-color) 45%, transparent); background: color-mix(in srgb, var(--label-color) 14%, transparent); color: #fff; }.label-option.selected::after { content: '✓'; font-size: 10.4px; }
#cardDescription { padding: 12px 13px; resize: vertical; min-height: 82px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.modal-actions { display: flex; align-items: center; gap: 7px; padding-top: 4px; }.action-spacer { flex: 1; }.danger-button { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #ef7186; font-size: 11.7px; cursor: pointer; }.danger-button:hover { background: rgba(239,113,134,.1); }.danger-button svg { width: 13px; }.save-button { min-width: 120px; }.key-hint { padding-left: 7px; border-left: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.6); font-size: 10.4px; }
.modal-preview { display: flex; flex-direction: column; padding: 25px 22px; border-left: 1px solid rgba(255,255,255,.075); background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%), rgba(0,0,0,.08); }.preview-label { display: flex; align-items: center; justify-content: space-between; color: var(--subtle); font-size: 10.4px; text-transform: uppercase; letter-spacing: .1em; }.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #58d7ad; box-shadow: 0 0 0 4px rgba(88,215,173,.08); }.preview-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; }.preview-card { width: 100%; padding: 17px; border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); box-shadow: inset 0 1px rgba(255,255,255,.15), 0 22px 45px rgba(0,0,0,.25); cursor: default; }.preview-card:hover { transform: none; }.preview-card h3 { font-size: 18.2px; }.preview-card p { display: block; margin-top: 7px; font-size: 11.7px; }.preview-subtasks { display: grid; gap: 6px; margin: 17px 0; }.preview-subtasks span { display: block; height: 4px; border-radius: 6px; background: rgba(255,255,255,.07); }.preview-subtasks span:nth-child(2) { width: 73%; }.preview-subtasks span:nth-child(3) { width: 87%; }.preview-tip { display: flex; align-items: center; gap: 9px; width: 85%; margin: 24px auto 0; color: var(--subtle); }.preview-tip > svg { width: 22px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; }.preview-tip span { display: flex; flex-direction: column; gap: 3px; }.preview-tip b { color: #b9bdc8; font-size: 10.4px; }.preview-tip small { font-size: 9.1px; }
.preview-progress { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; }.preview-progress > span { flex: 1; height: 5px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.08); }.preview-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6cddbc,#82dbec); transition: width .25s ease; }.preview-progress b { min-width: 35px; color: var(--muted); font-size: 10.4px; text-align: right; }

.column-menu { position: fixed; z-index: 50; width: 190px; padding: 7px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(27,29,38,.94); box-shadow: var(--shadow); backdrop-filter: blur(25px); }.column-menu button { width: 100%; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11.7px; cursor: pointer; }.column-menu button:hover { color: #fff; background: rgba(255,255,255,.07); }.column-menu button.danger { color: #ef7186; }.column-menu svg { width: 13px; }.color-options { display: flex; gap: 5px; padding: 7px 8px; border-top: 1px solid rgba(255,255,255,.07); }.color-options button { width: 20px; height: 20px; padding: 0; border: 2px solid rgba(255,255,255,.1); border-radius: 7px; background: var(--c); }.color-options button:hover { background: var(--c); border-color: #fff; }
.user-popover { position: fixed; z-index: 90; width: 250px; padding: 9px; border-radius: 17px; }.user-popover[hidden] { display: none; }.user-summary { display: flex; align-items: center; gap: 10px; padding: 8px 8px 13px; border-bottom: 1px solid rgba(255,255,255,.08); }.user-summary > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.user-summary strong { font-size: 14.3px; }.user-summary small { overflow: hidden; color: var(--subtle); font-size: 10.4px; text-overflow: ellipsis; white-space: nowrap; }.user-popover > button { width: 100%; height: 37px; display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 0 9px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 11.7px; cursor: pointer; }.user-popover > button:hover { color: #fff; background: rgba(255,255,255,.07); }.user-popover > button svg { width: 14px; transform: rotate(180deg); }
.toast-region { position: fixed; z-index: 120; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }.toast { min-width: 230px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(31,33,42,.91); color: #e7e8ec; box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(25px); font-size: 11.7px; animation: toast-in .25s ease; }.toast::before { content: '✓'; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(84,210,167,.13); color: #6be0b7; }.toast.out { opacity: 0; transform: translateY(7px); transition: .2s; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.auth-gate { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(420px, .95fr); background: #090b11; opacity: 1; visibility: visible; transition: opacity .4s ease, visibility .4s; }.auth-gate.authenticated { opacity: 0; visibility: hidden; pointer-events: none; }.auth-visual { position: relative; display: flex; flex-direction: column; padding: 36px 48px; overflow: hidden; border-right: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 72% 26%, rgba(128,100,238,.2), transparent 36%), linear-gradient(145deg,#10131d,#090b11); }.auth-visual::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 75%, transparent); pointer-events: none; }.auth-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; font-size: 23.4px; font-weight: 700; letter-spacing: -.04em; }.auth-orb { position: absolute; border-radius: 50%; filter: blur(2px); }.auth-orb-one { width: 400px; height: 400px; right: -110px; top: 8%; background: radial-gradient(circle, rgba(133,109,242,.23), transparent 68%); }.auth-orb-two { width: 340px; height: 340px; left: -100px; bottom: -80px; background: radial-gradient(circle, rgba(41,155,181,.14), transparent 68%); }.auth-promise { position: relative; z-index: 2; width: min(510px, 90%); margin: auto 0; }.auth-promise .eyebrow { color: #9fa4b6; }.auth-promise h1 { margin: 17px 0 17px; font-size: clamp(57.2px, 6.76vw, 97.5px); font-weight: 650; line-height: .98; letter-spacing: -.07em; }.auth-promise h1 em { color: #a899ff; font-style: normal; text-shadow: 0 12px 45px rgba(141,124,247,.28); }.auth-promise > p { width: min(440px, 95%); margin: 0; color: #8f95a6; font-size: 15.6px; line-height: 1.75; }.auth-preview-card { width: min(420px, 96%); display: flex; align-items: center; gap: 12px; margin-top: 38px; padding: 14px; border-radius: 18px; }.auth-preview-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #c4b8ff; background: rgba(141,124,247,.14); }.auth-preview-icon svg { width: 17px; }.auth-preview-card > div { display: flex; flex-direction: column; gap: 4px; }.auth-preview-card strong { font-size: 13px; }.auth-preview-card small { color: var(--subtle); font-size: 10.4px; }.auth-preview-card .live-dot { margin-left: auto; }.auth-copyright { position: relative; z-index: 2; margin: 0; color: #555b69; font-size: 10.4px; }.auth-form-side { display: grid; place-items: center; padding: 35px; background: radial-gradient(circle at 42% 34%, rgba(141,124,247,.08), transparent 40%); }.auth-card { width: min(390px, 100%); }.auth-mobile-brand { display: none; }.auth-card h2 { margin: 8px 0 7px; font-size: 35.1px; letter-spacing: -.05em; }.auth-card #authSubtitle { margin: 0 0 30px; color: var(--muted); font-size: 13px; }.auth-field { margin-bottom: 15px; }.auth-field > label, .auth-label-row label { display: block; margin: 0 0 7px; color: #d8dae2; font-size: 11.7px; font-weight: 600; }.auth-label-row { display: flex; justify-content: space-between; }.auth-label-row button { margin: -4px 0 0; padding: 0; border: 0; background: transparent; color: #a99aff; font-size: 10.4px; cursor: pointer; }.auth-input { height: 47px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(255,255,255,.095); border-radius: 13px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px rgba(255,255,255,.04); transition: .18s; }.auth-input:focus-within { border-color: rgba(141,124,247,.48); background: rgba(255,255,255,.065); box-shadow: 0 0 0 4px rgba(141,124,247,.08), inset 0 1px rgba(255,255,255,.07); }.auth-input > svg { width: 15px; flex: 0 0 auto; color: #747b8c; }.auth-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 13px; }.auth-input input::placeholder { color: #5e6473; }.password-toggle { padding: 5px; border: 0; background: transparent; color: #858c9c; font-size: 10.4px; cursor: pointer; }.auth-checkbox { display: flex; align-items: center; gap: 7px; margin: -1px 0 19px; color: var(--muted); font-size: 10.4px; }.auth-checkbox input { accent-color: var(--accent); }.auth-message { min-height: 0; overflow: hidden; margin-bottom: 0; padding: 0 10px; border-radius: 9px; color: #f2a1af; background: rgba(239,113,134,.08); font-size: 10.4px; line-height: 1.5; transition: .2s; }.auth-message.visible { min-height: 34px; display: flex; align-items: center; margin-bottom: 12px; }.auth-message.success { color: #74ddb8; background: rgba(82,214,167,.08); }.auth-submit { width: 100%; height: 47px; justify-content: space-between; padding: 0 16px; border-radius: 13px; }.auth-submit.loading { pointer-events: none; opacity: .75; }.auth-submit.loading svg { animation: auth-spin .8s linear infinite; } @keyframes auth-spin { to { transform: rotate(360deg); } }.auth-switch { display: flex; justify-content: center; gap: 5px; margin-top: 24px; color: var(--muted); font-size: 11.7px; }.auth-switch button { padding: 0; border: 0; background: transparent; color: #b2a5ff; font-size: inherit; font-weight: 650; cursor: pointer; }.auth-terms { margin: 28px auto 0; max-width: 310px; color: #565c69; font-size: 9.1px; line-height: 1.6; text-align: center; }

body.theme-ocean { --accent: #3ba7c4; --accent-2: #5dc8cf; --accent-soft: rgba(59,167,196,.16); --bg: #09131c; --bg-deep: #061016; }.theme-ocean .ambient-one { background: radial-gradient(circle, rgba(34,160,180,.34), transparent 67%); }.theme-ocean .ambient-three { background: radial-gradient(circle, rgba(43,113,207,.19), transparent 68%); }
body.theme-sunset { --accent: #d06da3; --accent-2: #e89373; --accent-soft: rgba(208,109,163,.16); --bg: #160d17; --bg-deep: #0b080f; }.theme-sunset .ambient-one { background: radial-gradient(circle, rgba(214,82,147,.33), transparent 67%); }.theme-sunset .ambient-two { background: radial-gradient(circle, rgba(236,130,87,.18), transparent 67%); }
body.light-mode { color-scheme: light; --bg: #e8ebf2; --bg-deep: #dfe3ec; --panel: rgba(248,249,252,.67); --panel-strong: rgba(248,249,252,.9); --panel-soft: rgba(255,255,255,.45); --glass-border: rgba(255,255,255,.72); --glass-highlight: rgba(255,255,255,.9); --text: #171823; --muted: #63697a; --subtle: #858b99; --shadow: 0 20px 60px rgba(52,54,78,.12); }.light-mode .topbar, .light-mode .sidebar { background: rgba(247,248,252,.67); }.light-mode .nav-item.active, .light-mode .icon-button, .light-mode .global-search, .light-mode .button.secondary { background: rgba(255,255,255,.45); }.light-mode .column { background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(244,245,249,.58)); border-color: rgba(255,255,255,.9); box-shadow: inset 0 1px #fff, 0 18px 45px rgba(59,61,86,.08); }.light-mode .task-card { background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(249,249,252,.7)); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px #fff, 0 8px 20px rgba(57,59,79,.08); }.light-mode .task-card h3 { color: #272936; }.light-mode .avatar-sm { border-color: #edf0f6; }.light-mode .card-dialog { background: rgba(244,245,249,.91); }.light-mode .form-group textarea, .light-mode .form-group input, .light-mode .form-group select { background: rgba(255,255,255,.58); }.light-mode .form-group select option { background: #fff; color: #222; }.light-mode .column-menu, .light-mode .toast { background: rgba(248,249,252,.95); }.light-mode .toast { color: #2d303a; }.light-mode .gantt-grid { background: rgba(255,255,255,.25); }.light-mode .gantt-task-head, .light-mode .gantt-calendar-head, .light-mode .gantt-task-info { background: rgba(248,249,252,.94); }.light-mode .gantt-task-info:hover { background: #fff; }.light-mode .gantt-timeline-row { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--day-width) - 1px), rgba(66,70,92,.08) calc(var(--day-width) - 1px), rgba(66,70,92,.08) var(--day-width)); }
body.focus-mode .sidebar { display: none; } body.focus-mode .app-shell { grid-template-columns: 1fr; } body.focus-mode .brand { width: auto; margin-right: 40px; }

@media (max-width: 1100px) { :root { --sidebar-width: 210px; }.main-nav .nav-item { padding: 0 10px; }.nav-item[data-placeholder-nav] { display: none; }.global-search { width: 190px; }.stat.compact:nth-of-type(3) { display: none; }.board-actions .member-stack { display: none; } }
@media (max-width: 820px) { body { overflow: auto; }.app-shell { min-height: 100vh; height: auto; display: block; }.topbar { position: sticky; top: 0; height: 64px; }.brand { width: auto; margin-right: 5px; }.brand > span:last-child { display: none; }.sidebar, .topbar-actions .icon-button, .global-search { display: none; }.main-nav { margin-left: auto; }.main-nav .nav-item { padding: 0 9px; }.topbar-actions { width: auto; margin-left: 5px; }.main-content { min-height: calc(100vh - 64px); padding: 22px 15px 0; overflow: visible; }.board-header { align-items: flex-start; }.board-actions { margin-top: 4px; }.button.secondary { display: none; }.board-title-area p { display: none; }.stats-strip { overflow-x: auto; }.stat { min-width: 220px; }.stat.compact { min-width: 90px; }.board-wrap { min-height: 580px; overflow-x: auto; }.column { width: 270px; flex-basis: 270px; max-height: 560px; }.gantt-view { min-height: 650px; }.gantt-toolbar { align-items: flex-start; flex-direction: column; }.gantt-toolbar-actions { width: 100%; margin-left: 0; }.gantt-chart { min-height: 540px; }.modal-shell { grid-template-columns: 1fr; overflow-y: auto; }.modal-main { overflow: visible; }.modal-preview { display: none; }.card-dialog { overflow-y: auto; }.form-grid { grid-template-columns: 1fr; }.milestone-editor { grid-template-columns: 1fr auto 1fr; }.completion-toggle { grid-column: 1 / -1; }.modal-actions { flex-wrap: wrap; }.danger-button { order: 2; }.action-spacer { display: none; }.modal-actions .button { flex: 1; }.customize-panel { inset: 8px; width: auto; }.auth-gate { grid-template-columns: 1fr; }.auth-visual { display: none; }.auth-form-side { min-height: 100vh; padding: 28px 22px; }.auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 52px; }.auth-mobile-brand .brand-mark { width: 29px; height: 29px; }.auth-card { max-width: 410px; } }
@media (max-width: 500px) { .topbar { padding: 0 12px; }.nav-item { font-size: 14.3px; }.board-actions .button.primary { width: 40px; padding: 0; }.board-actions .button.primary > :not(svg) { display: none; }.stats-strip { margin-bottom: 12px; }.gantt-grid { grid-template-columns: 280px var(--timeline-width); min-width: calc(280px + var(--timeline-width)); }.gantt-task-info { padding: 0 10px; }.gantt-status { display: none; }.modal-main { padding: 21px 17px; }.quick-row { overflow-x: auto; flex-wrap: nowrap; }.quick-chip { flex: 0 0 auto; }.card-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); border-radius: 21px; }.modal-shell { max-height: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }