:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1a2335;
  background: #f7f8fc;
  --ink: #1a2335;
  --muted: #5b667b;
  --line: #dfe4ed;
  --blue: #3158dd;
  --sidebar: #131e32;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: wait; opacity: .62; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #6588ff; outline-offset: 2px; }
svg { width: 19px; height: 19px; flex: none; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 5; background: white; padding: 12px; }
.skip-link:focus { top: 12px; }

.shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: auto; background: var(--sidebar); color: #c2cce0; padding: 27px 17px 17px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; font-weight: 750; letter-spacing: -.035em; line-height: 1.15; }
.sidebar .brand { margin: 0 2px 40px; }
.brand img { width: 36px; height: 36px; }
.brand small { display: block; color: #aebbd4; margin-top: 5px; font: 700 9px var(--mono); letter-spacing: .07em; }
.nav-label { display: flex; align-items: center; justify-content: space-between; margin: 0 9px 9px; color: #99a8c4; font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
nav a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; margin-bottom: 3px; border-radius: 8px; font-size: 13px; font-weight: 650; }
nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav a:hover, nav a[aria-current] { color: #fff; background: #263652; }
nav a[aria-current] { box-shadow: inset 3px 0 #83a0ff; }
.projects-label, .admin-label { margin-top: 28px; }
.nav-empty { padding: 3px 10px; color: #aebbd4; font-size: 12px; }
.profile { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid #344159; }
.sidebar nav { padding-bottom: 24px; }
.profile div { min-width: 0; flex: 1; }
.profile strong, .profile small { display: block; overflow: hidden; text-overflow: ellipsis; }
.profile strong { color: white; font-size: 13px; }
.profile small { color: #b4bfd3; font-size: 11px; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: #e3eaff; color: #294bb9; font: 700 12px var(--mono); }
.profile .avatar { background: #34496f; color: #e4edff; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 7px; background: transparent; color: inherit; }
.icon-button:hover { background: #8093b329; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 72px; background: #fff; border-bottom: 1px solid var(--line); padding: 12px clamp(16px, 3.4vw, 52px); }
.breadcrumb, .top-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.breadcrumb { color: var(--muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb svg { width: 13px; }
.switcher { min-width: 0; }
.switcher select { width: clamp(118px, 14vw, 190px); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 750; white-space: nowrap; }
.button svg { width: 16px; height: 16px; }
.primary { color: white; background: var(--blue); box-shadow: 0 2px 3px #17286125; }
.primary:hover { background: #2649c2; }
.secondary { background: #fff; color: #34415a; border-color: var(--line); }
.secondary:hover { background: #edf2ff; }

#main-content { max-width: 1520px; margin: auto; padding: 42px clamp(16px, 3.4vw, 52px) 56px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 27px; }
.page-heading > div { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #435986; font: 750 10px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.signal { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #3c64e6; box-shadow: 0 0 0 3px #dfe7ff; }
h1 { margin: 9px 0 7px; font-size: clamp(34px, 4.1vw, 56px); line-height: 1.04; letter-spacing: -.065em; overflow-wrap: anywhere; }
.page-description { color: var(--muted); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.metrics, .group-grid, .project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.metric, .project-card, .panel { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.metric-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #34415a; font-weight: 750; font-size: 13px; }
.metric-icon, .group-icon, .project-symbol { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #e9edfa; color: #465983; flex: none; }
.metric-icon.working, .group-icon.working { background: #e1e9ff; color: #2b4ebf; }
.metric-icon.next, .group-icon.next { background: #dff3ea; color: #167252; }
.metric-icon.blocked, .group-icon.blocked { background: #fbe8e1; color: #a23d26; }
.metric > strong { display: block; font-size: 32px; letter-spacing: -.055em; margin: 4px 0 3px; }
.metric-caption { color: var(--muted); font-size: 12px; line-height: 1.4; display: block; }

.activity { margin-top: 32px; }
.activity-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 13px; gap: 12px; }
.activity-heading h2, .archive-section > h2 { margin-top: 4px; font-size: 23px; letter-spacing: -.045em; }
.activity-heading > p { font-size: 12px; color: var(--muted); }
.filters { display: flex; gap: 8px; margin-bottom: 14px; }
.filters label { min-width: 0; }
.filters .search { flex: 1; position: relative; }
.search svg { position: absolute; left: 11px; top: 11px; width: 17px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 35px; }
input, select, textarea { min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); padding: 8px 10px; font-size: 13px; }
input, textarea { width: 100%; }
select { padding-right: 7px; }
textarea { resize: vertical; }
.filters select { width: 100%; max-width: 200px; }
.group { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #edf0f7; min-height: 224px; }
.group-header { display: flex; align-items: center; min-height: 53px; padding: 10px 11px; gap: 8px; }
.group-header h2 { font-size: 13px; letter-spacing: -.01em; }
.group-icon { width: 27px; height: 27px; }
.group-icon svg { width: 16px; height: 16px; }
.count { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 5px; border-radius: 6px; background: #e2e7f1; color: #4b5874; font: 750 11px var(--mono); vertical-align: middle; }
.group-items { display: grid; gap: 14px; padding: 2px 10px 12px; }
.group-add { margin-left: auto; }
.queue-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.empty-group { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 157px; padding: 15px; text-align: center; background: #f7f8fb; border: 1px dashed #ccd5e5; border-radius: 8px; }
.empty-group > span, .empty-project > span { display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 3px; background: #e9edf7; border-radius: 9px; color: #52658b; }
.empty-group strong { font-size: 13px; }
.empty-group p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-card {
  --paper: #fff3b9;
  --adhesive: #f6df8c;
  position: relative;
  min-width: 0;
  padding: 14px 12px 12px;
  border: 1px solid var(--adhesive);
  border-radius: 2px 2px 11px 2px;
  background: linear-gradient(var(--adhesive) 0 9px, var(--paper) 9px);
  box-shadow: 0 2px 3px #20273924, 1px 5px 9px -5px #20273970;
}
.task-card[data-type="bug"] { --paper: #ffe4e0; --adhesive: #f4beb5; }
.task-card[data-type="feature"] { --paper: #e2edff; --adhesive: #bed2f2; }
.task-card[data-type="improvement"] { --paper: #e2f3db; --adhesive: #c4e2b9; }
.task-card[data-type="maintenance"] { --paper: #eee5fb; --adhesive: #d8c7ee; }
.task-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 2px 0 9px 0;
  background: linear-gradient(135deg, var(--adhesive) 50%, transparent 51%);
  pointer-events: none;
}
.task-card[draggable] { cursor: grab; }
.task-card.dragging { opacity: .45; }
.group.drag-over { outline: 2px dashed #597cf1; outline-offset: -3px; background: #e1eaff; }
.task-meta, .task-project, .card-controls { display: flex; align-items: center; gap: 7px; }
.task-meta { margin-bottom: 4px; }
.task-id { color: var(--muted); font: 700 10px var(--mono); }
.edit-task { margin-left: auto; color: #596880; }
.edit-task svg { width: 15px; height: 15px; }
.badge { display: inline-block; flex: none; padding: 4px 7px; border-radius: 5px; background: #edf0f7; color: #465679; font-size: 11px; font-weight: 750; }
.type-idea { background: #ede8fc; color: #593b93; }
.type-bug { background: #fae6e6; color: #983139; }
.type-feature { background: #e4edff; color: #274f9c; }
.type-improvement { background: #e0f2ea; color: #15664a; }
.type-maintenance { background: #f5edda; color: #775216; }
.task-title { display: block; width: 100%; padding: 0; text-align: left; font-size: 15px; font-weight: 780; line-height: 1.3; color: var(--ink); background: none; border: 0; overflow-wrap: anywhere; }
.task-title:hover { color: var(--blue); }
.task-project { flex-wrap: wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; margin: 7px 0; }
.project-dot { width: 8px; height: 8px; flex: none; border-radius: 3px; background: currentColor; }
.tone-0 { color: #30816d; }
.tone-1 { color: #6d82dc; }
.tone-2 { color: #b77f42; }
.tone-3 { color: #a86ac1; }
.task-description, .blocked-reason { margin: 8px 0; font-size: 12px; color: var(--muted); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blocked-reason { display: flex; align-items: start; gap: 6px; padding: 6px; background: #fff0ea; border-radius: 5px; color: #873421; }
.blocked-reason svg { width: 15px; height: 15px; }
.card-controls { flex-wrap: wrap; border-top: 1px dashed #343b4f40; padding-top: 8px; }
.card-controls label { flex: 1 0 102px; min-width: 0; }
.card-controls select { width: 100%; min-height: 32px; padding: 4px; border-color: #343b4f30; background: #fffc; font-size: 11px; font-weight: 700; }
.scope-5 select, .scope-4 select { color: #a03a23; background: #fff5ef; }
.scope-3 select { color: #355098; background: #f3f6ff; }

.project-actions, .project-links { display: flex; gap: 8px; flex-wrap: wrap; }
.project-links { margin: -11px 0 22px; }
.project-links a { display: inline-flex; align-items: center; gap: 5px; color: #2b4ebf; font-size: 13px; font-weight: 700; }
.project-card-top, .project-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.project-card h2 { font-size: 19px; margin: 13px 0 6px; overflow-wrap: anywhere; }
.project-card p { font-size: 13px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.project-card-bottom { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.project-card-bottom a { color: #2b4ebf; font-weight: 750; }
.project-card-bottom svg { width: 15px; }
.empty-project { grid-column: 1 / -1; display: grid; justify-items: center; gap: 9px; padding: 36px 14px; border: 1px dashed #c9d3e6; border-radius: 12px; background: white; text-align: center; }
.empty-project p { color: var(--muted); font-size: 13px; }
.empty-project .button { margin-top: 6px; }
.archive-section { margin-top: 28px; }
.archive-section h2 { margin-bottom: 12px; }

.accounts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel > p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.panel h2 { font-size: 20px; }
.panel form, .login-box form, .editor-fields, .nested-fields { display: grid; gap: 13px; }
.panel form { margin-top: 18px; }
.panel form .button { justify-self: start; }
form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.members { list-style: none; margin: 10px 0 0; padding: 0; }
.members li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 9px 0; font-size: 13px; }
.members li strong { flex: 1; overflow-wrap: anywhere; }
.members li:last-child { border-bottom: 0; }

dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); box-shadow: 0 18px 65px #121d3852; }
dialog::backdrop { background: #101a31a8; }
dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
.editor-header, .editor-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 18px; }
.editor-header { border-bottom: 1px solid var(--line); }
.editor-header h2 { font-size: 22px; letter-spacing: -.035em; }
.editor-fields { padding: 16px 18px; overflow: auto; }
.editor-footer { justify-content: end; border-top: 1px solid var(--line); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nested-fields { padding: 10px; background: #f2f5fb; border-radius: 8px; }
form .check { display: flex; align-items: center; gap: 8px; }
.check input { width: 17px; min-height: 17px; accent-color: var(--blue); }
.scope-help { font-size: 12px; font-weight: 500; color: var(--muted); }
.form-error { color: #983139; background: #fff0ef; padding: 9px 11px; border-radius: 7px; font-size: 13px; }
.notice { position: fixed; right: 18px; bottom: 18px; z-index: 3; max-width: calc(100% - 36px); padding: 11px 15px; background: #192848; color: white; border-radius: 8px; opacity: 0; pointer-events: none; font-size: 13px; }
.notice.visible { opacity: 1; }
.notice.error { background: #8b3029; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #eef1f8; }
.login-layout { display: grid; grid-template-columns: 1.1fr 1fr; width: min(100%, 1000px); min-height: 550px; border-radius: 18px; background: white; border: 1px solid #e0e5f0; box-shadow: 0 15px 65px #1b32571c; overflow: hidden; }
.login-identity { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4.3vw, 58px); color: #fff; background-color: #14223b; background-image: radial-gradient(ellipse at bottom right, #293f75, transparent 72%), linear-gradient(#8ca1d016 1px, transparent 1px), linear-gradient(90deg, #8ca1d016 1px, transparent 1px); background-size: auto, 29px 29px, 29px 29px; }
.login-copy { margin: 40px 0; }
.login-copy .eyebrow { color: #c4d5ff; }
.login-copy .signal { background: #abd5ae; box-shadow: 0 0 0 3px #abd5ae32; }
.login-copy h1 { margin: 13px 0; font-size: clamp(40px, 5.4vw, 75px); }
.login-copy p { max-width: 320px; color: #c6d1ea; font-size: 14px; line-height: 1.6; }
.login-caption { padding-top: 13px; border-top: 1px solid #8398c754; color: #bbc9e7; font: 700 10px var(--mono); letter-spacing: .09em; }
.login-main { display: grid; align-items: center; padding: clamp(24px, 4.4vw, 60px); }
.login-box h2 { font-size: 35px; letter-spacing: -.06em; margin: 5px 0; }
.login-box > p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.login-box form { margin-top: 23px; gap: 15px; }
.login-submit { justify-content: space-between; margin-top: 4px; }
.loading { color: var(--muted); }

@media (max-width: 1020px) {
  .shell { grid-template-columns: 198px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; padding: 11px 14px 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
  .sidebar .brand { margin: 0; }
  .sidebar .brand img { width: 30px; height: 30px; }
  .sidebar .brand small { font-size: 8px; }
  .sidebar nav { grid-column: 1 / -1; display: flex; gap: 3px; align-items: center; flex-wrap: wrap; padding: 2px 0 0; }
  .sidebar nav a { min-height: 34px; margin: 0; padding: 6px; gap: 4px; font-size: 11px; }
  .sidebar nav svg { width: 14px; height: 14px; }
  .sidebar .nav-label, .sidebar .project-nav { display: none; }
  .profile { grid-row: 1; grid-column: 2; margin: 0; padding: 0; border: 0; }
  .profile .avatar { width: 27px; height: 27px; }
  .profile > div { display: none; }
  .topbar { min-height: 61px; }
  #main-content { padding-top: 26px; }
  .card-controls select { min-height: 36px; }
}
@media (max-width: 570px) {
  .breadcrumb > span, .breadcrumb svg { display: none; }
  .breadcrumb strong { max-width: 26vw; }
  .top-actions { gap: 6px; }
  .top-actions .button { padding-inline: 9px; }
  .page-heading { align-items: start; flex-direction: column; }
  .metrics { gap: 6px; }
  .metric { padding: 8px; }
  .metric-top { font-size: 11px; gap: 4px; }
  .metric-icon { width: 21px; height: 21px; }
  .metric-icon svg { width: 14px; height: 14px; }
  .metric > strong { font-size: 24px; }
  .metric-caption { font-size: 10px; }
  .group-grid, .project-grid, .accounts-grid { grid-template-columns: minmax(0, 1fr); }
  .group { min-height: 0; }
  .empty-group { min-height: 110px; }
  .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .filters .search { grid-column: 1 / -1; }
  .board-heading { align-items: start; flex-direction: column; gap: 4px; }
  .login-page { padding: 12px; }
  .login-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .login-copy { margin: 26px 0; }
  .login-copy h1 { font-size: 37px; }
}