/* ---------- Fonts ----------
   Somar Sans is this org's Arabic brand font, used the same way in the
   etravel-web-core design system (font.css + vuetify.scss's
   $body-font-family/$heading-font-family) — only the weights actually
   referenced there are included here. Applied to [dir="rtl"] only, below;
   LTR keeps the existing system-font stack.
*/
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-Thin.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-ExtraLight.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-Light.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-Regular.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-Medium.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-SemiBold.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-Bold.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../fonts/somar-sans/SomarSans-Black.woff2") format("woff2"),
    url("../fonts/somar-sans/SomarSans-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------
   Brand palette: the console uses a navy/blue system with a restrained gold
   accent. The same semantic tokens drive both light and dark mode so pages,
   controls, navigation, and the landing experience stay consistent.
*/
:root {
  --bg: #f5f8fb;
  --bg-elev: #ffffff;
  --panel: #ffffff;
  --panel-2: #eaf0f5;
  --panel-3: #dfe9f0;
  --input-bg: #ffffff;
  --border: #d6e0e8;
  --border-soft: #e5edf2;
  --text: #152a3a;
  --muted: #5f7180;
  --muted-2: #8798a5;

  --primary: #002e53;
  --primary-2: #003b67;
  --primary-fill: #002e53;
  --primary-fill-hover: #003b67;
  --primary-soft: rgba(0, 46, 83, .11);
  --primary-tonal: #e5eef5;
  --on-primary: #ffffff;
  --secondary: #9f7e19;
  --template: #c96d2d;
  --template-soft: #fff0e7;
  --verification-warning: #a46800;

  --success: #1f9d63;
  --success-soft: rgba(31, 157, 99, .14);
  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, .14);
  --warning: #8a6b12;
  --warning-soft: #f8f3d6;
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, .14);

  --hover-surface: #eaf0f5;
  --topbar-bg: rgba(245, 248, 251, .85);
  --sidebar: #002e53;
  --sidebar-text: #ffffff;
  --selected-item: #e5eef5;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 20, 25, .08);
  --shadow: 0 8px 24px rgba(16, 20, 25, .10);
  --shadow-lg: 0 20px 50px rgba(16, 20, 25, .16);

  --sidebar-w: 264px;
  --topbar-h: 68px;
  color-scheme: light;
}

/* System-preference dark mode — skipped when the user has explicitly
   picked "light" via the manual toggle (data-theme="light"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071623;
    --bg-elev: #0d2233;
    --panel: #0d2233;
    --panel-2: #123047;
    --panel-3: #1a3d55;
    --input-bg: #0a1c2b;
    --border: #244157;
    --border-soft: #1b374b;
    --text: #f4f7fa;
    --muted: #a9bbc8;
    --muted-2: #8098a8;

    --primary: #4d9acb;
    --primary-2: #67afe0;
    --primary-fill: #4d9acb;
    --primary-fill-hover: #67afe0;
    --primary-soft: rgba(77, 154, 203, .18);
    --primary-tonal: #123b57;
    --on-primary: #071623;
    --template: #f2a36b;
    --template-soft: rgba(242, 139, 74, .14);
    --verification-warning: #f6c945;

    --hover-surface: #123047;
    --topbar-bg: rgba(7, 22, 35, .85);
    --sidebar: #05121d;
    --sidebar-text: #eaf2f8;
    --selected-item: #123b57;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);

    color-scheme: dark;
  }
}

/* Manual dark-mode override — wins regardless of system preference, so the
   toggle works even when the OS is set to light. */
:root[data-theme="dark"] {
  --bg: #071623;
  --bg-elev: #0d2233;
  --panel: #0d2233;
  --panel-2: #123047;
  --panel-3: #1a3d55;
  --input-bg: #0a1c2b;
  --border: #244157;
  --border-soft: #1b374b;
  --text: #f4f7fa;
  --muted: #a9bbc8;
  --muted-2: #8098a8;

  --primary: #4d9acb;
  --primary-2: #67afe0;
  --primary-fill: #4d9acb;
  --primary-fill-hover: #67afe0;
  --primary-soft: rgba(77, 154, 203, .18);
  --primary-tonal: #123b57;
  --on-primary: #071623;
  --template: #f2a36b;
  --template-soft: rgba(242, 139, 74, .14);
  --verification-warning: #f6c945;

  --hover-surface: #123047;
  --topbar-bg: rgba(7, 22, 35, .85);
  --sidebar: #05121d;
  --sidebar-text: #eaf2f8;
  --selected-item: #123b57;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

* { box-sizing: border-box; }
#root { transition: opacity 140ms ease, transform 140ms ease; }
#root.lang-fade-out { opacity: 0; transform: translateY(4px); }
#root.lang-fade-in { animation: lang-fade-in 180ms ease-out both; }
@keyframes lang-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #root { transition: none; }
  #root.lang-fade-in { animation: none; }
}
svg { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
#root { min-height: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, button { font-size: 14px; }
::selection { background: var(--primary-soft); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--hover-surface); background-clip: content-box; }

h1, h2, h3, h4, p { margin: 0; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field .hint { font-size: 11.5px; color: var(--muted-2); }
.field .error { font-size: 11.5px; color: var(--danger); }
.field.has-error .input, .field.has-error select.input { border-color: var(--danger); }
.field.has-error .input:focus, .field.has-error select.input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.verification-status { min-height: 18px; font-size: 11.5px; color: var(--muted); }
.verification-status.error { color: var(--danger); }
.verification-status.is-verified {
  display: inline-flex; align-items: center; gap: 9px; min-height: 0; width: fit-content;
  margin-top: 3px; padding: 8px 11px; border: 1px solid rgba(31, 157, 99, .28);
  border-radius: 10px; background: var(--success-soft); color: var(--success);
}
.verification-status.is-verified > span:last-child { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.verification-status.is-verified strong { font-size: 12px; font-weight: 700; color: var(--text); }
.verification-status.is-verified small { font-size: 11px; color: var(--success); }
.verification-status-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(31, 157, 99, .16); }
.verification-status-icon svg { width: 13px; height: 13px; }
.passport-preview-trigger { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 8px; padding: 5px 8px 5px 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--text); font-size: 11.5px; font-weight: 600; }
.passport-preview-trigger:hover { border-color: var(--primary); color: var(--primary); }
.passport-preview-trigger img { width: 32px; height: 26px; object-fit: cover; border-radius: 5px; }
.passport-preview-backdrop { padding: 18px; }
.passport-preview-backdrop .modal { width: min(1120px, 100%); max-width: none; height: min(820px, calc(100vh - 36px)); display: flex; flex-direction: column; }
.passport-preview-backdrop .modal-body { min-height: 0; flex: 1; padding: 0; overflow: hidden; }
.passport-preview-stage { display: grid; place-items: center; width: 100%; height: 100%; overflow: auto; background: #0d1015; }
.passport-preview-stage img { display: block; max-width: 92%; max-height: 92%; object-fit: contain; transition: transform 160ms ease; transform-origin: center; }
.input, select.input, textarea.input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--muted-2); }
.input:focus, select.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
textarea.input { resize: vertical; min-height: 80px; font-family: inherit; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { accent-color: var(--primary); width: 16px; height: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.single { grid-template-columns: 1fr; }

/* ---------- OTP code entry (one box per digit) ---------- */
.otp-boxes { display: flex; gap: 8px; justify-content: center; }
.otp-box {
  width: 42px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-sm);
  padding: 10px 16px; font-weight: 600; font-size: 13.5px;
  background: var(--panel-3); color: var(--text);
  transition: background .15s, transform .05s, opacity .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--hover-surface); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary-fill); color: var(--on-primary); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.danger:hover { background: rgba(229, 72, 77, .24); }
