* { box-sizing: border-box; }
:root {
  --cb-body-bg: #f7f5f2;
  --cb-text: #292524;
  --cb-app-bg: #fdfcfa;
  --cb-border: #e7e5e4;
  --cb-panel-bg: #ffffff;
  --cb-subtle-bg: #f5f3ef;
  --cb-muted: #78716c;
  --cb-accent: #4338ca;
  --cb-accent-strong: #3730a3;
  --cb-accent-soft: #eef2ff;
  --cb-secondary: #78716c;
  --cb-danger: #dc2626;
  --cb-input-bg: #ffffff;
  --cb-shadow: 0 18px 38px rgba(41, 37, 36, 0.06);
  --cb-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
}
body {
  margin: 0;
  font-family: var(--cb-font-body);
  background: var(--cb-body-bg);
  color: var(--cb-text);
  font-size: 14px;
  line-height: 1.55;
}
h1, h2, h3 {
  font-family: var(--cb-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.hidden {
  display: none !important;
}
.page-shell {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 20px clamp(12px, 3vw, 36px) 190px;
}
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100dvh - 40px);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cb-app-bg);
  box-shadow: var(--cb-shadow);
}
.sidebar {
  background: var(--cb-subtle-bg);
  color: var(--cb-text);
  padding: 20px 16px;
  border-right: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  display: flex;
  flex-direction: column;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--cb-muted);
}
.sidebar-footer p { margin: 0 0 4px; }
body.public-view .sidebar-footer { display: none; }
.sidebar h2 { margin: 0 0 4px; font-size: 20px; font-family: var(--cb-font-display); font-weight: 400; letter-spacing: -0.01em; }
.muted { color: var(--cb-muted); font-size: 12px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent); }
.nav-group-title { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-muted); padding: 0 4px; margin-bottom: 4px; font-weight: 500; }
.sidebar .nav-btn {
  border: 0;
  text-align: left;
  background: transparent;
  color: var(--cb-text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background 100ms ease, color 100ms ease;
}
.sidebar .nav-btn:hover { background: rgba(0, 0, 0, 0.04); }
.sidebar .nav-btn.active {
  background: var(--cb-accent-soft);
  color: var(--cb-accent);
  font-weight: 600;
}
.sidebar .nav-btn.nav-btn-logout { color: var(--cb-danger); margin-top: 4px; font-weight: 400; }
.sidebar .nav-btn.nav-btn-logout:hover { background: color-mix(in srgb, var(--cb-danger) 8%, transparent); }
.main { padding: 20px 24px; background: var(--cb-panel-bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.brand-lockup { display: flex; flex-direction: column; gap: 4px; line-height: 1.05; }
.brand-name { font-family: var(--cb-font-display); font-size: 20px; letter-spacing: -0.01em; }
.brand-tagline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.brand-tagline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--cb-accent);
  flex: none;
}
.page-footer { display: none; }
body.public-view .page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 28px;
  padding: 14px 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  color: var(--cb-muted);
  font-size: 12px;
}
.page-footer .brand-lockup { flex-direction: row; align-items: center; gap: 10px; }
.page-footer .brand-name { font-size: 17px; }
.page-footer p { margin: 0; }
.page-footer-sep { margin: 0 4px; opacity: 0.6; }
.page-footer a { color: var(--cb-accent); text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }
body.public-view .content[data-section="summary"] .card {
  /* !important: the night theme block (body[data-theme-mode="night"] .card)
     forces background/border-color with !important. */
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.theme-switch {
  font-size: 11px;
  font-weight: 500;
  color: var(--cb-muted);
  letter-spacing: 0.02em;
}
.theme-select {
  min-width: 86px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: 12px;
}
.nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  min-width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cb-muted);
  border-radius: 8px;
  line-height: 1;
}
.nav-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.hamburger-lines {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.hamburger-lines::before,
.hamburger-lines::after,
.hamburger-lines span {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2.5px;
  border-radius: 3px;
  background: currentColor;
}
.hamburger-lines::before { top: 0; }
.hamburger-lines span { top: 6.75px; }
.hamburger-lines::after { bottom: 0; }
.content { max-width: 920px; }
.card {
  background: var(--cb-panel-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 10px;
  box-shadow: none;
  padding: 16px;
  margin-bottom: 14px;
}
.card .card {
  border-color: color-mix(in srgb, var(--cb-border) 40%, transparent);
  background: var(--cb-subtle-bg);
  margin-bottom: 10px;
}
.line { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; color: #fff; padding: 3px 9px; border-radius: 999px; background: #78716c; font-weight: 500; letter-spacing: 0.01em; }
.tag.technical{background:#4f46e5}.tag.delivery{background:#3b5998}.tag.impact{background:#b45309}.tag.leadership{background:#7c3aed}
.tag.collaboration{background:#0d9488}.tag.communication{background:#0369a1}.tag.strategy{background:#6d28d9}.tag.ownership{background:#be123c}
.tag.judgment{background:#92400e}.tag.improvement{background:#15803d}
.tag-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
}
.tag-btn.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, white 75%, transparent);
}
.tag-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cb-accent) 55%, white);
  outline-offset: 2px;
}
.btn {
  border: 0;
  background: var(--cb-accent);
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--cb-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 100ms ease, box-shadow 100ms ease;
}
.btn:hover { background: var(--cb-accent-strong); }
a.btn { display: inline-block; text-decoration: none; }
.btn.hidden { visibility: hidden; }
.btn.icon { padding: 5px 10px; font-size: 12px; }
.btn.secondary { background: color-mix(in srgb, var(--cb-secondary) 85%, black); }
.btn.secondary:hover { background: var(--cb-secondary); }
.btn.danger { background: var(--cb-danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--cb-danger) 85%, black); }
.btn.ghost {
  background: transparent;
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
}
.btn.ghost:hover { background: var(--cb-subtle-bg); }
.inline-form { display: grid; gap: 8px; }
.inline-form input, .inline-form textarea, .inline-form select { width: 100%; border: 1px solid var(--cb-border); border-radius: 8px; padding: 9px 10px; background: var(--cb-input-bg); color: var(--cb-text); font-family: var(--cb-font-body); font-size: 13px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.field-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; }
.field-pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: start;
}
.field-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.inline-date-range-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.inline-date-range-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-muted);
  white-space: nowrap;
}
.inline-date-range-picker {
  min-width: 0;
}
.inline-date-range-picker .month-year-control {
  width: 100%;
}
.inline-date-range-current {
  white-space: nowrap;
}
.field-label { font-size: 12px; font-weight: 600; color: var(--cb-muted); }
.field-control { min-width: 0; }
.field-hint { font-size: 11px; color: var(--cb-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.field-hint--near-limit { color: var(--cb-danger); }
.polish-field-btn {
  font-size: 12px;
  background: #7c3aed;
  color: #fff;
}
.polish-field-btn:hover {
  background: #6d28d9;
}
.ai-gen-btn {
  background: #d97706;
  color: #fff;
}
.ai-gen-btn:hover {
  background: #b45309;
}
.summary-exp-row { padding: 10px 0; border-bottom: 1px solid var(--cb-border); }
.summary-exp-row:last-child { border-bottom: 0; }
.summary-exp-title { color: var(--cb-text); }
.summary-exp-date { margin-top: 2px; color: var(--cb-muted); font-size: 12px; }
.summary-exp-body { margin-top: 4px; color: var(--cb-text); font-size: 14px; }

/* Working-experience timeline (summary frontpage) */
.work-timeline { padding: 6px 0 2px; }
.wt-entry {
  display: grid;
  grid-template-columns: 108px 26px 1fr;
  column-gap: 10px;
}
/* Dates are metadata, not the headline: kept smaller and quieter than the
   company so the employer stays the anchor of each entry. Display serif so
   they read as a family with the company name rather than as a UI label. */
.wt-years {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  padding-top: 5px;
  text-align: right;
}
.wt-year-start,
.wt-year-end {
  font-family: var(--cb-font-display);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--cb-muted);
  white-space: nowrap;
}
.wt-year-end::before { content: "– "; }
.wt-rail { position: relative; display: flex; justify-content: center; }
.wt-rail::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: -8px;
  left: 50%;
  border-left: 2px dotted color-mix(in srgb, var(--cb-accent) 30%, var(--cb-border));
  transform: translateX(-50%);
}
.wt-entry:last-child .wt-rail::before { display: none; }
.wt-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--cb-panel-bg);
  border: 2px solid color-mix(in srgb, var(--cb-accent) 55%, var(--cb-border));
}
.wt-current .wt-dot {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 16%, transparent);
}
.wt-body { padding-bottom: 22px; min-width: 0; }
.wt-entry:last-child .wt-body { padding-bottom: 6px; }
/* Sits just under the card's own h3 (16.38px) so the section heading still
   leads. The display serif, not size, is what marks the company as the
   anchor of each entry against the sans roles and summary. */
.wt-company {
  font-family: var(--cb-font-display);
  font-size: 16px;
  line-height: 1.35;
  color: var(--cb-text);
}
.wt-roles { margin-top: 4px; }
.wt-role { padding: 2px 0; }
.wt-role-title { font-weight: 500; color: var(--cb-text); }
.wt-summary { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--cb-muted); }
@media (max-width: 640px) {
  .wt-entry { grid-template-columns: 22px 1fr; }
  .wt-years {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    text-align: left;
    padding-top: 0;
    padding-bottom: 2px;
  }
  .wt-rail { grid-column: 1; grid-row: 1 / span 2; }
  .wt-body { grid-column: 2; grid-row: 2; }
}

