/*
 * JISSR - style.css (v4.0 - Oman Government Inspired)
 * Formal, professional palette: deep red, dark green, gold accents
 * Clean white/cream surfaces, subtle borders, official tone
 */

/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS - Oman Gov inspired palette
══════════════════════════════════════════════════════════════ */
:root {
  /* Primary palette - Blue + White with small red accent */
  --om-blue:       #0b5fae;   /* primary brand blue */
  --om-blue-deep:  #084482;
  --om-blue-soft:  #e3eef9;
  --om-sky:        #e8f1fb;
  --om-red:        #C8102E;   /* small red accent only */
  --om-red-deep:   #9c0a23;
  --om-red-soft:   #fdecef;
  --om-green:      #117A4D;
  --om-green-deep: #0c5a39;
  --om-green-soft: #e3f2eb;
  --om-gold:       #C9A227;
  --om-gold-soft:  #f6efd6;
  --om-ink:        #0d1726;
  --om-cream:      #f7faff;
  --om-paper:      #ffffff;

  /* Type scale */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii - square-ish, formal */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}

[data-theme="light"] {
  /* Surfaces - soft blue-tinted whites */
  --bg-base:        var(--om-cream);
  --bg-surface:     var(--om-paper);
  --bg-elevated:    var(--om-paper);
  --bg-input:       var(--om-paper);
  --bg-tint:        var(--om-sky);

  --border-subtle:  #d8e3f2;
  --border-default: #aabfdc;
  --border-strong:  #6f8db5;

  --text-primary:   var(--om-ink);
  --text-secondary: #2a3650;
  --text-muted:     #6b7589;
  --text-inverse:   #ffffff;

  /* Brand */
  --color-accent:     var(--om-blue);
  --color-accent-2:   var(--om-blue);
  --color-accent-dim: rgba(11,95,174,0.10);
  --color-accent-glow: rgba(11,95,174,0.30);
  --color-secondary:  var(--om-blue);
  --color-secondary-dim: rgba(11,95,174,0.10);
  --color-gold:       var(--om-gold);

  /* Status */
  --color-red:      var(--om-blue);
  --color-red-dim:  rgba(11,95,174,0.12);
  --color-green:    var(--om-blue);
  --color-green-dim: rgba(17,122,77,0.12);
  --color-amber:    #b07b00;
  --color-blue:     #1d4ed8;
  --color-purple:   #6b21a8;

  --color-guest:    var(--om-blue);
  --color-guest-dark: var(--om-blue-deep);
  --color-guest-text: #ffffff;

  /* Cards (formal, NOT glass) */
  --glass-bg:        var(--om-paper);
  --glass-bg-card:   var(--om-paper);
  --glass-bg-strong: var(--om-paper);
  --glass-border:    #e0d8c1;
  --glass-border-bright: #d8d0bb;
  --glass-blur:      none;
  --glass-shadow:    0 1px 2px rgba(13,23,38,0.05), 0 4px 16px rgba(13,23,38,0.06);

  --shadow-sm:   0 1px 2px rgba(13,23,38,0.05);
  --shadow-md:   0 4px 16px rgba(13,23,38,0.07);
  --shadow-lg:   0 16px 40px rgba(13,23,38,0.12);
  --shadow-accent: 0 4px 20px rgba(11,95,174,0.18);

  --vf-bg: #0f172a;
  --vf-corner-color: var(--om-blue);
  --nav-bg: var(--om-paper);

  /* Background - no orbs, just a subtle pattern */
  --orb1-color: transparent;
  --orb2-color: transparent;
  --orb3-color: transparent;
  --orb4-color: transparent;
}

/* Dark theme intentionally removed - site is light-only.
   Any leftover [data-theme="dark"] attribute inherits the light tokens above. */

[data-high-contrast="true"] {
  --border-default: #000;
  --text-secondary: var(--om-ink);
  --text-muted: #333;
}


/* ══════════════════════════════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem; line-height: 1.6;
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
}
[hidden] { display: none !important; }
ul, ol { list-style: none; }
button, input, select, textarea, label { font-family: inherit; font-size: inherit; }
button { cursor: pointer; background: none; border: none; color: inherit; }
:focus-visible {
  outline: 2px solid var(--om-gold);
  outline-offset: 2px;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--om-blue); text-decoration: none; transition: color .15s; }
a:hover { color: var(--om-blue-deep); text-decoration: underline; }

/* Subtle gov-style backdrop (replaces orbs/grid) */
[data-theme="light"] body {
  background:
    radial-gradient(1200px 800px at 100% -10%, rgba(17,122,77,0.05), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(11,95,174,0.05), transparent 60%),
    var(--om-cream);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 800px at 100% -10%, rgba(26,166,108,0.06), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(230,57,80,0.06), transparent 60%),
    #0d1320;
  background-attachment: fixed;
}


/* ══════════════════════════════════════════════════════════════
   3. UTILITIES
══════════════════════════════════════════════════════════════ */
.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; }
.skip-link {
  position: absolute; top: -100%; left: 8px; z-index: 9999;
  background: var(--om-blue); color: #fff; padding: 8px 16px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 0; }
.hidden { display: none !important; }
.accent-text { color: var(--om-blue); }
.gradient-text {
  background: linear-gradient(135deg, var(--om-blue), var(--om-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ══════════════════════════════════════════════════════════════
   4. APP SHELL - GOV-STYLE BANNER HEADER
══════════════════════════════════════════════════════════════ */
.app { display: flex; flex-direction: column; min-height: 100dvh; }

/* Top accent strip (Omani flag - red / white / green) */
.gov-strip {
  height: 4px;
  background: linear-gradient(90deg, var(--om-red) 0 33.3%, var(--om-paper) 33.3% 66.6%, var(--om-green) 66.6% 100%);
}
[data-theme="dark"] .gov-strip {
  background: linear-gradient(90deg, var(--om-red) 0 33.3%, #2a3450 33.3% 66.6%, var(--om-green) 66.6% 100%);
}

.app-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 rgba(13,23,38,0.04);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-5); height: 72px;
  max-width: 1280px; margin: 0 auto; width: 100%;
}

.brand {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: inherit;
}
.brand-mark {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--om-blue-deep);
  color: #fff;
  font-weight: 800;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.12);
  font-size: 16px;
  letter-spacing: 0.5px;
}
/* Image variant - keeps natural circular logo, no bg/shadow tint */
.brand-mark--img {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50%;
  object-fit: contain;
  width: 48px; height: 48px;
  padding: 0;
}
.auth-brand-mark--img {
  background: #fff !important;
  border-radius: 50%;
  object-fit: contain;
  padding: 4px;
  width: 64px; height: 64px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
  color: var(--text-primary);
}
.brand-ar {
  font-family: 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; color: var(--om-green); font-weight: 600;
  direction: rtl;
}

/* Primary nav */
.app-nav {
  display: flex; align-items: center; gap: var(--space-1);
}
.app-nav-link {
  position: relative;
  padding: 10px 14px;
  font-size: var(--fs-md); font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: color .15s, background .15s;
  text-decoration: none;
}
.app-nav-link:hover {
  color: var(--om-blue-deep);
  background: rgba(11,95,174,0.10);
  text-decoration: none;
}
.app-nav-link[aria-current="true"] {
  color: var(--om-blue-deep);
  background: rgba(11,95,174,0.10);
}
.app-nav-link[aria-current="true"]::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 3px;
  background: var(--om-blue);
  border-radius: 3px 3px 0 0;
}

