:root {
  --bg: #0b1220;
  --surface: #121a2b;
  --surface-2: #1a2439;
  --line: #26314a;
  --ink: #e6ebf5;
  --ink-dim: #93a1bd;
  --ink-faint: #5c6a89;
  --accent: #c1121c;
  --accent-bright: #f2564a;
  --up: #4fbf72;
  --down: #e0563f;
  --unknown: #8891a5;

  --priority-urgent: #e0563f;
  --priority-high: #e0a53f;
  --priority-medium: #c1121c;
  --priority-low: #5c8ff5;
  --priority-none: #5c6a89;

  --display: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --body: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background:
    radial-gradient(ellipse 800px 400px at 85% -10%, rgba(193, 18, 28, 0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
}

::selection {
  background: var(--accent);
  color: #04211d;
}

a {
  color: var(--accent-bright);
}

button {
  font-family: inherit;
}

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

.hidden {
  display: none !important;
}

.tabnum {
  font-variant-numeric: tabular-nums;
  font-family: var(--display);
}

/* --- login --- */
#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 340px;
}

.wordmark {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 24px;
}

.wordmark .dot {
  color: var(--accent);
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px;
}

.login-card label {
  font-family: var(--display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.login-card input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 10px;
  font-size: 0.95rem;
}

.login-card button {
  margin-top: 4px;
  background: var(--accent);
  color: #04211d;
  border: none;
  padding: 11px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  cursor: pointer;
}

.login-card button:disabled {
  opacity: 0.5;
  cursor: default;
}

#login-error {
  color: var(--down);
  font-size: 0.85rem;
  min-height: 1.2em;
}

/* --- dashboard --- */
#dashboard-view {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.dash-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 28px;
}

.dash-header .wordmark {
  margin: 0;
  text-align: left;
  font-size: 1.05rem;
}

.dash-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dash-meta button {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dash-meta button:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.view-tab {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.view-tab.active {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.view-tab:hover:not(.active) {
  color: var(--ink);
}

.task-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.task-column {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-column-label {
  font-family: var(--display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.task-column-count {
  font-family: var(--display);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.cfo-review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--unknown);
  padding: 16px;
  margin-bottom: 24px;
}

.cfo-review-meta {
  font-family: var(--display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.cfo-review-body {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

.task-view-toggle {
  display: flex;
  gap: 6px;
}

.task-mode-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.task-mode-btn.active {
  border-color: var(--accent);
  color: var(--accent-bright);
}

#new-task-btn {
  background: var(--accent);
  color: #04211d;
  border: none;
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.task-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  cursor: pointer;
}

.task-card:hover {
  border-color: var(--accent);
}

.task-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.task-identifier {
  font-family: var(--display);
  font-size: 0.7rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.task-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.task-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.task-description {
  color: var(--ink-dim);
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.task-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.task-label {
  font-family: var(--display);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 1px 6px;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.activity-section-label {
  font-family: var(--display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 28px 0 12px;
}

.activity-section-label:first-child {
  margin-top: 0;
}

#global-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.link-identifier {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--display);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.link-identifier:hover {
  color: var(--accent-bright);
  text-decoration: underline;
}

.roster-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.roster-detail pre {
  white-space: pre-wrap;
  font-family: var(--body);
  font-size: 0.8rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}

.category-group {
  margin-bottom: 28px;
}

.category-label {
  font-family: var(--display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.system-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--unknown);
  padding: 16px;
}

.system-card.up {
  border-left-color: var(--up);
}

.system-card.down {
  border-left-color: var(--down);
}

.summary-stat {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  cursor: pointer;
}

.summary-stat:hover {
  border-color: var(--accent);
}

#dashboard-summary-strip {
  margin-bottom: 20px;
}

#vps-status-card {
  margin-bottom: 4px;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.system-name {
  font-weight: 600;
  font-size: 0.98rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}

.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--unknown);
}

.status-pill.up {
  color: var(--up);
  border-color: rgba(79, 191, 114, 0.4);
}
.status-pill.up::before {
  background: var(--up);
}

.status-pill.down {
  color: var(--down);
  border-color: rgba(224, 86, 63, 0.4);
}
.status-pill.down::before {
  background: var(--down);
}

.system-description {
  color: var(--ink-dim);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.card-bottom a {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
}

.empty-state {
  color: var(--ink-faint);
  font-size: 0.9rem;
}

/* --- pills (priority / assignee / state) — shared by board, list, detail --- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 3px 8px;
  font-family: var(--body);
  font-size: 0.74rem;
  cursor: pointer;
  position: relative;
}

.pill:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.priority-dot.p-urgent { background: var(--priority-urgent); }
.priority-dot.p-high { background: var(--priority-high); }
.priority-dot.p-medium { background: var(--priority-medium); }
.priority-dot.p-low { background: var(--priority-low); }
.priority-dot.p-none { background: var(--priority-none); }

.avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: #0b1220;
  flex-shrink: 0;
}

.age-badge {
  font-family: var(--display);
  font-size: 0.66rem;
  color: var(--priority-high);
  border: 1px solid rgba(224, 165, 63, 0.35);
  padding: 3px 8px;
  align-self: center;
}

.pill-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-width: 140px;
  margin-top: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pill-menu button {
  background: none;
  border: none;
  color: var(--ink-dim);
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}

.pill-menu button:hover {
  background: var(--surface);
  color: var(--accent-bright);
}

/* --- list view --- */

.task-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}

.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.task-row:last-child {
  border-bottom: none;
}

.task-row:hover {
  background: var(--surface);
}

.task-row-title {
  flex: 1;
  font-size: 0.86rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row-project {
  font-size: 0.72rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.state-pill-inline {
  flex-shrink: 0;
}

/* --- new-issue / dialogs --- */

dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 24px;
  width: 100%;
  max-width: 440px;
}

dialog::backdrop {
  background: rgba(3, 7, 18, 0.7);
}

dialog h2 {
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}

dialog form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

dialog label {
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: -4px;
}

dialog input,
dialog textarea,
dialog select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 9px;
  font-size: 0.9rem;
  font-family: inherit;
  width: 100%;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--body) !important;
  font-size: 0.82rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ink-dim) !important;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.dialog-actions button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.82rem;
}

.dialog-actions button[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #04211d;
  font-weight: 600;
}

#new-task-error {
  color: var(--down);
  font-size: 0.82rem;
  min-height: 1em;
}

/* --- task detail slide-over --- */

#task-detail-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
}

#task-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.6);
}

#task-detail-content {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 24px;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#close-detail-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.detail-title {
  font-size: 1.15rem;
  margin: 4px 0 10px;
  text-wrap: balance;
}

.detail-description {
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin-bottom: 16px;
  white-space: pre-wrap;
}

.detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.project-pill,
.due-pill {
  cursor: default;
}

.result-panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 0.84rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-panel-label {
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  margin-bottom: 4px;
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.activity-item {
  font-size: 0.82rem;
}

.activity-meta {
  color: var(--ink-faint);
  font-size: 0.72rem;
  margin-bottom: 2px;
}

.comment-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 8px 10px;
}

.activity-body {
  color: var(--ink);
}

#comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#comment-form textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 9px;
  font-family: inherit;
  font-size: 0.86rem;
  resize: vertical;
}

#comment-form button {
  align-self: flex-end;
  background: var(--accent);
  border: none;
  color: #04211d;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

/* --- command palette --- */

#cmd-palette {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}

#cmd-palette-input {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 16px;
  font-size: 1rem;
}

#cmd-palette-results {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
}

#cmd-palette-results button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--ink-dim);
  padding: 9px 10px;
  cursor: pointer;
  font-size: 0.86rem;
  display: flex;
  gap: 8px;
  align-items: center;
}

#cmd-palette-results button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* --- finances tab --- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.table-wrap th {
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table-wrap td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table-wrap tr:last-child td {
  border-bottom: none;
}

.amount-col {
  text-align: right;
}

/* --- chat tab --- */

.chat-layout {
  display: flex;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--line);
}

.chat-sidebar {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.chat-thread-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font-size: 0.82rem;
  font-family: inherit;
}

.chat-thread-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.chat-thread-item.active {
  background: var(--surface-2);
  color: var(--accent-bright);
  border-left: 2px solid var(--accent);
}

.chat-thread-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-unread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
}

.chat-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.chat-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}

.chat-main-header button {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chat-main-header button:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

#chat-discussion-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--ink-dim);
}

.chat-discussion-actions button {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 3px 9px;
  cursor: pointer;
  font-size: 0.7rem;
  margin-left: 6px;
}

.chat-discussion-actions button:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.discussion-agent-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  padding: 4px 0;
}

.dialog-hint {
  color: var(--ink-faint);
  font-size: 0.78rem;
  margin: -6px 0 4px;
}

#autonomy-toggle-btn {
  font-family: var(--display);
  font-size: 0.66rem;
}

#autonomy-toggle-btn.autonomy-off {
  border-color: var(--down) !important;
  color: var(--down) !important;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message {
  display: flex;
  gap: 8px;
  max-width: 80%;
}

.chat-message.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message-body {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 7px 10px;
}

.chat-message.mine .chat-message-body {
  background: var(--surface);
  border-color: var(--accent);
}

.chat-message-meta {
  color: var(--ink-faint);
  font-size: 0.68rem;
  margin-bottom: 3px;
}

.chat-message-text {
  color: var(--ink);
  font-size: 0.86rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message-text a {
  color: var(--accent-bright);
}

.chat-message-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.chat-message-actions .link-identifier {
  font-size: 0.68rem;
  color: var(--ink-faint);
}

.chat-message-actions .link-identifier:hover {
  color: var(--accent-bright);
}

.chat-attachment-image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin-top: 8px;
  border: 1px solid var(--line);
}

.chat-attachment-file {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent-bright);
  font-size: 0.8rem;
}

#chat-composer-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

#chat-attach-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.95rem;
  flex-shrink: 0;
}

#chat-attach-btn:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

#chat-composer-form textarea {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 9px;
  font-family: inherit;
  font-size: 0.86rem;
  resize: vertical;
}

#chat-composer-form button {
  align-self: flex-end;
  background: var(--accent);
  border: none;
  color: #04211d;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

/* --- tablet/phone (iPad and narrower) --- */

@media (max-width: 820px) {
  #dashboard-view {
    padding: 18px 12px 40px;
  }

  .chat-layout {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .chat-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .chat-thread-item {
    flex: 0 0 auto;
    border-bottom: none;
    border-right: 1px solid var(--line);
    white-space: nowrap;
  }

  .chat-thread-item.active {
    border-left: none;
    border-bottom: 2px solid var(--accent);
  }

  .chat-messages {
    height: 50vh;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  dialog {
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
  }
}

/* ============================================================
   2026-07-09 UI overhaul — Overview home, Agents fusion, meters
   ============================================================ */

/* --- nav: underline tabs with count badges --- */
.view-tabs {
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.view-tab {
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 16px 11px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.view-tab.active {
  border-bottom-color: var(--accent);
  background: linear-gradient(to top, rgba(193, 18, 28, 0.07), transparent 70%);
}

.tab-badge {
  font-size: 0.62rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 0 6px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.view-tab.active .tab-badge {
  border-color: var(--accent);
  color: var(--accent-bright);
}

/* --- stat tiles (Overview hero row) --- */
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  padding: 14px 16px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}

.stat-tile:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.stat-tile.ok { border-top-color: var(--up); }
.stat-tile.warn { border-top-color: var(--priority-high); }
.stat-tile.alert { border-top-color: var(--down); }

.stat-label {
  font-family: var(--display);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.stat-value {
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--ink);
}

.stat-meta {
  font-size: 0.74rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-tile.alert .stat-meta { color: var(--down); }
.stat-tile.warn .stat-meta { color: var(--priority-high); }

/* --- Overview two-column body --- */
.overview-columns {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 28px;
  align-items: start;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-head .activity-section-label { margin: 0; }

.section-jump {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}

.section-jump:hover { color: var(--accent-bright); }

/* --- fleet strip (agent chips) --- */
#overview-fleet {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 26px;
}

.agent-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease;
}

.agent-chip:hover { border-color: var(--accent); }

.agent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

.dot-ok { background: var(--up); box-shadow: 0 0 6px rgba(79, 191, 114, 0.7); }
.dot-idle { background: var(--unknown); }
.dot-alert { background: var(--down); box-shadow: 0 0 6px rgba(224, 86, 63, 0.7); }

.agent-chip-name {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  min-width: 46px;
}

.agent-chip-meta {
  color: var(--ink-faint);
  font-size: 0.72rem;
  margin-left: auto;
}

.agent-chip-flag {
  font-family: var(--display);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--down);
  border: 1px solid var(--down);
  padding: 0 5px;
}

/* --- meters (Overview server column) --- */
#overview-meters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px 16px;
}

.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}