.btn.success { background: var(--success-soft); color: var(--success); }
.btn.ghost { background: transparent; border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--panel-2); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; }
.btn.icon { padding: 8px; }
.btn.block { width: 100%; }
.btn .spinner { width: 14px; height: 14px; }

/* ---------- Console control primitives ----------
   These deliberately sit above page-specific styling: a future worklist only
   needs the classes below to match the dashboard action language. */
.console-toolbar { padding:8px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow-sm); }
.console-filter { min-height:40px; border-color:var(--border-soft); background:var(--panel-2); font-weight:600; }
.console-filter:hover { border-color:var(--border); }
.console-action { min-height:36px; padding-inline:14px; border-radius:9px; font-weight:700; box-shadow:none; }
.console-action-primary { background:var(--primary-fill); border-color:var(--primary-fill); }
.console-action-primary:hover, .console-action-primary:focus-visible { background:var(--primary-fill-hover); border-color:var(--primary-fill-hover); filter:none; }
.console-icon-action { display:inline-grid; width:36px; height:36px; place-items:center; padding:0; border-radius:9px; }
.console-icon-action svg { width:16px; height:16px; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.spinner.dark { border-color: var(--border); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  min-height:24px; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing: .02em; text-transform: uppercase;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.gray { background: var(--panel-3); color: var(--muted); }
.badge.green { background: var(--success-soft); color: var(--success); }
.badge.red { background: var(--danger-soft); color: var(--danger); }
.badge.yellow { background:color-mix(in srgb, var(--verification-warning) 14%, var(--panel)); color:var(--verification-warning); border:1px solid color-mix(in srgb, var(--verification-warning) 52%, var(--border)); }
.badge.blue { background: var(--info-soft); color: var(--info); }
.badge.purple { background: var(--primary-soft); color: var(--primary); }
.badge.queue-badge.template { background: var(--template-soft); color: var(--template); }
.badge.queue-badge.sender { background: var(--primary-soft); color: var(--primary); }
.badge.queue-badge.lypay { background: var(--info-soft); color: var(--info); }

/* ---------- Auth screens ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 88px 24px 24px; position: relative;
  background: var(--bg);
}
.service-error-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:32px 24px; background:var(--bg); color:var(--text); }
.service-error-brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); font-size:15px; font-weight:750; letter-spacing:-.02em; }
.service-error-content { display:flex; flex-direction:column; align-items:center; max-width:400px; text-align:center; }
.service-error-icon { display:grid; width:52px; height:52px; place-items:center; margin-bottom:18px; border:1px solid color-mix(in srgb, var(--primary) 42%, var(--border)); border-radius:50%; background:var(--primary-soft); color:var(--primary); }
.service-error-icon svg { width:24px; height:24px; }
.service-error-content h1 { font-size:clamp(24px, 3vw, 30px); letter-spacing:-.035em; line-height:1.15; }
.service-error-content p { margin:10px 0 22px; color:var(--muted); font-size:14px; line-height:1.65; }
.service-error-retry { min-width:112px; min-height:42px; border-radius:10px; font-weight:700; }
.auth-landing-back {
  position: absolute; inset-block-start: -54px; inset-inline-start: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  padding: 0 14px; color: var(--muted); background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.auth-landing-back svg { width: 18px; height: 18px; transition: transform 160ms ease; }
[dir="rtl"] .auth-landing-back svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .auth-landing-back:hover { color: var(--primary); background: var(--primary-soft); border-color: var(--primary); box-shadow: var(--shadow); text-decoration: none; }
  .auth-landing-back:hover svg { transform: translateX(-3px); }
  [dir="rtl"] .auth-landing-back:hover svg { transform: scaleX(-1) translateX(-3px); }
}
.auth-landing-back:active { transform: translateY(1px); }
.auth-card {
  width: 100%; max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 32px; box-shadow: var(--shadow-lg); position: relative;
}
.auth-card.wide { max-width: 620px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 26px; }
.auth-logo img {
  height: 120px; width: auto; max-width: 100%; box-sizing: border-box; object-fit: contain;
  background: var(--panel); padding: 18px 32px;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
@media (max-width: 480px) {
  .auth-logo img { height: 84px; padding: 12px 20px; }
}
.auth-card h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.auth-card p.sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-switch { margin-top: 20px; text-align: center; font-size: 13px; color: var(--muted); }
.auth-alert {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(229,72,77,.3);
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 16px;
}
.auth-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2); margin: 4px 0 -2px;
}

/* ---------- Auth stepper ---------- */
.auth-steps { display: flex; align-items: center; margin-bottom: 22px; }
.auth-step { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.auth-step-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-elev); border: 1px solid var(--border-soft); font-size: 12px; flex-shrink: 0;
}
.auth-step.active { color: var(--text); }
.auth-step.active .auth-step-dot { background: var(--primary-fill); border-color: var(--primary-fill); color: var(--on-primary); }
.auth-step.done .auth-step-dot { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.auth-step-dot svg { width: 14px; height: 14px; }
.auth-step-line { flex: 1; height: 1px; background: var(--border-soft); margin: 0 8px; min-width: 10px; }
.auth-step-panel.hidden { display: none; }
.register-form { gap: 20px; }
.register-form .auth-step-panel:not(.hidden) { display: flex; flex-direction: column; gap: 18px; }
.register-form .form-grid { gap: 18px; }
.register-form .input:focus,
.register-form .input:focus-visible { border-color: var(--border); box-shadow: none; outline: none; }
.login-form .input:focus,
.login-form .input:focus-visible { border-color: var(--border); box-shadow: none; outline: none; }
.auth-step-label { display: none; }
@media (min-width: 520px) { .auth-step-label { display: inline; } }
.auth-nav { display: flex; gap: 10px; margin-top: 4px; }
.auth-nav .btn.ghost { flex: 0 0 auto; }
.auth-nav .btn[hidden] { display: none; }
.auth-nav .btn.primary { flex: 1; }

/* ---------- App shell ---------- */
#app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; padding: 18px 14px;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  transition: transform .2s ease;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px 20px;
  border-bottom: 1px solid var(--border-soft); margin-bottom: 16px;
}
.mfa-setup-card {
  margin-bottom: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--text);
}
.mfa-setup-label { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mfa-setup-value { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.mfa-setup-value code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; line-height: 1.55; }
.mfa-setup-value .icon-btn { flex: 0 0 auto; }
.mfa-setup-hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mfa-setup-uri { margin-top: 12px; color: var(--muted); font-size: 12px; }
.mfa-setup-uri summary { cursor: pointer; color: var(--text); font-weight: 600; }
.mfa-setup-uri .mfa-setup-value { margin-top: 10px; }
.sidebar .brand-icon {
  width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain;
}
.sidebar .brand .name { font-weight: 700; font-size: 17px; }
.sidebar .brand .name small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }

.wallet-card {
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 18px;
}
.wallet-card .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.wallet-card .bal {
  font-size: 22px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em;
  overflow-wrap: anywhere; word-break: break-word; line-height: 1.15; color: var(--text);
}
.wallet-card .bal .cur { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.wallet-card .actions { display: flex; gap: 6px; margin-top: 12px; }
.wallet-card .actions .btn { flex: 1; }

.payment-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.payment-provider {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 12px; cursor: pointer; font: inherit; color: var(--text);
}
.payment-provider:hover:not(.disabled) { border-color: var(--primary); }
.payment-provider img { width: 56px; height: 56px; object-fit: contain; }
.payment-provider-name { font-size: 13px; font-weight: 700; }
.payment-provider.disabled { cursor: not-allowed; opacity: .55; }
.payment-provider-badge {
  position: absolute; top: 8px; right: 8px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  background: var(--panel-3); border-radius: 999px; padding: 3px 7px;
}
[dir="rtl"] .payment-provider-badge { right: auto; left: 8px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: var(--radius-sm); color: var(--sidebar-text); font-weight: 600; font-size: 13.5px;
  text-decoration: none; transition: background .12s, color .12s;
}
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav a:hover { background: var(--panel-2); color: var(--text); }
.nav a.active { background: var(--selected-item); color: var(--primary); }
.nav a.active svg { opacity: 1; }
.nav .nav-section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted-2); padding: 14px 12px 4px;
}

.sidebar-footer { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 8px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-sm); }
.user-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--panel-3); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--primary);
}
.user-chip .who { min-width: 0; flex: 1; }
.user-chip .who .n { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .who .r { font-size: 11px; color: var(--muted); }
.user-chip button { background: transparent; border: none; color: var(--muted); padding: 6px; border-radius: 7px; }
.user-chip button:hover { background: var(--panel-2); color: var(--danger); }

.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--topbar-bg); backdrop-filter: blur(10px); z-index: 20;
}
.topbar .title h2 { font-size: 18px; font-weight: 700; }
.topbar .title p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.topbar .actions { display: flex; gap: 10px; align-items: center; }
.menu-btn { display: none; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; color: var(--text); }

.content { padding: 26px 28px 60px; flex: 1; }
.page-loading { display: flex; align-items: center; justify-content: center; padding: 80px 0; }

@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .content { padding: 18px 16px 50px; }
  .topbar { padding: 0 16px; }
}

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30;
}
.sidebar-backdrop.show { display: block; }

/* ---------- Cards / stats ---------- */
.grid { display: grid; gap: 18px; }
.grid.stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .grid.stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.stats { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.card.pad-lg { padding: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-head h3 { font-size: 14.5px; font-weight: 700; }
.card-head p { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.stat {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.stat .icon {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat .icon svg { width: 18px; height: 18px; }
.stat .num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 10px; }
.stat .lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.stat .delta { font-size: 11px; font-weight: 700; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }
/* Grid items default to min-width:auto, so an unbreakable child (e.g. a
   <pre> curl example) inflates the column — and the whole page — past the
   viewport instead of scrolling inside itself. Let items shrink below
   their content's intrinsic width so that scroll stays contained. */
.two-col > * { min-width: 0; }

/* ---------- Profile settings ---------- */
.settings-tabs { margin-bottom:20px; }
.profile-layout { align-items:start; }
.profile-main, .profile-side { display:flex; flex-direction:column; gap:18px; }
.profile-card { border-color:var(--border); }
.profile-full-field, .profile-form-feedback, .settings-action-row { grid-column:1 / -1; }
.phone-input-group { display:flex; gap:8px; }
.phone-input-group select { flex:0 0 132px; }
.phone-input-group input { flex:1; }
.phone-input-group.has-error .input { border-color:var(--danger); }
.profile-form-feedback { min-height:18px; font-size:12px; font-weight:600; }
.profile-form-feedback.success { color:var(--success); }
.profile-form-feedback.error { color:var(--danger); }
.settings-action-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:2px; }
.settings-dirty { color:var(--muted); font-size:12px; }
.profile-identity { display:flex; align-items:center; gap:14px; }
.profile-avatar { width:52px; height:52px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--panel-3); color:var(--primary); font-size:18px; font-weight:800; }
.profile-display-name { font-size:15px; font-weight:750; }
.profile-login { margin-top:2px; font-size:12.5px; }
.profile-role-badge { text-transform:none; letter-spacing:0; }
.profile-org-id { max-width:185px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }
.profile-verification-card { border-color:var(--border); }
.verification-list { display:flex; flex-direction:column; }
.verification-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--border-soft); }
.verification-row:first-child { padding-top:0; border-top:0; }
.verification-row:last-child { padding-bottom:0; }
.verification-row .k { color:var(--muted); font-size:12.5px; font-weight:600; }
.verification-action { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.verification-badge { border:1px solid transparent; }
.verification-badge.verified { border-color:rgba(31, 157, 99, .32); }
.verification-badge.unverified { color:var(--verification-warning); background:color-mix(in srgb, var(--verification-warning) 14%, var(--panel)); border-color:color-mix(in srgb, var(--verification-warning) 52%, var(--border)); }
.profile-security-shell { width:100%; }
.profile-security-card { border-color:var(--border); }
.profile-security-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; }
.profile-security-heading h3 { font-size:16px; }
.profile-security-heading p { margin-top:3px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.profile-security-icon { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; color:var(--primary); background:var(--primary-soft); }
.profile-security-icon svg { width:19px; height:19px; }
.password-control { position:relative; }
.password-control .input { padding-inline-end:48px; }
.password-toggle { position:absolute; inset-inline-end:6px; inset-block-start:50%; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted); }
.password-toggle:hover, .password-toggle:focus-visible { background:var(--panel-3); color:var(--primary); outline:2px solid var(--primary); outline-offset:1px; }
.password-toggle svg { width:17px; height:17px; }
.password-requirement { display:flex; align-items:center; gap:6px; margin-top:2px; color:var(--muted); font-size:11.5px; }
.password-requirement span { display:grid; place-items:center; width:14px; height:14px; border:1px solid var(--muted-2); border-radius:50%; color:var(--success); font-size:10px; line-height:1; }
.password-requirement.met { color:var(--success); }
.password-requirement.met span { border-color:var(--success); background:var(--success-soft); }
.profile-security-form .profile-form-feedback, .profile-security-form .settings-action-row { grid-column:1 / -1; }
@media (max-width:640px) {
  .phone-input-group { flex-direction:column; }
  .phone-input-group select { flex-basis:auto; }
  .settings-action-row { align-items:stretch; flex-direction:column-reverse; }
  .settings-action-row .btn { width:100%; }
  .verification-row { align-items:flex-start; flex-direction:column; gap:8px; }
  .verification-action { justify-content:flex-start; }
}