/* Contact strip (public view) */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 0 0 12px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  font-size: 13px;
  color: var(--cb-text);
  background: color-mix(in srgb, var(--cb-border) 35%, transparent);
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.15s ease;
  line-height: 1.3;
}
a.contact-chip:hover {
  background: color-mix(in srgb, var(--cb-accent) 12%, transparent);
  color: var(--cb-accent);
}
.contact-chip svg,
.contact-chip .contact-favicon {
  flex-shrink: 0;
  opacity: 0.7;
}
.contact-favicon {
  border-radius: 2px;
}
a.contact-chip:hover svg,
a.contact-chip:hover .contact-favicon {
  opacity: 1;
}
.contact-chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Contact rows (internal view) */
.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cb-border);
}
.contact-row:last-child { border-bottom: 0; }
.contact-row.contact-hidden {
  opacity: 0.5;
}
.contact-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.contact-row-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cb-border) 40%, transparent);
  color: var(--cb-muted);
}
.contact-row-info {
  min-width: 0;
}
.contact-row-value {
  font-size: 14px;
  color: var(--cb-text);
  line-height: 1.3;
}
.contact-value-link {
  color: var(--cb-accent);
  text-decoration: none;
}
.contact-value-link:hover {
  text-decoration: underline;
}
.contact-row-label {
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: 1px;
}
.contact-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.contact-row:hover .contact-row-actions {
  opacity: 1;
}
/* Always show on touch devices */
@media (hover: none) {
  .contact-row-actions { opacity: 1; }
}
.contact-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.contact-action-btn:hover {
  background: color-mix(in srgb, var(--cb-border) 60%, transparent);
  color: var(--cb-text);
}
.contact-action-danger:hover {
  background: color-mix(in srgb, var(--cb-danger, #dc2626) 12%, transparent);
  color: var(--cb-danger, #dc2626);
}
.qualification-link-line {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
}
.qualification-link-line a {
  color: var(--cb-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  word-break: break-all;
}
.terminal-expand { margin-top: 8px; padding: 10px 0 0; border-top: 1px solid var(--cb-border); }
.terminal-expand a { color: var(--cb-accent); text-decoration: underline; }
.terminal-list { margin: 8px 0 0 18px; color: var(--cb-text); }
.terminal-list li { margin-bottom: 4px; }
.experience-card-line {
  align-items: flex-start;
}
.experience-card-body {
  min-width: 0;
  flex: 1 1 auto;
}
.experience-toggle-btn,
.experience-static-head {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.experience-toggle-btn {
  cursor: pointer;
}
.experience-toggle-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cb-accent) 55%, white);
  outline-offset: 4px;
  border-radius: 8px;
}
.experience-summary {
  margin-top: 6px;
  color: var(--cb-text);
  font-size: 14px;
  line-height: 1.45;
}
.experience-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cb-border);
}
.experience-detail-copy,
.experience-detail-impact {
  color: var(--cb-text);
  font-size: 14px;
  line-height: 1.5;
}
.experience-detail-impact {
  margin-top: 8px;
}

