/* ============================================================================
   Atlas — Handshake light design system
   Palette borrowed from handshake.org: white surfaces, black text, purple accent.
   One stylesheet shared across Dashboard, Projects, Repos, Domains, forms.
   ========================================================================== */

:root {
  /* surfaces (white, layered up with off-white) */
  --bg-void: #ffffff;
  --bg-base: #ffffff;
  --bg-surface: #ffffff;
  --bg-raised: #f7f9fb;
  --bg-hover: #f0f3f7;

  /* lines */
  --border-dim: #ececf0;
  --border: #e0e0e6;
  --border-bright: #cccccc;

  /* text */
  --text-primary: #000000;
  --text-secondary: #4a4a55;
  --text-muted: #8a8a96;
  --text-faint: #b4b4be;

  /* single accent — handshake purple */
  --teal: #693afa;
  --teal-dim: rgba(105, 58, 250, 0.10);

  /* brand / provider (used only as small dots + KPI accents) */
  --railway: #693afa;
  --netlify: #0ea5e9;
  --cloudflare: #f6821f;
  --github: #4a4a55;

  /* semantic (tuned for a light background) */
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --indigo: #6366f1;

  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 14px;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--teal-dim); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg-void); }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------- app shell */
:root { --sidebar-w: 220px; --sidebar-w-compact: 56px; --topbar-h: 56px; --drawer-duration: 170ms; }

/* --- sidebar --- */
.sidebar {
  position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh;
  background: var(--bg-surface); border-right: 1px solid var(--border-dim);
  display: flex; flex-direction: column; z-index: 200; overflow: hidden;
  transition: width var(--drawer-duration) ease-out;
}
.main-area { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--drawer-duration) ease-out; }

.sidebar-brand {
  height: var(--topbar-h); display: flex; align-items: center; gap: 10px;
  padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--border-dim);
}
.sidebar-brand .logo {
  width: 30px; height: 30px; border-radius: 9px; background: var(--teal);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em; flex-shrink: 0;
}
.sidebar-brand .wordmark { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.sidebar-collapse-btn {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  margin-left: auto; padding: 0; background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s, transform .12s;
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-collapse-btn svg { width: 15px; height: 15px; pointer-events: none; }

/* --- compact (icon-only) sidebar --- */
.nav-compact .sidebar { width: var(--sidebar-w-compact); }
.nav-compact .sidebar ~ .main-area { margin-left: var(--sidebar-w-compact); }
.nav-compact .sidebar .wordmark,
.nav-compact .sidebar .nav-section-label,
.nav-compact .sidebar .btn-sync .btn-label,
.nav-compact .sidebar .nav-divider { display: none; }
.nav-compact .sidebar .sidebar-brand { padding: 0; justify-content: center; gap: 0; position: relative; }
.nav-compact .sidebar .sidebar-collapse-btn { margin-left: 0; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; }
.nav-compact .sidebar .sidebar-collapse-btn svg { transform: rotate(180deg); }
.nav-compact .sidebar .nav-list { padding: 0 8px; }
.nav-compact .sidebar .nav-link {
  justify-content: center; padding: 8px; font-size: 0; /* hide the bare text-node label, keep .nav-icon (has its own size) */
}
.nav-compact .sidebar .btn-sync { padding: 7px; font-size: 0; }
.nav-compact .sidebar .btn-sync svg { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .main-area { transition: none; }
}

.sidebar-body { flex: 1; overflow-y: auto; padding: 10px 0; display: flex; flex-direction: column; }
.nav-list { list-style: none; margin: 0; padding: 0 8px; }
.nav-list li { margin-bottom: 1px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; position: relative;
  transition: background .12s, color .12s; border-left: 3px solid transparent; margin-left: -3px;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.nav-link:hover .nav-icon { color: var(--text-secondary); }
.nav-link.active { background: var(--bg-hover); color: var(--text-primary); border-left-color: var(--teal); }
.nav-link.active .nav-icon { color: var(--teal); }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); transition: color .12s; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-divider { height: 1px; background: var(--border-dim); margin: 10px 8px; }
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0 18px; margin: 2px 0 4px; display: block; }

.sidebar-footer { padding: 10px 8px 14px; flex-shrink: 0; border-top: 1px solid var(--border-dim); }
.btn-sync {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 7px 12px; font-size: 12px; font-weight: 600; font-family: var(--font);
  color: var(--teal); background: var(--teal-dim); border: 1px solid rgba(105,58,250,.22);
  border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, border-color .12s;
}
.btn-sync:hover { background: rgba(105,58,250,.16); border-color: rgba(105,58,250,.35); }
.btn-sync svg { width: 15px; height: 15px; }

/* --- top bar (inside content area) --- */
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; padding: 0 24px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-dim); flex-shrink: 0; position: sticky; top: 0; z-index: 50;
}
.topbar-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------------------------------------------------- Ask Atlas global search */
.topsearch { position: relative; margin-left: 24px; flex: 1; max-width: 460px; }
.topsearch > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.topsearch input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font-size: 13px; font-family: var(--font); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.topsearch input::placeholder { color: var(--text-muted); }
.topsearch input:focus { background: var(--bg-surface); border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  max-height: 60vh; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 5px;
}
.search-group { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 4px; }
.search-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); }
.search-item:hover, .search-item:focus { background: var(--bg-hover); text-decoration: none; }
.search-item .si-icon { flex: 0 0 auto; width: 18px; display: grid; place-items: center; color: var(--text-muted); }
.search-item .si-icon svg { width: 15px; height: 15px; }
.search-item.shortcut .si-icon { color: var(--amber); }
.si-main { min-width: 0; display: flex; flex-direction: column; }
.si-label { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-type { margin-left: auto; flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.search-empty { padding: 14px 12px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 640px) { .topsearch { margin-left: 12px; } .topbar-title { display: none; } }
.btn-logout {
  font-size: 12px; font-weight: 500; font-family: var(--font); color: var(--text-muted);
  background: transparent; border: 1px solid var(--border-dim); border-radius: var(--radius-sm);
  padding: 5px 10px; cursor: pointer; text-decoration: none; transition: color .12s, border-color .12s, background .12s;
}
.btn-logout:hover { color: var(--text-secondary); border-color: var(--border); background: var(--bg-raised); text-decoration: none; }

/* user chip (top bar) */
.user-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.user-chip .username { font-weight: 500; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); color: #fff; font-size: 11px; font-weight: 700;
  overflow: hidden; flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* brand lockup used on the login card (unauthenticated, no sidebar) */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand .logo {
  width: 26px; height: 26px; border-radius: 7px; background: var(--teal);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px;
}

/* --- mobile drawer --- */
.btn-hamburger {
  display: none; align-items: center; justify-content: center; width: 36px; height: 36px;
  margin-right: 10px; padding: 0; background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s;
}
.btn-hamburger:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-hamburger svg { width: 20px; height: 20px; pointer-events: none; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 190; }

@media (max-width: 767px) {
  .sidebar {
    transform: translateX(-100%); transition: transform var(--drawer-duration) ease-out;
    will-change: transform; box-shadow: var(--shadow-lg);
  }
  body.drawer-open .sidebar { transform: translateX(0); }
  body.drawer-open .sidebar-backdrop { display: block; }
  .main-area { margin-left: 0; }
  .btn-hamburger { display: flex; }
  .topbar { padding: 0 16px; }

  /* tighter page gutters */
  .page { padding: 18px 14px 48px; }

  /* dense tables scroll horizontally instead of getting clipped/squished */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data, table.data-table { min-width: 640px; }

  /* search takes its own full-width row; filters/actions wrap below it */
  .toolbar .search { flex-basis: 100%; min-width: 0; max-width: none; }

  /* expandable detail panels stack vertically */
  .dwrap { grid-template-columns: 1fr; }
  .ro-grid { grid-template-columns: 1fr; }
  .panel { border-right: none; border-bottom: 1px solid var(--border-dim); }
  .panel:last-child { border-bottom: none; }

  /* forms + login fit small screens */
  .form-actions { flex-wrap: wrap; }
  .login-wrap { padding: 16px; }
  .login-card { width: 100%; max-width: 360px; }
}
@media (max-width: 400px) { .user-chip .username { display: none; } }

/* --- pagination --- */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 14px; }
.pagination-bar .count-note { font-size: 12px; color: var(--text-muted); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 14px; }
.pagination-bar .pagination { margin-top: 0; }
.pagination .page-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 32px; height: 32px; padding: 0 9px; font-size: 12px; font-weight: 500; font-family: var(--font);
  color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; line-height: 1;
  transition: background .12s, border-color .12s, color .12s;
}
.pagination .page-btn:hover { text-decoration: none; }
.pagination .page-btn:hover:not(:disabled) { background: var(--bg-raised); border-color: var(--border-bright); color: var(--text-primary); }
.pagination .page-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.pagination .page-btn:disabled { opacity: .45; cursor: default; }
/* Action buttons greyed while their background job is running (Sync now, etc.). */
.btn:disabled, .btn[disabled], .btn-sync:disabled, .btn-sync[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.pagination .page-ellipsis { padding: 0 4px; color: var(--text-faint); font-size: 12px; }

/* ------------------------------------------------------------- page shell */
.page { position: relative; z-index: 1; padding: 22px 24px 60px; }
.page-header { margin-bottom: 16px; }
.page-header h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.page-header .sub { color: var(--text-muted); font-size: 13px; margin-top: 3px; }


/* --------------------------------------------------------------- KPI tiles */
.kpi-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border-dim); border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px;
}
@media (max-width: 720px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--bg-surface); padding: 14px 16px; position: relative;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
}
.kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--kpi-accent, var(--teal)); opacity: .8;
}
.kpi .kpi-main { min-width: 0; }
.kpi .kpi-label {
  display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.kpi .kpi-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kpi-accent, var(--teal)); }