/* ---------- Dashboard ---------- */
.dashboard-toolbar { margin-bottom: 20px; }
.tabs.compact { margin: -3px 0 13px; }
.dashboard-chart { position: relative; height: 132px; display: flex; align-items: end; gap: 3px; padding: 8px 0 0; border-bottom: 1px solid var(--border-soft); }
.chart-day { position: relative; min-width: 0; flex: 1; height: 100%; display: flex; align-items: end; justify-content: center; outline: none; cursor: crosshair; }
.chart-bars { height: 100%; width: min(16px, 100%); display: flex; align-items: end; gap: 2px; }
.chart-bar { display: block; flex: 1; min-height: 3px; border-radius: 4px 4px 0 0; }
.chart-bar.sms, .chart-key .sms { background: var(--primary); }
.chart-bar.whatsapp, .chart-key .whatsapp { background: var(--success); }
.chart-tooltip { position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 10px); display: flex; flex-direction: column; gap: 6px; min-width: 148px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .14s ease, transform .14s ease; white-space: nowrap; }
.chart-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel); transform: translateX(-50%) rotate(45deg); }
.chart-tooltip strong { padding-bottom: 3px; border-bottom: 1px solid var(--border-soft); color: var(--muted); font-size: 11px; font-weight: 700; }
.chart-tooltip span { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.chart-tooltip span i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.chart-tooltip span i.sms { background: var(--primary); }
.chart-tooltip span i.whatsapp { background: var(--success); }
.chart-tooltip b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.chart-day:hover .chart-tooltip, .chart-day:focus-visible .chart-tooltip { opacity: 1; transform: translate(-50%, 0); }
.chart-day:first-child .chart-tooltip { left: 0; transform: translate(0, 5px); }
.chart-day:first-child:hover .chart-tooltip, .chart-day:first-child:focus-visible .chart-tooltip { transform: translate(0, 0); }
.chart-day:last-child .chart-tooltip { left: auto; right: 0; transform: translate(0, 5px); }
.chart-day:last-child:hover .chart-tooltip, .chart-day:last-child:focus-visible .chart-tooltip { transform: translate(0, 0); }
[dir="rtl"] .chart-day:first-child .chart-tooltip { left: auto; right: 0; transform: translate(0, 5px); }
[dir="rtl"] .chart-day:first-child:hover .chart-tooltip, [dir="rtl"] .chart-day:first-child:focus-visible .chart-tooltip { transform: translate(0, 0); }
[dir="rtl"] .chart-day:last-child .chart-tooltip { left: 0; right: auto; transform: translate(0, 5px); }
[dir="rtl"] .chart-day:last-child:hover .chart-tooltip, [dir="rtl"] .chart-day:last-child:focus-visible .chart-tooltip { transform: translate(0, 0); }
.chart-key { display: flex; gap: 14px; margin-top: 11px; color: var(--muted); font-size: 12px; }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.dashboard-transaction { align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.dashboard-transaction:last-child { border-bottom: 0; }
.dashboard-transaction b { font-size: 13px; }
.dashboard-transaction small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.dashboard-transaction > div:last-child { display: flex; flex-direction: column; align-items: end; gap: 4px; }
.review-stat-card { width: 100%; text-align: inherit; border: 1px solid var(--border-soft); cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.review-stat-card:hover, .review-stat-card:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-sm); outline: none; }
.review-stat-card.active { border-color: var(--primary); background: var(--primary-soft); }
.review-stat-card.template.active { border-color: var(--template); }
.review-stat-card.sender.active { border-color: var(--primary); }
.review-stat-card.lypay.active { border-color: var(--info); }
.queue-filter-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; color:var(--muted); font-size:12px; }
.queue-filter-summary button { background:none; border:0; padding:2px 0; color:var(--primary); font:inherit; font-weight:700; }
.queue-org-name { display:block; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 94%, var(--panel-2)); }
@media (max-width:620px) { .queue-org-name { max-width:150px; } }