.exp-filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.exp-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-status {
  font-size: 12px;
  color: var(--cb-muted);
}
.exp-filter-btn {
  border: 1px solid var(--cb-border);
  background: transparent;
  color: var(--cb-text);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.exp-filter-btn:hover { background: var(--cb-subtle-bg); }
.exp-filter-btn.active {
  border-color: var(--cb-accent);
  background: var(--cb-accent-soft);
  color: var(--cb-accent);
  font-weight: 600;
}
.exp-filter-btn.active.technical{background:#4f46e5;border-color:#4f46e5;color:#fff}
.exp-filter-btn.active.delivery{background:#3b5998;border-color:#3b5998;color:#fff}
.exp-filter-btn.active.impact{background:#b45309;border-color:#b45309;color:#fff}
.exp-filter-btn.active.leadership{background:#7c3aed;border-color:#7c3aed;color:#fff}
.exp-filter-btn.active.collaboration{background:#0d9488;border-color:#0d9488;color:#fff}
.exp-filter-btn.active.communication{background:#0369a1;border-color:#0369a1;color:#fff}
.exp-filter-btn.active.strategy{background:#6d28d9;border-color:#6d28d9;color:#fff}
.exp-filter-btn.active.ownership{background:#be123c;border-color:#be123c;color:#fff}
.exp-filter-btn.active.judgment{background:#92400e;border-color:#92400e;color:#fff}
.exp-filter-btn.active.improvement{background:#15803d;border-color:#15803d;color:#fff}
.exp-filter-btn.active.developing{background:#0369a1;border-color:#0369a1;color:#fff}
.exp-filter-btn.active.proficient{background:#4f46e5;border-color:#4f46e5;color:#fff}
.exp-filter-btn.active.expert{background:#7c3aed;border-color:#7c3aed;color:#fff}

.exp-section {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.exp-section:has(.exp-right:empty) {
  grid-template-columns: 1fr;
}
.exp-left {
  background: var(--cb-subtle-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 10px;
  padding: 10px;
  position: sticky;
  top: 8px;
  align-self: start;
}
.exp-role { font-weight: 700; color: var(--cb-text); }
.exp-affiliation { color: var(--cb-text); margin-top: 2px; }
.exp-period { color: var(--cb-muted); font-size: 12px; margin-top: 4px; }
.edu-summary-body { margin-top: 8px; font-size: 13px; color: var(--cb-text); line-height: 1.5; }
.exp-group-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.exp-add-item-btn,
.exp-edit-group-btn,
.exp-delete-group-btn {
  padding: 5px 8px;
  font-size: 11px;
  border-radius: 8px;
}
.exp-right .card { margin-bottom: 10px; }
.exp-right .card:last-child { margin-bottom: 0; }
.skills-shell {
  display: grid;
  gap: 12px;
}
.skills-toolbar {
  padding: 10px 12px;
  background: var(--cb-panel-bg);
  box-shadow: none;
}
.skills-toolbar .exp-filters {
  margin-bottom: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.skills-toolbar .exp-filter-list {
  flex: 1 1 320px;
}
.skills-toolbar .filter-status {
  flex: 0 0 auto;
}
.skills-sections {
  display: grid;
  gap: 12px;
}
.skills-group {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--cb-border) 80%, transparent);
}
.skills-group:first-child {
  padding-top: 0;
  border-top: 0;
}
.skills-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.skills-group-head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.skills-group-count {
  color: var(--cb-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.skill-grid-item {
  display: flex;
  min-width: 0;
}
.skill-grid-item.full {
  grid-column: 1 / -1;
}
.skill-card {
  --skill-accent: #4f46e5;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, var(--skill-accent) 12%);
  border-radius: 8px;
  background: var(--cb-panel-bg);
  box-shadow: none;
  transition: border-color 120ms ease;
}
.skill-card:hover {
  border-color: color-mix(in srgb, var(--cb-border) 40%, var(--skill-accent) 25%);
}
.skill-card.level-developing { --skill-accent: #0369a1; }
.skill-card.level-proficient { --skill-accent: #4f46e5; }
.skill-card.level-expert { --skill-accent: #7c3aed; }
.skill-card-top,
.skill-card-edit-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.skill-card-heading {
  min-width: 0;
  display: block;
}
.skill-card-title {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  color: var(--cb-text);
  word-break: break-word;
}
.skill-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.inline-link-btn.skill-card-evidence-link {
  font-size: 12px;
  color: var(--cb-muted);
  text-decoration: none;
}
.inline-link-btn.skill-card-evidence-link:hover {
  color: var(--cb-text);
  text-decoration: underline;
}
.skill-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.skill-card .btn.icon {
  padding: 4px 7px;
  font-size: 11px;
  border-radius: 8px;
}
.skill-card-empty {
  color: var(--cb-muted);
  font-size: 12px;
  line-height: 1.35;
}
.skill-card.inline-form {
  box-shadow: none;
}
.skill-card-edit-label {
  margin: 0 0 4px;
  color: var(--cb-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skill-level-badge {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
}
.skill-level-badge.level-developing { background: #0369a1; }
.skill-level-badge.level-proficient { background: #4f46e5; }
.skill-level-badge.level-expert { background: #7c3aed; }
.exp-date-inline {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.exp-date-inline.end-only { grid-template-columns: 1fr auto; }
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cb-text);
}
.inline-check input { width: 14px; height: 14px; }
.inline-link-btn {
  border: 0;
  background: transparent;
  color: var(--cb-accent);
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  font-size: 13px;
}
.inline-link-btn.title-link {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  line-height: inherit;
}
.inline-link-btn.title-link:hover {
  color: inherit;
  text-decoration: underline;
}
.inline-link-btn.title-link .link-hint {
  color: var(--cb-muted);
  font-size: 12px;
  font-weight: 500;
}
.evidence-header h3 { margin: 0 0 2px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.inline-form select, .modal-form select {
  background: var(--cb-input-bg);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 9px 10px;
  outline: none;
  color: var(--cb-text);
}
.inline-form select:focus, .modal-form select:focus {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-accent) 22%, transparent);
}
.month-year-control {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.month-year-value {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
/* --- Month/Year Picker: Trigger Button --- */
.month-year-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--cb-input-bg);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--cb-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 36px;
  cursor: pointer;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.month-year-trigger:hover {
  border-color: color-mix(in srgb, var(--cb-accent) 50%, var(--cb-border));
}
.month-year-trigger.picker-open {
  border-radius: 8px 8px 0 0;
  border-color: var(--cb-accent);
  border-bottom-color: color-mix(in srgb, var(--cb-border) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-accent) 14%, transparent);
  z-index: 890;
  position: relative;
}
.month-year-trigger.picker-open .month-year-trigger-chevron {
  transform: rotate(-135deg) translateY(-1px);
}
.month-year-trigger:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-accent) 14%, transparent);
}
.month-year-trigger[data-empty="1"] .month-year-trigger-text {
  color: var(--cb-muted);
  font-weight: 400;
}
.month-year-trigger:disabled {
  background: color-mix(in srgb, var(--cb-subtle-bg) 86%, white);
  color: var(--cb-muted);
  cursor: not-allowed;
}
.month-year-trigger:disabled .month-year-trigger-chevron {
  border-color: var(--cb-muted);
  opacity: 0.55;
}
.month-year-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-year-trigger-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--cb-muted);
  border-bottom: 1.5px solid var(--cb-muted);
  transform: rotate(45deg) translateY(-2px);
  flex: 0 0 auto;
  transition: transform 150ms ease;
}

/* --- Month/Year Picker: Calendar-style popover --- */
.cb-month-year-popover {
  position: fixed;
  z-index: 1300;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  border: 1px solid var(--cb-accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.12), 0 1px 4px rgba(41, 37, 36, 0.06);
  padding: 8px;
  min-width: 240px;
  user-select: none;
}
.cb-month-year-popover .cb-month-year-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
  margin-bottom: 8px;
}
.cb-month-year-popover .cb-year-label {
  font-weight: 600;
  font-size: 14px;
  flex: 1 1 auto;
  text-align: center;
}
.cb-month-year-popover .cb-year-nav {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: transparent;
  color: var(--cb-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease, border-color 100ms ease;
}
.cb-month-year-popover .cb-year-nav:hover {
  background: color-mix(in srgb, var(--cb-accent) 8%, transparent);
  border-color: var(--cb-accent);
}
.cb-month-year-popover .cb-year-nav:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
}
.cb-month-year-popover .cb-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.cb-month-year-popover .cb-month-cell {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--cb-text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  cursor: pointer;
  text-align: center;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.cb-month-year-popover .cb-month-cell:hover {
  background: color-mix(in srgb, var(--cb-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--cb-accent) 40%, transparent);
}
.cb-month-year-popover .cb-month-cell.is-selected {
  background: var(--cb-accent);
  color: #fff;
  border-color: var(--cb-accent);
}
.cb-month-year-popover .cb-month-cell:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .month-year-trigger {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
  }
  .month-year-trigger.picker-open {
    border-radius: 10px;
    border-bottom-color: var(--cb-accent);
  }
  .cb-month-year-popover {
    min-width: 280px;
    padding: 10px;
  }
  .cb-month-year-popover .cb-month-cell {
    padding: 12px 0;
    font-size: 14px;
  }
  .cb-month-year-popover .cb-year-nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}
.inline-form select[multiple], .modal-form select[multiple] {
  min-height: 130px;
  background: var(--cb-input-bg);
}
.inline-form option, .modal-form option { padding: 4px 6px; }
.multi-select { position: relative; }
.multi-select.open { z-index: 70; }
.multi-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--cb-border);
  background: var(--cb-input-bg);
  color: var(--cb-text);
  border-radius: 12px;
  padding: 9px 10px;
}
.multi-trigger .caret { color: var(--cb-muted); font-size: 12px; }
.multi-trigger:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-accent) 22%, transparent);
}
.multi-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cb-panel-bg);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(41, 37, 36, 0.12);
  padding: 6px;
  z-index: 120;
}
.multi-menu.hidden { display: none; }
.multi-option {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.multi-option:hover { background: var(--cb-subtle-bg); }
.multi-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.multi-option .checkmark {
  width: 16px;
  font-size: 14px;
  color: var(--cb-accent);
  opacity: 0;
}
.multi-option input:checked + .checkmark { opacity: 1; }
.multi-option .option-text { font-size: 13px; color: var(--cb-text); }
.evidence-select-with-group {
  display: grid;
  gap: 8px;
}
.evidence-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.evidence-filter-row select {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.evidence-filter-row select:disabled {
  background: color-mix(in srgb, var(--cb-subtle-bg) 86%, white);
  color: var(--cb-muted);
  cursor: not-allowed;
}
.composer {
  position: fixed;
  right: 16px;
  bottom: var(--composer-bottom, 16px);
  width: min(420px, calc(100vw - 34px));
  height: min(520px, calc(100vh - 40px));
  min-width: 300px;
  min-height: 200px;
  max-width: calc(100vw - 12px);
  max-height: calc(100vh - 24px);
  background: var(--cb-panel-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 14px;
  box-shadow:
    0 1px 0 0 color-mix(in srgb, white 60%, transparent) inset,
    0 18px 40px -12px color-mix(in srgb, var(--cb-accent) 18%, rgba(41, 37, 36, 0.18)),
    0 6px 14px -6px rgba(41, 37, 36, 0.10);
  padding: 10px 14px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 180ms ease;
}
.composer:hover,
.composer[data-affordance="active"] {
  box-shadow:
    0 1px 0 0 color-mix(in srgb, white 70%, transparent) inset,
    0 22px 48px -14px color-mix(in srgb, var(--cb-accent) 26%, rgba(41, 37, 36, 0.22)),
    0 8px 16px -6px rgba(41, 37, 36, 0.12);
}

/* --- Resize handles: 4 edges + 4 corners --- */
.composer-resize-handle {
  position: absolute;
  z-index: 2;
}
/* Edges: thick hit area, hairline indicator */
.composer-resize-handle--t,
.composer-resize-handle--b {
  left: 18px;
  right: 18px;
  height: 8px;
  cursor: ns-resize;
}
.composer-resize-handle--t { top: -3px; }
.composer-resize-handle--b { bottom: -3px; }
.composer-resize-handle--l,
.composer-resize-handle--r {
  top: 18px;
  bottom: 18px;
  width: 8px;
  cursor: ew-resize;
}
.composer-resize-handle--l { left: -3px; }
.composer-resize-handle--r { right: -3px; }

/* Mid-edge "grip" — 3 small dots, fade in when the composer is hovered.
   Pure affordance hint; the active resize stroke is drawn by .composer::before
   so it follows the rounded corner curvature. */
.composer-resize-handle--t::after,
.composer-resize-handle--b::after,
.composer-resize-handle--l::after,
.composer-resize-handle--r::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, background-position 160ms ease;
  background-image: radial-gradient(circle, var(--cb-muted) 0 35%, transparent 36%);
  background-repeat: repeat-x;
  background-size: 8px 2px;
}
.composer-resize-handle--t::after,
.composer-resize-handle--b::after {
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
}
.composer-resize-handle--t::after { top: 4px; }
.composer-resize-handle--b::after { bottom: 4px; }
.composer-resize-handle--l::after,
.composer-resize-handle--r::after {
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 28px;
  background-size: 2px 8px;
  background-repeat: repeat-y;
}
.composer-resize-handle--l::after { left: 4px; }
.composer-resize-handle--r::after { right: 4px; }
.composer:hover .composer-resize-handle::after { opacity: 0.55; }
.composer-resize-handle:hover::after {
  opacity: 1;
  background-image: radial-gradient(circle, var(--cb-accent) 0 40%, transparent 41%);
}

/* Curved edge stroke — drawn on the composer itself so border-radius is
   inherited and the stroke naturally follows the rounded corners. */
.composer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 0 solid var(--cb-accent);
  transition: border-width 160ms ease, opacity 160ms ease;
  opacity: 0.85;
  z-index: 1;
}
.composer:has(.composer-resize-handle--t:hover)::before { border-top-width: 2px; }
.composer:has(.composer-resize-handle--b:hover)::before { border-bottom-width: 2px; }
.composer:has(.composer-resize-handle--l:hover)::before { border-left-width: 2px; }
.composer:has(.composer-resize-handle--r:hover)::before { border-right-width: 2px; }
.composer:has(.composer-resize-handle--tl:hover)::before { border-top-width: 2px; border-left-width: 2px; }
.composer:has(.composer-resize-handle--tr:hover)::before { border-top-width: 2px; border-right-width: 2px; }
.composer:has(.composer-resize-handle--bl:hover)::before { border-bottom-width: 2px; border-left-width: 2px; }
.composer:has(.composer-resize-handle--br:hover)::before { border-bottom-width: 2px; border-right-width: 2px; }
/* Active drag locks the highlight on all edges so the user gets clear
   feedback even if their cursor briefly leaves the handle. */
.composer[data-affordance="active"]::before {
  border-width: 2px;
  opacity: 1;
}
/* Corners: small hit zones with tick marks */
.composer-resize-handle--tl,
.composer-resize-handle--tr,
.composer-resize-handle--bl,
.composer-resize-handle--br {
  width: 16px;
  height: 16px;
  z-index: 3;
}
.composer-resize-handle--tl { top: -2px; left: -2px; cursor: nwse-resize; }
.composer-resize-handle--tr { top: -2px; right: -2px; cursor: nesw-resize; }
.composer-resize-handle--bl { bottom: -2px; left: -2px; cursor: nesw-resize; }
.composer-resize-handle--br { bottom: -2px; right: -2px; cursor: nwse-resize; }
/* Corner caliper: a quarter-arc that mirrors the composer's corner radius
   instead of a flat L-shape. Renders as a partial border on a rounded box. */
.composer-resize-handle--tl::before,
.composer-resize-handle--tr::before,
.composer-resize-handle--bl::before,
.composer-resize-handle--br::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid var(--cb-muted);
  opacity: 0;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.composer:hover .composer-resize-handle--tl::before,
.composer:hover .composer-resize-handle--tr::before,
.composer:hover .composer-resize-handle--bl::before,
.composer:hover .composer-resize-handle--br::before {
  opacity: 0.6;
}
.composer-resize-handle--tl:hover::before,
.composer-resize-handle--tr:hover::before,
.composer-resize-handle--bl:hover::before,
.composer-resize-handle--br:hover::before {
  opacity: 1;
  border-color: var(--cb-accent);
}
.composer-resize-handle--tl::before {
  top: 4px; left: 4px;
  border-top-width: 1.5px; border-left-width: 1.5px;
  border-radius: 10px 0 0 0;
}
.composer-resize-handle--tr::before {
  top: 4px; right: 4px;
  border-top-width: 1.5px; border-right-width: 1.5px;
  border-radius: 0 10px 0 0;
}
.composer-resize-handle--bl::before {
  bottom: 4px; left: 4px;
  border-bottom-width: 1.5px; border-left-width: 1.5px;
  border-radius: 0 0 0 10px;
}
.composer-resize-handle--br::before {
  bottom: 4px; right: 4px;
  border-bottom-width: 1.5px; border-right-width: 1.5px;
  border-radius: 0 0 10px 0;
}

/* --- Drag bar (header) --- */
.composer-drag-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -2px -4px 8px;
  padding: 6px 8px 8px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
  border-radius: 10px;
  transition: background 140ms ease;
}
.composer-drag-bar:hover {
  background: color-mix(in srgb, var(--cb-accent) 5%, transparent);
}
.composer-drag-bar:active { cursor: grabbing; }
.composer-min-btn {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cb-border) 80%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--cb-panel-bg) 94%, black 6%);
  color: var(--cb-muted);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.composer-min-icon {
  display: block;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  border-radius: 999px;
}
.composer-min-btn:hover {
  color: var(--cb-text);
  border-color: var(--cb-accent);
  background: color-mix(in srgb, var(--cb-panel-bg) 96%, var(--cb-accent) 4%);
}
.composer-restore-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: var(--cb-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.14);
  z-index: 1000;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.composer-restore-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(41, 37, 36, 0.2);
}
.composer-drag-rail {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  height: 8px;
  opacity: 0.55;
  transition: opacity 140ms ease;
}
.composer-drag-bar:hover .composer-drag-rail { opacity: 0.95; }
.composer-drag-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--cb-muted);
  transition: background 140ms ease;
}
.composer-drag-bar:hover .composer-drag-dot {
  background: color-mix(in srgb, var(--cb-accent) 70%, var(--cb-muted));
}
.composer-drag-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.composer-drag-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cb-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cb-accent) 40%, transparent);
  animation: composerPulse 2.4s ease-in-out infinite;
}
@keyframes composerPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cb-accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .composer-drag-pulse { animation: none; }
}
.composer-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.chat-thread {
  min-height: 80px;
  flex: 1 1 0;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 0;
  transition: height 140ms ease;
  background: var(--cb-subtle-bg);
}
.msg {
  display: flex;
  font-size: 13px;
  margin-bottom: 12px;
}
.msg:last-child { margin-bottom: 0; }
.msg.user {
  justify-content: flex-end;
}
.msg.user .msg-bubble {
  background: var(--cb-accent-soft);
  border-color: color-mix(in srgb, var(--cb-accent) 18%, transparent);
}
.msg-bubble {
  max-width: min(78ch, 82%);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 14px;
  padding: 10px 14px 11px;
  background: var(--cb-panel-bg);
  box-shadow: none;
}
.msg-meta {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.msg-text {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--cb-text);
}
.typing { letter-spacing: 2px; animation: pulse 1s steps(6,end) infinite; }
.chat-nav-btn {
  display: inline-block;
  margin-top: 6px;
  margin-right: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  border: 1px solid var(--cb-border, #ccc);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.chat-nav-btn:hover { background: var(--cb-hover, rgba(0,0,0,.05)); }
@keyframes pulse { 0%{opacity:.25}50%{opacity:1}100%{opacity:.25} }
.composer-input-shell {
  display: grid;
  gap: 10px;
}
.composer-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.composer-input-row textarea { flex: 1 1 0; min-width: 0; }
.composer-send-btn {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 999px;
  padding-inline: 16px;
}
.composer-upload-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  border-radius: 999px;
  background: var(--cb-subtle-bg);
  border: 1px solid var(--cb-border);
  cursor: pointer;
  transition: background 120ms ease;
}
.composer-upload-btn:hover {
  background: color-mix(in srgb, var(--cb-accent) 10%, var(--cb-subtle-bg));
}
.composer-upload-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--cb-text);
}
.composer-upload-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-text);
  white-space: nowrap;
}
.composer-upload-btn input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.composer-upload-btn.processing {
  opacity: 0.45;
  pointer-events: none;
}
.chat-char-count {
  font-size: 12px;
  color: var(--cb-muted);
  padding-left: 2px;
}
.chat-char-count.chat-char-count--warn { color: var(--cb-accent); }
.chat-char-count.chat-char-count--over { color: var(--cb-danger, #dc2626); }
.chat-char-hint {
  font-size: 12px;
  color: var(--cb-muted);
  margin: 4px 0 0;
  padding-left: 2px;
  line-height: 1.35;
}
.composer textarea,
textarea {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  min-height: 68px;
  line-height: 1.5;
  font-family: var(--cb-font-body);
  font-size: 13px;
}
.composer textarea {
  resize: none;
  overflow-y: hidden;
}
.composer textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cb-accent) 34%, var(--cb-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 12%, transparent);
}
.task-queue-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.task-queue-badge-wrap.hidden {
  display: none;
}
.task-queue-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cb-panel-bg, #f1f5f9);
}
.task-queue-cancel {
  font-size: 12px;
}
.modal-skip-btn {
  margin-right: auto;
}
#modalPolishBtn {
  margin-right: auto;
}
.modal-overlay { position: fixed; inset: 0; background: rgba(41, 37, 36, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1200; backdrop-filter: blur(2px); }
.modal-overlay.hidden { display: none; }
.modal-card { width: min(760px, calc(100vw - 24px)); background: var(--cb-panel-bg); border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent); border-radius: 12px; padding: 16px; box-shadow: 0 24px 48px rgba(41, 37, 36, 0.18); }
.saving-overlay {
  z-index: 2600;
  background: rgba(41, 37, 36, 0.18);
  backdrop-filter: blur(2px);
}
.saving-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 40px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: var(--cb-panel-bg);
  box-shadow: 0 4px 20px rgba(41, 37, 36, 0.10);
  color: var(--cb-text);
}
.saving-card:focus {
  outline: none;
}
.saving-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--cb-muted) 30%, transparent);
  border-top-color: var(--cb-accent);
  border-radius: 50%;
  animation: saving-spin 0.7s linear infinite;
}
.saving-label {
  font-size: 14px;
  font-family: var(--cb-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cb-text);
}
.saving-overlay-open {
  overflow: hidden;
}
.auth-screen-mode .page-shell,
.auth-screen-mode .composer {
  display: none !important;
}
#devLoginOverlay.auth-screen-mode {
  background: var(--cb-body-bg);
  z-index: 2400;
}
#devLoginOverlay.auth-screen-mode .modal-card {
  border-radius: 14px;
  box-shadow: var(--cb-shadow);
}
.dev-login-card { width: min(520px, calc(100vw - 24px)); }
.dev-login-controls { display: grid; gap: 10px; margin-top: 10px; }
.dev-login-select { width: 100%; border: 1px solid var(--cb-border); border-radius: 8px; padding: 8px; background: var(--cb-input-bg); color: var(--cb-text); }
.dev-login-login-actions { display: flex; gap: 8px; }
.dev-login-login-actions .btn { flex: 1 1 0; }
.dev-login-divider { margin: 12px 0 10px; position: relative; text-align: center; color: var(--cb-muted); font-size: 12px; }
.dev-login-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--cb-border); }
.dev-login-divider span { position: relative; padding: 0 8px; background: var(--cb-panel-bg); }
.dev-login-create { display: grid; gap: 10px; }
.dev-login-create input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.dev-login-error { margin-top: 10px; color: #b91c1c; font-size: 13px; line-height: 1.4; }
.dev-login-switch { width: 100%; margin: 10px 0 2px; }
.firebase-auth-panel {
  display: grid;
  gap: 12px;
}
.firebase-auth-view {
  display: grid;
  gap: 12px;
}
.firebase-auth-view.hidden {
  display: none;
}
.firebase-auth-header {
  display: grid;
  gap: 6px;
}
.firebase-auth-header h4 {
  margin: 0;
  font-size: 22px;
  font-family: var(--cb-font-display);
  font-weight: 400;
}
.firebase-google-btn {
  width: 100%;
  justify-self: stretch;
  font-weight: 500;
  min-height: 42px;
  background: var(--cb-panel-bg);
  border-color: var(--cb-border);
  color: var(--cb-text);
}
.firebase-auth-fields {
  display: grid;
  gap: 10px;
}
.firebase-auth-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--cb-muted);
}
.firebase-auth-field input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  min-height: 40px;
  font-family: var(--cb-font-body);
  font-size: 13px;
}
.firebase-auth-actions {
  display: flex;
  gap: 8px;
}
.firebase-auth-actions .btn {
  flex: 1 1 0;
}
.firebase-password-hint {
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: -2px;
}
.firebase-forgot-password-row {
  text-align: right;
  margin-top: -4px;
}
.btn-link {
  background: none;
  border: none;
  color: var(--cb-accent, #3b82f6);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}
.btn-link:hover { opacity: 0.8; }
.firebase-auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-settings-card {
  max-width: 780px;
}
.admin-setting-toggle {
  margin-top: 12px;
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--cb-subtle-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-setting-text {
  display: grid;
  gap: 4px;
}
.admin-setting-text strong {
  font-size: 14px;
  color: var(--cb-text);
}
.admin-setting-text span {
  font-size: 12px;
  color: var(--cb-muted);
}
.admin-setting-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.admin-users-toolbar {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.admin-users-toolbar input {
  width: 100%;
  min-height: 38px;
}
.admin-users-error {
  margin-top: 10px;
  color: #b91c1c;
  font-size: 13px;
}
.admin-users-table-wrap {
  margin-top: 12px;
  max-height: min(56vh, 520px);
  overflow: auto;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
}
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: var(--cb-panel-bg);
}
.admin-users-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--cb-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-subtle-bg);
}
.admin-users-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cb-border);
  vertical-align: middle;
}
.admin-users-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-users-empty {
  text-align: center;
  color: var(--cb-muted);
  font-size: 13px;
}
.admin-user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.admin-pill.role-admin {
  background: color-mix(in srgb, var(--cb-accent) 14%, transparent);
  color: var(--cb-accent);
}
.admin-pill.role-user {
  background: color-mix(in srgb, var(--cb-border) 45%, transparent);
  color: var(--cb-text);
}
.admin-pill.status-active {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #15803d;
}
.admin-pill.status-disabled {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #b91c1c;
}
.tool-modal-card { width: min(980px, calc(100vw - 24px)); }
.tool-modal-body { max-height: 72vh; overflow-y: auto; padding-right: 4px; background: var(--cb-panel-bg) !important; }
.ui-dialog {
  display: grid;
  gap: 12px;
  max-width: 680px;
}
.ui-dialog-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cb-text);
}
.ui-dialog-danger .ui-dialog-message {
  color: #991b1b;
}
.ui-dialog-copy {
  width: 100%;
  min-height: 88px;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.ui-dialog-copy-status {
  font-size: 12px;
  color: var(--cb-muted);
}
.ui-dialog-actions {
  justify-content: flex-end;
}
.account-delete-modal { display: grid; gap: 12px; max-width: 640px; }
.account-delete-banner {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cb-danger) 40%, var(--cb-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--cb-danger) 9%, transparent);
}
.account-delete-banner strong { color: var(--cb-danger); }
.account-delete-banner span { font-size: 13px; color: var(--cb-text); }
.account-delete-instruction { font-size: 13px; color: var(--cb-muted); }
.account-delete-input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.account-delete-error { color: #b91c1c; font-size: 13px; min-height: 18px; }
.account-delete-actions { justify-content: flex-end; margin-top: 2px; }
.tools-grid { display: grid; gap: 12px; }
.tool-card h3 { margin-top: 0; margin-bottom: 8px; }
.tool-card textarea { min-height: 120px; }
.tool-card input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.tool-card select {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.tool-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* --- Settings Page --- */
.settings-page {
  max-width: 640px;
  display: grid;
  gap: 0;
}
.settings-section {
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
}
.settings-section:first-child { padding-top: 0; }
.settings-section:last-child { border-bottom: none; }
.settings-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
  margin-bottom: 10px;
}
.settings-identity {
  display: grid;
  gap: 2px;
}
.settings-identity-name {
  font-family: var(--cb-font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cb-text);
}
.settings-identity-meta {
  font-size: 12px;
  color: var(--cb-muted);
}
.settings-form {
  display: grid;
  gap: 10px;
}
.settings-field {
  display: grid;
  gap: 4px;
}
.settings-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cb-muted);
  letter-spacing: 0.01em;
}
.settings-field input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: 13px;
}
.settings-field input:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-accent) 14%, transparent);
}
.settings-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.settings-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.settings-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
  border-radius: 6px;
  background: var(--cb-subtle-bg);
}
.settings-stat-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.settings-stat-label {
  font-size: 11px;
  color: var(--cb-muted);
}
.settings-usage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.settings-usage-item {
  display: grid;
  gap: 2px;
}
.settings-usage-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.settings-usage-label {
  font-size: 11px;
  color: var(--cb-muted);
}
.settings-danger-zone {
  padding-top: 20px;
}
.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cb-danger) 25%, var(--cb-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cb-danger) 3%, transparent);
}
.settings-danger-row + .settings-danger-row {
  margin-top: 8px;
}
.settings-danger-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-text);
}
.settings-danger-desc {
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .settings-field-pair { grid-template-columns: 1fr; }
  .settings-danger-row { flex-direction: column; align-items: flex-start; }
  .settings-danger-row .btn { width: 100%; }
}

