/* GitHub Projects (Primer dark) — measured against the reference screenshot */
:root {
  --bg-default: #0d1117;
  --bg-inset: #010409;
  --bg-muted: #151b23;
  --bg-overlay: #151b23;
  --btn-bg: #212830;
  --btn-hover-bg: #262c36;
  --btn-active-bg: #2a313c;
  --border-default: #3d444d;
  --border-muted: #3d444db3;
  --fg-default: #f0f6fc;
  --fg-muted: #9198a1;
  --fg-accent: #4493f8;
  --accent-emphasis: #1f6feb;
  --danger-fg: #f85149;
  --danger-emphasis: #da3633;
  --success-emphasis: #238636;
  --counter-bg: #15191f;
  --hover-bg: #656c7633;
  --selected-bg: #656c761a;
  --shadow-overlay: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-default);
  color: var(--fg-default);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--fg-accent); text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--fg-default);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: var(--btn-hover-bg); }
.btn:active { background: var(--btn-active-bg); }
.btn .octicon { color: var(--fg-muted); }
.btn-primary { background: var(--success-emphasis); border-color: #f0f6fc1a; color: #fff; }
.btn-primary:hover { background: #29903b; }
.btn-danger { color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-emphasis); border-color: #f0f6fc1a; color: #fff; }
.btn-invisible { background: transparent; border-color: transparent; }
.btn-invisible:hover { background: var(--hover-bg); }
.btn-sm { height: 28px; padding: 0 8px; font-size: 12px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover-bg); color: var(--fg-default); }
.icon-btn.bordered { width: 32px; height: 32px; border-color: var(--border-default); }
.icon-btn.bordered:hover { background: var(--btn-bg); }

:focus-visible { outline: 2px solid var(--accent-emphasis); outline-offset: -2px; }

/* ——— Header ——— */
.project-header {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.header-top {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-default);
}

.header-left { display: flex; align-items: center; gap: 8px; }

.header-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px 8px;
}

.header-actions { display: flex; align-items: center; gap: 8px; }

/* ——— Tabs (one per project) ——— */
.view-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 16px;
  margin-bottom: -1px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.view-tabs::-webkit-scrollbar { display: none; }

.view-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.view-tab:hover { color: var(--fg-default); }
.view-tab:hover:not(.selected) .tab-label { text-decoration: none; }
.view-tab .octicon { color: var(--fg-muted); }
.view-tab.selected {
  color: var(--fg-default);
  background: var(--bg-default);
  border-color: var(--border-default);
  padding-right: 14px;
}
.view-tab.selected .octicon { color: var(--fg-default); }
.view-tab.drag-target-before::before,
.view-tab.drag-target-after::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent-emphasis);
  border-radius: 1px;
}
.view-tab.drag-target-before::before { left: -2px; }
.view-tab.drag-target-after::after { right: -2px; }
.view-tab.dragging { opacity: .5; }

.tab-label { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

.tab-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--fg-muted);
}
.tab-caret:hover { background: var(--border-default); color: var(--fg-default); }

.tab-rename {
  width: 180px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--accent-emphasis);
  border-radius: 6px;
  background: var(--bg-default);
  color: var(--fg-default);
  font-size: 14px;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent-emphasis);
}

.new-tab-btn {
  align-self: center;
  margin-left: 4px;
  margin-bottom: 1px;
}

/* ——— Filter bar ——— */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 0;
  background: var(--bg-default);
  flex-shrink: 0;
}

.filter-input-wrap { position: relative; flex: 1; min-width: 0; }

.search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-muted);
  pointer-events: none;
}

.filter-input {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 34px 0 32px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-default);
  color: var(--fg-default);
  font-size: 14px;
  line-height: 20px;
  outline: none;
}
.filter-input::placeholder { color: var(--fg-muted); opacity: 1; }
.filter-input:focus { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }

.filter-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--fg-muted);
}
.filter-clear:hover { background: var(--hover-bg); color: var(--fg-default); }

.view-settings { flex-shrink: 0; }

/* ——— Board ——— */
.board {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 20px 16px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--bg-default);
}

.column {
  display: flex;
  flex-direction: column;
  width: 350px;
  flex: 0 0 350px;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-inset);
}
.column.dragging { opacity: .5; }
.column.col-drop-before { box-shadow: -5px 0 0 -3px var(--accent-emphasis); }
.column.col-drop-after { box-shadow: 5px 0 0 -3px var(--accent-emphasis); }

.column-header {
  padding: 7px 8px 0 16px;
  flex-shrink: 0;
}

.column-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.status-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ring);
  background: var(--fill);
  flex-shrink: 0;
}
.status-dot.sm, .status-dot.menu-dot { width: 12px; height: 12px; }
.c-GRAY   { --ring: #656c76; --fill: #151b23; }
.c-BLUE   { --ring: #1f6feb; --fill: #071222; }
.c-GREEN  { --ring: #238636; --fill: #081b12; }
.c-YELLOW { --ring: #9e6a03; --fill: #1d1609; }
.c-ORANGE { --ring: #bd561d; --fill: #170f0c; }
.c-RED    { --ring: #da3633; --fill: #1f0c0e; }
.c-PINK   { --ring: #bf4b8a; --fill: #1d0b16; }
.c-PURPLE { --ring: #8957e5; --fill: #1a162d; }

.column-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--fg-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.column-count {
  display: inline-block;
  padding: 0 6px;
  border-radius: 2em;
  background: var(--counter-bg);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.column-count.over { background: #f851491a; color: var(--danger-fg); }

.estimate-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 0 7px;
  border: 1px solid var(--border-default);
  border-radius: 2em;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.column-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 4px;
}

.column-desc {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.column-cards {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
.column.drag-over { border-color: var(--accent-emphasis); }

.drop-indicator {
  height: 2px;
  margin: -5px 0;
  background: var(--accent-emphasis);
  border-radius: 1px;
  flex-shrink: 0;
}

.column-empty {
  padding: 0;
  color: var(--fg-muted);
}

/* ——— Card ——— */
.card {
  position: relative;
  flex-shrink: 0;
  padding: 12px 12px 17px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-default);
  cursor: pointer;
  outline: none;
}
.card:hover { border-color: #656c76; }
.card:focus-visible { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }
.card.dragging { opacity: .4; }
.card.active { border-color: var(--accent-emphasis); }

.card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  margin-bottom: 6px;
  padding-right: 28px;
}

.issue-icon { display: inline-flex; flex-shrink: 0; }
.issue-icon.open { color: #3fb950; }
.issue-icon.completed { color: #ab7df8; }
.issue-icon.not_planned { color: var(--fg-muted); }
.issue-icon.draft { color: var(--fg-muted); }

.repo-ref {
  font-size: 12px;
  line-height: 16px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.repo-ref:hover { color: var(--fg-accent); text-decoration: underline; }

.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--fg-default);
  overflow-wrap: anywhere;
}

.card-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.token {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid var(--border-default);
  border-radius: 2em;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--fg-muted);
}

.card-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
}
.card:hover .card-menu-btn,
.card:focus-within .card-menu-btn,
.card-menu-btn[aria-expanded="true"] { opacity: 1; }

/* Inline “add item” composer */
.add-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 36px;
  border: 1px solid var(--accent-emphasis);
  border-radius: 6px;
  background: var(--bg-default);
  box-shadow: inset 0 0 0 1px var(--accent-emphasis);
}
.add-item .issue-icon { color: var(--fg-muted); }
.add-item input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--fg-default);
  outline: none;
}
.add-item input::placeholder { color: var(--fg-muted); }

/* Add column */
.add-column { flex-shrink: 0; padding-right: 16px; }
.add-column-btn {
  width: 28px;
  height: 28px;
  border-color: var(--border-default);
  background: var(--btn-bg);
  color: var(--fg-muted);
}
.add-column-btn:hover { background: var(--btn-hover-bg); }

.board::-webkit-scrollbar, .column-cards::-webkit-scrollbar { height: 10px; width: 8px; }
.board::-webkit-scrollbar-thumb, .column-cards::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 5px; }
.board::-webkit-scrollbar-track, .column-cards::-webkit-scrollbar-track { background: transparent; }

/* ——— Action menu ——— */
.menu {
  position: fixed;
  z-index: 3000;
  min-width: 192px;
  max-width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px 0;
  border-radius: 12px;
  background: var(--bg-overlay);
  box-shadow: var(--shadow-overlay);
  animation: pop .12s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.menu-header {
  padding: 6px 16px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
.menu-divider { height: 1px; margin: 8px 0; background: var(--border-default); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-default);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hover-bg); outline: none; }
.menu-item .octicon, .menu-item .lead { color: var(--fg-muted); flex-shrink: 0; width: 16px; display: inline-flex; justify-content: center; }
.menu-item.danger, .menu-item.danger .octicon { color: var(--danger-fg); }
.menu-item.danger:hover { background: #f851491a; }
.menu-item .trail { margin-left: auto; color: var(--fg-muted); font-size: 12px; }
.menu-item[disabled] { opacity: .5; cursor: default; }

/* ——— Dialog ——— */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #01040999;
  animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  border-radius: 12px;
  background: var(--bg-overlay);
  box-shadow: var(--shadow-overlay);
  animation: pop .15s ease-out;
}
.dialog.wide { width: 960px; }
.dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--border-default);
}
.dialog-title { margin: 0; flex: 1; font-size: 14px; font-weight: 600; }
.dialog-body { padding: 16px; overflow-y: auto; }
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border-default);
}
.dialog-body p { margin: 0 0 8px; color: var(--fg-default); }

.form-group { margin-bottom: 16px; }
.form-group:last-child { margin-bottom: 0; }
.form-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.form-hint { margin-top: 4px; font-size: 12px; color: var(--fg-muted); }
.form-control {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-default);
  color: var(--fg-default);
  font-size: 14px;
  line-height: 20px;
  outline: none;
}
.form-control:focus { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control { appearance: auto; }

.color-options { display: flex; flex-wrap: wrap; gap: 8px; }
.color-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: 2em;
  background: transparent;
  color: var(--fg-default);
  font-size: 12px;
}
.color-option .status-dot { width: 12px; height: 12px; }
.color-option[aria-pressed="true"] { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }

/* ——— Side panel (item details) ——— */
.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2800;
  background: #01040966;
  animation: fade .15s ease-out;
}
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2810;
  display: flex;
  flex-direction: column;
  width: min(720px, 100vw);
  background: var(--bg-default);
  border-left: 1px solid var(--border-default);
  box-shadow: -8px 0 24px #01040999;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.panel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 24px;
  border-bottom: 1px solid var(--border-default);
  color: var(--fg-muted);
  font-size: 14px;
}
.panel-top .spacer { flex: 1; }
.panel-body { display: flex; flex: 1; min-height: 0; overflow-y: auto; }
.panel-main { flex: 1; min-width: 0; padding: 16px 24px 24px; }
.panel-side {
  width: 240px;
  flex-shrink: 0;
  padding: 16px;
  border-left: 1px solid var(--border-default);
}
.panel-title {
  width: 100%;
  margin: 0 0 16px;
  padding: 4px 8px;
  margin-left: -8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-default);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  outline: none;
}
.panel-title:hover { border-color: var(--border-default); }
.panel-title:focus { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }
.panel-field { margin-bottom: 16px; }
.panel-field .form-label { font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.panel-meta { font-size: 12px; color: var(--fg-muted); margin-top: 16px; }
.panel-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.panel-actions .btn { justify-content: flex-start; }

/* ——— Drawer (hamburger) ——— */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2810;
  display: flex;
  flex-direction: column;
  width: min(320px, 100vw);
  padding: 16px 8px;
  background: var(--bg-overlay);
  border-right: 1px solid var(--border-default);
  border-radius: 0 12px 12px 0;
  box-shadow: 8px 0 24px #01040999;
  animation: slideLeft .18s ease-out;
}
@keyframes slideLeft { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 12px; }
.drawer-head h2 { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
.drawer-list { flex: 1; overflow-y: auto; }
.drawer-item .trail { font-variant-numeric: tabular-nums; }
.drawer-item.current { background: var(--selected-bg); }
.drawer-item.current::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 24px;
  margin-left: -8px;
  border-radius: 6px;
  background: var(--accent-emphasis);
}
.drawer-item { position: relative; }
.drawer-foot { border-top: 1px solid var(--border-default); padding-top: 8px; }

