/* Wriline v2 · Cài đặt (approved canvas "09 · Cài đặt").
   One vocabulary for every section, matching the canvas:
   paper  – white card, 28px radius, the only elevated surface;
   row    – #F7F9FF tile inside a paper (settings, list items);
   kpi    – #F7F9FF tile with a light display number;
   field  – label above a 42px pill control;
   seg    – #F1F4FC pill group, the active option in the brand gradient;
   th/tr  – quiet uppercase header + rounded tinted rows.
   Loaded after wriline-theme.css. Markup and behaviour stay in settings.js. */

#view-settings {
  --s-paper: #fff;
  --s-tile: #F7F9FF;
  --s-seg: #F1F4FC;
  --s-line: #E4E9F7;
  --s-ink: #0E1530;
  --s-ink2: #2B3456;
  --s-muted: #5A6380;
  --s-faint: #8A93AD;
  --s-shadow: 0 18px 44px rgb(40 70 180 / 9%);
}

/* ---------- Layout and section navigation ---------- */
body[data-screen="settings"] #view-settings .p3s-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 22px; align-items: start; }
body[data-screen="settings"] #view-settings .p3s-sidebar {
  position: sticky; top: 26px; display: flex; flex-direction: column; gap: 2px; padding: 22px 12px; border-radius: 32px;
  background: rgb(255 255 255 / 72%); border: 1px solid rgb(255 255 255 / 95%); box-shadow: 0 20px 50px rgb(52 97 245 / 8%);
}
body[data-screen="settings"] #view-settings .p3s-sidebar-title { display: block; margin: 0 12px 10px; font-family: var(--wl-display); font-size: 30px; font-weight: 700; letter-spacing: -.035em; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-nav-search { margin: 0 0 8px; border-radius: 999px !important; background: #fff !important; border: 1px solid var(--s-line) !important; }
body[data-screen="settings"] #view-settings .p3s-nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--s-ink2); font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: none;
}
body[data-screen="settings"] #view-settings .p3s-nav-item::before { display: none !important; }
body[data-screen="settings"] #view-settings .p3s-nav-item:hover:not(.p3s-nav-item--active) { background: rgb(255 255 255 / 85%); }
body[data-screen="settings"] #view-settings .p3s-nav-item :is(svg, .material-symbols-outlined) { width: 18px; height: 18px; font-size: 18px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-launcher-icon { width: auto; height: auto; padding: 0; background: none !important; box-shadow: none !important; border: 0; }
body[data-screen="settings"] #view-settings .p3s-nav-item--active { background: var(--wl-grad) !important; color: #fff !important; box-shadow: 0 8px 18px rgb(43 87 242 / 22%) !important; }
body[data-screen="settings"] #view-settings .p3s-nav-item--active :is(*, svg) { color: #fff !important; }
/* Three groups, each with its pages indented under the group label */
body[data-screen="settings"] #view-settings .p3s-nav-list { display: flex; flex-direction: column; gap: 2px; }
body[data-screen="settings"] #view-settings .p3s-nav-group {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 0 10px; font-family: var(--wl-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--s-ink);
}
body[data-screen="settings"] #view-settings .p3s-nav-group:first-child { margin-top: 6px; }
body[data-screen="settings"] #view-settings .p3s-nav-group[hidden] { display: none; }
body[data-screen="settings"] #view-settings .p3s-nav-group .material-symbols-outlined {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, #E1E8FF, #F0EAFF); color: var(--wl-blue-ink, #2448D8); font-size: 17px;
}
body[data-screen="settings"] #view-settings .p3s-nav-row { position: relative; margin-left: 24px; }
body[data-screen="settings"] #view-settings .p3s-nav-row::before { content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 2px; background: #E6EBF8; border-radius: 2px; }
body[data-screen="settings"] #view-settings .p3s-nav-row:has(.p3s-nav-item--active)::before { background: #7C97FF; }
body[data-screen="settings"] #view-settings .p3s-nav-row .p3s-nav-item { width: 100%; padding: 0 12px; font-size: 13.5px; font-weight: 500; }
body[data-screen="settings"] #view-settings .p3s-nav-row .p3s-nav-item--active { font-weight: 600; }
body[data-screen="settings"] #view-settings :is(.p3s-nav-moves, .p3s-nav-sort, .p3s-nav-hint) { display: none !important; }

/* ---------- Section head: group, title, summary ---------- */
body[data-screen="settings"] #view-settings .p3s-section { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body[data-screen="settings"] #view-settings .p3s-section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "group btn" "title btn" "summary btn";
  align-items: center; column-gap: 14px; row-gap: 4px; margin: 0 0 20px; padding: 0; border: 0; background: none; min-height: 0;
}
body[data-screen="settings"] #view-settings .p3s-section-head .wl-set-group { grid-area: group; font-size: 13px; font-weight: 600; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-section-head .p3s-section-title { grid-area: title; margin: 0; font-family: var(--wl-display); font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-section-head .wl-set-summary { grid-area: summary; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-guide-btn { grid-area: btn; align-self: start; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--s-line); background: #fff; color: var(--wl-link); box-shadow: none; }
body[data-screen="settings"] #view-settings .p3s-section-body { display: flex; flex-direction: column; gap: 18px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body[data-screen="settings"] #view-settings .p3s-section-body + .p3s-section-body { margin-top: 18px; }
body[data-screen="settings"] #view-settings .p3s-section-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; border: 0; background: none; }

/* ---------- Paper: the top-level cards of every section ---------- */
body[data-screen="settings"] #view-settings :is(
  .p3s-perm-list, .p3s-prov-detail, .p3s-or-card, .p3s-stats-collapse, #p3s-quota-settings, #p3s-ai-config-real, #p3s-embedding-model > form,
  #p3s-agent-control > .p3s-ai-card, .p3s-provider-panel, .p3s-registry-collapse, .p3s-ws-card, .p3s-img-strip, .p3s-img-panel > section,
  .p3s-img-panel > div > section, #p3s-content-check-form .p3s-control-card
) {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 24px 26px;
  border: 0 !important; border-radius: 28px !important; background: var(--s-paper) !important; box-shadow: var(--s-shadow) !important;
}
/* Nothing inside a paper is elevated again. */
body[data-screen="settings"] #view-settings :is(.p3s-perm-list, .p3s-prov-detail, .p3s-or-card, .p3s-stats-collapse, #p3s-ai-config-real, .p3s-ai-card, .p3s-provider-panel, .p3s-registry-collapse, .p3s-img-panel, .p3s-control-card) :is([class*="card"], [class*="panel"], [class*="history"], [class*="chart"], [class*="section"], [class*="strip"], [class*="summary"], [class*="node"], [class*="row"], [class*="cell"], [class*="metric"]) {
  box-shadow: none !important;
}