.loading-shell {
  display: grid;
  gap: 14px;
}
.loading-card {
  display: grid;
  gap: 10px;
  min-height: 140px;
}
.loading-line {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cb-border) 50%, transparent),
    color-mix(in srgb, var(--cb-subtle-bg) 90%, white 10%),
    color-mix(in srgb, var(--cb-border) 50%, transparent)
  );
  background-size: 220% 100%;
  animation: loading-shimmer 1.5s ease-in-out infinite;
}
.loading-line-title {
  width: 180px;
  height: 16px;
}
.mutation-status-bar {
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--cb-text-muted);
  background: var(--cb-input-bg);
  border-radius: 8px;
  border-left: 3px solid var(--cb-primary);
}
.loading-line-wide {
  width: min(100%, 760px);
}
.loading-line-medium {
  width: min(72%, 520px);
}
.loading-line-short {
  width: min(48%, 320px);
}
@keyframes loading-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -20% 0; }
}
@keyframes saving-spin {
  to { transform: rotate(360deg); }
}
.tool-history-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.tool-history-section-head h3 { margin: 0 0 4px 0; }
.tool-history-list { display: grid; gap: 10px; }
.tool-history-card {
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: var(--cb-subtle-bg);
}
.tool-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.tool-history-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.tool-history-toggle {
  text-align: left;
  width: fit-content;
}
.tool-history-subtitle {
  font-size: 13px;
  font-weight: 600;
}
.tool-history-meta {
  line-height: 1.5;
}
.tool-history-preview {
  margin-top: 8px;
  color: var(--cb-muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.tool-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.primary-badge {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--cb-accent);
}
.tool-history-body {
  margin-top: 10px;
}
.tool-history-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
}
.tool-history-question-label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cb-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tool-history-empty {
  color: var(--cb-muted);
  font-size: 13px;
}
.tool-history-editor {
  display: grid;
  gap: 12px;
}
.tool-history-editor-textarea {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}
.publish-toggle-row {
  margin-top: 10px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.publish-status {
  font-size: 13px;
  font-weight: 700;
}
.publish-status.enabled { color: #15803d; }
.publish-status.disabled { color: #b91c1c; }
.publish-toggle-switch {
  display: inline-block;
  align-items: center;
  cursor: pointer;
  user-select: none;
  line-height: 0;
}
.publish-toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.publish-toggle-track {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: #e5e5ea;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: background-color 180ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 180ms ease;
}
.publish-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.1),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.publish-toggle-switch input:checked + .publish-toggle-track {
  background: #34c759;
  box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.18);
}
.publish-toggle-switch input:checked + .publish-toggle-track::after {
  transform: translateX(20px);
}
.publish-toggle-switch input:focus-visible + .publish-toggle-track {
  outline: 3px solid color-mix(in srgb, #0a84ff 45%, transparent);
  outline-offset: 3px;
}
.publish-toggle-switch input:disabled + .publish-toggle-track {
  opacity: 0.6;
}
.public-link-panel {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 10px;
  background: var(--cb-subtle-bg);
  padding: 14px;
}
.public-link-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cb-muted);
  margin-bottom: 6px;
}
.public-link-value {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--cb-text);
  word-break: break-all;
}
.public-link-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--cb-muted);
}
.public-link-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--cb-text);
}
.publish-modal-preview .publish-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cb-text);
}
.publish-modal-preview .publish-modal-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--cb-muted);
}
.share-message-card {
  margin-top: 10px;
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  background: var(--cb-subtle-bg);
  padding: 12px;
}
.share-message-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cb-text);
}
.share-message-text a {
  color: var(--cb-accent);
  text-decoration: underline;
  word-break: break-all;
}
.btn.disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.resume-editor-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.resume-top-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.resume-top-controls-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
}
.resume-top-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resume-top-field:first-child { flex: 1; }
.resume-top-field input {
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.resume-top-controls .resume-label {
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  color: var(--cb-muted);
}
.resume-top-controls select {
  width: 220px;
  max-width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.resume-rich-editor .ql-container {
  border: 1px solid var(--cb-border) !important;
  border-radius: 0 0 10px 10px;
  background: var(--cb-panel-bg);
  min-height: 76vh;
}
.resume-rich-editor .ql-toolbar {
  border: 1px solid var(--cb-border) !important;
  border-radius: 10px 10px 0 0;
  background: var(--cb-panel-bg) !important;
}
.resume-rich-editor .ql-toolbar .ql-stroke { stroke: var(--cb-text) !important; }
.resume-rich-editor .ql-toolbar .ql-fill { fill: var(--cb-text) !important; }
.resume-rich-editor .ql-toolbar .ql-picker-label { color: var(--cb-text) !important; }
/* The editor body is a faithful preview of the WeasyPrint output. Every
   metric below intentionally mirrors api/backend_db_service/resume_pdf.py
   _build_css() so the WYSIWYG matches the downloaded PDF. */
/* Preview stylesheet — must stay in lockstep with _build_css() in
   api/backend_db_service/resume_pdf.py. The editor HTML is sent verbatim to
   WeasyPrint, so any rule that exists here and not there (or vice versa) shows
   up as "the PDF doesn't match the preview". */
.resume-rich-editor .ql-editor {
  /* Unquoted: wrapping the whole stack in quotes makes it a single bogus
     family name, so the preview silently rendered in the browser default
     until the JS font picker overwrote this. */
  --resume-pdf-font: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  /* Page geometry mirrors @page Letter, 0.75in margins. 9.5in content height
     per page (11in - 2×0.75in) drives the page-break guides below. */
  width: 8.5in;
  max-width: 8.5in;
  min-height: 11in;
  margin: 24px auto;
  padding: 0.75in;
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  font-family: var(--resume-pdf-font);
  font-size: 11pt;
  line-height: 1.6;
  color: #1a1a1a !important;
  /* Page-break guides: a dashed horizontal line every 9.5in of content
     marks where WeasyPrint will start a new page. background-origin/clip
     are content-box so the gradient is anchored to the content area
     (after the 0.75in padding). */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(9.5in - 1px),
    #cbd5e1 calc(9.5in - 1px),
    #cbd5e1 9.5in
  );
  background-origin: content-box;
  background-clip: content-box;
  background-repeat: repeat-y;
  background-attachment: local;
}
.resume-rich-editor .ql-editor *,
.resume-rich-editor .ql-editor *::before,
.resume-rich-editor .ql-editor *::after {
  border-color: #bdc3c7;
}
.resume-rich-editor .ql-editor h1 {
  font-size: 22pt;
  font-weight: 700;
  margin: 0 0 0.3em 0;
  color: #000000;
  letter-spacing: 0.5pt;
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 0.25em;
}
.resume-rich-editor .ql-editor h1 + p {
  font-size: 10pt;
  margin: 0.25em 0 1em 0;
  color: #333333;
  line-height: 1.5;
}
.resume-rich-editor .ql-editor h2 {
  font-size: 13pt;
  font-weight: 700;
  margin: 1.2em 0 0.7em 0;
  color: #1a1a1a;
  letter-spacing: 0.5pt;
  border-bottom: 1.5px solid #bdc3c7;
  padding-bottom: 0.3em;
}
.resume-rich-editor .ql-editor h2:first-of-type { margin-top: 0.8em; }
.resume-rich-editor .ql-editor h3 {
  font-size: 11pt;
  font-weight: 700;
  margin: 0.75em 0 0.25em 0;
  color: #000000;
}
.resume-rich-editor .ql-editor h3 + p {
  margin: 0.15em 0 0.4em 0;
  font-size: 10pt;
  color: #555555;
}
.resume-rich-editor .ql-editor p {
  margin: 0.35em 0;
  text-align: left;
}
/* A long URL or unbroken token is wider than the 7in content box; without
   this it overflows the right margin and WeasyPrint clips it off the page. */
.resume-rich-editor .ql-editor p,
.resume-rich-editor .ql-editor li,
.resume-rich-editor .ql-editor h1,
.resume-rich-editor .ql-editor h2,
.resume-rich-editor .ql-editor h3,
.resume-rich-editor .ql-editor a {
  overflow-wrap: break-word;
}
.resume-rich-editor .ql-editor table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.resume-rich-editor .ql-editor th,
.resume-rich-editor .ql-editor td {
  border: 1px solid #bdc3c7;
  padding: 0.3em 0.5em;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.resume-rich-editor .ql-editor strong { font-weight: 700; color: #1a1a1a; }
.resume-rich-editor .ql-editor em { font-style: italic; color: #333333; }
.resume-rich-editor .ql-editor a {
  color: #0066cc;
  text-decoration: underline;
}
.resume-rich-editor .ql-editor ul,
.resume-rich-editor .ql-editor ol {
  margin: 0.5em 0;
  /* Quill's own `.ql-editor li` adds 1.5em, so 0.25em here puts list text at
     1.75em — the same place the PDF puts it. */
  padding-left: 0.25em;
}
.resume-rich-editor .ql-editor li {
  margin: 0.3em 0;
  line-height: 1.55;
  color: #1a1a1a;
}
.resume-rich-editor .ql-editor hr {
  border: 0;
  border-top: 1px solid #bdc3c7;
  margin: 0.5em 0;
}
.resume-rich-editor .ql-editor pre.ql-syntax {
  background: #f5f5f4 !important;
  color: #1a1a1a !important;
  border: 1px solid #e7e5e4 !important;
}
.resume-rich-editor .ql-editor ::selection {
  background: rgba(0, 102, 204, 0.18);
  color: #1a1a1a;
}
.resume-editor-hint {
  font-size: 12px;
  color: var(--cb-muted);
}
.resume-editor-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 8px;
  padding: 10px;
}
.tool-result-box {
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  background: var(--cb-subtle-bg);
  padding: 10px;
  white-space: pre-wrap;
}
.tool-result-title { font-weight: 700; margin-bottom: 8px; }
.cover-letter-preview {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cb-text);
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
}
.cover-letter-preview p { margin-bottom: 12px; }
.research-axes-grid {
  display: grid;
  gap: 8px;
}
.research-axis {
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  background: var(--cb-subtle-bg);
  padding: 10px;
}
.research-axis-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--cb-accent);
}
.research-axis-findings {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-form { display: grid; gap: 8px; }
.modal-form input, .modal-form textarea, .modal-form select { width: 100%; border: 1px solid var(--cb-border); border-radius: 8px; padding: 9px 10px; background: var(--cb-input-bg); color: var(--cb-text); font-family: var(--cb-font-body); font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
body.nav-collapsed .layout { grid-template-columns: 1fr; }
body.nav-collapsed .sidebar { display: none; }
/* --- Action button --- */
.chat-action-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cb-font-body);
  color: white;
  background: var(--cb-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease;
}
.chat-action-btn:hover {
  background: var(--cb-accent-strong);
}
.chat-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* --- Multi-item notice --- */
.msg-multi-item-notice {
  border-left: 3px solid color-mix(in srgb, var(--cb-accent) 50%, var(--cb-border));
}
.msg-multi-item-notice .upload-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cb-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg-multi-item-notice .upload-hint:hover {
  color: var(--cb-accent-strong);
}
/* --- Guard notice --- */
.msg-guard-notice .msg-bubble {
  background: transparent;
  border: 1px dashed var(--cb-border);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--cb-muted);
}
/* --- Resolving indicator --- */
.resolving {
  font-size: 12px;
  color: var(--cb-muted);
  font-style: italic;
  animation: pulse 1.2s ease-in-out infinite;
}
body[data-theme-mode="night"] {
  --cb-body-bg: #141210;
  --cb-text: #e7e5e4;
  --cb-app-bg: #1a1816;
  --cb-border: #302c28;
  --cb-panel-bg: #1f1d1a;
  --cb-subtle-bg: #262320;
  --cb-muted: #a8a29e;
  --cb-accent: #818cf8;
  --cb-accent-strong: #a5b4fc;
  --cb-accent-soft: #1e1b4b;
  --cb-secondary: #a8a29e;
  --cb-danger: #f87171;
  --cb-input-bg: #232019;
  --cb-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}