/* Reviewer Home: a work surface, not another generic metrics/table page. */
.review-dashboard { max-width: 1200px; margin-inline:auto; }
.review-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:23px 30px; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:linear-gradient(118deg, var(--panel) 0%, var(--panel) 55%, var(--primary-soft) 160%); box-shadow:var(--shadow-sm); overflow:hidden; position:relative; }
.review-hero::after { content:""; position:absolute; width:260px; height:260px; inset-inline-end:-120px; inset-block-start:-150px; border:1px solid color-mix(in srgb, var(--primary) 45%, transparent); border-radius:50%; pointer-events:none; }
.review-eyebrow { display:block; margin-bottom:8px; color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.review-hero h3 { font-size:25px; letter-spacing:-.035em; }
.review-hero p { margin-top:6px; color:var(--muted); font-size:13.5px; }
.review-total { min-width:218px; padding:14px 16px; position:relative; z-index:1; display:flex; align-items:center; gap:12px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel); color:var(--text); text-align:start; box-shadow:none; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.review-total:hover, .review-total:focus-visible { transform:translateY(-2px); border-color:var(--primary); box-shadow:var(--shadow-sm); outline:none; }
.review-total-icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; color:var(--success); background:var(--success-soft); border-radius:12px; }
.review-total-icon svg { width:19px; height:19px; }
.review-total-copy { min-width:0; }
.review-total small, .review-total em { display:block; color:var(--muted); font-size:11px; font-weight:600; font-style:normal; white-space:nowrap; }
.review-total strong { display:block; margin:3px 0; color:var(--text); font-size:26px; line-height:1; letter-spacing:-.05em; }
.review-lanes { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:18px; }
.review-lane { display:flex; align-items:center; gap:12px; min-height:94px; padding:16px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel); color:var(--text); text-align:start; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.review-lane:hover, .review-lane:focus-visible { transform:translateY(-2px); box-shadow:var(--shadow-sm); outline:none; }
.review-lane.active { background:var(--panel-2); }
.review-lane.template.active { border-color:var(--template); }
.review-lane.sender.active { border-color:var(--primary); }
.review-lane.lypay.active { border-color:var(--info); }
.review-lane-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; flex:0 0 auto; }
.review-lane-icon svg { width:19px; height:19px; }
.review-lane.template .review-lane-icon { color:var(--template); background:var(--template-soft); }
.review-lane.sender .review-lane-icon { color:var(--primary); background:var(--primary-soft); }
.review-lane.lypay .review-lane-icon { color:var(--info); background:var(--info-soft); }
.review-lane.total .review-lane-icon { color:var(--success); background:var(--success-soft); }
.review-lane-copy { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
.review-lane-copy small { color:var(--muted); font-size:12px; font-weight:600; line-height:1.3; }
.review-lane-copy strong { font-size:26px; letter-spacing:-.04em; }
.review-lane-arrow { color:var(--muted-2); }
.review-lane-arrow svg { width:17px; height:17px; }
.review-refresh { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border-soft); border-radius:var(--radius-sm); background:var(--panel); color:var(--muted); font-size:12px; font-weight:700; transition:color .16s ease, border-color .16s ease, background .16s ease; }
.review-refresh svg { width:16px; height:16px; }
.review-refresh:hover, .review-refresh:focus-visible { color:var(--primary); border-color:var(--primary); background:var(--primary-soft); outline:none; }
.review-refresh.loading { pointer-events:none; color:var(--primary); }
.review-refresh.loading svg { animation:spin .7s linear infinite; }
.review-queue-card { margin-top:18px; padding:21px; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow-sm); }
.review-queue-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.review-queue-head h3 { font-size:17px; letter-spacing:-.02em; }
#queueSummary { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; white-space:nowrap; }
.review-clear { border:0; padding:0; background:transparent; color:var(--primary); font:inherit; font-weight:700; }
.review-list { border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; }
.review-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:22px; padding:15px 18px; background:var(--panel); border-bottom:1px solid var(--border-soft); transition:background .16s ease; }
.review-item:last-child { border-bottom:0; }
.review-item:hover { background:var(--panel-2); }
.review-item-leading { display:flex; align-items:center; gap:18px; min-width:0; }
.review-item-main { min-width:0; }
.review-item-main h4 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.review-item-main p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:4px; color:var(--muted); font-size:12px; }
.review-item-time { display:flex; align-items:center; gap:7px; min-width:74px; color:var(--muted); font-size:11px; }
.review-item-time strong { color:var(--text); font-size:12.5px; }
.review-clock { width:15px; height:15px; color:var(--muted-2); }
.review-clock svg { width:15px; height:15px; display:block; }
.review-action { min-width:76px; justify-content:center; border-color:color-mix(in srgb, var(--primary) 30%, var(--border)); }
.review-action:hover, .review-action:focus-visible { color:var(--on-primary); background:var(--primary-fill); border-color:var(--primary-fill); outline:none; }
.template-review-list { border-radius:var(--radius-lg); }
.template-review-item { grid-template-columns:minmax(260px,1.5fr) minmax(130px,.6fr) minmax(120px,.55fr) auto; gap:18px; min-height:92px; }
.template-review-item.is-pending { background:linear-gradient(90deg, color-mix(in srgb, var(--template-soft) 38%, var(--panel)) 0%, var(--panel) 48%); }
.template-review-item .review-item-mark { min-width:112px; }
.review-item-status { min-width:0; }
.review-item-status .badge { white-space:nowrap; }
.review-item-time { display:grid; grid-template-columns:1fr; gap:3px; align-content:center; min-width:120px; }
.review-item-time > span, .review-item-time small { color:var(--muted); font-size:11px; font-weight:500; }
.review-item-time small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.review-item-action { display:flex; justify-content:flex-end; min-width:112px; }
.review-complete { color:var(--muted-2); font-size:11px; font-weight:600; white-space:nowrap; }
.inline-copy { display:inline-grid; place-items:center; width:18px; height:18px; padding:2px; vertical-align:-4px; border:0; border-radius:5px; background:transparent; color:var(--muted-2); }
.inline-copy svg { width:12px; height:12px; }
.inline-copy:hover, .inline-copy:focus-visible { color:var(--primary); background:var(--primary-soft); outline:none; }
@media (max-width:1000px) { .review-lanes { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:900px) { .template-review-item { grid-template-columns:minmax(0,1fr) auto; } .template-review-item .review-item-leading { grid-column:1; } .template-review-item .review-item-status { grid-column:2; grid-row:1; } .template-review-item .review-item-time { grid-column:1; grid-row:2; } .template-review-item .review-item-action { grid-column:2; grid-row:2; align-self:end; } }
@media (max-width:800px) { .review-lanes { grid-template-columns:1fr; } .review-item { grid-template-columns:1fr auto; gap:12px; } .review-item-leading { grid-column:1; } .review-item-time { grid-column:2; align-self:start; } .review-action { grid-column:2; } }
@media (max-width:560px) { .review-hero { align-items:flex-start; flex-direction:column; padding:24px; } .review-total { width:100%; } .review-queue-card { padding:16px; } .review-queue-head { align-items:flex-start; flex-direction:column; } .review-item { padding:14px; } }
[dir="rtl"] .review-lane-arrow svg { transform:scaleX(-1); }
.setup-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.setup-list a { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; padding: 11px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; }
.setup-list a:hover { border-color: var(--primary); color: var(--primary); }
.setup-list svg { width: 16px; height: 16px; color: var(--primary); transform: rotate(45deg); }
.plain-home { max-width: 520px; }
.plain-home > svg { width: 34px; height: 34px; color: var(--primary); margin-bottom: 14px; }
.plain-home p { color: var(--muted); margin: 6px 0 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 620px) { .setup-list { grid-template-columns: 1fr; } .dashboard-toolbar .grow { display:none; } .dashboard-chart { gap:2px; } }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-soft); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
table.tbl thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-2); font-weight: 700; padding: 12px 16px; background: var(--panel-2);
  border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