.header-right { display: flex; align-items: center; gap: var(--space-2); }

#srvStatus {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg-tint);
  border-radius: var(--radius-pill);
}
#srvDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.header-user {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px 6px 6px;
  background: var(--bg-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.header-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--om-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  transition: all .15s;
}
.icon-btn:hover {
  border-color: var(--om-blue-deep);
  color: var(--om-blue-deep);
  background: rgba(11,95,174,0.10);
}
.header-logout-btn:hover {
  border-color: var(--om-blue) !important;
  background: var(--color-red-dim) !important;
  color: var(--om-blue) !important;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  align-items: center; justify-content: center;
  color: var(--text-secondary);
}

/* ── MAIN ── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Page transitions */
.page {
  display: none;
  flex-direction: column;
  flex: 1;
  animation: pageIn .35s cubic-bezier(0.4,0,0.2,1) forwards;
}
.page.active { display: flex; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page header (within pages) */
.page-header {
  padding: var(--space-6) var(--space-5) var(--space-5);
  max-width: 1280px; margin: 0 auto; width: 100%;
}
.page-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--om-blue); text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: var(--space-2);
}
.page-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-2xl); font-weight: 800;
  color: var(--om-blue-deep);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}
.page-subtitle {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  max-width: 640px;
}

/* ══════════════════════════════════════════════════════════════
   5. BUTTONS
══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition: all .15s ease;
  min-height: 46px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.btn:focus-visible {
  outline: 2px solid var(--om-gold);
  outline-offset: 3px;
}
.btn--full { width: 100%; }
.btn--lg { padding: 14px 28px; font-size: var(--fs-lg); min-height: 52px; }
.btn--sm { padding: 8px 14px; font-size: var(--fs-sm); min-height: 36px; }

/* Primary - Om red */
.btn--primary {
  background: var(--om-blue);
  color: #fff;
  box-shadow: 0 2px 0 var(--om-blue-deep);
}
.btn--primary:hover {
  background: var(--om-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #6a0717, 0 6px 16px rgba(11,95,174,.25);
}
.btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--om-blue-deep); }

/* Secondary - Om green */
.btn--secondary {
  background: var(--om-blue);
  color: #fff;
  box-shadow: 0 2px 0 var(--om-blue-deep);
}
.btn--secondary:hover {
  background: var(--om-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #074025, 0 6px 16px rgba(17,122,77,.25);
}

/* Outline - formal */
.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--om-blue-deep);
  color: var(--om-blue-deep);
  background: rgba(11,95,174,0.10);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover {
  background: var(--bg-tint);
  color: var(--text-primary);
}

/* Gold accent button */
.btn--gold {
  background: var(--om-gold);
  color: #2a1f00;
  box-shadow: 0 2px 0 #8a6f1a;
}
.btn--gold:hover {
  background: #b8932a;
  transform: translateY(-1px);
}

/* Social / google */
.btn--social {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn--social:hover {
  border-color: var(--border-strong);
  background: var(--bg-tint);
}

/* Guest */
.btn--guest {
  background: var(--om-green);
  color: #fff;
  box-shadow: 0 2px 0 var(--om-green-deep);
}
.btn--guest:hover { background: var(--om-green-deep); }

/* Disabled */
.btn:disabled, .btn[disabled] {
  opacity: .55; cursor: not-allowed; transform: none !important;
}

/* Button with arrow */
.btn-arrow { transition: transform .2s; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.loading .btn-spinner { display: inline-block; }
.btn.loading .btn-text, .btn.loading .btn-arrow { opacity: .4; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   6. CARDS
══════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-default);
}
.card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-xl); font-weight: 800;
  color: var(--om-blue-deep);
  margin-bottom: var(--space-2);
  letter-spacing: -0.3px;
}
.card-sub { color: var(--text-secondary); font-size: var(--fs-md); }


/* ══════════════════════════════════════════════════════════════
   7. FORM INPUTS - visible borders, white surface (fixes box bug)
══════════════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.form-label {
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.1px;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: var(--fs-md);
  color: var(--text-primary);
  background: #ffffff;
  border: 2px solid var(--om-blue);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(11,95,174,0.05), inset 0 1px 2px rgba(13,23,38,0.04);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
  background: #ffffff;
  color: var(--om-ink);
  border-color: var(--om-blue);
}
.form-input::placeholder,
.form-textarea::placeholder { color: #8892a8; }
.form-input:hover, .form-textarea:hover, .form-select:hover {
  border-color: var(--om-blue-deep);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--om-blue-deep);
  box-shadow: 0 0 0 3px rgba(11,95,174,.18);
  background: #ffffff;
}
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }

.form-input.valid {
  border-color: var(--om-green);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23117A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.form-input.invalid {
  border-color: var(--om-red);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

/* Input wrapper for password fields with eye toggle */
.input-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.input-wrapper .form-input { flex: 1; min-width: 0; }
.input-with-action { position: relative; }
.input-with-action .form-input { padding-right: 48px; }
.input-eye-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.input-eye-btn:hover { color: var(--om-blue); background: var(--color-accent-dim); }
.input-icon, .fi-icon { display: none !important; }

.field-error {
  font-size: var(--fs-xs);
  color: var(--om-red);
  font-weight: 600;
  min-height: 16px;
  margin-top: 2px;
}
.field-error:empty { display: none; }
.field-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  margin-left: auto;
}
.form-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Password strength bar */
.pw-strength-wrap { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pw-strength-track {
  flex: 1; height: 4px;
  background: var(--bg-tint);
  border-radius: 2px; overflow: hidden;
}
.pw-strength-bar {
  height: 100%; width: 0;
  background: var(--om-blue);
  border-radius: 2px;
  transition: width .25s, background .25s;
}
.pw-strength-bar.medium { background: var(--om-gold); }
.pw-strength-bar.strong { background: var(--om-green); }
.pw-strength-label {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted); min-width: 60px; text-align: right;
}


/* ══════════════════════════════════════════════════════════════
   8. LANDING PAGE - public marketing
══════════════════════════════════════════════════════════════ */
#landing-page {
  align-items: stretch; padding: 0; position: relative;
}

