/* ==========================================================================
   Futurescope Analytics - interface
   ========================================================================== */

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --border: #dfe3ea;
  --border-strong: #c3cad6;
  --text: #15181f;
  --text-2: #5a6272;
  --text-3: #868e9e;
  --accent: #1f5fa8;
  --accent-soft: #e8f0fa;
  --accent-2: #0d7f6e;
  --warn: #a8620d;
  --danger: #b3352b;
  --good: #17795e;
  --shadow: 0 1px 2px rgba(15, 20, 30, .06), 0 4px 14px rgba(15, 20, 30, .05);
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --c1: #1f5fa8; --c2: #0d7f6e; --c3: #a8620d; --c4: #7a4fa3;
  --c5: #b3352b; --c6: #2b7a9e; --c7: #8a7a1f; --c8: #5a6272;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1218;
    --surface: #161a22;
    --surface-2: #1d222c;
    --border: #2a303c;
    --border-strong: #3a4252;
    --text: #e8ebf1;
    --text-2: #a4adbd;
    --text-3: #79839a;
    --accent: #6aa9f0;
    --accent-soft: #1a2637;
    --accent-2: #4fc4ad;
    --warn: #e0a45c;
    --danger: #ef8078;
    --good: #4fc4ad;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .28);

    --c1: #6aa9f0; --c2: #4fc4ad; --c3: #e0a45c; --c4: #b494e0;
    --c5: #ef8078; --c6: #6fc3e0; --c7: #ccbd63; --c8: #9aa4b6;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- layout */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 0 40px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { padding: 0 18px 18px; }
.brand h1 { font-size: 17px; margin: 0; letter-spacing: -.01em; }
.brand .tag { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .09em; }

.nav-group { padding: 12px 10px 4px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-3); }
.nav a {
  display: flex; align-items: center; gap: 9px; padding: 7px 18px;
  color: var(--text-2); font-size: 13.5px; border-left: 2px solid transparent;
}
.nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav svg { width: 15px; height: 15px; flex: none; opacity: .8; }

.main { min-width: 0; }

/* Any display value beats the hidden attribute's UA rule, so a hidden .pill
   or .basis still occupies the bar as an empty sliver. Restate it once, for
   everything, rather than per class. */
[hidden] { display: none !important; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar .spacer { flex: 1; }

/* ------------------------------------------------------------ sign-in page */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; }
.auth-shell { width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-brand h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.auth-brand .tag { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .09em; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 26px; }
.auth-card h2 { font-size: 17px; margin: 0 0 4px; }
.auth-sub { margin: 0 0 16px; font-size: 13px; color: var(--text-2); }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card .field input { width: 100%; }
.auth-hint { font-size: 11.5px; color: var(--text-3); }
.auth-error { border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent);
  padding: 8px 12px; border-radius: 0 6px 6px 0; font-size: 13px; }
.auth-submit { width: 100%; justify-content: center; padding: 9px 12px; }
.auth-foot { margin: 14px 0 0; font-size: 12px; color: var(--text-3); text-align: center; }

/* ------------------------------------------------------ signed-in user menu */
.user-menu { position: relative; }
.user-menu > button { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; color: var(--text); font: inherit; font-size: 12.5px; }
.user-menu > button:hover { background: var(--surface-2); }
.user-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.user-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; }
.user-pop .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 12.5px; }
.user-pop .who strong { display: block; font-size: 13px; }
.user-pop a, .user-pop button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px;
  background: none; border: 0; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.user-pop a:hover, .user-pop button:hover { background: var(--surface-2); text-decoration: none; }