.meter-label {
  font-family: var(--display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
}

.meter-flag { font-size: 0.62rem; }
.meter-flag.warn { color: var(--priority-high); }
.meter-flag.alert { color: var(--down); }

.meter-nums {
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.meter-track {
  height: 5px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.meter-fill {
  height: 100%;
  background: var(--accent);
  transition: width 400ms ease;
}

.meter-fill.warn { background: var(--priority-high); }
.meter-fill.alert { background: var(--down); }
.meter-fill.ok { background: var(--up); }
.meter-flag.ok { color: var(--up); }

.health-log-item { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.health-log-item:last-child { border-bottom: none; }
.health-log-item .hli-name { color: var(--ink); }
.health-log-item .hli-macro { color: var(--ink-faint); white-space: nowrap; }
.health-log-item .hli-macro.high-chol { color: var(--down); font-weight: 600; }
.health-day-row { display: grid; grid-template-columns: 90px 1fr 70px 70px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.health-day-row:last-child { border-bottom: none; }

.muscle-map { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
.muscle-figure-wrap { text-align: center; width: 170px; flex: 0 0 auto; }
.mm-label { font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.muscle-figure { width: 100%; height: auto; }
.mm-zone { fill: var(--accent); opacity: 0.14; stroke: var(--accent); stroke-width: 0; cursor: pointer; transition: opacity 120ms ease, stroke-width 120ms ease; }
.mm-zone:hover { opacity: 0.34; }
.mm-zone.active { opacity: 0.6; stroke-width: 1.5; }
.muscle-panel { flex: 1 1 260px; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; }
.muscle-panel h4 { margin: 0 0 10px; color: var(--ink); text-transform: capitalize; }
.muscle-ex { padding: 7px 0; border-bottom: 1px solid var(--line); }
.muscle-ex:last-child { border-bottom: none; }
.muscle-ex .mex-name { color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.muscle-ex .mex-equip { color: var(--accent-bright); font-size: 0.74rem; }
.muscle-ex .mex-cue { color: var(--ink-dim); font-size: 0.76rem; font-style: italic; margin-top: 2px; }

/* --- Routine: time-blocked schedule --- */
.routine-row { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.routine-row:last-child { border-bottom: none; }
.routine-row.rr-now { background: rgba(53,208,192,0.06); }
.routine-time { font-family: var(--display); color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.routine-label-cell { display: flex; flex-direction: column; gap: 2px; }
.routine-label-cell .rl-name { color: var(--ink); font-weight: 600; }
.routine-status { padding: 2px 8px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--line); }
.routine-status.status-done { color: var(--up); border-color: var(--up); }
.routine-status.status-missed { color: var(--accent); border-color: var(--accent); }
.routine-status.status-skipped { color: var(--ink-faint); }
.routine-status.status-pending { color: var(--ink-dim); }
.routine-actions-cell { display: flex; gap: 6px; }
.routine-actions-cell button { font-size: 0.72rem; padding: 4px 8px; }
.routine-days { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 0.8rem; color: var(--ink-dim); }
.routine-days label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.routine-reminder-check { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-dim); }
.routine-block-row { display: grid; grid-template-columns: 90px 1fr 90px auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.routine-block-row:last-child { border-bottom: none; }
.routine-cat-pill { font-size: 0.68rem; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); padding: 2px 6px; width: fit-content; }

/* --- Recipe Book (Level Up: AI-assisted recipes) --- */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.recipe-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 0; }
.recipe-card summary { cursor: pointer; list-style: revert; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.recipe-card .rc-title { color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.recipe-card .rc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.recipe-card .rc-macros { display: flex; gap: 10px; font-size: 0.74rem; }
.recipe-card.generating { border-left-color: var(--priority-high); opacity: 0.75; }
.recipe-card.failed { border-left-color: var(--down); }
.rc-body { padding: 0 14px 14px; }
.rc-section-h { font-family: "PressStart2P", var(--display); font-size: 0.42rem; color: var(--ink-faint); margin: 10px 0 5px; text-transform: uppercase; }
.rc-list { margin: 0; padding-left: 18px; font-size: 0.82rem; color: var(--ink-dim); }
.rc-list li { margin: 3px 0; }
.tag-pill { display: inline-flex; align-items: center; font-size: 0.68rem; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); padding: 2px 6px; background: var(--surface-2); }
.macro-badge { font-family: var(--display); font-size: 0.72rem; color: var(--ink-dim); }
.macro-badge.protein { color: var(--up); }
.macro-badge.chol { color: var(--accent); }
.recipe-tag-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.recipe-tag-filters .tag-pill { cursor: pointer; }
.recipe-tag-filters .tag-pill.active { border-color: var(--accent); color: var(--accent); }
.rc-actions { display: flex; gap: 8px; margin-top: 10px; }
.rc-actions button { font-size: 0.72rem; padding: 4px 8px; }

/* --- Book List (Level Up: AI summaries) --- */
.book-row { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 0; margin: 6px 0; }
.book-row summary { cursor: pointer; list-style: revert; padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.book-row .br-title { color: var(--ink); font-weight: 600; }
.book-row .br-author { color: var(--ink-faint); font-size: 0.78rem; }
.book-status-pill { font-size: 0.66rem; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line); color: var(--ink-dim); }
.book-status-pill.to_read { color: var(--priority-low); border-color: var(--priority-low); }
.book-status-pill.reading { color: var(--priority-high); border-color: var(--priority-high); }
.book-status-pill.read { color: var(--up); border-color: var(--up); }
.book-rating { color: var(--priority-high); font-size: 0.8rem; letter-spacing: 1px; }
.br-body { padding: 0 14px 14px; }
.book-summary-block { font-size: 0.84rem; color: var(--ink-dim); line-height: 1.5; margin: 8px 0; white-space: pre-wrap; }
.br-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.br-actions button { font-size: 0.72rem; padding: 4px 8px; }
.br-actions select { font-size: 0.72rem; padding: 3px 6px; }
.generating-note { color: var(--priority-high); font-style: italic; font-size: 0.8rem; }

.meter-footnote {
  font-size: 0.7rem;
  color: var(--ink-faint);
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

/* --- Agents tab: profile bar + two-line thread items --- */
#agent-profile-bar {
  border: 1px solid var(--line);
  border-top: none;
  background: var(--surface-2);
  padding: 9px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.agent-profile-main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 260px;
  min-width: 0;
}

.agent-profile-desc {
  font-size: 0.78rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-profile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.profile-pill {
  font-family: var(--display);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 1px 7px;
}

.profile-pill.ok { border-color: var(--up); color: var(--up); }
.profile-pill.alert { border-color: var(--down); color: var(--down); }

#agent-profile-bar .roster-detail {
  flex-basis: 100%;
  max-height: 260px;
  overflow-y: auto;
}

.chat-thread-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.chat-thread-sub {
  font-size: 0.66rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- responsive: Overview collapses to one column --- */
@media (max-width: 900px) {
  .overview-columns { grid-template-columns: 1fr; }
}

/* fix: double scrollbar on agent Details — one scroll container only (the
   outer .roster-detail scrolls; the pre inside must never scroll itself) */
#agent-profile-bar .roster-detail pre {
  max-height: none;
  overflow: visible;
}

/* inline SVG icon sizing — inherits currentColor from its pill/flag/button */
.icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: -1.5px;
}

/* --- activity feed: scannable one-line event rows (replaces text walls) --- */
.feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-top: none;
  background: var(--surface);
  min-width: 0;
}

.feed-row:first-child { border-top: 1px solid var(--line); }
.feed-row:hover { background: var(--surface-2); }

.feed-actor {
  font-family: var(--display);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
  padding: 0 5px;
  flex: none;
  min-width: 34px;
  text-align: center;
}

.feed-verb {
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  flex: none;
}

.feed-verb.ok { color: var(--up); }

.feed-pill {
  font-family: var(--display);
  font-size: 0.64rem;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  padding: 0 5px;
  flex: none;
}

.feed-pill.on { border-color: var(--accent); color: var(--accent-bright); }

.feed-arrow { color: var(--ink-faint); font-size: 0.7rem; flex: none; margin: 0 -2px; }

.feed-snippet {
  font-size: 0.78rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.feed-time {
  margin-left: auto;
  flex: none;
  font-size: 0.68rem;
  color: var(--ink-faint);
}

/* grid children must be allowed to shrink — without this, the feed's nowrap
   rows force their column wide and crush the Fleet/Server column */
.overview-col { min-width: 0; }

/* --- Ideas tab --- */
.idea-capture {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.idea-capture input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 0.95rem;
}

.idea-capture select,
.idea-capture button {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0 14px;
  cursor: pointer;
}

.idea-capture button {
  border-color: var(--accent);
  color: var(--accent-bright);
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.idea-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
}

.idea-card.muted { opacity: 0.55; border-left-color: var(--line); }
.idea-actions { display: inline-flex; gap: 10px; }
.link-identifier.danger { color: var(--down); }

.status-pill.idea-spark { border-color: var(--priority-low); color: var(--priority-low); }
.status-pill.idea-exploring { border-color: var(--priority-medium); color: var(--priority-medium); }
.status-pill.idea-building { border-color: var(--priority-high); color: var(--priority-high); }
.status-pill.idea-shipped { border-color: var(--up); color: var(--up); }
.status-pill.idea-dropped { border-color: var(--ink-faint); color: var(--ink-faint); }

/* --- Flows: omnibar + pipeline cards --- */
.omnibar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.omnibar input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 0.95rem;
}

.omnibar button {
  background: var(--accent);
  border: none;
  color: #04211d;
  padding: 0 20px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.flow-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 16px;
  margin-bottom: 16px;
}

.flow-card.done { border-left-color: var(--up); }
.flow-card.failed { border-left-color: var(--down); }

.flow-pipeline { margin-top: 12px; }

.flow-stage {
  border: 1px solid var(--line);
  padding: 8px 12px;
  background: var(--bg);
}

.flow-stage.running { border-color: var(--accent); }
.flow-stage.waiting_approval { border-color: var(--priority-high); }
.flow-stage.done { opacity: 0.75; }
.flow-stage.failed { border-color: var(--down); }

.flow-connector {
  width: 1px;
  height: 10px;
  background: var(--line);
  margin-left: 24px;
}

.flow-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-stage-name {
  font-family: var(--display);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flow-stage-status {
  margin-left: auto;
  font-family: var(--display);
  font-size: 0.64rem;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.flow-stage-status.running { color: var(--accent-bright); }
.flow-stage-status.waiting_approval { color: var(--priority-high); }
.flow-stage-status.done { color: var(--up); }
.flow-stage-status.failed { color: var(--down); }

.flow-approve {
  background: var(--priority-high);
  border: none;
  color: #1f1503;
  padding: 3px 12px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
  font-weight: 600;
}

.flow-summary { margin-top: 8px; }
.flow-summary summary { cursor: pointer; font-size: 0.72rem; color: var(--ink-faint); }
.flow-summary pre {
  white-space: pre-wrap;
  font-family: var(--body);
  font-size: 0.8rem;
  color: var(--ink-dim);
  max-height: 300px;
  overflow-y: auto;
}

/* --- Journal --- */
.journal-compose {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journal-compose-row { display: flex; gap: 8px; flex-wrap: wrap; }

.journal-compose input, .journal-compose select, .journal-compose textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 10px;
  font-family: var(--body);
  font-size: 0.9rem;
}

.journal-compose textarea { resize: vertical; }

.journal-compose button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.journal-compose-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.journal-compose-actions button[type="submit"] { border-color: var(--accent); color: var(--accent-bright); }
#journal-reflect-btn { border-color: var(--priority-low); color: var(--priority-low); }

.journal-day { margin-bottom: 22px; }

.journal-date {
  font-family: var(--display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.journal-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.journal-entry.pijin { border-left-color: var(--priority-low); background: var(--surface-2); }

.journal-entry-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.journal-entry-body { font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; }
.journal-img { max-width: 380px; max-height: 280px; margin-top: 10px; border: 1px solid var(--line); display: block; }

/* --- Kaizen habit tracker --- */
#habits-board {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 10px 14px;
  margin-bottom: 10px;
}

.habit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.habit-row:last-child { border-bottom: none; }
.habit-row.habit-head { border-bottom: 1px solid var(--line); padding-bottom: 2px; }

.habit-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habit-days { display: flex; gap: 4px; flex: none; }

.habit-day-label {
  width: 24px;
  text-align: center;
  font-size: 0.6rem;
  color: var(--ink-faint);
}

.habit-cell {
  width: 24px;
  height: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--accent-bright);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}

.habit-cell:hover { border-color: var(--accent); }
.habit-cell.on { background: rgba(193, 18, 28, 0.18); border-color: var(--accent); }
.habit-cell.today { outline: 1px solid var(--ink-faint); outline-offset: 1px; }

.habit-streak {
  width: 44px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--priority-high);
  flex: none;
}

.habit-archive { flex: none; }

.habit-add { display: flex; gap: 8px; }

.habit-add input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 0.85rem;
}

.habit-add button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 0 14px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.66rem;
  text-transform: uppercase;
}

/* --- HQ blueprint floor --- */
#hq-floor {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(193, 18, 28, 0.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(193, 18, 28, 0.05) 23px 24px),
    #0a1626;
  border: 1px solid var(--line);
  padding: 10px;
}

#hq-svg { width: 100%; height: auto; display: block; }

.hq-outer { fill: none; stroke: var(--accent-bright); stroke-width: 2.5; opacity: 0.85; }
.hq-wall { stroke: var(--accent-bright); stroke-width: 1.6; opacity: 0.55; }
.hq-room { fill: rgba(193, 18, 28, 0.04); stroke: var(--accent-bright); stroke-width: 1.4; opacity: 0.9; }
.hq-door-gap { stroke: #0a1626; stroke-width: 4; }
.hq-door-arc { fill: none; stroke: var(--accent-bright); stroke-width: 0.8; opacity: 0.5; stroke-dasharray: 3 3; }
.hq-desk { fill: none; stroke: var(--accent-bright); stroke-width: 1; opacity: 0.45; }
.hq-rack { fill: rgba(193, 18, 28, 0.08); stroke: var(--accent-bright); stroke-width: 0.9; opacity: 0.6; }

.hq-name { font-family: var(--display); font-size: 13px; fill: var(--ink); letter-spacing: 1.5px; }
.hq-sub { font-family: var(--display); font-size: 10px; fill: var(--ink-faint); letter-spacing: 0.5px; }
.hq-corridor-label { font-family: var(--display); font-size: 10px; fill: var(--ink-faint); text-anchor: middle; letter-spacing: 4px; opacity: 0.6; }
.hq-working { font-family: var(--display); font-size: 10px; fill: var(--accent-bright); text-anchor: middle; }

.hq-office { cursor: pointer; }
.hq-office:hover .hq-room { fill: rgba(193, 18, 28, 0.1); }

.hq-dot-ok { fill: var(--up); }
.hq-dot-ok { animation: hq-breathe 2.4s ease-in-out infinite; }
.hq-dot-idle { fill: var(--unknown); }
.hq-dot-alert { fill: var(--down); animation: hq-breathe 1.2s ease-in-out infinite; }

@keyframes hq-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hq-pulse { fill: var(--accent-bright); filter: drop-shadow(0 0 4px var(--accent-bright)); }

.hq-titleblock .hq-room { fill: rgba(193, 18, 28, 0.03); }

#hq-panel { position: fixed; inset: 0; z-index: 60; }
#hq-panel-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 16, 0.6); }
#hq-panel-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid var(--accent);
  padding: 18px;
}

/* --- HQ v2: bots, bubbles, ticker --- */
.hq-bot-body { fill: rgba(193, 18, 28, 0.12); stroke: var(--accent-bright); stroke-width: 1.2; }
.hq-bot-line { stroke: var(--accent-bright); stroke-width: 1; }
.hq-bot-antenna { fill: var(--accent-bright); }
.hq-bot-eye { fill: var(--accent-bright); }

/* NEVER animate transform on the .hq-bot group — CSS transform overrides the
   SVG translate() attribute and teleports the bot to the floor origin. Animate
   only child elements with transform-box: fill-box. */
.hq-bot.working .hq-bot-body { animation: hq-bob 0.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.hq-bot.working .hq-bot-antenna { animation: hq-breathe 0.6s ease-in-out infinite; }

.hq-bot.idle .hq-bot-eye { transform: scaleY(0.25); transform-box: fill-box; transform-origin: center; }
.hq-bot.idle .hq-bot-body { opacity: 0.6; }
.hq-zzz { font-family: var(--display); font-size: 8px; fill: var(--ink-faint); animation: hq-zfloat 2.4s ease-in-out infinite; }
.hq-zzz.d2 { animation-delay: 1.2s; font-size: 6px; }
@keyframes hq-zfloat { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

.hq-bot.alert .hq-bot-body { stroke: var(--down); }
.hq-bot.alert .hq-bot-eye, .hq-bot.alert .hq-bot-antenna { fill: var(--down); animation: hq-breathe 0.8s infinite; }

.hq-screen-glow { fill: var(--accent-bright); opacity: 0.5; animation: hq-breathe 1.1s ease-in-out infinite; }

.hq-bubble-box { fill: #0d1c30; stroke: var(--accent-bright); stroke-width: 0.8; opacity: 0.95; }
.hq-bubble-text { font-family: var(--display); font-size: 9px; fill: var(--ink); text-anchor: middle; }
.hq-bubble { animation: hq-bubble-in 0.25s ease-out; }
@keyframes hq-bubble-in { from { opacity: 0; } to { opacity: 1; } }

.hq-ticker {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 8px 4px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== Voice pipeline tab ===== */
.voice-card { border: 1px solid rgba(128,128,128,.35); border-radius: 0; padding: 10px 12px; margin: 8px 0; }
.voice-quote { font-style: italic; opacity: .85; border-left: 3px solid rgba(128,128,128,.5); padding: 2px 8px; margin: 6px 0; }
.voice-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; opacity: .7; margin-right: 6px; }
.voice-meta { font-size: 12px; opacity: .65; margin-top: 4px; }
.voice-reason { color: #d97706; font-size: 12px; margin-top: 4px; }
.voice-actions { margin-top: 8px; display: flex; gap: 14px; align-items: center; }
.voice-approve { font-weight: 600; }
.voice-reject { color: #e5484d; background: none; border: none; text-decoration: underline; cursor: pointer; font: inherit; }
.voice-empty { opacity: .6; padding: 10px 2px; }
.voice-status-executed { color: #30a46c; font-weight: 600; margin-right: 6px; }
.voice-status-failed { color: #e5484d; font-weight: 600; margin-right: 6px; }
.voice-status-rejected { opacity: .6; font-weight: 600; margin-right: 6px; }
.voice-status-approved { color: #0091ff; font-weight: 600; margin-right: 6px; }

.voice-rec-details summary { cursor: pointer; list-style: revert; }
.voice-rec-body { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(128,128,128,.25); }
.voice-rec-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-height: 24px; }
.voice-photo-thumb { position: relative; display: inline-block; }
.voice-photo-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 0; border: 1px solid rgba(128,128,128,.35); display: block; }
.voice-photo-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--down, #e5484d); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.voice-photo-upload-btn { display: inline-block; cursor: pointer; }
.voice-photo-status { margin-left: 10px; }


/* ===== Contacts ===== */
.contact-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.contact-form-grid input { padding:9px 11px; border-radius:0; border:1px solid rgba(128,128,128,.35); background:transparent; color:inherit; font:inherit; }
.contact-form-actions { display:flex; gap:10px; margin-bottom:16px; }
.contact-form-actions .ghost { background:none; border:1px solid rgba(128,128,128,.4); color:inherit; }
.contact-card { border:1px solid rgba(128,128,128,.3); border-radius:0; padding:12px 14px; margin:8px 0; }
.contact-top { font-size:15px; }
.contact-co { opacity:.75; } .contact-role { opacity:.6; font-size:13px; }
.contact-line { font-size:14px; margin-top:4px; }
.contact-notes { font-size:13px; opacity:.7; margin-top:6px; }
.contact-actions { margin-top:8px; display:flex; gap:12px; }
.contact-actions button { font-size:13px; }
.link-danger { color:#e5484d; background:none; border:none; text-decoration:underline; cursor:pointer; }
@media (max-width:600px){ .contact-form-grid { grid-template-columns:1fr; } }

/* ===== Follow-ups ===== */
.followup-form-grid { display:grid; grid-template-columns:130px 1fr 1fr; gap:8px; margin-bottom:8px; }
.followup-form-grid input, .followup-form-grid select { padding:9px 11px; border-radius:0; border:1px solid rgba(128,128,128,.35); background:transparent; color:inherit; font:inherit; }
.followup-form-actions { display:flex; gap:10px; margin-bottom:16px; }
.followup-form-actions .ghost { background:none; border:1px solid rgba(128,128,128,.4); color:inherit; }
.followup-card { display:flex; align-items:flex-start; gap:10px; border:1px solid rgba(128,128,128,.3); border-radius:0; padding:12px 14px; margin:8px 0; }
.followup-card.fu-done { opacity:.55; }
.followup-card.fu-done .fu-title { text-decoration:line-through; }
.fu-check { padding-top:2px; }
.fu-check input { width:18px; height:18px; cursor:pointer; }
.fu-body { flex:1; min-width:0; }
.fu-title { font-size:15px; }
.fu-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; opacity:.7; margin-top:4px; }
.fu-detail { font-size:13px; opacity:.7; margin-top:6px; }
.fu-actions { display:flex; gap:12px; }
.fu-actions button { font-size:13px; }
@media (max-width:600px){ .followup-form-grid { grid-template-columns:1fr; } }

/* --- Me at a Glance home (2026-07-12) --- */
#home-glance { margin-bottom: 8px; }

#home-hero {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin-bottom: 16px;
}

.home-greeting {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.home-date { color: var(--ink-faint); font-size: 0.9rem; }

.home-line {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--ink-dim);
  font-style: italic;
  line-height: 1.5;
}

.home-line-ref {
  font-family: var(--display);
  font-style: normal;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: 8px;
  white-space: nowrap;
}

.capture-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.capture-bar input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 0.95rem;
}

.capture-bar select {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 0 10px;
  font-family: var(--display);
  font-size: 0.72rem;
  cursor: pointer;
}

.capture-bar button {
  background: var(--accent);
  border: none;
  color: #04211d;
  padding: 0 20px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.capture-bar button:disabled { opacity: 0.5; cursor: default; }

/* --- Life OS: nav groups, mission line, palette search groups (2026-07-13) --- */
.tab-group-label {
  font-family: var(--display);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  align-self: center;
  padding: 0 4px 0 10px;
  border-left: 1px solid var(--line);
}

.tab-group-label:first-child { border-left: none; padding-left: 0; }

.home-mission {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-family: var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.palette-group-label {
  font-family: var(--display);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding: 8px 12px 2px;
  pointer-events: none;
  list-style: none;
}

.palette-sub { color: var(--ink-faint); font-size: 0.68rem; margin-left: 10px; }

#cmd-palette li[data-search-kind] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  cursor: pointer;
}


/* ==========================================================================
   SKIN A — "Ops Terminal, decluttered" (JMD picked mockup A, 2026-07-13)
   Appended layer: later rules override the legacy skin. Tokens first.
   ========================================================================== */
:root {
  --bg: #0b1220;
  --surface: #0e1626;
  --surface-2: #131d31;
  --line: #1d2942;
  --ink-dim: #8fa0c0;
  --ink-faint: #54627f;
}

body { background: var(--bg); }

/* --- shell: fixed left sidebar + content --- */
#dashboard-view {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

#side {
  width: 200px;
  flex: none;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 22px 0 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.side-brand {
  text-align: left;
  padding: 0 22px 22px;
  margin: 0;
  font-size: 0.92rem;
}

.side-scroll { flex: 1; overflow-y: auto; }

#content {
  flex: 1;
  min-width: 0;
  padding: 34px 44px 60px;
  max-width: 1140px;
}

.side-foot {
  border-top: 1px solid var(--line);
  padding: 12px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--display);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.side-foot button {
  background: none;
  border: none;
  color: var(--ink-faint);
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.side-foot button:hover { color: var(--accent-bright); }

/* --- nav: vertical, left-rail active state --- */
.view-tabs { display: contents; }

#side .tab-group-label {
  display: block;
  border-left: none;
  padding: 18px 22px 6px;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
}

#side .view-tab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-bottom: none;
  padding: 7px 22px;
  font-family: var(--body);
  font-size: 0.84rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-dim);
}

#side .view-tab.active {
  color: var(--ink);
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(193, 18, 28, 0.07), transparent);
}

#side .view-tab:hover:not(.active) { color: var(--ink); }

#side .tab-badge {
  float: right;
  border: none;
  background: var(--surface-2);
  color: var(--accent-bright);
  padding: 0 6px;
  font-size: 0.6rem;
}

/* --- home hero: flat, date-right, no italics --- */
#home-hero {
  border-left: none;
  padding: 0;
  margin-bottom: 18px;
}

.home-greeting {
  font-family: var(--display);
  font-size: 1.22rem;
  display: flex;
  align-items: baseline;
}

.home-date {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-line { font-style: normal; font-size: 0.85rem; }

/* --- stat strip: one hairline grid, no cards --- */
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-right: none;
  margin-bottom: 30px;
}

.stat-tile {
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-top: none;
  padding: 14px 16px;
  transition: background 120ms ease;
}

.stat-tile:hover { background: var(--surface); border-color: var(--line); }
.stat-tile .stat-value { font-size: 1.45rem; }
.stat-tile.ok { border-top: none; } .stat-tile.warn { border-top: none; } .stat-tile.alert { border-top: none; }
.stat-tile.ok .stat-value { color: var(--accent-bright); }
.stat-tile.warn .stat-value { color: var(--priority-high); }
.stat-tile.alert .stat-value { color: var(--down); }

@media (max-width: 1100px) { .stat-tile-row { grid-template-columns: repeat(3, 1fr); border-right: 1px solid var(--line); } .stat-tile { border-right: 1px solid var(--line); } }

/* --- capture + omnibar: single hairline field, flat button --- */
.capture-bar input, .omnibar input {
  background: transparent;
  border: 1px solid var(--line);
  border-right: none;
}

.capture-bar { gap: 0; }
.omnibar { gap: 0; }
.capture-bar select { border-right: none; }

/* --- cards flatten to panels --- */
.system-card, .idea-card, .flow-card, .journal-entry, .cfo-review-card,
.task-card, .agent-chip, #overview-meters, #habits-board, .journal-compose,
.recipe-card, .book-row {
  background: var(--surface);
}

.feed-row { background: transparent; }
.feed-row:hover { background: var(--surface); }

/* --- section labels: quieter, wider tracking --- */
.activity-section-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
}

/* --- mobile: sidebar collapses to a top scroller --- */
@media (max-width: 820px) {
  #dashboard-view { flex-direction: column; }
  #side { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 10px 12px; overflow-x: auto; }
  .side-brand { padding: 0 14px 0 0; white-space: nowrap; }
  .side-scroll { display: flex; align-items: center; flex: 1; overflow-x: auto; }
  #side .tab-group-label { padding: 0 6px 0 14px; white-space: nowrap; }
  #side .view-tab { width: auto; padding: 6px 10px; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  #side .view-tab.active { border-bottom-color: var(--accent); background: none; }
  .side-foot { display: none; }
  #content { padding: 20px 16px 50px; }
}

/* ops strip has 4 tiles, not 6 — no trailing empty cells */
#dashboard-summary-strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { #dashboard-summary-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- hero stack: status line + verse + motivation (2026-07-13) --- */
.home-status {
  margin-top: 10px;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.5;
}

.home-motivation {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--ink-faint);
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

/* --- HQ station view --- */
.station-sec {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin: 14px 0 6px;
}

.station-li { font-size: 0.82rem; padding: 2px 0; }
.station-li.dim { color: var(--ink-dim); }
.station-li .bad { color: var(--down); }

/* --- station v2: dept-custom windows --- */
#hq-panel-content { border-top: 3px solid var(--accent); width: min(560px, 94vw); max-height: 84vh; overflow-y: auto; }
.station-tag { font-family: var(--display); font-size: 0.62rem; color: var(--ink-faint); margin-left: 10px; letter-spacing: 0.1em; }

.station-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.station-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); display: block; }
.station-gallery a:hover img { border-color: var(--accent); }