.landing-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 calc(var(--space-8) + var(--space-6));
  background:
    radial-gradient(800px 500px at 80% 20%, rgba(17,122,77,0.06), transparent 60%),
    radial-gradient(700px 400px at 10% 80%, rgba(11,95,174,0.06), transparent 60%),
    var(--bg-base);
}
.landing-hero::before {
  /* Subtle Arabesque-style pattern */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(11,95,174,.04) 1px, transparent 1.5px),
    radial-gradient(circle at 60px 60px, rgba(17,122,77,.04) 1px, transparent 1.5px);
  background-size: 80px 80px;
  pointer-events: none;
  opacity: .8;
}

.landing-hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.landing-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--om-blue-soft);
  color: var(--om-blue-deep);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(11,95,174,.15);
}
[data-theme="dark"] .landing-eyebrow {
  background: var(--color-red-dim);
  border-color: rgba(230,57,80,.3);
  color: #ff6680;
}
.landing-eyebrow::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--om-blue);
}
.landing-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(36px, 5vw, var(--fs-4xl));
  font-weight: 800; line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.landing-headline-accent {
  color: var(--om-blue);
  position: relative;
  display: inline-block;
}
.landing-headline-accent::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px; height: 6px;
  background: var(--om-gold);
  border-radius: 3px;
  opacity: .35;
}
.landing-sub {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: var(--space-5);
}
.landing-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.landing-trust {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.landing-trust-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.landing-trust-item svg { color: var(--om-green); }

/* Hero visual - official logo + floating cards */
.landing-visual {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-hero-logo {
  width: 340px;
  height: 340px;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(11,95,174,0.18));
  animation: heroLogoFloat 8s ease-in-out infinite;
  z-index: 1;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
.landing-card {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.landing-card-1 {
  width: 230px; top: 30px; left: -10px;
  animation: floatUp 6s ease-in-out infinite;
}
.landing-card-2 {
  width: 230px; bottom: 30px; right: -10px;
  animation: floatUp 6s ease-in-out infinite 1.5s;
}
.landing-card-3 {
  width: 260px; bottom: 0; left: 40px;
  animation: floatUp 6s ease-in-out infinite 3s;
}
@keyframes floatUp {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
.landing-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  font-size: 18px;
}
.lc-icon-red    { background: var(--om-red-soft); color: var(--om-red); }
.lc-icon-green  { background: var(--om-green-soft); color: var(--om-green); }
.lc-icon-gold   { background: var(--om-gold-soft); color: #8a6f1a; }
[data-theme="dark"] .lc-icon-red    { background: var(--color-red-dim); color: #ff6680; }
[data-theme="dark"] .lc-icon-green  { background: var(--color-green-dim); color: #30c98a; }
[data-theme="dark"] .lc-icon-gold   { background: rgba(212,175,63,.16); color: #d4af3f; }
.landing-card-title { font-weight: 700; font-size: var(--fs-md); color: var(--text-primary); margin-bottom: 4px; }
.landing-card-desc { font-size: var(--fs-xs); color: var(--text-muted); }

/* Features section */
.landing-features {
  padding: var(--space-8) 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.section-heading {
  text-align: center;
  margin-bottom: var(--space-6);
}
.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--om-blue);
  margin-bottom: var(--space-2);
}
.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--om-blue-deep);
  margin-bottom: var(--space-2);
}
.section-sub {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  max-width: 640px;
  margin: 0 auto;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.feature-card {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--om-blue);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  background: var(--om-blue-soft);
  color: var(--om-blue-deep);
}
[data-theme="dark"] .feature-icon { background: var(--color-green-dim); color: #30c98a; }
.feature-card:nth-child(2) .feature-icon { background: var(--om-gold-soft); color: #8a6f1a; }
[data-theme="dark"] .feature-card:nth-child(2) .feature-icon { background: rgba(212,175,63,.16); color: #d4af3f; }
.feature-card:nth-child(3) .feature-icon { background: var(--om-blue-soft); color: var(--om-blue); }
[data-theme="dark"] .feature-card:nth-child(3) .feature-icon { background: var(--color-red-dim); color: #ff6680; }
.feature-card:nth-child(4) .feature-icon { background: var(--om-blue-soft); color: var(--om-blue-deep); }
.feature-card:nth-child(5) .feature-icon { background: var(--om-gold-soft); color: #8a6f1a; }
.feature-card:nth-child(6) .feature-icon { background: rgba(13,23,38,.06); color: var(--om-ink); }

.feature-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--om-blue-deep);
  margin-bottom: 6px;
}
.feature-desc {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* CTA block */
.landing-cta {
  padding: var(--space-8) 0;
  text-align: center;
}
.landing-cta-card {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--om-blue), var(--om-blue-deep));
  color: #fff;
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(11,95,174,.25);
}
.landing-cta-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201,162,39,.18), transparent 50%);
  pointer-events: none;
}
.landing-cta-card h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-2xl); font-weight: 800;
  margin-bottom: var(--space-3);
  letter-spacing: -0.5px;
  position: relative;
}
.landing-cta-card p {
  font-size: var(--fs-lg); opacity: .9;
  margin-bottom: var(--space-5);
  position: relative;
}
.landing-cta-card .btn--primary {
  background: #fff; color: var(--om-blue);
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.landing-cta-card .btn--primary:hover {
  background: var(--om-gold-soft);
  color: var(--om-blue-deep);
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.landing-cta-card .btn--outline {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.5);
}
.landing-cta-card .btn--outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   9. AUTH PAGE - register/login (NEW formal layout)
══════════════════════════════════════════════════════════════ */
#login-page {
  position: relative;
  min-height: calc(100dvh - 76px);
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - 76px);
}

/* LEFT - Brand panel */
.auth-brand {
  position: relative; overflow: hidden;
  padding: var(--space-7) var(--space-7);
  background:
    linear-gradient(150deg, #06294f 0%, var(--om-blue-deep) 55%, var(--om-blue) 100%);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 4px solid var(--om-red);
}
.auth-brand::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(201,162,39,.18), transparent 55%);
  pointer-events: none;
}
.auth-brand::after {
  /* Faint pattern */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30px 30px, rgba(255,255,255,.04) 1px, transparent 1.5px);
  background-size: 60px 60px;
  pointer-events: none;
}

.auth-brand-logo {
  display: flex; align-items: center; gap: var(--space-3);
  position: relative;
  margin-bottom: var(--space-7);
}
.auth-brand-mark {
  width: 56px; height: 56px;
  background: #fff;
  color: var(--om-blue-deep);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  font-weight: 800; font-size: 18px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.auth-brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-xl); font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.auth-brand-ar {
  font-family: 'Noto Sans Arabic', sans-serif;
  font-size: var(--fs-md);
  color: var(--om-gold-soft);
  font-weight: 600;
  display: block;
  margin-top: 2px;
  direction: rtl;
}