.kpi .kpi-value { font-size: 26px; font-weight: 700; line-height: 1; color: var(--kpi-accent, var(--text-primary)); }
.kpi .kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.kpi .spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.kpi .spark i { width: 4px; background: var(--kpi-accent, var(--teal)); opacity: .55; border-radius: 1px; display: block; }
.kpi.pulse .dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* busy submit buttons (e.g. Sync now while a sync runs) */
button.is-busy { opacity: .75; cursor: progress; }
button.is-busy svg { animation: spin 1s linear infinite; transform-origin: 50% 50%; }
button.is-busy .dot-live { animation: pulse 1s ease-in-out infinite; }

.kpi-railway { --kpi-accent: var(--railway); }
.kpi-netlify { --kpi-accent: var(--netlify); }
.kpi-cloudflare { --kpi-accent: var(--cloudflare); }
.kpi-amber { --kpi-accent: var(--amber); }
.kpi-green { --kpi-accent: var(--green); }
.kpi-red { --kpi-accent: var(--red); }
.kpi-indigo { --kpi-accent: var(--indigo); }

/* ----------------------------------------------------------- toolbar/filters */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.search {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 420px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px;
}
.search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.search svg { color: var(--text-muted); flex: 0 0 auto; }
.search input { flex: 1; background: transparent; border: 0; color: var(--text-primary); font-size: 13px; outline: none; font-family: var(--font); }
.search input::placeholder { color: var(--text-muted); }

.seg { display: inline-flex; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; gap: 2px; }
.seg button {
  font-size: 12px; font-weight: 500; color: var(--text-secondary); background: transparent;
  border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.seg button .dot { width: 7px; height: 7px; border-radius: 50%; }
.seg button[aria-pressed="true"], .seg button.active { background: var(--bg-raised); color: var(--text-primary); }

.filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

.toggle-btn, select.control {
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.toggle-btn[aria-pressed="true"], .toggle-btn.active { color: var(--text-primary); border-color: var(--border-bright); background: var(--bg-raised); }
select.control { font-family: var(--font); }
select.control option { background: var(--bg-raised); }

/* searchable site picker (replaces a huge native <select> of every domain) */
.site-picker { position: relative; display: inline-block; vertical-align: middle; }
.site-picker__input {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 12px; min-width: 240px;
}
.site-picker__input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.site-picker__menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  min-width: 240px; max-height: 452px; overflow-y: auto;  /* ~15 rows, then scroll */
  margin: 0; padding: 4px; list-style: none;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.site-picker__menu[hidden] { display: none; }
.site-picker__opt {
  padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px;
  color: var(--text-secondary); white-space: nowrap; cursor: pointer;
}
.site-picker__opt[hidden] { display: none; }
.site-picker__opt:hover, .site-picker__opt.is-active { background: var(--bg-hover); color: var(--text-primary); }
.site-picker__opt[aria-selected="true"] { color: var(--teal); font-weight: 600; }
.site-picker__empty { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.check input { accent-color: var(--teal); }

.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.count-note { font-size: 12px; color: var(--text-muted); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-primary); cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: border-color .15s, background .15s;
}
.btn:hover { background: var(--bg-raised); border-color: var(--border-bright); text-decoration: none; }
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #5429d6; border-color: #5429d6; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--red); border-color: rgba(220,38,38,.25); }
.btn-danger:hover { background: rgba(239,68,68,.08); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ----------------------------------------------------------------- table */
.table-wrap {
  background: var(--bg-surface); border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg); overflow: hidden;
}
table.data { width: 100%; border-collapse: separate; border-spacing: 0; }
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 11px 14px; background: var(--bg-base);
  border-bottom: 1px solid var(--border-dim);
}
table.data thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s; }
table.data thead th.sortable:hover { color: var(--text-secondary); }
table.data thead th.sortable::after { content: "↕"; margin-left: 5px; font-size: 10px; opacity: .3; }
table.data thead th.sort-asc { color: var(--teal); }
table.data thead th.sort-desc { color: var(--teal); }
table.data thead th.sort-asc::after { content: "↑"; opacity: 1; }
table.data thead th.sort-desc::after { content: "↓"; opacity: 1; }
table.data thead th.sortable:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
table.data tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-dim); font-size: 13px; vertical-align: middle; }
table.data tbody tr.row { cursor: pointer; transition: background .12s; }
table.data tbody tr.row:hover { background: var(--bg-hover); }
table.data tbody tr:last-child td { border-bottom: none; }