/* ------------------------------------------------------- account editor */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 16px; }
.check-grid label, .check-row { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 0; }
.check-grid .hint { color: var(--text-3); font-size: 11.5px; }
.perm-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.perm-section h4 { margin: 0 0 8px; font-size: 13px; }
.area-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.area-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.area-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.link-box { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.link-box input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.form-grid .field input, .form-grid .field select { width: 100%; }
.denied { max-width: 560px; margin: 40px auto; text-align: center; }
.hint { font-size: 11px; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.plain-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.auth-inline { display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.auth-inline .field input { width: 100%; }
.card h4 { margin: 0 0 6px; font-size: 13px; }

/* Segmented control for the IPEDS count basis. Two states, always both
   visible, because the reader needs to know which one produced the number
   on screen as much as they need to change it. */
.basis { display: flex; align-items: center; gap: 8px; }
.basis-label { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.basis button {
  padding: 5px 11px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text-2); border-radius: 0; margin-left: -1px;
}
.basis button:first-of-type { border-radius: 7px 0 0 7px; margin-left: 0; }
.basis button:last-of-type { border-radius: 0 7px 7px 0; }
.basis button:hover { color: var(--text); }
.basis button.on {
  background: var(--accent); border-color: var(--accent); color: #fff; z-index: 1;
}
@media (max-width: 900px) { .basis-label { display: none; } }

.geo-picker { position: relative; min-width: 320px; }
.geo-picker input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--bg); color: var(--text); font-size: 14px;
}
.geo-picker input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.geo-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); max-height: 340px; overflow-y: auto;
}
.geo-results div { padding: 7px 12px; cursor: pointer; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; }
.geo-results div:hover, .geo-results div.sel { background: var(--accent-soft); }
.geo-results .t { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

.content { padding: 22px; max-width: 1500px; }

.page-head { margin-bottom: 18px; }
.page-head h2 { margin: 0 0 3px; font-size: 22px; letter-spacing: -.015em; }
.page-head p { margin: 0; color: var(--text-2); font-size: 13.5px; }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px;
}
.card > h3 { margin: 0 0 2px; font-size: 14.5px; letter-spacing: -.005em; }
.card > .sub { margin: 0 0 12px; font-size: 12px; color: var(--text-3); }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1150px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 13px 15px; }
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.stat .value { font-size: 22px; font-weight: 620; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.stat .delta { font-size: 12px; font-weight: 600; }
.up { color: var(--good); } .down { color: var(--danger); }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; background: var(--surface-2); z-index: 2;
  text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-2); padding: 9px 11px; border-bottom: 1px solid var(--border);
  white-space: nowrap; cursor: pointer; user-select: none;
}
thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
thead th:hover { color: var(--text); }
thead th .arrow { opacity: .5; font-size: 9px; margin-left: 3px; }
tbody td { padding: 8px 11px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.name { font-weight: 500; }
td .code { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-right: 6px; }

.bar-cell { position: relative; }
.bar-cell .fill { position: absolute; inset: 2px auto 2px 0; background: var(--accent-soft); border-radius: 3px; z-index: 0; }
.bar-cell span { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- pills */
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.pill.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); border-color: transparent; }
.pill.bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }
.pill.hot { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); border-color: transparent; }
.pill.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* -------------------------------------------------------------- controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.field select, .field input {
  padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 13px; min-width: 120px;
}
.btn {
  padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 500;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
/* Quiet until you reach for it: a destructive control should be findable
   without competing with the primary action for attention. */
.btn.danger { color: var(--danger); border-color: var(--border-strong); }
.btn.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: var(--danger);
}
.btn:disabled { opacity: 0.6; cursor: default; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
  padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; color: var(--text-2); font-size: 13.5px;
}
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------- charts */
.chart { width: 100%; overflow: visible; }
.chart text { font-family: var(--sans); fill: var(--text-2); }
.chart .axis line, .chart .axis path { stroke: var(--border); }
.chart .grid-line { stroke: var(--border); stroke-dasharray: 2 3; }
.chart .band { fill: var(--accent); opacity: .13; }
.chart .dashed { stroke-dasharray: 4 3; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.chart-tip {
  position: fixed; pointer-events: none; z-index: 100; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 9px;
  font-size: 12px; box-shadow: var(--shadow); white-space: nowrap;
}

/* ------------------------------------------------------------- narrative */
.report { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 38px; box-shadow: var(--shadow); max-width: 1000px; }
.report h1 { font-size: 26px; margin: 0 0 3px; letter-spacing: -.02em; }
.report .report-sub { color: var(--text-3); font-size: 13px; margin-bottom: 26px; }
.report h2 { font-size: 17px; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.report p { margin: 0 0 12px; line-height: 1.66; }
.report ul { margin: 0 0 14px; padding-left: 20px; }
.report li { margin-bottom: 5px; }
.report .caveat {
  border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent);
  padding: 9px 13px; font-size: 12.5px; color: var(--text-2); margin: 0 0 14px; border-radius: 0 6px 6px 0;
}
.report .tbl-note { font-size: 11.5px; color: var(--text-3); margin: 5px 0 16px; }
.report .sources { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.report .sources li { margin-bottom: 3px; }

/* Letter with half-inch margins gives 720px of printable width at 96dpi. The
   widest table in the reports - the viability study's six-column industry
   detail - needs 682px, and at the 0.75in a print dialog may default to there
   are only 672px, so it silently lost its last column. Pinning the page here
   means the output no longer depends on what the dialog happens to be set to. */
@page { size: letter portrait; margin: 0.5in; }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  /* A scroll container clips in print rather than scrolling, which is how a
     too-wide table loses columns without any visible sign. Let it lay out. */
  .table-wrap { overflow: visible !important; }
  /* Header cells are nowrap on screen so the sort affordance reads cleanly.
     In print that sets a floor under every column width, inflating the table
     beyond the page for no benefit - nothing is being clicked on paper. */
  thead th { white-space: normal !important; position: static !important; }
  /* Controls exist to build the page, not to be read on it. Tagging each one
     .no-print is easy to forget - a filter form left in a printout looks like
     a bug to whoever receives the PDF - so anything interactive is dropped by
     default. Data lives outside these elements in every view. */
  form, .controls, .filters, .btn, button { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .report { border: none; box-shadow: none; padding: 0; max-width: none; }
  body { background: #fff; }
}

/* --------------------------------------------------------------- misc */
/* An abbreviation with a definition attached. Without the underline there is
   nothing to tell a reader a tooltip exists, and the one group most likely to
   need it - someone meeting AIAN or NHPI for the first time - is exactly the
   group that will not think to hover. */
abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  text-decoration-thickness: 1px;
}
th abbr[title] { color: inherit; }

.muted { color: var(--text-3); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.loading { padding: 44px; text-align: center; color: var(--text-3); }
.spinner { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 34px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.error { border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent);
  padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 13px; margin-bottom: 14px; }
.note { border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 9px 13px; border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; }

.src { font-size: 11.5px; color: var(--text-3); margin-top: 7px; }
.src a { color: var(--text-3); text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Institution facts: one block per campus, so a district reads as a list of
   places rather than a merged blur. */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  font-size: 12.5px; }
.fact strong { font-size: 13.5px; }
.fact .pill { align-self: flex-start; margin-top: 2px; }
.chip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); font-size: 12px; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip .x { margin-left: 6px; opacity: .7; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-ok { background: var(--good); }
.status-error { background: var(--danger); }
.status-skipped { background: var(--warn); }
.status-never { background: var(--text-3); }
.status-running { background: var(--accent); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* Panel dashboards in the viability studies: a grid of small charts, each
   captioned, that stays readable when printed to PDF. */
.report .panel-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 18px;
}
.report .panel {
  margin: 0;
  padding: 10px 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  min-width: 0;
}
.report .panel-wide { grid-column: 1 / -1; }
.report .panel figcaption {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.report .panel svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .report .panel-grid { grid-template-columns: 1fr; } }
@media print {
  .report .panel-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
  .report .panel { break-inside: avoid; }
  .report h2 { break-after: avoid; }
}

/* Occupation checklist on the viability report form. */
.soc-pick {
  flex-basis: 100%;
  margin-top: 8px;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--surface-2);
}
.soc-pick-head { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.soc-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  font-size: 12.5px; padding: 3px 0; cursor: pointer; }
.soc-opt input { margin: 0; }

.soc-add {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.soc-add label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.soc-add input {
  padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 13px; min-width: 240px;
}