:root{
  --paper:#F5F7F6;--sheet:#FBFCFB;--ink:#0F1F18;--muted:#52635A;--line:#DDE6E1;
  --green:#1F4A3B;--leaf:#2F8A63;--mint:#E2EFE8;--gold:#C9A46A;--gold-ink:#8A6A33;
  --band:#0D2119;--band-2:#132D23;--band-ink:#ECF4EF;--band-muted:#98B3A6;--band-line:#23463A;--glow:#3DDC97;
  --danger:#B4483A;--focus:#C9A46A;
  --body:"Geist","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Access (sign-in / sign-up) ---------- */
.ta-access{min-height:100dvh;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.ta-side{position:relative;overflow:hidden;background:var(--band);color:var(--band-ink);padding:36px clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:32px}
.ta-side::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--band-line) 1px,transparent 1px),linear-gradient(90deg,var(--band-line) 1px,transparent 1px);background-size:48px 48px;opacity:.4;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 25%,transparent 75%);pointer-events:none}
.ta-side::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;bottom:-220px;background:radial-gradient(circle,rgba(61,220,151,.16),transparent 65%);pointer-events:none}
.ta-side>*{position:relative;z-index:1}
.ta-brand img{height:48px;width:auto;filter:brightness(0) invert(1)}
.ta-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--glow)}
.ta-eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor}
.ta-side h1{font-size:clamp(1.9rem,1.4rem + 2vw,3rem);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin:14px 0 0;max-width:16ch}
.ta-side h1 em{font-style:normal;color:var(--glow)}
.ta-side .ta-lede{color:var(--band-muted);margin-top:16px;max-width:46ch}
.ta-split{display:grid;gap:12px;margin-top:auto}
.ta-split div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;border:1px solid var(--band-line);background:rgba(236,244,239,.04);border-radius:14px;padding:14px}
.ta-split i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(61,220,151,.13);color:var(--glow);font-style:normal}
.ta-split i svg{width:18px;height:18px}
.ta-split b{display:block;font-size:.95rem}
.ta-split span{color:var(--band-muted);font-size:.86rem}
.ta-split .sim i{background:rgba(201,164,106,.15);color:var(--gold)}
.ta-back{color:var(--band-muted);font-size:.88rem;text-decoration:none}
.ta-back:hover{color:var(--band-ink)}

.ta-main{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:18px}
.ta-tabs{display:inline-flex;padding:4px;border:1px solid var(--line);background:var(--sheet);border-radius:12px;gap:4px}
.ta-tabs a{padding:8px 16px;border-radius:9px;text-decoration:none;font-size:.9rem;font-weight:500;color:var(--muted)}
.ta-tabs a[aria-current="page"]{background:var(--green);color:var(--paper)}
.ta-mount{width:100%;display:flex;justify-content:center;min-height:200px}
.ta-mount>*{min-width:0;max-width:100%;width:100%}
.ta-mount .cl-rootBox{min-width:0;max-width:100%}
.ta-dest{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:center}
.ta-dest b{color:var(--gold-ink);font-weight:500}

/* status cards */
.ta-card{width:440px;max-width:100%;background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 24px 60px -36px rgba(13,33,25,.45)}
.ta-card h2{margin:0;font-size:1.25rem;letter-spacing:-.015em;font-weight:600}
.ta-card p{margin:8px 0 0;color:var(--muted);font-size:.93rem}
.ta-card .ta-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ta-card.err{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.ta-card.err h2{color:var(--danger)}
.ta-code{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:10px;overflow-wrap:anywhere}
.ta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;font-size:.9rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease}
.ta-btn:hover{transform:translateY(-1px)}
.ta-btn:disabled{opacity:.6;cursor:progress;transform:none}
.ta-btn-dark{background:var(--green);color:var(--paper)}
.ta-btn-ghost{background:var(--sheet);color:var(--ink);border-color:var(--line)}

/* skeleton */
.ta-skel{width:440px;max-width:100%;background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:28px;display:grid;gap:14px}
.ta-skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mint),var(--line),var(--mint));background-size:200% 100%;animation:ta-sh 1.4s linear infinite}
.ta-skel i:nth-child(1){width:42%;height:18px}.ta-skel i:nth-child(2){width:70%}.ta-skel i:nth-child(3){height:40px}.ta-skel i:nth-child(4){height:40px}.ta-skel i:nth-child(5){height:42px;background:var(--green);opacity:.25}
@keyframes ta-sh{to{background-position:-200% 0}}
.ta-skel small{font-family:var(--mono);font-size:.74rem;color:var(--muted)}

/* verification */
.ta-verify{width:min(900px,100%);display:grid;gap:16px}
.ta-verify .ta-card{width:100%}
.ta-steps{margin:12px 0 0;padding-inline-start:20px;color:var(--muted);font-size:.9rem;display:grid;gap:4px}

@media (max-width:900px){
  .ta-access{grid-template-columns:minmax(0,1fr)}
  .ta-side{padding:22px 20px;gap:16px}
  .ta-side h1{font-size:1.6rem}
  .ta-side .ta-lede,.ta-split{display:none}
  .ta-brand img{height:40px}
  .ta-main{justify-content:flex-start;padding:28px 14px 40px}
}

/* ---------- Session wrapper ---------- */
.ta-session{height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.ta-bar{flex:none;display:flex;align-items:center;gap:14px;padding:8px max(14px,env(safe-area-inset-left));background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-line);min-height:52px}
.ta-bar .ta-brand img{height:34px}
.ta-tag{font-family:var(--mono);font-size:.7rem;color:var(--gold);border:1px solid var(--band-line);border-radius:6px;padding:2px 8px;white-space:nowrap}
.ta-who{margin-inline-start:auto;display:flex;align-items:center;gap:12px;min-width:0}
.ta-who span{font-family:var(--mono);font-size:.8rem;color:var(--band-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.ta-who span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--glow);margin-inline-end:8px;vertical-align:middle}
.ta-out{background:transparent;color:var(--band-ink);border:1px solid var(--band-line);border-radius:999px;padding:6px 14px;font:inherit;font-size:.84rem;cursor:pointer}
.ta-out:hover{border-color:var(--glow)}
.ta-stage{flex:1;min-height:0;position:relative;display:flex}
.ta-stage iframe{flex:1;width:100%;height:100%;border:0;display:block;background:var(--paper)}
.ta-center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 14px;overflow:auto}
@media (max-width:560px){.ta-tag{display:none}.ta-who span{max-width:16ch}}

/* Clerk element pseudo-states */
.cl-formFieldInput::placeholder{color:#8A9A91;opacity:1}
.cl-formFieldInput:focus{border-color:var(--leaf)!important;box-shadow:0 0 0 3px rgba(47,138,99,.2)!important}
.cl-formButtonPrimary:hover{background:#173A2E!important}
.cl-socialButtonsBlockButton:hover{background:var(--mint)!important}
.cl-footerActionLink:hover{color:var(--green)!important}