.pname { font-family: var(--mono); font-size: 13px; color: var(--text-primary); font-weight: 500; }
.pslug { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.cellmuted { color: var(--text-muted); }
.count { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.count svg { color: var(--text-muted); }

.arrow { display: inline-flex; color: var(--text-muted); transition: transform .15s; }
tr.open .arrow { transform: rotate(90deg); }

.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.status-dot.live { background: var(--green); box-shadow: 0 0 7px rgba(74,222,128,.6); }
.status-dot.unknown { background: var(--text-faint); }
/* uptime health */
.status-dot.up { background: var(--green); box-shadow: 0 0 7px rgba(22,163,74,.5); }
.status-dot.blocked, .status-dot.degraded { background: var(--amber); box-shadow: 0 0 7px rgba(217,119,6,.5); }
.status-dot.down, .status-dot.ssl_error { background: var(--red); box-shadow: 0 0 7px rgba(220,38,38,.5); }

/* unified neutral chip + dot (platform / provider / visibility) */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.02); border: 1px solid var(--border-dim);
  color: var(--text-secondary); font-size: 11px; font-weight: 500; letter-spacing: .02em;
}
.tag .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot-railway { background: var(--railway); }
.dot-netlify { background: var(--netlify); }
.dot-cloudflare { background: var(--cloudflare); }
.dot-external, .dot-manual, .dot-private { background: var(--text-muted); }
.dot-public { background: var(--green); }

/* ---------------------------------------------- domain picker (admin/users) */
.domain-picker { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.domain-picker .dp-head { display: flex; align-items: center; gap: 10px; }
.domain-picker .dp-summary { font-size: 12px; color: var(--text-muted); }
.domain-picker .dp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.domain-picker .dp-chips:empty { display: none; }
.domain-picker .dp-chip { background: var(--bg-raised); border-color: var(--border); font-size: 12px; }
.domain-picker .dp-chip-x {
  border: 0; background: none; padding: 0; margin-left: 1px; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1; font-weight: 500;
}
.domain-picker .dp-chip-x:hover { color: var(--text-primary); }
.domain-picker .dp-panel {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-surface);
}
.domain-picker .dp-search {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border-dim);
  padding: 9px 12px; font-size: 13px; font-family: var(--font); color: var(--text-primary);
  background: transparent; outline: none;
}
.domain-picker .dp-search::placeholder { color: var(--text-faint); }
.domain-picker .dp-list { max-height: 240px; overflow-y: auto; padding: 6px; }
.domain-picker .dp-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.domain-picker .dp-opt:hover { background: var(--bg-hover); color: var(--text-primary); }
.domain-picker .dp-opt[hidden] { display: none; }
.domain-picker .dp-opt input { accent-color: var(--teal); flex: 0 0 auto; }
.domain-picker .dp-empty { color: var(--text-muted); font-size: 12px; padding: 8px; margin: 0; }
.dot-unknown { background: var(--text-faint); }

.repo-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px;
  color: var(--text-secondary); background: rgba(0,0,0,.02); border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 3px 8px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.repo-chip svg { color: var(--text-muted); flex: 0 0 auto; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.lang .ld { width: 8px; height: 8px; border-radius: 50%; }

/* expiry (calm) */
.exp-date { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.exp-in { font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.exp-soon .exp-date { color: var(--text-secondary); }
.exp-soon .exp-in { color: var(--amber); }
.exp-critical .exp-date { color: var(--red); }
.exp-critical .exp-in { color: var(--red); }

/* expandable detail row */
tr.detail > td { padding: 0; background: var(--bg-base); }

/* metadata strip at the top of an expanded project */
.dmeta {
  display: flex; flex-wrap: wrap; gap: 22px 32px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-dim);
}
.dmeta-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dmeta-item .k { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.dmeta-item .v { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); }
.dmeta-item .v.mono { font-family: var(--mono); font-size: 12px; }
.dmeta-item .v a { color: var(--teal); }
.dmeta-item .v .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.item .desc { color: var(--text-secondary); font-size: 12px; margin-top: 5px; line-height: 1.45; }

.dwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.panel { padding: 14px 18px; border-right: 1px solid var(--border-dim); }
.panel:last-child { border-right: none; }
.panel h4 { margin: 0 0 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.item {
  font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--border-dim); border-radius: 8px;
  margin-bottom: 6px; background: var(--bg-surface); color: var(--text-secondary);
}
.item a { color: var(--teal); }
.item .meta { color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.empty { color: var(--text-faint); font-size: 12px; font-style: italic; }
.detail-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 0 18px 14px; flex-wrap: wrap; }
.detail-actions form { margin: 0; }
.no-results td { text-align: center; color: var(--text-muted); font-style: italic; padding: 28px; }
.footnote { padding: 14px 4px; color: var(--text-muted); font-size: 12px; }

/* kind chips (domain kinds, archived, manual) */
.kind { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 5px; margin-left: 6px; }
.k-apex { background: rgba(14,165,233,.12); color: #0369a1; }
.k-subdomain { background: rgba(148,163,184,.14); color: var(--text-secondary); }
.k-platform { background: rgba(217,119,6,.12); color: #b45309; }
.k-wildcard { background: rgba(105,58,250,.12); color: #5429d6; }
.k-dead { background: rgba(220,38,38,.12); color: var(--red); }
.k-tag { background: rgba(0,0,0,.03); color: var(--text-muted); }
.k-tier-1 { background: rgba(124,58,237,.14); color: #6d28d9; }
.k-tier-2 { background: rgba(14,165,233,.13); color: #0369a1; }
.k-tier-3 { background: rgba(217,119,6,.13); color: #b45309; }
.k-unclassified { background: rgba(100,116,139,.10); color: var(--text-muted); }
.k-renew { background: rgba(22,163,74,.12); color: var(--green); }
.k-mail { background: var(--teal-dim); color: var(--teal); }
.dr-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }
.adsense-val { font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ------------------------------------------------------- dashboard pieces */
.grid-2 { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .grid-2 { grid-template-columns: 1fr; } }

.section-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 10px; display: flex; align-items: center; gap: 10px; }
.badge-live { font-size: 9px; font-weight: 700; color: var(--teal); border: 1px solid var(--teal-dim); border-radius: 4px; padding: 1px 6px; letter-spacing: .04em; }

.panel-card {
  background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: var(--radius-lg);
  padding: 16px 18px; margin-bottom: 14px;
}
.dist-bar { height: 10px; border-radius: 6px; overflow: hidden; display: flex; background: var(--bg-raised); }
.dist-bar i { display: block; height: 100%; }
.dist-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.dist-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.dist-legend .lg .dot { width: 8px; height: 8px; border-radius: 50%; }

.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .insights { grid-template-columns: 1fr; } }
.insight {
  background: var(--bg-surface); border: 1px solid var(--border-dim); border-left: 2px solid var(--ic, var(--teal));
  border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.insight.span2 { grid-column: span 2; }
@media (max-width: 760px) { .insight.span2 { grid-column: span 1; } }
.insight .ihead { display: flex; gap: 10px; }
.insight .iicon { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; background: var(--icbg, var(--teal-dim)); color: var(--ic, var(--teal)); }
.insight .itext { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.insight .itext b { color: var(--text-primary); font-weight: 600; }
.insight .imeta { font-size: 11px; color: var(--text-muted); }
.ic-warn { --ic: var(--amber); --icbg: rgba(245,158,11,.12); }
.ic-error { --ic: var(--red); --icbg: rgba(239,68,68,.12); }
.ic-ok { --ic: var(--green); --icbg: rgba(74,222,128,.12); }
.ic-info { --ic: var(--teal); --icbg: var(--teal-dim); }
.ic-rail { --ic: var(--railway); --icbg: rgba(139,92,246,.14); }
.btn-insight { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--ic); color: var(--ic); background: transparent; cursor: pointer; text-decoration: none; }
.btn-insight:hover { background: var(--icbg); text-decoration: none; }

.expiry-list .eli { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border-dim); }
.expiry-list .eli:last-child { border-bottom: none; }
.eli .eln { font-family: var(--mono); font-size: 12px; color: var(--text-primary); }
.eli .elsub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.eli .eld { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; }
.eld.soon { background: rgba(217,119,6,.12); color: var(--amber); }
.eld.crit { background: rgba(220,38,38,.12); color: var(--red); }

.sync-strip {
  display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-muted);
  padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border-dim);
  border-radius: var(--radius); margin-bottom: 16px;
}
.sync-strip .ok { color: var(--green); }
.sync-strip form { margin: 0 0 0 auto; }

/* lang bar (repos) */
.langbar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--bg-raised); }
.langbar i { height: 100%; }
.lang-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.lang-chips .lc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.lang-chips .lc .ld { width: 8px; height: 8px; border-radius: 50%; }
.lang-chips .lc b { color: var(--text-muted); font-weight: 500; }

.uses-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--teal); background: var(--teal-dim); border-radius: 6px; padding: 3px 9px; text-decoration: none; transition: background .12s; }
a.uses-link:hover { background: rgba(105,58,250,.18); text-decoration: none; }
.filter-banner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); background: var(--teal-dim); border: 1px solid rgba(105,58,250,.2); border-radius: var(--radius); padding: 9px 13px; margin-bottom: 12px; }
.filter-banner a { color: var(--teal); font-weight: 500; }
.uses-none { font-size: 12px; color: var(--text-muted); background: rgba(0,0,0,.03); border: 1px solid var(--border-dim); border-radius: 6px; padding: 3px 9px; }

