/* Composants de la direction A, "Console". Couleurs via srcg_tokens.css uniquement. */

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--srcg-bg);
  color: var(--srcg-text);
  font-family: var(--srcg-font-text);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4, .srcg-title { font-family: var(--srcg-font-title); font-weight: 600; letter-spacing: 0; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
.srcg-mono, code { font-family: var(--srcg-font-mono); }
a { color: var(--srcg-accent-title); }
:focus-visible { outline: 2px solid var(--srcg-focus); outline-offset: 2px; }

/* Structure console */
.srcg-shell { display: grid; grid-template-columns: 208px 1fr; min-height: 100vh; }
.srcg-side {
  background: var(--srcg-side-bg);
  color: var(--srcg-side-text);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srcg-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 16px; }
.srcg-brand img { height: 32px; width: auto; }
.srcg-brand-mark {
  width: 32px; height: 32px;
  background: var(--srcg-accent);
  color: var(--srcg-on-accent);
  border-radius: var(--srcg-radius-field);
  font-family: var(--srcg-font-title);
  font-weight: 600;
  display: grid; place-items: center;
}
.srcg-brand-name { font-family: var(--srcg-font-title); font-weight: 600; font-size: 15px; line-height: 1.2; }
.srcg-nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  color: var(--srcg-side-muted);
  text-decoration: none;
  border-radius: var(--srcg-radius-field);
}
.srcg-nav a:hover, .srcg-nav a.is-active { background: var(--srcg-side-active); color: var(--srcg-side-text); }
.srcg-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.srcg-main { padding: 24px; min-width: 0; }

/* Panneaux et tableaux */
.srcg-panel {
  background: var(--srcg-surface);
  border: 1px solid var(--srcg-border);
  border-radius: var(--srcg-radius-panel);
  padding: 16px;
}
.srcg-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.srcg-table th {
  text-align: left; font-weight: 500; font-size: 12px;
  color: var(--srcg-text-muted);
  border-bottom: 1px solid var(--srcg-border);
  padding: 8px;
}
.srcg-table td { padding: 8px; border-bottom: 1px solid var(--srcg-border); }
.srcg-table tr:hover td { background: var(--srcg-surface-2); }
.srcg-table .num { text-align: right; font-family: var(--srcg-font-mono); }

/* Boutons et champs */
.btn, .form-control, .form-select { border-radius: var(--srcg-radius-field); }
.btn-srcg {
  background: var(--srcg-accent);
  border: 1px solid var(--srcg-accent);
  color: var(--srcg-on-accent);
  font-weight: 500;
}
.btn-srcg:hover, .btn-srcg:focus { background: var(--srcg-orange-2); border-color: var(--srcg-orange-2); color: var(--srcg-on-accent); }
.form-control, .form-select {
  background-color: var(--srcg-surface);
  color: var(--srcg-text);
  border-color: var(--srcg-border);
}
.form-label { font-size: 12px; font-weight: 500; color: var(--srcg-text-muted); margin-bottom: 4px; }

/* Priorités et statuts */
.srcg-prio {
  display: inline-block; min-width: 24px; text-align: center;
  font-family: var(--srcg-font-mono); font-weight: 600;
  border-radius: var(--srcg-radius-field);
  padding: 0 8px; color: var(--srcg-encre);
}
.srcg-prio-a { background: var(--srcg-prio-a); }
.srcg-prio-b { background: var(--srcg-prio-b); }
.srcg-prio-c { background: var(--srcg-prio-c); }
.srcg-status { display: inline-block; padding: 0 8px; border-radius: var(--srcg-radius-field); font-size: 12px; font-weight: 500; }
.srcg-status-ok { background: var(--srcg-st-ok-bg); color: var(--srcg-st-ok-fg); }
.srcg-status-wait { background: var(--srcg-st-wait-bg); color: var(--srcg-st-wait-fg); }
.srcg-status-todo { background: var(--srcg-st-todo-bg); color: var(--srcg-st-todo-fg); }
.srcg-status-ko { background: var(--srcg-st-ko-bg); color: var(--srcg-st-ko-fg); }

/* Messages */
.srcg-alert { border-radius: var(--srcg-radius-field); padding: 8px 16px; border: 1px solid var(--srcg-border); background: var(--srcg-surface-2); }
.srcg-alert-info { background: var(--srcg-st-wait-bg); border-color: var(--srcg-st-wait-fg); color: var(--srcg-text); }
.srcg-alert-error { background: var(--srcg-danger-bg); border-color: var(--srcg-danger); color: var(--srcg-text); }
.srcg-empty { padding: 32px 16px; text-align: center; color: var(--srcg-text-muted); border: 1px dashed var(--srcg-border); border-radius: var(--srcg-radius-panel); }