body[data-theme-mode="night"] .main,
body[data-theme-mode="night"] .content {
  background: var(--cb-panel-bg);
  color: var(--cb-text);
}
body[data-theme-mode="night"] .sidebar {
  background: var(--cb-subtle-bg);
  border-right-color: var(--cb-border);
}
body[data-theme-mode="night"] .sidebar .nav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}
body[data-theme-mode="night"] .sidebar .nav-btn.active {
  background: var(--cb-accent-soft);
  color: var(--cb-accent);
}
body[data-theme-mode="night"] .sidebar .nav-btn.nav-btn-logout:hover {
  background: color-mix(in srgb, var(--cb-danger) 18%, transparent);
}
body[data-theme-mode="night"] .theme-switch,
body[data-theme-mode="night"] .muted,
body[data-theme-mode="night"] .field-label,
body[data-theme-mode="night"] .resume-editor-hint {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .theme-select,
body[data-theme-mode="night"] .card,
body[data-theme-mode="night"] .chat-thread,
body[data-theme-mode="night"] .composer,
body[data-theme-mode="night"] .modal-card,
body[data-theme-mode="night"] .tool-result-box,
body[data-theme-mode="night"] .exp-left,
body[data-theme-mode="night"] .resume-top-controls select,
body[data-theme-mode="night"] .resume-top-field input,
body[data-theme-mode="night"] .resume-rich-editor .ql-toolbar,
body[data-theme-mode="night"] .resume-rich-editor .ql-container,
body[data-theme-mode="night"] .inline-form input,
body[data-theme-mode="night"] .inline-form textarea,
body[data-theme-mode="night"] .inline-form select,
body[data-theme-mode="night"] .modal-form input,
body[data-theme-mode="night"] .modal-form textarea,
body[data-theme-mode="night"] .modal-form select,
body[data-theme-mode="night"] textarea,
body[data-theme-mode="night"] .composer-upload-btn,
body[data-theme-mode="night"] .msg-bubble {
  background: var(--cb-input-bg) !important;
  color: var(--cb-text) !important;
  border-color: var(--cb-border) !important;
}
body[data-theme-mode="night"] .chat-nav-btn {
  border-color: var(--cb-border) !important;
  color: var(--cb-text) !important;
}
body[data-theme-mode="night"] .chat-nav-btn:hover {
  background: rgba(255,255,255,.08) !important;
}
body[data-theme-mode="night"] .saving-overlay {
  background: rgba(10, 8, 6, 0.35);
}
body[data-theme-mode="night"] .saving-card {
  border-color: var(--cb-border);
  background: var(--cb-panel-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
body[data-theme-mode="night"] .composer-drag-dot { background: color-mix(in srgb, var(--cb-muted) 50%, transparent); }
body[data-theme-mode="night"] .composer { box-shadow: 0 1px 0 0 color-mix(in srgb, white 6%, transparent) inset, 0 22px 48px -14px rgba(0, 0, 0, 0.55), 0 8px 16px -6px rgba(0, 0, 0, 0.35); }
body[data-theme-mode="night"] .msg.user .msg-bubble {
  background: var(--cb-accent-soft) !important;
  border-color: color-mix(in srgb, var(--cb-accent) 20%, transparent) !important;
}
body[data-theme-mode="night"] .contact-chip {
  background: color-mix(in srgb, var(--cb-border) 50%, transparent);
}
body[data-theme-mode="night"] .contact-row-icon {
  background: color-mix(in srgb, var(--cb-border) 55%, transparent);
}
body[data-theme-mode="night"] .exp-period,
body[data-theme-mode="night"] .summary-exp-date {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .summary-exp-title,
body[data-theme-mode="night"] .summary-exp-body,
body[data-theme-mode="night"] .exp-role,
body[data-theme-mode="night"] .line strong,
body[data-theme-mode="night"] .tool-result-title {
  color: var(--cb-text);
}
body[data-theme-mode="night"] .skills-toolbar {
  background: var(--cb-input-bg) !important;
}
body[data-theme-mode="night"] .skills-group {
  border-top-color: color-mix(in srgb, var(--cb-border) 72%, transparent);
}
body[data-theme-mode="night"] .skills-group-count {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .skill-card {
  background: var(--cb-input-bg);
  border-color: color-mix(in srgb, var(--cb-border) 88%, var(--skill-accent) 12%);
}
body[data-theme-mode="night"] .skill-card-evidence-link,
body[data-theme-mode="night"] .skill-card-empty,
body[data-theme-mode="night"] .skill-card-edit-label {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .polish-field-btn {
  background: #8b5cf6;
}
body[data-theme-mode="night"] .polish-field-btn:hover {
  background: #7c3aed;
}
body[data-theme-mode="night"] .ai-gen-btn {
  background: #e58f0c;
}
body[data-theme-mode="night"] .ai-gen-btn:hover {
  background: #d97706;
}
body[data-theme-mode="night"] .btn.ghost {
  background: var(--cb-subtle-bg);
  color: var(--cb-text);
  border-color: var(--cb-border);
}
body[data-theme-mode="night"] .public-link-panel {
  background: linear-gradient(180deg, #221f1a 0%, #1e1b17 100%);
}
body[data-theme-mode="night"] .share-message-card {
  background: color-mix(in srgb, var(--cb-subtle-bg) 86%, black);
}
body[data-theme-mode="night"] .publish-status.enabled { color: #4ade80; }
body[data-theme-mode="night"] .publish-status.disabled { color: #f87171; }
body[data-theme-mode="night"] .publish-toggle-track {
  background: #3a3630;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body[data-theme-mode="night"] .publish-toggle-switch input:checked + .publish-toggle-track {
  background: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
}
body[data-theme-mode="night"] .admin-users-table {
  background: var(--cb-input-bg);
}
body[data-theme-mode="night"] .admin-users-table thead th {
  background: color-mix(in srgb, var(--cb-input-bg) 78%, black);
}
body[data-theme-mode="night"] .admin-pill.role-admin {
  color: var(--cb-accent);
}
body[data-theme-mode="night"] .admin-pill.status-active {
  color: #6ee7b7;
}
body[data-theme-mode="night"] .admin-pill.status-disabled {
  color: #fca5a5;
}
body[data-theme-mode="night"] .cb-month-year-popover {
  background: var(--cb-input-bg);
  color: var(--cb-text);
  border-color: var(--cb-accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
body[data-theme-mode="night"] .cb-month-year-popover .cb-month-cell {
  color: var(--cb-text);
}
body[data-theme-mode="night"] .cb-month-year-popover .cb-month-cell.is-selected {
  background: var(--cb-accent);
  color: #fff;
}
@media (max-width: 900px) {
  .page-shell { padding: 10px 8px 174px; }
  .layout { grid-template-columns: 1fr; min-height: calc(100dvh - 20px); }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .nav-toggle-btn { min-width: 40px; width: 40px; }
  .main { padding: 16px 14px; }
  .content { max-height: none; padding-right: 0; }
  .composer { right: 6px; width: calc(100vw - 12px); height: min(480px, calc(100vh - 24px)); bottom: var(--composer-bottom, 8px); }
  .composer-input-row { flex-wrap: wrap; }
  .composer-send-btn { width: auto; }
  .evidence-filter-row { grid-template-columns: 1fr; }
  .field-pair-row { grid-template-columns: 1fr; gap: 8px; }
  .inline-date-range-control { grid-template-columns: auto minmax(0, 1fr); }
  .inline-date-range-current { grid-column: 2; }
  .msg-bubble { max-width: calc(100vw - 96px); }
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .resume-top-controls { flex-direction: column; align-items: flex-start; }
  .resume-top-controls select { width: 100%; }
  .resume-top-controls-row { flex-direction: column; align-items: stretch; }
  .resume-rich-editor .ql-toolbar { border-radius: 8px 8px 0 0; }
  .resume-rich-editor .ql-container { min-height: 66vh; }
  .resume-rich-editor .ql-editor { min-height: 720px; margin: 10px auto; padding: 28px 20px; }
  .firebase-auth-grid-2 { grid-template-columns: 1fr; }
  .admin-users-toolbar { grid-template-columns: 1fr; }
  .admin-user-actions { flex-direction: column; align-items: stretch; }
  .admin-users-table-wrap { max-height: min(50vh, 460px); }
  .field-row { grid-template-columns: 1fr; align-items: stretch; }
  .exp-section { grid-template-columns: 1fr; }
  .exp-left { position: static; }
  .exp-date-inline { grid-template-columns: 1fr; }
  .skills-toolbar { padding: 10px 12px; }
  .skills-group-head { align-items: flex-start; }
  .skills-grid { grid-template-columns: 1fr; }
  .skill-card-footer,
  .skill-card-actions { width: 100%; }
  .skill-card-actions { margin-left: 0; }
  .publish-toggle-row { flex-direction: column; align-items: flex-start; }

  /* Touch-friendly button sizing */
  .btn { padding: 9px 16px; font-size: 13.5px; }
  .btn.icon { padding: 7px 12px; }
  .btn.ghost { padding: 9px 16px; }

  /* Tool card actions — stack vertically on narrow screens */
  .tool-card .actions { flex-direction: column; }
  .tool-card .actions .btn { width: 100%; text-align: center; }
  .tool-card textarea { min-height: 100px; font-size: 14px; }
  .tool-card select { font-size: 14px; padding: 10px; }
  .tool-card input { font-size: 14px; padding: 10px; }

  /* Tool modal — full width on mobile */
  .tool-modal-card { width: calc(100vw - 12px); }
  .tool-modal-body { max-height: 78vh; -webkit-overflow-scrolling: touch; }

  /* Resume editor action buttons — wrap into grid */
  .resume-editor-layout + .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .resume-editor-layout + .actions .btn { width: 100%; text-align: center; font-size: 12.5px; padding: 8px 6px; }

  /* Contact chips — allow more text on mobile */
  .contact-chip-text { max-width: 180px; }
  .contact-chip { padding: 6px 12px 6px 10px; }

  /* Scoring grid — prevent label overflow */
  .scoring-label { min-width: 100px; font-size: 0.82em; }
  .scoring-value { min-width: 30px; }

  /* Match eval table — horizontal scroll */
  .req-mapping-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Topbar — compact on mobile */
  .topbar { flex-wrap: wrap; gap: 6px; }
  .topbar h2 { font-size: 18px; }

  /* Sidebar nav buttons — bigger touch targets */
  .sidebar .nav-btn { padding: 10px 12px; font-size: 14px; }
  .sidebar nav { gap: 2px; }

  /* Tool history cards — tighter on mobile */
  .tool-history-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tool-history-actions { align-self: flex-end; }
  .tool-history-pre { font-size: 12px; }
}

/* Extra-small screens (phones in portrait) */
@media (max-width: 480px) {
  .page-shell { padding: 6px 4px 170px; }
  .layout { border-radius: 10px; }
  .main { padding: 12px 10px; }
  .card { padding: 12px; margin-bottom: 10px; }
  h2 { font-size: 18px; }
  h3 { font-size: 15px; }

  /* Single-column tool buttons */
  .tool-card .actions { grid-template-columns: 1fr; }
  .resume-editor-layout + .actions { grid-template-columns: 1fr; }

  /* Composer fills the screen */
  .composer { right: 0; width: 100vw; border-radius: 16px 16px 0 0; bottom: 0 !important; }
  .composer-input-row textarea { font-size: 16px; /* prevents iOS zoom on focus */ }

  /* Nav collapses tighter */
  .sidebar { padding: 12px 10px; }
  .sidebar .nav-btn { padding: 8px 10px; font-size: 13px; }

  /* Contact strip wraps naturally */
  .contact-chip-text { max-width: 140px; }
}

/* Enhanced match eval modal */
.match-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.82em; font-weight:500; }
.match-strong { background:#ecfdf5; color:#166534; }
.match-partial { background:#fefce8; color:#854d0e; }
.match-gap { background:#fef2f2; color:#b91c1c; }
.match-mitigation { font-size:0.85em; color:var(--muted); margin-top:2px; }
.req-mapping-table { width:100%; border-collapse:collapse; font-size:0.9em; }
.req-mapping-table th, .req-mapping-table td { padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); }
.req-mapping-table th { font-weight:600; font-size:0.85em; color:var(--muted); }
.scoring-grid { display:flex; flex-direction:column; gap:6px; }
.scoring-row { display:flex; align-items:center; gap:8px; }
.scoring-label { min-width:140px; font-size:0.88em; }
.scoring-bar-bg { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.scoring-bar-fill { height:100%; background:var(--cb-accent); border-radius:4px; transition:width 0.3s; }
.scoring-value { min-width:36px; font-size:0.85em; text-align:right; color:var(--muted); }

/* ---------------------------------------------------------------------
 * Resume ingest overlay — editorial workshop treatment.
 *
 * A calm, paper-like surface with a refined serif heading, a numbered
 * step ladder (not a generic progress bar), and monoline SVG glyphs
 * per phase. Reuses the app's existing .modal-overlay backdrop so it
 * layers with the rest of the modal stack.
 *
 * The overlay defines its own surface colours via --ingest-* custom
 * properties so both light and dark themes can be tuned independently
 * of the app's chrome. Accent / foreground come from the app's existing
 * variables so brand identity stays consistent.
 * --------------------------------------------------------------------- */

/* Default (light) surface tokens — warm off-white paper, deep ink. */
.ingest-overlay {
  --ingest-paper: oklch(98.5% 0.008 85);
  --ingest-paper-tint: oklch(95.5% 0.012 85);
  --ingest-ink: oklch(22% 0.02 60);
  --ingest-muted: oklch(52% 0.02 70);
  --ingest-line: oklch(88% 0.01 75);
  --ingest-accent: var(--cb-accent, oklch(52% 0.18 250));
  --ingest-on-accent: oklch(99% 0.003 85);
  --ingest-shadow: 0 30px 60px -24px oklch(22% 0.05 60 / 0.22), 0 8px 20px -10px oklch(22% 0.04 60 / 0.12);
}

body[data-theme-mode="night"] .ingest-overlay {
  --ingest-paper: oklch(21% 0.022 260);
  --ingest-paper-tint: oklch(25% 0.025 260);
  --ingest-ink: oklch(94% 0.015 85);
  --ingest-muted: oklch(68% 0.02 250);
  --ingest-line: oklch(32% 0.025 260);
  --ingest-shadow: 0 30px 70px -20px oklch(0% 0 0 / 0.55), 0 8px 24px -10px oklch(0% 0 0 / 0.35);
}

/* Sheet container — feels like a printed card, not a web modal */
.ingest-sheet {
  width: min(540px, calc(100vw - 24px));
  background: var(--ingest-paper);
  color: var(--ingest-ink);
  border: 1px solid var(--ingest-line);
  border-radius: 6px;
  padding: clamp(24px, 3.2vw, 40px);
  box-shadow: var(--ingest-shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  animation: ingest-sheet-in 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes ingest-sheet-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ingest-sheet { animation: none; }
}

/* Header: eyebrow + serif title + elapsed pill */
.ingest-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 4px;
  align-items: baseline;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.ingest-sheet-eyebrow {
  grid-column: 1;
  grid-row: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ingest-muted);
}
.ingest-sheet-title {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ingest-ink);
}
.ingest-sheet-elapsed {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ingest-muted);
  padding: 5px 12px;
  background: var(--ingest-paper-tint);
  border: 1px solid var(--ingest-line);
  border-radius: 999px;
  white-space: nowrap;
}

/* Step ladder with a vertical spine running through the markers */
.ingest-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.ingest-steps::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--ingest-line) 0,
    var(--ingest-line) 50%,
    color-mix(in oklab, var(--ingest-line) 50%, transparent) 100%
  );
}
.ingest-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 16px;
  padding: 10px 0;
  align-items: start;
}
.ingest-step-marker {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ingest-paper);
  border: 1px solid var(--ingest-line);
  color: var(--ingest-muted);
  transition: background 320ms ease, border-color 320ms ease, color 320ms ease, box-shadow 320ms ease;
}
.ingest-step-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 240ms ease;
}
.ingest-step-glyph svg { display: block; }
.ingest-step-glyph-check {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Upcoming (default) — hollow ring, muted glyph */
.ingest-step[data-state="upcoming"] .ingest-step-glyph-check { opacity: 0; }
.ingest-step[data-state="upcoming"] .ingest-step-glyph-phase { opacity: 0.55; }

/* Active — accent-filled marker with concentric halo + gentle pulse */
.ingest-step[data-state="active"] .ingest-step-marker {
  background: var(--ingest-accent);
  border-color: var(--ingest-accent);
  color: var(--ingest-on-accent);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ingest-accent) 18%, transparent),
    0 0 0 8px color-mix(in oklab, var(--ingest-accent) 6%, transparent);
  animation: ingest-pulse 2.2s ease-in-out infinite;
}
.ingest-step[data-state="active"] .ingest-step-glyph-phase { opacity: 1; }
.ingest-step[data-state="active"] .ingest-step-glyph-check { opacity: 0; }
@keyframes ingest-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--ingest-accent) 20%, transparent),
      0 0 0 8px color-mix(in oklab, var(--ingest-accent) 6%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in oklab, var(--ingest-accent) 14%, transparent),
      0 0 0 12px color-mix(in oklab, var(--ingest-accent) 4%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ingest-step[data-state="active"] .ingest-step-marker { animation: none; }
}

/* Complete — ink-filled marker, check glyph crossfades in */
.ingest-step[data-state="complete"] .ingest-step-marker {
  background: var(--ingest-ink);
  border-color: var(--ingest-ink);
  color: var(--ingest-paper);
}
.ingest-step[data-state="complete"] .ingest-step-glyph-phase { opacity: 0; }
.ingest-step[data-state="complete"] .ingest-step-glyph-check { opacity: 1; }

/* Step body: number + title + current message (message only on active) */
.ingest-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 3px;
}
.ingest-step-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.ingest-step-number {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ingest-muted);
  min-width: 20px;
}
.ingest-step-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ingest-muted);
  transition: color 280ms ease, font-weight 280ms ease;
}
.ingest-step[data-state="active"] .ingest-step-number,
.ingest-step[data-state="complete"] .ingest-step-number {
  color: var(--ingest-ink);
}
.ingest-step[data-state="active"] .ingest-step-title {
  color: var(--ingest-ink);
  font-weight: 600;
}
.ingest-step[data-state="complete"] .ingest-step-title {
  color: var(--ingest-ink);
}
.ingest-step-current {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ingest-muted);
  line-height: 1.5;
  min-height: 0;
}
.ingest-step[data-state="active"] .ingest-step-current:not(:empty) {
  /* subtle fade-in when the current-phase message updates */
  animation: ingest-current-in 260ms ease both;
}
@keyframes ingest-current-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* Footer: expectation hint + "Continue in background" text-link */
.ingest-sheet-foot {
  margin-top: clamp(24px, 2.8vw, 32px);
  padding-top: 20px;
  border-top: 1px solid var(--ingest-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ingest-sheet-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ingest-muted);
  max-width: 42em;
}
.ingest-sheet-note strong {
  color: var(--ingest-ink);
  font-weight: 600;
}
.ingest-sheet-actions {
  display: flex;
  justify-content: flex-end;
}
.ingest-sheet-dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ingest-accent);
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 180ms ease, gap 220ms ease;
}
.ingest-sheet-dismiss:hover {
  color: color-mix(in oklab, var(--ingest-accent) 70%, var(--ingest-ink));
  gap: 9px;
}
.ingest-sheet-dismiss:focus-visible {
  outline: 2px solid var(--ingest-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.ingest-sheet-dismiss-arrow {
  transition: transform 220ms ease;
}
.ingest-sheet-dismiss:hover .ingest-sheet-dismiss-arrow {
  transform: translateX(2px);
}

/* --- Compact "applying changes" variant, shared visual language --- */
.ingest-sheet-compact { max-width: 460px; width: min(460px, calc(100vw - 24px)); }
.ingest-apply-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 4px;
}
.ingest-apply-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ingest-accent);
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ingest-accent) 20%, transparent),
    0 0 0 8px color-mix(in oklab, var(--ingest-accent) 6%, transparent);
  animation: ingest-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ingest-apply-pulse { animation: none; }
}
.ingest-apply-message {
  margin: 0;
  font-size: 14.5px;
  color: var(--ingest-ink);
  line-height: 1.5;
}