/* notice strip (e.g. expiring) */
.notice {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary);
  background: rgba(245,158,11,.05); border: 1px solid rgba(245,158,11,.14); border-radius: var(--radius);
  padding: 9px 14px; margin-bottom: 14px;
}
.notice svg { color: var(--amber); flex: 0 0 auto; }
.notice b { color: var(--text-primary); }

/* --------------------------------------------------------------- flash */
.flash { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; }
.flash.error { background: rgba(220,38,38,.08); color: var(--red); border: 1px solid rgba(220,38,38,.2); }
.flash.info { background: var(--teal-dim); color: #5429d6; border: 1px solid rgba(105,58,250,.2); }

/* generic helpers */
.sub { color: var(--text-muted); font-size: 13px; }
.meta { color: var(--text-muted); font-size: 11px; }

/* --------------------------------------------------------------- forms */
.form-wrap { max-width: 640px; margin: 8px auto; position: relative; z-index: 1; }
.card-form { background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: 22px 24px; margin-top: 14px; }
.card-form label { display: block; font-size: 12px; color: var(--text-secondary); margin: 16px 0 6px; font-weight: 600; }
.card-form label:first-child { margin-top: 0; }
.card-form input, .card-form select, .card-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; color: var(--text-primary); background: var(--bg-base); font-family: inherit;
}
.card-form input:focus, .card-form select:focus, .card-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.card-form textarea { resize: vertical; }
.form-actions { display: flex; gap: 10px; margin-top: 22px; }

/* repo edit: note + hint + read-only (GitHub-owned) fields */
.form-note { font-size: 12.5px; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 4px; }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin: 6px 0 0; }
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-dim); }
.ro-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ro-field.wide { grid-column: 1 / -1; }
.ro-field .ro-k { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ro-field .ro-v { font-size: 13px; color: var(--text-secondary); word-break: break-word; }
.ro-field .ro-v a { color: var(--teal); }

/* inline category editor on the repositories list */
.cat-input {
  width: 100%; max-width: 150px; padding: 5px 8px; font-size: 12px; font-family: var(--font);
  color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); outline: none; transition: border-color .12s, box-shadow .12s, background .12s;
}
.cat-input:hover { border-color: var(--border-bright); }
.cat-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.cat-input.saved { border-color: var(--green); background: rgba(22,163,74,.06); }
.cat-input.error { border-color: var(--red); background: rgba(220,38,38,.06); }

/* locked-field indicator + unlock control (edit form) */
.lock-badge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: var(--amber); background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.22);
  border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}
.lock-badge svg { width: 11px; height: 11px; }
.unlock-check {
  display: flex; align-items: center; gap: 7px; margin: 6px 0 0;
  font-size: 12px; font-weight: 400; color: var(--text-secondary); cursor: pointer;
}
.unlock-check input { width: auto; flex: 0 0 auto; accent-color: var(--teal); }
.unlock-check .hint { color: var(--text-muted); }

/* --------------------------------------------------------------- login */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; padding: 24px;
  background: radial-gradient(70% 55% at 50% 0%, var(--teal-dim), transparent 70%);
}
.login-card {
  background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: var(--radius-lg);
  padding: 38px 34px 30px; width: 360px; max-width: 100%; box-shadow: var(--shadow-lg); text-align: center;
}
.login-logo {
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 16px;
  background: var(--teal); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(105, 58, 250, .35);
}
.login-logo svg { width: 34px; height: 34px; }
.login-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.login-tagline { color: var(--text-muted); font-size: 13px; margin: 5px 0 26px; }
.login-note { font-size: 14px; color: var(--text-primary); line-height: 1.5; margin: 0 0 8px; }
.login-note + .login-fineprint { margin-bottom: 22px; }
.btn-block { width: 100%; justify-content: center; padding: 10px 14px; font-weight: 600; }
.login-fineprint { color: var(--text-faint); font-size: 12px; margin: 16px 0 0; }

/* ---------------------------------------------------------- sync run history */
.sbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; border: 1px solid transparent;
}
.sbadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sbadge.ok { color: var(--green); background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.25); }
.sbadge.partial { color: var(--amber); background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.25); }
.sbadge.error { color: var(--red); background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.25); }
.pcell { display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 4px 0; font-size: 12px; }