/* Page de connexion */
.srcg-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.srcg-login-card { width: 100%; max-width: 380px; }
.srcg-login-card h1 { font-size: 20px; margin-bottom: 16px; text-align: center; }
.srcg-login-card > p, .srcg-login-card p.text-body-secondary { text-align: center; }
.srcg-link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--srcg-text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--srcg-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.srcg-link-button:hover { color: var(--srcg-accent-title); }
.srcg-link-button:focus-visible { outline: 2px solid var(--srcg-focus); outline-offset: 3px; border-radius: var(--srcg-radius-field); }

/* Téléphone, 400 px sans défilement horizontal */
@media (max-width: 768px) {
  .srcg-shell { grid-template-columns: 1fr; }
  .srcg-side { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 8px; }
  .srcg-brand { padding: 0 8px; }
  .srcg-nav { display: flex; flex-wrap: wrap; gap: 0; }
  .srcg-main { padding: 16px; }
  .srcg-table-wrap { overflow-x: auto; }
}

/* Logo sur plaque claire : le texte du logo est en encre, illisible sur la barre sombre */
.srcg-logo-plate { display: block; background: var(--srcg-logo-plate); border-radius: var(--srcg-radius-field); padding: 6px; width: 132px; }
.srcg-logo-plate img { display: block; width: 100%; height: auto; }
.srcg-login-logo { margin-bottom: 24px; }
.srcg-login-logo img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.srcg-side-foot { margin-top: auto; padding: 8px; border-top: 1px solid var(--srcg-side-active); }
.srcg-side-user { color: var(--srcg-side-text); margin-bottom: 8px; word-break: break-word; }
.srcg-btn-side { background: transparent; color: var(--srcg-side-text); border: 1px solid var(--srcg-side-muted); }
.srcg-btn-side:hover { background: var(--srcg-side-active); color: var(--srcg-side-text); }
.srcg-dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin: 0; }
.srcg-dl dt { color: var(--srcg-text-muted); font-weight: 500; }
.srcg-dl dd { margin: 0; }
.srcg-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.srcg-codes li { background: var(--srcg-surface-2); border: 1px solid var(--srcg-border); border-radius: var(--srcg-radius-field); padding: 8px; text-align: center; }
.srcg-qr-box { display: grid; place-items: center; background: var(--srcg-logo-plate); border: 1px solid var(--srcg-border); border-radius: var(--srcg-radius-field); padding: 8px; }
.srcg-secret { display: block; word-break: break-all; padding: 8px; background: var(--srcg-surface-2); border-radius: var(--srcg-radius-field); color: var(--srcg-text); }
.srcg-cell-long { max-width: 280px; word-break: break-word; font-family: var(--srcg-font-mono); font-size: 12px; }
.srcg-brand { display: block; padding: 0 0 8px; }
.srcg-brand-name { color: var(--srcg-side-text); }

/* Console : indicateurs, onglets, fiche */
.srcg-kpi-label { color: var(--srcg-text-muted); font-size: 12px; font-weight: 500; }
.srcg-kpi-value { font-family: var(--srcg-font-mono); font-size: 28px; font-weight: 600; line-height: 1.2; }
.srcg-late { color: var(--srcg-danger); font-weight: 600; }
.srcg-back { color: var(--srcg-text-muted); text-decoration: none; font-size: 12px; }
.srcg-tabs .nav-link { color: var(--srcg-text-muted); border-radius: var(--srcg-radius-field) var(--srcg-radius-field) 0 0; }
.srcg-tabs .nav-link.active { color: var(--srcg-text); background: var(--srcg-surface); border-color: var(--srcg-border) var(--srcg-border) var(--srcg-surface); font-weight: 500; }
.srcg-tabs { border-bottom-color: var(--srcg-border); flex-wrap: wrap; }
.srcg-check { display: inline-block; margin-right: 8px; white-space: nowrap; font-size: 12px; }
.srcg-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.srcg-roles-form { min-width: 240px; }
.form-control:disabled, .form-select:disabled { background-color: var(--srcg-surface-2); color: var(--srcg-text); opacity: 1; }