/* Paper headings (h3/h4/legend/titles) — sentence case, 16px, no icon chips. */
body[data-screen="settings"] #view-settings :is(.p3s-ai-card > h3, .p3s-ai-card h4, .p3s-agent-recovery > legend, .p3s-provider-panel__title, .p3s-registry-summary__title, .p3s-stats-summary__title, .p3s-prov-history__title, .p3s-ai-related > h3, #p3s-embedding-model h3.p3s-section-title, .p3s-control-card > legend, .p3s-img-ops-head h3, .p3s-agent-summary h3) {
  margin: 0; padding: 0; font-family: var(--wl-body) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  text-transform: none !important; line-height: 1.35; color: var(--s-ink) !important;
}
body[data-screen="settings"] #view-settings :is(.p3s-prov-history__title, .p3s-stats-summary__title) { font-size: 14px !important; display: flex; align-items: center; gap: 6px; }
body[data-screen="settings"] #view-settings :is(.p3s-prov-history__title, .p3s-registry-summary__icon, .p3s-stats-summary__icon, #p3s-embedding-model h3.p3s-section-title) .material-symbols-outlined,
body[data-screen="settings"] #view-settings :is(.p3s-registry-summary__icon, .p3s-stats-summary__icon) { display: none; }
body[data-screen="settings"] #view-settings :is(.p3s-agent-kicker, .p3s-profile-eyebrow) {
  font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--s-muted) !important;
}
body[data-screen="settings"] #view-settings :is(.p3s-section-desc, .p3s-ai-save-status, .p3s-task-hint, [class*="__sub"], [class*="__hint"]) { font-size: 12.5px; line-height: 1.5; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-ai-save-status:empty { display: none; }

/* ---------- Row tiles ---------- */
body[data-screen="settings"] #view-settings :is(.p3s-perm-item, .p3s-pool-strip, .p3s-agent-signal, .p3s-agent-memory, .p3s-provider-row, .p3s-switch-row, .p3s-agent-scope, .p3s-ai-related, .p3s-task-assignment) {
  display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 13px 16px;
  border: 0 !important; border-radius: 20px !important; background: var(--s-tile) !important; box-shadow: none !important; text-align: left;
}

/* ---------- KPI tiles ---------- */
body[data-screen="settings"] #view-settings :is(.p3s-cost-card, .p3s-metric, .p3s-prov-extra__cell, .p3s-or-stat, .p3s-agent-metric, .p3s-img-strip__cell, .p3s-ws-stat) {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; min-width: 0; margin: 0; padding: 14px 16px;
  border: 0 !important; border-radius: 20px !important; background: var(--s-tile) !important; box-shadow: none !important;
}
body[data-screen="settings"] #view-settings :is(.p3s-metric__k, .p3s-cost-card__label, .p3s-prov-extra__lbl, .p3s-or-stat__k, .p3s-agent-metric > span, .p3s-img-strip__cell > small, .p3s-ws-stat > :last-child) {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--s-muted) !important;
}
body[data-screen="settings"] #view-settings :is(.p3s-metric__v, .p3s-cost-card__value, .p3s-prov-extra__val, .p3s-or-stat__v, .p3s-agent-metric > strong, .p3s-img-strip__cell > b, .p3s-ws-stat > :first-child) {
  font-family: var(--wl-display) !important; font-size: 24px !important; font-weight: 300 !important; letter-spacing: -.02em; line-height: 1.15; color: var(--s-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-screen="settings"] #view-settings :is(.p3s-agent-metric > strong, .p3s-img-strip__cell > b) { order: 2; }
body[data-screen="settings"] #view-settings :is(.p3s-metric__of, .p3s-prov-extra__of, .p3s-or-stat__of) { font-family: var(--wl-body); font-size: 12px; font-weight: 500; color: var(--s-faint); }
body[data-screen="settings"] #view-settings :is(.p3s-metric__sub, .p3s-cost-card__hint) { font-size: 12px; color: var(--s-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-screen="settings"] #view-settings .p3s-cost-card--balance { background: linear-gradient(140deg, #2B57F2 0%, #6C8CFF 55%, #AFC1FF 100%) !important; }
body[data-screen="settings"] #view-settings .p3s-cost-card--balance :is(*, .p3s-cost-card__value, .p3s-cost-card__label, .p3s-cost-card__hint) { color: #fff !important; }
body[data-screen="settings"] #view-settings .p3s-btn-edit-balance { width: 28px !important; height: 28px !important; min-height: 28px; margin-left: auto; border: 0 !important; border-radius: 50% !important; background: rgb(255 255 255 / 22%) !important; }
body[data-screen="settings"] #view-settings .p3s-agent-metric--warn { background: #FFF6E3 !important; }
body[data-screen="settings"] #view-settings .p3s-agent-metric--warn > strong { color: #7A4A00 !important; }
/* KPI grids */
body[data-screen="settings"] #view-settings :is(.p3s-cost-overview, .p3s-prov-detail__metrics, .p3s-prov-extra__row, .p3s-or-stat-row, .p3s-stats-totals) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
body[data-screen="settings"] #view-settings .p3s-agent-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
body[data-screen="settings"] #view-settings .p3s-img-strip { display: grid !important; flex-direction: row; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 18px; }
body[data-screen="settings"] #view-settings .p3s-img-strip__cell :is(.material-symbols-outlined, svg) { display: none; }

/* ---------- Fields and controls ---------- */
body[data-screen="settings"] #view-settings .p3s-form-field {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; margin: 0; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
body[data-screen="settings"] #view-settings .p3s-form-field > span:first-child, body[data-screen="settings"] #view-settings :is(.p3s-task-label, .p3s-prov-select__lbl) {
  font-size: 12.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--s-ink2);
}
body[data-screen="settings"] #view-settings :is(.mselect-button, .p3s-form-input, input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="search"], select:not([data-mselect])) {
  min-height: 42px; height: 42px; padding: 0 16px; border: 1px solid var(--s-line) !important; border-radius: 999px !important;
  background: #fff !important; box-shadow: none !important; font-size: 13.5px; color: var(--s-ink);
}
body[data-screen="settings"] #view-settings .mselect-button { display: flex; align-items: center; gap: 8px; }
body[data-screen="settings"] #view-settings .mselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-screen="settings"] #view-settings textarea { border: 1px solid var(--s-line) !important; border-radius: 18px !important; background: #fff !important; padding: 10px 14px; }
body[data-screen="settings"] #view-settings :is(.p3s-agent-controls, .p3s-settings-grid, .p3c-model-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
/* Switches: checkbox inputs inside rows become the canvas switch */
body[data-screen="settings"] #view-settings :is(.p3s-perm-item, .p3s-switch-row) input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0 0 0 auto; border: 0; border-radius: 999px;
  background: #DDE2EF; cursor: pointer; transition: background 200ms;
}
body[data-screen="settings"] #view-settings :is(.p3s-perm-item, .p3s-switch-row) input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: transform 200ms var(--wl-ease);
}
body[data-screen="settings"] #view-settings :is(.p3s-perm-item, .p3s-switch-row) input[type="checkbox"]:checked { background: var(--wl-grad); }
body[data-screen="settings"] #view-settings :is(.p3s-perm-item, .p3s-switch-row) input[type="checkbox"]:checked::after { transform: translateX(18px); }
body[data-screen="settings"] #view-settings :is(.p3s-perm-item, .p3s-switch-row) input[type="checkbox"]:focus-visible { outline: 2px solid var(--wl-blue); outline-offset: 2px; }
body[data-screen="settings"] #view-settings .p3s-toggle { width: 44px; height: 26px; border-radius: 999px; background: #DDE2EF; }
body[data-screen="settings"] #view-settings .p3s-toggle--on { background: var(--wl-grad) !important; }
body[data-screen="settings"] #view-settings input[type="checkbox"] { accent-color: var(--wl-blue); }