/* Bare stat row — glanceable header metrics (per docs/mockup option B). */
.stat-row { display: flex; align-items: stretch; gap: 0; margin: 2px 0 6px; flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; gap: 3px; padding: 0 22px; position: relative; }
.stat-item + .stat-item::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--border-dim); }
.stat-item:first-child { padding-left: 0; }
.stat-item .stat-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.stat-item .stat-label .provider-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.stat-item .stat-value { font-size: 22px; font-weight: 700; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* Warning/error metrics get colour; a healthy zero goes faint. */
.stat-item .stat-value.warn { color: var(--amber); }
.stat-item .stat-value.bad { color: var(--red); }
.stat-item .stat-value.zero { color: var(--text-faint); }
.stat-item .stat-sub { font-size: 11px; color: var(--text-muted); }

/* Sync control panel cards */
.sync-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.sync-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.sync-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sync-card-head h3 { margin: 0; font-size: 15px; color: var(--text-primary); }
.sync-desc { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin: 8px 0 12px; }
.sync-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border-dim); padding-top: 10px; }
.sync-meta .sbadge { padding: 2px 8px; }
.sync-history { margin-left: auto; color: var(--teal); text-decoration: none; font-weight: 600; }
.sync-history:hover { text-decoration: underline; }
.pcell .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.pcell.ok .dot { background: var(--green); }
.pcell.skipped .dot { background: var(--text-faint); }
.pcell.error .dot { background: var(--red); }
.pcell.skipped { color: var(--text-muted); }
.logbox {
  background: #0d0d12; color: #d7d7e0; border-radius: var(--radius);
  padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-height: 60vh; overflow-y: auto;
}

/* ---------------------------------------------------- notifications (bell + feed) */
.notif { position: relative; }
.notif-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.notif-btn:hover { background: var(--bg-raised); color: var(--text-primary); border-color: var(--border); }
.notif-btn svg { width: 18px; height: 18px; }
.notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; border-radius: 999px; border: 2px solid var(--bg-surface);
}
.notif-badge[hidden] { display: none; }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 360px; max-width: calc(100vw - 32px);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-dim); }
.notif-htitle { font-size: 13px; font-weight: 600; }
.notif-readall { font-size: 11px; font-weight: 500; font-family: var(--font); color: var(--teal); background: transparent; border: none; cursor: pointer; padding: 2px 4px; }
.notif-readall:hover { text-decoration: underline; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-dim); border-left: 3px solid transparent; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--bg-raised); cursor: pointer; }
.notif-item .ni-icon { flex: 0 0 auto; font-size: 14px; line-height: 1.35; }
.ni-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ni-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.notif-item.unread .ni-title::after, .notif-row.unread .nr-title::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: var(--teal); vertical-align: middle;
}
.ni-msg { font-size: 12px; color: var(--text-secondary); white-space: pre-line; word-break: break-word; }
.ni-time { font-size: 11px; color: var(--text-muted); }
.notif-foot { display: block; text-align: center; padding: 9px; font-size: 12px; font-weight: 500; color: var(--teal); border-top: 1px solid var(--border-dim); }
.notif-foot:hover { background: var(--bg-hover); text-decoration: none; }
.notif-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* full notifications page */
.notif-page-list { margin-top: 8px; border: 1px solid var(--border-dim); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); }
.notif-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-bottom: 1px solid var(--border-dim); border-left: 3px solid transparent; }
.notif-row:last-child { border-bottom: none; }
.notif-row.unread { background: var(--bg-raised); }
.notif-row .nr-icon { flex: 0 0 auto; font-size: 15px; }
.nr-main { flex: 1; min-width: 0; }
.nr-title { font-size: 13px; font-weight: 600; }
.nr-msg { margin-top: 3px; font-size: 12px; color: var(--text-secondary); white-space: pre-line; word-break: break-word; }
.nr-time { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }

/* --- Insights (Google: Search Console + GA4 + AdSense) --- */
.ins-kpi { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .ins-kpi { grid-template-columns: repeat(2, 1fr); } }
.ins-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 24px; }
.ins-spark i { width: 3px; border-radius: 1px; opacity: .85; flex: 0 0 auto; }
.ins-spark-lg { height: 44px; gap: 2px; margin: 6px 0 2px; }
.ins-spark-lg i { width: 5px; }

.ins-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 22px; }
.ins-range-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-right: 2px; }
.ins-range-custom { display: flex; align-items: center; gap: 8px; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--border); }
.ins-chip.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.ins-chip.active:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.ins-range-custom input[type="date"] {
  font-size: 12px; font-weight: 500; color: var(--text-secondary); font-family: var(--font);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 9px; line-height: 1.2; width: auto; color-scheme: light;
}
.ins-range-custom input[type="date"]:focus { border-color: var(--border-bright); outline: none; }
.ins-range-sep { color: var(--text-muted); }
@media (max-width: 720px) {
  .ins-range-custom { margin-left: 0; padding-left: 0; border-left: 0; }
}

.metric { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.d-up { color: var(--green); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.d-down { color: var(--red); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.d-flat { color: var(--text-faint); font-size: 11px; }

.ins-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .ins-cards { grid-template-columns: 1fr; } }
.ins-card { background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); }
.ins-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ins-card-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.ins-card-title .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ins-link { font-size: 11px; font-weight: 600; color: var(--teal); text-decoration: none; }
.ins-link:hover { text-decoration: underline; }
.ins-big { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ins-unit { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.ins-substats { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }

/* --- Link-domain modal (Insights setup) --- */
.lm-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.38); display: flex; align-items: center; justify-content: center; padding: 20px; }
.lm-overlay[hidden] { display: none; }
.lm-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; padding: 18px; }
.lm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lm-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.lm-sub { font-family: var(--mono); font-size: 12px; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
.lm-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 4px; border-radius: var(--radius-sm); }
.lm-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.lm-modal input[type="search"] {
  width: 100%; height: 38px; padding: 0 12px; box-sizing: border-box;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font-size: 13px; font-family: var(--font);
  outline: none; -webkit-appearance: none; appearance: none;
}
.lm-modal input[type="search"]::-webkit-search-decoration,
.lm-modal input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.lm-modal input[type="search"]:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); background: var(--bg-surface); }
.lm-modal input[type="search"]:focus-visible { outline: none; }
.lm-list { margin-top: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.lm-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; cursor: pointer; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px; color: var(--text-primary); }
.lm-item:hover { background: var(--bg-hover); }
.lm-item.lm-current { background: var(--teal-dim); color: var(--teal); }
.lm-unlink { font-family: var(--font); color: var(--text-muted); font-style: italic; }
.lm-badge { margin-left: auto; font-family: var(--font); font-size: 10px; font-weight: 600; color: var(--teal); border: 1px solid var(--teal-dim); border-radius: 4px; padding: 0 5px; }
.lm-empty { padding: 14px 10px; font-size: 13px; color: var(--text-muted); }

/* ===================================================== SEO tools section
   These pages (Check Rankings, Tracked, Research, My Rankings, Competitor,
   Site Audit) reuse Atlas's visual language. The rules below mirror the core
   components (page header, card, card-form, table.data, btn) for the SEO
   markup so the section reads identically to the rest of the app. */

