:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0f766e;
  /* Bootstrap-like theme variables (adjustable) */
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15,118,110;
  --bs-primary-dark: #065f46;
  --bs-primary-dark-rgb: 6,95,70;
  --success:#16a34a;
  --danger:#ef4444;
  --glass: rgba(255,255,255,0.6);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#eef2f6);
  font-family:var(--font, 'Inter');
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:2rem;
}
.card{
  width:100%;
  max-width:760px;
  background:var(--card);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(2,6,23,0.08);
  padding:1.25rem 1.5rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:56px;height:auto;border-radius:8px;object-fit:contain}
.brand-text{display:flex;flex-direction:column}
.card-header h1{margin:0;font-size:1.25rem}
.card-header p{margin:2px 0 0;color:var(--muted);font-size:0.95rem}
.lang-toggle{display:flex;gap:8px}
.lang-btn{background:transparent;border:1px solid transparent;padding:6px 8px;border-radius:8px;cursor:pointer;font-weight:600}
.lang-btn.active{background:linear-gradient(90deg,#f1fdfb,#eefefc);border-color:rgba(15,118,110,0.08)}

.form{display:grid;gap:12px}
.field{display:flex;flex-direction:column}
.label{font-size:0.9rem;color:var(--muted);margin-bottom:6px}
select,input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e6e9ef;font-size:1rem;outline:none;transition:border-color .12s, box-shadow .12s}
select:focus,input:focus{border-color:var(--accent);box-shadow:0 6px 18px rgba(15,118,110,0.06)}
.actions{display:flex;justify-content:flex-end;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn.primary{background-image:linear-gradient(90deg, rgb(var(--bs-primary-rgb)), rgb(var(--bs-primary-dark-rgb)));color:#fff}

/* Bootstrap-like utility: bg-primary */
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity)) !important;
}

/* Additional Bootstrap-like utilities */
.text-primary{color: rgb(var(--bs-primary-rgb)) !important}
.border-primary{border-color: rgb(var(--bs-primary-rgb)) !important}
.btn.primary:hover{filter:brightness(.96);transform:translateY(-1px);transition:all .12s ease}
.btn.primary:active{transform:translateY(0)}
.text-muted{color:var(--muted)}
.btn .spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);border-top-color:rgba(255,255,255,0.9);opacity:0;transform:scale(.9);transition:opacity .12s,transform .12s}
.btn.loading .spinner{opacity:1;transform:scale(1);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.error{color:var(--danger);font-size:0.85rem;margin-top:6px;min-height:1.1em}

.result{margin-top:16px;padding:14px;border-radius:12px;border:1px solid transparent;transition:all .18s ease;display:flex;justify-content:center}
.result-content{display:flex;align-items:center;gap:14px}
.result .icon{width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.result .message{font-weight:600}

.result.success{background:linear-gradient(90deg,rgba(16,185,129,0.08),rgba(16,185,129,0.02));border-color:rgba(16,185,129,0.12);color:var(--success)}
.result.failure{background:linear-gradient(90deg,rgba(239,68,68,0.06),rgba(239,68,68,0.02));border-color:rgba(239,68,68,0.12);color:var(--danger)}
.result .icon svg{width:20px;height:20px}

.card-foot{margin-top:14px;text-align:center;color:var(--muted)}

/* RTL adjustments */
:root[dir="rtl"] .card-header{direction:rtl}
:root[dir="rtl"] .lang-toggle{flex-direction:row-reverse}
/* RTL: brand order */
:root[dir="rtl"] .brand{flex-direction:row-reverse}

/* Hero logo above the card */
.hero-logo-wrap{display:flex;justify-content:center;margin-bottom:24px}
.hero-logo{width:180px;height:auto;border-radius:20px;object-fit:contain;box-shadow:0 10px 30px rgba(2,6,23,0.12);background:#fff;padding:12px}

@media (max-width:520px){
  .hero-logo{width:120px;padding:10px;border-radius:14px}
  .hero-logo-wrap{margin-bottom:12px}
  .page{gap:12px}
}

/* Responsive */
@media (max-width:520px){
  .card{padding:1rem}
  .card-header{flex-direction:column;align-items:flex-start;gap:10px}
  .brand{gap:10px}
  .brand .logo{width:44px}
  .actions{justify-content:stretch}
  .btn{width:100%;justify-content:center}
}