/* Segmented groups */
body[data-screen="settings"] #view-settings :is(.p3s-prov-tabs, .p3s-ai-role-switch, .p3s-img-subtabs, .p3s-period-tabs, .p3s-pool-pills, .p3s-img-model-toggle) {
  display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 4px; margin: 0; padding: 4px; border: 0 !important; border-radius: 24px !important; background: var(--s-seg) !important; box-shadow: none !important;
}
body[data-screen="settings"] #view-settings :is(.p3s-prov-tab, .p3s-ai-role-switch > button, .p3s-img-subtab, .p3s-period-tab, .p3s-quick-mode, .p3s-img-model-toggle > button) {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; min-height: 36px; padding: 0 14px; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; color: var(--s-ink2) !important; font-size: 13px; font-weight: 600; box-shadow: none !important; white-space: nowrap;
}
body[data-screen="settings"] #view-settings :is(.p3s-prov-tab--active, .p3s-ai-role-switch > button.is-active, .p3s-img-subtab.is-active, .p3s-img-subtab[aria-selected="true"], .p3s-period-tab--active, .p3s-quick-mode.p3r-btn--blue, .p3s-img-model-toggle > button.is-active) {
  background: var(--wl-grad) !important; color: #fff !important; box-shadow: 0 6px 14px rgb(62 107 255 / 22%) !important;
}
body[data-screen="settings"] #view-settings :is(.p3s-prov-tab--active, .p3s-ai-role-switch > button.is-active, .p3s-img-subtab.is-active, .p3s-period-tab--active) * { color: #fff !important; }
body[data-screen="settings"] #view-settings .p3s-prov-tab__badge { padding: 2px 8px; border-radius: 999px; background: rgb(14 21 48 / 7%); color: var(--s-muted); font-size: 11px; font-weight: 600; }
body[data-screen="settings"] #view-settings .p3s-prov-tab--active .p3s-prov-tab__badge { background: rgb(255 255 255 / 25%); }
body[data-screen="settings"] #view-settings .p3s-ai-role-switch > button .material-symbols-outlined { font-size: 16px; }

/* Buttons */
body[data-screen="settings"] #view-settings .p3r-btn, body[data-screen="settings"] #view-settings .p3s-btn-blue {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-height: 42px; padding: 0 16px; border-radius: 999px !important;
  border: 1px solid var(--s-line); background: #fff; color: var(--s-ink); font-size: 13.5px; font-weight: 600; box-shadow: none; white-space: nowrap;
}
body[data-screen="settings"] #view-settings :is(.p3r-btn--blue, .p3r-btn--primary, .p3s-btn-blue, #p3s-agent-save, #p3s-research-agents > .p3r-btn, .p3s-verification-actions > .p3r-btn) {
  background: var(--wl-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 8px 18px rgb(43 87 242 / 24%) !important;
}
body[data-screen="settings"] #view-settings :is(.p3s-agent-stop, .p3s-role-clear, .p3s-perm-item--danger) { color: #9A1C1C; }
body[data-screen="settings"] #view-settings .p3s-agent-stop { background: #FFF0F0 !important; border-color: #FFD2D2 !important; }
body[data-screen="settings"] #view-settings .p3s-icon-btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--s-line); background: #fff; color: var(--s-ink2); }
body[data-screen="settings"] #view-settings :is(.p3s-badge, [class*="pill"]:not(.p3s-pool-pills), .p3s-route-rev-tag, .p3s-img-chip) {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 0;
}
body[data-screen="settings"] #view-settings .p3s-meta-pill { background: #E6EDFF !important; color: #2448D8 !important; }
/* Strings that read like code use the body font, quiet */
body[data-screen="settings"] #view-settings :is(code, kbd, samp) { font-family: var(--wl-body) !important; font-size: 12px !important; color: var(--s-muted); background: none !important; padding: 0 !important; border: 0 !important; overflow-wrap: anywhere; }

/* ---------- Tables (th / tr) ---------- */
body[data-screen="settings"] #view-settings :is(.p3s-cost-table-wrap, .p3s-routes-table-wrap) { overflow-x: auto; border: 0; background: none; padding: 0; margin: 0; }
body[data-screen="settings"] #view-settings :is(.p3s-cost-table, .p3s-routes-table) { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 13px; background: none; border: 0; }
body[data-screen="settings"] #view-settings :is(.p3s-cost-table, .p3s-routes-table) th {
  padding: 4px 14px; border: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--s-faint); text-align: left; white-space: nowrap;
}
body[data-screen="settings"] #view-settings :is(.p3s-cost-table, .p3s-routes-table) td { padding: 11px 14px; border: 0 !important; background: var(--s-tile); color: var(--s-ink2); vertical-align: middle; line-height: 1.45; }
body[data-screen="settings"] #view-settings :is(.p3s-cost-table, .p3s-routes-table) td:first-child { border-radius: 16px 0 0 16px; color: var(--s-ink); font-weight: 600; }
body[data-screen="settings"] #view-settings :is(.p3s-cost-table, .p3s-routes-table) td:last-child { border-radius: 0 16px 16px 0; }
body[data-screen="settings"] #view-settings .p3s-routes-table { min-width: 1080px; table-layout: auto; }
body[data-screen="settings"] #view-settings .p3s-routes-table td { font-size: 12.5px; }
body[data-screen="settings"] #view-settings .p3s-routes-table td:nth-child(3) { min-width: 220px; }
body[data-screen="settings"] #view-settings .p3s-routes-section { display: flex; flex-direction: column; gap: 10px; padding: 0 !important; background: none !important; border: 0 !important; }
body[data-screen="settings"] #view-settings .p3s-cost-table-wrap { max-height: 360px; overflow-y: auto; }

/* ---------- Charts inside papers: plain tiles ---------- */
body[data-screen="settings"] #view-settings :is(.p3s-prov-history, .p3s-cost-panel, .p3s-stats-avg, .p3s-daily-chart, .p3s-breakdown, .p3s-activity) {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px !important; margin: 0; border: 0 !important; border-radius: 20px !important; background: var(--s-tile) !important; box-shadow: none !important;
}
body[data-screen="settings"] #view-settings .p3s-cost-panel:has(.p3s-cost-table-wrap) { background: none !important; padding: 0 !important; }
body[data-screen="settings"] #view-settings .p3s-prov-extra { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
body[data-screen="settings"] #view-settings .p3s-prov-history__bar { background: none !important; }
body[data-screen="settings"] #view-settings :is(.p3s-prov-history__bar > i, .p3s-cost-bars__col > i, .p3s-day-bar) { background: linear-gradient(180deg, #7C97FF, #2B57F2) !important; border-radius: 6px 6px 2px 2px !important; }
body[data-screen="settings"] #view-settings :is(.p3s-prov-history__lbl, .p3s-cost-bars__col > small, .p3s-day-lbl, .p3s-day-ytick) { font-size: 10.5px; color: var(--s-faint); }
body[data-screen="settings"] #view-settings .p3s-prov-history__val { font-size: 11px; font-weight: 600; color: var(--s-ink2); }

