:root { --ink:#172b4d; --muted:#5e6c84; --blue:#0c66e4; --surface:#f7f8fa; --line:#dfe1e6; --danger:#b42318; }
* { box-sizing:border-box } body { margin:0; color:var(--ink); background:var(--project-background,#f1f2f4); font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
.topbar { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; color:white; background:#2d1b45; box-shadow:0 1px 5px #1b102b66 }.brand { color:#ffad32; text-decoration:none; font-size:21px; font-weight:800; letter-spacing:-.6px }.topbar .button { background:#e87817; color:#fff }.topbar .button:hover { background:#f08b2d }.account { display:flex; align-items:center; gap:14px; font-size:14px }.account form { margin:0 }.read-only { color:#ddd0e8 }
button,.button { border:0; border-radius:5px; padding:8px 11px; background:var(--blue); color:#fff; cursor:pointer; font:inherit; font-weight:650; text-decoration:none }.quiet { background:#e9edf4; color:var(--ink) }.danger { background:#ffebe6; color:var(--danger) } input,textarea,select { width:100%; border:1px solid #b6c2cf; border-radius:4px; padding:8px; color:var(--ink); background:white; font:inherit } textarea { min-height:62px; resize:vertical }
.app-shell { display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 58px) }.sidebar { padding:24px 16px; background:#fff; border-right:1px solid var(--line) }.sidebar-title,.column-title { display:flex; align-items:center; justify-content:space-between }.sidebar h2,.column h2 { margin:0; font-size:14px }.sidebar-title span,.column-title span { color:var(--muted); font-size:12px; background:#dfe1e6; border-radius:20px; padding:1px 7px }.sidebar nav { display:grid; gap:4px; margin:15px 0 24px }.project-link { padding:9px 11px; border-radius:5px; color:var(--ink); text-decoration:none; font-weight:600 }.project-link:hover,.project-link.active { background:#e9f2ff; color:#0c66e4 }.add-project { display:grid; gap:8px }.add-project button { text-align:left; background:transparent; color:var(--blue); padding-left:2px }
.board-area { padding:28px; overflow:auto }.board-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px }.eyebrow { margin:0; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:1px; font-weight:700 }.board-heading h1 { margin:2px 0 0; font-size:28px }.hint { margin:0; color:var(--muted); font-size:13px }.columns { display:flex; gap:16px; align-items:flex-start; min-width:max-content }.column { width:285px; padding:12px; border-radius:9px; background:#dfe1e6 }.column-title { padding:0 3px 11px }.card-list { display:grid; gap:9px; min-height:12px; border-radius:6px; transition:background .15s, outline-color .15s }.card-list.is-drop-target { outline:2px solid #0c66e4; background:#cce0ff }.card { padding:12px; border-radius:6px; background:#fff; box-shadow:0 1px 1px #091e4226 }.card[draggable="true"] { cursor:grab }.card[draggable="true"]:active { cursor:grabbing }.card.is-dragging { opacity:.45 }.card-header { display:flex; align-items:start; justify-content:space-between; gap:8px }.card h3 { margin:0; font-size:14px }.card-collapse { flex:0 0 auto; padding:0 3px; background:transparent; color:var(--muted); font-size:17px; line-height:16px }.card-collapse:hover { color:var(--blue) }.card.is-collapsed .card-body { display:none }.card.is-collapsed .card-collapse span { display:block; transform:rotate(180deg) }.collapsed-complete { display:inline-block; margin-top:6px; color:#164b35; font-size:11px; font-weight:700 }.card p { margin:7px 0 0; color:var(--muted); white-space:pre-wrap; font-size:13px }.card details { margin-top:10px }.card summary { color:var(--blue); cursor:pointer; font-size:13px }.card details form { display:grid; gap:7px; margin-top:9px }.move-form { grid-template-columns:1fr auto }.new-card { display:grid; gap:8px; margin-top:11px }.new-card button { background:#f4f5f7; color:var(--ink); text-align:left }.add-column { width:190px; padding:12px; display:grid; gap:8px; border-radius:8px; background:#dfe1e6 }.add-column button { background:#f4f5f7; color:var(--ink); text-align:left }.flash { max-width:800px; margin:16px auto 0; padding:10px 13px; border-radius:5px }.flash.success { background:#dcfff1; color:#164b35 }.flash.error { background:#ffebe6; color:#ae2e24 }.login-shell { display:grid; place-items:center; min-height:calc(100vh - 58px) }.login-card { width:min(390px,calc(100% - 32px)); display:grid; gap:13px; padding:28px; border-radius:9px; background:#fff; box-shadow:0 6px 20px #091e4226 }.login-card h1 { margin:0 }.login-card p { margin:0 0 5px; color:var(--muted) }.login-card label { display:grid; gap:5px; font-weight:600 }
.bulk-tag-form { display:none; align-items:center; flex-wrap:wrap; gap:10px; margin:-8px 0 19px; padding:10px 12px; border-radius:7px; background:#e9f2ff; font-size:13px }.bulk-tag-form.has-selection { display:flex }.bulk-tag-options label { display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap }.bulk-tag-options input { width:auto; margin:0; accent-color:var(--blue) }.bulk-tag-options { display:flex; flex:1 1 220px; flex-wrap:wrap; gap:5px 9px; min-width:0; margin:0; padding:0; border:0 }.bulk-tag-options legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }.bulk-tag-actions { display:flex; gap:6px }.bulk-tag-form button { padding:7px 10px }.card-select { flex:0 0 auto; width:15px; height:15px; margin:2px 0 0; accent-color:var(--blue); cursor:pointer }
@media (max-width:700px) { .topbar { padding:0 16px }.app-shell { grid-template-columns:1fr }.sidebar { border-right:0; border-bottom:1px solid var(--line); padding:15px }.sidebar nav { display:flex; overflow:auto; margin:10px 0 14px }.project-link { white-space:nowrap }.add-project { display:flex }.board-area { padding:18px }.board-heading { align-items:start; gap:12px; flex-direction:column } }
.column-manage { margin:0 0 11px; padding:0 3px 2px }.column-manage summary { color:var(--blue); cursor:pointer; font-size:13px }.column-manage form { display:grid; gap:7px; margin-top:9px }.button-row { display:flex; gap:6px; margin-top:9px }.button-row form { margin:0 !important }.button-row button { padding:6px 8px; font-size:12px }.inline-form { grid-template-columns:1fr auto }
.tag-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px }.tag { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px; background:#dfe1e6; color:#172b4d; font-size:11px; font-weight:700 }.tag form { display:inline; margin:0 }.tag button { padding:0; border:0; background:transparent; color:inherit; font-size:15px; line-height:11px; font-weight:700 }.tag-bug { background:#ffebe6; color:#ae2e24 }.tag-feature { background:#e9f2ff; color:#0055cc }.tag-completed { background:#dcfff1; color:#164b35 }.tag-working { background:#fff7d6; color:#7f5f01 }.tag-deferred { background:#f1f2f4; color:#44546f }.tag-rejected { background:#f3e8ff; color:#803fa5 }
.tag-manager { margin-top:25px; padding-top:18px; border-top:1px solid var(--line) }.tag-manager summary { color:var(--blue); cursor:pointer; font-weight:650 }.tag-create,.tag-editor-list form { display:grid; gap:7px; margin-top:10px }.tag-create button { text-align:left; background:transparent; color:var(--blue); padding-left:2px }.tag-editor-list { display:grid; gap:8px }.tag-editor-row { display:grid; grid-template-columns:1fr auto; gap:5px; align-items:end }.tag-editor-list form { grid-template-columns:1fr auto; margin-top:0 }.tag-editor-row form:first-child { grid-template-columns:1fr 1fr auto }.tag-editor-list button { padding:6px 8px; font-size:12px }
.card-edit { margin-top:11px; padding:5px 0; background:transparent; color:var(--blue); font-size:12px }.card-dialog { width:min(620px,calc(100vw - 28px)); max-height:calc(100vh - 28px); border:0; border-radius:10px; padding:22px; color:var(--ink); box-shadow:0 12px 48px #091e4259 }.card-dialog::backdrop { background:#091e4266 }.dialog-header { display:flex; align-items:start; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line) }.dialog-header h2 { margin:2px 0 0; font-size:21px }.dialog-close { padding:0 5px; background:transparent; color:var(--muted); font-size:25px; line-height:1 }.card-edit-form { display:grid; gap:14px; margin-top:20px }.card-edit-form label { display:grid; gap:6px; font-size:13px; font-weight:700 }.card-edit-form textarea { min-height:135px }.dialog-actions { display:flex; justify-content:flex-end; gap:8px }.dialog-section { display:grid; gap:9px; margin-top:22px; padding-top:19px; border-top:1px solid var(--line) }.dialog-section h3 { margin:0; font-size:14px }.dialog-section .move-form { margin-top:2px }.empty-note { color:var(--muted); font-size:13px }.delete-card { margin-top:24px; padding-top:18px; border-top:1px solid var(--line) }.delete-card button { width:100% }
.card-notes { margin-top:11px; margin-right:8px; padding:5px 0; background:transparent; color:var(--blue); font-size:12px }.notes-dialog { width:min(720px,calc(100vw - 28px)); max-height:calc(100vh - 28px); border:0; border-radius:10px; padding:22px; color:var(--ink); box-shadow:0 12px 48px #091e4259 }.notes-dialog::backdrop { background:#091e4266 }.notes-form { display:grid; gap:14px; margin-top:20px }.notes-form label { display:grid; gap:6px; font-size:13px; font-weight:700 }.notes-form textarea { min-height:330px; line-height:1.55 }.notes-view { max-height:calc(100vh - 190px); overflow:auto; margin-top:20px; white-space:pre-wrap; color:var(--ink); line-height:1.6 }
.notes-preview { margin-top:22px; padding-top:18px; border-top:1px solid var(--line) }.notes-preview h3 { margin:0; font-size:14px }.notes-preview .notes-view { margin-top:9px; max-height:180px }
.columns.is-column-drop-target { outline:2px dashed var(--blue); outline-offset:8px }.column[draggable="true"] { cursor:grab }.column[draggable="true"]:active { cursor:grabbing }.column.is-dragging-column { opacity:.45 }.column-grip { flex:0 0 auto; color:var(--muted); font-size:17px; line-height:14px; cursor:grab }.column-title h2 { flex:1 }
.board-area { min-width:0; overflow-x:auto; overflow-y:auto }.columns { padding-bottom:10px }
.app-shell { grid-template-columns:240px minmax(0,1fr) }.column { flex:0 0 285px }
.app-shell { height:calc(100vh - 58px); min-height:0 }.sidebar { overflow-y:auto }
@media (max-width:700px) { .app-shell { grid-template-columns:minmax(0,1fr); height:auto; min-height:calc(100vh - 58px) }.sidebar { overflow:visible } }
.card { position:relative }.card-status-completed { background:#e4f8ec }.card-status-working-on-it { background:#fff5cf }.card-status-deferred { background:#e9edf4 }.card-status-rejected { background:#ffebe6 }.card.has-bug { padding-bottom:29px }.bug-card-icon { position:absolute; right:10px; bottom:7px; font-size:16px; line-height:1; filter:saturate(.85) }
.card-header,.card h3 { text-align:left }.card h3 { flex:1 }
.tag-editor-row { grid-template-columns:minmax(0,1fr) }.tag-editor-row form:first-child { grid-template-columns:minmax(0,1fr) }.tag-editor-row form:last-child { justify-self:start }
.project-description { max-width:650px; margin:7px 0 0; color:var(--muted); white-space:pre-wrap }.project-link-out { display:inline-block; margin-top:7px; color:var(--blue); font-size:13px; font-weight:650; text-decoration:none }.project-dialog { width:min(600px,calc(100vw - 28px)); border:0; border-radius:10px; padding:22px; color:var(--ink); box-shadow:0 12px 48px #091e4259 }.project-dialog::backdrop { background:#091e4266 }.project-settings-form { display:grid; gap:14px; margin-top:20px }.project-settings-form label { display:grid; gap:6px; font-size:13px; font-weight:700 }.project-settings-form textarea { min-height:100px }.project-settings-form input[type="color"] { width:64px; height:38px; padding:3px; cursor:pointer }.project-settings-form .public-setting { display:flex; align-items:center; gap:8px; font-weight:600 }.public-setting input { width:auto }
.color-control { display:flex; align-items:center; gap:9px }.color-control button { font-size:12px }
.manage-tags-link { display:block; margin-top:25px; padding-top:18px; border-top:1px solid var(--line); color:var(--blue); font-weight:650; text-decoration:none }.tag-management-shell { width:min(920px,calc(100% - 32px)); margin:0 auto; padding:36px 0 52px }.tag-management-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px }.tag-management-heading h1 { margin:2px 0 0; font-size:28px }.tag-project-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px }.tag-project-tabs a { padding:7px 10px; border-radius:5px; color:var(--ink); background:#e9edf4; font-size:13px; font-weight:650; text-decoration:none }.tag-project-tabs a.active { background:#e9f2ff; color:var(--blue) }.tag-management-card { margin-top:15px; padding:22px; border:1px solid var(--line); border-radius:9px; background:#fff }.tag-management-card h2 { margin:0; font-size:17px }.tag-create-wide { grid-template-columns:minmax(0,1fr) minmax(180px,.7fr) auto; align-items:end }.tag-create-wide label,.tag-editor-list-wide label { display:grid; gap:5px; font-size:12px; font-weight:700 }.tag-create-wide button { margin-bottom:0; padding:8px 11px; background:var(--blue); color:#fff }.manager-hint { margin:6px 0 18px; color:var(--muted); font-size:13px }.tag-editor-list-wide { gap:10px }.tag-editor-list-wide .tag-editor-row { grid-template-columns:minmax(0,1fr) auto; padding-top:10px; border-top:1px solid var(--line) }.tag-editor-list-wide .tag-editor-row form:first-child { grid-template-columns:minmax(0,1fr) minmax(180px,.7fr) auto; align-items:end }.tag-editor-list-wide .tag-editor-row form:last-child { align-self:end }.tag-editor-list-wide button { padding:8px 11px }
@media (max-width:700px) { .tag-management-shell { padding-top:24px }.tag-management-heading { align-items:start; flex-direction:column }.tag-create-wide,.tag-editor-list-wide .tag-editor-row form:first-child { grid-template-columns:minmax(0,1fr) }.tag-editor-list-wide .tag-editor-row { grid-template-columns:minmax(0,1fr) } }
.card p a,.notes-view a { color:var(--blue); text-decoration:underline; text-underline-offset:2px }
.column-collapse { flex:0 0 auto; margin-left:2px; padding:0 3px; background:transparent; color:var(--muted); font-size:17px; line-height:16px }.column-collapse:hover { color:var(--blue) }.column.is-collapsed > :not(.column-title) { display:none }.column.is-collapsed .column-collapse { transform:rotate(180deg) }
.archived-columns { margin-top:20px; padding-top:16px; border-top:1px solid var(--line) }.archived-columns > h2 { margin:0; font-size:16px }.archived-columns > p { margin:4px 0 12px; color:var(--muted); font-size:13px }.archived-column-row { min-width:0 }.column.is-archived { background:#e9edf4 }.column.is-archived .column-title form { margin:0 }.column.is-archived .column-title form button { padding:5px 8px; font-size:12px }