/* Archived list */
.archived-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.archived-row:last-child { border-bottom: 0; }
.archived-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-note { color: var(--fg-muted); margin: 0; }

/* Toast */
.toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 3100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 6px;
  background: var(--bg-overlay);
  box-shadow: var(--shadow-overlay);
  animation: pop .15s ease-out;
}

@media (max-width: 768px) {
  .column { width: 85vw; flex-basis: 85vw; }
  .panel-body { flex-direction: column; }
  .panel-side { width: auto; border-left: 0; border-top: 1px solid var(--border-default); }
  .estimate-badge { margin-left: 0; }
}

/* ════════════════ Portal additions ════════════════ */

/* ——— Pages ——— */
.page { flex: 1; min-height: 0; background: var(--bg-default); }
.tasks-page { display: flex; flex-direction: column; }
.btn-block { width: 100%; }
a.btn { text-decoration: none; }
.btn.selected { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }
.Counter {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 2em;
  background: var(--counter-bg);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}
code, .code-pill { font-family: var(--font-mono); font-size: 12px; }
code { padding: 1px 5px; border-radius: 6px; background: var(--hover-bg); }
.form-error { margin: 8px 0 0; padding: 8px 12px; border: 1px solid #f8514966; border-radius: 6px; background: #f851491a; color: #ffa198; font-size: 13px; }
.empty-note { margin: 0; padding: 12px; color: var(--fg-muted); font-size: 13px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--fg-accent); font-size: 13px; }
.link-btn:hover { text-decoration: underline; }

/* ——— Header: main navigation + right side ——— */
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--fg-default);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.nav-btn:hover { background: var(--hover-bg); text-decoration: none; }
.nav-btn.selected { background: var(--btn-bg); box-shadow: inset 0 0 0 1px var(--border-default); }
.nav-btn.selected::after { content: none; }
.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.room-btn { max-width: 260px; font-weight: 500; }
.room-btn .room-name { overflow: hidden; text-overflow: ellipsis; }
.room-btn .caret { margin: 0 -4px 0 -2px; }
.avatar-btn { position: relative; display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: none; }
.avatar-btn .avatar { width: 32px; height: 32px; font-size: 12px; }
.notif-dot { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border: 2px solid var(--bg-inset); border-radius: 50%; background: var(--accent-emphasis); }