/* =====================================================================
   Per section
   ===================================================================== */
/* Cá nhân, Bảo mật: one paper of rows */
body[data-screen="settings"] #view-settings .p3s-perm-list { gap: 10px; }
body[data-screen="settings"] #view-settings .p3s-perm-item { min-height: 64px; width: 100%; cursor: pointer; }
body[data-screen="settings"] #view-settings .p3s-perm-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff !important; color: var(--wl-link); box-shadow: none; }
body[data-screen="settings"] #view-settings .p3s-perm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body[data-screen="settings"] #view-settings .p3s-perm-name { font-size: 14px; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-perm-info > :not(.p3s-perm-name):not(.p3s-profile-eyebrow):not(.p3s-profile-role) { font-size: 12.5px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-perm-item--danger { background: #FFF6F6 !important; }
body[data-screen="settings"] #view-settings .p3s-perm-item--danger .p3s-perm-icon { color: #9A1C1C; }
body[data-screen="settings"] #view-settings .p3s-profile-card { gap: 16px; padding: 4px 4px 14px !important; background: none !important; border-bottom: 1px solid var(--wl-line-soft) !important; border-radius: 0 !important; cursor: default; }
body[data-screen="settings"] #view-settings .p3s-profile-avatar { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(140deg, #E1E8FF, #F0EAFF); color: #2448D8; font-family: var(--wl-display); font-size: 26px; font-weight: 700; }
body[data-screen="settings"] #view-settings .p3s-profile-card .p3s-perm-name { font-family: var(--wl-display); font-size: 22px; letter-spacing: -.01em; }
body[data-screen="settings"] #view-settings .p3s-profile-role { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: #E6EDFF; color: #2448D8; font-size: 11.5px; font-weight: 600; }

/* Tìm kiếm */
body[data-screen="settings"] #view-settings .p3s-prov-detail__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; padding: 0; border: 0; }
body[data-screen="settings"] #view-settings .p3s-prov-detail__title { flex: 1 1 100%; display: flex; align-items: baseline; gap: 10px; font-family: var(--wl-display); font-size: 22px; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-prov-detail__sub { font-family: var(--wl-body); font-size: 13px; font-weight: 500; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-prov-select-wrap { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; max-width: 420px; }
body[data-screen="settings"] #view-settings .p3s-prov-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-screen="settings"] #view-settings .p3s-usage-status { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: #FFF0F0; color: #9A1C1C; font-size: 12px; font-weight: 600; }
body[data-screen="settings"] #view-settings .p3s-pool-strip { flex-wrap: wrap; justify-content: space-between; font-size: 13px; color: var(--s-ink2); }
body[data-screen="settings"] #view-settings .p3s-pool-pills { background: #fff !important; }

/* Tín dụng AI */
body[data-screen="settings"] #view-settings .p3s-or-card__head { display: flex; flex-direction: column; gap: 14px; }
body[data-screen="settings"] #view-settings .p3s-or-card__title { display: flex; align-items: center; gap: 8px; font-family: var(--wl-display); font-size: 20px; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-or-card__label { font-size: 12px; color: var(--s-faint); }
body[data-screen="settings"] #view-settings .p3s-or-pill--paid { background: #DDF5EC; color: #0F5A40; }
body[data-screen="settings"] #view-settings .p3s-stats-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
body[data-screen="settings"] #view-settings .p3s-stats-summary::-webkit-details-marker { display: none; }
body[data-screen="settings"] #view-settings .p3s-stats-summary__totals { font-size: 13px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-period-tabs { margin-left: auto; }
body[data-screen="settings"] #view-settings .p3s-stats-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
body[data-screen="settings"] #view-settings .p3s-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

/* Hạn mức */
body[data-screen="settings"] #view-settings #p3s-quota-settings { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
body[data-screen="settings"] #view-settings #p3s-quota-settings > .p3s-section-foot { grid-column: 1 / -1; margin: 4px 0 0; align-items: center; }