/* Champ de mot de passe avec bouton oeil */
.srcg-pw { position: relative; }
.srcg-pw .form-control { padding-right: 40px; }
.srcg-pw-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
  display: grid; place-items: center;
  background: transparent; border: 0; color: var(--srcg-text-muted);
  border-radius: 0 var(--srcg-radius-field) var(--srcg-radius-field) 0;
}
.srcg-pw-toggle:hover { color: var(--srcg-text); }
.srcg-pw-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Liens discrets dans les tableaux : texte courant, soulignement au survol */
.srcg-table a { color: var(--srcg-text); text-decoration: none; font-weight: 500; }
.srcg-table a:hover, .srcg-table a:focus-visible { color: var(--srcg-accent-title); text-decoration: underline; text-underline-offset: 3px; }

/* Exploitation */
.srcg-path { word-break: break-all; font-size: 12px; }
.srcg-logtail li { padding: 4px 0; border-bottom: 1px solid var(--srcg-border); font-size: 12px; word-break: break-word; }
.srcg-logtail li:last-child { border-bottom: 0; }

/* Fiche fournisseur en blocs */
.srcg-block { padding: 16px 0; border-top: 1px solid var(--srcg-border); }
.srcg-block:first-of-type { border-top: 0; padding-top: 0; }
.srcg-block h2 { font-size: 15px; margin-bottom: 16px; }
.srcg-readonly { min-height: 38px; padding: 8px 0; }
.srcg-sub { color: var(--srcg-text-muted); font-size: 12px; }
.srcg-subtitle { font-size: 14px; margin: 8px 0 0; }
.srcg-cell-msg { font-size: 12px; min-width: 260px; }
.srcg-modal .modal-content { background: var(--srcg-surface); color: var(--srcg-text); border: 1px solid var(--srcg-border); border-radius: var(--srcg-radius-panel); }
.srcg-modal .modal-header, .srcg-modal .modal-footer { border-color: var(--srcg-border); }
.srcg-modal .modal-title { font-size: 18px; }
.srcg-modal .btn-close { filter: none; }

/* Lot B : tableau de bord, paramètres, filtres */
.srcg-kpi-link { display: block; text-decoration: none; color: inherit; }
.srcg-kpi-link:hover .srcg-panel { border-color: var(--srcg-text-muted); }
.srcg-kpi-link:focus-visible .srcg-panel { outline: 2px solid var(--srcg-focus); outline-offset: 2px; }
.srcg-list-nav a { display: block; padding: 8px; color: var(--srcg-text); text-decoration: none; border-radius: var(--srcg-radius-field); }
.srcg-list-nav a:hover, .srcg-list-nav a.is-active { background: var(--srcg-surface-2); font-weight: 500; }
.srcg-summary { cursor: pointer; color: var(--srcg-text-muted); font-weight: 500; }
.srcg-input-sm { max-width: 120px; margin-left: auto; text-align: right; }
.srcg-table tfoot th { border-top: 1px solid var(--srcg-border); padding: 8px; }

/* Références et dates sur une seule ligne dans les tableaux */
.srcg-table td.srcg-mono, .srcg-table th.num { white-space: nowrap; }
.srcg-table td.srcg-cell-long { white-space: normal; }