/* Responsive — on narrow widths keep the elapsed pill on its own line
   instead of fighting the title for horizontal space. */
@media (max-width: 480px) {
  .ingest-sheet-head {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .ingest-sheet-eyebrow { grid-row: 1; }
  .ingest-sheet-elapsed { grid-column: 1; grid-row: 3; justify-self: start; }
  .ingest-sheet-title   { grid-row: 2; font-size: 22px; }
}

/* ---------------------------------------------------------------------------
 * Skill discovery — review variant of the ingest sheet
 *
 * Reuses .modal-overlay / .ingest-overlay / .ingest-sheet / .ingest-sheet-head
 * / .ingest-sheet-eyebrow / .ingest-sheet-title / .ingest-sheet-foot from the
 * resume ingest treatment so both flows share tokens, dark-mode handling, and
 * animation. This block only adds what the ingest overlay doesn't have: a
 * scrollable list of selectable items with per-section select-all and a
 * sticky action bar at the top of the sheet.
 * --------------------------------------------------------------------------- */

/* Wider sheet variant with a fixed action bar + scrollable body. The default
 * .ingest-sheet is fine for status views but caps at 540px and doesn't scroll. */
.ingest-sheet-review {
  width: min(640px, calc(100vw - 24px));
  max-height: min(86vh, 760px);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ingest-sheet-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--ingest-line);
  background: var(--ingest-paper);
  flex: 0 0 auto;
}
.ingest-sheet-review-scroll {
  padding: 24px clamp(20px, 3vw, 32px) 28px;
  overflow-y: auto;
  flex: 1 1 auto;
  display: grid;
  gap: 24px;
}
.ingest-sheet-review-scroll .ingest-sheet-head { margin-bottom: 0; }