/* Mô hình AI */
body[data-screen="settings"] #view-settings #p3s-ai-config-real { gap: 16px; }
body[data-screen="settings"] #view-settings .p3s-ai-overview { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; background: none; }
body[data-screen="settings"] #view-settings .p3s-ai-provider__meta { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-screen="settings"] #view-settings .p3s-ai-overview > .p3s-task-assignment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); grid-template-areas: "label select" "hint select"; align-items: center; gap: 2px 16px; background: linear-gradient(135deg, #EEF3FF, #F6F4FF) !important; }
body[data-screen="settings"] #view-settings .p3s-ai-overview > .p3s-task-assignment > .p3s-task-label { grid-area: label; font-size: 14px; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-ai-overview > .p3s-task-assignment > .mselect { grid-area: select; }
body[data-screen="settings"] #view-settings .p3s-ai-overview > .p3s-task-assignment > .p3s-task-hint { grid-area: hint; }
body[data-screen="settings"] #view-settings .p3s-ai-flow { margin: 0; padding: 0; border: 0; background: none; }
body[data-screen="settings"] #view-settings .p3s-ai-flow-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; background: none; border: 0; }
body[data-screen="settings"] #view-settings .p3s-ai-flow-steps > li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #EEF0F6; color: #3C4460; font-size: 12.5px; font-weight: 600; }
body[data-screen="settings"] #view-settings .p3s-ai-flow-steps > li :is(b, strong, span:first-child) { color: var(--wl-link); }
body[data-screen="settings"] #view-settings .p3s-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
body[data-screen="settings"] #view-settings .p3s-role-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px !important; border: 0 !important; border-radius: 20px !important; background: var(--s-tile) !important; box-shadow: none !important; min-height: 0; }
body[data-screen="settings"] #view-settings .p3s-role-card__head { display: flex; align-items: center; gap: 10px; margin: 0; }
body[data-screen="settings"] #view-settings .p3s-role-card__head :is(h3, h4, strong, b) { font-size: 14.5px; font-weight: 700; color: var(--s-ink); margin: 0; }
body[data-screen="settings"] #view-settings .p3s-role-card__icon { width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--wl-link); display: grid; place-items: center; }
body[data-screen="settings"] #view-settings .p3s-role-card .p3s-task-assignment { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0 !important; background: none !important; }
body[data-screen="settings"] #view-settings .p3s-role-card .p3s-task-assignment > div:has(.mselect) { display: flex; gap: 8px; align-items: center; }
body[data-screen="settings"] #view-settings .p3s-ai-related { flex-wrap: wrap; }
body[data-screen="settings"] #view-settings .p3s-ai-related-links { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-screen="settings"] #view-settings .p3s-ai-related-links .p3r-btn { height: 34px; min-height: 34px; font-size: 12.5px; }
body[data-screen="settings"] #view-settings #p3s-embedding-model { margin-top: 18px; }
body[data-screen="settings"] #view-settings #p3s-embedding-model h3.p3s-section-title { display: flex; align-items: center; gap: 8px; }
body[data-screen="settings"] #view-settings .p3c-model-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body[data-screen="settings"] #view-settings .p3c-model-status > span { padding: 4px 10px; border-radius: 999px; background: var(--s-tile); font-size: 12px; font-weight: 600; color: var(--s-ink2); }
body[data-screen="settings"] #view-settings .p3c-model-status > span:nth-child(even) { padding: 0; background: none; color: var(--s-faint); }
body[data-screen="settings"] #view-settings .p3s-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Đa tác nhân */
body[data-screen="settings"] #view-settings #p3s-agent-control { gap: 18px; }
body[data-screen="settings"] #view-settings #p3s-agent-control > .p3s-ai-card > .p3r-btn,
body[data-screen="settings"] #view-settings .p3s-verification-actions { align-self: flex-end; }
body[data-screen="settings"] #view-settings .p3s-verification-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
body[data-screen="settings"] #view-settings .p3s-verification-form { display: flex; flex-direction: column; gap: 14px; }
body[data-screen="settings"] #view-settings .p3s-agent-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 !important; background: none !important; border: 0 !important; }
body[data-screen="settings"] #view-settings .p3s-agent-summary__copy { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
body[data-screen="settings"] #view-settings .p3s-agent-summary__state { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: #DDF5EC; color: #0F5A40; font-size: 13px; }
body[data-screen="settings"] #view-settings .p3s-agent-summary__state--off { background: #EEF0F6; color: #3C4460; }
body[data-screen="settings"] #view-settings .p3s-agent-summary__state--shadow { background: #E6EDFF; color: #2448D8; }
body[data-screen="settings"] #view-settings .p3s-agent-summary__state .material-symbols-outlined { font-size: 18px; }
body[data-screen="settings"] #view-settings .p3s-agent-scope { flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-agent-scope b { color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-agent-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
body[data-screen="settings"] #view-settings .p3s-agent-flow--independent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-screen="settings"] #view-settings .p3s-agent-flow::before, body[data-screen="settings"] #view-settings .p3s-agent-flow::after { display: none; }
body[data-screen="settings"] #view-settings .p3s-agent-node {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "icon title" "icon role" "model model" "state state";
  align-items: center; gap: 2px 10px; padding: 14px 16px !important; border: 0 !important; border-radius: 20px !important; background: var(--s-tile) !important; text-align: left;
}
body[data-screen="settings"] #view-settings .p3s-agent-node__icon { grid-area: icon; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--wl-link); font-size: 18px; }
body[data-screen="settings"] #view-settings .p3s-agent-node > strong { grid-area: title; font-size: 14px; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-agent-node > span:not(.p3s-agent-node__icon) { grid-area: role; font-size: 12px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-agent-node > code { grid-area: model; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-screen="settings"] #view-settings .p3s-agent-node > small { grid-area: state; justify-self: start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #EEF0F6; color: #3C4460; font-size: 11.5px; font-weight: 600; }
body[data-screen="settings"] #view-settings .p3s-agent-node--completed > small { background: #DDF5EC; color: #0F5A40; }
body[data-screen="settings"] #view-settings :is(.p3s-agent-node--blocked, .p3s-agent-node--failed) > small { background: #FFF0D6; color: #7A4A00; }
body[data-screen="settings"] #view-settings .p3s-agent-signals { display: flex; flex-direction: column; gap: 8px; padding: 0 !important; background: none !important; border: 0 !important; }
body[data-screen="settings"] #view-settings :is(.p3s-agent-signals, .p3s-agent-recovery details) > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--s-ink); list-style: none; padding: 6px 0; }
body[data-screen="settings"] #view-settings :is(.p3s-agent-signals, .p3s-agent-recovery details) > summary::after { content: " ›"; color: var(--wl-link); }
body[data-screen="settings"] #view-settings :is(.p3s-agent-signals, .p3s-agent-recovery details)[open] > summary::after { content: " ˅"; }
body[data-screen="settings"] #view-settings .p3s-agent-signal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
body[data-screen="settings"] #view-settings .p3s-agent-signal > div { display: flex; align-items: center; gap: 8px; }
body[data-screen="settings"] #view-settings .p3s-agent-signal > small { grid-column: 1; font-size: 12px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-agent-signal > a { grid-column: 2; grid-row: 1 / span 2; font-size: 12.5px; font-weight: 600; color: var(--wl-link); }
body[data-screen="settings"] #view-settings .p3s-agent-signal > details { grid-column: 1 / -1; font-size: 12px; }
body[data-screen="settings"] #view-settings .p3s-agent-signal__state { padding: 3px 10px; border-radius: 999px; background: #EEF0F6; color: #3C4460; font-size: 11.5px; font-weight: 600; }
body[data-screen="settings"] #view-settings .p3s-agent-signal__state--completed { background: #DDF5EC; color: #0F5A40; }
body[data-screen="settings"] #view-settings .p3s-agent-signal__state--started { background: #E6EDFF; color: #2448D8; }
body[data-screen="settings"] #view-settings :is(.p3s-agent-signal__state--blocked, .p3s-agent-signal__state--failed) { background: #FFF0D6; color: #7A4A00; }
body[data-screen="settings"] #view-settings .p3s-agent-recovery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 18px !important; border: 0 !important; border-radius: 20px !important; background: var(--s-tile) !important; }
body[data-screen="settings"] #view-settings .p3s-agent-recovery > legend { float: left; grid-column: 1 / -1; width: 100%; margin-bottom: 2px; }
body[data-screen="settings"] #view-settings .p3s-agent-recovery > details { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
body[data-screen="settings"] #view-settings .p3s-agent-memory { background: #fff !important; flex-wrap: wrap; font-size: 12.5px; }
body[data-screen="settings"] #view-settings .p3s-agent-memory > strong { font-size: 13px; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-agent-memory > span { flex: 1; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-agent-plane > #p3s-agent-save { align-self: flex-end; }

/* Thư viện model */
body[data-screen="settings"] #view-settings .p3s-provider-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: none; }
body[data-screen="settings"] #view-settings .p3s-provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; }
body[data-screen="settings"] #view-settings .p3s-provider-row { align-items: flex-start; padding: 16px 18px; }
body[data-screen="settings"] #view-settings .p3s-provider-row__icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff !important; color: var(--wl-link); }
body[data-screen="settings"] #view-settings .p3s-provider-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--s-muted); overflow-wrap: anywhere; }
body[data-screen="settings"] #view-settings .p3s-provider-row__main :is(strong, b, h4) { font-size: 14.5px; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-provider-row__actions { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-screen="settings"] #view-settings .p3s-provider-row { flex-wrap: wrap; }
body[data-screen="settings"] #view-settings .p3s-provider-row__actions { flex-basis: 100%; padding-left: 50px; }
body[data-screen="settings"] #view-settings .p3s-registry-summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
body[data-screen="settings"] #view-settings .p3s-registry-summary::-webkit-details-marker { display: none; }
body[data-screen="settings"] #view-settings .p3s-registry-summary__title::after { content: " ›"; color: var(--wl-link); }
body[data-screen="settings"] #view-settings .p3s-registry-collapse[open] .p3s-registry-summary__title::after { content: " ˅"; }
body[data-screen="settings"] #view-settings .p3s-registry-add-btn { margin-left: auto; }
body[data-screen="settings"] #view-settings .p3s-registry-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 560px; overflow-y: auto; }
body[data-screen="settings"] #view-settings .p3s-registry-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px !important; border: 0 !important; border-radius: 16px !important; background: var(--s-tile) !important; font-size: 13px; }

