/* ===========================================================================
   HORAN AGREEMENTS — PROTOTYPE DESIGN SYSTEM
   ---------------------------------------------------------------------------
   One stylesheet for all three areas. The public site, the customer portal and
   the admin portal differ in density and navigation, never in vocabulary: the
   same tokens, the same buttons, the same badges. That is what makes them read
   as one product rather than three.

   The navy, ink and line values are the shipped product's own custom
   properties, read out of the v1.7.3 bundle. Inter and Cairo are the exact
   webfonts it loads. This is a redesign of the same identity, not a rebrand.

   Brass (#a07d2e) is the one addition, and it is rationed: verification
   moments only - the seal, the verified badge, the section markers. In a
   platform whose promise is "this document is genuine", the seal earns the
   colour and nothing else does.
   =========================================================================== */

@font-face{font-family:Inter;src:url(assets/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Cairo;src:url(assets/fonts/cairo-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Cairo;src:url(assets/fonts/cairo-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Cairo;src:url(assets/fonts/cairo-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* ---- colour tokens (navy family is the product's own) ---- */
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --muted-2:#94a3b8;
  --line:#e2e8f0; --line-2:#cbd5e1;
  --navy:#1a3a5c; --navy-2:#254e7a; --navy-3:#356494; --navy-soft:#eef3f9;
  --navy-deep:#102539; --navy-ink:#0c1e30;
  --brass:#a07d2e; --brass-2:#8a6a26; --brass-soft:#f8f2e4; --brass-line:#eadfc4;
  --green:#0f7a52; --green-soft:#e7f6ef; --green-line:#bfe3d3;
  --amber:#b45309; --amber-soft:#fdf3e3; --amber-line:#f0dcb4;
  --red:#b91c1c;   --red-soft:#fdeaea;   --red-line:#f3c6c6;
  --paper:#f6f8fb; --card:#ffffff;

  /* ---- spacing scale ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem;

  /* ---- radius ---- */
  --r-xs:6px; --r-sm:9px; --r:13px; --r-lg:20px; --r-pill:999px;

  /* ---- elevation ---- */
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 2px rgba(15,23,42,.05),0 4px 10px -6px rgba(15,23,42,.14);
  --sh:0 1px 2px rgba(15,23,42,.05),0 10px 28px -14px rgba(15,23,42,.22);
  --sh-lg:0 4px 12px rgba(15,23,42,.07),0 28px 56px -20px rgba(15,23,42,.3);

  /* ---- type ---- */
  --font:Inter,Arial,Helvetica,sans-serif;
  --font-ar:Cairo,'Dubai',Tahoma,Arial,sans-serif;

  /* ---- layout ---- */
  --wrap:1180px; --side-w:248px; --side-w-collapsed:68px; --top-h:60px;
  --demobar-h:52px;

  /* ---- motion: fast enough to feel responsive, short enough to stay out of
          the way. One easing curve everywhere. ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.14s; --t:.2s; --t-slow:.3s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[dir=rtl] body{font-family:var(--font-ar)}
[lang=ar],.ar{font-family:var(--font-ar)}

/* Motion is a courtesy, never a requirement. Everything below still works
   with animation switched off. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

h1,h2,h3,h4{margin:0 0 var(--s2);line-height:1.2;letter-spacing:-.018em;color:var(--ink)}
h1{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700}
h2{font-size:1.28rem;font-weight:700}
h3{font-size:1rem;font-weight:600;letter-spacing:-.008em}
h4{font-size:.9rem;font-weight:600}
p{margin:0 0 var(--s3)}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{letter-spacing:0}
small,.small{font-size:.83rem;color:var(--muted)}
.mut{color:var(--muted)}
a{color:var(--navy-2);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;direction:ltr;display:inline-block}
:focus-visible{outline:2px solid var(--navy-3);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:.7rem 1rem}
.skip:focus{left:0;inset-inline-start:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 16px}}

/* ===========================================================================
   DEMO BAR — intentionally unlike the product
   =========================================================================== */
.demobar{
  position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:1.25rem;
  min-height:var(--demobar-h);padding:.4rem 1rem;flex-wrap:wrap;
  background:#14181f;color:#cbd5e1;font-size:.78rem;
  border-bottom:2px solid var(--brass);
}
.demobar-tag{font-weight:700;letter-spacing:.12em;color:#14181f;background:var(--brass);
  padding:.16rem .5rem;border-radius:var(--r-xs);font-size:.68rem}
.demobar-group{display:flex;align-items:center;gap:.45rem}
.demobar-group label{color:#8494a8;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.demobar select{background:#1f2632;color:#e2e8f0;border:1px solid #2f3947;border-radius:var(--r-xs);
  padding:.25rem .5rem;font:inherit;font-size:.76rem}
.seg{display:flex;background:#1f2632;border:1px solid #2f3947;border-radius:var(--r-xs);overflow:hidden}
.seg button{background:transparent;border:0;color:#94a3b8;font:inherit;font-size:.76rem;
  padding:.26rem .6rem;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.seg button:hover{background:#2a3340;color:#e2e8f0}
.seg button.on{background:var(--brass);color:#14181f;font-weight:700}
/* The admin switch is marked as a prototype control, not product navigation.
   In the real system there is no route from any customer-facing screen into
   the admin portal; access follows from the authenticated role. */
.seg-admin{display:inline-flex;align-items:center;gap:.3rem}
.seg-tag{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:#3b4553;color:#cbd5e1;border-radius:3px;padding:0 .26rem}
.seg-admin.on .seg-tag{background:rgba(20,24,31,.22);color:#14181f}
.dbtn{background:#1f2632;border:1px solid #2f3947;color:#cbd5e1;border-radius:var(--r-xs);
  padding:.26rem .6rem;font:inherit;font-size:.76rem;cursor:pointer;transition:background var(--t-fast)}
.dbtn:hover{background:#2a3340}
.demobar-actions{margin-inline-start:auto}
.demobar-hide{background:none;border:0;color:#64748b;font-size:1.2rem;cursor:pointer;line-height:1;padding:0 .3rem}
.demobar-hide:hover{color:#e2e8f0}
.demobar-show{position:fixed;bottom:12px;inset-inline-end:12px;z-index:120;background:#14181f;color:#cbd5e1;
  border:1px solid var(--brass);border-radius:var(--r-pill);padding:.4rem .9rem;font:inherit;font-size:.78rem;cursor:pointer}
@media(max-width:820px){
  .demobar{gap:.6rem;font-size:.72rem}
  .demobar-group label{display:none}
  .demobar-actions{margin-inline-start:0;width:100%;order:9}
}

/* ===========================================================================
   BUTTONS
   =========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:.55rem 1rem;font:inherit;font-weight:600;font-size:.88rem;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),transform .08s var(--ease),box-shadow var(--t-fast);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-2);box-shadow:var(--sh-sm)}
.btn-line{background:#fff;color:var(--navy);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--navy-3);background:#fff}
.btn-quiet{background:transparent;color:var(--ink-2);border-color:transparent}
.btn-quiet:hover{background:var(--navy-soft);color:var(--navy)}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{background:var(--brass-2)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#9c1717}
.btn-sm{padding:.34rem .68rem;font-size:.8rem;border-radius:var(--r-xs)}
.btn-lg{padding:.78rem 1.4rem;font-size:.96rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:.45rem;flex-wrap:wrap}
.btn .ic{width:15px;height:15px;flex:none}
/* Arrow-type icons must follow reading direction, not sit frozen pointing
   right while the whole page reads right-to-left. */
html[dir=rtl] .ic-flip{transform:scaleX(-1)}

/* ===========================================================================
   FORM CONTROLS
   =========================================================================== */
.field{display:block;margin-bottom:var(--s3)}
.field>label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:.28rem}
.input,.select,.textarea{
  width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;
  padding:.55rem .7rem;font:inherit;font-size:.9rem;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.input:focus,.select:focus,.textarea:focus{
  outline:0;border-color:var(--navy-3);box-shadow:0 0 0 3px rgba(53,100,148,.14)}
.textarea{min-height:96px;resize:vertical}
.select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:2rem}
html[dir=rtl] .select{background-position:17px 51%,12px 51%}
.hint{font-size:.78rem;color:var(--muted);margin-top:.25rem}
.field-error .input,.field-error .select,.field-error .textarea{border-color:var(--red)}
.err-text{font-size:.78rem;color:var(--red);margin-top:.25rem}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:.88rem;cursor:pointer;padding:.3rem 0}
.check input{margin-top:.2rem;accent-color:var(--navy)}

/* ===========================================================================
   CARDS / SURFACES
   =========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--sh-xs);
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.card-tight{padding:var(--s4)}
.card-flat{box-shadow:none}
.card-hover:hover{box-shadow:var(--sh);border-color:var(--line-2);transform:translateY(-2px)}
.card-featured{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy),var(--sh)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s4);flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}

.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}.g-2-1{grid-template-columns:1fr}}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* section marker — echoes the reference marks the product prints on documents */
.eyebrow{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--navy-2)}
html[dir=rtl] .eyebrow{letter-spacing:0}
.eyebrow::before{content:'';width:15px;height:2px;background:var(--brass);border-radius:2px;flex:none}
.eyebrow-light{color:#a8c4dd}

/* ===========================================================================
   BADGES / PILLS
   =========================================================================== */
.badge{display:inline-flex;align-items:center;gap:.32rem;padding:.18rem .58rem;
  border-radius:var(--r-pill);font-size:.74rem;font-weight:650;background:#eef1f5;color:var(--ink-2);
  border:1px solid transparent;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75;flex:none}
.badge-plain::before{display:none}
.badge-green{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.badge-amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.badge-red{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
.badge-navy{background:var(--navy-soft);color:var(--navy);border-color:#d5e2ee}
.badge-brass{background:var(--brass-soft);color:var(--brass-2);border-color:var(--brass-line)}
.badge-lg{padding:.3rem .8rem;font-size:.82rem}

/* ===========================================================================
   ALERTS / TOASTS
   =========================================================================== */
.alert{display:flex;gap:.6rem;align-items:flex-start;border:1px solid;border-radius:var(--r-sm);
  padding:.7rem .9rem;font-size:.87rem;margin-bottom:var(--s4)}
.alert-info{background:var(--navy-soft);border-color:#c7d9ec;color:var(--navy)}
.alert-ok{background:var(--green-soft);border-color:var(--green-line);color:#0b4a34}
.alert-warn{background:var(--amber-soft);border-color:var(--amber-line);color:#71430a}
.alert-error{background:var(--red-soft);border-color:var(--red-line);color:#7a1d1d}

.toast-stack{position:fixed;bottom:20px;inset-inline-end:20px;z-index:160;
  display:flex;flex-direction:column;gap:.5rem;max-width:340px}
.toast{background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--navy);
  border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:.7rem .9rem;font-size:.87rem;
  animation:toastIn var(--t) var(--ease)}
.toast.out{animation:toastOut var(--t) var(--ease) forwards}
.toast-ok{border-inline-start-color:var(--green)}
.toast-err{border-inline-start-color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}

/* ===========================================================================
   TABLES
   =========================================================================== */
.table-wrap{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:.72rem .85rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);background:#f8fafc;white-space:nowrap}
html[dir=rtl] th{letter-spacing:0}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover{background:#f9fbfd}
tbody tr:last-child td{border-bottom:0}
.t-num{font-variant-numeric:tabular-nums}

/* Below this width a table stops being readable on a phone, so the same rows
   are rendered as cards instead of forcing a horizontal scroll. */
.row-cards{display:none;flex-direction:column;gap:.55rem}
@media(max-width:760px){
  .responsive-table{display:none}
  .row-cards{display:flex}
}
.row-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem .95rem}
.row-card-top{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;margin-bottom:.35rem}
.row-card-title{font-weight:650;font-size:.94rem;color:var(--ink)}
.row-card-meta{font-size:.8rem;color:var(--muted);margin-bottom:.6rem}
.row-card .btn-row .btn{flex:1 1 auto}

/* ===========================================================================
   TABS
   =========================================================================== */
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line);margin-bottom:var(--s5);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{position:relative;background:none;border:0;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--muted);padding:.65rem .9rem;cursor:pointer;white-space:nowrap;
  transition:color var(--t-fast) var(--ease)}
.tab:hover{color:var(--ink-2)}
.tab.on{color:var(--navy)}
/* The underline slides rather than jumps, which is the one place a small
   animation genuinely helps: it shows where you came from. */
.tab::after{content:'';position:absolute;left:.6rem;right:.6rem;bottom:-1px;height:2px;
  background:var(--navy);border-radius:2px;transform:scaleX(0);
  transition:transform var(--t) var(--ease)}
.tab.on::after{transform:scaleX(1)}

/* ===========================================================================
   PROGRESS / STEPPER
   =========================================================================== */
.progress{height:7px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.progress span{display:block;height:100%;background:var(--navy);border-radius:var(--r-pill);
  transition:width var(--t-slow) var(--ease)}
.progress-brass span{background:var(--brass)}
.progress-warn span{background:var(--amber)}

.stepper{display:flex;gap:.4rem;margin-bottom:var(--s5);overflow-x:auto}
.step{flex:1 1 0;min-width:104px;padding-top:.65rem;border-top:2px solid var(--line);
  font-size:.8rem;color:var(--muted);transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.step b{display:block;font-size:.71rem;letter-spacing:.08em;color:var(--muted-2);font-weight:700}
.step.done{border-top-color:var(--navy-3);color:var(--ink-2)}
.step.on{border-top-color:var(--brass);color:var(--ink);font-weight:600}
.step.on b{color:var(--brass-2)}

/* ===========================================================================
   MODAL / DRAWER
   =========================================================================== */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:140;
  animation:fade var(--t) var(--ease);backdrop-filter:blur(2px)}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal{position:fixed;z-index:150;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-lg);padding:var(--s5);
  animation:modalIn var(--t) var(--ease)}
html[dir=rtl] .modal{transform:translate(50%,-50%)}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:var(--s3)}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:var(--s5)}
.x{background:none;border:0;font-size:1.35rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 .2rem}
.x:hover{color:var(--ink)}

/* The drawer slides from the inline-start edge, so it opens from the left in
   English and from the right in Arabic without any extra code. */
.drawer{position:fixed;z-index:150;inset-block:0;inset-inline-start:0;width:min(310px,84vw);
  background:#fff;box-shadow:var(--sh-lg);padding:var(--s5) var(--s4);
  animation:drawerIn var(--t-slow) var(--ease);overflow-y:auto}
@keyframes drawerIn{from{transform:translateX(-100%)}}
html[dir=rtl] .drawer{animation-name:drawerInRtl}
@keyframes drawerInRtl{from{transform:translateX(100%)}}

/* ===========================================================================
   DROPDOWN / TOOLTIP
   =========================================================================== */
.dd{position:relative;display:inline-block}
.dd-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:190px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh);
  padding:.3rem;animation:ddIn var(--t-fast) var(--ease)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}}
.dd-menu button,.dd-menu a{display:flex;width:100%;align-items:center;gap:.5rem;background:none;border:0;
  font:inherit;font-size:.87rem;color:var(--ink-2);text-align:start;padding:.45rem .6rem;
  border-radius:var(--r-xs);cursor:pointer}
.dd-menu button:hover,.dd-menu a:hover{background:var(--navy-soft);color:var(--navy);text-decoration:none}
.dd-sep{height:1px;background:var(--line);margin:.3rem 0}

.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);inset-inline-start:50%;
  transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.74rem;white-space:nowrap;
  padding:.25rem .5rem;border-radius:var(--r-xs);opacity:0;pointer-events:none;
  transition:opacity var(--t-fast) var(--ease)}
.tip:hover::after{opacity:1}

/* ===========================================================================
   EMPTY / LOADING / PAGINATION
   =========================================================================== */
.empty{text-align:center;padding:var(--s7) var(--s4);color:var(--muted)}
.empty .ico{width:46px;height:46px;margin:0 auto var(--s3);border-radius:50%;
  background:var(--navy-soft);color:var(--navy-3);display:grid;place-items:center}
.empty h3{color:var(--ink-2);margin-bottom:.25rem}

.sk{background:linear-gradient(90deg,#eef1f5 25%,#f7f9fb 37%,#eef1f5 63%);
  background-size:400% 100%;animation:sk 1.4s var(--ease) infinite;border-radius:var(--r-xs)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-line{height:11px;margin-bottom:.5rem}
.sk-title{height:17px;width:42%;margin-bottom:.85rem}

.pager{display:flex;gap:.3rem;justify-content:center;align-items:center;margin-top:var(--s5)}
.pager button{min-width:34px;height:34px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-xs);
  font:inherit;font-size:.85rem;color:var(--ink-2);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.pager button:hover{border-color:var(--navy-3);color:var(--navy)}
.pager button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}

/* ===========================================================================
   APP SHELL (customer + admin)
   =========================================================================== */
.shell{display:flex;min-height:calc(100vh - var(--demobar-h))}
.side{width:var(--side-w);flex:none;background:#fff;border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;transition:width var(--t-slow) var(--ease)}
.shell.collapsed .side{width:var(--side-w-collapsed)}
.shell.collapsed .side .nav-label,.shell.collapsed .side .nav-group,
.shell.collapsed .side .brand-name,.shell.collapsed .side .side-foot span{display:none}
.shell.collapsed .side a{justify-content:center;padding-inline:0}

.side-head{display:flex;align-items:center;gap:.55rem;height:var(--top-h);padding:0 .9rem;
  border-bottom:1px solid var(--line)}
.side-nav{flex:1;padding:.8rem .55rem;overflow-y:auto}
.nav-group{font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-2);margin:1rem .6rem .35rem}
html[dir=rtl] .nav-group{letter-spacing:0}
.side-nav:first-child .nav-group:first-child,.nav-group:first-child{margin-top:0}
.side a{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;margin-bottom:1px;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:.88rem;font-weight:500;
  position:relative;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.side a:hover{background:#f1f5f9;text-decoration:none}
.side a.on{background:var(--navy-soft);color:var(--navy);font-weight:650}
.side a.on::before{content:'';position:absolute;inset-inline-start:0;top:20%;height:60%;width:3px;
  background:var(--navy);border-radius:0 3px 3px 0}
html[dir=rtl] .side a.on::before{border-radius:3px 0 0 3px}
.side .ic{width:17px;height:17px;flex:none;opacity:.85}
.side-foot{padding:.7rem .8rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);
  display:flex;align-items:center;gap:.5rem}

.body{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--top-h);display:flex;align-items:center;gap:.75rem;padding:0 1.1rem;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);position:sticky;top:var(--demobar-h);z-index:50}
.crumb{display:flex;align-items:center;gap:.4rem;font-size:.86rem;color:var(--muted);min-width:0}
.crumb b{color:var(--ink);font-weight:650}
.crumb .sep{opacity:.5}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.45rem}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid transparent;
  background:transparent;border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;position:relative;
  transition:background var(--t-fast) var(--ease)}
.icon-btn:hover{background:var(--navy-soft);color:var(--navy)}
.dot{position:absolute;top:6px;inset-inline-end:7px;width:7px;height:7px;border-radius:50%;
  background:var(--brass);border:1.5px solid #fff}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:700}
.page{padding:var(--s5) 1.35rem var(--s7);flex:1}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  margin-bottom:var(--s5);flex-wrap:wrap}

/* Screens fade in on navigation. Short, and skipped entirely under
   reduced-motion. */
.screen-in{animation:screenIn var(--t-slow) var(--ease)}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Mobile: the sidebar becomes a drawer, and a bottom bar carries the primary
   destinations, because a phone thumb reaches the bottom, not a side rail. */
.mobtop{display:none}
.botnav{display:none}
@media(max-width:900px){
  .side{position:fixed;z-index:150;inset-block:0;inset-inline-start:0;transform:translateX(-100%);
    transition:transform var(--t-slow) var(--ease);width:var(--side-w)}
  html[dir=rtl] .side{transform:translateX(100%)}
  .shell.drawer-open .side{transform:none}
  .shell.collapsed .side{width:var(--side-w)}
  .shell.collapsed .side .nav-label,.shell.collapsed .side .nav-group,
  .shell.collapsed .side .brand-name{display:block}
  .shell.collapsed .side a{justify-content:flex-start;padding-inline:.65rem}
  .mobtop{display:grid}
  .page{padding:var(--s4) 1rem calc(var(--s8) + 12px)}
  .botnav{
    display:flex;position:fixed;inset-inline:0;bottom:0;z-index:90;background:#fff;
    border-top:1px solid var(--line);padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom,0));
  }
  .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
    padding:.4rem .2rem;font-size:.68rem;color:var(--muted);border-radius:var(--r-xs)}
  .botnav a.on{color:var(--navy);font-weight:650}
  .botnav a:hover{text-decoration:none}
  .botnav .ic{width:19px;height:19px}
}

/* ===========================================================================
   PUBLIC SITE
   =========================================================================== */
.pub-head{position:sticky;top:var(--demobar-h);z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pub-head-in{display:flex;align-items:center;gap:1.1rem;height:66px}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--navy);font-size:1rem}
.brand:hover{text-decoration:none}
.brand-mark{width:31px;height:31px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(152deg,var(--navy),var(--navy-2));color:#fff;
  font-family:var(--font-ar);font-size:.98rem;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.brand-mark.sm{width:25px;height:25px;font-size:.8rem;border-radius:7px}
.pub-nav{display:flex;gap:1.3rem;margin-inline-start:.75rem}
.pub-nav a{color:var(--ink-2);font-size:.9rem;font-weight:500;position:relative;padding:.2rem 0}
.pub-nav a:hover{color:var(--navy);text-decoration:none}
.pub-nav a::after{content:'';position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--navy);
  border-radius:2px;transform:scaleX(0);transition:transform var(--t) var(--ease)}
.pub-nav a:hover::after{transform:scaleX(1)}
.pub-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:.4rem;cursor:pointer}
.burger span{width:20px;height:2px;background:var(--ink-2);border-radius:2px;transition:transform var(--t) var(--ease)}
@media(max-width:940px){.pub-nav{display:none}.burger{display:flex}.hide-sm{display:none}}

.hero{padding:clamp(2.2rem,5vw,4rem) 0 clamp(2.6rem,6vw,4.4rem);
  background:radial-gradient(1100px 380px at 50% -90px,#e9eff7 0%,rgba(233,239,247,0) 70%),var(--paper)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4.5vw,3.4rem);align-items:center}
.bi-head{margin:0 0 1rem;font-size:clamp(1.7rem,3.9vw,2.55rem);font-weight:700;letter-spacing:-.028em;line-height:1.14;
  display:flex;flex-direction:column}
.bi-en{color:var(--ink)}
.bi-ar{font-family:var(--font-ar);color:var(--navy);direction:rtl;letter-spacing:0;
  font-size:.85em;font-weight:600;line-height:1.5}
html[dir=rtl] .bi-en{order:2;font-size:.8em;font-weight:600;color:var(--ink-2)}
html[dir=rtl] .bi-ar{order:0;font-size:1em;font-weight:700;color:var(--ink)}
html[dir=rtl] .bi-rule{order:1}
.bi-rule{width:54px;height:2px;background:var(--brass);margin:.8rem 0;border-radius:2px}
.lede{font-size:1.02rem;color:var(--ink-2);max-width:52ch;margin-bottom:1.3rem}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem 1.3rem;margin:1.4rem 0 0;padding:0;
  font-size:.85rem;color:var(--muted)}
.hero-points li{display:flex;align-items:center;gap:.4rem}
.hero-points li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brass)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-doc{order:2;max-width:460px;margin:0 auto;width:100%}}

/* document mock */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.3rem 1.05rem;
  box-shadow:var(--sh-lg);font-size:.76rem;color:var(--ink-2);transform:rotate(-.7deg)}
html[dir=rtl] .doc{transform:rotate(.7deg)}
@media(max-width:900px){.doc{transform:none}}
.doc-head{display:flex;justify-content:space-between;align-items:center;gap:.7rem;
  padding-bottom:.65rem;border-bottom:1px solid var(--line)}
.doc-org{display:flex;align-items:center;gap:.4rem;font-weight:600;color:var(--ink);font-size:.74rem;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.doc-mark{width:19px;height:19px;flex:none;border-radius:5px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--font-ar);font-size:.62rem;font-weight:700}
.doc-ref{font-size:.67rem;color:var(--muted);white-space:nowrap}
.doc-title{display:flex;flex-direction:column;gap:.12rem;align-items:center;text-align:center;padding:.85rem 0 .5rem}
.doc-title strong{font-size:.92rem;color:var(--navy);font-weight:700}
.doc-title .ar{font-size:.87rem}
.doc-meta{display:flex;justify-content:center;gap:.85rem;flex-wrap:wrap;font-size:.65rem;color:var(--muted);
  padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:.9rem 0}
.doc-col{display:flex;flex-direction:column;gap:.28rem}
.doc-col.ar{align-items:flex-end}
.doc-h{font-size:.69rem;font-weight:700;color:var(--navy)}
.ln{display:block;height:5px;border-radius:3px;background:#eef1f5}
.doc-verify{display:flex;align-items:center;gap:.65rem;padding-top:.8rem;border-top:1px solid var(--line)}
.doc-code{font-size:.77rem;font-weight:700;color:var(--ink);letter-spacing:.06em;direction:ltr}
.seal{margin-inline-start:auto;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brass-2);background:var(--brass-soft);border:1px solid var(--brass-line);
  border-radius:var(--r-pill);padding:.22rem .55rem;flex:none}
html[dir=rtl] .seal{letter-spacing:0}
.qr{width:42px;height:42px;flex:none;border-radius:5px;border:1px solid var(--line-2);background:
  linear-gradient(#0f172a,#0f172a) 0 0/13px 13px no-repeat,
  linear-gradient(#0f172a,#0f172a) 100% 0/13px 13px no-repeat,
  linear-gradient(#0f172a,#0f172a) 0 100%/13px 13px no-repeat,
  repeating-linear-gradient(90deg,#0f172a 0 3px,#fff 3px 6px) 50% 50%/21px 21px no-repeat,#fff}
.qr.sm{width:30px;height:30px}
@media(max-width:430px){.doc-cols{grid-template-columns:1fr;gap:.7rem}.doc-col.ar{align-items:flex-start}
  html[dir=rtl] .doc-col.ar{align-items:flex-end}}

.section{padding:clamp(2.6rem,5.5vw,4rem) 0}
.section-alt{background:#fff;border-block:1px solid var(--line)}
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.7rem;list-style:none;padding:0}
.steps-row li{position:relative;padding-top:1.75rem;border-top:2px solid var(--line)}
.steps-row li::before{content:'';position:absolute;top:-2px;inset-inline-start:0;width:34%;height:2px;background:var(--brass)}
.step-n{position:absolute;top:.62rem;inset-inline-start:0;font-size:.72rem;font-weight:700;letter-spacing:.09em;color:var(--brass-2)}
@media(max-width:900px){.steps-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps-row{grid-template-columns:1fr;gap:.3rem}}

.verify-band{background:linear-gradient(165deg,var(--navy),var(--navy-deep));color:#dbe6f0}
.verify-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4.5vw,3.2rem);align-items:center}
.on-dark{color:#fff}.on-dark-p{color:#bdd0e1;max-width:56ch}
@media(max-width:900px){.verify-grid{grid-template-columns:1fr}}
.closing{background:var(--navy-deep);color:#fff;padding:clamp(2.6rem,5.5vw,4rem) 0;text-align:center}
.closing h2{color:#fff}.closing p{color:#b7cbdd;max-width:52ch;margin:0 auto 1.4rem}
.pub-foot{background:var(--navy-ink);color:#8fa8bd;padding:2.2rem 0}
.foot-in{display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center}
.foot-links{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;justify-content:center}
.foot-links a{color:#a8c0d6;font-size:.86rem}
.foot-links a:hover{color:#fff}

/* ===========================================================================
   STAT / KPI
   =========================================================================== */
.stat{display:flex;flex-direction:column;gap:.15rem}
.stat-label{font-size:.78rem;color:var(--muted);font-weight:500}
.stat-value{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat-sub{font-size:.78rem;color:var(--muted)}
.stat-trend{font-size:.78rem;font-weight:600}
.trend-up{color:var(--green)}.trend-down{color:var(--red)}

/* health tiles for diagnostics */
.health{display:flex;align-items:center;gap:.65rem;padding:.85rem .95rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff}
.health .lamp{width:9px;height:9px;border-radius:50%;flex:none}
.lamp-ok{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.lamp-warn{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.lamp-bad{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.lamp-off{background:var(--muted-2);box-shadow:0 0 0 3px #eef1f5}
.health-name{font-weight:600;font-size:.88rem}
.health-state{font-size:.78rem;color:var(--muted);margin-inline-start:auto;text-align:end}

/* verification result panel */
.vstate{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:var(--s4)}
@media(max-width:520px){.vstate{grid-template-columns:1fr}}
.vbox{border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem .95rem;background:#fff}
.vbox-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.4rem}
html[dir=rtl] .vbox-label{letter-spacing:0}
.vbox-ok{border-color:var(--green-line);background:var(--green-soft)}
.vbox-bad{border-color:var(--red-line);background:var(--red-soft)}
.vbox-warn{border-color:var(--amber-line);background:var(--amber-soft)}
.dropzone{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:1.5rem;text-align:center;
  background:#fbfcfd;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.dropzone:hover{border-color:var(--navy-3);background:var(--navy-soft)}
.dropzone.off{opacity:.55;pointer-events:none}

/* misc */
.divider{height:1px;background:var(--line);margin:var(--s5) 0}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font-weight:600}
.list-plain{list-style:none;margin:0;padding:0}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 1.05rem 0;padding-inline-start:1.35rem;font-size:.87rem}
.timeline li::before{content:'';position:absolute;inset-inline-start:0;top:.42rem;width:8px;height:8px;
  border-radius:50%;background:var(--navy-3);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line-2)}
.timeline li::after{content:'';position:absolute;inset-inline-start:3.5px;top:1.1rem;bottom:-.2rem;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline time{display:block;font-size:.76rem;color:var(--muted)}