.auth-brand-content { position: relative; max-width: 460px; }
.auth-brand-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.8px;
  margin-bottom: var(--space-4);
}
.auth-brand-tag {
  font-size: var(--fs-lg);
  opacity: .92;
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.auth-brand-features {
  display: flex; flex-direction: column; gap: var(--space-4);
  position: relative;
}
.auth-brand-feature {
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.auth-brand-feature-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-brand-feature-text strong {
  display: block; font-weight: 700; font-size: var(--fs-md);
  margin-bottom: 2px;
}
.auth-brand-feature-text span {
  font-size: var(--fs-sm);
  opacity: .85;
}

.auth-brand-footer {
  position: relative;
  font-size: var(--fs-xs);
  opacity: .8;
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.auth-brand-footer-strip {
  display: flex; gap: 4px;
}
.auth-brand-footer-strip span {
  display: block; width: 28px; height: 4px; border-radius: 2px;
}
.auth-brand-footer-strip span:nth-child(1) { background: #fff; }
.auth-brand-footer-strip span:nth-child(2) { background: var(--om-red); }
.auth-brand-footer-strip span:nth-child(3) { background: var(--om-green); }

/* RIGHT - Form side */
.auth-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-5);
  background: var(--bg-base);
  overflow-y: auto;
}
.auth-form-wrap {
  width: 100%;
  max-width: 440px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
}
.auth-form-heading {
  margin-bottom: var(--space-5);
}
.auth-form-heading h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--om-blue-deep);
  letter-spacing: -0.5px;
  margin-bottom: var(--space-1);
}
.auth-form-heading p {
  color: var(--text-secondary);
  font-size: var(--fs-md);
}

/* Tabs */
.auth-tabs {
  display: flex; gap: 0;
  background: var(--bg-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: var(--space-5);
}
.auth-tab {
  flex: 1;
  padding: 10px 8px;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all .15s;
}
.auth-tab:hover:not(.active) { color: var(--text-primary); }
.auth-tab.active {
  background: var(--bg-surface);
  color: var(--om-blue-deep);
  box-shadow: 0 1px 3px rgba(13,23,38,.08);
}
.auth-panel { display: none; animation: pageIn .25s ease; position: relative; z-index: 1; }
.auth-panel.active { display: block; }

.login-form { display: flex; flex-direction: column; gap: var(--space-4); position: relative; z-index: 1; }
.form-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.form-label-row .form-label { margin-bottom: 0; }
.forgot-link {
  font-size: var(--fs-xs);
  color: var(--om-blue);
  font-weight: 600;
}
.forgot-link:hover { text-decoration: underline; }

/* OR divider */
.or-divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.or-divider span:not(.or-text) {
  flex: 1; height: 1px;
  background: var(--border-default);
}

/* Social row */
.social-btns { display: flex; gap: var(--space-3); }
.social-btns .btn--social {
  flex: 1; padding: 11px 12px; min-height: 44px;
}
.btn-google-icon { width: 18px; height: 18px; }

/* Guest section */
.lc-guest { margin-top: var(--space-4); }
.lc-terms {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.lc-link { color: var(--om-blue); font-weight: 600; }
.lc-link:hover { text-decoration: underline; }

.auth-switch {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.auth-switch a { color: var(--om-blue); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   10. FOOTER
══════════════════════════════════════════════════════════════ */
.app-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-6) 0 var(--space-5);
  margin-top: auto;
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.footer-col h4 {
  font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.footer-col ul a:hover { color: var(--om-blue-deep); }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.footer-tag { color: var(--text-secondary); font-size: var(--fs-sm); max-width: 320px; line-height: 1.6; }
.footer-bottom {
  max-width: 1280px; margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-3);
  color: var(--text-muted); font-size: var(--fs-xs);
}


/* ══════════════════════════════════════════════════════════════
   11. SIGN-TO-SPEECH PAGE
══════════════════════════════════════════════════════════════ */
.s2s-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-7);
  width: 100%;
}
.s2s-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.s2s-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-lg); font-weight: 800;
  margin-bottom: var(--space-3);
  color: var(--om-blue-deep);
  display: flex; align-items: center; gap: var(--space-2);
}
.s2s-card h3::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--om-blue);
  border-radius: 2px;
}

/* Video frame */
.video-frame {
  position: relative;
  background: var(--vf-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  border: 1px solid var(--border-default);
}
.video-frame video,
.video-frame canvas {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-corner {
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid var(--vf-corner-color);
}
.vc-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.vc-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.vc-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.vc-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.5));
  padding: var(--space-4);
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}

.action-row {
  display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4);
}

/* Result panel */
.result-text {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 120px;
  font-size: var(--fs-lg);
  color: var(--text-primary);
  line-height: 1.6;
}
.result-meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-3);
  color: var(--text-muted); font-size: var(--fs-xs);
}
.result-meta-item { display: inline-flex; align-items: center; gap: 6px; }


/* ══════════════════════════════════════════════════════════════
   12. SPEECH-TO-SIGN PAGE
══════════════════════════════════════════════════════════════ */
.sp2s-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-5);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-7);
  width: 100%;
}
.avatar-stage {
  background: var(--vf-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}
.avatar-stage img,
.avatar-stage canvas,
.avatar-stage video {
  width: 100%; height: 100%; object-fit: contain;
}

/* ══════════════════════════════════════════════════════════════
   13. HISTORY PAGE
══════════════════════════════════════════════════════════════ */
.history-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-7);
  width: 100%;
}
.history-toolbar {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-5);
  align-items: center;
}
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--om-blue); color: var(--om-blue); }
.chip.active {
  background: var(--om-blue); color: #fff; border-color: var(--om-blue);
}
.history-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
}
.history-item:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}
.history-type-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--om-blue-soft);
  color: var(--om-blue);
  font-size: 18px;
}
[data-theme="dark"] .history-type-icon { background: var(--color-red-dim); color: #ff6680; }
.history-content { min-width: 0; }
.history-text {
  font-weight: 600; color: var(--text-primary);
  font-size: var(--fs-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-meta {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   14. SETTINGS PAGE
══════════════════════════════════════════════════════════════ */
.settings-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-7);
  width: 100%;
}
.settings-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.settings-section h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-lg); font-weight: 800;
  margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--text-primary);
}
.settings-section h3::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--om-blue);
  border-radius: 2px;
}
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-weight: 600; color: var(--text-primary); font-size: var(--fs-md); }
.settings-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle-track {
  position: relative; width: 44px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  transition: background .2s;
  flex-shrink: 0;
}
.toggle-input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.toggle-input:checked ~ .toggle-knob { transform: translateX(20px); }
.toggle-input:checked + .toggle-track,
.toggle-track:has(.toggle-input:checked) { background: var(--om-blue); }