/* Nhóm */
body[data-screen="settings"] #view-settings .p3s-ws-card { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 18px; }
body[data-screen="settings"] #view-settings .p3s-ws-avatar { width: 64px; height: 64px; border-radius: 22px; overflow: hidden; background: linear-gradient(140deg, #E1E8FF, #F0EAFF); display: grid; place-items: center; }
body[data-screen="settings"] #view-settings .p3s-ws-avatar img { width: 44px; height: auto; }
body[data-screen="settings"] #view-settings .p3s-ws-info { flex: 1; min-width: 200px; }
body[data-screen="settings"] #view-settings .p3s-ws-name { font-family: var(--wl-display); font-size: 22px; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-ws-sub { font-size: 13px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-ws-stats { display: flex; gap: 12px; }
body[data-screen="settings"] #view-settings .p3s-ws-go { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--wl-grad); color: #fff; font-weight: 600; }

/* Tạo ảnh */
body[data-screen="settings"] #view-settings #p3s-image-studio { gap: 18px; }
body[data-screen="settings"] #view-settings .p3s-img-shell { display: flex; flex-direction: column; gap: 18px; padding: 0; background: none; border: 0; box-shadow: none; }
body[data-screen="settings"] #view-settings .p3s-img-hero-redesign { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; background: none !important; border: 0; box-shadow: none !important; min-height: 60px; margin: 0 0 2px; }
body[data-screen="settings"] #view-settings .p3s-img-hero-redesign h3 { margin: 0; font-family: var(--wl-display) !important; font-size: 32px !important; font-weight: 700; letter-spacing: -.03em; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-img-subtabs { border-bottom: 0 !important; }
body[data-screen="settings"] #view-settings .p3s-img-ops-head { display: flex; align-items: center; gap: 12px; }
body[data-screen="settings"] #view-settings .p3s-img-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 24px; background: var(--s-seg); align-self: flex-start; }
body[data-screen="settings"] #view-settings .p3s-img-chip { height: 32px; padding: 0 12px; background: transparent; color: var(--s-ink2); }
body[data-screen="settings"] #view-settings .p3s-img-chip:is(.is-active, [aria-pressed="true"]) { background: var(--wl-grad); color: #fff; }
body[data-screen="settings"] #view-settings .p3s-img-timeline { display: flex; flex-direction: column; gap: 8px; }
body[data-screen="settings"] #view-settings .p3s-img-tl-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px !important; border: 0 !important; border-radius: 18px !important; background: var(--s-tile) !important; box-shadow: none !important; }

/* Kiểm tra nội dung */
body[data-screen="settings"] #view-settings #p3s-content-check-form .p3s-form-stack { display: flex; flex-direction: column; gap: 18px; }
body[data-screen="settings"] #view-settings #p3s-content-check-form .p3s-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
body[data-screen="settings"] #view-settings #p3s-content-check-form .p3s-control-card > legend { float: left; width: 100%; margin-bottom: 6px; }

@media (max-width: 1099px) {
  body[data-screen="settings"] #view-settings .p3s-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-screen="settings"] #view-settings .p3s-sidebar { position: static; }
  body[data-screen="settings"] #view-settings :is(.p3s-role-grid, .p3s-provider-list, #p3s-content-check-form .p3s-settings-grid, .p3s-agent-flow, .p3s-agent-flow--independent) { grid-template-columns: minmax(0, 1fr); }
  body[data-screen="settings"] #view-settings :is(.p3s-agent-metrics, .p3s-img-strip) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  body[data-screen="settings"] #view-settings :is(.p3s-cost-overview, .p3s-prov-detail__metrics, .p3s-prov-extra__row, .p3s-or-stat-row, .p3s-stats-totals, #p3s-quota-settings, .p3s-agent-recovery) { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-screen="settings"] #view-settings :is(.p3s-agent-metrics, .p3s-img-strip) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-screen="settings"] #view-settings :is(.p3s-perm-list, .p3s-prov-detail, .p3s-or-card, .p3s-stats-collapse, #p3s-ai-config-real, .p3s-ai-card, .p3s-provider-panel, .p3s-registry-collapse) { padding: 18px !important; border-radius: 24px !important; }
  body[data-screen="settings"] #view-settings .p3s-section-head .p3s-section-title { font-size: 26px; }
}

/* ---------- Detail fixes after side-by-side ---------- */
/* Search box: one pill, not a pill in a pill */
body[data-screen="settings"] #view-settings .p3s-nav-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; }
body[data-screen="settings"] #view-settings .p3s-nav-search input { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body[data-screen="settings"] #view-settings .p3s-nav-search .material-symbols-outlined { font-size: 18px; color: var(--s-muted); }
/* Hạn mức: the fields sit inside the paper */
body[data-screen="settings"] #view-settings #p3s-quota-settings { padding: 24px 26px !important; }
/* Tín dụng AI: chart / breakdown headings in sentence case, no stray chevron */
body[data-screen="settings"] #view-settings :is(.p3s-daily-chart__title, .p3s-breakdown__title) { font-family: var(--wl-body) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--s-ink) !important; }
body[data-screen="settings"] #view-settings .p3s-breakdown__title { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 0 0 10px; border-bottom: 1px solid var(--wl-line-soft); }
body[data-screen="settings"] #view-settings .p3s-breakdown__title::-webkit-details-marker { display: none; }
body[data-screen="settings"] #view-settings .p3s-breakdown__title .material-symbols-outlined:first-child { display: none; }
body[data-screen="settings"] #view-settings .p3s-breakdown__chevron { margin-left: auto; font-size: 18px; color: var(--s-faint); }
body[data-screen="settings"] #view-settings .p3s-daily-chart__total-val { font-family: var(--wl-display); font-size: 24px; font-weight: 300; color: var(--wl-link); }
body[data-screen="settings"] #view-settings .p3s-stats-summary::after { display: none !important; }
body[data-screen="settings"] #view-settings .p3s-stats-summary__chevron, body[data-screen="settings"] #view-settings .p3s-stats-summary > .material-symbols-outlined { display: none; }
body[data-screen="settings"] #view-settings .p3s-stats-collapse > summary + * { border-top: 0; }
/* Nhóm: label above, number below */
body[data-screen="settings"] #view-settings .p3s-ws-stat { min-width: 120px; }
body[data-screen="settings"] #view-settings .p3s-ws-stat > .k { order: 1; font-family: var(--wl-body) !important; font-size: 12.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--s-muted) !important; }
body[data-screen="settings"] #view-settings .p3s-ws-stat > .v { order: 2; font-family: var(--wl-display) !important; font-size: 24px !important; font-weight: 300 !important; color: var(--s-ink) !important; }
body[data-screen="settings"] #view-settings .p3s-ws-go { display: inline-flex; align-items: center; gap: 6px; }
/* Thư viện model: URLs in the body font */
body[data-screen="settings"] #view-settings .p3s-provider-row__url { font-family: var(--wl-body) !important; font-size: 12.5px; color: var(--s-muted); overflow-wrap: anywhere; }
body[data-screen="settings"] #view-settings .p3s-provider-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings :is(.p3s-role-tag-pill, .p3s-provider-kind-pill) { padding: 3px 10px; border-radius: 999px; background: #E6EDFF !important; color: #2448D8 !important; font-size: 11.5px; font-weight: 600; }
body[data-screen="settings"] #view-settings .p3s-registry-collapse:not([open]) { padding-top: 18px; padding-bottom: 18px; }
/* Tạo ảnh: timeline rows with a right-aligned progress column */
body[data-screen="settings"] #view-settings .p3s-img-tl-item { display: grid !important; grid-template-columns: 28px 44px minmax(0, 1fr) 150px; align-items: center; }
body[data-screen="settings"] #view-settings .p3s-img-tl-icon { display: grid; place-items: center; }
body[data-screen="settings"] #view-settings .p3s-img-tl-thumb { width: 44px; height: 44px; border-radius: 12px; background: #fff; object-fit: cover; }
body[data-screen="settings"] #view-settings .p3s-img-tl-title { font-size: 13.5px; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-screen="settings"] #view-settings .p3s-img-tl-sub { font-size: 12px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-img-tl-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar pct" "btn btn"; align-items: center; gap: 6px 8px; width: 150px; justify-self: end; }
body[data-screen="settings"] #view-settings .p3s-img-tl-progress { grid-area: bar; height: 6px; border-radius: 999px; background: #E6EDFF; overflow: hidden; }
body[data-screen="settings"] #view-settings .p3s-img-tl-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--wl-grad-bar); }
body[data-screen="settings"] #view-settings .p3s-img-tl-pct { grid-area: pct; font-size: 12px; font-weight: 700; color: var(--s-ink2); }
body[data-screen="settings"] #view-settings .p3s-img-tl-meta > .p3s-img-chip { grid-area: btn; justify-self: end; height: 30px; padding: 0 14px; background: #fff !important; border: 1px solid var(--s-line) !important; color: var(--s-ink2) !important; }
body[data-screen="settings"] #view-settings .p3s-img-ops-head { justify-content: space-between; }
body[data-screen="settings"] #view-settings .p3s-img-ops-card > a, body[data-screen="settings"] #view-settings .p3s-img-ops-card > div:last-child > :is(a, button) { align-self: flex-start; }
body[data-screen="settings"] #view-settings .p3s-img-model-toggle { background: #fff !important; border: 1px solid var(--s-line) !important; }
@media (max-width: 699px) {
  body[data-screen="settings"] #view-settings .p3s-img-tl-item { grid-template-columns: 28px minmax(0, 1fr); }
  body[data-screen="settings"] #view-settings :is(.p3s-img-tl-thumb) { display: none; }
  body[data-screen="settings"] #view-settings .p3s-img-tl-meta { grid-column: 1 / -1; width: 100%; }
}