.station-doc { border-bottom: 1px solid var(--line); padding: 6px 0; }
.station-doc summary { cursor: pointer; font-size: 0.84rem; color: var(--ink); }
.station-doc pre { white-space: pre-wrap; font-family: var(--body); font-size: 0.78rem; color: var(--ink-dim); margin: 8px 0 4px; max-height: 220px; overflow-y: auto; }

.station-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.station-sources a { font-family: var(--display); font-size: 0.66rem; border: 1px solid var(--line); padding: 3px 8px; color: var(--ink-dim); text-decoration: none; }
.station-sources a:hover { border-color: var(--accent); color: var(--accent-bright); }

.verdict-pill { font-family: var(--display); font-size: 0.62rem; padding: 1px 7px; border: 1px solid; }
.v-pass { color: var(--up); border-color: var(--up); }
.v-fail { color: var(--down); border-color: var(--down); }
.v-uncertain { color: var(--priority-high); border-color: var(--priority-high); }

/* --- HQ pixel guild hall (hq_pixel.js) --- */
#hq-canvas { display: block; width: 100%; max-width: 1100px; margin: 0 auto; image-rendering: pixelated; background: #07090f; border: 1px solid var(--line); border-radius: 0; }

/* --- HQ station terminal (direct line) --- */
.hq-term { background: #05070c; border: 1px solid var(--line); font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.78rem; line-height: 1.55; height: 340px; overflow-y: auto; padding: 10px 12px; margin-top: 10px; }
.term-line { white-space: pre-wrap; word-break: break-word; margin-bottom: 6px; }
.term-time { color: #3d4a63; font-size: 0.68rem; }
.term-who-jmd { color: var(--accent-bright, #f2564a); font-weight: 700; }
.term-who-agent { color: #c9d4ea; font-weight: 700; }
.term-body { color: #aab6cf; }
.term-dim { color: #4a5670; font-style: italic; }
.hq-term-input { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.term-prompt { font-family: ui-monospace, monospace; font-weight: 700; }
.hq-term-input input { flex: 1; background: #05070c; border: 1px solid var(--line); color: var(--ink); font-family: ui-monospace, monospace; font-size: 0.8rem; padding: 8px 10px; outline: none; }
.hq-term-input input:focus { border-color: var(--accent); }

/* --- Neo-City: the canvas IS the scene; no drafting grid behind it --- */
#hq-floor { background: #0a0b14; border: 1px solid var(--line); padding: 0; }


/* --- Library (URL intake) --- */
#library-urls { width: 100%; background: var(--bg, #0b0d16); border: 1px solid var(--line, #1d2942); color: var(--ink, #e6ebf5); font: inherit; padding: 10px 12px; margin-bottom: 8px; resize: vertical; }
.library-protocol { border: 1px solid var(--line, #1d2942); padding: 10px 14px; margin: 14px 0; }
.library-protocol summary { cursor: pointer; font-family: var(--display, ui-monospace); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--accent, #c1121c); }
.library-protocol ul { margin: 6px 0 10px 18px; }
.library-protocol li { margin: 4px 0; font-size: 0.82rem; color: #aab6cf; }
.lib-proto-h { font-family: var(--display, ui-monospace); font-size: 0.66rem; letter-spacing: 0.1em; color: #54627f; margin-top: 10px; }
.library-item { border: 1px solid var(--line, #1d2942); padding: 8px 12px; margin: 6px 0; }
.library-item summary { cursor: pointer; display: flex; gap: 10px; align-items: center; }
.lib-kind { color: var(--accent, #c1121c); }
.lib-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-host { color: #54627f; font-size: 0.75rem; }
.lib-status-pill { margin-left: auto; font-family: var(--display, ui-monospace); font-size: 0.62rem; padding: 1px 7px; border: 1px solid var(--line, #1d2942); color: #8fa0c0; }
.lib-inbox .lib-status-pill { color: var(--accent, #c1121c); border-color: var(--accent, #c1121c); }
.lib-flagged .lib-status-pill { color: #e0563f; border-color: #e0563f; }
.lib-body { padding: 10px 4px 4px; }
.lib-digest { white-space: pre-wrap; background: #05070c; border: 1px solid var(--line, #1d2942); padding: 10px; margin-top: 8px; font-size: 0.8rem; }
.lib-notes { color: #aab6cf; margin-top: 6px; font-size: 0.82rem; }

/* --- Finance alerts strip --- */
#finance-alerts { margin: 0 0 14px; }
#finance-alerts .fa-head { font-family: var(--display, ui-monospace); font-size: 0.66rem; letter-spacing: 0.1em; color: #54627f; margin-bottom: 6px; }
.finance-alert { border: 1px solid var(--line, #1d2942); border-left-width: 3px; padding: 9px 12px; margin: 6px 0; background: rgba(224,86,63,0.04); }
.finance-alert.fa-warning { border-left-color: #e0563f; }
.finance-alert.fa-info { border-left-color: #c1121c; background: rgba(193,18,28,0.04); }
.finance-alert .fa-title { font-weight: 700; color: var(--ink, #e6ebf5); margin-bottom: 4px; }
.finance-alert .fa-line { font-size: 0.82rem; color: #aab6cf; }
.finance-alert .fa-line b { color: #7f8aa6; font-weight: 600; }


/* --- collapsible nav groups (Life-OS redesign :: phase nav) --- */
.nav-group{ display:flex; flex-direction:column; }
.tab-group-label{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:0; cursor:pointer; font:inherit; text-align:left;
  text-transform:uppercase; letter-spacing:.09em; font-size:11px; font-weight:700;
  opacity:.5; padding:12px 12px 4px; margin:0;
}
.tab-group-label:hover{ opacity:.85; }
.grp-caret{ font-size:9px; transition:transform .15s ease; opacity:.7; margin-left:8px; }
.nav-group.collapsed .grp-caret{ transform:rotate(-90deg); }
.nav-group-items{ display:flex; flex-direction:column; }
.nav-group.collapsed .nav-group-items{ display:none; }


/* --- merged tabs + sub-tab bar (Life-OS redesign :: phase merge) --- */
#side .merged-tab{ display:block; width:100%; text-align:left; background:none; border:none;
  border-left:2px solid transparent; border-bottom:none; padding:7px 22px; font-family:var(--body);
  font-size:0.84rem; text-transform:none; letter-spacing:0; color:var(--ink-dim); cursor:pointer; }
#side .merged-tab.active{ color:var(--ink); border-left-color:var(--accent);
  background:linear-gradient(90deg, rgba(193,18,28,0.07), transparent); }
#side .merged-tab:hover:not(.active){ color:var(--ink); }
#side .tab-group-label{ display:flex; align-items:center; justify-content:space-between; }
#merged-proxies{ display:none !important; }
.subtab-bar{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line);
  margin:0 0 22px; padding:0; }
.subtab-bar.hidden{ display:none; }
.subtab{ background:none; border:none; border-bottom:2px solid transparent; color:var(--ink-dim);
  font-family:var(--body); font-size:0.86rem; padding:9px 16px 11px; cursor:pointer; }
.subtab:hover:not(.active){ color:var(--ink); }
.subtab.active{ color:var(--accent-bright); border-bottom-color:var(--accent); }

/* === THEME: NES (authentic front-loader palette) === */
:root {
  --bg: #c9c7c3;          /* NES light-grey console body - main screens */
  --surface: #d4d2cd;     /* cards, subtle lift off the body */
  --surface-2: #dedcd7;
  --line: #3a3a39;        /* NES near-black trim - outlines */
  --ink: #17150f;         /* near-black text */
  --ink-dim: #3d3a34;
  --ink-faint: #5f5c55;
  --accent: #c1121c;      /* RAL 3020 NES red */
  --accent-bright: #e0231f;
  --highlight: #faf6e0;
  --up: #5f7d28;
  --down: #c1121c;
  --unknown: #7a7873;
  --priority-urgent: #c1121c;
  --priority-high: #b9791a;
  --priority-medium: #5f7d28;
  --priority-low: #4f6f8f;
  --priority-none: #7a7873;
}
/* nav bar = NES charcoal front-tray with light-grey text */
#side { background: #3a3a39 !important; border-right: 1px solid #232322; }
#side .view-tab, #side .merged-tab { color: #cfcdc8; }
#side .view-tab:hover:not(.active), #side .merged-tab:hover:not(.active) { color: #ffffff; }
#side .view-tab.active, #side .merged-tab.active {
  color: #ffffff !important; border-left-color: var(--accent) !important;
  background: linear-gradient(90deg, rgba(193,18,28,0.32), transparent) !important;
}
#side .tab-group-label { color: #96948f; }
#side .wordmark, #side .side-brand { color: #ececea; }
#side .side-foot, #side .side-foot button, #side #last-updated { color: #b6b4af; }
#side .tab-badge { background: rgba(0,0,0,0.30); color: #ececea; border: none; }
#content { background: var(--bg); }
::selection { background: var(--highlight); color: var(--ink); }

/* === NES polish + light-flip cleanup (Life-OS redesign :: phase polish) === */
/* red console stripe under the wordmark (NES-logo style) */
#side .wordmark, #side .side-brand { border-bottom: 3px solid var(--accent); padding-bottom: 10px; margin-bottom: 6px; }
/* chunkier black outlines */
.stat-tile { border-width: 2px; }
button { border-width: 2px; }
input, select, textarea { border-width: 2px; }
/* sub-tab bar = NES mid-grey (#72706f) control strip */
.subtab-bar { background: #72706f; border-bottom: 2px solid var(--line); padding-left: 6px; }
.subtab { color: #e6e4df; }
.subtab:hover:not(.active) { color: #ffffff; }
.subtab.active { color: #ffffff; border-bottom-color: var(--accent); background: rgba(0,0,0,0.14); }
/* cleanup: recolor washed-out / off-theme spots (Library, HQ terminal, finance alerts) */
.lib-status-pill { color: var(--ink-dim) !important; }
.lib-proto-h, .lib-host, #finance-alerts .fa-head { color: var(--ink-faint) !important; }
.lib-digest { color: #d3d1cc; }
.hq-term { color: #d3d1cc; }
.hq-term-input input { color: #e8e6e1 !important; }

/* === NES DELUXE (Life-OS redesign :: phase nes-deluxe) === */
@font-face { font-family:"PressStart2P"; src:url("PressStart2P.ttf") format("truetype"); font-display:swap; }
/* A. pixel font on brand + group labels + sub-tabs (short text only; body stays readable) */
#side .wordmark, #side .side-brand { font-family:"PressStart2P", var(--display); font-size:0.6rem; line-height:1.7; letter-spacing:0; }
#side .tab-group-label { font-family:"PressStart2P", var(--display); font-size:0.5rem; letter-spacing:0; }
.subtab { font-family:"PressStart2P", var(--display); font-size:0.58rem; letter-spacing:0; padding:11px 14px 12px; }
/* B. beveled 'plastic' action buttons + hard 8-bit card drop-shadow */
#content button:not(.subtab):not(.chat-thread-item):not(.memrow):not(.link-identifier) { border-style:solid; border-width:2px; border-color:#e9e7e2 #4a4844 #4a4844 #e9e7e2; }
#content button:not(.subtab):not(.chat-thread-item):not(.memrow):not(.link-identifier):active { border-color:#4a4844 #e9e7e2 #e9e7e2 #4a4844; }
.stat-tile { box-shadow:3px 3px 0 rgba(23,21,15,0.28); }
/* C. NES menu-cursor arrow on the active nav item */
#side .view-tab.active::before, #side .merged-tab.active::before { content:"\25B6"; color:var(--accent); margin-right:7px; font-size:0.66em; vertical-align:middle; }
/* E. red power-LED next to the brand */
#side .wordmark::after, #side .side-brand::after { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 5px var(--accent); margin-left:9px; vertical-align:middle; }
/* SFX toggle button in the side-foot */
#sfx-toggle { color:#cfcdc8; }

/* === readability + activity/habit retone (Life-OS redesign :: phase readability) === */
html { font-size: 17px; }                              /* scale the whole UI up for legibility */
:root { --ink-dim: #2b2823; --ink-faint: #47443d; }    /* darker secondary text */
#side .tab-group-label { font-size: 0.6rem; }          /* pixel group labels less tiny */
.subtab { font-size: 0.66rem; }
.feed-actor { font-size: 0.64rem; }                    /* activity chips a touch bigger */
/* daily tracker: checked cell = glowing red power cell */
.habit-cell.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 7px 1px rgba(193,18,28,0.6); }
.habit-cell.on:hover { box-shadow: 0 0 9px 2px rgba(193,18,28,0.78); }

/* --- Home HUD panels (Phase 2 cockpit :: NES) --- */
.home-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 20px; }
.hud-panel { position: relative; border: 2px solid var(--line); background: var(--surface); box-shadow: 3px 3px 0 rgba(23,21,15,0.28); padding: 12px 14px 14px; }
.hud-title { font-family: "PressStart2P", var(--display); font-size: 0.6rem; color: var(--accent); margin-bottom: 12px; }
.hud-jump { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 0.7rem; padding: 2px 4px; }
.hud-jump:hover { color: var(--accent); }
.hud-sub { font-family: "PressStart2P", var(--display); font-size: 0.42rem; color: var(--ink-faint); margin: 14px 0 7px; letter-spacing: 0; }
.hud-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.hud-label { font-family: "PressStart2P", var(--display); font-size: 0.44rem; color: var(--ink-dim); min-width: 70px; }
.hud-val { font-family: var(--display); font-size: 0.82rem; color: var(--ink); margin-left: auto; font-variant-numeric: tabular-nums; }
.power-bar { display: flex; gap: 2px; flex: 1; }
.pseg { flex: 1; height: 14px; border: 1px solid var(--line); }
.pseg.on { background: var(--accent); box-shadow: 0 0 5px rgba(193,18,28,0.55); }
.pseg.met { background: var(--up); box-shadow: 0 0 5px rgba(95,125,40,0.55); }
.pseg.off { background: transparent; }
.nes-spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; padding: 4px; border: 1px solid var(--line); background: var(--bg); }
.nes-bar { flex: 1; min-height: 3px; background: var(--ink-faint); }
.nes-bar.on { background: var(--accent); }
.nes-bar.met { background: var(--up); }
.nes-bar.off { background: rgba(0,0,0,0.12); }

/* --- uniformity: two fonts only (pixel for chrome, mono for everything else) --- */
:root { --body: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; }
button, input, select, textarea { font-family: var(--body); }
/* --- MONEY + TODAY HUD styles --- */
.hud-big { font-family: var(--display); font-size: 1.05rem; font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.hud-big.pos { color: var(--up); }
.hud-big.neg { color: var(--accent); }
.todo-row { display: flex; align-items: center; gap: 9px; margin: 8px 0; }
.todo-dot { width: 9px; height: 9px; border: 1px solid var(--line); flex: none; }
.todo-dot.alert { background: var(--accent); box-shadow: 0 0 5px rgba(193,18,28,0.6); }
.todo-dot.ok { background: var(--up); }
.todo-text { font-family: var(--display); font-size: 0.82rem; color: var(--ink); }

/* --- FLEET + SYSTEMS HUD styles (Phase 2 cockpit :: NES) --- */
.fleet-leds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fleet-led { font-family: "PressStart2P", var(--display); font-size: 0.42rem; padding: 5px 6px; border: 1px solid var(--line); color: var(--ink-dim); background: var(--bg); }
.fleet-led.ok { color: var(--up); border-color: var(--up); box-shadow: 0 0 5px rgba(95,125,40,0.5); }
.fleet-led.alert { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 5px rgba(193,18,28,0.6); }
.fleet-led.idle { opacity: 0.5; }
.energy-bar { display: flex; gap: 2px; flex: 1; }
.eseg { flex: 1; height: 12px; border: 1px solid var(--line); background: transparent; }
.eseg.ok { background: var(--up); }
.eseg.warn { background: var(--priority-high); }
.eseg.crit { background: var(--accent); box-shadow: 0 0 4px rgba(193,18,28,0.55); }
.eseg.off { background: transparent; }

/* --- MOMENTUM HUD + Home dedup (Phase 2 cockpit :: NES) --- */
#overview-fleet, #overview-meters { display: none; }
.combo-num { font-family: "PressStart2P", var(--display); font-size: 1.35rem; color: var(--accent); margin: 4px 0 12px; display: flex; align-items: baseline; gap: 9px; }
.combo-unit { font-family: "PressStart2P", var(--display); font-size: 0.4rem; color: var(--ink-dim); }
.combo-meter { display: flex; gap: 2px; margin-bottom: 8px; }
.combo-seg { flex: 1; height: 8px; border: 1px solid var(--line); }
.combo-seg.on { background: var(--accent); box-shadow: 0 0 4px rgba(193,18,28,0.5); }
.combo-seg.off { background: transparent; }

/* --- Phase 3: global NES section headers + relocated activity panel --- */
.activity-section-label { font-family: "PressStart2P", var(--display) !important; font-size: 0.52rem; letter-spacing: 0; }
.activity-head-moved { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.activity-log { border: 2px solid var(--line); background: var(--surface); box-shadow: 3px 3px 0 rgba(23,21,15,0.28); padding: 6px 12px; }

/* === Phase 3: global NES component pass (every tab) === */
/* uniform hard 8-bit drop-shadow on all card/panel containers */
.task-card, .contact-card, .idea-card, .followup-card, .flow-card, .voice-card,
.library-item, .journal-entry, .health-log-item, .system-card, .cfo-review-card,
.finance-alert, .muscle-panel, .journal-compose, .result-panel, .comment-item,
.recipe-card, .book-row {
  box-shadow: 2px 2px 0 rgba(23,21,15,0.20);
}
/* pixel-font table headers (ledger, etc.) */
.table-wrap th { font-family: "PressStart2P", var(--display); font-size: 0.48rem; letter-spacing: 0; color: var(--ink-dim); }
.table-wrap table { border: 2px solid var(--line); }
/* pills / badges: boxy + uppercase for NES consistency */
.status-pill, .due-pill, .feed-pill, .state-pill-inline, .profile-pill, .verdict-pill,
.age-badge, .lib-status-pill, .flow-stage-status { border-radius: 0; text-transform: uppercase; }

/* --- per-tab NES screen titles (Phase 3) --- */
.screen-title { display: none; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--line); padding: 2px 2px 12px; margin-bottom: 18px; }
.scr-t { font-family: "PressStart2P", var(--display); font-size: 0.95rem; color: var(--accent); line-height: 1.4; }
.scr-s { font-family: "PressStart2P", var(--display); font-size: 0.44rem; color: var(--ink-dim); }

/* --- Health PLAYER STATS (deep-dive) --- */
.player-stats { margin-bottom: 22px; }
.ps-row { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.ps-label { font-family: "PressStart2P", var(--display); font-size: 0.46rem; color: var(--ink-dim); min-width: 78px; }
.ps-val { font-family: var(--display); font-size: 0.76rem; color: var(--ink); margin-left: auto; white-space: nowrap; }
.stat-bar { display: flex; gap: 2px; flex: 1; }
.sseg { flex: 1; height: 14px; border: 1px solid var(--line); }
.sseg.good, .sseg.ok { background: var(--up); }
.sseg.full { background: var(--up); box-shadow: 0 0 5px rgba(95,125,40,0.6); }
.sseg.warn { background: var(--priority-high); }
.sseg.crit { background: var(--accent); box-shadow: 0 0 5px rgba(193,18,28,0.6); }
.sseg.off { background: transparent; }
.ps-foot { font-family: var(--display); font-size: 0.72rem; color: var(--ink-dim); margin-top: 14px; border-top: 1px solid var(--line); padding-top: 9px; }

/* === bright input fields + NES A-button colored buttons (controller feel) === */
input, textarea, select { background: #f4f1e7 !important; color: var(--ink); border: 2px solid var(--line); }
input::placeholder, textarea::placeholder { color: #8a8578; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); background: #fffdf6 !important; }
/* primary action buttons = NES A-button red, beveled plastic */
#content button:not(.subtab):not(.hud-jump):not(.ghost):not(.view-tab):not(.merged-tab):not(.stat-tile):not(.chat-thread-item):not(.memrow):not(.link-identifier) {
  background: var(--accent); color: #faf6e0; font-weight: 700;
  border-style: solid; border-width: 2px; border-color: #e0574d #7a0c13 #7a0c13 #e0574d;
}
#content button:not(.subtab):not(.hud-jump):not(.ghost):not(.view-tab):not(.merged-tab):not(.stat-tile):not(.chat-thread-item):not(.memrow):not(.link-identifier):hover { background: var(--accent-bright); }
#content button:not(.subtab):not(.hud-jump):not(.ghost):not(.view-tab):not(.merged-tab):not(.stat-tile):not(.chat-thread-item):not(.memrow):not(.link-identifier):active { border-color: #7a0c13 #e0574d #e0574d #7a0c13; }
/* secondary / ghost buttons = grey plastic (Start/Select) */
.ghost { background: var(--surface) !important; color: var(--ink) !important; border-color: #e9e7e2 var(--line) var(--line) #e9e7e2 !important; }

/* --- 6-stat character sheet rows --- */
.ps6-row { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.ps6-name { font-family: "PressStart2P", var(--display); font-size: 0.46rem; color: var(--ink-dim); min-width: 112px; }
.ps6-lvl { font-family: "PressStart2P", var(--display); font-size: 0.5rem; color: var(--accent); min-width: 48px; }
.ps6-fed { font-family: var(--display); font-size: 0.72rem; color: var(--up); min-width: 38px; text-align: right; opacity: 0; }
.ps6-fed.on { opacity: 1; text-shadow: 0 0 5px rgba(95,125,40,0.6); }

/* --- XP streak indicator --- */
.ps6-streak { font-family: var(--display); font-size: 0.64rem; color: var(--priority-high); min-width: 30px; text-align: right; }

/* --- TREASURY HUD (Finances deep-dive) --- */
.treasury { margin-bottom: 20px; }
.ty-gold { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 12px; }
.ty-coin { width: 14px; height: 14px; background: var(--priority-high); border: 2px solid var(--line); box-shadow: 0 0 6px rgba(221,162,51,0.55); align-self: center; }
.ty-amount { font-family: "PressStart2P", var(--display); font-size: 1.15rem; }
.ty-amount.pos { color: var(--up); }
.ty-amount.neg { color: var(--accent); }
.ty-gp { font-family: "PressStart2P", var(--display); font-size: 0.42rem; color: var(--ink-dim); }
.ty-vent { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 6px 2px; }
.ty-vname { font-family: var(--display); font-size: 0.78rem; color: var(--ink); }
.ty-vnet { font-family: var(--display); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.ty-vnet.pos { color: var(--up); }
.ty-vnet.neg { color: var(--accent); }

/* --- QUEST LOG tracker --- */
.quest-hud { margin: 14px 0 18px; }
.quest-strip { display: flex; gap: 26px; flex-wrap: wrap; }
.q-cell { display: flex; flex-direction: column; gap: 6px; }
.q-num { font-family: "PressStart2P", var(--display); font-size: 1.05rem; color: var(--ink); }
.q-num.alert { color: var(--accent); text-shadow: 0 0 6px rgba(193,18,28,0.5); }
.q-num.ok { color: var(--up); }
.q-lbl { font-family: "PressStart2P", var(--display); font-size: 0.4rem; color: var(--ink-dim); }

/* --- remaining-tab mini HUDs --- */
.mini-hud { margin: 0 0 20px; }

/* --- Home top XP bar --- */
#home-xpbar { display: flex; align-items: center; gap: 12px; border: 2px solid var(--line); background: var(--surface); box-shadow: 3px 3px 0 rgba(23,21,15,0.28); padding: 10px 14px; margin-bottom: 16px; }
#home-xpbar.hidden { display: none; }
.xp-lv { font-family: "PressStart2P", var(--display); font-size: 0.72rem; color: var(--accent); white-space: nowrap; }
.xp-track { display: flex; gap: 2px; flex: 1; }
.xseg { flex: 1; height: 12px; border: 1px solid var(--line); }
.xseg.on { background: var(--accent); box-shadow: 0 0 4px rgba(193,18,28,0.5); }
.xseg.off { background: transparent; }
.xp-total { font-family: var(--display); font-size: 0.74rem; color: var(--ink-dim); white-space: nowrap; }
.xp-pips { display: flex; gap: 4px; }
.xp-pip { width: 8px; height: 8px; border: 1px solid var(--line); }
.xp-pip.on { background: var(--up); box-shadow: 0 0 4px rgba(95,125,40,0.6); }
/* --- GB TOWN: Game Boy screen frame for the HQ canvas --- */
#hq-canvas { background: #9bbc0f !important; border: 6px solid #3a3a39 !important; box-shadow: 4px 4px 0 rgba(23,21,15,0.35); border-radius: 0; }

/* === PIJIN BOY device === */
.gb-device { position: fixed; right: 20px; bottom: 20px; width: 296px; z-index: 9999; background: #c9c7c3; border: 2px solid #3a3a39; border-radius: 12px 12px 46px 12px; box-shadow: 5px 5px 0 rgba(23,21,15,0.4); padding: 8px 14px 16px; font-family: "PressStart2P", var(--display), monospace; }
.gb-device.hidden { display: none; }
.gb-top { display: flex; justify-content: space-between; align-items: center; cursor: move; padding: 2px 0 6px; }
.gb-brand { font-size: 0.5rem; color: #3a3a39; }
.gb-close { background: none; border: none; color: #3a3a39; font-size: 0.9rem; cursor: pointer; line-height: 1; padding: 0 4px; }
.gb-screenframe { background: #55534d; border-radius: 8px 8px 22px 8px; padding: 14px 20px 18px; position: relative; }
.gb-power { position: absolute; left: 9px; top: 30px; width: 6px; height: 6px; border-radius: 50%; background: #c1121c; box-shadow: 0 0 5px #c1121c; }
.gb-slabel { display: block; text-align: center; font-size: 0.3rem; color: #8bac0f; letter-spacing: 1px; margin-bottom: 6px; }
#gb-screen { display: block; width: 100%; height: auto; image-rendering: pixelated; border: 2px solid #0f380f; background: #9bbc0f; }
.gb-lv { position: absolute; right: 24px; top: 40px; font-size: 0.38rem; color: #9bbc0f; background: #0f380f; padding: 2px 4px; }
.gb-wordmark { text-align: center; font-size: 0.55rem; color: #c1121c; margin: 9px 0 11px; font-style: italic; }
.gb-controls { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.gb-dpad { position: relative; width: 66px; height: 66px; }
.gb-d { position: absolute; width: 22px; height: 22px; background: #2b2620; border: none; cursor: pointer; padding: 0; }
.gb-d:active { background: #000; }
.gb-up { left: 22px; top: 0; } .gb-down { left: 22px; bottom: 0; } .gb-left { left: 0; top: 22px; } .gb-right { right: 0; top: 22px; }
.gb-dc { position: absolute; left: 22px; top: 22px; width: 22px; height: 22px; background: #2b2620; }
.gb-ab { display: flex; gap: 12px; transform: rotate(-18deg); }
.gb-btn { width: 34px; height: 34px; border-radius: 50%; background: #c1121c; border: 2px solid #7a0c13; color: #faf6e0; font-size: 0.5rem; cursor: pointer; padding: 0; }
.gb-btn:active { background: #7a0c13; }
.gb-startsel { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.gb-ss { background: #8a8578; border: none; color: #2b2620; font-size: 0.32rem; padding: 4px 10px; border-radius: 8px; transform: rotate(-18deg); cursor: pointer; }
.gb-launch { color: var(--accent-bright) !important; font-weight: 700; }
.roost-note { border: 2px solid var(--line); background: var(--surface); box-shadow: 3px 3px 0 rgba(23,21,15,0.28); padding: 18px 20px; font-family: var(--display); font-size: 0.92rem; line-height: 1.6; max-width: 540px; }
#roost-open { margin-top: 6px; }

/* === LVLUP handheld — custom look (deliberately not a Game Boy clone) === */
.gb-device { background: #3a3a39; border-color: #14130f; border-radius: 16px; }
.gb-brand { color: #d6d3c8; letter-spacing: 2px; }
.gb-close { color: #d6d3c8; }
.gb-screenframe { background: #72706f; border-radius: 8px; }
#gb-screen { background: #d6d3c8; border-color: #14130f; }
.gb-slabel { color: #d6d3c8; opacity: 0.65; }
.gb-lv { color: #d6d3c8; background: #14130f; }
.gb-wordmark { color: var(--accent); font-style: normal; letter-spacing: 3px; font-size: 0.6rem; }
.gb-startsel .gb-ss { background: #55534d; color: #d6d3c8; }

/* === LVLUP handheld — skinnable (skins set --gb-* vars) === */
.gb-device { background: var(--gb-body, #3a3a39); border-color: #14130f; position: fixed; }
.gb-brand, .gb-close, .gb-slabel { color: var(--gb-text, #d6d3c8); }
.gb-lv { color: var(--gb-text, #d6d3c8); background: rgba(0,0,0,0.55); }
.gb-screenframe { background: var(--gb-bezel, #72706f); }
#gb-screen { background: var(--gb-screenbg, #d6d3c8); }
.gb-wordmark { color: var(--gb-accent, #c1121c); }
.gb-btn { background: var(--gb-accent, #c1121c); border-color: var(--gb-accent2, #7a0c13); }
.gb-btn:active { background: var(--gb-accent2, #7a0c13); }
.gb-d, .gb-dc { background: var(--gb-dpad, #2b2620); }
.gb-startsel .gb-ss { background: var(--gb-body2, #55534d); color: var(--gb-text, #d6d3c8); }
/* clear / translucent skins reveal the guts */
.gb-guts { position: absolute; inset: 0; z-index: 0; border-radius: 16px; overflow: hidden; display: none; pointer-events: none;
  background: #123a10;
  background-image: repeating-linear-gradient(0deg, transparent 0 8px, rgba(130,210,90,0.22) 8px 9px), repeating-linear-gradient(90deg, transparent 0 8px, rgba(130,210,90,0.22) 8px 9px); }
.gb-device.clear .gb-guts { display: block; }
.gb-guts::before { content: ""; position: absolute; left: 18px; top: 132px; width: 58px; height: 40px; background: #0a0a0a; box-shadow: 96px 24px 0 -8px #0a0a0a, 44px 118px 0 -6px #111, 150px 150px 0 -10px #1a1a1a; }
.gb-guts::after { content: ""; position: absolute; right: 22px; bottom: 88px; width: 30px; height: 18px; background: #caa23a; box-shadow: -64px 28px 0 0 #caa23a, 10px -54px 0 -3px #caa23a, -120px -34px 0 -2px #caa23a; }
.gb-top, .gb-screenframe, .gb-wordmark, .gb-controls, .gb-startsel, .gb-skins { position: relative; z-index: 1; }
/* skin picker */
.gb-skins { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.gb-swatch { width: 16px; height: 22px; border: 2px solid #14130f; border-radius: 3px 3px 6px 3px; cursor: pointer; padding: 0; }
.gb-swatch.sel { outline: 2px solid #fff; outline-offset: 1px; }

/* === mini Game Boy nav launcher === */
.gb-launch { background: none !important; border: none !important; cursor: pointer; padding: 8px 0 !important; display: flex !important; justify-content: center; width: 100%; }
.gbi { position: relative; width: 30px; height: 44px; background: #c9c7c3; border: 2px solid #14130f; border-radius: 5px 5px 13px 5px; display: block; transition: transform .1s; }
.gbi-screen { position: absolute; left: 5px; top: 5px; width: 20px; height: 15px; background: #9bbc0f; border: 1px solid #0f380f; }
.gbi-dpad { position: absolute; left: 8px; bottom: 9px; width: 4px; height: 4px; background: #2b2620; box-shadow: 4px 0 0 0 #2b2620, -4px 0 0 0 #2b2620, 0 4px 0 0 #2b2620, 0 -4px 0 0 #2b2620; }
.gbi-a, .gbi-b { position: absolute; bottom: 11px; width: 4px; height: 4px; border-radius: 50%; background: #c1121c; }
.gbi-a { right: 6px; } .gbi-b { right: 12px; }
.gb-launch:hover .gbi { transform: translateY(-2px); box-shadow: 2px 2px 0 rgba(0,0,0,0.35); }
/* device pops dead-center of the screen */
.gb-device.gb-centered { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }

/* === LVLUP on-screen menus (SELECT/START) + speaker === */
.gb-menu { position: absolute; inset: 6px; z-index: 5; background: rgba(18,20,14,0.94); color: #e6e2d0; padding: 9px 10px; overflow: auto; font-family: "PressStart2P", monospace; border: 2px solid #e6e2d0; }
.gb-menu.hidden { display: none; }
.gm-title { color: var(--accent, #c1121c); font-size: 0.6rem; margin-bottom: 8px; }
.gm-sec { font-size: 0.38rem; opacity: 0.7; margin: 9px 0 5px; }
.gm-row { display: flex; gap: 5px; flex-wrap: wrap; }
.gm-scr { font-size: 0.4rem; padding: 4px 6px; border: 1px solid #e6e2d0; background: none; color: #e6e2d0; cursor: pointer; font-family: inherit; }
.gm-scr.sel { background: var(--accent, #c1121c); border-color: var(--accent, #c1121c); color: #fff; }
.gm-sw { width: 16px; height: 22px; border: 2px solid #14130f; border-radius: 3px 3px 5px 3px; cursor: pointer; padding: 0; }
.gm-sw.sel { outline: 2px solid #fff; outline-offset: 1px; }
.gm-close, .gm-item { display: block; width: 100%; text-align: left; background: none; border: none; color: #e6e2d0; font-family: inherit; font-size: 0.44rem; padding: 8px 2px; cursor: pointer; }
.gm-item:hover, .gm-close:hover { color: var(--accent, #c1121c); }
.gm-close { margin-top: 10px; border-top: 1px solid #4a4a40; }
.gb-speaker { position: absolute; right: 16px; bottom: 13px; width: 30px; height: 22px; z-index: 1; pointer-events: none; transform: rotate(-22deg); opacity: 0.5; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.55) 0 2px, transparent 2px 5px); }

/* === LVLUP device v3: bigger + in-game menu + real internals === */
.gb-device { width: 322px; padding-bottom: 20px; }
.gb-screenframe { padding-bottom: 22px; }
.gb-wordmark { margin: 12px 0 14px; }
/* menu = in-game GB dialog box at the BOTTOM (game stays visible above -> live screen preview) */
.gb-menu { position: absolute; left: 7px; right: 7px; bottom: 7px; top: auto; max-height: 56%; overflow: auto; background: #e9e7d2; color: #1c1c14; border: 3px solid #1c1c14; padding: 8px 10px; z-index: 6; }
.gm-title { color: #1c1c14; font-size: 0.55rem; margin-bottom: 6px; }
.gm-sec { color: #5a5a48; opacity: 1; font-size: 0.36rem; margin: 8px 0 4px; }
.gm-scr { border: 1px solid #1c1c14; color: #1c1c14; background: none; }
.gm-scr.sel { background: #1c1c14; color: #e9e7d2; border-color: #1c1c14; }
.gm-sw { border-color: #1c1c14; }
.gm-sw.sel { outline: 2px solid #1c1c14; }
.gm-item, .gm-close { color: #1c1c14; border: none; }
.gm-item:hover, .gm-close:hover { color: #c1121c; }
.gm-close { margin-top: 8px; border-top: 1px solid #a8a690; }
.gm-note { font-size: 0.4rem; color: #7a2a26; padding: 3px 0 5px; line-height: 1.5; }
/* transparent-GB internals: green PCB, gold traces, chips, capacitors, speaker */
.gb-device.clear .gb-screenframe { background: rgba(58,62,48,0.42); }
.gb-guts { background: #1f6a24; }
.gb-guts::before { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: repeating-linear-gradient(0deg, transparent 0 9px, rgba(212,172,60,0.55) 9px 10px), repeating-linear-gradient(90deg, transparent 0 11px, rgba(212,172,60,0.55) 11px 12px); }
.gt-cart { position: absolute; top: 42px; left: 15%; right: 15%; height: 26px; background: #23231f; border: 2px solid #0a0a08; box-shadow: inset 0 0 0 2px #45443c; }
.gt-cpu { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; background: #0b0b0a; border: 1px solid #333; box-shadow: 0 0 0 2px #1f6a24, 0 0 0 3px #0b0b0a; }
.gt-cpu b { position: absolute; inset: 7px; border: 1px solid #2c2c2c; }
.gt-chip { position: absolute; background: #14140f; border: 1px solid #2e2e28; }
.gt-c1 { bottom: 120px; left: 14px; width: 34px; height: 20px; }
.gt-c2 { bottom: 58px; right: 16px; width: 28px; height: 20px; }
.gt-cap { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ededed, #8a8a8a 62%, #4a4a4a); border: 1px solid #2a2a2a; }
.gt-p1 { bottom: 128px; right: 22px; width: 16px; height: 16px; }
.gt-p2 { bottom: 64px; left: 24px; width: 14px; height: 14px; }
.gt-p3 { bottom: 40px; left: 47%; width: 12px; height: 12px; }
.gt-spk2 { position: absolute; bottom: 34px; right: 24px; width: 42px; height: 42px; border-radius: 50%; background: repeating-radial-gradient(circle, #2a2a26 0 2px, #14140f 2px 4px); border: 2px solid #0a0a08; }

/* === LVLUP internals v4: alive board + atomic purple wash === */
.gb-guts { background: #123f18; overflow: hidden; }
/* dense copper trace field: fine grid + diagonals (painted UNDER the components) */
.gb-guts::before { content: ""; position: absolute; inset: 0; opacity: 0.62; background-image:
  repeating-linear-gradient(0deg, transparent 0 6px, rgba(216,178,72,0.55) 6px 7px),
  repeating-linear-gradient(90deg, transparent 0 8px, rgba(216,178,72,0.55) 8px 9px),
  repeating-linear-gradient(45deg, transparent 0 15px, rgba(120,210,150,0.16) 15px 16px),
  repeating-linear-gradient(-45deg, transparent 0 19px, rgba(120,210,150,0.12) 19px 20px); }
/* ATOMIC PURPLE: translucent violet laid OVER the whole board (painted after components) */
.gb-device.atomic .gb-guts::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 100% at 50% 30%, rgba(168,86,232,0.28), rgba(120,44,190,0.42)); mix-blend-mode: screen; }
.gb-device.atomic .gb-screenframe { background: rgba(96,44,150,0.40); }
/* components */
.gt-cart { position: absolute; top: 40px; left: 15%; right: 15%; height: 24px; background: #23231f; border: 2px solid #0a0a08; box-shadow: inset 0 0 0 2px #45443c; }
.gt-cpu { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; background: #0b0b0a; border: 1px solid #333; box-shadow: 0 0 0 2px #123f18, 0 0 0 3px #0b0b0a; }
.gt-cpu b { position: absolute; inset: 6px; border: 1px solid #2c2c2c; }
.gt-cpu em { position: absolute; inset: 12px; border-radius: 2px; background: radial-gradient(circle, rgba(130,255,190,0.55), transparent 70%); animation: gtpulse 2.1s ease-in-out infinite; }
.gt-chip { position: absolute; background: #14140f; border: 1px solid #2e2e28; box-shadow: inset 0 0 0 1px #24241e; }
.gt-c1 { bottom: 120px; left: 16px; width: 34px; height: 20px; }
.gt-c2 { bottom: 54px; right: 18px; width: 30px; height: 22px; }
.gt-c3 { top: 118px; right: 20px; width: 26px; height: 18px; }
.gt-cap { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efefef, #8a8a8a 60%, #454545); border: 1px solid #2a2a2a; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.5); }
.gt-p1 { bottom: 126px; right: 24px; width: 17px; height: 17px; }
.gt-p2 { bottom: 60px; left: 26px; width: 15px; height: 15px; }
.gt-p3 { bottom: 38px; left: 47%; width: 12px; height: 12px; }
.gt-p4 { top: 150px; left: 22px; width: 13px; height: 13px; }
.gt-res { position: absolute; height: 6px; width: 17px; border-radius: 2px; background: linear-gradient(90deg,#caa46a 0 18%,#6a3a1a 18% 30%,#caa46a 30% 46%,#1a4a7a 46% 60%,#caa46a 60%); }
.gt-r1 { bottom: 150px; left: 46%; }
.gt-r2 { top: 96px; left: 24px; }
.gt-r3 { bottom: 96px; right: 26px; }
.gt-xtal { position: absolute; bottom: 78px; left: 22px; width: 24px; height: 11px; background: linear-gradient(#cfcfcf,#8a8a8a); border: 1px solid #3a3a3a; border-radius: 5px; box-shadow: inset 0 1px 0 #fff; }
.gt-spk2 { position: absolute; bottom: 30px; right: 26px; width: 42px; height: 42px; border-radius: 50%; background: repeating-radial-gradient(circle, #2a2a26 0 2px, #12120e 2px 4px); border: 2px solid #0a0a08; }
/* ALIVE: power streaming through the traces */
.gt-flow { position: absolute; z-index: 2; background: linear-gradient(90deg, transparent, rgba(130,255,190,0.95) 45% 55%, transparent); background-size: 34% 100%; background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(130,255,190,0.8)); }
.gt-flow.gt-fv { background: linear-gradient(180deg, transparent, rgba(130,255,190,0.95) 45% 55%, transparent); background-size: 100% 34%; }
.gt-f1 { left: 8%; right: 8%; top: 33%; height: 2px; animation: gtflowx 2.4s linear infinite; }
.gt-f2 { left: 12%; right: 20%; bottom: 44%; height: 2px; animation: gtflowx 3.1s linear infinite 0.6s; }
.gt-f3 { top: 20%; bottom: 30%; left: 26%; width: 2px; animation: gtflowy 2.8s linear infinite 0.3s; }
.gt-f4 { top: 30%; bottom: 22%; right: 30%; width: 2px; animation: gtflowy 3.4s linear infinite 1s; }
.gt-node { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #b6ffdb; box-shadow: 0 0 7px 2px rgba(130,255,190,0.9); animation: gtpulse 1.6s ease-in-out infinite; }
.gt-n1 { top: 33%; left: 26%; }
.gt-n2 { bottom: 44%; right: 30%; animation-delay: 0.5s; }
.gt-n3 { bottom: 80px; left: 50%; animation-delay: 0.9s; }
.gt-n4 { top: 118px; right: 33px; animation-delay: 1.3s; }
@keyframes gtflowx { 0% { background-position: -34% 0; } 100% { background-position: 134% 0; } }
@keyframes gtflowy { 0% { background-position: 0 -34%; } 100% { background-position: 0 134%; } }
@keyframes gtpulse { 0%,100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.3); } }

/* === stat-tile row = steel blue (was inheriting NES button-red) === */
.stat-tile { background: #2f6bd0; border: none; border-right: 2px solid #1a4590; color: #eaf1ff; }
.stat-tile-row { border-color: #1a4590; }
.stat-tile:hover { background: #3f7be0; border-color: #1a4590; }
.stat-tile .stat-label { color: #cdddfa; }
.stat-tile .stat-value { color: #ffffff; }
.stat-tile .stat-meta { color: #b9c8ea; }
.stat-tile.ok .stat-value { color: #bdeecb; }
.stat-tile.alert .stat-value, .stat-tile.alert .stat-meta { color: #ffd98a; }
.stat-tile.warn .stat-value, .stat-tile.warn .stat-meta { color: #ffe0a3; }

/* === LVLUP device v5: true transparency + live nav mini === */
/* wipe the old opaque board / traveling lights / atomic wash */
.gb-guts { display: none; background: transparent !important; overflow: visible; }
.gb-guts::before, .gb-guts::after { content: none !important; background: none !important; }
.gb-device.clear .gb-guts, .gb-device.atomic .gb-guts { display: block; position: absolute; inset: 0; z-index: 0; }
/* SEE-THROUGH: translucent shell (body alpha is set inline per-shell); screen housing only faintly tinted */
.gb-device.clear .gb-screenframe, .gb-device.atomic .gb-screenframe { background: rgba(116,120,112,0.30); box-shadow: inset 0 0 0 2px rgba(20,20,16,0.35); }
.gb-device.clear, .gb-device.atomic { box-shadow: 0 10px 34px rgba(0,0,0,0.34); border-color: rgba(255,255,255,0.28); }
/* the game canvas stays opaque (that's the device's own screen) */
.gb-device.clear #gb-screen, .gb-device.atomic #gb-screen { background: #1c1a17; }
/* real circuit board, lower half, under the controls */
.gt-board { position: absolute; left: 11px; right: 11px; bottom: 11px; height: 47%; border-radius: 7px 7px 15px 15px;
  background: linear-gradient(158deg, rgba(40,108,54,0.60), rgba(22,74,36,0.66));
  background-image: repeating-linear-gradient(0deg, transparent 0 7px, rgba(216,178,80,0.26) 7px 8px), repeating-linear-gradient(90deg, transparent 0 9px, rgba(216,178,80,0.26) 9px 10px);
  box-shadow: inset 0 0 0 1px rgba(10,40,18,0.55); }
.gt-ribbon { position: absolute; left: 24%; right: 24%; top: 45%; height: 15px; z-index: 1; opacity: 0.9;
  background: repeating-linear-gradient(90deg, #b09858 0 2px, #cdb87e 2px 4px); border: 1px solid #7a6a3a; border-radius: 2px; }
.gt-board .gt-chip { position: absolute; background: #131310; border: 1px solid #2e2e28; box-shadow: inset 0 0 0 1px #23231d; }
.gt-c1 { top: 13px; left: 12px; width: 30px; height: 20px; }
.gt-c2 { top: 40px; right: 15px; width: 26px; height: 20px; }
.gt-c3 { bottom: 42px; left: 20px; width: 22px; height: 16px; }
.gt-board .gt-cap { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efefef, #8a8a8a 60%, #454545); border: 1px solid #2a2a2a; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.5); }
.gt-p1 { top: 15px; right: 20px; width: 15px; height: 15px; }
.gt-p2 { bottom: 48px; right: 34px; width: 13px; height: 13px; }
.gt-p3 { top: 48px; left: 46%; width: 12px; height: 12px; }
.gt-xtal { position: absolute; top: 16px; left: 47px; width: 22px; height: 10px; background: linear-gradient(#cfcfcf,#8a8a8a); border: 1px solid #3a3a3a; border-radius: 5px; box-shadow: inset 0 1px 0 #fff; }
.gt-spk2 { position: absolute; bottom: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: repeating-radial-gradient(circle, #2b2b27 0 2px, #111 2px 4px); border: 2px solid rgba(10,10,8,0.75); box-shadow: 0 0 0 2px rgba(255,255,255,0.06); }
.gt-pins { position: absolute; left: 13px; right: 13px; bottom: 3px; height: 7px; opacity: 0.8; background: repeating-linear-gradient(90deg, #caa24a 0 5px, transparent 5px 9px); }
/* === nav launcher: LIVE mini device === */
.gb-launch { display: flex; justify-content: center; width: 100%; padding: 8px 0 4px; background: none; border: none; cursor: pointer; }
.gb-launch:hover { background: none; }
.gb-mini { position: relative; width: 96px; padding: 7px 7px 9px; border-radius: 9px 9px 17px 9px;
  background: linear-gradient(158deg, #47463f, #2b2620); border: 1px solid #14130f;
  box-shadow: 0 2px 0 rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.09); transition: transform 120ms ease, box-shadow 120ms ease; }
.gb-launch:hover .gb-mini { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); }
.gb-launch.is-open .gb-mini { box-shadow: 0 0 0 2px var(--accent), 0 2px 0 rgba(0,0,0,0.45); }
.gbm-screenframe { display: block; background: #23271f; border-radius: 4px 4px 8px 4px; padding: 5px 6px 6px; box-shadow: inset 0 0 0 2px #12110d; }
#gb-mini-screen { display: block; width: 100%; height: auto; image-rendering: pixelated; background: #9bbc0f; border-radius: 2px; }
.gbm-controls { display: flex; align-items: center; justify-content: space-between; margin: 6px 4px 0; }
.gbm-dpad { position: relative; width: 17px; height: 17px; }
.gbm-dpad::before, .gbm-dpad::after { content: ""; position: absolute; background: #1a1815; border-radius: 1px; }
.gbm-dpad::before { left: 6px; top: 0; width: 5px; height: 17px; }
.gbm-dpad::after { top: 6px; left: 0; width: 17px; height: 5px; }
.gbm-ab { display: flex; gap: 4px; transform: rotate(-18deg); }
.gbm-ab i { width: 9px; height: 9px; border-radius: 50%; background: #c1121c; box-shadow: inset 0 -1px 1px rgba(0,0,0,0.45); }
.gbm-ss { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.gbm-ss i { width: 13px; height: 4px; border-radius: 3px; background: #6f6e6b; transform: rotate(-18deg); }
.gbm-hint { display: block; text-align: center; font-family: "PressStart2P", monospace; font-size: 0.36rem; letter-spacing: 1px; color: #cfcdc8; margin-top: 6px; }
.gb-launch.is-open .gbm-hint { color: var(--accent); }
.gb-launch.is-open .gbm-hint::after { content: ""; }

/* === more life: palette-diversified meters (red now reserved for alerts) === */
/* daily habit / kaizen tracker: a checked box = GREEN done, not red */
.habit-cell.on { background: #57923f; border-color: #3f6f2c; box-shadow: 0 0 7px 1px rgba(87,146,63,0.55); }
.habit-cell.on:hover { box-shadow: 0 0 9px 2px rgba(87,146,63,0.78); }
/* protein / intake in progress = amber (goal-met still turns green via .met) */
.pseg.on { background: #c9922e; box-shadow: 0 0 5px rgba(201,146,46,0.5); }
.nes-bar.on { background: #c9922e; }
/* momentum streak combo = ember warmth */
.combo-seg.on { background: #d2691e; box-shadow: 0 0 4px rgba(210,105,30,0.5); }
/* XP segments = indigo (from the periwinkle/indigo palette) */
.xseg.on { background: #6a5fb0; box-shadow: 0 0 5px rgba(106,95,176,0.55); }

/* === LVLUP device v6: real visible circuit board + contact pads === */
/* board fills the lower body and reads as an actual PCB (was too faint/small) */
.gb-device.clear .gt-board, .gb-device.atomic .gt-board {
  position: absolute; left: 10px; right: 10px; top: 39%; bottom: 9px; z-index: 0; border-radius: 6px 6px 15px 15px;
  background: linear-gradient(158deg, #216a2c, #164a24);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(220,182,84,0.42) 6px 7px),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(220,182,84,0.42) 8px 9px),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(150,210,160,0.2) 16px 17px);
  box-shadow: inset 0 0 0 1px rgba(10,40,18,0.6), inset 0 0 22px rgba(0,0,0,0.4); }
.gt-board { display: block; }
/* ribbon cable connecting the screen board to the main board */
.gt-ribbon { position: absolute; left: 22%; right: 22%; top: 37%; height: 15px; z-index: 1; opacity: 0.95;
  background: repeating-linear-gradient(90deg, #a8905060 0 2px, #cdb87e 2px 4px); border: 1px solid #7a6a3a; border-radius: 2px;
  background-color: #b8a266; }
/* big CPU chip */
.gt-cpu { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; z-index: 1;
  background: #0c0c0b; border: 1px solid #333; box-shadow: inset 0 0 0 4px #16160f, 0 0 0 2px #216a2c, 0 0 0 3px #0c0c0b; }
/* chips */
.gt-board .gt-chip { position: absolute; z-index: 1; background: #131310; border: 1px solid #2e2e28; box-shadow: inset 0 0 0 1px #23231d; }
.gt-c1 { top: 10%; left: 8px; width: 30px; height: 20px; }
.gt-c2 { top: 18%; right: 10px; width: 26px; height: 20px; }
.gt-c3 { bottom: 30%; left: 12px; width: 24px; height: 16px; }
/* capacitors */
.gt-board .gt-cap { position: absolute; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efefef, #8a8a8a 60%, #454545); border: 1px solid #2a2a2a; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.5); }
.gt-p1 { top: 12%; right: 42px; width: 16px; height: 16px; }
.gt-p2 { bottom: 34%; right: 22px; width: 14px; height: 14px; }
.gt-p3 { top: 44%; left: 40%; width: 13px; height: 13px; }
.gt-xtal { position: absolute; z-index: 1; top: 14%; left: 44px; width: 24px; height: 11px; background: linear-gradient(#cfcfcf,#8a8a8a); border: 1px solid #3a3a3a; border-radius: 5px; box-shadow: inset 0 1px 0 #fff; }
.gt-spk2 { position: absolute; z-index: 1; bottom: 10px; right: 10px; width: 46px; height: 46px; border-radius: 50%; background: repeating-radial-gradient(circle, #2c2c28 0 2px, #111 2px 4px); border: 2px solid rgba(10,10,8,0.8); box-shadow: 0 0 0 2px rgba(255,255,255,0.07); }
.gt-pins { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 3px; height: 8px; opacity: 0.85; background: repeating-linear-gradient(90deg, #caa24a 0 5px, transparent 5px 9px); }

/* === SIGNATURE: circular contact pads behind the controls (only on clear/atomic) === */
.gb-device.clear .gb-d, .gb-device.atomic .gb-d { z-index: 2; }
.gb-device.clear .gb-btn, .gb-device.atomic .gb-btn { position: relative; z-index: 2; }
.gb-device.clear .gb-ss, .gb-device.atomic .gb-ss { position: relative; z-index: 2; }
/* D-pad round contact area */
.gb-device.clear .gb-dpad::before, .gb-device.atomic .gb-dpad::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90px; height: 90px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(28,90,48,0.72) 30%, rgba(40,110,60,0.6) 46%, rgba(220,182,84,0.6) 58% 65%, rgba(28,90,48,0.35) 67%, transparent 72%); }
/* A / B round contact rings */
.gb-device.clear .gb-btn::before, .gb-device.atomic .gb-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(28,90,48,0.7) 40%, rgba(40,110,60,0.6) 50%, rgba(220,182,84,0.65) 60% 66%, transparent 70%); }
/* SELECT / START oval contact pads */
.gb-device.clear .gb-ss::before, .gb-device.atomic .gb-ss::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 165%; height: 260%; border-radius: 45%; z-index: -1;
  background: radial-gradient(ellipse, rgba(28,90,48,0.6) 42%, rgba(220,182,84,0.55) 60% 68%, transparent 72%); }
/* FIX: start/select pills went invisible on the translucent shell -> force solid grey (like the photo) */
.gb-device.clear .gb-startsel .gb-ss, .gb-device.atomic .gb-startsel .gb-ss { background: #8f8b7e; color: #211f1a; box-shadow: 0 1px 0 rgba(0,0,0,0.35); }

/* === LVLUP device v7: SOLID internals (only the shell is transparent) === */
/* SOLID green PCB - no alpha, app does NOT show through it */
.gb-device.clear .gt-board, .gb-device.atomic .gt-board {
  position: absolute; left: 9px; right: 9px; top: 37%; bottom: 8px; z-index: 0; border-radius: 6px 6px 15px 15px;
  background-color: #1f6a29;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(226,188,92,0.55) 6px 7px),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(226,188,92,0.55) 8px 9px),
    repeating-linear-gradient(45deg, transparent 0 15px, rgba(150,210,160,0.24) 15px 16px);
  box-shadow: inset 0 0 0 2px #0e3a1a, inset 0 0 26px rgba(0,0,0,0.45); }
/* SOLID grey screen housing (like the photo) */
.gb-device.clear .gb-screenframe, .gb-device.atomic .gb-screenframe { background: #6b6a64; box-shadow: inset 0 0 0 2px #2a2925; }
.gb-device.atomic .gb-screenframe { background: #67626f; }
/* SOLID ribbon cable */
.gt-ribbon { position: absolute; left: 21%; right: 21%; top: 35.5%; height: 15px; z-index: 1; opacity: 1;
  background-color: #bfa871; background-image: repeating-linear-gradient(90deg, #8f7a44 0 2px, #d3bd83 2px 4px); border: 1px solid #6f5f34; border-radius: 2px; }
/* SOLID CPU */
.gt-cpu { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; z-index: 1;
  background-color: #0c0c0b; border: 1px solid #333; box-shadow: inset 0 0 0 5px #17170f, 0 0 0 2px #1f6a29, 0 0 0 3px #0c0c0b; }
/* SOLID chips */
.gt-board .gt-chip { position: absolute; z-index: 1; background-color: #121210; border: 1px solid #2e2e28; box-shadow: inset 0 0 0 1px #24241d; }
.gt-c1 { top: 9%; left: 8px; width: 32px; height: 22px; }
.gt-c2 { top: 17%; right: 9px; width: 28px; height: 22px; }
.gt-c3 { bottom: 30%; left: 11px; width: 26px; height: 17px; }
/* SOLID capacitors */
.gt-board .gt-cap { position: absolute; z-index: 1; border-radius: 50%; background-color: #b8b8b8; background-image: radial-gradient(circle at 35% 30%, #f2f2f2, #8a8a8a 60%, #454545); border: 1px solid #2a2a2a; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.5); }
.gt-p1 { top: 11%; right: 44px; width: 17px; height: 17px; }
.gt-p2 { bottom: 33%; right: 20px; width: 15px; height: 15px; }
.gt-p3 { top: 43%; left: 39%; width: 14px; height: 14px; }
.gt-xtal { position: absolute; z-index: 1; top: 13%; left: 44px; width: 26px; height: 12px; background-color: #b6b6b6; background-image: linear-gradient(#d2d2d2,#8a8a8a); border: 1px solid #3a3a3a; border-radius: 6px; box-shadow: inset 0 1px 0 #fff; }
/* SOLID speaker */
.gt-spk2 { position: absolute; z-index: 1; bottom: 9px; right: 9px; width: 48px; height: 48px; border-radius: 50%; background-color: #1a1a17; background-image: repeating-radial-gradient(circle, #2f2f2a 0 2px, #101010 2px 4px); border: 2px solid #080806; box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
/* SOLID gold contact fingers */
.gt-pins { position: absolute; z-index: 1; left: 11px; right: 11px; bottom: 3px; height: 9px; opacity: 1; background-color: #1f6a29; background-image: repeating-linear-gradient(90deg, #d0aa4e 0 5px, #1a5322 5px 9px); }

/* === SOLID circular contact pads the buttons SIT ON (connected to the board) === */
.gb-device.clear .gb-d, .gb-device.atomic .gb-d { z-index: 2; }
.gb-device.clear .gb-btn, .gb-device.atomic .gb-btn { position: relative; z-index: 2; }
.gb-device.clear .gb-startsel .gb-ss, .gb-device.atomic .gb-startsel .gb-ss { position: relative; z-index: 2; background: #8f8b7e; color: #211f1a; box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
/* D-pad pad */
.gb-device.clear .gb-dpad::before, .gb-device.atomic .gb-dpad::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 94px; height: 94px; border-radius: 50%; z-index: 0;
  background-image: radial-gradient(circle, #163f28 0 44%, #0d3420 45% 54%, #b4923e 55% 60%, #143f28 61% 70%, #1f6a29 71%); }
/* A / B pads */
.gb-device.clear .gb-btn::before, .gb-device.atomic .gb-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; z-index: -1;
  background-image: radial-gradient(circle, #163f28 0 40%, #0d3420 41% 50%, #b4923e 52% 58%, #1f6a29 62%); }
/* SELECT / START pads */
.gb-device.clear .gb-ss::before, .gb-device.atomic .gb-ss::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 175%; height: 275%; border-radius: 45%; z-index: -1;
  background-image: radial-gradient(ellipse, #163f28 0 44%, #b4923e 58% 66%, #1f6a29 70%); }

/* === LVLUP device v8: photo-accurate internals (SVG board + in-container membranes) === */
/* kill every previous internals attempt */
.gb-device .gt-board, .gb-device .gt-ribbon, .gb-device .gt-cpu, .gb-device .gt-chip,
.gb-device .gt-cap, .gb-device .gt-xtal, .gb-device .gt-spk2, .gb-device .gt-pins { display: none !important; }
.gb-device.clear .gb-dpad::before, .gb-device.atomic .gb-dpad::before,
.gb-device.clear .gb-btn::before, .gb-device.atomic .gb-btn::before,
.gb-device.clear .gb-ss::before, .gb-device.atomic .gb-ss::before { content: none !important; }
/* the drawn board: fills the body below the screen, only on clear/atomic */
.gt-main { display: none; }
.gb-device.clear .gt-main, .gb-device.atomic .gt-main { display: block; position: absolute; left: 8px; right: 8px; top: 61%; bottom: 8px; width: calc(100% - 16px); height: 39%; }
.gb-device.clear .gb-guts, .gb-device.atomic .gb-guts { display: block; position: absolute; inset: 0; z-index: 0; }
/* controls sit ABOVE their membranes */
.gb-device .gb-d, .gb-device .gb-dc { z-index: 2; }
.gb-device .gb-btn { position: relative; z-index: 2; }
.gb-device .gb-ss { position: relative; z-index: 2; }
.gb-device .gb-ab { position: relative; }
.gb-device .gb-startsel { position: relative; }
/* membranes hidden on solid shells */
.gt-mem, .gt-abwell, .gt-sspcb { display: none; }
/* D-pad: pale mint circular membrane well, mounted with a dark-green + gold ring (photo) */
.gb-device.clear .gt-mem, .gb-device.atomic .gt-mem { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 96px; height: 96px; border-radius: 50%; z-index: 0;
  background:
    radial-gradient(circle at 50% 13%, #c9a441 0 4px, transparent 5px),
    radial-gradient(circle at 50% 87%, #c9a441 0 4px, transparent 5px),
    radial-gradient(circle at 13% 50%, #c9a441 0 4px, transparent 5px),
    radial-gradient(circle at 87% 50%, #c9a441 0 4px, transparent 5px),
    radial-gradient(circle, #dcefe3 0 55%, #bcd9c8 56% 78%, #a3c6b1 79%);
  border: 2px solid #7fa78e;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.18), 0 0 0 3px #1f5a2c, 0 0 0 6px rgba(201,164,65,0.4); }
/* A/B: cream bracket with dark wells the buttons sit in (photo), mounted on the board */
.gb-device.clear .gt-abwell, .gb-device.atomic .gt-abwell { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 112px; height: 56px; border-radius: 28px; z-index: 0;
  background:
    radial-gradient(circle at 30% 50%, #2c2c28 0 20px, transparent 21px),
    radial-gradient(circle at 70% 50%, #2c2c28 0 20px, transparent 21px),
    linear-gradient(180deg, #efeadb, #d6d0bd);
  border: 2px solid #b5ad97;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), 0 0 0 3px #1f5a2c, 0 0 0 6px rgba(201,164,65,0.35); }
/* SELECT/START: green PCB strip with gold oval contact pads under the pills */
.gb-device.clear .gt-sspcb, .gb-device.atomic .gt-sspcb { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-18deg); width: 152px; height: 36px; border-radius: 8px; z-index: 0;
  background:
    radial-gradient(26px 12px at 28% 50%, #163f28 0 60%, #c9a441 62% 78%, transparent 80%),
    radial-gradient(26px 12px at 72% 50%, #163f28 0 60%, #c9a441 62% 78%, transparent 80%),
    linear-gradient(160deg, #35854a, #256b33);
  border: 2px solid #164722; box-shadow: inset 0 0 6px rgba(0,0,0,0.35); }

/* === LVLUP device v9: merged select/start pads + upper board panel === */
.gb-device .gt-sspcb { display: none !important; }
.gt-topboard { display: none; }
.gb-device.clear .gt-topboard, .gb-device.atomic .gt-topboard { display: block; position: absolute; left: 6px; right: 6px; top: 6px; height: calc(61% - 8px); width: calc(100% - 12px); }

/* === LVLUP device v10: frosted plastic shell (not glass) === */
.gb-device.clear, .gb-device.atomic {
  backdrop-filter: blur(2.5px) saturate(0.92);
  -webkit-backdrop-filter: blur(2.5px) saturate(0.92);
  box-shadow: 0 10px 34px rgba(0,0,0,0.34), inset 0 0 18px rgba(255,255,255,0.16);
  border-color: rgba(238,240,240,0.5);
}

/* === LVLUP device v11: 3D controls + universal grey pills === */
/* SELECT/START: same grey on every shell (JMD likes this grey), slight 3D */
.gb-startsel .gb-ss { background: linear-gradient(180deg, #9b978a, #807c6f); color: #211f1a;
  box-shadow: 0 2px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.35); }
.gb-startsel .gb-ss:active { box-shadow: inset 0 2px 3px rgba(0,0,0,0.5); transform: rotate(-18deg) translateY(1px); }
.gb-device.clear .gb-startsel .gb-ss, .gb-device.atomic .gb-startsel .gb-ss { background: linear-gradient(180deg, #9b978a, #807c6f); color: #211f1a; }
/* D-pad: raised 3D plastic */
.gb-d { background: linear-gradient(145deg, #464643, #232321);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.14), inset -1px -1px 2px rgba(0,0,0,0.4); }
.gb-d:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.65); background: linear-gradient(145deg, #2b2b29, #1c1c1a); }
/* center pivot dimple */
.gb-dc { background: radial-gradient(circle at 50% 40%, #3e3e3b, #1a1a18 68%); border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }
/* indented directional triangles */
.gb-d::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.14)); }
.gb-up::after { transform: translate(-50%,-58%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(0,0,0,0.55); }
.gb-down::after { transform: translate(-50%,-42%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid rgba(0,0,0,0.55); }
.gb-left::after { transform: translate(-58%,-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid rgba(0,0,0,0.55); }
.gb-right::after { transform: translate(-42%,-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid rgba(0,0,0,0.55); }
/* A/B: domed buttons (works with any accent color) */
.gb-btn { background-color: var(--gb-accent, #c1121c);
  background-image: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.32), rgba(255,255,255,0) 48%),
                    radial-gradient(circle at 50% 118%, rgba(0,0,0,0.4), rgba(0,0,0,0) 58%);
  box-shadow: 0 3px 4px rgba(0,0,0,0.45), inset 0 -2px 4px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.2);
  text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.gb-btn:active { transform: translateY(1px);
  background-image: radial-gradient(circle at 35% 34%, rgba(255,255,255,0.15), rgba(255,255,255,0) 48%),
                    radial-gradient(circle at 50% 118%, rgba(0,0,0,0.45), rgba(0,0,0,0) 58%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 2px 4px rgba(0,0,0,0.45); }

/* === LVLUP v12: solid D-pad + CHARACTER screen === */
/* one solid cross: flat plastic, no center circle */
.gb-d, .gb-dc { background: #2e2e2c; box-shadow: none; border-radius: 2px; }
.gb-dc { border-radius: 0; }
.gb-dpad { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45)); }
.gb-d:active { background: #232321; box-shadow: inset 0 2px 3px rgba(0,0,0,0.55); }
/* CHARACTER panel (PLAYER STATS tab) */
.char-panel { background: var(--surface); border: 2px solid var(--line); box-shadow: 3px 3px 0 rgba(23,21,15,0.28); padding: 14px 16px 16px; margin-bottom: 26px; }
.char-head { font-family: "PressStart2P", var(--display); font-size: 0.62rem; color: var(--accent); margin-bottom: 12px; }
.char-sub { font-family: var(--mono, monospace); font-size: 0.68rem; color: var(--ink-dim); margin-left: 10px; text-transform: none; }
.char-body { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.char-stage { background: #7bc86c; border: 2px solid var(--line); padding: 8px; box-shadow: inset 0 0 0 2px #5aa84f; }
#char-canvas { display: block; image-rendering: pixelated; }
.char-slots { display: flex; flex-direction: column; gap: 7px; min-width: 300px; flex: 1; }
.char-slot { display: grid; grid-template-columns: 64px 34px 1fr 34px; align-items: center; gap: 8px; }
.cs-label { font-family: "PressStart2P", var(--display); font-size: 0.5rem; color: var(--ink-faint); }
.cs-val { font-family: "PressStart2P", var(--display); font-size: 0.52rem; color: var(--ink); text-align: center; background: var(--surface-2); border: 1px solid var(--line); padding: 7px 4px; }
.cs-btn { font-size: 0.6rem; padding: 5px 8px; cursor: pointer; }
@media (max-width: 760px) { .char-body { gap: 14px; } .char-slots { min-width: 220px; } }

/* char RANDOM button */
.char-random { margin-top: 10px; font-family: "PressStart2P", var(--display); font-size: 0.52rem; padding: 9px 12px; cursor: pointer; }

/* char rotate row */
.char-rot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.char-view { font-family: "PressStart2P", var(--display); font-size: 0.5rem; color: var(--ink); min-width: 52px; text-align: center; }

/* gb top buttons + XL big-screen mode */
.gb-topbtns { display: flex; gap: 6px; align-items: center; }
.gb-max { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.7rem; padding: 0 2px; }
.gb-device.gb-xl { width: min(620px, 94vw); }
.gb-device.gb-xl .gb-controls { padding: 0 40px; margin-top: 6px; }
.gb-device.gb-xl .gb-startsel { margin-top: 16px; }

/* player profile in START menu */
.gm-prof { display: flex; gap: 12px; align-items: flex-start; }
#gm-avatar { image-rendering: pixelated; background: #7bc86c; border: 2px solid #1c1c14; flex: none; }
.gm-pstats { flex: 1; }
.gm-plvl { font-family: "PressStart2P", monospace; font-size: 0.6rem; color: #a52829; margin-bottom: 6px; }
.gm-prow { display: flex; justify-content: space-between; font-size: 0.42rem; padding: 2px 0; border-bottom: 1px solid rgba(28,28,20,0.15); }
.gm-prow b { color: #a52829; }

/* === LVLUP-VISION: the living-room CRT TV (Floor tab) === */
.crt-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 0 30px; }
.crt-tv { width: min(920px, 96%); background: linear-gradient(165deg, #4a4640, #2b2824); border: 3px solid #17150f;
  border-radius: 18px 18px 12px 12px; padding: 22px 26px 12px; box-shadow: 6px 6px 0 rgba(23,21,15,0.35), inset 0 2px 0 rgba(255,255,255,0.08); position: relative; }
.crt-frame { position: relative; background: #17150f; border-radius: 14px; padding: 14px; box-shadow: inset 0 0 0 3px #0a0908, inset 0 0 26px rgba(0,0,0,0.8); }
#tv-screen { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 10px; background: #1b2a16; }
/* curved-glass sheen over the tube */
.crt-glass { position: absolute; inset: 14px; border-radius: 10px; pointer-events: none;
  background: radial-gradient(130% 105% at 50% 45%, transparent 62%, rgba(0,0,0,0.32) 100%),
              linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 18%, transparent 32%); }
.crt-panel { display: flex; align-items: center; gap: 16px; padding: 12px 6px 6px; }
.crt-badge { font-family: "PressStart2P", var(--display); font-size: 0.5rem; color: #c9c7c3; letter-spacing: 1px; }
.crt-grill { flex: 1; height: 16px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.5) 0 3px, transparent 3px 7px); border-radius: 3px; opacity: 0.8; }
.crt-knob { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid #0a0908;
  background: radial-gradient(circle at 35% 30%, #8a857c, #55524b 60%, #38352f); box-shadow: 0 2px 2px rgba(0,0,0,0.5); position: relative; }
.crt-knob::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 8px; background: #17150f; transform: translateX(-50%); }
.crt-knob:hover { box-shadow: 0 0 0 2px var(--accent), 0 2px 2px rgba(0,0,0,0.5); }
.crt-knob:active::after { transform: translateX(-50%) rotate(40deg); transform-origin: 50% 10px; }
.crt-feet { display: flex; justify-content: space-between; padding: 0 60px; }
.crt-feet i { width: 54px; height: 12px; background: #17150f; border-radius: 0 0 6px 6px; }
.crt-note { font-family: var(--mono, monospace); font-size: 0.78rem; color: var(--ink-dim); text-align: center; line-height: 2; }
.crt-note button { font-size: 0.72rem; padding: 6px 12px; cursor: pointer; }
/* === COMMS v4 LIGHT messenger (pijin cream + NES light) === */
.chat-layout { border: 2px solid var(--line); background: #e9e6df; height: 74vh; }
.chat-sidebar { background: #d4d2cd; border-right: 2px solid var(--line); width: 220px; }
.chat-section { font-family: "PressStart2P", var(--display); font-size: 0.42rem; color: #6f6e6b; letter-spacing: 1px; padding: 12px 12px 5px; }
.chat-soon { font-size: 0.7rem; color: #8a8578; padding: 2px 12px 10px; margin: 0; font-style: italic; }
.chat-thread-item { background: transparent; color: #55524b; border-bottom: none; border-radius: 4px; margin: 2px 6px; padding: 8px 10px; }
.chat-thread-item:hover { background: #dedcd7; color: var(--ink); }
.chat-thread-item.active { background: #faf6e0; color: var(--ink); border-left: 3px solid #2f6bd0; }
.chat-thread-item .avatar { border-radius: 50%; }
.chat-thread-sub { color: #8a8578; }
.chat-unread-dot { background: #2f6bd0; box-shadow: 0 0 4px rgba(47,107,208,0.6); }
.chat-main { background: #e9e6df; }
.chat-main-header { background: #d4d2cd; color: var(--ink); border-bottom: 2px solid var(--line); }
.chat-main-header button { color: #55524b; }
.chat-main-header button:hover { color: var(--ink); }
#chat-main-header-title { color: var(--ink); }
.chat-messages { background: #e9e6df; padding-bottom: 14px; }
/* members panel */
.chat-members { width: 196px; flex-shrink: 0; border-left: 2px solid var(--line); background: #d4d2cd; overflow-y: auto; }
.memrow { display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); padding: 6px 10px; background: none; border: none; cursor: pointer; color: #55524b; border-radius: 4px; margin: 1px 6px; text-align: left; font-family: inherit; }
.memrow:hover { background: #dedcd7; color: var(--ink); }
.memrow.memoff { opacity: 0.55; }
.memrow .mav { width: 26px; height: 26px; font-size: 0.5rem; }
.memname { flex: 1; font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* message rows */
.mrow { display: flex; gap: 10px; padding: 1px 16px; margin-top: 12px; }
.mrow.grp { margin-top: 2px; }
.mrow.me { flex-direction: row-reverse; }
.mav { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 0.58rem; color: #fff; font-weight: 700; box-shadow: 0 0 0 2px rgba(23,21,15,0.25); }
.mav-hide { visibility: hidden; box-shadow: none; }
.mcolm { max-width: 72%; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mrow.me .mcolm { align-items: flex-end; }
.mname { font-size: 0.7rem; color: #1a4590; margin-bottom: 3px; font-weight: 700; }
.mtime { color: #8a8578; font-size: 0.62rem; margin-left: 6px; font-weight: 400; }
.mbubble { position: relative; background: #faf6e0; color: var(--ink); border: 1px solid #b8b4a6; border-radius: 12px 12px 12px 4px; padding: 8px 12px; font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; box-shadow: 0 1px 0 rgba(23,21,15,0.08); }
.mrow.me .mbubble { background: #2f6bd0; color: #f4f8ff; border-color: #1a4590; border-radius: 12px 12px 4px 12px; }
.mrow.grp .mbubble { border-radius: 12px; }
.mrow.me .mbubble a { color: #cfe0ff; }
.mbubble .chat-message-actions { display: none; position: absolute; top: -24px; right: 6px; background: #ffffff; border: 1px solid #b8b4a6; border-radius: 6px; padding: 2px 6px; gap: 8px; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.12); }
.mbubble:hover .chat-message-actions { display: inline-flex; }
.mbubble .link-identifier { background: none; border: none; color: #1a4590; cursor: pointer; font-size: 0.7rem; padding: 2px 4px; }
.mbubble .link-identifier:hover { color: var(--accent); }
.mtime-h { color: #8a8578; font-size: 0.62rem; }
.mbubble.mthink { font-style: italic; color: #8a8578; background: #efece3; }
/* composer: light, bright input (global rule applies again) */
#chat-composer-form { background: #d4d2cd; border-top: 2px solid var(--line); }
.chat-attachment-file { background: #faf6e0; color: var(--ink); }
/* image lightbox (pijin) */
#imgLb { position: fixed; inset: 0; background: rgba(0,0,0,0.82); display: none; align-items: center; justify-content: center; z-index: 10001; cursor: zoom-out; }
#imgLb img { max-width: 92%; max-height: 88%; border-radius: 8px; box-shadow: 0 12px 50px rgba(0,0,0,0.55); object-fit: contain; cursor: default; }
#imgLb .imglb-x { position: absolute; top: 15px; right: 22px; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.85; }
#imgLb .imglb-dl { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); padding: 6px 14px; border-radius: 8px; font-size: 13px; text-decoration: none; }
/* emoji picker */
#chat-emoji-btn { font-size: 1rem; padding: 4px 10px; cursor: pointer; }
.emoji-pop { position: absolute; bottom: 64px; right: 90px; background: #ffffff; border: 2px solid var(--line); border-radius: 8px; padding: 8px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; z-index: 50; box-shadow: 3px 3px 0 rgba(23,21,15,0.28); }
.emoji-pop button { background: none; border: none; font-size: 1.15rem; cursor: pointer; padding: 3px; border-radius: 4px; }
.emoji-pop button:hover { background: #efece3; }
.emoji-pop.hidden { display: none; }
@media (max-width: 1100px) { .chat-members { display: none; } }
/* === nav v2 pillars (RPG pause menu rail) === */
#side .pillar-solo { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: "PressStart2P", var(--display); font-size: 0.56rem; letter-spacing: 1px; padding: 13px 14px; }
#side .pillar .tab-group-label { display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: "PressStart2P", var(--display); font-size: 0.56rem; letter-spacing: 1px; padding: 13px 14px;
  color: #cfcdc8; text-transform: none; }
#side .pillar .tab-group-label:hover, #side .pillar-solo:hover { color: #ffffff; }
#side .pi { font-size: 0.9rem; width: 18px; display: inline-block; text-align: center; font-family: var(--mono, monospace); }
#side .pillar .grp-caret { margin-left: auto; opacity: 0.6; }
#side .pillar .nav-group-items { padding-left: 14px; border-left: 2px solid rgba(255,255,255,0.08); margin-left: 20px; }
#side .pillar.collapsed .nav-group-items { display: none; }
#side .pillar .nav-group-items .view-tab, #side .pillar .nav-group-items .merged-tab { font-size: 0.85rem; padding: 8px 12px; }
/* RECENT fast-travel cards */
#nav-recent { margin: 18px 10px 0; }
.nav-recent-label { font-family: "PressStart2P", var(--display); font-size: 0.42rem; color: #8d8a82; letter-spacing: 1px; margin-bottom: 6px; padding-left: 4px; }
.nav-recent-item { display: block; width: 100%; text-align: left; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: #cfcdc8; font-size: 0.78rem; padding: 6px 10px; margin-bottom: 4px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.nav-recent-item:hover { background: rgba(255,255,255,0.10); color: #fff; }
/* nav pixel icon set */
#side .pi { display: inline-flex; align-items: center; justify-content: center; width: 20px; }
#side .pi svg { display: block; }