table.tbl tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr { background: var(--panel); transition: background .1s; }
table.tbl tbody tr:hover { background: var(--panel-2); }
.cell-strong { font-weight: 600; }
.cell-muted { color: var(--muted); font-size: 12.5px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state svg { width: 44px; height: 44px; color: var(--muted-2); margin-bottom: 12px; }
.empty-state .t { font-weight: 600; color: var(--text); margin-bottom: 4px; }

.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 0; font-size: 12.5px; color: var(--muted); }
.pagination .btns { display: flex; gap: 6px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 180px; }
.page-workspace { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.workspace-intro { min-width:0; }
.workspace-eyebrow { display:block; margin-bottom:5px; color:var(--primary); font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.workspace-intro p { color:var(--muted); font-size:12.5px; }
.filter-toolbar { margin:0; padding:10px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow-sm); }
.filter-control { width:170px; }
.template-review-workbench { max-width:1180px; margin:0 auto; }
.template-review-filters { display:grid; grid-template-columns:minmax(260px,1fr) 170px 170px 190px; gap:8px; margin:0 0 14px; }
.template-review-filters .search-input { min-width:0; }
.template-review-filters .input { width:100%; min-height:44px; }
.template-review-queue { overflow:hidden; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow-sm); }
.template-review-queue .page-loading { min-height:180px; }
.template-review-list { overflow:hidden; }
.template-review-item { display:grid; grid-template-columns:minmax(0,1fr) 154px auto; align-items:center; gap:24px; min-height:88px; padding:16px 20px; background:var(--panel); border-bottom:1px solid var(--border-soft); transition:background .16s ease; }
.template-review-item:last-child { border-bottom:0; }
.template-review-item:hover { background:var(--panel-2); }
.template-review-item.is-pending { background:var(--panel); }
.template-review-item .review-item-leading { gap:14px; }
.template-review-item .review-item-mark { min-width:auto; }
.template-review-item .review-item-status { justify-self:start; }
.template-review-item.is-pending .review-item-status { display:none; }
.template-review-item .review-item-time { min-width:0; }
.template-review-item .review-item-action { min-width:84px; }
.template-review-item .review-action { min-width:84px; border-color:var(--primary-fill); }
.template-review-pagination { padding:0 16px; border-top:1px solid var(--border-soft); }
.template-review-pagination .pagination { justify-content:center; gap:16px; padding:12px 0; }
.template-review-pagination .console-icon-action { background:var(--panel-2); border-color:var(--border-soft); }
.template-review-pagination .console-icon-action:hover, .template-review-pagination .console-icon-action:focus-visible { color:var(--primary); border-color:var(--primary); background:var(--primary-soft); outline:none; }
.organizations-pagination .pagination { justify-content:center; gap:16px; }
.users-pagination .pagination { justify-content:center; gap:16px; }
.review-worklist-pagination .pagination { justify-content:center; gap:16px; }
.message-org-picker { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(360px,1.28fr); align-items:center; gap:32px; width:100%; margin:0 0 16px; padding:22px 24px; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow-sm); }
.message-org-picker.has-selection { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 16px; }
.message-org-picker.has-selection .message-org-picker-copy { display:none; }
.message-org-picker.has-selection .message-org-selected { border:0; background:transparent; box-shadow:none; padding:0; }
.message-org-picker-copy h3 { font-size:17px; letter-spacing:-.02em; }
.message-org-picker-copy p { margin-top:4px; color:var(--muted); font-size:12.5px; }
.message-org-picker-control { position:relative; }
.message-org-picker-control .search-input svg { left:13px; }
.message-org-results { position:absolute; z-index:8; top:calc(100% + 6px); right:0; left:0; max-height:300px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.message-org-option { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:2px 12px; padding:11px 13px; border:0; border-bottom:1px solid var(--border-soft); background:transparent; color:var(--text); text-align:start; }
.message-org-option:last-child { border-bottom:0; }
.message-org-option:hover, .message-org-option:focus-visible { background:var(--panel-2); outline:none; }
.message-org-option strong, .message-org-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-org-option strong { font-size:13px; }
.message-org-option span { color:var(--muted); font-size:12px; }
.message-org-option small { grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--muted-2); font-size:11px; }
.message-org-no-results { padding:14px; color:var(--muted); font-size:12.5px; }
.message-org-manual { margin-top:9px; color:var(--muted); font-size:12px; }
.message-org-manual summary { width:max-content; cursor:pointer; }
.message-org-manual > div { display:flex; gap:8px; margin-top:8px; }
.message-org-manual .input { min-width:0; }
.message-org-selected { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin:0; padding:14px 16px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel); }
.message-org-selected > div { display:grid; gap:1px; min-width:0; }
.message-org-selected span, .message-org-selected small { color:var(--muted); font-size:11.5px; }
.message-org-selected strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.message-filters { width:max-content; margin:0 0 12px; }
.message-org-picker.has-selection .message-filters { width:auto; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
.message-filters .tabs { margin:0; }
.message-history-surface { min-height:0; }
.message-history-surface #messagesPagination { padding:0 16px; border-top:1px solid var(--border-soft); }
.message-history-surface #messagesPagination .pagination { justify-content:center; gap:16px; padding:12px 0; }
.message-table-summary { padding:13px 16px 10px; color:var(--muted); font-size:12px; font-weight:600; }
.message-recipient { display:flex; flex-direction:column; gap:2px; text-align:start; }
.message-recipient strong { font-size:13px; }
.message-recipient span { color:var(--muted); font-size:11.5px; }
[dir="rtl"] .message-recipient,
[dir="rtl"] .message-recipient > * { text-align:right; }
.message-setup-state { display:flex; align-items:center; justify-content:center; gap:14px; min-height:150px; padding:28px; color:var(--muted); text-align:left; }
.message-setup-state > svg { width:32px; height:32px; color:var(--muted-2); }
.message-setup-state h3 { color:var(--text); font-size:14px; }
.message-setup-state p { margin-top:3px; font-size:12.5px; }
@media (max-width:720px) { .message-org-picker { grid-template-columns:1fr; gap:16px; padding:16px; } .message-org-picker.has-selection { align-items:stretch; flex-direction:column; } .message-org-selected { padding:13px; } .message-filters { width:100%; } }
@media (max-width:460px) { .message-org-manual > div { align-items:stretch; flex-direction:column; } .message-org-manual .btn { width:100%; } }
@media (max-width:900px) { .template-review-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .template-review-filters .search-input { grid-column:span 2; } .template-review-item { grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; } .template-review-item .review-item-leading { grid-column:1; } .template-review-item .review-item-status { grid-column:1; grid-row:2; } .template-review-item .review-item-time { grid-column:1; grid-row:2; } .template-review-item .review-item-action { grid-column:2; grid-row:1 / span 2; } .template-review-item.is-pending .review-item-time { grid-row:2; } }
@media (max-width:560px) { .template-review-filters { grid-template-columns:1fr; } .template-review-filters .search-input { grid-column:auto; } .template-review-item { padding:15px; } .template-review-item .review-item-leading { align-items:flex-start; flex-direction:column; gap:8px; } }
.list-surface { padding:0; overflow:hidden; }
.list-surface .table-wrap { border:0; border-radius:0; }
.organization-cell { display:flex; align-items:center; gap:6px; min-width:150px; max-width:260px; }
.org-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.org-copy { width:26px; height:26px; padding:5px; opacity:.65; flex:0 0 auto; }
.org-copy:hover, .org-copy:focus-visible { opacity:1; color:var(--primary); outline:2px solid var(--primary); outline-offset:1px; }
.modal-badges { display:flex; flex-wrap:wrap; gap:8px; }
.search-input { position: relative; }
.search-input svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted-2); }
.search-input input { padding-left: 34px; }

.tabs { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px; width: fit-content; margin-bottom: 18px; }
.tabs button { background: transparent; border: none; color: var(--muted); padding: 7px 14px; border-radius: 7px; font-weight: 600; font-size: 12.5px; }
.tabs button.active { background: var(--primary-fill); color: var(--on-primary); }

/* Shared console polish: concise work surfaces, deliberate focus, and
   a single visual rhythm across data pages without a framework layer. */