/* Notifications brèves : réussite, erreur, information. Aplats et bordures, sans ombre marquée. */
.srcg-toasts { position: fixed; top: 16px; right: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.srcg-toast {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 8px 16px;
  background: var(--srcg-surface); color: var(--srcg-text);
  border: 1px solid var(--srcg-border); border-radius: var(--srcg-radius-panel); box-shadow: none;
}
.srcg-toast-body { display: flex; align-items: flex-start; gap: 8px; flex: 1; padding: 8px 0; font-size: 14px; }
.srcg-toast-icon { flex: none; width: 20px; height: 20px; border-radius: var(--srcg-radius-field); display: grid; place-items: center; }
.srcg-toast-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.srcg-toast-success { border-color: var(--srcg-st-ok-fg); }
.srcg-toast-success .srcg-toast-icon { background: var(--srcg-st-ok-bg); color: var(--srcg-st-ok-fg); }
.srcg-toast-error { border-color: var(--srcg-danger); }
.srcg-toast-error .srcg-toast-icon { background: var(--srcg-danger-bg); color: var(--srcg-danger); }
.srcg-toast-info .srcg-toast-icon { background: var(--srcg-st-wait-bg); color: var(--srcg-st-wait-fg); }
.srcg-toast-close { margin: 8px 8px 0 0; }
:root[data-bs-theme="dark"] .srcg-toast-close { filter: invert(1); }
.srcg-confirm-text { white-space: pre-line; }

/* Barre latérale fixe sur grand écran : le nom de l'utilisateur et la déconnexion restent visibles */
@media (min-width: 769px) {
  .srcg-side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
}

/* Page de connexion : logo à gauche, nom de l'application sur deux lignes */
.srcg-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.srcg-lockup-logo { height: 56px; width: auto; flex: none; box-sizing: border-box; padding: 6px; background: var(--srcg-logo-plate); border-radius: var(--srcg-radius-field); }
.srcg-lockup-text { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 1px solid var(--srcg-border); min-width: 0; }
.srcg-lockup-main { font-family: var(--srcg-font-title); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: 0.01em; color: var(--srcg-text); }
.srcg-lockup-sub { font-family: var(--srcg-font-title); font-weight: 400; font-size: 18px; line-height: 1.1; color: var(--srcg-text); }

/* Barre latérale : même nom sur deux lignes, en clair sur fond sombre */
.srcg-lockup-side { border-left: 0; padding: 0 8px 8px; }
.srcg-lockup-side .srcg-lockup-main { font-size: 22px; color: var(--srcg-side-text); }
.srcg-lockup-side .srcg-lockup-sub { font-size: 14px; color: var(--srcg-side-muted); }

/* Version de l'application, en bas de la page de connexion */
.srcg-login-shell { display: flex; flex-direction: column; min-height: 100vh; }
.srcg-login-shell .srcg-login { flex: 1; min-height: 0; }
.srcg-login-footer { text-align: center; padding: 16px; font-family: var(--srcg-font-mono); font-size: 12px; color: var(--srcg-text-muted); }

/* Fil conducteur au défilement : en-têtes de tableaux, indicateurs et en-tête de fiche restent visibles */
.srcg-table thead th { position: sticky; top: var(--srcg-sticky-offset, 0px); z-index: 5; background: var(--srcg-surface); }
.srcg-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.srcg-kpi-grid .srcg-kpi { padding: 8px 12px; height: 100%; }
.srcg-kpi-grid .srcg-kpi-label { font-size: 12px; line-height: 1.25; min-height: 30px; }
.srcg-kpi-grid .srcg-kpi-value { font-size: 20px; line-height: 1.2; }
.srcg-kpi-sticky h1, .srcg-sticky-head h1 { margin-bottom: 8px; }
.srcg-kpi-sticky, .srcg-sticky-head { background: var(--srcg-bg); padding: 8px 0; margin-bottom: 8px; }
.srcg-sticky-head .srcg-tabs { margin-bottom: 0; }
@media (min-width: 769px) {
  .srcg-kpi-sticky, .srcg-sticky-head { position: sticky; top: 0; z-index: 20; }
}

/* Pages de liste : titre, recherche et filtres restent en haut, avec défilement interne si les filtres avancés sont ouverts */
.srcg-sticky-filters { max-height: 60vh; overflow-y: auto; }
.srcg-sticky-filters > form { margin-bottom: 0 !important; }
@media (max-width: 768px) {
  .srcg-sticky-filters { max-height: none; overflow: visible; }
}

/* Tableau dense : tient dans la largeur de la page sans défilement horizontal */
.srcg-table-dense { font-size: 13px; table-layout: auto; }
.srcg-table-dense th, .srcg-table-dense td { padding: 6px 8px; vertical-align: top; }
.srcg-table-dense td:first-child { min-width: 220px; word-break: break-word; }
.srcg-table-dense .num { white-space: nowrap; }
@media (min-width: 769px) { .srcg-table-wrap { overflow-x: visible; } }

/* Fenêtre de détail : liste de libellés et de valeurs */
.srcg-dl-wide { grid-template-columns: 220px 1fr; }
.srcg-detail-row { display: contents; }
.srcg-detail-row.d-none { display: none !important; }
.srcg-detail dd { word-break: break-word; }
@media (max-width: 576px) { .srcg-dl-wide { grid-template-columns: 1fr; } }

/* Boutons d'action à icône : carrés de 32 px, l'infobulle porte le libellé */
.srcg-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.srcg-icon-btn { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }

/* Barre latérale : rôle sous le nom, déconnexion et réduction en icônes, rail d'icônes réduit */
.srcg-side-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.srcg-side-who { min-width: 0; }
.srcg-side-user { color: var(--srcg-side-text); margin-bottom: 0; font-weight: 500; overflow-wrap: anywhere; line-height: 1.25; }
.srcg-side-role { color: var(--srcg-side-muted); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.srcg-side-tools { display: flex; gap: 4px; flex: none; justify-content: flex-start; }
.srcg-side-toggle-right, .srcg-brand-mini { display: none; }
@media (max-width: 768px) { .srcg-side-toggle { display: none; } .srcg-side-foot { width: 100%; } }
@media (min-width: 769px) {
  .srcg-shell { transition: grid-template-columns 0.15s ease; }
  .srcg-shell.is-collapsed { grid-template-columns: 60px 1fr; }
  .is-collapsed .srcg-logo-plate, .is-collapsed .srcg-lockup-side, .is-collapsed .srcg-nav-label, .is-collapsed .srcg-side-who { display: none; }
  .is-collapsed .srcg-brand { display: grid; place-items: center; padding: 0 0 8px; }
  .is-collapsed .srcg-brand-mini { display: grid; place-items: center; width: 32px; height: 32px; background: var(--srcg-accent); color: var(--srcg-on-accent); border-radius: var(--srcg-radius-field); font-family: var(--srcg-font-title); font-weight: 600; }
  .is-collapsed .srcg-nav a { justify-content: center; padding: 8px 0; }
  .is-collapsed .srcg-side-foot { align-items: center; }
  .is-collapsed .srcg-side-tools { flex-direction: column; }
  .is-collapsed .srcg-side-toggle-left { display: none; }
  .is-collapsed .srcg-side-toggle-right { display: inline-grid; }
}

/* Numéros de téléphone et territoires */
.srcg-phone-list { display: grid; gap: 8px; }
.srcg-phone-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 576px) { .srcg-phone-row { grid-template-columns: 1fr auto; } .srcg-phone-row select { grid-column: 1 / -1; } }
.srcg-territory-menu { width: min(460px, 92vw); max-height: 360px; overflow: auto; padding: 8px 12px; }
.srcg-territory-menu ul ul { margin-left: 20px; }
.srcg-territory-region { font-weight: 600; }
.srcg-territory-sub { font-weight: 500; }
.srcg-territory-menu li[hidden] { display: none; }

/* Tri par colonne et actualisation des listes */
.srcg-sortable a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.srcg-sortable a:hover { color: var(--srcg-text); }
.srcg-sort-mark { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--srcg-border); }
.srcg-sort-mark.srcg-sort-asc { border-top: 0; border-bottom: 5px solid var(--srcg-text); }
.srcg-sort-mark.srcg-sort-desc { border-top-color: var(--srcg-text); }
#srcg-results { transition: opacity 0.12s; }
#srcg-results.is-loading { opacity: 0.55; }