/* page heading + muted subtitle */
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.muted { color: var(--text-muted); }
p.muted { font-size: 13px; line-height: 1.55; margin: 4px 0 0; }

/* tool navigation: compact dropdown switcher (grouped menu on demand) */
.tool-switcher { position: relative; margin-bottom: 1.5rem; }
.tool-switcher__trigger {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 250px; padding: 8px 14px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.tool-switcher__trigger:hover { border-color: var(--border-bright); background: var(--bg-raised); }
.tool-switcher__trigger[aria-expanded="true"] { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.tool-switcher__labels { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; margin-right: auto; }
.tool-switcher__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.tool-switcher__current { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.tool-switcher__chev { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; transition: transform .15s; }
.tool-switcher__trigger[aria-expanded="true"] .tool-switcher__chev { transform: rotate(180deg); }
.tool-switcher__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(2, minmax(168px, 1fr)); gap: 6px 20px;
  padding: 14px 16px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.tool-switcher__menu[hidden] { display: none; }
.tsm-group { display: flex; flex-direction: column; gap: 1px; }
.tsm-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); padding: 2px 8px 4px; }
.tsm-item { padding: 7px 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.tsm-item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.tsm-item.active { background: var(--teal-dim); color: var(--teal); font-weight: 600; }
@media (max-width: 560px) {
  .tool-switcher__trigger { width: 100%; }
  .tool-switcher__menu { grid-template-columns: 1fr; left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .tool-switcher__chev { transition: none; } }

/* surface card */
.card { background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: 22px 24px; }
.card > h2, .card > h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.card > h2 + p.muted, .card > h3 + p.muted { margin-bottom: 16px; }

/* form fields (chrome comes from .card; this is layout only, so a
   .seo-form nested inside a .card doesn't draw a second box) */
.seo-form label { display: block; font-size: 12px; color: var(--text-secondary); margin: 16px 0 6px; font-weight: 600; }
.seo-form > label:first-of-type { margin-top: 0; }
.seo-form input, .seo-form select, .seo-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; color: var(--text-primary); background: var(--bg-base); font-family: inherit;
}
.seo-form textarea { resize: vertical; min-height: 104px; }
.seo-form input:focus, .seo-form select:focus, .seo-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.seo-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; margin-top: 16px; }
.seo-form-row label { margin-top: 0; }
@media (max-width: 560px) { .seo-form-row { grid-template-columns: 1fr; } }

/* buttons used only in the SEO section (these lack the global .btn base) */
.seo-form .btn-primary, .seo-form button[type="submit"], .btn-secondary, .btn-danger-sm {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  padding: 8px 15px; font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1;
  border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer;
  background: var(--bg-surface); color: var(--text-primary); transition: background .12s, border-color .12s;
}
.seo-form .btn-primary, .seo-form button[type="submit"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.seo-form .btn-primary:hover, .seo-form button[type="submit"]:hover { background: #5429d6; border-color: #5429d6; }
.btn-secondary { margin-top: 0; }
.btn-secondary:hover { background: var(--bg-raised); border-color: var(--border-bright); }
.btn-danger-sm { margin-top: 0; padding: 5px 11px; font-size: 12px; color: var(--red); border-color: rgba(220,38,38,.25); background: transparent; }
.btn-danger-sm:hover { background: rgba(239,68,68,.08); }

/* action bar above a table (e.g. Tracked "Check now") */
.page-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }

/* results table (mirrors table.data) */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px; font-size: 13px; }
.data-table thead th { text-align: left; padding: 9px 14px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.data-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-dim); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table a { color: var(--teal); }
/* Scroll box for tool result tables: a wide table scrolls inside this wrapper
   instead of pushing the whole page sideways. No border/bg so it's invisible
   until it actually needs to scroll. */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sparkline-cell { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); letter-spacing: .03em; white-space: nowrap; }

/* rank / status pills */
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 3px 9px; border: 1px solid transparent; white-space: nowrap; }
.badge.ok { color: var(--green); background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.25); }
.badge.warn { color: var(--amber); background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.25); }
.badge.err { color: var(--red); background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.25); }

/* ------------------------------------------------- help popover (ⓘ next to a title) */
.title-row { display: flex; align-items: center; gap: 8px; }
.help-wrap { position: relative; display: inline-flex; }
.help-btn {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-muted); font-size: 12px; font-weight: 700; font-style: italic;
  font-family: Georgia, "Times New Roman", serif; line-height: 1; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.help-btn:hover, .help-wrap.open .help-btn { color: var(--teal); border-color: var(--teal); background: var(--teal-dim); }
.help-pop {
  display: none; position: absolute; top: 28px; left: -8px; width: 340px; max-width: 86vw;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 16px 18px; z-index: 30; cursor: default;
}
.help-wrap.open .help-pop { display: block; }
.help-pop::before {
  content: ""; position: absolute; top: -6px; left: 14px; width: 10px; height: 10px;
  background: var(--bg-surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.help-pop h4 { margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.help-pop h4 + p { margin: 0 0 14px; }
.help-pop p { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.help-pop .eg { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius); padding: 10px 12px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.help-pop .eg b { color: var(--text-primary); font-weight: 600; }
.help-pop .eg .badge { font-size: 11px; padding: 1px 7px; }

/* DataForSEO account balance chip (SEO header, right-aligned) */
.seo-balance { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.seo-balance b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.seo-balance.low b { color: var(--amber); }
.seo-balance.empty b { color: var(--red); }
.rank-spark { vertical-align: middle; display: inline-block; }
.hub-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--teal); background: var(--teal-dim); border: 1px solid var(--teal-dim); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.hub-badge:hover { text-decoration: none; border-color: var(--teal); }

/* ---- domain hub page layout (command-center) ---- */
.hub-headrow { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.hub-headrow .hub-actions-right { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.hub-kpis { padding: 14px 8px; margin-bottom: 20px; }
.hub-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.hub-cols > div { min-width: 0; }
.hub-rail .card { padding: 16px 16px; margin-bottom: 16px; }
.hub-rail .card:last-child { margin-bottom: 0; }
.hub-main .card { margin-bottom: 18px; }
.hub-fact { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-dim); font-size: 13px; }
.hub-fact:last-child { border-bottom: 0; }
.hub-fact .k { color: var(--text-muted); }
.hub-fact .v { color: var(--text-secondary); text-align: right; }
.hub-istats { display: flex; gap: 18px; margin: 4px 0 12px; }
.hub-istat .l { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.hub-istat .v { font-size: 18px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.hub-runs { list-style: none; padding: 0; margin: 0; }
.hub-runs li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-dim); font-size: 13px; }
.hub-runs li:last-child { border-bottom: 0; }
.hub-actions { display: flex; flex-direction: column; gap: 8px; }
.hub-actions .btn { justify-content: flex-start; }
/* Top keywords leads the page — subtle accent border */
.card.hub-hero { border-color: var(--teal); }
/* quieter infra KPI tiles (cost, audit) so performance metrics read first */
.stat-item.infra .stat-value { font-size: 18px; color: var(--text-secondary); }
.stat-item.infra .stat-value.bad { color: var(--red); }
.stat-item.infra .stat-value.zero { color: var(--text-faint); }
/* which property (root / subdomain) a ranking belongs to */
.hub-pf { display: inline-block; font-size: 11px; font-family: var(--mono, ui-monospace, Menlo, monospace); color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: 5px; padding: 1px 7px; }
.hub-pf.root { color: var(--teal); border-color: var(--teal-dim); }
/* freshness chip on the latest pull */
.hub-stale { font-size: 11px; font-weight: 600; color: var(--amber); background: rgba(217, 119, 6, .08); border: 1px solid rgba(217, 119, 6, .2); border-radius: 6px; padding: 1px 7px; }
.hub-stale.ok { color: var(--text-muted); background: var(--bg-raised); border-color: var(--border-dim); }
/* renewal decision form (hub rail) */
.hub-renewal-form { display: flex; gap: 8px; }
.hub-renewal-form select { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text-primary); }
.hub-renewal-form select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
/* comments (hub rail) */
.hub-comment-form { margin-bottom: 12px; }
.hub-comment-form textarea { width: 100%; font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text-primary); resize: vertical; margin-bottom: 8px; }
.hub-comment-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.hub-comments { list-style: none; padding: 0; margin: 0; }
.hub-comments li { padding: 10px 0; border-bottom: 1px solid var(--border-dim); }
.hub-comments li:last-child { border-bottom: 0; }
.hub-comment-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-muted); }
.hub-comment-meta .avatar { width: 20px; height: 20px; font-size: 9px; }
.hub-comment-meta .who { font-weight: 600; color: var(--text-secondary); }
.hub-comment-meta .when { color: var(--text-faint); }
.hub-comment-del { margin-left: auto; }
.hub-comment-del button { border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.hub-comment-del button:hover { color: var(--red); }
.hub-comment-body { font-size: 13px; color: var(--text-primary); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 980px) { .hub-cols { grid-template-columns: 1fr; } }
.seo-history { margin-top: 22px; }
.seo-history h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.seo-history a { color: var(--teal); }

/* ===================================================== Actions + Tasks
   Components shared by the Actions (signals) feed and the Tasks list/detail.
   Built from the same tokens as the rest of the app: purple accent, pill
   badges, the .card surface, and a generic modal lifted from the Insights
   link-domain dialog so quick-create forms read identically everywhere. */

/* --- generic modal (quick-create dialogs) --- */
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.38); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay[hidden] { display: none; }
.modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border-dim); }
.modal-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 4px; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border-dim); background: var(--bg-raised); }