/* Tab strip — two underlined buttons, active gets an ink rule + ink colour. */
.ingest-sheet-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--ingest-line);
  margin-bottom: -8px;
}
.ingest-sheet-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 0 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  position: relative;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  transition: color 200ms ease;
}
.ingest-sheet-tab:hover:not([disabled]) {
  color: color-mix(in oklab, var(--ingest-ink) 80%, transparent);
}
.ingest-sheet-tab[aria-selected="true"] {
  color: var(--ingest-ink);
}
.ingest-sheet-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ingest-ink);
}
.ingest-sheet-tab[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.ingest-sheet-tab-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ingest-muted);
}
.ingest-sheet-tab[aria-selected="true"] .ingest-sheet-tab-count {
  color: var(--ingest-ink);
}

/* Pane: select-all row + flat item list. */
.ingest-sheet-pane { display: grid; gap: 10px; }
.ingest-sheet-pane[hidden] { display: none; }
.ingest-sheet-selectall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  padding: 4px 0 8px;
}
.ingest-sheet-list { display: grid; gap: 0; }

.ingest-sheet-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ingest-line) 60%, transparent);
  cursor: pointer;
}
.ingest-sheet-item:last-child { border-bottom: 0; }
.ingest-sheet-item-body { display: grid; gap: 4px; min-width: 0; }
.ingest-sheet-item-name {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ingest-ink);
}
.ingest-sheet-item-meta {
  font-size: 12px;
  color: var(--ingest-muted);
  letter-spacing: 0.01em;
}
.ingest-sheet-item-arrow {
  display: inline-block;
  margin: 0 5px;
  color: color-mix(in oklab, var(--ingest-muted) 70%, transparent);
}
.ingest-sheet-evidence-list {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.ingest-sheet-evidence-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--ingest-ink) 78%, transparent);
}
.ingest-sheet-evidence-plus {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 13px;
  color: var(--ingest-accent);
  font-variant-numeric: tabular-nums;
  width: 10px;
  text-align: center;
}
.ingest-sheet-evidence-text {
  flex: 1 1 auto;
  font-style: italic;
  min-width: 0;
}
.ingest-sheet-evidence-tag {
  flex: 0 0 auto;
  padding: 1px 6px 2px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  border: 1px solid var(--ingest-line);
  border-radius: 999px;
}

