/* ===== Verification page — premium, theme-driven ===== */
:root{
  --ok:#0E9F6E; --ok-bg:#E3F5EE;
  --bad:#E02424; --bad-bg:#FDE8E8;
  --warn:#C27803; --warn-bg:#FDF6E3;
  --ink:#1A2233; --muted:#8A94A6; --line:#ECEEF3;
}
*{box-sizing:border-box}
html,body{margin:0}
.v-body{
  font-family:'Nunito',system-ui,Arial,sans-serif;
  background:#F4F6FA; color:var(--ink); min-height:100vh; position:relative;
}
[dir=rtl] .v-body{font-family:'Tajawal','Nunito',sans-serif}

/* Header backdrop + band (both theme-driven) */
.v-header{background:var(--accent); padding:30px 16px 70px; text-align:center;
  transition:background .2s}
.v-band{height:10px; background:var(--band)}
.v-logo img{max-height:64px; max-width:260px; display:inline-block}
.v-logo-name{color:#fff; font-weight:800; font-size:20px; letter-spacing:.3px}

.v-lang{position:absolute; top:18px; inset-inline-end:18px}
.v-lang a{color:#fff; text-decoration:none; font-size:13px; font-weight:700;
  border:1px solid rgba(255,255,255,.5); padding:5px 12px; border-radius:999px}

/* Floating card overlapping the band */
.v-stage{padding:0 16px 40px; margin-top:-52px}
.v-card{
  max-width:440px; margin:0 auto; background:#fff; border-radius:22px;
  box-shadow:0 24px 60px -20px rgba(20,30,60,.35), 0 6px 18px -8px rgba(20,30,60,.2);
  padding:0 0 6px; overflow:hidden; position:relative;
}

.v-avatar{width:118px; height:118px; margin:26px auto 12px; border-radius:50%;
  overflow:hidden; border:4px solid #fff; box-shadow:0 6px 18px -6px rgba(20,30,60,.4);
  background:#eef1f6}
.v-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.v-avatar.empty{background:linear-gradient(135deg,#e9edf4,#dbe1ec)}

.v-name{font-size:24px; font-weight:800; color:var(--accent); text-align:center; margin:4px 20px 2px}
.v-cred{text-align:center; color:var(--muted); font-weight:700; font-size:13px}
.v-title{text-align:center; color:#9aa3b2; font-weight:600; font-size:15px; margin-top:3px}

.v-arch{width:calc(100% - 44px); height:24px; margin:16px auto 4px; opacity:.9;
  filter:drop-shadow(0 6px 8px rgba(20,30,60,.16))}
.v-arch svg{width:100%; height:100%; display:block}

.v-rows{padding:6px 22px}
.v-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line)}
.v-rows .v-row:last-child{border-bottom:none}
.v-ic{width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  background:#F3F5FA; border-radius:11px; color:var(--accent)}
.v-ic svg{width:19px; height:19px}
.v-ic.v-dot{font-size:20px; color:var(--accent)}
.v-kv{display:flex; flex-direction:column; text-align:start}
.v-k{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700}
.v-v{font-size:16px; font-weight:700; color:var(--ink); margin-top:1px}

/* Status banner — premium tones, centred */
.v-status{display:flex; align-items:center; justify-content:center; gap:9px;
  margin:14px 22px; padding:12px; border-radius:12px; font-weight:800; font-size:15px}
.v-status .dot{width:9px; height:9px; border-radius:50%; display:inline-block}
.v-status.ok{background:var(--ok-bg); color:var(--ok)} .v-status.ok .dot{background:var(--ok)}
.v-status.bad{background:var(--bad-bg); color:var(--bad)} .v-status.bad .dot{background:var(--bad)}
.v-status.warn{background:var(--warn-bg); color:var(--warn)} .v-status.warn .dot{background:var(--warn)}

/* MOH License — centred */
.v-license{padding:8px 22px 4px; text-align:center}
.v-license-head{font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); font-weight:800}
.v-license-no{font-weight:800; font-size:17px; margin-top:2px; letter-spacing:.5px}
.v-license-frame{position:relative; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-top:12px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.v-license-img{width:100%; display:block; pointer-events:none; -webkit-user-drag:none}
.v-shield{position:absolute; inset:0; background:transparent}

.v-seal{text-align:center; padding:12px 0 2px}
.v-foot{text-align:center; padding:12px 18px 20px}
.v-foot-main{color:#6B7688; font-size:12.5px; font-weight:700}
.v-foot-copy{color:#A6AEBD; font-size:11px; font-weight:600; margin-top:3px}
.v-muted{color:var(--muted)} .v-center{text-align:center}

/* ===== Landing welcome + login/setup form cards ===== */
.v-welcome{padding:34px 26px 8px; text-align:center}
.v-qricon{width:74px; height:74px; margin:0 auto 18px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; color:var(--accent,#1D3557);
  background:#F3F5FA; box-shadow:inset 0 0 0 1px rgba(20,30,60,.05)}
.v-qricon svg{width:38px; height:38px}
.v-welcome-title{font-size:23px; font-weight:800; color:var(--ink); margin:0 0 8px}
.v-welcome-text{color:var(--muted); font-size:15px; line-height:1.5; margin:0 8px}

.v-form{padding:30px 28px 26px}
.v-form-title{font-size:24px; font-weight:800; color:var(--accent,#16213A); text-align:center; margin:0 0 20px}
.v-form label{margin-bottom:16px}
.v-form-actions{display:flex; justify-content:center; margin-top:8px}
.v-form-actions .btn{min-width:150px; text-align:center}