/* --- form fields (modal + stacked property forms) --- */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; font-family: var(--font);
  color: var(--text-primary); background: var(--bg-base);
}
.field textarea { resize: vertical; min-height: 70px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* --- card heading (Task detail sections) --- */
.card-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 12px; }

/* --- task status + priority badges (extend .badge) --- */
.badge-open { color: var(--text-secondary); background: rgba(0,0,0,.04); border-color: var(--border); }
.badge-in_progress { color: var(--teal); background: var(--teal-dim); border-color: rgba(105,58,250,.25); }
.badge-done { color: var(--green); background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.25); }
.badge-wont_do { color: var(--text-faint); background: rgba(0,0,0,.03); border-color: var(--border-dim); }
.badge-pri-high { color: var(--red); background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.25); }
.badge-pri-normal { color: var(--text-secondary); background: rgba(0,0,0,.04); border-color: var(--border); }
.badge-pri-low { color: var(--text-faint); background: rgba(0,0,0,.03); border-color: var(--border-dim); }

/* --- signal severity pills + readable signal cell --- */
.sev { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.sev-critical { color: var(--red); background: rgba(220,38,38,.10); }
.sev-warn { color: var(--amber); background: rgba(217,119,6,.12); }
.sev-info { color: var(--text-muted); background: rgba(0,0,0,.04); }
.sig-title { font-weight: 500; font-size: 13px; color: var(--text-primary); }
.sig-do { color: #b26a1a; font-weight: 600; }
.sig-detail { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; word-break: break-word; }

/* --- backlink "changes since last pull": lost vs gained referring domains --- */
.bl-changes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bl-col-h { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.bl-col-h.bl-lost { color: var(--red); }
.bl-col-h.bl-gained { color: var(--green); }
.bl-item { font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--border-dim); }
.bl-dom { font-family: var(--mono); color: var(--text-primary); }
@media (max-width: 640px) { .bl-changes { grid-template-columns: 1fr; } }

/* --- authority trends: sparkline (up = good) + over-time chart --- */
.trend-spark { display: block; }
.authspark { display: inline-flex; align-items: center; margin: 0 auto; }
.metric-chart-wrap { margin: 8px 0 4px; }
.metric-chart { width: 100%; height: auto; display: block; }
.metric-chart .mc-axis { stroke: var(--border-dim); stroke-width: 1; }
.metric-chart .mc-area { opacity: .09; stroke: none; }
.metric-chart .mc-ylabel { font-size: 11px; fill: var(--text-muted); font-family: var(--mono); }
.mc-xlabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: var(--mono); margin-top: 2px; }

/* --- domain-hub Signals widget: dense one-line rows (severity dot · truncated
   title · create-task icon). Full title on hover via the row's title attr. --- */
.hub-signals { margin: 4px 0 10px; padding: 0; list-style: none; }
.hub-signal { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-dim); }
.hub-signal:last-child { border-bottom: 0; }
.sev-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sev-dot.sdot-critical { background: var(--red); }
.sev-dot.sdot-warn { background: var(--amber); }
.sev-dot.sdot-info { background: var(--text-faint); }
.hs-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--text-primary); }
.hs-form { flex: none; display: inline-flex; margin: 0; }
.hs-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; color: var(--text-faint); cursor: pointer; padding: 0; }
.hs-add svg { width: 15px; height: 15px; }
.hub-signal:hover .hs-add { color: var(--text-muted); }
.hs-add:hover { color: var(--teal); background: var(--teal-dim); }

/* --- compact row action cluster (Actions feed) --- */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.row-actions form { display: inline-flex; margin: 0; }
.btn-icon { padding: 5px 8px; color: var(--text-muted); }
.btn-icon svg { width: 15px; height: 15px; display: block; }
.btn-icon:hover { color: var(--text-primary); }

/* --- task detail two-column layout --- */
.task-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.task-grid > .task-main > .card + .card { margin-top: 16px; }
.props { display: flex; flex-direction: column; gap: 14px; }
.meta-dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font-size: 12px; }
.meta-dl dt { color: var(--text-muted); }
.meta-dl dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 860px) { .task-grid { grid-template-columns: 1fr; } }

/* ===================================================== Task comment thread
   A richer comment experience ported from innovemind: avatars, Markdown,
   single-level threaded replies, emoji reactions, @mention autocomplete, image
   upload + lightbox. Colours mapped onto Atlas tokens (purple accent). */

