:root {
  --sa-red: #e30613;
  --sa-red-dark: #b8000a;
  --sa-text: #182230;
  --sa-muted: #667085;
  --sa-border: #d8dee8;
  --sa-bg: #f6f8fb;
  --sa-white: #fff;
  --sa-success: #08783e;
  --sa-danger: #a4000b;
}

.sa-shell { color: var(--sa-text); font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 8px 2px 24px; }
.sa-head, .sa-card-title, .sa-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.sa-head h3, .sa-card h4, .sa-modal h3 { margin: 0; color: var(--sa-text); }
.sa-head h3 { font-size: 24px; letter-spacing: -.02em; }
.sa-head p, .sa-card-title p, .sa-section-heading p, .sa-modal-head p { margin: 4px 0 0; color: var(--sa-muted); }
.sa-alert { min-height: 38px; min-width: 260px; border-radius: 10px; padding: 9px 12px; opacity: 0; transition: opacity .16s ease; }
.sa-alert.ok, .sa-alert.err { opacity: 1; }
.sa-alert.ok { color: var(--sa-success); background: #e9f8ef; border: 1px solid #b7e7c9; }
.sa-alert.err { color: var(--sa-danger); background: #fff1f2; border: 1px solid #fecdd3; }

.sa-nav { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--sa-border); margin: 18px 0 14px; }
.sa-nav button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #344054; padding: 11px 13px 10px; font-weight: 700; cursor: pointer; }
.sa-nav button:hover { color: var(--sa-red); background: #fff5f5; }
.sa-nav button.active { color: var(--sa-red); border-bottom-color: var(--sa-red); }

.sa-card { background: var(--sa-white); border: 1px solid var(--sa-border); border-radius: 14px; padding: 18px; margin: 14px 0; box-shadow: 0 2px 8px rgba(16, 24, 40, .04); }
.sa-card h4 { font-size: 16px; }
.sa-create-card { background: linear-gradient(180deg, #fff 0%, #fcfcfd 100%); }
.sa-create-grid { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(220px, 1fr) minmax(240px, 1fr); gap: 15px; align-items: end; margin-top: 16px; }
.sa-create-grid-compact { grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.3fr) auto; }
.sa-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sa-field > span, .sa-group-selector legend { color: #344054; font-weight: 700; }
.sa-field small, .sa-check-card small, .sa-toggle-row small { display: block; color: var(--sa-muted); font-weight: 400; margin-top: 2px; }
.sa-field input, .sa-field select, .sa-create-grid input, .sa-create-grid select { width: 100%; min-height: 42px; border: 1px solid #cbd3df; border-radius: 9px; background: #fff; color: var(--sa-text); padding: 9px 11px; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.sa-field input:focus, .sa-field select:focus, .sa-create-grid input:focus, .sa-create-grid select:focus { border-color: var(--sa-red); box-shadow: 0 0 0 3px rgba(227, 6, 19, .11); }
.sa-field input:disabled { background: #f4f6f8; color: #667085; }
.sa-group-selector { grid-column: 1 / -2; min-width: 0; border: 1px solid var(--sa-border); border-radius: 11px; padding: 11px 12px 12px; background: #fff; }
.sa-group-selector legend { padding: 0 6px; }
.sa-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-check-card { position: relative; display: inline-flex; align-items: center; gap: 9px; min-width: 150px; border: 1px solid #d7dde7; border-radius: 9px; padding: 9px 11px; background: #fff; cursor: pointer; user-select: none; }
.sa-check-card:hover { border-color: #efa1a7; background: #fffafa; }
.sa-check-card input { position: absolute; opacity: 0; pointer-events: none; }
.sa-check-box { width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid #aab4c3; border-radius: 5px; background: #fff; }
.sa-check-card input:checked + .sa-check-box { border-color: var(--sa-red); background: var(--sa-red); box-shadow: inset 0 0 0 4px #fff; }
.sa-create-action { display: flex; justify-content: flex-end; align-items: end; }

.sa-primary, .sa-secondary, .sa-card button, .sa-actions button, .sa-group-layout aside button { min-height: 38px; border-radius: 8px; border: 1px solid #cbd3df; background: #fff; color: #253044; padding: 8px 12px; font-weight: 650; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.sa-card button:hover, .sa-actions button:hover, .sa-secondary:hover, .sa-group-layout aside button:hover { border-color: #98a2b3; background: #f8fafc; }
.sa-primary { border-color: var(--sa-red) !important; background: var(--sa-red) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(227, 6, 19, .18); }
.sa-primary:hover { background: var(--sa-red-dark) !important; border-color: var(--sa-red-dark) !important; }
.sa-primary:active, .sa-card button:active { transform: translateY(1px); }
.sa-primary:disabled, .sa-card button:disabled { opacity: .58; cursor: wait; transform: none; }
.sa-secondary { background: #fff; }
.danger { color: var(--sa-danger) !important; border-color: #f2b8bd !important; background: #fff8f8 !important; }

.sa-table { overflow: auto; max-height: 540px; margin-top: 12px; border: 1px solid #e5e9f0; border-radius: 10px; }
.sa-table table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; }
.sa-table th { position: sticky; top: 0; z-index: 1; background: #f7f8fa; color: #344054; font-size: 12px; text-transform: uppercase; letter-spacing: .035em; }
.sa-table th, .sa-table td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #eaedf2; }
.sa-table tbody tr:hover { background: #fcfcfd; }
.sa-table tbody tr:last-child td { border-bottom: 0; }
.sa-table td small { display: block; color: var(--sa-muted); margin-top: 2px; }
.sa-empty { padding: 28px !important; text-align: center !important; color: var(--sa-muted); }
.sa-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 330px; }
.sa-actions button { min-height: 32px; padding: 6px 9px; font-size: 12px; }
.sa-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-weight: 700; }
.sa-badge.on { background: #e7f8ef; color: #08783e; }
.sa-badge.off { background: #eef1f5; color: #596273; }
.sa-muted { color: var(--sa-muted); }

.sa-group-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.sa-group-layout aside { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow: auto; padding-right: 3px; }
.sa-group-layout aside button { text-align: left; }
.sa-group-layout aside small { display: block; color: var(--sa-muted); margin-top: 3px; }
.sa-oidc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid #e5e9f0; }
.sa-oidc-row label { display: flex; align-items: center; gap: 10px; }
.sa-oidc-row small { display: block; color: var(--sa-muted); }

.sa-modal-backdrop { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .58); backdrop-filter: blur(2px); }
.sa-modal { width: min(780px, 100%); max-height: 92vh; overflow: auto; background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; box-shadow: 0 28px 80px rgba(15, 23, 42, .33); }
.sa-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid #e7ebf1; }
.sa-modal-head h3 { font-size: 22px; letter-spacing: -.02em; }
.sa-kicker { display: inline-block; margin-bottom: 4px; color: var(--sa-red); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.sa-icon-button { width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 9px; background: #f2f4f7; color: #344054; font-size: 25px; line-height: 1; cursor: pointer; }
.sa-icon-button:hover { background: #e7ebf1; }
.sa-modal form { padding: 22px 24px 24px; }
.sa-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sa-field-wide { grid-column: 1 / 2; }
.sa-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; border: 1px solid var(--sa-border); border-radius: 11px; padding: 12px 14px; background: #fafbfc; cursor: pointer; }
.sa-toggle-row > input { position: absolute; opacity: 0; pointer-events: none; }
.sa-toggle { position: relative; width: 46px; height: 26px; flex: 0 0 46px; border-radius: 999px; background: #cbd2dc; transition: background .15s ease; }
.sa-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(16,24,40,.2); transition: transform .15s ease; }
.sa-toggle-row input:checked + .sa-toggle { background: var(--sa-red); }
.sa-toggle-row input:checked + .sa-toggle::after { transform: translateX(20px); }
.sa-modal-groups { margin: 18px 0 0; border: 1px solid var(--sa-border); border-radius: 12px; padding: 13px 14px 15px; }
.sa-modal-groups legend { padding: 0 7px; font-weight: 800; color: #344054; }
.sa-modal-groups > p { margin: 0 0 10px; color: var(--sa-muted); }
.sa-password-field { margin-top: 17px; }
.sa-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e7ebf1; }
.sa-modal-message { display: none; margin: 0 0 16px; border-radius: 9px; padding: 10px 12px; }
.sa-modal-message.ok, .sa-modal-message.err { display: block; }
.sa-modal-message.ok { color: var(--sa-success); background: #e9f8ef; border: 1px solid #b7e7c9; }
.sa-modal-message.err { color: var(--sa-danger); background: #fff1f2; border: 1px solid #fecdd3; }

.sa-qr-login-trigger { margin-bottom: 12px; border: 1px solid var(--sa-red) !important; background: #fff !important; color: var(--sa-red) !important; }
.sa-qr-login-trigger:hover { background: #fff3f4 !important; }
.sa-qr-panel { display: none; margin: 0 0 14px; padding: 14px; border: 1px solid #f0a8ae; border-radius: 12px; background: #fff8f8; }
.sa-qr-panel.open { display: block; }
.sa-qr-panel h2 { margin: 0 0 5px; color: var(--sa-red-dark); font-size: 16px; }
.sa-qr-panel p { margin: 0 0 11px; color: #596273; }
.sa-qr-video { display: none; width: 100%; max-height: 280px; border-radius: 10px; background: #111; object-fit: cover; }
.sa-qr-video.active { display: block; }
.sa-qr-controls, .sa-qr-manual { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sa-qr-manual input { min-width: 220px; flex: 1; }
.sa-qr-status { min-height: 22px; margin-top: 10px; font-weight: 700; }
.sa-qr-status.ok { color: var(--sa-success); }
.sa-qr-status.err { color: var(--sa-danger); }

@media (max-width: 900px) {
  .sa-create-grid, .sa-create-grid-compact, .sa-group-layout { grid-template-columns: 1fr; }
  .sa-group-selector { grid-column: auto; }
  .sa-create-action { justify-content: stretch; }
  .sa-create-action .sa-primary { width: 100%; }
}
@media (max-width: 680px) {
  .sa-head, .sa-card-title, .sa-section-heading { display: block; }
  .sa-alert { min-width: 0; margin-top: 10px; }
  .sa-modal-backdrop { padding: 8px; }
  .sa-modal { border-radius: 13px; }
  .sa-modal-head, .sa-modal form { padding-left: 16px; padding-right: 16px; }
  .sa-modal-grid { grid-template-columns: 1fr; }
  .sa-field-wide { grid-column: auto; }
  .sa-modal-actions { flex-direction: column-reverse; }
  .sa-modal-actions button { width: 100%; }
}

.sa-credential-card { border-color: #b7e7c9; background: linear-gradient(180deg, #fbfffc 0%, #f4fbf6 100%); }
.sa-credential-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid #d8eee0; }
.sa-credential-head > div { display: flex; align-items: flex-start; gap: 12px; }
.sa-credential-head h4 { margin: 0; color: #08783e; font-size: 17px; }
.sa-credential-head p { margin: 4px 0 0; color: #52635a; }
.sa-success-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #dff5e8; color: #08783e; font-size: 20px; font-weight: 900; }
.sa-credential-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; padding-top: 18px; }
.sa-credential-values { display: grid; gap: 10px; }
.sa-credential-values label { display: block; padding: 11px 13px; border-left: 4px solid var(--sa-red); border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.sa-credential-values span { display: block; margin-bottom: 4px; color: #667085; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sa-credential-values code { display: block; color: #182230; font-size: 18px; font-weight: 750; word-break: break-all; }
.sa-credential-values .sa-small-code { font-size: 12px; line-height: 1.45; }
.sa-credential-values small { display: block; margin-top: 6px; color: #667085; font-size: 12px; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.sa-credential-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; padding: 12px; border: 1px solid #d8e0e8; border-radius: 12px; background: #fff; text-align: center; }
.sa-credential-qr svg { width: 220px; max-width: 100%; height: auto; }
.sa-credential-qr small { color: var(--sa-muted); line-height: 1.35; }
.sa-credential-qr-fallback { color: #7a2e00; background: #fff8ed; border-color: #f6d7ad; }
.sa-credential-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #d8eee0; }

@media (max-width: 760px) {
  .sa-credential-grid { grid-template-columns: 1fr; }
  .sa-credential-qr { min-height: 0; }
}

/* SYSTEMACCOUNT_CAMERA_QR_RECOGNITION_FIX_20260724 */
.sa-qr-status.info { color: #175cd3; }
.sa-qr-video.active { min-height: 220px; }
@media (max-width: 680px) {
  .sa-qr-video.active { min-height: 260px; max-height: 360px; }
}