.content > .toolbar:first-child { padding:10px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow-sm); }
.content > .toolbar:first-child + .card { margin-top:0; }
.card { transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.card:focus-within { border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
.card-head > a { color:var(--primary); font-size:12px; font-weight:700; text-decoration:none; }
.card-head > a:hover, .card-head > a:focus-visible { text-decoration:underline; outline:none; }
.btn:focus-visible, .tabs button:focus-visible, .nav a:focus-visible, .input:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.btn[disabled], .pagination .btn[disabled] { opacity:.42; cursor:not-allowed; box-shadow:none; pointer-events:none; }
.category-badge.category-alert { color:#c4586a; background:rgba(196,88,106,.14); }
.category-badge.category-marketing { color:var(--warning); background:var(--warning-soft); }
.category-badge.category-transactional { color:var(--info); background:var(--info-soft); }
.category-badge.category-otp { color:var(--primary); background:var(--primary-soft); }
@media (max-width:760px) {
  .page-workspace { align-items:stretch; flex-direction:column; }
  .filter-toolbar { width:100%; }
  .filter-toolbar .grow { flex-basis:100%; }
  .filter-control { flex:1 1 150px; width:auto; }
  .organization-cell { max-width:180px; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,6,10,.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: modalIn .16s ease;
}
.modal.wide { max-width: 640px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { font-size: 15.5px; font-weight: 700; }
.modal-head p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal-close { background: var(--panel-2); border: none; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal-close:hover { background: var(--panel-3); color: var(--text); }
.modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.toast {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: flex-start;
  animation: toastIn .18s ease;
  font-size: 13px;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.toast .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast.success .ic { color: var(--success); }
.toast.error .ic { color: var(--danger); }
.toast.info .ic { color: var(--info); }
.toast .msg { flex: 1; }
.toast .close { background: none; border: none; color: var(--muted-2); padding: 0; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--border-soft); margin: 16px 0; }
.copy-box {
  display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; font-family: ui-monospace, monospace; font-size: 12.5px;
  word-break: break-all;
}
.copy-box button { flex-shrink: 0; }
.integration-endpoint-field .copy-box { align-items:center; justify-content:space-between; min-height:46px; padding:11px 14px; gap:12px; }
.integration-endpoint-field .copy-box > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.http-method { display:inline-flex; align-items:center; min-height:22px; margin-inline-end:6px; padding:2px 7px; border-radius:999px; background:var(--success-soft); color:var(--success); font-family:inherit; font-size:10px; letter-spacing:.05em; }
.code-block-wrap { position:relative; }
.code-block-wrap pre { margin:0; padding:13px 44px 13px 13px; overflow:auto; white-space:pre; font-size:11.5px; }
.code-block-wrap .code-copy { position:absolute; top:8px; right:8px; }
.key-mask { display:block; white-space:nowrap; }
.key-note { display:block; margin-top:3px; color:var(--muted-2); font-family:inherit; font-size:10px; }
.api-key-date { min-width:104px; white-space:nowrap; }
.api-key-revoke { width:32px; height:32px; color:var(--danger); }
.api-key-revoke:hover, .api-key-revoke:focus-visible { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.integration-guidance { align-items:flex-start; margin-top:12px; }
.integration-guidance ul { margin:0; padding-inline-start:18px; }
.integration-guidance li + li { margin-top:5px; }
.integration-page #newKeyBtn { min-height:40px; padding-inline:14px; border-radius:10px; }
.integration-page .pad-lg { padding:28px; }
.integration-page .card-head { margin-bottom:20px; }
.integration-page .field + .field { margin-top:20px; }
.api-key-list { display:flex; flex-direction:column; margin-top:18px; border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; }
.api-key-row { display:grid; grid-template-columns:minmax(150px,1.1fr) auto minmax(255px,1fr) auto; align-items:center; gap:18px; padding:15px 16px; background:var(--panel); }
.api-key-row + .api-key-row { border-top:1px solid var(--border-soft); }
.api-key-row:hover { background:var(--panel-2); }
.api-key-primary { display:grid; gap:4px; min-width:0; }
.api-key-primary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.api-key-primary span { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.api-key-status .badge { white-space:nowrap; }
.api-key-meta { display:grid; grid-template-columns:repeat(3, minmax(76px,1fr)); gap:12px; }
.api-key-meta span { display:grid; gap:2px; color:var(--muted-2); font-size:10.5px; }
.api-key-meta strong { color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap; }
[dir="rtl"] .api-key-row,
[dir="rtl"] .api-key-primary,
[dir="rtl"] .api-key-meta span { text-align:right; }
[dir="rtl"] .api-key-primary .mono { direction:ltr; unicode-bidi:isolate; text-align:right; }
[dir="rtl"] .api-key-meta strong { direction:ltr; unicode-bidi:isolate; text-align:right; }
.api-key-actions { min-width:32px; }
.api-key-empty-active { padding:20px 16px; color:var(--muted); font-size:13px; text-align:center; }
.api-key-history-toggle { display:inline-flex; align-items:center; margin-top:12px; padding:6px 0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:700; }
.api-key-history-toggle:hover, .api-key-history-toggle:focus-visible { color:var(--primary); outline:none; }
.api-key-history { margin-top:8px; }
.api-key-history h4 { margin:0 0 8px; color:var(--muted); font-size:12px; font-weight:700; }
.api-key-history .api-key-row { opacity:.72; }
.integration-guidance { border-color:var(--border-soft) !important; background:var(--panel-2) !important; color:var(--muted) !important; }
.integration-guidance svg { color:var(--primary); }
@media (max-width:680px) { .integration-page .pad-lg { padding:18px; } .api-key-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; } .api-key-status { grid-column:1; } .api-key-meta { grid-column:1 / -1; grid-template-columns:repeat(3, minmax(0,1fr)); } .api-key-actions { grid-column:2; grid-row:1 / span 2; } }
.integration-page #keysList .table-wrap { overflow:visible; padding-inline-end:2px; border:0; }
.integration-page #keysList table.tbl { min-width:0; table-layout:fixed; font-size:12px; }
.integration-page #keysList table.tbl th, .integration-page #keysList table.tbl td { padding-inline:9px; }

/* Pricing: compact operational settings rather than a stack of forms. */
.pricing-page { display:grid; gap:24px; max-width:1280px; }
.pricing-section { display:grid; gap:12px; }
.pricing-section-head { display:flex; align-items:end; justify-content:space-between; padding-inline:4px; }
.pricing-section-head h2 { margin:4px 0 3px; font-size:17px; line-height:1.25; }
.pricing-section-head p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.45; }
.pricing-settings-list { overflow:hidden; border:1px solid var(--border-soft); border-radius:var(--radius-lg); background:var(--panel); }
.pricing-row { display:grid; grid-template-columns:minmax(240px,1.15fr) auto minmax(225px,300px) auto; align-items:center; gap:20px; padding:18px 20px; transition:background 150ms ease; }
.pricing-row + .pricing-row { border-top:1px solid var(--border-soft); }
.pricing-row:hover { background:var(--panel-2); }
.pricing-row.is-dirty { background:color-mix(in srgb, var(--primary) 5%, var(--panel)); }
.pricing-row-copy { min-width:0; }
.pricing-row-title { color:var(--text); font-size:14px; font-weight:750; line-height:1.3; }
.pricing-row-copy p { max-width:34rem; margin:4px 0 0; color:var(--muted); font-size:11.5px; line-height:1.4; }
.pricing-row-status .badge { white-space:nowrap; }
.pricing-control { display:grid; gap:5px; min-width:0; }
.pricing-control label { color:var(--muted); font-size:11px; font-weight:700; }
.pricing-input-wrap { position:relative; display:flex; align-items:center; }
.pricing-input-wrap .input { padding-inline-end:54px; }
.pricing-currency { position:absolute; inset-inline-end:12px; color:var(--muted); font-size:11px; font-weight:750; pointer-events:none; }
.pricing-copy { position:absolute; inset-inline-end:5px; width:31px; height:31px; }
.pricing-feedback { min-height:15px; color:var(--muted-2); font-size:11px; }
.pricing-feedback.success { color:var(--success); }
.pricing-feedback.error { color:var(--danger); }
.pricing-actions .btn { min-width:70px; }
.pricing-savebar { position:sticky; inset-block-end:16px; z-index:3; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:11px 14px; border:1px solid color-mix(in srgb, var(--primary) 44%, var(--border-soft)); border-radius:12px; background:color-mix(in srgb, var(--panel) 92%, var(--primary)); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.pricing-savebar[hidden] { display:none; }
.pricing-savebar span { margin-inline-end:auto; color:var(--text); font-size:13px; font-weight:700; }
@media (max-width:760px) { .pricing-row { grid-template-columns:1fr auto; gap:12px; padding:16px; } .pricing-row-status { justify-self:end; } .pricing-control { grid-column:1 / -1; } .pricing-actions { grid-column:2; grid-row:1; } .pricing-row-status + .pricing-control { grid-row:2; } .pricing-savebar { inset-inline:0; } }
@media (prefers-reduced-motion:reduce) { .pricing-row { transition:none; } }
.integration-page #keysList table.tbl th:nth-child(1), .integration-page #keysList table.tbl td:nth-child(1) { width:17%; }
.integration-page #keysList table.tbl th:nth-child(2), .integration-page #keysList table.tbl td:nth-child(2) { width:24%; }
.integration-page #keysList table.tbl th:nth-child(3), .integration-page #keysList table.tbl td:nth-child(3) { width:14%; }
.integration-page #keysList table.tbl th:nth-child(4), .integration-page #keysList table.tbl td:nth-child(4), .integration-page #keysList table.tbl th:nth-child(5), .integration-page #keysList table.tbl td:nth-child(5), .integration-page #keysList table.tbl th:nth-child(6), .integration-page #keysList table.tbl td:nth-child(6) { width:12%; }
.integration-page #keysList table.tbl th:nth-child(7), .integration-page #keysList table.tbl td:nth-child(7) { width:7%; }
@media (max-width:980px) { .integration-page #keysList .table-wrap { overflow-x:auto; padding-inline-end:0; } .integration-page #keysList table.tbl { min-width:650px; } }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 12.5px; display: flex; gap: 10px; }
.alert.warning { background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(138,107,18,.35); }
.alert.success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(31,157,99,.3); }
.alert.info { background: var(--info-soft); color: var(--info); border: 1px solid rgba(59,130,246,.3); }
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.progress-bar { height: 6px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.progress-bar > div { height: 100%; background: var(--primary); border-radius: 999px; transition: width .2s; }

.kv { display: flex; flex-direction: column; gap: 12px; }
.kv .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; }
.kv .row .k { color: var(--muted); }
.kv .row .v { font-weight: 600; text-align: right; }

.role-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--panel-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.skeleton { background: var(--panel-3); animation: sk 1.4s ease infinite; border-radius: 6px; }
@keyframes sk { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.lang-toggle:hover { background: var(--panel-3); }
.icon-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 33px; height: 33px; flex-shrink: 0;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px;
}
.icon-toggle:hover { background: var(--panel-3); }
.icon-toggle svg { width: 16px; height: 16px; }
.topbar-toggles { display: flex; align-items: center; gap: 8px; }
/* Keep dashboard controls visually consistent with the landing header:
   separate, borderless controls with the same touch target and motion. */
.topbar-toggles .icon-toggle {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--text);
  transition: color 160ms ease, transform 160ms ease;
}
.topbar-toggles .icon-toggle svg { width: 18px; height: 18px; transition: transform 240ms ease; }
.topbar-toggles .lang-toggle {
  width: 32px; min-height: 44px; padding: 10px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text); transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .topbar-toggles .icon-toggle:hover { background: transparent; color: var(--primary); }
  .topbar-toggles .icon-toggle:hover svg { transform: rotate(18deg) scale(1.06); }
  .topbar-toggles .lang-toggle:hover { background: transparent; color: var(--primary); }
}
.auth-toggles { position: absolute; top: 24px; inset-inline-end: 24px; display: flex; align-items: center; gap: 12px; }
.auth-toggles .auth-theme-toggle {
  width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text);
}
.auth-toggles .auth-theme-toggle svg { transition: transform 240ms ease; }
.auth-toggles .auth-language-toggle {
  width: 32px; min-height: 44px; padding: 10px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text); font-size: 12px; font-weight: 700;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .auth-toggles .auth-theme-toggle:hover { background: transparent; color: var(--primary); }
  .auth-toggles .auth-theme-toggle:hover svg { transform: rotate(18deg) scale(1.06); }
  .auth-toggles .auth-language-toggle:hover { background: transparent; color: var(--primary); }
}
.auth-toggles .auth-theme-toggle:active { transform: translateY(1px); }

/* ---------- RTL ----------
   Flexbox's `row` direction already follows `dir` automatically (icon+label
   order, form-grid columns, etc. mirror for free) — only physical left/right
   positioning and a few directional icons need explicit overrides here.
*/
[dir="rtl"] body {
  font-family: "Somar Sans", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", "Dubai", -apple-system, Roboto, sans-serif;
}
[dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border-soft); }
[dir="rtl"] .main { margin-left: 0; margin-right: var(--sidebar-w); }
@media (max-width: 980px) {
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
  [dir="rtl"] .main { margin-right: 0; }
}
[dir="rtl"] .wallet-card .bal .cur { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .search-input svg { left: auto; right: 11px; }
[dir="rtl"] .search-input input { padding-left: 12px; padding-right: 34px; }
[dir="rtl"] #toasts { right: auto; left: 18px; }
[dir="rtl"] .toast { animation-name: toastInRtl; }
@keyframes toastInRtl { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .kv .row .v { text-align: left; }
[dir="rtl"] table.tbl thead th { text-align: right; }
[dir="rtl"] table.tbl tbody td { text-align: right; }
[dir="rtl"] .row-actions { justify-content: flex-start; }
[dir="rtl"] .pagination .btns svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Public landing styles are isolated in landing.css. */