.comments .card-title .cn { font-family: var(--mono); font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.comment-list { display: flex; flex-direction: column; }

.comment { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border-dim); }
.comment-list > .comment:first-child { border-top: 0; padding-top: 4px; }
.cava, .cava-img { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; font-weight: 600; flex: none; object-fit: cover; background: var(--teal); }
.cbody { flex: 1; min-width: 0; }
.cmeta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.cmeta b { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cmeta time { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.cedited { font-family: var(--mono); font-size: 11px; color: var(--text-faint); font-style: italic; }

.ctext { font-size: 13px; color: var(--text-secondary); line-height: 1.55; word-wrap: break-word; }
.ctext p { margin: 0 0 8px; }
.ctext p:last-child { margin-bottom: 0; }
.ctext a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.ctext ul, .ctext ol { margin: 4px 0 8px; padding-left: 20px; }
.ctext code { font-family: var(--mono); font-size: 12px; background: var(--bg-raised); padding: 1px 5px; border-radius: 5px; }
.ctext pre { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; margin: 6px 0 8px; }
.ctext pre code { background: none; padding: 0; }
.ctext blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-muted); }
.ctext img { max-width: min(320px, 100%); max-height: 280px; border-radius: 10px; margin-top: 8px; display: block; border: 1px solid var(--border-dim); cursor: zoom-in; }
.mention { font-weight: 600; color: var(--teal); background: var(--teal-dim); padding: 0 4px; border-radius: 5px; }

/* actions row: reply / edit / delete */
.cactions { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.cactions form { margin: 0; display: inline-flex; }
.clink { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.clink svg { width: 13px; height: 13px; }
.clink:hover { color: var(--teal); }
.clink-danger:hover { color: var(--red); }

/* emoji reactions */
.creacts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.react-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: .12s; }
.react-chip:hover { border-color: var(--border-bright); }
.react-chip.on { background: var(--teal-dim); border-color: rgba(105,58,250,.35); color: var(--teal); }
.react-chip .rc-n { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.react-addwrap { position: relative; display: inline-flex; }
.react-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; border-radius: 20px; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; padding: 0; }
.react-add svg { width: 15px; height: 15px; }
.react-add:hover { color: var(--teal); border-color: var(--border-bright); }
.react-pop { position: absolute; bottom: calc(100% + 6px); left: 0; display: flex; gap: 2px; padding: 5px 6px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); z-index: 30; }
.react-pop[hidden] { display: none; }
.react-opt { font-size: 17px; line-height: 1; background: none; border: 0; cursor: pointer; padding: 3px 4px; border-radius: 8px; transition: .1s; }
.react-opt:hover { background: var(--bg-hover); transform: scale(1.15); }

/* threaded replies */
.replies { margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--border-dim); display: flex; flex-direction: column; }
.replies .comment { padding: 12px 0; border-top: 1px solid var(--border-dim); }
.replies .comment:first-child { border-top: 0; padding-top: 2px; }
.rmore { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin: 4px 0; font-size: 12px; font-weight: 600; color: var(--teal); cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.rmore:hover { text-decoration: underline; }

/* reply + edit forms (hidden until toggled) */
.reply-form { margin-top: 12px; display: none; }
.reply-form.open { display: block; }
.edit-form { margin-top: 10px; display: none; }
.reply-actions, .edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cbody.editing > .ctext, .cbody.editing > .creacts, .cbody.editing > .cactions, .cbody.editing > .reply-form, .cbody.editing > .replies { display: none; }
.cbody.editing > .edit-form { display: block; }
.reply-form textarea, .edit-form textarea, .comment-composer textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 13px; color: var(--text-primary);
  background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; resize: vertical; outline: none;
}
.reply-form textarea:focus, .edit-form textarea:focus, .comment-composer textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }

/* small ghost icon button (attach image) */
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-muted); cursor: pointer; padding: 0; }
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn:hover { color: var(--teal); border-color: var(--border-bright); }

/* composer */
.comment-composer { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-dim); }
.comment-composer textarea { min-height: 80px; margin-bottom: 10px; }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mdbar { display: flex; gap: 10px; flex-wrap: wrap; }
.mdbar .k { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.composer-actions { display: flex; align-items: center; gap: 8px; }

/* @mention autocomplete popover */
.mention-pop { position: absolute; z-index: 80; min-width: 190px; max-height: 240px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; }
.mention-pop[hidden] { display: none; }
.mpop-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.mpop-item:hover, .mpop-item.active { background: var(--teal-dim); color: var(--teal); }
.mpop-av { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: 10px; font-weight: 600; }

/* image lightbox */
.imglb { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.8); display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.imglb.open { display: flex; }
.imglb img { max-width: 92vw; max-height: 92vh; border-radius: 10px; }

/* deep-link flash */
.comment.comment-flash { animation: commentFlash 2.4s ease-out; border-radius: 8px; }
@keyframes commentFlash { 0%, 35% { background: rgba(217,119,6,.14); box-shadow: 0 0 0 6px rgba(217,119,6,.14); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* domain explorer: shell grid + section rail */
.dom-explorer { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; margin-top: 16px; }
.dom-explorer .rail { position: sticky; top: 76px; background: var(--bg-surface); border: 1px solid var(--line, var(--border-dim)); border-radius: var(--radius-lg); padding: 10px 8px; }
.dom-explorer .rail-grp { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: 12px 9px 4px; }
.dom-explorer .rail-grp:first-child { padding-top: 2px; }
.dom-explorer .se { display: block; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.dom-explorer .se:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.dom-explorer .se.on { background: var(--teal-dim); color: var(--teal); font-weight: 600; }
.dom-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dom-section__head h2 { font-size: 19px; margin: 0; }
@media (max-width: 900px) { .dom-explorer { grid-template-columns: 1fr; } .dom-explorer .rail { position: static; } }

/* signal proposal review panel (Suggest → Approve/Reject diff) */
.proposal { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border);
            border-radius: 6px; background: var(--bg-raised); font-size: 12px; }
.proposal-row { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; }
.proposal-label { width: 44px; color: var(--text-muted); }
.proposal-before { color: var(--text-muted); text-decoration: line-through; }
.proposal-after { color: var(--text-primary); font-weight: 600; }
.proposal-why { color: var(--text-muted); margin: 4px 0; font-style: italic; }
.proposal-actions { display: flex; gap: 6px; margin-top: 6px; }
.proposal-failed { color: var(--red); }
.proposal-waiting { margin-top: 8px; padding: 6px 10px; border: 1px dashed var(--border);
                    border-radius: 6px; color: var(--text-muted); font-size: 12px; }
.proposal-applied { margin-top: 8px; padding: 8px 10px; border: 1px solid #bfe3cf;
                    border-radius: 6px; background: #f0f8f3; font-size: 12px; }
.proposal-applied-head { color: #0c7a4d; font-weight: 700; margin-bottom: 4px; }
.proposal-live { display: inline-block; margin-top: 6px; color: var(--teal); font-weight: 600; }
.proposal-live:hover { text-decoration: underline; }
.proposal-body { margin-top: 8px; }
.proposal-body summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.proposal-body-html { margin-top: 8px; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px; background: #fff; font-size: 13px; }
.proposal-body-html img { max-width: 100%; height: auto; }