/* ============================================================
   صفحة التحقق من التقرير — تعتمد app.css
   ============================================================ */

.vpage { max-width: 760px; margin: 0 auto; padding: 34px 24px 80px; }
.vpage h1 { margin: 0 0 12px; font-size: 30px; font-weight: 700; color: var(--green); }
.vlede { margin: 0 0 26px; font-size: 15.5px; color: var(--muted); line-height: 2; }

.vform {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.vfield { min-width: 0; }
.vfield label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.vfield input {
  width: 100%; min-width: 0; height: 48px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff;
  font: inherit; font-size: 15px; padding: 0 14px; color: inherit;
  text-align: left; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.vfield input:focus { border-color: var(--green); outline: 0; }

.vcard {
  border-radius: var(--radius); padding: 26px 28px; margin-top: 22px;
  display: flex; gap: 18px; align-items: flex-start;
}
.vcard--ok { background: var(--ok-bg); border: 2px solid var(--ok); }
.vcard--bad { background: var(--warn-bg); border: 2px solid var(--warn); }
.vcard--wait { background: #fff; border: 1px solid var(--line); }
.vcard__icon { flex: none; margin-top: 2px; }
.vcard h2 { margin: 0; font-size: 21px; font-weight: 700; }
.vcard p { margin: 8px 0 0; font-size: 15px; line-height: 1.95; }
.vcard--ok h2, .vcard--ok p { color: var(--ok-ink); }
.vcard--bad h2, .vcard--bad p { color: var(--warn-ink); }

.vtable {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-top: 18px; overflow: hidden;
}
.vtable table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vtable td { padding: 14px 20px; border-top: 1px solid var(--line); line-height: 1.85; }
.vtable tr:first-child td { border-top: 0; }
.vtable td.k { background: #F4F8F6; font-weight: 700; color: var(--green); width: 34%; vertical-align: top; }

.vhint { font-size: 13px; color: var(--hint); line-height: 1.9; margin-top: 14px; }

@media (max-width: 620px) {
  .vpage { padding: 22px 14px 56px; }
  .vpage h1 { font-size: 23px; }
  .vform { grid-template-columns: 1fr; padding: 18px 16px; }
  .vform .btn { width: 100%; }
  .vcard { padding: 20px; flex-direction: column; gap: 12px; }
  .vtable td.k { width: 40%; }
}