/* =====================================================================
   Mô hình AI · calmer layout: facts strip, JEV row, flow switch,
   one list of role rows (name + status | model select | reset).
   ===================================================================== */
body[data-screen="settings"] #view-settings #p3s-ai-config-real { gap: 18px; overflow: hidden; }
/* Facts: three quiet tiles in one row */
body[data-screen="settings"] #view-settings .p3s-ai-overview { gap: 14px; }
body[data-screen="settings"] #view-settings .p3s-ai-provider__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body[data-screen="settings"] #view-settings .p3s-ai-fact { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 18px; background: var(--s-tile); }
body[data-screen="settings"] #view-settings .p3s-ai-fact small { font-size: 12px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-ai-fact b { font-family: var(--wl-display); font-size: 20px; font-weight: 500; color: var(--s-ink); }
/* JEV: a plain row, no gradient */
body[data-screen="settings"] #view-settings .p3s-ai-overview > .p3s-ai-jev {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); grid-template-areas: "label select" "hint select";
  align-items: center; gap: 2px 16px; padding: 14px 16px; border-radius: 18px !important; background: var(--s-tile) !important;
}
body[data-screen="settings"] #view-settings .p3s-ai-jev > .p3s-task-label { grid-area: label; font-size: 14px; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-ai-jev > .mselect { grid-area: select; min-width: 0; }
body[data-screen="settings"] #view-settings .p3s-ai-jev > .p3s-task-hint { grid-area: hint; font-size: 12.5px; color: var(--s-muted); }
/* Flow switch + steps on one line of quiet text */
body[data-screen="settings"] #view-settings .p3s-ai-role-switch { margin-top: 6px; }
body[data-screen="settings"] #view-settings .p3s-ai-flow-steps { gap: 0; }
body[data-screen="settings"] #view-settings .p3s-ai-flow-steps > li { height: auto; padding: 0; border-radius: 0; background: none !important; color: var(--s-muted); font-size: 12.5px; font-weight: 500; }
body[data-screen="settings"] #view-settings .p3s-ai-flow-steps > li + li::before { content: "→"; margin: 0 10px; color: var(--s-faint); }
body[data-screen="settings"] #view-settings .p3s-ai-flow-steps > li > span { display: none; }
/* Role list */
body[data-screen="settings"] #view-settings .p3s-role-grid { display: flex !important; flex-direction: column; gap: 0; margin: 0; border-top: 1px solid var(--wl-line-soft); }
body[data-screen="settings"] #view-settings .p3s-role-grid > .p3s-role-card {
  display: grid !important; grid-template-columns: 36px minmax(0, 1fr) minmax(260px, 380px); grid-template-areas: "icon name edit" "icon route edit";
  align-items: center; gap: 2px 14px; min-height: 0; padding: 14px 4px !important; border: 0 !important; border-bottom: 1px solid var(--wl-line-soft) !important;
  border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
