:root {
  --primary:#357278; --primary-hover:#2b5c61; --primary-light:#e6efef;
  --accent:#4b8f96;
  --bg:#f5f6f8; --panel:#ffffff; --subtle:#fafbfc; --canvas:#f5f6f8;
  --line:#e5e7eb; --line-soft:#eef0f3; --divider:#f1f3f5;
  --text:#1f2937; --text-reg:#4b5563; --muted:#6b7280; --faint:#9ca3af;
  --row-hover:#f9fafb; --row-sel:#e6efef; --row-sel-bd:#357278;
  --blue:#357278; --green:#047857; --orange:#d2a01e; --red:#b91c1c;
  --success-bg:#ecfdf5; --success-bd:#a7f3d0;
  --warning-bg:#fff8e9; --warning-bd:#fddc87;
  --danger-bg:#fef2f2; --danger-bd:#fecaca;
  --info-bg:#e6efef; --info-bd:#aecbcd;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:'Plus Jakarta Sans','Inter',var(--sans);
  --radius:5px; --radius-lg:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04); --shadow-md:0 4px 16px rgba(16,24,40,.06);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:13px/1.5 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; height:100vh; display:flex; flex-direction:column; }
.num, .mono { font-variant-numeric:tabular-nums; }

/* ---------- Topbar (slim app bar) ---------- */
.topbar {
  height:64px; padding:0 24px; flex-shrink:0;
  background:linear-gradient(180deg,#ffffff,#fcfdff);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.icon-btn { padding:5px; border:1px solid transparent; background:transparent; color:var(--muted); border-radius:var(--radius); line-height:0; cursor:pointer; }
.icon-btn:hover { background:var(--row-hover); border-color:var(--line); color:var(--text); }

/* Jobs-pane collapse toolbar + edge expand tab */
.pane-toolbar { display:flex; align-items:center; justify-content:space-between; padding:9px 10px 9px 14px; border-bottom:1px solid var(--line-soft); flex-shrink:0; }
.pane-toolbar-title { font-family:var(--display); font-size:13px; font-weight:600; color:var(--text); }
.pane-expand {
  display:none; align-self:start; width:26px; height:46px; padding:0; margin-top:2px;
  align-items:center; justify-content:center; color:var(--text-reg);
  border:1px solid var(--line); border-right-width:1px; border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:var(--panel); box-shadow:var(--shadow); cursor:pointer;
}
.pane-expand:hover { color:var(--primary); border-color:var(--primary); background:var(--primary-light); }
body.sidebar-collapsed main { grid-template-columns:auto 1fr; padding-left:0; }
body.sidebar-collapsed .left { display:none; }
body.sidebar-collapsed .pane-expand { display:flex; }
.brand-logo { height:26px; width:auto; display:block; }
.brand-sep { width:1px; height:18px; background:var(--line); }
.brand-by { color:var(--faint); font-size:12px; font-weight:500; letter-spacing:.01em; }
.brand-nt { height:15px; width:auto; display:block; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-divider { width:1px; height:22px; background:var(--line); }
.health { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:500; }
.health-dot { width:7px; height:7px; border-radius:50%; background:var(--faint); box-shadow:0 0 0 3px rgba(0,0,0,.03); }
.health.ok .health-dot, .health.ready .health-dot { background:var(--green); box-shadow:0 0 0 3px rgba(4,120,87,.12); }
.health.bad .health-dot { background:var(--red); box-shadow:0 0 0 3px rgba(185,28,28,.12); }
.avatar {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.02em;
}

h1 { font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:-0.01em; margin:0; color:var(--text); }
h2 { font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:-0.01em; margin:0; }
h3 { font-size:10.5px; margin:14px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }

main {
  flex:1; min-height:0; padding:16px 24px 24px; display:grid;
  grid-template-columns:minmax(360px,32%) minmax(0,1fr); gap:16px;
}
section { min-height:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.left { display:flex; flex-direction:column; position:relative; }
.detail { display:flex; flex-direction:column; overflow:hidden; }
.head { padding:12px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; background:var(--subtle); }
.body { padding:12px; }
.jobs { overflow-y:auto; overflow-x:hidden; flex:1; border-top:1px solid var(--line-soft); }
.jobs table { table-layout:fixed; }
.jobs td, .jobs th { overflow-wrap:anywhere; }
#detail { flex:1; min-height:0; overflow:hidden; padding:0; display:flex; flex-direction:column; }
.review-workspace { flex:1; display:grid; grid-template-columns:1fr; min-height:0; }
.info-pane { min-width:0; overflow:auto; padding:16px 18px; }

/* ---------- Text utils ---------- */
.muted { color:var(--muted); }
.small { font-size:12px; }
.mono { font-family:var(--mono); }
.error { color:var(--red); white-space:pre-wrap; }
.ok { color:var(--green); }

/* ---------- Forms ---------- */
label { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
input[type=text], select, textarea {
  width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:6px 9px; font:inherit;
  background:#fff; color:var(--text); transition:border-color .12s, box-shadow .12s;
}
input[type=text]:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
textarea { min-height:74px; font:12px/1.5 var(--mono); }
input[type=file] { max-width:100%; }
input[type=checkbox] { accent-color:var(--green); }
.field { margin-bottom:10px; }

/* ---------- Upload card ---------- */
.upload-card { border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; background:var(--subtle); display:grid; gap:10px; }
.drop-target {
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--radius-lg); padding:20px 14px; background:#fff;
  color:var(--text-reg); cursor:pointer; transition:border-color .12s, background .12s, color .12s;
}
.drop-target:hover { border-color:var(--primary); background:var(--primary-light); }
.drop-target strong { color:var(--primary); font-weight:600; }
.dt-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--primary-light); color:var(--primary); margin-bottom:2px; }
#fileListLabel { font-size:12.5px; }
.upload-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flow-label { margin:0; color:var(--text-reg); font-size:12px; font-weight:500; white-space:nowrap; flex-shrink:0; }
.auto-toggle { display:flex; align-items:center; gap:6px; margin:0; color:var(--text-reg); font-size:12px; white-space:nowrap; }
.auto-toggle input { margin:0; }
.upload-controls .primary { margin-left:auto; white-space:nowrap; }
.drop-zone { display:none; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; flex-direction:column; gap:8px; border:2px dashed var(--primary); border-radius:var(--radius-lg); background:rgba(230,239,239,.95); color:var(--primary); text-align:center; pointer-events:none; }
.left.dragover .drop-zone { display:flex; }
.drop-icon { font-size:30px; }
.hidden-file { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.flow-select-top { width:auto; min-width:120px; flex:1; padding:7px 9px; font-size:12px; }

/* Customer filter + PO search (replaces the upload card; jobs come from n8n). */
.filter-card { border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; background:var(--subtle); display:grid; gap:12px; }
.filter-row { display:flex; align-items:center; gap:8px; }
.filter-row .flow-select-top { flex:1; }
.po-search { display:flex; align-items:center; gap:8px; }
.po-search input[type=text] { flex:1; min-width:0; padding:7px 9px; font-size:12px; }
.po-search .primary { white-space:nowrap; }
.po-search .ghost { white-space:nowrap; }

/* Login landing (shown before the app when MSAL is on and there is no session). */
.login-screen { position:fixed; inset:0; z-index:2000; background:#f3f4f6; display:flex; align-items:center; justify-content:center; padding:16px; }
/* The class's display:flex would otherwise override the [hidden] attribute — keep it hideable. */
.login-screen[hidden] { display:none; }
.login-card { position:relative; background:#fff; padding:32px; border-radius:16px; box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); max-width:28rem; width:100%; text-align:center; border:1px solid #e5e7eb; }
.login-top { display:flex; justify-content:flex-end; }
.login-top .brand-by { color:#64748b; font-size:12px; font-weight:500; }
.login-nt { height:16px; width:auto; }
.login-logo { display:flex; justify-content:center; margin:32px 0; }
.login-logo img { width:228px; max-width:100%; height:auto; }
.login-title { font-size:24px; font-weight:700; color:#0f172a; margin:0 0 8px; }
.login-sub { color:#6b7280; margin:0 0 32px; font-size:14px; }
.login-btn { width:100%; padding:12px 16px; background:#4f46e5; color:#fff; border:none; border-radius:8px; font-weight:500; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 10px 15px -3px rgba(79,70,229,.2); transition:background .15s; }
.login-btn:hover { background:#4338ca; }

/* Header view tabs (Jobs / Dashboard) */
.topnav { display:flex; gap:4px; }
.topnav-tab { padding:7px 14px; border:none; background:transparent; color:var(--muted); font-family:var(--display); font-size:13px; font-weight:600; border-radius:var(--radius); cursor:pointer; }
.topnav-tab:hover { color:var(--text); background:var(--subtle); }
.topnav-tab.active { color:var(--primary); background:var(--primary-light); }

/* Toggling views: a display rule on the element would otherwise beat the [hidden] attribute. */
main[hidden], .dashboard[hidden] { display:none; }

/* Dashboard view (full job history) */
.dashboard { flex:1; min-height:0; margin:16px 24px 24px; display:flex; flex-direction:column; }
.dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); flex-shrink:0; flex-wrap:wrap; }
.dashboard-title { font-family:var(--display); font-size:16px; font-weight:700; margin:0; }
.dashboard-controls { display:flex; align-items:center; gap:10px; }
.dashboard-body { flex:1; min-height:0; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.dashboard-body > .empty, .dashboard-body > .error { padding:24px; text-align:center; color:var(--muted); }
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.kpi-tile { background:var(--subtle); border:1px solid var(--line); border-radius:var(--radius-lg); padding:11px 14px; }
.kpi-value { font-family:var(--display); font-size:22px; font-weight:700; color:var(--text); line-height:1.1; }
.kpi-label { font-size:11.5px; color:var(--muted); margin-top:3px; }
.dash-cards { display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
.dash-card { flex:1 1 320px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; min-width:0; }
.dash-card-pie { flex:0 1 260px; }
.bar-legend { display:inline-flex; gap:12px; font-size:11px; font-weight:400; color:var(--text-reg); }
.dash-card-title { font-family:var(--display); font-weight:600; font-size:13px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pie-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pie { width:130px; height:130px; flex-shrink:0; }
.pie-legend { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.legend-item { display:flex; align-items:center; gap:7px; }
.legend-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.trend { display:block; width:100%; height:auto; max-height:200px; }
.trend .axis { stroke:var(--line); stroke-width:1; }
.trend .tick { fill:var(--muted); font-size:10px; }
.trend .trend-line { fill:none; stroke:var(--primary); stroke-width:2; }
.trend .trend-dot { fill:var(--primary); }
.trend .trend-area { fill:var(--primary-light); opacity:.6; stroke:none; }
.trend-toggle { display:inline-flex; gap:2px; }
.trend-toggle button { font-size:11px; padding:3px 9px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; border-radius:var(--radius); }
.trend-toggle button.active { background:var(--primary-light); color:var(--primary); border-color:transparent; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---------- Job tabs ---------- */
.tabs { display:flex; gap:2px; padding:4px 8px 0; background:var(--panel); border-top:1px solid var(--line-soft); flex-shrink:0; }
.tab {
  border:0; background:transparent; color:var(--muted); font-weight:600; font-size:12px;
  padding:9px 12px; border-radius:0; border-bottom:2px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:color .12s, border-color .12s;
}
.tab:hover { background:transparent; color:var(--text); }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-count { font-size:10.5px; font-weight:600; min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:var(--line-soft); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; }
.tab.active .tab-count { background:var(--primary-light); color:var(--primary); }

/* ---------- Buttons ---------- */
button {
  border:1px solid var(--line); background:#fff; color:var(--text); border-radius:var(--radius);
  padding:7px 12px; font:inherit; font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:all .12s ease;
}
button:hover { border-color:var(--faint); background:var(--subtle); }
button.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
button.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
button.ghost { background:transparent; border-color:transparent; color:var(--text-reg); }
button.ghost:hover { background:var(--row-hover); }
button.danger { color:var(--red); border-color:var(--danger-bd); background:var(--danger-bg); }
button.danger:hover { border-color:#f04438; background:#fef3f2; }
button:disabled { opacity:.5; cursor:not-allowed; }
.btn-count { font-size:10.5px; font-weight:700; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--primary-light); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; }
.edit-hint { margin:2px 0 12px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--subtle); }

/* ---------- Jobs table ---------- */
table { width:100%; border-collapse:collapse; font-size:12px; }
th,td { padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; text-align:left; }
th { position:sticky; top:0; z-index:1; background:var(--subtle); color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); }
tr[data-id] { cursor:pointer; transition:background .1s; }
tr[data-id]:hover { background:var(--row-hover); }
tr.selected { background:var(--row-sel); box-shadow:inset 3px 0 0 var(--row-sel-bd); }

/* ---------- Badges (pill + dot) ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:500; border:1px solid var(--line); background:var(--subtle); color:var(--muted); }
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge.uploaded,.badge.queued,.badge.processing { color:var(--blue); background:var(--info-bg); border-color:var(--info-bd); }
.badge.needs_review,.badge.failed { color:var(--orange); background:var(--warning-bg); border-color:var(--warning-bd); }
.badge.artifact_ready { color:var(--green); background:var(--success-bg); border-color:var(--success-bd); }
.badge.submitted { color:var(--green); background:var(--success-bg); border-color:var(--success-bd); font-weight:600; }

/* ---------- File attachments ---------- */
.file-attn-list { display:flex; flex-wrap:wrap; gap:8px; }
.file-attn {
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; max-width:100%;
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:7px 10px; background:#fff;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.file-attn:hover { border-color:var(--primary); box-shadow:var(--shadow-md); background:var(--subtle); }
.file-attn-icon { flex-shrink:0; width:28px; height:28px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; background:var(--primary-light); color:var(--primary); }
.file-attn-body { min-width:0; display:flex; flex-direction:column; gap:1px; }
.file-attn-name { color:var(--text); font-weight:600; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-attn-meta { color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.03em; }
.file-attn-dl { flex-shrink:0; color:var(--faint); display:flex; align-items:center; margin-left:4px; transition:color .12s; }
.file-attn:hover .file-attn-dl { color:var(--primary); }

/* ---------- Key/value ---------- */
.kv { display:grid; grid-template-columns:150px 1fr; gap:8px 12px; font-size:12.5px; }
.kv > div:nth-child(odd) { color:var(--muted); }

/* ---------- Code / details ---------- */
pre { margin:0; padding:12px; background:#0f1729; color:#e6edf3; border-radius:var(--radius-lg); overflow:auto; font:12px/1.5 var(--mono); max-height:70vh; }
details { margin-top:12px; }
summary { cursor:pointer; color:var(--primary); font-weight:600; }

/* ---------- Issues / banners ---------- */
.issue-list { display:grid; gap:8px; margin-top:8px; }
.issue { border:1px solid var(--line); border-radius:var(--radius-lg); padding:9px 11px; background:#fff; }
.issue.error,.issue.critical { border-color:var(--danger-bd); background:var(--danger-bg); }
.issue.warning { border-color:var(--warning-bd); background:var(--warning-bg); }
.pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:1px 7px; font-size:11px; color:var(--muted); margin-right:5px; background:var(--subtle); }
.empty { color:var(--muted); text-align:center; padding:48px 20px; }
.banner { padding:10px 12px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--subtle); margin-bottom:12px; font-size:12.5px; }
.banner.warn { color:var(--orange); background:var(--warning-bg); border-color:var(--warning-bd); }

/* ---------- Proposal / review view ---------- */
.proposal-view { display:grid; gap:10px; }
.proposal-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.proposal-card-head { padding:10px 12px; background:var(--subtle); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.proposal-card-title { font-family:var(--display); font-weight:600; }
.proposal-card-body { padding:10px 12px; }
.field-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:7px; }
.field-card { border:1px solid var(--line-soft); background:var(--subtle); border-radius:var(--radius); padding:7px 9px; min-width:0; transition:border-color .12s; }
.field-card:hover { border-color:var(--line); }
.field-card.field-warn { border-color:var(--warning-bd); background:var(--warning-bg); }
td.cell-warn { border-left:3px solid var(--orange); background:var(--warning-bg); }
.field-label { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.field-display { font-weight:600; font-size:12.5px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; }
.field-code { margin-top:2px; color:var(--muted); font-size:10.5px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.field-code .mono { color:var(--text-reg); }
.proposal-view > .proposal-card { border:0; border-radius:0; background:transparent; box-shadow:none; }
.proposal-view > .proposal-card > .proposal-card-head { background:transparent; border-bottom:1px solid var(--line); padding:8px 0; }
.proposal-view > .proposal-card > .proposal-card-body { padding:8px 0; }

/* Collapsible, highlighted review sub-sections (Header, Purchase Request, …) */
details.view-section { margin:14px 0 0; }
details.view-section > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:15.5px; font-weight:700; letter-spacing:-0.01em;
  color:var(--text); padding:0 0 9px; border-bottom:1.5px solid var(--line);
}
details.view-section > summary::-webkit-details-marker { display:none; }
details.view-section > summary::before {
  content:''; width:4px; height:17px; border-radius:2px; flex-shrink:0; background:var(--primary);
}
details.view-section > summary:hover { color:var(--primary); }
.section-chevron { display:flex; align-items:center; color:var(--faint); transition:transform .15s ease, color .12s; }
details.view-section[open] > summary .section-chevron { transform:rotate(180deg); }
details.view-section > summary:hover .section-chevron { color:var(--primary); }
.section-title { flex:1; }
.view-section-body { padding-top:11px; }
/* Nested sub-sections: same style, one step smaller */
.nested-row-section details.view-section > summary,
details.view-section .view-section-body details.view-section > summary { font-size:13px; }
.nested-row-section details.view-section > summary::before,
details.view-section .view-section-body details.view-section > summary::before { height:14px; }

/* ---------- Inline edit ---------- */
[data-view-id] { position:relative; border-radius:var(--radius); }
[data-view-id]:hover { outline:1px solid var(--info-bd); outline-offset:1px; cursor:text; }
[data-view-id]:hover:after { content:'✎'; position:absolute; right:6px; top:4px; color:var(--primary); font-size:11px; background:var(--info-bg); border:1px solid var(--info-bd); border-radius:999px; padding:0 4px; }
[data-view-id].inline-edited:hover:after { display:none; }
.inline-revert { display:none; position:absolute; right:6px; top:4px; z-index:2; border:1px solid var(--info-bd); background:#fff; color:var(--primary); border-radius:999px; padding:0 6px; font-size:11px; line-height:18px; cursor:pointer; }
.inline-edited:hover .inline-revert, td.inline-edited:hover .inline-revert { display:inline-block; }
.inline-editing { outline:2px solid var(--primary) !important; background:var(--primary-light) !important; }
.inline-editor { width:100%; min-width:80px; border:1px solid var(--primary); border-radius:var(--radius); padding:4px 6px; font:inherit; background:#fff; }
td .inline-editor { min-width:100px; }
.inline-edited { border-color:var(--info-bd) !important; background:var(--info-bg) !important; box-shadow:0 0 0 3px rgba(53,114,120,.18); }
td.inline-edited { box-shadow:inset 0 0 0 2px rgba(53,114,120,.32); }

/* ---------- Correction box ---------- */
.correction-box { margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; background:var(--subtle); }
.correction-row { display:flex; gap:8px; align-items:flex-end; }
.correction-row textarea { min-height:36px; max-height:120px; resize:none; overflow:hidden; flex:1; font:inherit; background:#fff; }
.correction-row button { white-space:nowrap; height:36px; }
.edit-count { color:var(--primary); font-weight:600; }

/* ---------- Object lists / nested ---------- */
.object-list { display:grid; gap:7px; }
.object-row { border:1px solid var(--line-soft); border-radius:var(--radius); padding:8px; background:#fff; }
.object-row-title { font-weight:600; margin-bottom:6px; color:var(--text-reg); }
.compact-table-wrap { width:100%; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.compact-table-wrap table { border:0; }
.review-table { min-width:760px; table-layout:auto; }
.review-table th { position:sticky; top:0; z-index:1; padding:6px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.review-table td { padding:5px 8px; min-width:86px; max-width:210px; }
.review-table .row-title { min-width:120px; max-width:190px; color:var(--text-reg); font-weight:600; background:var(--subtle); }
.review-table .cell-value { font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.review-table .cell-code { margin-top:1px; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.review-table td[data-edit-path] { position:relative; }
.nested-row-sections { margin-top:8px; display:grid; gap:7px; }
.nested-row-section { border:1px dashed var(--line); border-radius:var(--radius); padding:7px; background:var(--subtle); }

/* ---------- Progress panel ---------- */
.progress-panel { flex-shrink:0; margin:0; border-bottom:1px solid var(--line); background:var(--subtle); padding:12px 18px; }
.progress-steps { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.progress-step { color:var(--muted); font-weight:600; }
.progress-step.current { color:var(--primary); }
.progress-subtitle { margin-top:4px; color:var(--muted); font-size:12.5px; }
.progress-dots { color:var(--primary); letter-spacing:2px; }
.progress-dots:after { content:'...'; animation:dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0% { content:''; } 25% { content:'.'; } 50% { content:'..'; } 75%,100% { content:'...'; } }

/* ---------- Modal (API keys) ---------- */
.modal-overlay { position:fixed; inset:0; z-index:50; background:rgba(16,24,40,.45); display:flex; align-items:flex-start; justify-content:center; padding:64px 16px; }
.modal-overlay[hidden] { display:none; }
.modal { width:100%; max-width:560px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--subtle); }
.modal-head h2 { font-size:15px; }
.modal-body { padding:16px 18px; overflow:auto; display:grid; gap:12px; }
.key-create { display:flex; gap:8px; }
.key-create input { flex:1; }
.key-create button { white-space:nowrap; }
.keys-list { display:grid; gap:8px; }
.key-row { display:flex; align-items:center; gap:10px; justify-content:space-between; border:1px solid var(--line); border-radius:var(--radius); padding:9px 11px; background:#fff; }
.key-row.key-revoked { opacity:.55; }
.key-meta { min-width:0; }
.key-label { font-weight:600; font-size:12.5px; }
.new-key-box { border:1px solid var(--success-bd); background:var(--success-bg); border-radius:var(--radius); padding:10px 12px; display:grid; gap:8px; }
.new-key-row { display:flex; align-items:center; gap:8px; }
.new-key-row code { flex:1; min-width:0; overflow-x:auto; white-space:nowrap; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:6px 8px; font-size:11.5px; }
.new-key-row button { white-space:nowrap; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:1100px) { main { grid-template-columns:1fr; height:auto; } }