/* ══════════════════════════════════════════════════════════════
   15. MODAL / DIALOG
══════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,23,38,.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 480px; width: 100%;
  box-shadow: var(--shadow-lg);
}
.modal h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-xl); font-weight: 800;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

/* Toast */
.toast {
  position: fixed; top: 90px; right: 20px; z-index: 2000;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--om-blue);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  max-width: 360px;
  animation: toastIn .25s ease;
}
.toast.success { border-left-color: var(--om-blue); }
.toast.warn    { border-left-color: var(--om-gold); }
.toast.error   { border-left-color: var(--om-red); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ══════════════════════════════════════════════════════════════
   16. RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand {
    display: none;
  }
  .landing-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .landing-trust, .landing-actions { justify-content: center; }
  .landing-sub { margin-left: auto; margin-right: auto; }
  .landing-visual { height: 320px; }
  .landing-card { display: none; }
  .landing-hero-logo { width: 260px; height: 260px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .s2s-layout, .s2s-grid, .sp2s-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-inner { padding: 0 var(--space-3); height: 64px; }
  .app-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand-name { font-size: 16px; }
  .brand-ar { font-size: 11px; }
  .brand-mark { width: 38px; height: 38px; font-size: 14px; }
  #srvStatus { display: none; }

  .page-header { padding: var(--space-5) var(--space-3) var(--space-4); }
  .page-title { font-size: 24px; }
  .landing-headline { font-size: 32px; }

  .footer-inner { grid-template-columns: 1fr; gap: var(--space-4); }

  .auth-form-side { padding: var(--space-4) var(--space-3); }

  .modal { padding: var(--space-4); }
}

/* Mobile nav drawer */
.mobile-nav-drawer {
  position: fixed; top: 76px; left: 0; right: 0; z-index: 90;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3);
  display: none;
  flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-md);
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer .app-nav-link {
  padding: 12px 16px;
  border-radius: var(--radius-md);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Print */
@media print {
  .app-header, .app-footer, .icon-btn, .btn { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   17. LEGACY INNER-PAGE STYLES - restyle existing markup
══════════════════════════════════════════════════════════════ */
.s2s-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-5);
  max-width: 1280px; width: 100%;
  margin: 0 auto;
  padding: var(--space-5);
}
.s2s-cam-col { display: flex; flex-direction: column; gap: var(--space-4); }

.viewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--vf-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.vf-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 3px solid var(--vf-corner-color);
  z-index: 4; pointer-events: none;
}
.vf-corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.vf-corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.vf-corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.vf-corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.vf-scanline { display: none; }
.vf-dotgrid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1.2px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 3;
}
.vf-guide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px; text-align: center; z-index: 5;
  color: rgba(255,255,255,.85);
  pointer-events: none;
}
.vf-guide-icon { font-size: 56px; opacity: .85; }
.vf-guide-title { font-size: 16px; font-weight: 700; }
.vf-guide-sub { font-size: 13px; opacity: .65; }
.vf-badge {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,.6); color: #fff;
  backdrop-filter: blur(8px);
}
.vf-rec-badge {
  top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--om-red);
  text-transform: uppercase; letter-spacing: 1px;
}
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: recPulse 1s ease-in-out infinite; }
@keyframes recPulse { 50% { opacity: .3; } }
.rec-timer { font-variant-numeric: tabular-nums; }
.vf-quality-badge { top: 14px; right: 60px; background: rgba(0,0,0,.55); }

.translation-overlay {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 6;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78));
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: #fff;
  backdrop-filter: blur(10px);
}
.tl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tl-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; opacity: .8; }
.live-indicator { position: relative; width: 12px; height: 12px; }
.live-dot { position: absolute; inset: 3px; background: var(--om-blue); border-radius: 50%; }
.live-ring { position: absolute; inset: 0; border: 1px solid rgba(26,166,108,.6); border-radius: 50%; animation: liveRing 1.4s ease-out infinite; }
.live-ring--2 { animation-delay: .7s; }
@keyframes liveRing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.tl-text { font-size: 18px; font-weight: 700; line-height: 1.3; }

.action-bar {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.action-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 60px; height: 60px;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600;
  transition: all .15s;
  cursor: pointer;
}
.action-btn:hover { border-color: var(--om-blue); color: var(--om-blue); background: rgba(11,95,174,0.10); }
.action-btn-icon { color: inherit; }
.action-btn-label { font-size: 10px; font-weight: 700; }
.action-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); }

.record-btn {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--om-red);
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(200,16,46,.35), 0 0 0 4px rgba(200,16,46,.15);
  transition: all .2s;
}
.record-btn:hover { transform: scale(1.05); }
.record-btn[aria-pressed="true"] { background: #2a2a2a; }
.record-btn[aria-pressed="true"] .record-inner {
  width: 24px; height: 24px;
  border-radius: 4px;
  background: var(--om-red);
}
.record-inner {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent;
  transition: all .25s;
}
.record-ring {
  position: absolute; inset: -4px;
  border: 2px solid rgba(200,16,46,.4);
  border-radius: 50%;
  opacity: 0;
}
.record-btn[aria-pressed="true"] .record-ring { opacity: 1; animation: recRing 1.6s ease-out infinite; }
.record-ring--2 { animation-delay: .8s !important; }
@keyframes recRing { to { transform: scale(1.5); opacity: 0; } }

.s2s-output-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  max-height: 720px;
  overflow: hidden;
}
.op-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-3);
}
.op-header-left { display: flex; align-items: center; gap: 8px; }
.op-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); }
.op-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--om-blue); box-shadow: 0 0 8px rgba(26,166,108,.6); }
.op-autospeak { display: flex; align-items: center; gap: 8px; }
.op-autospeak-status { font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-2); min-height: 14px; }

.op-top-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.op-top-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--om-ink); letter-spacing: -0.3px; }
.op-top-en { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.op-speak-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--om-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 0 var(--om-blue-deep);
  transition: all .15s;
}
.op-speak-btn:hover { background: var(--om-blue-deep); transform: translateY(-1px); }
.play-waveform { display: none; gap: 2px; }
.pw-bar { width: 3px; background: #fff; border-radius: 1px; animation: pwBar .9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .12s); height: 12px; }
.op-speak-btn.playing .play-waveform { display: flex; }
.op-speak-btn.playing #play-icon { display: none; }
@keyframes pwBar { to { height: 22px; } }

.op-section-hdr { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; }
.op-clear-btn {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-base);
  cursor: pointer;
  transition: all .15s;
}
.op-clear-btn:hover { border-color: var(--om-blue); color: var(--om-blue); }

.op-top5 { display: flex; flex-direction: column; gap: 6px; }
.op-skel-row { height: 36px; border-radius: var(--radius-sm); background: var(--bg-tint); animation: skelPulse 1.5s ease-in-out infinite; }
@keyframes skelPulse { 50% { opacity: .5; } }
.op-pred-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.op-pred-row strong { color: var(--text-primary); font-weight: 700; }
.op-pred-bar { flex: 1; height: 4px; background: var(--bg-tint); border-radius: 2px; overflow: hidden; }
.op-pred-bar-fill { height: 100%; background: var(--om-blue); border-radius: 2px; }
.op-pred-row:nth-child(2) .op-pred-bar-fill { background: var(--om-gold); }
.op-pred-row:nth-child(3) .op-pred-bar-fill { background: var(--om-ink); opacity: .5; }
.op-pred-pct { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 700; }