body[data-screen="settings"] #view-settings .p3s-role-card > .p3s-role-card__head,
body[data-screen="settings"] #view-settings .p3s-role-card > .p3s-task-assignment { display: contents !important; }
body[data-screen="settings"] #view-settings .p3s-role-card__icon { grid-area: icon; align-self: center; width: 36px; height: 36px; border-radius: 12px; background: #EEF3FF !important; color: var(--wl-link); display: grid; place-items: center; }
body[data-screen="settings"] #view-settings .p3s-role-card__icon svg { width: 18px; height: 18px; }
body[data-screen="settings"] #view-settings .p3s-role-card__name { grid-area: name; align-self: end; margin: 0; font-size: 14.5px !important; font-weight: 700; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-role-card__edit { grid-area: edit; display: flex; align-items: center; gap: 8px; min-width: 0; }
body[data-screen="settings"] #view-settings .p3s-role-card__edit > .mselect { flex: 1; min-width: 0; }
body[data-screen="settings"] #view-settings .p3s-task-route { grid-area: route; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-route-state { padding: 2px 9px; border-radius: 999px; background: #EEF0F6; color: #3C4460; font-size: 11.5px; font-weight: 600; }
body[data-screen="settings"] #view-settings .p3s-route-state.is-custom { background: #E6EDFF; color: #2448D8; }
body[data-screen="settings"] #view-settings .p3s-task-route .p3s-role-card__model { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-screen="settings"] #view-settings .p3s-task-route > span:not(.p3s-route-state):not(.p3s-route-provider) { flex-basis: 100%; }
body[data-screen="settings"] #view-settings .p3s-inline-status { grid-column: 2 / -1; font-size: 12px; color: #7A4A00; }
/* Reset: a neutral round icon button */
body[data-screen="settings"] #view-settings .p3s-role-clear {
  flex: none; width: 38px; height: 38px; min-height: 38px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--s-line) !important; border-radius: 50% !important; background: #fff !important; color: var(--s-muted) !important; box-shadow: none !important;
}
body[data-screen="settings"] #view-settings .p3s-role-clear:hover { color: #9A1C1C !important; border-color: #FFD2D2 !important; }
body[data-screen="settings"] #view-settings .p3s-role-clear .material-symbols-outlined { font-size: 18px; }
/* Related links: one quiet line */
body[data-screen="settings"] #view-settings .p3s-ai-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 !important; background: none !important; }
body[data-screen="settings"] #view-settings .p3s-ai-related > h3 { font-size: 13px !important; font-weight: 600 !important; color: var(--s-muted) !important; }
body[data-screen="settings"] #view-settings .p3s-ai-related-links .p3r-btn { height: 32px; min-height: 32px; padding: 0 12px; font-size: 12.5px; }
@media (max-width: 899px) {
  body[data-screen="settings"] #view-settings .p3s-role-grid > .p3s-role-card { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "icon name" "icon route" "edit edit"; row-gap: 8px; }
  body[data-screen="settings"] #view-settings .p3s-ai-overview > .p3s-ai-jev { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "hint" "select"; }
  body[data-screen="settings"] #view-settings .p3s-ai-provider__meta { grid-template-columns: minmax(0, 1fr); }
}
body[data-screen="settings"] #view-settings #p3s-ai-config-real.p3s-section-body { padding: 24px 26px !important; }
body[data-screen="settings"] #view-settings .p3s-role-grid > .p3s-role-card { width: 100%; height: auto !important; grid-template-rows: auto auto !important; align-content: center; }
body[data-screen="settings"] #view-settings .p3s-role-grid { align-items: stretch; }
@media (max-width: 899px) { body[data-screen="settings"] #view-settings .p3s-role-grid > .p3s-role-card { grid-template-rows: auto auto auto !important; } }
body[data-screen="settings"] #view-settings .p3s-role-card__edit:not(:has(.p3s-role-clear)) { padding-right: 46px; }
body[data-screen="settings"] #view-settings #p3s-ai-config-real .p3s-ai-related > h3 { font-size: 13px !important; font-weight: 600 !important; color: var(--s-muted) !important; }

/* Recheck 2026-10-07 */
/* Tìm kiếm: usage bars sit above their labels */
body[data-screen="settings"] #view-settings .p3s-prov-history__bars { display: flex !important; align-items: stretch; gap: 10px; height: 132px; padding: 0; }
body[data-screen="settings"] #view-settings .p3s-prov-history__bars--mini { gap: 3px; height: 96px; }
body[data-screen="settings"] #view-settings .p3s-prov-history__col { flex: 1 1 0; min-width: 0; height: 100% !important; display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 4px; }
body[data-screen="settings"] #view-settings .p3s-prov-history__val { flex: none; height: 14px; line-height: 14px; text-align: center; }
body[data-screen="settings"] #view-settings .p3s-prov-history__bar { position: relative; flex: 1 1 auto; min-height: 0; height: auto !important; display: flex; align-items: flex-end; overflow: hidden; }
body[data-screen="settings"] #view-settings .p3s-prov-history__bar > i { display: block; position: static !important; width: 100%; max-height: 100%; }
body[data-screen="settings"] #view-settings .p3s-prov-history__lbl { flex: none; height: 14px; line-height: 14px; margin: 0 !important; position: static !important; text-align: center; white-space: nowrap; overflow: hidden; text-decoration: none; }
/* Đa tác nhân: routes as collapsible rows (name, model, status), details on demand */
body[data-screen="settings"] #view-settings .p3s-routes-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; }
body[data-screen="settings"] #view-settings .p3s-routes-head h4 { margin: 0; }
body[data-screen="settings"] #view-settings .p3s-routes-head span { font-size: 12.5px; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-routes-list { display: flex; flex-direction: column; gap: 6px; }
body[data-screen="settings"] #view-settings .p3s-route { border-radius: 18px; background: var(--s-tile); }
body[data-screen="settings"] #view-settings .p3s-route > summary {
  list-style: none; display: grid; grid-template-columns: minmax(160px, 1.1fr) minmax(0, 1.6fr) auto 18px; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; cursor: pointer;
}
body[data-screen="settings"] #view-settings .p3s-route > summary::-webkit-details-marker { display: none; }
body[data-screen="settings"] #view-settings .p3s-route > summary::after { content: "›"; justify-self: end; font-size: 18px; color: var(--s-faint); transition: transform 160ms; }
body[data-screen="settings"] #view-settings .p3s-route[open] > summary::after { transform: rotate(90deg); color: var(--wl-link); }
body[data-screen="settings"] #view-settings .p3s-route__name { font-size: 13.5px; font-weight: 600; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-route__model { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-screen="settings"] #view-settings .p3s-route__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 4px 16px 16px; }
body[data-screen="settings"] #view-settings .p3s-route__body > div { min-width: 0; }
body[data-screen="settings"] #view-settings .p3s-route__wide { grid-column: 1 / -1; }
body[data-screen="settings"] #view-settings .p3s-route__body dt { margin: 0 0 3px; font-size: 11.5px; font-weight: 600; color: var(--s-faint); }
body[data-screen="settings"] #view-settings .p3s-route__body dd { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--s-ink2); overflow-wrap: anywhere; }
body[data-screen="settings"] #view-settings .p3s-route__body code { white-space: normal; font-size: 12px; }
@media (max-width: 899px) {
  body[data-screen="settings"] #view-settings .p3s-route > summary { grid-template-columns: minmax(0, 1fr) auto 18px; }
  body[data-screen="settings"] #view-settings .p3s-route__model { grid-column: 1 / -1; grid-row: 2; padding-bottom: 10px; }
  body[data-screen="settings"] #view-settings .p3s-route__body { grid-template-columns: minmax(0, 1fr); }
}
/* Tạo ảnh: same head as the other sections, direct 9Router flow */
body[data-screen="settings"] #view-settings #p3s-sec-image-studio > .p3s-section-head { display: grid !important; }
body[data-screen="settings"] #view-settings .p3s-img-flow { margin: 2px 0 16px; }
body[data-screen="settings"] #view-settings .p3s-img-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--s-muted); }
body[data-screen="settings"] #view-settings .p3s-img-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--s-ink); }
body[data-screen="settings"] #view-settings .p3s-img-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--s-ink2); }
body[data-screen="settings"] #view-settings .p3s-img-bento-card .p3s-img-model-toggle { align-self: flex-start; }
/* Mô hình AI · Đối chiếu gần nghĩa: switch beside the title, three fields in one row */
body[data-screen="settings"] #view-settings .p3s-embed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-screen="settings"] #view-settings .p3s-embed-head .p3s-section-title { margin: 0; }
body[data-screen="settings"] #view-settings .p3s-embed-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--s-ink2); }
body[data-screen="settings"] #view-settings .p3s-embed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 899px) { body[data-screen="settings"] #view-settings .p3s-embed-grid { grid-template-columns: minmax(0, 1fr); } }