/* ——— Avatars ——— */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  user-select: none;
}
.avatar.sm { width: 20px; height: 20px; font-size: 9px; }
.avatar.more { background: var(--btn-bg); color: var(--fg-muted); }
.av-0 { background: #1f6feb; } .av-1 { background: #238636; } .av-2 { background: #8957e5; } .av-3 { background: #bd561d; }
.av-4 { background: #bf4b8a; } .av-5 { background: #9e6a03; } .av-6 { background: #0e7490; } .av-7 { background: #da3633; }

/* ——— Sign-in ——— */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px 16px;
  background: radial-gradient(ellipse at top, #0d1117 0%, #010409 60%);
}
.ascii-logo {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  color: #f85149;
  font-family: var(--font-mono);
  font-size: clamp(5px, 1.45vw, 14px);
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 0 0 12px #f8514966;
  user-select: none;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-overlay);
  box-shadow: 0 8px 24px #01040999;
}
.auth-form h1 { margin: 0 0 16px; font-size: 20px; font-weight: 600; text-align: center; }
.auth-form .form-label { margin-top: 12px; }
.auth-form .form-label:first-of-type { margin-top: 0; }
.auth-text { margin: 0 0 12px; color: var(--fg-muted); font-size: 14px; }
.auth-actions { margin-top: 16px; }
.auth-foot { margin: 16px 0 0; color: var(--fg-muted); font-size: 12px; text-align: center; }
.code-input { font-family: var(--font-mono); font-size: 18px; letter-spacing: 4px; text-align: center; }
.remember-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-default);
  color: var(--fg-default);
  text-align: left;
}
.remember-btn:hover { border-color: #656c76; }
.remember-btn small { display: block; margin-top: 2px; color: var(--fg-muted); font-size: 12px; line-height: 16px; }
.remember-box { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #656c76; border-radius: 4px; background: var(--bg-default); }
.remember-btn[aria-pressed="true"] { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }
.remember-btn[aria-pressed="true"] .remember-box {
  border-color: var(--accent-emphasis);
  background: var(--accent-emphasis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pw-rules { margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--fg-muted); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: #3fb950; }
.pw-rules li.ok::before { content: "✓ "; }

/* ——— HOME ——— */
.home {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(360px, 2fr) minmax(260px, 1fr);
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}
.home-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; min-width: 0; }
.box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-inset);
}
.box-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.box-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.box-sub { color: var(--fg-muted); font-size: 12px; }
.box-head .btn, .box-head .box-link { margin-left: auto; }
.box-link { font-size: 12px; }
.box-body { flex: 1; min-height: 0; overflow-y: auto; }
.home-left .box { flex: 1; }
.home-center .box { flex: 1; }
.map-box { flex: 0 0 auto; }
.home-map { height: 280px; border-radius: 0 0 6px 6px; }
.urgent-box { flex: 1; border-color: #f8514966; background: linear-gradient(180deg, #f851490f, transparent 120px), var(--bg-inset); }
.urgent-box .box-head { border-bottom-color: #f8514966; }
.urgent-box .box-head h2 { color: #ff7b72; }
.urgent-box .box-head h2::before { content: "▲ "; font-size: 11px; }

.task-list { padding: 4px; }
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  color: var(--fg-default);
  text-decoration: none;
}
.task-row:hover { background: var(--hover-bg); text-decoration: none; }
.task-icon { padding-top: 2px; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-title { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.task-meta { display: flex; align-items: center; gap: 4px; color: var(--fg-muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
.task-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* Chat */
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 8px; display: flex; flex-direction: column; }
.chat-empty { margin: auto; text-align: center; max-width: 360px; }
.msg { display: flex; gap: 10px; padding: 4px 8px; border-radius: 6px; }
.msg:hover { background: #656c760f; }
.msg:not(.grouped) { margin-top: 8px; }
.msg-gutter { width: 28px; flex-shrink: 0; }
.msg-main { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-name { font-weight: 600; font-size: 14px; }
.msg.mine .msg-name { color: var(--fg-accent); }
.msg-time { color: var(--fg-muted); font-size: 12px; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 20px; }
.chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--border-default); flex-shrink: 0; }
.chat-composer textarea {
  flex: 1;
  min-height: 32px;
  max-height: 160px;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-default);
  color: var(--fg-default);
  line-height: 20px;
  resize: none;
  outline: none;
}
.chat-composer textarea:focus { border-color: var(--accent-emphasis); box-shadow: inset 0 0 0 1px var(--accent-emphasis); }
.history { display: grid; grid-template-columns: 220px 1fr; gap: 16px; height: min(60vh, 560px); }
.history-days { overflow-y: auto; border-right: 1px solid var(--border-default); padding-right: 8px; }
.history-days .menu-item { width: 100%; margin: 0; }
.history-days .menu-item.current { background: var(--selected-bg); box-shadow: inset 2px 0 0 var(--accent-emphasis); }
.history-view { display: flex; flex-direction: column; min-height: 0; }
.history-title { font-weight: 600; padding: 0 8px 8px; border-bottom: 1px solid var(--border-default); }
.history-messages { padding-top: 0; }

/* ——— Map ——— */
.map-page { display: flex; flex-direction: column; }
.map-hint { padding: 8px 16px; color: var(--fg-muted); font-size: 13px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.full-map { flex: 1; min-height: 0; }
.leaflet-container { background: #0d1117; font-family: var(--font); }
.meet-pin { background: none; border: 0; }
.meet-pin-dot {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #da3633;
  box-shadow: 0 2px 6px #01040999;
  transform: rotate(-45deg);
}
.meet-pin-dot::after { content: ""; position: absolute; top: 7px; left: 7px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.meet-pin:hover .meet-pin-dot { background: #f85149; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-overlay); color: var(--fg-default); box-shadow: var(--shadow-overlay); }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.5; }
.leaflet-container a.leaflet-popup-close-button { color: var(--fg-muted); }
.leaflet-container a.btn { color: var(--fg-default); }
.leaflet-container a.btn-primary { color: #fff; }
.leaflet-tooltip { background: var(--bg-overlay); color: var(--fg-default); border: 1px solid var(--border-default); box-shadow: none; }
.leaflet-tooltip-top::before { border-top-color: var(--border-default); }
.leaflet-control-zoom a { background: var(--bg-overlay) !important; color: var(--fg-default) !important; border-color: var(--border-default) !important; }
.leaflet-control-attribution { background: #0d1117cc !important; color: var(--fg-muted) !important; }
.leaflet-control-attribution a { color: var(--fg-accent) !important; }
.meet-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; padding-right: 12px; overflow-wrap: anywhere; }
.meet-when { display: flex; align-items: center; gap: 6px; color: var(--fg-default); }
.meet-when .octicon, .meet-when svg { color: var(--fg-muted); }
.meet-notes { margin-top: 6px; color: var(--fg-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.meet-by { margin-top: 6px; color: var(--fg-muted); font-size: 12px; }
.meet-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.meet-form { display: flex; flex-direction: column; }
.meet-form .form-label { margin: 8px 0 4px; font-size: 12px; }
.meet-form .form-label:first-child { margin-top: 0; }
.meet-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meet-form-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.meet-form textarea.form-control { min-height: 60px; }

/* ——— Board additions ——— */
.board-empty { margin: auto; max-width: 420px; text-align: center; color: var(--fg-muted); }
.board-empty h2 { color: var(--fg-default); font-size: 20px; margin: 0 0 8px; }
.board-empty p { margin: 0 0 16px; }
#archiveBtn .Counter { margin-left: -2px; }
.card.urgent { border-color: #f8514980; box-shadow: inset 3px 0 0 #f85149; }
.card.urgent:hover { border-color: #f85149; }
.card-fields { align-items: center; }
.card-avatars { display: inline-flex; margin-left: auto; }
.card-avatars .avatar { border: 2px solid var(--bg-default); margin-left: -6px; }
.card-avatars .avatar:first-child { margin-left: 0; }
.token { display: inline-flex; align-items: center; gap: 4px; }
.token-urgent { border-color: #f8514980; color: #ff7b72; background: #f851491a; }
.panel-ref { display: inline-flex; align-items: center; gap: 6px; }
.assignee-list { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; }
.assignee-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.assignee-row:hover { background: var(--hover-bg); }
.assignee-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.toggle-row span { display: inline-flex; align-items: center; gap: 6px; }
#pUrgent + span { color: #ff7b72; }
input[type="checkbox"] { accent-color: var(--accent-emphasis); width: 16px; height: 16px; margin: 0; }
.drawer-empty { padding: 8px; }

/* ——— Dialog additions ——— */
.danger-dialog { border: 1px solid #f8514966; }
.danger-zone-head { display: flex; align-items: center; gap: 8px; color: #ff7b72; margin-bottom: 8px; }
.danger-zone { padding: 12px; border: 1px solid #f8514966; border-radius: 6px; background: #f851490d; }
.danger-text { margin: 0 0 12px; }
.danger-zone .form-label { font-weight: 400; }
.danger-zone code { user-select: all; color: var(--fg-default); }
.btn-danger[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-danger[disabled]:hover { background: var(--btn-bg); color: var(--danger-fg); border-color: var(--border-default); }
.secret-intro { margin: 0 0 12px; }
.secret-rows { display: flex; flex-direction: column; gap: 8px; }
.secret-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-default); }
.secret-label { width: 130px; flex-shrink: 0; color: var(--fg-muted); font-size: 12px; }
.secret-value { flex: 1; min-width: 0; padding: 0; background: none; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.secret-note { margin-top: 12px; }
.dialog-msg { margin: 0 0 12px; }

/* ——— Settings pages ——— */
.settings-page { overflow-y: auto; }
.settings-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.settings-wrap.narrow { max-width: 560px; }
.settings-title { margin: 0 0 8px; font-size: 24px; font-weight: 600; overflow-wrap: anywhere; }
.settings-desc { margin: 4px 0 0; color: var(--fg-muted); }
.settings-section { margin-top: 24px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-inset); }
.settings-section > header { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
.settings-section > header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.settings-body { padding: 16px; }
.settings-form + .settings-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.inline-field { display: flex; gap: 8px; align-items: center; }
.inline-field .form-control { flex: 1; min-width: 0; }
.code-pill { display: inline-block; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-default); user-select: all; }
.status-line { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.status-line.on { color: #3fb950; }
.status-line.off { color: var(--fg-muted); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-row, .member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.invite-row:last-child, .member-row:last-child { border-bottom: 0; }
.invite-row .octicon { color: var(--fg-muted); }
.invite-main, .member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.invite-row.pending { color: var(--fg-muted); font-size: 13px; }
.sub-title { margin: 20px 0 4px; font-size: 13px; color: var(--fg-muted); font-weight: 600; }
.badge { display: inline-block; margin-left: 8px; padding: 0 7px; border: 1px solid var(--border-default); border-radius: 2em; color: var(--fg-muted); font-size: 12px; font-weight: 500; line-height: 18px; }
.badge-admin { border-color: #8957e5; color: #d2a8ff; }
.tfa-setup { display: flex; flex-direction: column; align-items: stretch; }
.tfa-steps { margin: 0 0 12px; padding-left: 20px; }
.tfa-qr { align-self: center; width: 200px; height: 200px; margin-bottom: 12px; border-radius: 6px; image-rendering: pixelated; }
.tfa-manual { margin-bottom: 16px; color: var(--fg-muted); font-size: 13px; }
.tfa-manual summary { cursor: pointer; margin-bottom: 8px; }

@media (max-width: 1100px) {
  .home { grid-template-columns: 1fr 1fr; grid-template-rows: auto; overflow-y: auto; }
  .home-center { grid-column: 1 / -1; grid-row: 1; min-height: 480px; }
  .home-left .box, .urgent-box { min-height: 260px; }
}
@media (max-width: 768px) {
  .main-nav { margin-left: 4px; }
  .nav-btn { padding: 0 8px; }
  .room-btn .room-name { max-width: 90px; }
  .home { grid-template-columns: 1fr; }
  .home-center { min-height: 420px; }
  .home-left .box, .urgent-box { min-height: 220px; }
  .history { grid-template-columns: 1fr; height: auto; }
  .history-days { border-right: 0; max-height: 160px; }
  .secret-row { flex-wrap: wrap; }
}


/* ════════════════ Round 3 additions ════════════════ */

/* Keep Leaflet's own layers inside the map box so menus and dialogs always sit on top */
.home-map, .full-map { position: relative; z-index: 0; isolation: isolate; }

/* ——— Sign in / Sign up ——— */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: -8px -8px 20px; border-radius: 8px; background: var(--bg-inset); border: 1px solid var(--border-default); }
.auth-tabs button { height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-muted); font-weight: 600; }
.auth-tabs button[aria-selected="true"] { background: var(--btn-bg); color: var(--fg-default); box-shadow: inset 0 0 0 1px var(--border-default); }
.auth-form .form-hint { margin: 4px 0 0; }

/* ——— Room picker (landing page) ——— */
.rooms-page { overflow-y: auto; }
.rooms-wrap { max-width: 980px; margin: 0 auto; padding: 48px 16px 64px; text-align: center; }
.rooms-title { margin: 0 0 8px; font-size: 28px; font-weight: 600; }
.rooms-sub { margin: 0 auto 36px; max-width: 560px; color: var(--fg-muted); }
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 32px; }
.bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 160px; padding: 0; border: 0; background: none; color: var(--fg-default); }
.bubble-img { display: block; width: 132px; height: 132px; padding: 4px; border-radius: 50%; border: 2px solid var(--border-default); background: var(--bg-inset); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.bubble:hover .bubble-img, .bubble:focus-visible .bubble-img { transform: translateY(-3px) scale(1.04); border-color: var(--accent-emphasis); box-shadow: 0 8px 24px #1f6feb33; }
.bubble.current .bubble-img { border-color: #3fb950; }
.bubble:focus-visible { outline: none; }
.bubble-name { margin-top: 6px; font-size: 15px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble-meta { color: var(--fg-muted); font-size: 12px; }
.room-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; font-size: 40px; font-weight: 700; color: #fff; user-select: none; }
.room-img-new { background: transparent; border: 2px dashed var(--border-default); color: var(--fg-muted); }
.bubble-new:hover .room-img-new { color: var(--fg-default); border-color: var(--fg-muted); }
.rb-0 { background: linear-gradient(135deg, #1f6feb, #0b3d91); } .rb-1 { background: linear-gradient(135deg, #2ea043, #0f5323); }
.rb-2 { background: linear-gradient(135deg, #8957e5, #3b1f78); } .rb-3 { background: linear-gradient(135deg, #db6d28, #762d0a); }
.rb-4 { background: linear-gradient(135deg, #bf4b8a, #5c1d40); } .rb-5 { background: linear-gradient(135deg, #d29922, #6b4b05); }
.rb-6 { background: linear-gradient(135deg, #1b9aaa, #0b4f57); } .rb-7 { background: linear-gradient(135deg, #f85149, #7d1a16); }
.rooms-invites { max-width: 560px; margin: 48px auto 0; text-align: left; }
.room-pic-row { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.room-pic-preview { width: 72px; height: 72px; flex-shrink: 0; }
.room-pic-preview .room-img { font-size: 24px; }
.room-pic-main { flex: 1; min-width: 0; }
.room-pic-main .form-hint { margin: 2px 0 8px; }

/* ——— Danger zones ——— */
.danger-section { border-color: #f8514966; }
.danger-section > header { border-bottom-color: #f8514966; }
.danger-section > header h2 { color: #ff7b72; }
.danger-row { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.danger-row .form-hint { margin: 2px 0 0; }
.danger-row .btn { flex-shrink: 0; }
.danger-pw-label { margin-top: 12px; }
.back-link { display: inline-block; margin-bottom: 12px; font-size: 13px; }

/* ——— Tasks: search all projects + Board / Project map switch ——— */
.view-switch { display: inline-flex; flex-shrink: 0; padding: 2px; gap: 2px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-inset); }
.vs-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; color: var(--fg-muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vs-btn:hover { color: var(--fg-default); text-decoration: none; }
.vs-btn.selected { background: var(--btn-bg); color: var(--fg-default); box-shadow: inset 0 0 0 1px var(--border-default); }
.search-all-wrap { position: relative; flex: 0 1 300px; min-width: 160px; }
.search-all-wrap .filter-input { padding-right: 12px; }
.search-all-wrap input[type="search"]::-webkit-search-cancel-button { filter: invert(.6); }
.search-results { position: absolute; top: calc(100% + 4px); left: 0; z-index: 2500; width: max(100%, 380px); max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); }
.search-hit { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 6px; color: var(--fg-default); text-decoration: none; outline: none; }
.search-hit:hover, .search-hit:focus { background: var(--hover-bg); text-decoration: none; }
.search-hit .issue-icon { padding-top: 2px; }
.hit-main { display: flex; flex-direction: column; min-width: 0; }
.hit-title { overflow-wrap: anywhere; }
.hit-meta { color: var(--fg-muted); font-size: 12px; }

/* ——— Project map: element bar (illustrated tiles) ——— */
.canvas-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bg-default); border-bottom: 1px solid var(--border-default); flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; }
.cbar-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cbar-right { margin-left: auto; gap: 6px; }
.cbar-sep { width: 1px; height: 36px; background: var(--border-default); margin: 0 6px; }
.ctile { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 66px; padding: 4px 2px 3px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fg-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ctile svg { display: block; transition: transform .12s ease; filter: drop-shadow(0 1px 1px #0006); }
.ctile:hover { background: var(--hover-bg); color: var(--fg-default); border-color: var(--border-default); }
.ctile:hover svg { transform: translateY(-2px) scale(1.06); }
.ctile:active svg { transform: scale(.96); }
.canvas-selection { color: var(--fg-muted); font-size: 12px; white-space: nowrap; }
.zoom-level { min-width: 40px; text-align: center; color: var(--fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ——— Project map: board ——— */
.canvas-wrap {
  position: relative; flex: 1; min-height: 0; overflow: hidden; outline: none; cursor: grab; touch-action: none;
  background-color: #0b0f14;
  background-image: radial-gradient(circle, #252b33 0.8px, transparent 1px);
}
.canvas-wrap.grid-faint { background-image: radial-gradient(circle, #1b2027 0.7px, transparent 0.9px); }
.canvas-wrap.panning { cursor: grabbing; }
.canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.canvas-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cedge { pointer-events: auto; cursor: pointer; }
.cedge-hit { fill: none; stroke: transparent; stroke-width: 16; }
.cedge-line { fill: none; stroke: #8b949e; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.cedge-end { fill: #8b949e; }
.cedge:hover .cedge-line, .cedge.selected .cedge-line { stroke: #4493f8; stroke-width: 3.5; }
.cedge.selected .cedge-end, .cedge:hover .cedge-end { fill: #4493f8; }
.cedge-temp { fill: none; stroke: #4493f8; stroke-width: 2; stroke-dasharray: 7 6; stroke-linejoin: miter; }

/* Paper colours */
.cnode[data-paper="yellow"] { --paper: #fff3a6; --paper-2: #ffe873; --ink: #3b3100; --accent: #d4a72c; }
.cnode[data-paper="orange"] { --paper: #ffe0c2; --paper-2: #ffc999; --ink: #4a2300; --accent: #e16f24; }
.cnode[data-paper="red"]    { --paper: #ffd8d6; --paper-2: #ffb8b3; --ink: #4c0b08; --accent: #e5534b; }
.cnode[data-paper="pink"]   { --paper: #ffd9ec; --paper-2: #ffbedd; --ink: #4d0c2c; --accent: #db61a2; }
.cnode[data-paper="purple"] { --paper: #ebe2ff; --paper-2: #d8c8ff; --ink: #2b1460; --accent: #8957e5; }
.cnode[data-paper="blue"]   { --paper: #dcebff; --paper-2: #bfdcff; --ink: #0a2a5c; --accent: #388bfd; }
.cnode[data-paper="teal"]   { --paper: #d2f4f2; --paper-2: #a9e9e4; --ink: #053d3a; --accent: #1b9aaa; }
.cnode[data-paper="green"]  { --paper: #dafbe1; --paper-2: #b8f0c4; --ink: #0b3d18; --accent: #2da44e; }
.cnode[data-paper="gray"]   { --paper: #eaeef2; --paper-2: #d0d7de; --ink: #24292f; --accent: #6e7781; }
.cnode[data-paper="white"]  { --paper: #ffffff; --paper-2: #f0f3f6; --ink: #1f2328; --accent: #6e7781; }

.cnode {
  --paper: #ffffff; --ink: #1f2328; --accent: #6e7781;
  position: absolute; width: 230px; border-radius: 10px; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px #0000004d, 0 8px 20px -6px #000000a6; cursor: move; user-select: none; outline: none;
  transition: box-shadow .12s ease, transform .12s ease; font-size: 13px; line-height: 1.4;
}
.cnode:hover { box-shadow: 0 1px 2px #0000004d, 0 12px 28px -6px #000000cc; }
.cnode:focus-visible, .cnode.selected { box-shadow: 0 0 0 2px #0b0f14, 0 0 0 4px #4493f8, 0 12px 28px -6px #000000cc; }
.cnode.dragging { transform: rotate(-1.2deg) scale(1.02); z-index: 5; box-shadow: 0 22px 40px -10px #000000e6; }
.cnode.connect-target { box-shadow: 0 0 0 2px #0b0f14, 0 0 0 4px #3fb950; }
.cnode .muted { color: #6e7781; font-weight: 500; }
.cn-title { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cn-title.with-icon { display: flex; gap: 6px; align-items: flex-start; }
.cn-title.with-icon > :first-child { flex-shrink: 0; margin-top: 2px; }
.cn-has-desc { display: inline-flex; margin-left: auto; color: currentColor; opacity: .55; }
.cn-kicker { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cn-card-body { padding: 12px 14px 14px; }
.cn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; }
.cn-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cnode .btn { height: 26px; font-size: 12px; background: #f6f8fa; color: #24292f; border-color: #d0d7de; }
.cnode .btn:hover { background: #eaeef2; }
.cnode .btn-primary { background: #1f883d; color: #fff; border-color: #1a7f37; }
.cnode .btn-primary:hover { background: #1a7f37; }

/* Idea = sticky note */
.cnode.k-idea {
  width: 200px; min-height: 170px; display: flex; flex-direction: column; padding: 18px 16px 10px; border-radius: 3px;
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper) 70%, var(--paper-2) 100%);
  box-shadow: 0 1px 1px #0000004d, 0 14px 18px -12px #000000e6, inset 0 -10px 18px -14px #0000004d;
}
.cn-sticky-text { flex: 1; font-size: 17px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.cn-sticky-foot { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; font-weight: 600; opacity: .6; }
.cn-sticky-foot > span:first-child { display: inline-flex; align-items: center; gap: 4px; }

/* Fact / Plan = index cards with a coloured band */
.cnode.k-fact, .cnode.k-plan { overflow: hidden; background: #ffffff; }
.cn-band { height: 8px; background: var(--accent); }
.cnode.k-fact .cn-card-body, .cnode.k-plan .cn-card-body { background: linear-gradient(180deg, var(--paper) 0, #ffffff 46px); }
.cnode.k-plan .cn-card-body { background-image: linear-gradient(180deg, var(--paper) 0, #ffffff 46px), repeating-linear-gradient(180deg, transparent 0 21px, #0000000d 21px 22px); }

/* Box = simple shape */
.cnode.k-box { padding: 16px 16px; border: 1.5px solid #00000026; border-radius: 12px; }
.cn-box-foot { display: flex; margin-top: 6px; }

/* Spidergram topic + branches (mind map) */
.cnode.k-hub {
  width: auto; min-width: 170px; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 30px 14px; border-radius: 999px; text-align: center; color: #fff;
  background: radial-gradient(ellipse at 30% 25%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent), 0 14px 30px -8px #000000cc;
}
.cn-hub-title { font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; text-shadow: 0 1px 2px #00000059; }
.cnode-branch { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; border: 0; border-radius: 2em; background: #ffffff33; color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .1s; }
.cnode.k-hub:hover .cnode-branch, .cnode.k-hub.selected .cnode-branch, .cnode.k-hub:focus-within .cnode-branch { opacity: 1; }
.cnode-branch:hover { background: #ffffff55; }
.cnode.k-branch {
  width: auto; min-width: 110px; max-width: 260px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  border-radius: 999px; border: 2px solid var(--accent); font-weight: 600;
}
.cnode.k-branch .cn-title { font-size: 14px; }

/* Task = live task card */
.cnode.k-task { width: 280px; padding: 12px 14px 12px 18px; background: #ffffff; border-left: 0; overflow: hidden; }
.cnode.k-task::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #db61a2; }
.cn-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-bottom: 8px; padding: 2px 8px; border-radius: 2em; background: #ffe5f1; color: #99286e; font-size: 11px; font-weight: 700; }
.cn-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 5px; border-radius: 2em; background: #f6f8fa; border: 1px solid #d0d7de; color: #24292f; font-weight: 600; }
.cnode .token { color: #57606a; border-color: #d0d7de; }
.cnode .token-urgent { color: #cf222e; border-color: #ffaba8; background: #ffebe9; }
.token-done { color: #1a7f37; border-color: #aceebb; background: #dafbe1; }
.cn-people { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #eaeef2; }
.cn-person { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.cn-person .lbl { width: 56px; flex-shrink: 0; color: #6e7781; }
.cn-person .author, .cn-person .recv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-avatars { display: inline-flex; }
.cn-avatars .avatar { margin-left: -5px; border: 2px solid #fff; }
.cn-avatars .avatar:first-child { margin-left: 0; }
.cnode .issue-icon.draft { color: #6e7781; }

/* Meeting = card with a little map */
.cnode.k-map { width: 260px; overflow: hidden; background: #ffffff; }
.cn-mapart {
  position: relative; height: 74px;
  background:
    linear-gradient(115deg, transparent 46%, #ffffff 46% 50%, transparent 50%),
    linear-gradient(20deg, transparent 60%, #ffffffb3 60% 62.5%, transparent 62.5%),
    repeating-linear-gradient(0deg, #0000000a 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, #0000000a 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #d8f0de, #cde7f5);
}
.cn-pin { position: absolute; left: 50%; top: 18px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50% 50% 50% 0; background: #e5534b; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 3px 6px #00000059; }
.cn-when { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #57606a; font-size: 12px; }

/* Image = polaroid */
.cnode.k-image { width: 230px; padding: 10px 10px 0; background: #ffffff; border-radius: 3px; }
.cn-photo { background: #eaeef2; }
.cn-photo img { display: block; width: 100%; max-height: 240px; object-fit: cover; pointer-events: none; }
.cn-photo.empty { display: flex; align-items: center; justify-content: center; height: 140px; color: #8c959f; }
.cn-caption { padding: 10px 4px 12px; font-size: 14px; font-style: italic; color: #24292f; text-align: center; overflow-wrap: anywhere; }

/* File = card with a big type badge */
.cnode.k-file { width: 260px; display: flex; gap: 12px; padding: 12px; background: #ffffff; }
.cn-file-badge { position: relative; flex-shrink: 0; width: 44px; height: 54px; border-radius: 4px 12px 4px 4px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.cn-file-badge::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 0 12px 0 4px; background: #ffffff80; }
.cn-file-badge[data-tone="red"] { background: #cf222e; } .cn-file-badge[data-tone="blue"] { background: #0969da; }
.cn-file-badge[data-tone="green"] { background: #1a7f37; } .cn-file-badge[data-tone="orange"] { background: #bc4c00; }
.cn-file-badge[data-tone="gray"] { background: #57606a; }
.cn-file-main { min-width: 0; flex: 1; }
.cn-file-main .cn-title { font-size: 14px; }
.cn-meta { margin: 2px 0 8px; color: #6e7781; font-size: 12px; overflow-wrap: anywhere; }

/* Connector handle */
.cnode-handle {
  position: absolute; z-index: 4; width: 14px; height: 14px; border: 3px solid #0b0f14; border-radius: 50%;
  background: #4493f8; cursor: crosshair; opacity: 0; transition: opacity .1s, transform .1s;
}
.cnode:hover .cnode-handle, .cnode.selected .cnode-handle { opacity: 1; }
.cnode-handle:hover { transform: scale(1.3); }

.canvas-tip {
  position: absolute; z-index: 20; max-width: 340px; padding: 10px 12px; border-radius: 10px; background: var(--bg-overlay); box-shadow: var(--shadow-overlay);
  pointer-events: none; font-size: 13px;
}
.canvas-tip.pinned { border-left: 3px solid #4493f8; }
.canvas-tip strong { display: block; margin-bottom: 2px; overflow-wrap: anywhere; }
.tip-desc { color: var(--fg-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; color: var(--fg-muted); padding: 24px; }
.canvas-empty h2 { margin: 0 0 8px; color: var(--fg-default); font-size: 20px; }
.canvas-empty p { max-width: 460px; margin: 0; }
.paper-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.paper-swatch { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px #0000002e; }
.paper-swatch[aria-checked="true"] { border-color: #4493f8; box-shadow: 0 0 0 2px var(--bg-overlay), 0 0 0 4px #4493f8; }
.paper-swatch[data-paper="yellow"] { --paper: #fff3a6; } .paper-swatch[data-paper="orange"] { --paper: #ffe0c2; } .paper-swatch[data-paper="red"] { --paper: #ffd8d6; }
.paper-swatch[data-paper="pink"] { --paper: #ffd9ec; } .paper-swatch[data-paper="purple"] { --paper: #ebe2ff; } .paper-swatch[data-paper="blue"] { --paper: #dcebff; }
.paper-swatch[data-paper="teal"] { --paper: #d2f4f2; } .paper-swatch[data-paper="green"] { --paper: #dafbe1; } .paper-swatch[data-paper="gray"] { --paper: #eaeef2; }
.paper-swatch[data-paper="white"] { --paper: #ffffff; }
.pick-list { max-height: 260px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border-default); border-radius: 6px; padding: 4px; background: var(--bg-default); }
.pick-list.tall { max-height: 320px; margin: 0 0 16px; }
.pick-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-default); text-align: left; }
.pick-item:hover { background: var(--hover-bg); }
.pick-item[aria-selected="true"] { background: #1f6feb26; box-shadow: inset 0 0 0 1px var(--accent-emphasis); }
.pick-item .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-item .trail { color: var(--fg-muted); font-size: 12px; white-space: nowrap; }
.form-hint.inline { font-weight: 400; }

/* ——— Chat additions ——— */
.seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-default); margin-left: auto; }
.seg button { height: 22px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--fg-muted); font-size: 12px; font-weight: 600; }
.seg button[aria-checked="true"] { background: var(--btn-bg); color: var(--fg-default); box-shadow: inset 0 0 0 1px var(--border-default); }
.box-head .seg + .btn { margin-left: 0; }
.day-sep { display: flex; align-items: center; gap: 12px; margin: 16px 8px 4px; color: var(--fg-muted); font-size: 12px; font-weight: 600; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.msg { position: relative; }
.msg-del { position: absolute; top: 2px; right: 6px; width: 26px; height: 26px; opacity: 0; }
.msg:hover .msg-del, .msg-del:focus-visible { opacity: 1; }
.msg-del:hover { color: var(--danger-fg); background: #f851491a; }
.msg-image { display: inline-block; margin-top: 6px; }
.msg-image img { display: block; max-width: min(360px, 100%); max-height: 260px; border-radius: 6px; border: 1px solid var(--border-default); }
.msg-file, .att-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-default); color: var(--fg-default); font-size: 13px; max-width: 100%; }
.msg-file:hover { border-color: #656c76; text-decoration: none; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.att-size { color: var(--fg-muted); font-size: 12px; white-space: nowrap; }
.chat-attachment { padding: 8px 12px 0; border-top: 1px solid var(--border-default); }
.chat-attachment .att-chip { margin: 0; padding-right: 2px; }
.chat-attachment + .chat-composer { border-top: 0; }
.chat-composer .icon-btn.bordered { flex-shrink: 0; }

@media (max-width: 900px) {
  #boardBar { flex-wrap: wrap; }
  .search-all-wrap { flex-basis: 100%; order: 3; }
  .filter-input-wrap { order: 4; flex-basis: 100%; }
  .seg { margin-left: 0; }
  .box-head { flex-wrap: wrap; }
}


/* ════════════════ Round 4: navigation + people ════════════════ */
.header-top { gap: 12px; }
.header-left { gap: 8px; }
.room-switch {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 240px; padding: 0 8px 0 4px;
  border: 1px solid var(--border-default); border-radius: 2em; background: var(--btn-bg); color: var(--fg-default); font-weight: 600;
}
.room-switch:hover { background: var(--btn-hover-bg); }
.room-switch-img { display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; justify-content: center; color: var(--fg-muted); }
.room-switch-img .room-img { font-size: 11px; }
.room-switch .room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-switch .caret { color: var(--fg-muted); flex-shrink: 0; }
.main-nav { margin-left: 4px; }
.nav-btn { gap: 6px; color: var(--fg-muted); }
.nav-btn .octicon { color: currentColor; }
.nav-btn:hover { color: var(--fg-default); }
.nav-btn.selected { color: var(--fg-default); }
.header-search { flex: 0 1 320px; margin-left: auto; }
.header-search .filter-input { background: var(--bg-default); }
.header-right { margin-left: 0; }
.header-title-row { display: none; }
.tabs-row { display: flex; align-items: flex-end; gap: 12px; padding-right: 16px; margin-bottom: -1px; }
.tabs-row .view-tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.tabs-right { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; flex-shrink: 0; }
.tabs-right .view-switch { background: var(--bg-default); }
#projectSettingsBtn .octicon, #projectSettingsBtn svg { color: var(--fg-muted); }
.done-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #2386361f; color: #3fb950; flex-shrink: 0; }
.conflict-row { margin-bottom: 14px; }
.conflict-label { font-weight: 600; margin-bottom: 6px; }
.conflict-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.conflict-text { margin: 4px 0 0; padding: 8px 10px; max-height: 220px; overflow: auto; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-default); font-family: var(--font); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.conflict-text.mine { border-color: #1f6feb80; }

/* Drawer */
.drawer-room { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-default); color: var(--fg-default); text-decoration: none; }
.drawer-room:hover { border-color: #656c76; text-decoration: none; }
.drawer-room-img { width: 40px; height: 40px; flex-shrink: 0; }
.drawer-room-img .room-img { font-size: 15px; }
.drawer-room-main { display: flex; flex-direction: column; min-width: 0; }
.drawer-room-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-room-main small { color: var(--fg-muted); font-size: 12px; }
a.menu-item { text-decoration: none; }
.drawer-foot { display: flex; flex-direction: column; }

/* Room settings */
.settings-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; margin: 12px 0 0; padding: 8px 0; background: var(--bg-default); border-bottom: 1px solid var(--border-default); overflow-x: auto; }
.settings-tab { height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg-muted); font-weight: 600; white-space: nowrap; }
.settings-tab:hover { background: var(--hover-bg); color: var(--fg-default); }
.member-row { align-items: center; }
.member-row.pending .avatar { opacity: .5; }
.member-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.member-actions { flex-shrink: 0; }
.badge-pending { border-color: #9e6a03; color: #d29922; }
.leave-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.danger-section .danger-row + .danger-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f8514933; }

@media (max-width: 900px) {
  .header-top { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .header-search { order: 5; flex: 1 1 100%; }
  .nav-btn span { display: none; }
  .room-switch { max-width: 160px; }
  .tabs-row { flex-wrap: wrap; padding: 0 16px; }
  .tabs-right { padding-bottom: 6px; }
  .conflict-cols { grid-template-columns: 1fr; }
}

/* ——— Round 5: admin 2FA notice, activity list, meetings, project map history ——— */
.flash-warn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 16px; border: 1px solid #9e6a03; border-radius: 6px; background: #1d1609; color: #e3b341; }
.flash-warn > svg { flex: none; margin-top: 2px; }
.flash-warn > div { flex: 1; min-width: 0; }
.flash-warn strong { color: var(--fg-default); }
.flash-warn .form-hint { margin: 4px 0 0; }
.activity-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--border-default); border-radius: 6px; }
.activity-row { display: flex; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--border-default); font-size: 13px; line-height: 1.45; }
.activity-row:first-child { border-top: 0; }
.activity-row time { flex: none; width: 170px; white-space: nowrap; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.activity-text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .activity-row { flex-direction: column; gap: 2px; } .activity-row time { width: auto; } }
.inline-field #invEmail { max-width: 240px; }
.auth-link-btn { background: none; border: 0; padding: 0; color: var(--fg-accent, #4493f8); font: inherit; font-size: 13px; cursor: pointer; }
.auth-link-btn:hover { text-decoration: underline; }
.forgot-line { margin: -6px 0 10px; text-align: right; }
.meet-pin.past .meet-pin-dot { background: #6e7681; opacity: .85; }
.meet-pin.past:hover .meet-pin-dot { background: #8b949e; }
.meet-past-toggle { background: #0d1117e6; color: #e6edf3; border: 1px solid #3d444d; border-radius: 6px; padding: 4px 10px; font: 12px/1.4 -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
.meet-past-toggle[aria-pressed="true"] { border-color: #4493f8; }
.meet-past-toggle[hidden] { display: none; }

/* ══════════ Round 6: due dates, checklists, comments, notifications, calendar, progress, templates, map extras ══════════ */
.toggle-row { font-weight: 500; }
.avatar.xs { width: 16px; height: 16px; font-size: 7px; }

/* Card tokens */
.token-due { gap: 4px; }
.token-due.due-overdue { color: #ff7b72; border-color: #f8514966; background: #f851491a; font-weight: 600; }
.token-due.due-today { color: #f0b72f; border-color: #d2992266; background: #d299221a; font-weight: 600; }
.token-due.due-soon { color: #e3b341; border-color: #9e6a0366; }
.token-due.due-done { color: var(--fg-muted); text-decoration: line-through; }
.token-check.complete { color: #3fb950; border-color: #23863666; background: #2386361a; }
.token-plain { gap: 4px; }
.card-fields { flex-wrap: wrap; row-gap: 4px; }

/* Task panel: due date, checklist, comments */
.due-row { display: flex; gap: 4px; align-items: center; }
.due-row .form-control { flex: 1; color-scheme: dark; }
.due-hint.due-overdue { color: #ff7b72; } .due-hint.due-today { color: #f0b72f; } .due-hint.due-soon { color: #e3b341; }
.panel-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.ps-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--fg-muted); }
.ps-head h3 { margin: 0; font-size: 14px; color: var(--fg-default); }
.ps-count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.cl-bar { height: 6px; border-radius: 3px; background: var(--bg-muted); overflow: hidden; margin-bottom: 8px; }
.cl-bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent-emphasis); transition: width .25s ease; }
.cl-bar.complete span { background: var(--success-emphasis); }
.cl-list { list-style: none; margin: 0 0 6px; padding: 0; }
.cl-row { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 6px; }
.cl-row:hover { background: var(--hover-bg); }
.cl-row input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: #238636; flex: none; }
.cl-text { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.cl-text:focus { border-color: var(--accent-emphasis); background: var(--bg-default); outline: none; }
.cl-row.done .cl-text { color: var(--fg-muted); text-decoration: line-through; }
.cl-del { opacity: 0; }
.cl-row:hover .cl-del, .cl-del:focus-visible { opacity: 1; }
.cl-add .form-control { height: 32px; }
.cm-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 360px; overflow-y: auto; }
.cm-row { display: flex; gap: 10px; padding: 8px 0; }
.cm-row + .cm-row { border-top: 1px solid var(--border-muted); }
.cm-row > .avatar { margin-top: 2px; flex: none; }
.cm-main { flex: 1; min-width: 0; }
.cm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-head strong { font-size: 13px; }
.cm-head time { font-size: 12px; color: var(--fg-muted); }
.cm-tools { margin-left: auto; display: inline-flex; gap: 10px; opacity: 0; }
.cm-row:hover .cm-tools, .cm-tools:focus-within { opacity: 1; }
.link-btn.danger { color: var(--danger-fg); }
.cm-body { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.cm-empty { padding: 10px 0; color: var(--fg-muted); font-size: 13px; }
.cm-input-wrap { position: relative; }
.cm-add textarea { resize: vertical; min-height: 56px; }
.cm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.mention { padding: 0 3px; border-radius: 4px; background: #388bfd26; color: #79c0ff; font-weight: 600; }
.msg.mentions-me { background: linear-gradient(90deg, #d2992226, transparent 70%); box-shadow: inset 2px 0 0 #d29922; }
.mention-box { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 60; min-width: 240px; max-width: 320px; padding: 4px; border-radius: 8px; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); }
.chat-composer { position: relative; }
.mention-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; text-align: left; }
.mention-row.active, .mention-row:hover { background: var(--hover-bg); }
.mention-name { font-weight: 600; }
.mention-user { margin-left: auto; color: var(--fg-muted); font-size: 12px; }

/* Bell + notifications */
.bell-btn { position: relative; width: 32px; height: 32px; color: var(--fg-muted); }
.bell-btn:hover { color: var(--fg-default); }
.bell-count { position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--bg-inset); border-radius: 9px; background: #da3633; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; }
.notif-panel { position: fixed; z-index: 120; width: min(400px, calc(100vw - 16px)); max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; border-radius: 12px; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); overflow: hidden; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
.np-head h2 { margin: 0; font-size: 15px; }
.np-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.np-item { display: flex; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; text-align: left; color: var(--fg-muted); }
.np-item:hover { background: var(--hover-bg); }
.np-item.unread { color: var(--fg-default); }
.np-item.unread .np-text::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--fg-accent); vertical-align: 1px; }
.np-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-muted); }
.np-icon.k-mention { color: #79c0ff; background: #388bfd26; }
.np-icon.k-assigned { color: #3fb950; background: #2386361f; }
.np-icon.k-due { color: #f0b72f; background: #d2992226; }
.np-icon.k-comment { color: #d2a8ff; background: #8957e526; }
.np-main { display: flex; flex-direction: column; min-width: 0; }
.np-text { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.np-meta { margin-top: 2px; font-size: 12px; color: var(--fg-muted); }
.np-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 24px; color: var(--fg-muted); text-align: center; font-size: 13px; }
.np-empty p { margin: 0; }

/* New project: templates */
.np-form .dialog-msg { margin-top: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tpl-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-default); text-align: left; transition: border-color .12s, box-shadow .12s, transform .12s; }
.tpl-card:hover { border-color: #8b949e; transform: translateY(-1px); }
.tpl-card.selected { border-color: var(--accent-emphasis); box-shadow: 0 0 0 1px var(--accent-emphasis), 0 6px 18px -8px #1f6feb80; }
.tpl-art { display: flex; gap: 4px; height: 46px; margin-bottom: 4px; padding: 6px; border-radius: 6px; background: var(--bg-inset); }
.tpl-col { flex: 1; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; border-top: 3px solid var(--ring); border-radius: 2px; }
.tpl-col i { display: block; height: 7px; border-radius: 2px; background: #ffffff1f; }
.tpl-col i + i { width: 70%; }
.tpl-name { font-weight: 600; }
.tpl-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.4; }
.tpl-meta { margin-top: auto; padding-top: 4px; font-size: 11px; color: var(--fg-muted); }
.tpl-del { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--fg-muted); background: var(--bg-default); opacity: 0; }
.tpl-card:hover .tpl-del, .tpl-del:focus-visible { opacity: 1; }
.tpl-del:hover { color: var(--danger-fg); }

/* Progress view */
.progress-view { flex: 1; min-height: 0; overflow-y: auto; }
.tasks-page { display: flex; flex-direction: column; }
.pg { max-width: 1100px; margin: 0 auto; padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.pg-hero { display: flex; align-items: center; gap: 28px; padding: 22px 24px; border: 1px solid var(--border-default); border-radius: 12px; background: radial-gradient(circle at 0% 0%, #1f6feb1f, transparent 60%), var(--bg-inset); }
.pg-ring { position: relative; width: 132px; height: 132px; flex: none; }
.pg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-ring circle { fill: none; stroke-width: 12; }
.pg-ring-bg { stroke: #ffffff14; }
.pg-ring-fg { stroke: var(--accent-emphasis); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.pg-ring.complete .pg-ring-fg { stroke: #2ea043; }
.pg-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pg-ring-text strong { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.pg-ring-text span { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em; }
.pg-hero-main { min-width: 0; flex: 1; }
.pg-title { margin: 0; font-size: 22px; }
.pg-sub { margin: 4px 0 14px; color: var(--fg-muted); }
.pg-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-stat { display: flex; flex-direction: column; min-width: 92px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-default); }
.pg-stat strong { font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pg-stat span { font-size: 12px; color: var(--fg-muted); }
.pg-stat.ok strong { color: #3fb950; } .pg-stat.bad strong { color: #ff7b72; } .pg-stat.warn strong { color: #e3b341; }
.pg-card { padding: 16px 18px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-inset); }
.pg-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.pg-card h3 .octicon { color: var(--fg-muted); }
.pg-h-danger .octicon { color: #ff7b72 !important; }
.pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-stack { display: flex; gap: 3px; height: 16px; margin-bottom: 12px; }
.pg-seg { min-width: 6px; border-radius: 4px; background: var(--ring); }
.pg-seg.empty { flex: 1; background: var(--bg-muted); }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.pg-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pg-legend strong { font-variant-numeric: tabular-nums; }
.pg-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--ring); }
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-task { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; text-align: left; }
.pg-task:hover { background: var(--hover-bg); }
.pg-task .token { flex: none; min-width: 84px; justify-content: center; }
.pg-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pg-task-col { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.pg-task-people { display: inline-flex; }
.pg-task-people .avatar { margin-left: -5px; border: 2px solid var(--bg-inset); }
.pg-empty { padding: 8px; color: var(--fg-muted); font-size: 13px; list-style: none; }
.pg-person { display: grid; grid-template-columns: 20px minmax(110px, 200px) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; }
.pg-person + .pg-person { border-top: 1px solid var(--border-muted); }
.pg-pname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-pbar { height: 8px; border-radius: 4px; background: var(--bg-muted); overflow: hidden; }
.pg-pbar span { display: block; height: 100%; border-radius: 4px; background: #2ea043; }
.pg-pnums { font-size: 12px; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-person.late .pg-pnums { color: #ff7b72; }
.pg-unassigned { margin: 10px 0 0; }
@media (max-width: 760px) {
  .pg { padding: 16px; }
  .pg-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pg-grid { grid-template-columns: 1fr; }
  .pg-person { grid-template-columns: 20px 1fr auto; }
  .pg-pbar { grid-column: 2 / -1; grid-row: 2; }
  .pg-task-col { display: none; }
}

/* Calendar */
.calendar-page { display: flex; flex-direction: column; overflow: hidden; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav .icon-btn { width: 32px; height: 32px; font-size: 18px; line-height: 1; }
.cal-title { margin: 0 0 0 8px; font-size: 20px; text-transform: capitalize; }
.cal-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cal-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); }
.lg { display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 3px; }
.lg-task { background: #1f6feb; } .lg-meet { background: #2ea043; } .lg-late { background: #da3633; }
.cal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(108px, 1fr); overflow-y: auto; }
.cal-wd { position: sticky; top: 0; z-index: 2; padding: 6px 10px; border-bottom: 1px solid var(--border-default); background: var(--bg-default); font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid { grid-template-rows: auto; }
.cal-day { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 4px 6px 6px; border-right: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); }
.cal-day:nth-child(7n + 7) { border-right: 0; }
.cal-day.other { background: #0104094d; }
.cal-day.other .cal-num { color: #656c76; }
.cal-day.today { background: #1f6feb14; }
.cal-day.today .cal-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-emphasis); color: #fff; }
.cal-day.drop { background: #2386361f; box-shadow: inset 0 0 0 2px #238636; }
.cal-dhead { display: flex; align-items: center; gap: 6px; height: 26px; }
.cal-num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-wdm { display: none; }
.cal-add { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--fg-muted); opacity: 0; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: var(--hover-bg); color: var(--fg-default); }
.cal-events { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 2px 6px; border: 0; border-left: 3px solid var(--ring, #1f6feb); border-radius: 4px; background: #ffffff0d; color: var(--fg-default); font-size: 12px; line-height: 18px; text-align: left; }
.cal-chip:hover { background: #ffffff1f; }
.cal-chip.task { cursor: grab; }
.cal-chip.dragging { opacity: .4; }
.cal-chip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-people { display: inline-flex; flex: none; }
.cal-chip-people .avatar { margin-left: -4px; }
.cal-chip.done .cal-chip-title { color: var(--fg-muted); text-decoration: line-through; }
.cal-chip.late { border-left-color: #da3633; background: #da36331f; }
.cal-chip.late .cal-chip-title { color: #ff9b95; }
.cal-chip.urgent:not(.done)::before { content: '!'; flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #da3633; color: #fff; font-size: 10px; font-weight: 800; }
.cal-chip.meet { border-left-color: #2ea043; background: #2ea0431f; }
.cal-chip.meet .octicon { color: #3fb950; flex: none; }
.cal-chip-time { flex: none; color: #7ee787; font-variant-numeric: tabular-nums; font-weight: 600; }
.cal-chip.extra { display: none; }
.cal-day.expanded .cal-chip.extra { display: flex; }
.cal-more { align-self: flex-start; padding: 0 6px; border: 0; background: none; color: var(--fg-accent); font-size: 12px; }
.cal-hint { margin: 0; padding: 10px 16px; border-top: 1px solid var(--border-default); color: var(--fg-muted); font-size: 13px; }
.cal-meet-when { margin: 0 0 8px; font-weight: 600; }
.cal-meet-notes { margin: 0 0 14px; color: var(--fg-muted); white-space: pre-wrap; }
@media (max-width: 760px) {
  .cal-grid { display: flex; flex-direction: column; }
  .cal-wd { display: none; }
  .cal-day { border-right: 0; min-height: 0; }
  .cal-day.empty:not(.today), .cal-day.other { display: none; }
  .cal-num { display: none; }
  .cal-wdm { display: inline; font-size: 13px; font-weight: 600; }
  .cal-day.today .cal-wdm { color: #79c0ff; }
  .cal-add { opacity: 1; }
  .cal-chip { font-size: 13px; padding: 5px 8px; }
  .cal-chip.extra { display: flex; } .cal-more { display: none; }
  .cal-legend { display: none; }
}

/* Project map: frames, votes, timer, time-up flash */
.cnode.k-frame { width: auto; padding: 0; border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--paper) 14%, transparent); box-shadow: none; cursor: default; z-index: 0; }
.cnode.k-frame:hover { box-shadow: none; }
.cnode.k-frame.selected, .cnode.k-frame:focus-visible { box-shadow: 0 0 0 2px #4493f8; }
.cnode.k-frame.dragging { transform: none; }
.cn-frame-label { position: absolute; left: -2px; top: -30px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + 4px); height: 26px; padding: 0 12px; border-radius: 8px 8px 0 0; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: move; white-space: nowrap; overflow: hidden; }
.cn-frame-title { overflow: hidden; text-overflow: ellipsis; }
.cn-frame-label .cn-has-desc { color: #ffffffcc; }
.cn-frame-resize { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-right: 4px solid var(--accent); border-bottom: 4px solid var(--accent); border-bottom-right-radius: 14px; cursor: nwse-resize; }
.cnode:not(.k-frame) { z-index: 1; }
.cn-votes { position: absolute; top: -11px; right: -9px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border: 2px solid #0d1117; border-radius: 11px; background: #1f6feb; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px #0006; }
.cn-votes.mine { background: #238636; }
.cn-vote-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.canvas-bar [data-act=vote].voted { border-color: #238636; color: #3fb950; }
.canvas-bar [data-act=vote].voted .octicon { color: #3fb950; }
.timer-btn .timer-text { font-variant-numeric: tabular-nums; min-width: 36px; text-align: left; }
.timer-btn.running { border-color: #1f6feb; color: #79c0ff; }
.timer-btn.running .octicon { color: #79c0ff; }
.timer-btn.ending { border-color: #da3633; color: #ff7b72; animation: timer-pulse 1s ease-in-out infinite; }
.timer-btn.ending .octicon { color: #ff7b72; }
@keyframes timer-pulse { 50% { box-shadow: 0 0 0 3px #da363355; } }
.canvas-wrap.time-up { animation: time-up 1.6s ease; }
@keyframes time-up { 0%, 40%, 80% { box-shadow: inset 0 0 0 4px #da3633; } 20%, 60%, 100% { box-shadow: inset 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .timer-btn.ending, .canvas-wrap.time-up { animation: none; } }
.canvas-bar { flex-wrap: wrap; row-gap: 6px; }
.pg-grid > * { min-width: 0; }
@media (max-width: 760px) {
  .cal-day { flex: none; }
  .cal-day.today .cal-num { display: none; }
}
@media (max-width: 480px) {
  .header-top { column-gap: 6px; }
  .room-switch { max-width: 116px; }
  .main-nav { gap: 0; margin-left: 0; }
  .nav-btn { padding: 0 7px; }
  .header-right { gap: 4px; }
}
@media (max-width: 600px) {
  .tabs-row .view-tabs { flex: 1 1 100%; min-width: 0; }
  .tabs-right { width: 100%; justify-content: space-between; padding-top: 4px; }
  .view-switch .vs-btn { padding: 0 10px; }
}

/* ══════════ Round 7 ══════════ */
/* Project tabs: scroll arrows, always-visible "+" and "all projects" */
.tabs-strip { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; }
.tabs-strip .view-tabs { flex: 0 1 auto; min-width: 0; padding: 0 4px 0 16px; scroll-behavior: auto; }
.tabs-scroll { flex: none; align-self: center; display: grid; place-items: center; width: 26px; height: 28px; margin-bottom: 2px; padding: 0; border: 1px solid var(--border-default); border-radius: 6px; background: var(--btn-bg); color: var(--fg-muted); }
.tabs-scroll:hover:not(:disabled) { color: var(--fg-default); background: var(--btn-hover-bg, #30363d); }
.tabs-scroll:disabled { opacity: .35; cursor: default; }
.tabs-scroll.left { margin-left: 12px; }
.tabs-scroll.right { margin-left: 4px; }
.tabs-scroll[hidden], .tabs-all[hidden] { display: none; }
.tabs-all { align-self: center; margin-left: 4px; margin-bottom: 1px; }
.tabs-strip .new-tab-btn { flex: none; }
.tabs-strip.fade-left .view-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
.tabs-strip.fade-right .view-tabs { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 28px); mask-image: linear-gradient(270deg, transparent 0, #000 28px); }
.tabs-strip.fade-left.fade-right .view-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.tabs-row .tabs-strip .view-tabs { flex: 0 1 auto; }
@media (max-width: 600px) { .tabs-row .tabs-strip { flex: 1 1 100%; } .tabs-scroll.left { margin-left: 0; } }
.board-start { align-self: flex-start; max-width: 420px; margin: 8px 8px 0 0; padding: 20px 22px; border: 1px dashed var(--border-default); border-radius: 8px; background: var(--bg-inset); }
.board-start h2 { margin: 0 0 6px; font-size: 16px; }
.board-start p { margin: 0 0 14px; color: var(--fg-muted); line-height: 1.5; }
.tpl-art.empty { border: 1px dashed #ffffff26; background: transparent; }
.tpl-col { border-top-color: #8b949e; }
.tpl-howto { margin: 4px 0 0; }

/* Project map: 4 connection dots, drag-in blocks, drawing mode */
.cnode-handle.h-right { right: -8px; top: 50%; margin-top: -7px; }
.cnode-handle.h-left { left: -8px; top: 50%; margin-top: -7px; }
.cnode-handle.h-top { top: -8px; left: 50%; margin-left: -7px; }
.cnode-handle.h-bottom { bottom: -8px; left: 50%; margin-left: -7px; }
.tile-ghost { position: fixed; z-index: 300; pointer-events: none; transform: translate(-50%, -60%) scale(1.05); opacity: .92; background: var(--bg-overlay); border: 1px solid #4493f8; box-shadow: var(--shadow-overlay); }
.canvas-wrap.drop-ready { box-shadow: inset 0 0 0 2px #4493f866; }
.draw-dim { position: absolute; inset: 0; z-index: 2; background: #010409; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.canvas-wrap.drawing .draw-dim { opacity: .6; }
.canvas-ink-world { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; pointer-events: none; }
.canvas-ink { position: absolute; left: 0; top: 0; overflow: visible; }
.ink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.canvas-world { z-index: 1; }
.canvas-wrap.drawing { cursor: crosshair; }
.canvas-wrap.drawing.erasing { cursor: cell; }
.canvas-wrap.drawing.space-pan, .canvas-wrap.drawing.panning { cursor: grabbing; }
.canvas-wrap.drawing .canvas-tip, .canvas-wrap.drawing .cnode-handle { display: none; }
.canvas-wrap.drawing .canvas-world { pointer-events: none; }
.draw-tools { position: absolute; z-index: 6; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 8px 6px 10px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-overlay); box-shadow: var(--shadow-overlay); flex-wrap: wrap; }
.draw-tools[hidden] { display: none; }
.dt-group { display: flex; align-items: center; gap: 4px; }
.dt-sep { width: 1px; height: 22px; background: var(--border-default); }
.dt-color { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px #0006; }
.dt-color.on { border-color: #f0f6fc; box-shadow: 0 0 0 2px #4493f8; }
.dt-size { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; }
.dt-size span { display: block; border-radius: 50%; }
.dt-size.on { border-color: var(--border-default); background: var(--hover-bg); }
.dt-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--btn-bg); color: var(--fg-default); font-size: 12px; }
.dt-btn[aria-pressed="true"] { border-color: #4493f8; color: #79c0ff; background: #388bfd1f; }
.dt-hint { color: var(--fg-muted); font-size: 12px; }
.ctile[data-act=draw].on { background: #388bfd26; border-color: #4493f8; color: var(--fg-default); }
@media (max-width: 760px) { .dt-hint { display: none; } }

/* Progress page — same boxes and calm colours as the settings pages */
.pg { max-width: 1012px; gap: 0; padding: 24px 24px 48px; }
.pg-head { margin-bottom: 4px; }
.pg-title { margin: 0 0 4px; }
.pg-sub { margin: 0; color: var(--fg-muted); font-size: 14px; }
.pg-box { margin-top: 16px; }
.pg-box > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-default); border-radius: 6px 6px 0 0; }
.pg-box > header h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pg-box > header h2 .octicon { color: var(--fg-muted); }
.pg-box .pg-box-aside { color: var(--fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pg-late > header .pg-box-aside:not(:empty) { padding: 0 8px; border-radius: 10px; background: #f8514926; color: #ff7b72; font-weight: 600; }
.pg-late > header h2 .octicon { color: #ff7b72; }
.pg-bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pg-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--bg-muted, #21262d); overflow: hidden; }
.pg-bar span { display: block; height: 100%; border-radius: 5px; background: var(--accent-emphasis); }
.pg-bar.complete span { background: #2ea043; }
.pg-pct { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border-default); border-radius: 6px; overflow: hidden; }
.pg-stat { min-width: 0; padding: 12px 14px; border: 0; border-radius: 0; background: var(--bg-default); }
.pg-stat + .pg-stat { border-left: 1px solid var(--border-default); }
.pg-stat strong { display: block; font-size: 24px; line-height: 1.2; font-weight: 600; }
.pg-stat span { font-size: 13px; color: var(--fg-muted); }
.pg-stat.ok strong { color: #3fb950; } .pg-stat.bad strong { color: #ff7b72; } .pg-stat.warn strong { color: #d29922; }
.pg-grid { gap: 16px; }
.pg-grid > .pg-box { margin-top: 16px; }
.pg-stack { height: 12px; gap: 2px; margin-bottom: 14px; }
.pg-seg { border-radius: 3px; }
.pg-legend { gap: 8px 20px; font-size: 14px; }
.pg-legend strong { color: var(--fg-default); }
.pg-box .settings-body:has(> .pg-list) { padding: 4px 8px; }
.pg-list li + li { border-top: 1px solid var(--border-muted, #21262d); }
.pg-task { padding: 10px 8px; border-radius: 6px; font-size: 14px; }
.pg-task .token { min-width: 86px; }
.pg-task-title { font-weight: 500; color: var(--fg-default); }
.pg-empty { padding: 10px 8px; font-size: 14px; }
.pg-person { padding: 10px 0; font-size: 14px; }
.pg-pnums { font-size: 13px; }
.pg-pbar { height: 8px; }
@media (max-width: 760px) {
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-stat + .pg-stat { border-left: 0; }
  .pg-stat { border-top: 1px solid var(--border-default); }
  .pg-stat:nth-child(-n+2) { border-top: 0; }
  .pg-stat:nth-child(even) { border-left: 1px solid var(--border-default); }
  .pg-box .pg-box-aside { display: none; }
}

/* File viewer (images and text files shared in the room) */
.viewer { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: #010409eb; }
.viewer-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-default); background: var(--bg-default); }
.viewer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.viewer-size { margin-right: auto; color: var(--fg-muted); font-size: 12px; white-space: nowrap; }
.viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px #000a; cursor: zoom-in; background: #fff; }
.viewer-img.zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.viewer-text { align-self: stretch; width: min(900px, 100%); margin: 0 auto; padding: 20px 24px; overflow: auto; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-default); color: var(--fg-default); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-table-wrap { align-self: stretch; width: min(1100px, 100%); margin: 0 auto; overflow: auto; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-default); }
.viewer-table { border-collapse: collapse; font-size: 13px; }
.viewer-table th, .viewer-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-default); border-right: 1px solid var(--border-muted, #21262d); text-align: left; white-space: nowrap; }
.viewer-table th { position: sticky; top: 0; background: var(--bg-inset); font-weight: 600; }
.msg-file-wrap { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.att-open { margin-left: 6px; padding: 0 6px; border-radius: 10px; background: #388bfd26; color: #79c0ff; font-size: 11px; font-weight: 600; }
.msg-image { cursor: zoom-in; }
.cn-file-btns { display: flex; gap: 6px; }
@media (max-width: 600px) { .viewer-body { padding: 8px; } .viewer-text { padding: 12px; } }

/* Guide / wiki */
.wiki-page { overflow: hidden; }
.wiki { display: flex; height: 100%; min-height: 0; }
.wiki-side { flex: none; width: 260px; display: flex; flex-direction: column; gap: 10px; padding: 20px 12px; border-right: 1px solid var(--border-default); background: var(--bg-inset); overflow-y: auto; }
.wiki-side-head { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 15px; }
.wiki-search { height: 32px; }
.wiki-toc { display: flex; flex-direction: column; gap: 1px; }
.wiki-group { margin: 12px 8px 4px; font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.wiki-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--fg-default); text-decoration: none; font-size: 14px; }
.wiki-link .octicon { color: var(--fg-muted); flex: none; }
.wiki-link:hover { background: var(--hover-bg); text-decoration: none; }
.wiki-link.current { background: var(--hover-bg); font-weight: 600; box-shadow: inset 2px 0 0 #f78166; }
.wiki-main { flex: 1; min-width: 0; overflow-y: auto; }
.wiki-article { max-width: 760px; padding: 28px 32px 64px; font-size: 15px; line-height: 1.65; }
.wiki-crumb { margin: 0 0 4px; color: var(--fg-muted); font-size: 13px; }
.wiki-article h2 { margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); font-size: 18px; }
.wiki-article p { margin: 0 0 12px; }
.wiki-article ul, .wiki-article ol { margin: 0 0 14px; padding-left: 22px; }
.wiki-article li { margin: 4px 0; }
.wiki-article kbd, .wiki-keys kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-inset); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wiki-tip { display: flex; gap: 10px; margin: 16px 0; padding: 12px 14px; border: 1px solid #1f6feb66; border-radius: 6px; background: #388bfd14; }
.wiki-tip .octicon { flex: none; margin-top: 4px; color: #79c0ff; }
.wiki-tip p { margin: 0; }
.wiki-keys { width: 100%; border-collapse: collapse; border: 1px solid var(--border-default); border-radius: 6px; }
.wiki-keys td { padding: 8px 12px; border-bottom: 1px solid var(--border-default); vertical-align: middle; }
.wiki-keys td:first-child { width: 42%; white-space: nowrap; }
.wiki-next { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.wiki-next a { display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--border-default); border-radius: 6px; color: var(--fg-default); text-decoration: none; min-width: 0; }
.wiki-next a:hover { border-color: #8b949e; text-decoration: none; }
.wiki-next a span { color: var(--fg-muted); font-size: 12px; }
.wiki-next .wiki-nxt { margin-left: auto; text-align: right; }
.help-btn { width: 32px; height: 32px; color: var(--fg-muted); }
@media (max-width: 760px) {
  .wiki { flex-direction: column; height: auto; }
  .wiki-page { overflow-y: auto; }
  .wiki-side { width: auto; border-right: 0; border-bottom: 1px solid var(--border-default); padding: 12px 16px; max-height: none; }
  .wiki-toc { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .wiki-group { display: none; }
  .wiki-link { padding: 4px 10px; border: 1px solid var(--border-default); font-size: 13px; }
  .wiki-link .octicon { display: none; }
  .wiki-main { overflow: visible; }
  .wiki-article { padding: 20px 16px 48px; }
}
@media (max-width: 480px) { .help-btn { display: none; } }

/* ═══ Round 8 ═══ */
/* Board: wide boards scroll sideways */
.tasks-page { position: relative; }
.board { scrollbar-width: auto; scrollbar-color: #545d68 transparent; }
.board::-webkit-scrollbar { height: 12px; }
.board::-webkit-scrollbar-thumb { background: #545d68; border-radius: 6px; border: 2px solid var(--bg-default); }
.board.panning, .board.panning * { cursor: grabbing !important; user-select: none; }
.board-scroll { position: absolute; top: 55%; z-index: 6; display: grid; place-items: center; width: 36px; height: 56px; padding: 0; border: 1px solid var(--border-default); background: #161b22e6; color: var(--fg-default); box-shadow: 0 4px 14px #0008; cursor: pointer; }
.board-scroll.left { left: 0; border-left: 0; border-radius: 0 8px 8px 0; }
.board-scroll.right { right: 0; border-right: 0; border-radius: 8px 0 0 8px; }
.board-scroll:hover { background: var(--btn-hover-bg); }
.board-scroll[hidden] { display: none; }

/* Project map: select several */
.canvas-lasso { position: absolute; z-index: 5; border: 1px solid #4493f8; background: #388bfd1f; border-radius: 2px; pointer-events: none; }
.canvas-wrap.area-mode, .canvas-wrap.area-mode .cnode.k-frame { cursor: crosshair; }
.select-area-btn.on { background: #388bfd26; color: #79c0ff; box-shadow: inset 0 0 0 1px #4493f8; }
.canvas-wrap.file-over { outline: 2px dashed #4493f8; outline-offset: -8px; }
.canvas-wrap.file-over::after { content: 'Drop files to add them to the project map'; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 6; padding: 6px 14px; border-radius: 20px; background: #1f6feb; color: #fff; font-weight: 600; font-size: 13px; pointer-events: none; }

/* Shared bits */
.form-control.form-sm { height: 28px; padding: 3px 8px; font-size: 13px; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
.form-row2 > [hidden], .form-row3 > [hidden] { display: none; }
@media (max-width: 600px) { .form-row2, .form-row3 { grid-template-columns: 1fr; } }
.pay-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pay-chip + .pay-chip { margin-left: 4px; }
.pay-chip.tone-gray { background: #6e768126; color: #c9d1d9; border-color: #6e768166; }
.pay-chip.tone-muted { background: transparent; color: var(--fg-muted); border-color: var(--border-default); }
.pay-chip.tone-yellow { background: #bb800926; color: #e3b341; border-color: #bb800966; }
.pay-chip.tone-orange { background: #db6d2826; color: #ffa657; border-color: #db6d2866; }
.pay-chip.tone-green { background: #2ea04326; color: #3fb950; border-color: #2ea04366; }
.pay-chip.tone-red { background: #f8514926; color: #ff7b72; border-color: #f8514966; }

/* Notes */
.notes-page { display: flex; min-height: 0; }
.notes { flex: 1; display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 0; }
.notes-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-default); background: var(--bg-inset); }
.notes-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 8px; }
.notes-side-head h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.notes-side-head h1 .octicon { color: var(--fg-muted); }
.notes-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; border-bottom: 1px solid var(--border-default); }
.notes-filters .notes-search { flex: 1 1 100%; }
.notes-filters .seg { margin-left: 0; }
.notes-filters .seg button { height: 24px; }
.notes-filters .notes-project { flex: 1; min-width: 0; height: 30px; padding: 3px 8px; font-size: 13px; }
.notes-list { flex: 1; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.note-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg-default); text-align: left; }
.note-item:hover { background: var(--hover-bg); }
.note-item.active { background: var(--selected-bg); border-color: var(--border-default); box-shadow: inset 3px 0 0 var(--accent-emphasis); }
.note-item-title { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.note-item-title .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-flag { display: inline-flex; color: var(--fg-muted); flex: none; }
.note-item-snippet { color: var(--fg-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item-meta { color: var(--fg-muted); font-size: 12px; opacity: .85; }
.notes-empty { padding: 16px 12px; color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
.note-editor { display: flex; min-height: 0; min-width: 0; background: var(--bg-default); }
.note-none { margin: auto; text-align: center; color: var(--fg-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.note-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; max-width: 900px; margin: 0 auto; padding: 16px 24px 12px; }
.note-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
.note-bar .note-vis { width: auto; max-width: 260px; }
.note-bar .note-proj { width: auto; max-width: 200px; }
.note-bar .note-pin[aria-pressed="true"] { color: #e3b341; border-color: #bb800966; }
.note-status { margin-left: auto; color: var(--fg-muted); font-size: 12px; min-width: 60px; text-align: right; }
.note-back { display: none; }
.note-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border: 1px solid #bb800966; border-radius: 6px; background: #bb80091a; color: #e3b341; font-size: 13px; }
.note-conflict[hidden] { display: none; }
.note-conflict span { flex: 1; min-width: 200px; }
.note-title { margin: 14px 0 6px; padding: 4px 0; border: 0; background: transparent; color: var(--fg-default); font-size: 24px; font-weight: 600; outline: none; }
.note-title::placeholder { color: #6e7681; }
.note-body { flex: 1; min-height: 240px; padding: 8px 0; border: 0; background: transparent; color: var(--fg-default); font: 15px/1.65 var(--font); resize: none; outline: none; }
.note-meta { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border-default); color: var(--fg-muted); font-size: 12px; }
@media (max-width: 760px) {
  .notes { grid-template-columns: 1fr; }
  .notes-page.editing .notes-side { display: none; }
  .notes-page:not(.editing) .note-editor { display: none; }
  .note-back { display: inline-grid; place-items: center; font-size: 22px; }
  .note-wrap { padding: 12px 14px; }
  .note-bar .note-vis, .note-bar .note-proj { max-width: 46%; }
}

/* Payments + Vault (same boxes as the rest of the site) */
.pay, .vault { max-width: 1100px; margin: 0 auto; padding: 24px 24px 64px; }
.vault { max-width: 1000px; }
.pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pay-head .settings-title { display: flex; align-items: center; gap: 10px; }
.pay-head .settings-title .octicon { width: 22px; height: 22px; color: var(--fg-muted); }
.pay-sub { margin: 2px 0 0; color: var(--fg-muted); max-width: 640px; }
.pay-head-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; border: 1px solid var(--border-default); border-radius: 6px; overflow: hidden; }
.pay-stats .pg-stat strong { font-size: 20px; overflow-wrap: anywhere; }
.vault-stat { text-align: left; cursor: pointer; color: inherit; font: inherit; }
.vault-stat:hover { background: var(--bg-muted); }
.vault-stat[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent-emphasis); background: var(--bg-muted); }
.pay-box { margin-top: 16px; }
.pay-box > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-default); border-radius: 6px 6px 0 0; }
.pay-box > header h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pay-box > header h2 .octicon { color: var(--fg-muted); }
.pay-aside { color: var(--fg-muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.pay-empty { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
.pay-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 20px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-inset); color: var(--fg-muted); }
.pay-locked p { margin: 0; color: var(--fg-default); }
.pay-table { display: flex; flex-direction: column; margin: -8px -8px; }
.pay-tr { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(170px, 1.3fr) minmax(110px, 1fr) minmax(80px, .8fr) minmax(110px, .9fr) 70px; align-items: center; gap: 12px; padding: 10px 8px; font-size: 14px; }
.pay-tr + .pay-tr { border-top: 1px solid var(--border-muted); }
.pay-th { font-size: 12px; font-weight: 600; color: var(--fg-muted); padding-top: 4px; padding-bottom: 6px; }
.pay-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-amount { font-variant-numeric: tabular-nums; }
.pay-amount small { color: var(--fg-muted); }
.pay-due.late { color: #ff7b72; font-weight: 600; }
.pay-act { text-align: right; }
@media (max-width: 860px) {
  .pay-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-stats .pg-stat + .pg-stat { border-left: 0; }
  .pay-stats .pg-stat { border-top: 1px solid var(--border-default); }
  .pay-stats .pg-stat:nth-child(-n+2) { border-top: 0; }
  .pay-stats .pg-stat:nth-child(even) { border-left: 1px solid var(--border-default); }
  .pay-th { display: none; }
  .pay-tr { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .pay-tr > :nth-child(3), .pay-tr > :nth-child(4), .pay-tr > :nth-child(5) { font-size: 13px; color: var(--fg-muted); }
  .pay-tr > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .pay-act { grid-row: 1; grid-column: 2; }
  .pay, .vault { padding: 16px 14px 48px; }
}
.sub-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; }
.sub-card + .sub-card, .pay-subs > .sub-card:first-child:not(:only-child) ~ .sub-card { border-top: 1px solid var(--border-muted); }
.pay-subs > .sub-card:first-child { padding-top: 0; }
.sub-card.cancelled { opacity: .65; }
.sub-card.flash { animation: subflash 2.2s ease; border-radius: 6px; }
@keyframes subflash { 0%, 60% { background: #388bfd26; box-shadow: 0 0 0 6px #388bfd26; } 100% { background: transparent; box-shadow: none; } }
.sub-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sub-title strong { font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
.sub-title a { color: var(--fg-default); }
.sub-title a:hover { color: var(--fg-accent); }
.sub-ext { color: var(--fg-muted); display: inline-flex; }
.sub-cost { color: var(--fg-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sub-when { margin-top: 6px; color: var(--fg-muted); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sub-side { display: flex; align-items: flex-start; gap: 8px; }
.sub-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-muted); height: 28px; }
.sub-owner .muted { color: var(--fg-muted); }
.sub-details { grid-column: 1 / -1; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 16px; margin: 4px 0 0; padding: 10px 12px; border: 1px solid var(--border-muted); border-radius: 6px; background: var(--bg-default); font-size: 13px; }
.sub-details dt { color: var(--fg-muted); }
.sub-details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sub-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sub-checked { margin-right: auto; color: var(--fg-muted); font-size: 12px; }
.pay-cancelled-toggle { margin-top: 12px; }
@media (max-width: 600px) { .sub-details { grid-template-columns: 1fr; gap: 2px; } .sub-details dd + dt { margin-top: 6px; } }
.pay-form textarea { resize: vertical; }

/* Vault */
.vault-card { margin-top: 20px; }
.vault-card p { margin: 0 0 12px; line-height: 1.55; }
.vault-h { margin: 0 0 8px; font-size: 16px; }
.vault-form { max-width: 440px; }
.vault-unlock { display: flex; flex-direction: column; align-items: flex-start; }
.vault-unlock .form-group { width: 100%; }
.vp-meter { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--bg-muted); overflow: hidden; }
.vp-meter span { display: block; height: 100%; width: 0; background: #f85149; transition: width .15s ease; }
.vp-meter span[data-s="1"] { background: #db6d28; } .vp-meter span[data-s="2"] { background: #d29922; } .vp-meter span[data-s="3"], .vp-meter span[data-s="4"] { background: #2ea043; }
.vault-list { padding: 0 !important; }
.vault-list .pay-empty { padding: 16px; }
.vault-row { display: grid; grid-template-columns: 36px minmax(160px, 1.3fr) minmax(170px, 1fr) minmax(170px, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px; }
.vault-row + .vault-row { border-top: 1px solid var(--border-muted); }
.vault-row.broken { display: block; color: var(--fg-muted); font-style: italic; }
.vault-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--btn-bg); border: 1px solid var(--border-default); font-weight: 700; color: var(--fg-muted); }
.vault-main { min-width: 0; }
.vault-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vault-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-host { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-host a { color: var(--fg-muted); }
.vault-user { display: flex; align-items: center; gap: 2px; color: var(--fg-muted); font-size: 13px; min-width: 0; }
.vault-u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-user .icon-btn, .vault-pass .icon-btn { width: 26px; height: 26px; }
.vault-pass { display: flex; align-items: center; gap: 2px; min-width: 0; }
.vault-pw { flex: 1; min-width: 0; padding: 3px 8px; border-radius: 6px; background: var(--bg-default); border: 1px solid var(--border-muted); font-family: var(--font-mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-2fa { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.vault-2fa-where { color: var(--fg-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vault-search { width: 220px; }
@media (max-width: 860px) {
  .vault-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .vault-pass, .vault-2fa { grid-column: 2 / -1; }
  .vault-acts { grid-row: 1; grid-column: 3; }
  .vault-search { width: 140px; }
}
.pw-wrap { display: flex; align-items: center; gap: 4px; }
.pw-wrap .form-control { flex: 1; font-family: var(--font-mono); }
.vault-meta { margin: 0; color: var(--fg-muted); font-size: 12px; }
.dialog-footer .vault-del { margin-right: auto; }
.va-list { list-style: none; margin: 8px 0 0; padding: 0; }
.va-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.va-row + .va-row { border-top: 1px solid var(--border-muted); }
.va-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.va-sub { color: var(--fg-muted); font-size: 12px; }
.va-acts { display: flex; gap: 6px; }
/* A clear, same-for-every-kind selection outline (several elements can be selected at once). */
.cnode.selected { outline: 2px solid #4493f8; outline-offset: 4px; }
.cnode.k-frame.selected { outline-offset: 2px; }
/* More header entries (Notes, Payments, Vault): the search box gives way first, then labels become icons. */
@media (max-width: 1380px) { .header-search { max-width: 240px; } }
@media (max-width: 1240px) { .main-nav .nav-btn span { display: none; } .main-nav .nav-btn { padding: 0 9px; } .header-search { max-width: 260px; } }
@media (max-width: 760px) {
  .note-bar { gap: 6px; }
  .notes { grid-template-columns: minmax(0, 1fr); }
  .note-bar .note-vis, .note-bar .note-proj { flex: 1 1 130px; min-width: 0; max-width: none; }
  .note-bar .note-status { min-width: 0; }
}
@media (max-width: 900px) { .header-search { max-width: none; } }