.ingest-sheet-empty {
  font-style: italic;
  font-size: 13px;
  color: var(--ingest-muted);
  padding: 8px 0;
}

/* Custom checkbox in the ingest-paper palette. */
.ingest-sheet-check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  border: 1px solid color-mix(in oklab, var(--ingest-ink) 35%, transparent);
  background: var(--ingest-paper);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition: border-color 160ms ease, background 160ms ease;
}
.ingest-sheet-check:hover {
  border-color: color-mix(in oklab, var(--ingest-ink) 60%, transparent);
}
.ingest-sheet-check:checked,
.ingest-sheet-check:indeterminate {
  background: var(--ingest-ink);
  border-color: var(--ingest-ink);
}
.ingest-sheet-check:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--ingest-paper);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.ingest-sheet-check:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 6.5px;
  height: 1.6px;
  background: var(--ingest-paper);
}
.ingest-sheet-check:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ingest-accent) 60%, transparent);
  outline-offset: 2px;
}

/* Primary apply button styled in the ingest accent. */
.ingest-sheet-apply {
  appearance: none;
  border: 0;
  padding: 9px 18px;
  background: var(--ingest-accent);
  color: var(--ingest-on-accent);
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 200ms ease, background 200ms ease, opacity 200ms ease;
}
.ingest-sheet-apply:hover { transform: translateY(-1px); }
.ingest-sheet-apply[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Disable the toolbar trigger while extraction is in flight or pending review.
 * Body attribute survives any re-render of the skills section. */
body[data-skx-busy="true"] [data-action="skill-extract-open"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .ingest-sheet-review { max-height: 92vh; }
  .ingest-sheet-review-actions { padding: 12px 18px; }
  .ingest-sheet-review-scroll { padding: 18px 18px 22px; }
}

/* Resume ingest review modal — subsection rows inside the .ingest-sheet-pane.
   The pane itself is reused from skill discovery; subsections are an extra
   layer of grouping (e.g. Experiences, Education, Training, Skills) within
   each tab so the user can batch-select by category. */
.ingest-sheet-subsection { display: grid; gap: 8px; margin-top: 18px; }
.ingest-sheet-subsection:first-child { margin-top: 0; }
.ingest-sheet-subsection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ingest-line);
}
.ingest-sheet-subsection-head .ingest-sheet-selectall {
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ingest-ink);
}

/* Tab-level select-all sits between the tabs and the pane subsections. */
.ingest-sheet-selectall--top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  user-select: none;
}