/* Logo et nom de l'application : retour au tableau de bord */
a.srcg-brand, a.srcg-lockup-side { text-decoration: none; color: inherit; }
a.srcg-brand:focus-visible, a.srcg-lockup-side:focus-visible { outline: 2px solid var(--srcg-focus); outline-offset: 2px; border-radius: var(--srcg-radius-field); }

/* Liens secondaires (Annuler, Réinitialiser) : encre soulignée d'orange, jamais le bleu par défaut */
.btn-link { --bs-btn-color: var(--srcg-text); --bs-btn-hover-color: var(--srcg-accent-title); --bs-btn-active-color: var(--srcg-accent-title); --bs-btn-focus-shadow-rgb: 255, 75, 0;
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--srcg-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn-link:hover { text-decoration-color: var(--srcg-accent-title); }
a:hover { color: var(--srcg-text); }

/* Documents : colonnes resserrées pour laisser la place aux icônes d'action, visionneuse de fichier */
.srcg-doc-table { table-layout: fixed; }
.srcg-doc-table .c-code { width: 56px; }
.srcg-doc-table .c-doc { width: 31%; }
.srcg-doc-table .c-status { width: 128px; }
.srcg-doc-table .c-valid { width: 92px; }
.srcg-doc-table .c-check { width: 124px; }
.srcg-doc-table .c-comment { width: 14%; }
.srcg-doc-table .c-actions { width: 236px; }
.srcg-doc-table .srcg-actions { flex-wrap: nowrap; gap: 4px; }
.srcg-doc-table .srcg-icon-btn { width: 30px; height: 30px; flex: none; }
.srcg-doc-table td { overflow-wrap: anywhere; }
.srcg-icon-btn.srcg-ok { color: var(--srcg-st-ok-fg); border-color: var(--srcg-st-ok-fg); }
.srcg-icon-btn.srcg-ko { color: var(--srcg-st-ko-fg); border-color: var(--srcg-st-ko-fg); }
.srcg-doc-frame { height: 72vh; display: grid; place-items: center; background: var(--srcg-surface-2); }
.srcg-doc-frame iframe { width: 100%; height: 100%; border: 0; background: var(--srcg-surface); }
.srcg-doc-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }