:root {
  --bg-primary: #0a0a0a;
  --bg-sidebar: #0f0f0f;
  --bg-surface: #141414;
  --bg-hover: #1a1a1a;
  --border: #242424;
  --border-color: var(--border);
  --text-primary: #e2e2e2;
  --text-secondary: #8b8b8b;
  --text-tertiary: #6f6f6f;
  --accent: #5e6ad2;
  --accent-weak: rgba(94, 106, 210, 0.18);
  --danger: #e5484d;
  --ok: #45a46f;
  --warn: #f5a524;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #f7f7f8;
    --bg-sidebar: #eeeeef;
    --bg-surface: #ffffff;
    --bg-hover: #f0f1f5;
    --border: #dedfe5;
    --text-primary: #1d1d21;
    --text-secondary: #6c6f78;
    --text-tertiary: #8a8d96;
    --accent: #4f5bd5;
    --accent-weak: rgba(79, 91, 213, 0.12);
    --shadow: 0 24px 70px rgba(10, 10, 20, 0.14);
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font:
    13px/1.45 Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  letter-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
  color: var(--text-primary);
}
button {
  cursor: pointer;
}
.hidden {
  display: none !important;
}
.muted {
  color: var(--text-secondary);
}
.error {
  min-height: 18px;
  color: var(--danger);
}
.success {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
}
.invite-warning {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.btn:hover,
button:hover {
  background: var(--bg-hover);
}
.btn.primary,
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.lp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.lp-btn-secondary:hover {
  background: var(--bg-hover);
}
input,
textarea,
select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  padding: 7px 9px;
  outline: none;
}
textarea {
  min-height: 92px;
  resize: vertical;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.lp-body {
  min-height: 100vh;
  background: #080b10;
}
.lp-hero {
  min-height: 74vh;
  display: grid;
  grid-template-rows: 56px 1fr;
  padding: 0 32px 42px;
  background: #080b10;
  border-bottom: 1px solid var(--border);
}
.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.lp-copy {
  align-self: center;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}
.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}
.lp-copy h1 {
  margin: 6px 0 12px;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 0.95;
  letter-spacing: 0;
}
.lp-copy p {
  max-width: 620px;
  color: var(--text-secondary);
  font-size: 17px;
}
.lp-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
.lp-features header {
  grid-column: 1 / -1;
  padding: 48px 28px 28px;
  background: var(--bg-primary);
}
.lp-features header h2 {
  max-width: 1100px;
  margin: 0 auto;
  font-size: 28px;
  line-height: 1.1;
}
.lp-features article {
  min-height: 190px;
  padding: 28px;
  background: var(--bg-primary);
}
.lp-features h2 {
  margin: 0 0 8px;
  font-size: 17px;
}
.lp-features p {
  color: var(--text-secondary);
  margin: 0;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}
.login-card {
  width: min(390px, 100%);
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.login-card h1 {
  margin: 0 0 4px;
}
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 18px 0;
  padding: 3px;
  background: var(--bg-primary);
  border-radius: 7px;
  border: 1px solid var(--border);
}
.tabs button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  min-height: 28px;
  color: var(--text-secondary);
}
.tabs button.active {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.auth-form {
  display: grid;
  gap: 10px;
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
}
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 10px;
}

/* ── Sidebar ── */
.sb-projects-toggle:hover {
  background: var(--bg-hover);
  border-radius: 5px;
}

.sb-count-badge {
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.4;
}

/* ── Workspace switcher ── */
.workspace-switcher {
  position: relative;
  margin-bottom: 12px;
}
.ws-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.ws-trigger:hover {
  background: var(--bg-hover);
}
.ws-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
}
.ws-active-name,
.ws-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-primary);
}
.ws-active-name {
  font-weight: 600;
}
.ws-caret {
  font-size: 11px;
  color: var(--text-tertiary);
}
.ws-gear {
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
}
.ws-gear:hover {
  color: var(--text-primary);
}
.ws-trigger-gear {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.ws-trigger-gear:hover {
  background: transparent;
}
.ws-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 8px;
  background: var(--bg-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 200;
}
.ws-row {
  width: 100%;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.ws-row:hover {
  background: var(--bg-hover);
}
.ws-checkmark {
  width: 14px;
  flex: 0 0 14px;
  color: var(--accent);
  font-size: 12px;
}
.ws-role {
  color: var(--text-tertiary);
  font-size: 11px;
}
.ws-row .ws-gear {
  opacity: 0;
  transition: opacity 150ms;
}
.ws-row:hover .ws-gear {
  opacity: 1;
}
.ws-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--border);
}
.ws-new,
.ws-new .ws-name {
  color: var(--accent);
  font-size: 13px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.nav-group {
  margin: 14px 0;
}
.nav-title {
  color: var(--text-secondary);
  font-size: 11px;
  margin: 0 8px 6px;
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
}
.nav-item .ti {
  width: 15px;
  font-size: 15px;
  line-height: 1;
  flex: 0 0 15px;
  text-align: center;
}
.nav-item.active,
.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar-bottom {
  position: relative;
  margin-top: auto;
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  overflow: visible;
}
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}
.profile-trigger-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-secondary);
}
.profile-trigger:hover {
  background: var(--bg-hover);
}
#account-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 6px;
  right: 6px;
  background: #1a1a1a;
  border: 0.5px solid #333;
  border-radius: 10px;
  overflow: hidden;
  z-index: 100;
}
.account-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 0.5px solid #2a2a2a;
}
.account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5e6ad2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.account-name {
  font-size: 13px;
  font-weight: 500;
  color: #e2e2e2;
}
.account-email {
  font-size: 11px;
  color: #6f6f6f;
}
.dropdown-section {
  padding: 6px;
  border-top: 0.5px solid #2a2a2a;
}
.dropdown-label {
  display: block;
  padding: 4px 8px 6px;
  font-size: 10px;
  color: #6f6f6f;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dropdown-section a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #c2c2c2;
  text-decoration: none;
  cursor: pointer;
}
.dropdown-section a:hover {
  background: #242424;
}
.dropdown-danger a {
  color: #e06c6c;
}
.main-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 40px 1fr;
  overflow: hidden;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.topbar h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.avatar,
.av,
.ws-avatar,
.account-avatar,
.profile-avatar {
  position: relative;
}
.presence-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--bg-primary);
  border-radius: 50%;
  background: #7a7a7a;
}
.presence-dot.online {
  background: #4cb782;
}
.presence-dot.offline {
  background: #7a7a7a;
}
.view {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(16px + 72px + env(safe-area-inset-bottom));
  scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.view-head h2 {
  margin: 0;
  font-size: 18px;
}
.table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg-surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th,
td {
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  background: var(--bg-primary);
}
tr:last-child td {
  border-bottom: 0;
}
tbody tr {
  cursor: pointer;
}
tbody tr:hover {
  background: var(--bg-hover);
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 12px;
}
.pill.done,
.pill.good {
  color: var(--ok);
  background: rgba(69, 164, 111, 0.13);
}
.pill.high,
.pill.urgent {
  color: var(--danger);
  background: rgba(229, 72, 77, 0.13);
}
.pill.medium,
.pill.at_risk {
  color: var(--warn);
  background: rgba(245, 165, 36, 0.13);
}
.empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}
.board.with-cancelled {
  grid-template-columns: repeat(5, minmax(220px, 1fr));
}
.column {
  min-height: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
.column h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 4px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.col-add-btn {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
}
.col-add-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.task-card {
  display: grid;
  gap: 7px;
  min-height: 84px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-primary);
  cursor: grab;
}
.task-card:active {
  cursor: grabbing;
}
.card-id {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.card-title {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.card-title:hover {
  color: var(--accent);
}
.label-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 4px 0 7px;
}
.label-pills.compact {
  margin: 2px 0 6px;
}
.label-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 7px;
  border: 0.5px solid color-mix(in srgb, var(--label-color) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--label-color) 14%, transparent);
  color: var(--text-primary);
  font-size: 11px;
  line-height: 16px;
}
.label-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--label-color);
  flex: 0 0 7px;
}
.label-remove {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}
.label-remove:hover {
  background: var(--bg-hover);
  color: var(--danger);
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pri-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pri-dot.pri-urgent {
  background: var(--danger);
}
.pri-dot.pri-high {
  background: var(--warn);
}
.pri-dot.pri-medium {
  background: var(--accent);
}
.pri-dot.pri-low {
  background: var(--text-tertiary);
}
.due {
  font-size: 11px;
  color: var(--text-secondary);
  flex: 1;
}
.assignee,
.av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatars {
  display: flex;
  align-items: center;
}
.avatars .av:not(:first-child) {
  margin-left: -5px;
}
.av {
  border: 1px solid var(--bg-primary);
}
.av.more {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: var(--border);
}
.card-assignees {
  flex-shrink: 0;
}
.issue-assignees {
  display: flex;
  align-items: center;
  gap: 8px;
}
.col-quick-add {
  margin-top: 8px;
}
.quick-add-trigger {
  padding: 8px;
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 13px;
}
.quick-add-trigger:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.quick-add-input {
  width: 100%;
  background: var(--bg-primary);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: 10vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
}
.modal {
  position: relative;
  width: min(460px, calc(100vw - 28px));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
}
.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.modal h2 {
  margin: 0 0 14px;
  font-size: 16px;
}
.form-grid {
  display: grid;
  gap: 10px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow: auto;
  z-index: 30;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.drawer-head h2 {
  font-size: 14px;
  margin: 0;
  color: var(--text-secondary);
}
.drawer-form {
  display: grid;
  gap: 10px;
}
.drawer-form label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}
.dl {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 5px;
}
.arow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  margin-bottom: 5px;
  border-radius: var(--border-radius-md, 6px);
  border: 0.5px solid var(--border);
  background: var(--bg-surface);
}
.arow-b {
  border: 0.5px solid var(--border);
  border-radius: 7px;
  background: var(--bg-surface);
  margin-bottom: 6px;
  overflow: hidden;
}
.arow-b-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.arow-b-head:hover {
  background: var(--bg-hover);
}
.aname {
  font-size: 13px;
  color: var(--text-primary);
}
.assignee-presence {
  color: var(--text-tertiary);
  flex: 1;
  font-size: 11px;
}
.perm-summary {
  font-size: 11px;
  color: var(--text-tertiary);
  flex: 1;
  text-align: right;
  margin-right: 4px;
}
.perm-caret {
  font-size: 11px;
  color: var(--text-tertiary);
  transition: transform 200ms;
  flex-shrink: 0;
}
.arow-b-perms {
  padding: 8px 10px 10px 42px;
  border-top: 0.5px solid var(--border);
  flex-direction: column;
  gap: 8px;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.perm-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms;
}
.toggle-on {
  background: var(--ok, #4cb782);
}
.toggle-off {
  background: var(--border-strong);
}
.perm-toggle::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  transition: left 150ms;
}
.toggle-on::after {
  left: 17px;
}
.toggle-off::after {
  left: 3px;
}
.toggle-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.axbtn {
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 12px;
}
.axbtn:hover {
  color: var(--danger);
}
.addrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: var(--border-radius-md, 6px);
  border: 0.5px dashed var(--border-strong, var(--border));
}
.addrow:hover {
  background: var(--bg-hover);
}
.addlbl {
  font-size: 13px;
  color: var(--text-tertiary);
}
.small {
  font-size: 12px;
}
.task-label-box {
  display: grid;
  gap: 6px;
}
.label-add {
  width: 100%;
  background: transparent;
}
.label-picker {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
}
.label-picker-input {
  width: 100%;
}
.label-picker-results {
  display: grid;
  gap: 3px;
}
.label-picker-row {
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.label-picker-row:hover {
  background: var(--bg-hover);
}
.workspace-labels {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.workspace-label-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(100px, 1fr) 44px auto auto;
  gap: 6px;
  align-items: center;
}
.workspace-label-color {
  min-width: 44px;
  padding: 2px;
}
.you-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 0.5px solid var(--accent);
  color: var(--accent);
}
.assignee-picker {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
}
.assignee-picker-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.assignee-picker-row:hover {
  background: var(--bg-hover);
}
.assignee-picker-empty {
  padding: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.teams-list {
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 8px;
  padding: 10px 12px;
  gap: 12px;
}
.member-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.member-main > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-presence {
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-size: 11px;
}
.member-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.member-remove {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: color 150ms;
}
.member-remove:hover {
  background: transparent;
  color: var(--danger);
}

/* ── Profile modal ── */
.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.profile-email {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* ── Admin panel ── */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.admin-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
}
.admin-stat-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.admin-stat-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

/* ── Admin actions ── */
.admin-action-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border-strong, var(--border));
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    color 150ms,
    border-color 150ms,
    background 150ms;
  white-space: nowrap;
}
.admin-action-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
  background: var(--bg-hover);
}
.admin-action-btn:disabled {
  cursor: default;
  opacity: 0.75;
}
.admin-action-btn--active {
  color: var(--accent);
  border-color: var(--accent);
}
.admin-action-btn--danger {
  color: var(--danger);
  border-color: var(--danger);
}
.admin-action-btn--danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.admin-action-col {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

#ai-toggle-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
#ai-toggle-btn:hover {
  opacity: 0.9;
}
#ai-panel {
  position: fixed;
  right: 24px;
  bottom: 76px;
  width: 300px;
  height: 420px;
  background: var(--bg-sidebar);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
  box-shadow: var(--shadow);
}
#ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
#ai-close-btn {
  background: none;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
}
#ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-bubble {
  max-width: 85%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
}
.ai-bubble.assistant {
  background: var(--bg-hover);
  border-radius: 0 8px 8px 8px;
  align-self: flex-start;
}
.ai-bubble.user {
  background: #1e1e3a;
  border-radius: 8px 0 8px 8px;
  align-self: flex-end;
  color: #c2c2e2;
}
.ai-typing {
  color: var(--text-tertiary);
}
#ai-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 0.5px solid var(--border);
  flex-shrink: 0;
}
#ai-input {
  flex: 1;
  background: var(--bg-hover);
  border: 0.5px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
}
#ai-send-btn {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

@media (max-width: 760px) {
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .main-panel {
    min-height: 0;
  }
  .lp-features {
    grid-template-columns: 1fr;
  }
  .board,
  .board.with-cancelled {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  #ai-panel {
    right: 12px;
    bottom: 68px;
    width: calc(100vw - 24px);
    height: min(420px, calc(100vh - 96px));
  }
  #ai-toggle-btn {
    right: 16px;
    bottom: 16px;
  }
}