.op-hist-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.op-hist-empty { padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: 13px; }
.op-hist-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.op-hist-row span:first-child { color: var(--text-primary); font-weight: 600; }
.op-hist-row span:last-child { color: var(--text-muted); font-size: 11px; }

.infer-ring { background: var(--om-blue) !important; box-shadow: 0 0 10px var(--om-blue); }
#upProg { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-md); margin-top: 8px; }
#upFill { background: linear-gradient(90deg, var(--om-blue), var(--om-gold)) !important; }

/* Speech-to-Sign layout when .active */
#speech-to-sign-page.active {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-5);
  max-width: 1280px; width: 100%;
  margin: 0 auto;
  padding: var(--space-5);
}
@media (max-width: 980px) { #speech-to-sign-page.active { grid-template-columns: 1fr; } }

.avatar-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.avatar-display { position: relative; background: var(--vf-bg); aspect-ratio: 1/1; overflow: hidden; }
.avatar-grid-overlay { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.2px); background-size: 28px 28px; }
.avatar-figure { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.av-head { font-size: 64px; }
.av-body { position: relative; height: 80px; width: 160px; }
.av-arm { position: absolute; font-size: 40px; transition: transform .3s ease; }
.av-arm--l { left: 0; transform-origin: top right; }
.av-arm--r { right: 0; transform-origin: top left; }

.avatar-status-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-tint);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-secondary);
}
.av-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.av-status-dot.active { background: var(--om-blue); animation: dotPulse 1.4s ease infinite; }
@keyframes dotPulse { 50% { opacity: .4; } }

.speed-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
}
.speed-bar-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.speed-pills { display: flex; gap: 4px; }
.speed-pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.speed-pill:hover { border-color: var(--om-blue); color: var(--om-blue); }
.speed-pill.active { background: var(--om-blue); color: #fff; border-color: var(--om-blue); }

#wordQueue { background: var(--bg-tint) !important; border-top: 1px solid var(--border-subtle) !important; }

.input-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.input-tabs {
  display: flex; gap: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px;
}
.tab-btn {
  flex: 1; padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  transition: all .15s;
}
.tab-btn:hover:not(.active) { color: var(--text-primary); }
.tab-btn.active { background: var(--bg-surface); color: var(--om-blue-deep); box-shadow: 0 1px 3px rgba(13,23,38,.08); }
.tab-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.tab-panel.hidden { display: none; }

.mic-section { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.mic-btn {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--om-blue-deep); color: #fff;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(17,122,77,.30);
  transition: all .2s;
}
.mic-btn:hover { transform: scale(1.05); }
.mic-btn[aria-pressed="true"] { background: var(--om-blue); box-shadow: 0 4px 16px rgba(11,95,174,.40); }
.mic-ring { position: absolute; inset: 0; border: 2px solid rgba(17,122,77,.5); border-radius: 50%; opacity: 0; }
.mic-btn[aria-pressed="true"] .mic-ring { opacity: 1; animation: micRing 2s ease-out infinite; border-color: rgba(11,95,174,.5); }
.mr--2 { animation-delay: .65s !important; }
.mr--3 { animation-delay: 1.3s !important; }
@keyframes micRing { to { transform: scale(1.6); opacity: 0; } }
.mic-glyph { position: relative; z-index: 2; }
.mic-status-text { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

.waveform { display: flex; align-items: center; gap: 3px; height: 40px; }
.wv-bar { width: 3px; height: 40%; background: var(--om-blue); border-radius: 1px; animation: wvBar 1s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes wvBar { from { transform: scaleY(.4); } to { transform: scaleY(1); } }

#sttBox {
  background: var(--bg-base) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  backdrop-filter: none !important;
  min-height: 56px !important;
}

.sg-select {
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  min-height: 44px;
  cursor: pointer;
}
.sg-select:focus { outline: none; border-color: var(--om-blue); box-shadow: 0 0 0 3px rgba(11,95,174,0.10); }

.kbd-section { display: flex; flex-direction: column; gap: var(--space-3); padding: 4px; }
.heard-box {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}
.heard-label { font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; margin-right: 6px; }
.heard-text { color: var(--text-primary); font-weight: 600; }

#settings-page.active { display: flex !important; flex-direction: column; }
.settings-scroll {
  max-width: 880px; width: 100%;
  margin: 0 auto;
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.settings-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.sg-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.sg-icon { font-size: 20px; }
.sg-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; color: var(--om-blue-deep); }
.sg-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.sg-row:last-child { border-bottom: none; padding-bottom: 0; }
.sg-row--between { justify-content: space-between; }
.sg-row--col { flex-direction: column; align-items: stretch; }
.sg-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sg-desc { display: block; font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.sg-value { font-size: 13px; font-weight: 700; color: var(--text-secondary); }

.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-sm-a { font-size: 12px; color: var(--text-muted); }
.slider-lg-a { font-size: 18px; color: var(--text-muted); font-weight: 700; }
.sg-slider {
  flex: 1; height: 4px;
  background: var(--bg-tint);
  border-radius: 2px;
  -webkit-appearance: none; appearance: none;
}
.sg-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--om-blue);
  cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sg-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--om-blue); border: 2px solid #fff; cursor: pointer; }
.slider-out { font-size: 13px; font-weight: 700; color: var(--om-blue-deep); min-width: 50px; text-align: right; }

.seg-ctrl {
  display: flex; gap: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
}
.seg-btn { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; color: var(--text-muted); transition: all .15s; }
.seg-btn:hover:not(.active) { color: var(--text-primary); }
.seg-btn.active { background: var(--bg-surface); color: var(--om-blue-deep); box-shadow: 0 1px 3px rgba(13,23,38,.08); }

.accent-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.accent-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sw);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .15s;
}
.accent-swatch:hover { transform: scale(1.1); }
.accent-swatch.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text-primary); }

#history-page.active { display: flex !important; flex-direction: column; }
.hist-container {
  max-width: 1100px; width: 100%;
  margin: 0 auto;
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.hist-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-num { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 36px; font-weight: 800; color: var(--om-blue-deep); letter-spacing: -1px; line-height: 1; }
.stat-card:nth-child(2) .stat-num { color: var(--om-gold); }
.stat-card:nth-child(3) .stat-num { color: var(--om-ink); }
.stat-label { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

.hist-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.hist-filters { display: flex; gap: 6px; }
.filter-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover { border-color: var(--om-blue); color: var(--om-blue); }
.filter-btn.active { background: var(--om-blue); color: #fff; border-color: var(--om-blue); }

.hist-list { display: flex; flex-direction: column; gap: var(--space-2); }
.hist-empty {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}
.hist-empty-icon { display: block; font-size: 40px; margin-bottom: 8px; opacity: .6; }

.hist-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  transition: border-color .15s;
}
.hist-item:hover { border-color: var(--border-default); }
.hist-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--om-blue-soft);
  color: var(--om-blue-deep);
  font-size: 16px;
}
[data-theme="dark"] .hist-icon { background: var(--color-green-dim); color: #30c98a; }
.hist-icon.sp2s { background: var(--om-blue-soft); color: var(--om-blue); }
[data-theme="dark"] .hist-icon.sp2s { background: var(--color-green-dim); color: #30c98a; }
.hist-text { font-weight: 600; color: var(--text-primary); }
.hist-time { font-size: 11px; color: var(--text-muted); }
.hist-del {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.hist-del:hover { color: var(--om-red); border-color: var(--om-red); background: var(--om-red-soft); }

.sg-row .toggle-wrap { gap: 0; }
.sg-row .toggle-track { background: var(--border-strong); }
.sg-row .toggle-track:has(.toggle-input:checked) { background: var(--om-blue); }

/* ── Hide legacy bottom-nav (replaced by top nav) ── */
.bottom-nav { display: none !important; }
body:has(.bottom-nav:not([hidden])) .main-content { padding-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   MOBILE - extra polish for phones (≤ 720 / ≤ 480)
══════════════════════════════════════════════════════════════ */

/* Prevent iOS Safari from zooming the page when focusing an input */
@media (max-width: 720px) {
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Touch-friendly tap targets */
  .btn,
  .input-eye-btn,
  .auth-tab,
  .app-nav-link,
  .menu-toggle,
  .header-btn {
    min-height: 44px;
  }
}

/* Phones: tighter spacing so the form actually fits */
@media (max-width: 480px) {
  /* Page padding everywhere shrinks */
  .header-inner { padding: 0 12px; height: 60px; }
  .page-header { padding: 16px 12px 12px; }
  .page-title  { font-size: 22px; }

  /* Auth screen - give the card almost the full width */
  .auth-form-side  { padding: 16px 10px; }
  .auth-form-wrap  {
    padding: 20px 18px;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .auth-form-heading h2 { font-size: 22px; }
  .auth-form-heading p  { font-size: 14px; }
  .auth-tabs { padding: 3px; margin-bottom: 18px; }
  .auth-tab  { padding: 10px 6px; font-size: 13px; }
  .login-form { gap: 14px; }
  .form-group { margin-bottom: 12px; }

  /* Landing page hero on small screens */
  .landing-headline    { font-size: 26px; line-height: 1.2; }
  .landing-hero-inner  { gap: 20px; }
  .landing-hero-logo   { width: 200px; height: 200px; }
  .landing-actions     { flex-direction: column; gap: 10px; }
  .landing-actions .btn { width: 100%; }

  /* Footer collapses to a single column already at 720, just tighten */
  .footer-inner   { padding: 0 16px; gap: 16px; }

  /* Modals shouldn't overflow */
  .modal {
    padding: 12px !important;
    align-items: flex-start;
  }
  .modal-content,
  .modal-card,
  .modal-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    border-radius: 14px;
  }

  /* Mobile-nav drawer covers more screen comfortably */
  .mobile-nav-drawer { padding: 10px 12px; }

  /* Toast positioning so it doesn't get cut off */
  .toast { left: 12px !important; right: 12px !important; max-width: none !important; }

  /* Forms in app pages */
  .card,
  .panel,
  .settings-card { padding: 16px !important; }

  /* Two-column grids collapse */
  .two-col,
  .three-col,
  .form-row-2 { grid-template-columns: 1fr !important; }
}

/* Stop horizontal scrollbars caused by oversized children */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, canvas { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════
   Oman flag stripe - simple horizontal bar (white / red / green)
══════════════════════════════════════════════════════════════ */
.om-flag-bar {
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    #ffffff 0 33.3%,
    #C8102E 33.3% 66.6%,
    #117A4D 66.6% 100%);
  box-shadow: 0 0 0 1px var(--border-default);
}

/* ══════════════════════════════════════════════════════════════
   S2S / SP2S pages - phone polish
══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Tight grid padding so the viewfinder uses screen width */
  .s2s-layout,
  #speech-to-sign-page.active {
    padding: 12px;
    gap: 12px;
  }

  /* Viewfinder: 4:3 fits a phone screen much better than 16:10 */
  .viewfinder { aspect-ratio: 4/3; border-radius: 12px; }
  .vf-corner { width: 18px; height: 18px; border-width: 2px; }
  .vf-corner--tl { top: 8px;    left: 8px; }
  .vf-corner--tr { top: 8px;    right: 8px; }
  .vf-corner--bl { bottom: 8px; left: 8px; }
  .vf-corner--br { bottom: 8px; right: 8px; }
  .vf-guide        { padding: 16px; gap: 6px; }
  .vf-guide-icon   { font-size: 40px; }
  .vf-guide-title  { font-size: 14px; }
  .vf-guide-sub    { font-size: 11px; }
  .vf-rec-badge    { top: 8px; padding: 4px 10px; font-size: 11px; }
  .vf-quality-badge{ top: 8px; right: 8px; padding: 4px 8px; font-size: 10px; }
  .translation-overlay { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; }
  .tl-label { font-size: 9px; letter-spacing: 1px; }
  .tl-text  { font-size: 14px; }

  /* Action bar: smaller buttons, tighter gap */
  .action-bar {
    gap: 16px;
    padding: 12px;
    border-radius: 12px;
  }
  .action-btn { width: 52px; height: 52px; }
  .action-btn-icon { width: 18px; height: 18px; }
  .action-btn-label { font-size: 9px; }
  .record-btn {
    width: 64px; height: 64px;
    border-width: 3px;
  }
  .record-inner { width: 38px; height: 38px; }
  .record-btn[aria-pressed="true"] .record-inner { width: 20px; height: 20px; }

  /* Output panel: drop the rigid 720px cap so it flows on phones */
  .s2s-output-panel {
    max-height: none;
    overflow: visible;
    padding: 14px;
    border-radius: 12px;
  }
  .op-header { padding-bottom: 10px; margin-bottom: 10px; }
  .op-top-card  { padding: 12px; }
  .op-top-name  { font-size: 18px; }
  .op-top-en    { font-size: 12px; }
  .op-speak-btn { width: 44px; height: 44px; font-size: 16px; }
  .op-hist-list { max-height: 260px; }

  /* Page header: tighter */
  .page-header   { padding: 16px 12px 10px; }
  .page-eyebrow  { font-size: 10px; }
  .page-title    { font-size: 22px; }
  .page-subtitle { font-size: 13px; }
}

@media (max-width: 480px) {
  .s2s-layout,
  #speech-to-sign-page.active { padding: 10px; gap: 10px; }
  .action-bar  { gap: 12px; padding: 10px; }
  .action-btn  { width: 48px; height: 48px; }
  .record-btn  { width: 60px; height: 60px; }
  .record-inner { width: 32px; height: 32px; }
  .s2s-output-panel { padding: 12px; }
  .op-top-name { font-size: 16px; }
  .page-title  { font-size: 20px; }
}

/* On phones force cam-col (camera + record button) to come BEFORE
   the output panel (prediction + auto-speak) regardless of source.
   Also collapse the grid to a single column here - the desktop
   .s2s-layout rule is declared later in the file, so this late
   override is what actually wins on mobile. */
@media (max-width: 980px) {
  .s2s-layout, .sp2s-layout { grid-template-columns: 1fr; }
  .s2s-cam-col      { order: 1; }
  .s2s-output-panel { order: 2; }
  /* Stick the output panel directly under the record section visually */
  .s2s-output-panel {
    margin-top: -4px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(13,23,38,0.05);
  }
}

/* ══════════════════════════════════════════════════════════════
   HELP CHAT WIDGET (Ollama-backed)
══════════════════════════════════════════════════════════════ */
.chat-widget {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.chat-bubble {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--om-blue, #0b5fae); color: #fff;
  border: none; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(11,95,174,.35);
  font-weight: 700; font-size: 14px; cursor: pointer;
  font-family: inherit;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.chat-bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,95,174,.4); }
.chat-bubble[aria-expanded="true"] { background: var(--om-blue-deep, #094d8e); }
.chat-bubble-label { font-size: 14px; }

.chat-panel {
  position: absolute;
  right: 0; bottom: 60px;
  width: 340px; max-width: calc(100vw - 32px);
  height: 460px; max-height: calc(100vh - 120px);
  background: #fff;
  border: 1px solid var(--border-default, #dfe5ee);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(13,23,38,.18);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: chatPop .18s ease-out;
}
@keyframes chatPop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f4f8ff, #fff);
  border-bottom: 1px solid var(--border-default, #dfe5ee);
}
.chat-header-title { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--om-ink, #0d1726); }
.chat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1e8a4c; box-shadow: 0 0 0 3px rgba(30,138,76,.18);
}
.chat-close {
  background: none; border: none;
  font-size: 16px; color: var(--text-muted, #56627a);
  cursor: pointer; padding: 2px 6px; line-height: 1;
}
.chat-close:hover { color: var(--om-ink, #0d1726); }

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: #fafbfd;
}
.chat-msg { display: flex; }
.chat-msg--bot  { justify-content: flex-start; }
.chat-msg--user { justify-content: flex-end; }
.chat-msg-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.45;
  word-wrap: break-word; white-space: pre-wrap;
}
.chat-msg--bot  .chat-msg-bubble { background: #eef2f9; color: var(--om-ink, #0d1726); border-bottom-left-radius: 4px; }
.chat-msg--user .chat-msg-bubble { background: var(--om-blue, #0b5fae); color: #fff; border-bottom-right-radius: 4px; }
.chat-typing { opacity: .7; font-style: italic; }

.chat-form {
  display: flex; gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-default, #dfe5ee);
  background: #fff;
}
.chat-input {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px; font-family: inherit;
  border: 1px solid var(--border-default, #dfe5ee);
  border-radius: 10px;
  background: #fff;
}
.chat-input:focus { outline: none; border-color: var(--om-blue, #0b5fae); box-shadow: 0 0 0 3px rgba(11,95,174,.15); }
.chat-send {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--om-blue, #0b5fae); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.chat-send:hover { background: var(--om-blue-deep, #094d8e); }

@media (max-width: 480px) {
  .chat-widget { right: 12px; bottom: 12px; }
  .chat-bubble { padding: 10px 14px; font-size: 13px; }
  .chat-panel {
    width: calc(100vw - 24px);
    height: 70vh; max-height: 70vh;
    bottom: 56px;
  }
  .chat-input, .chat-send { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   VOICE API MODAL (ElevenLabs key - replaces Settings page)
══════════════════════════════════════════════════════════════ */
.header-voice-btn svg { display: block; }

.vm-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(8, 14, 24, 0.55);
  backdrop-filter: blur(3px);
}
.vm-overlay[hidden] { display: none; }
.vm-dialog {
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-default, #dfe5ee);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(8, 14, 24, 0.35);
  padding: 22px 22px 20px;
  animation: vmPop .18s ease-out;
}
@keyframes vmPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.vm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.vm-title { margin: 0; font-size: 19px; font-weight: 800; color: var(--om-ink, #0d1726); }
.vm-close {
  background: none; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--text-muted, #56627a);
  padding: 4px 8px; border-radius: 8px;
}
.vm-close:hover { color: var(--om-ink, #0d1726); background: var(--bg-tint, #eef2f9); }
.vm-sub { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary, #56627a); line-height: 1.5; }
.vm-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.vm-label { font-size: 13px; font-weight: 700; color: var(--om-ink, #0d1726); }
.vm-desc { font-weight: 500; font-size: 11px; color: var(--text-muted, #56627a); margin-left: 6px; }
.vm-dialog .sg-select {
  width: 100%; min-height: 44px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border-default, #dfe5ee);
  border-radius: 10px; background: #fff; color: var(--om-ink, #0d1726);
}

@media (max-width: 480px) {
  .vm-dialog { padding: 18px 16px; border-radius: 14px; }
  .vm-title { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════
   ARABIC / RTL SUPPORT  (appended last so it overrides earlier rules)
   Toggled by i18n.js: <html dir="rtl" lang="ar"> + <body class="lang-ar">
══════════════════════════════════════════════════════════════ */

/* Language toggle button in the header */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1.5px solid var(--om-blue, #0b5fae);
  border-radius: 999px; background: #fff;
  color: var(--om-blue, #0b5fae);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.lang-toggle:hover { background: var(--om-blue, #0b5fae); color: #fff; }
.lang-toggle:active { transform: scale(.96); }
.lang-toggle svg { flex: 0 0 auto; }
.lang-toggle #lang-toggle-label { font-weight: 800; letter-spacing: .2px; }

/* Use the Arabic webfont for the whole UI while Arabic is active */
body.lang-ar {
  font-family: 'Noto Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Mirror directional iconography so arrows point with the reading flow */
[dir="rtl"] .btn-arrow,
[dir="rtl"] .lc-submit-btn .btn-arrow { transform: scaleX(-1); }

/* Numeric/Latin-only fields stay LTR even inside an RTL page */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[dir="ltr"],
[dir="rtl"] .rec-timer,
[dir="rtl"] .stat-num { direction: ltr; }

/* Keep the auth/email inputs left-aligned for Latin entry */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"] { text-align: right; }

/* Toast slides from the correct edge */
[dir="rtl"] .toast { left: 20px; right: auto; border-left: none; border-right: 4px solid var(--om-blue); }

/* Help-chat widget stays bottom-right in RTL too, so its pop-up panel
   (anchored right:0) never opens off the left edge of the screen. */
[dir="rtl"] .chat-widget { right: 20px; left: auto; }
[dir="rtl"] .chat-panel { right: 0; left: auto; }