/* =====================================================================
   موثوق — Auth & Registration flow
   Landing · Login (password → OTP) · Company registration wizard
   Mobile-first, fully responsive. Reuses tokens.css + components.css
   ===================================================================== */

/* ---- decorative geometric backdrop ---- */
.auth-bg{position:fixed;inset:0;z-index:0;background:
  radial-gradient(110% 80% at 100% -10%,var(--primary-50),transparent 55%),
  radial-gradient(90% 70% at 0% 110%,var(--sand-50),transparent 55%),
  var(--n-50);}
.auth-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23136A57' stroke-width='1' opacity='0.05'%3E%3Cpath d='M60 4 110 32 110 88 60 116 10 88 10 32Z'/%3E%3Cpath d='M60 26 90 44 90 76 60 94 30 76 30 44Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:130px 130px;}

/* ---- screen router ---- */
.screen{display:none;position:relative;z-index:1;min-height:100vh;}
.screen.active{display:block;animation:scr .32s var(--ease);}
@keyframes scr{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.screen.active{animation:none;}}

/* ---- shared auth brand ---- */
.auth-brand{display:inline-flex;align-items:center;gap:11px;}
.auth-brand .mk{width:40px;height:45px;position:relative;flex:none;}
.auth-brand .mk .o{position:absolute;inset:0;background:linear-gradient(150deg,var(--primary-500),var(--primary-700));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.auth-brand .mk .i{position:absolute;inset:5px;background:var(--n-0);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;}
.auth-brand .mk .i svg{width:17px;height:19px;color:var(--primary-700);}
.auth-brand.on-dark .mk .i{background:var(--primary-900);}
.auth-brand.on-dark .mk .i svg{color:var(--primary-200);}
.auth-brand .tx{display:flex;flex-direction:column;line-height:1.25;}
.auth-brand .tx .a{font-size:17px;font-weight:var(--fw-bold);color:var(--text);}
.auth-brand .tx .b{font-size:11px;color:var(--text-muted);}
.auth-brand.on-dark .tx .a{color:#fff;}
.auth-brand.on-dark .tx .b{color:rgba(255,255,255,.6);}

/* =========================== LANDING =========================== */
.lp-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.lp-nav-in{max-width:1080px;margin:0 auto;padding:14px var(--sp-5);display:flex;align-items:center;gap:var(--sp-4);}
.lp-nav-in .spacer{flex:1;}
.lp-nav-links{display:flex;align-items:center;gap:var(--sp-5);}
.lp-nav-links a{font-size:var(--fs-sm);color:var(--text-soft);font-weight:var(--fw-med);}
.lp-nav-links a:hover{color:var(--primary-700);}
@media (max-width:640px){.lp-nav-links{display:none;}}

/* ---- hero: institutional split (registry + credential artifact) ---- */
.lp-hero{max-width:1160px;margin:0 auto;padding:clamp(28px,5vw,60px) var(--sp-5) clamp(20px,4vw,40px);
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,68px);align-items:center;}
@media (max-width:900px){.lp-hero{grid-template-columns:1fr;gap:40px;}}

.hero-kicker{display:flex;align-items:center;gap:13px;margin-bottom:24px;}
.hero-kicker .seal{width:40px;height:45px;position:relative;flex:none;}
.hero-kicker .seal .o{position:absolute;inset:0;background:linear-gradient(150deg,var(--primary-600),var(--primary-800));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.hero-kicker .seal svg{position:absolute;inset:0;margin:auto;width:18px;height:20px;color:var(--primary-100);}
.hero-kicker .kt{line-height:1.35;padding-inline-start:13px;border-inline-start:2px solid var(--border-strong);}
.hero-kicker .kt .a{font-size:13px;font-weight:var(--fw-bold);color:var(--primary-800);}
.hero-kicker .kt .b{font-size:12px;color:var(--text-muted);}

.lp-h1{font-size:clamp(31px,4.4vw,50px);font-weight:var(--fw-bold);line-height:1.17;letter-spacing:-.018em;color:var(--text);max-width:640px;}
.lp-h1 .u{background:linear-gradient(transparent 60%,var(--primary-200) 60% 93%,transparent 93%);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.lp-sub{font-size:clamp(15px,2vw,18px);color:var(--text-soft);line-height:1.85;max-width:530px;margin-top:22px;}
.lp-cta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap;}
.lp-cta .btn{height:50px;padding:0 28px;font-size:var(--fs-body);}
.lp-link{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-body);font-weight:var(--fw-semi);color:var(--primary-700);background:none;border:0;font-family:inherit;cursor:pointer;}
.lp-link svg{width:18px;height:18px;transform:scaleX(-1);transition:transform var(--dur) var(--ease);}
.lp-link:hover svg{transform:scaleX(-1) translateX(5px);}

.hero-ledger{display:flex;margin-top:40px;border-top:1px solid var(--border);padding-top:22px;max-width:540px;}
.hero-ledger .li{flex:1;padding-inline-start:20px;border-inline-start:1px solid var(--border);}
.hero-ledger .li:first-child{padding-inline-start:0;border-inline-start:0;}
.hero-ledger .li .v{font-size:25px;font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.hero-ledger .li .k{font-size:12px;color:var(--text-muted);margin-top:3px;}

/* credential artifact + teal panel */
.hero-art{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;}
.hero-panel{position:absolute;inset:7% 4% 7% 12%;border-radius:24px;overflow:hidden;
  background:linear-gradient(155deg,var(--primary-700),var(--primary-900));box-shadow:var(--sh-lg);}
.hero-panel .hexbg{position:absolute;inset:0;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42 3 75 22 75 62 42 81 9 62 9 22Z' fill='none' stroke='%2379C0AC' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
  background-size:74px 74px;}
.hero-panel .glow{position:absolute;inset:0;background:radial-gradient(120% 80% at 90% 0%,rgba(121,192,172,.28),transparent 60%);}

.cred{position:relative;width:min(360px,86%);background:var(--n-0);border-radius:18px;box-shadow:0 30px 60px -20px rgba(11,52,45,.5),0 0 0 1px rgba(255,255,255,.6);
  padding:20px;transform:rotate(-1.8deg);transition:transform .5s var(--ease);}
.hero-art:hover .cred{transform:rotate(0deg) translateY(-4px);}
.cred-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.cred-kic{font-size:11px;font-weight:var(--fw-semi);letter-spacing:.06em;color:var(--text-muted);}
.cred-seal{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:var(--fw-bold);color:var(--success-ink);background:var(--success-bg);border:1px solid var(--success-border);padding:3px 9px;border-radius:var(--r-pill);}
.cred-seal svg{width:12px;height:12px;}
.cred-co{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--divider);}
.cred-co .avatar{background:var(--primary-100);color:var(--primary-700);}
.cred-co .nm{font-size:var(--fs-h4);font-weight:var(--fw-bold);}
.cred-co .ct{font-size:var(--fs-caption);color:var(--text-muted);margin-top:2px;}
.cred-score{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--divider);}
.cred-grade{width:58px;height:58px;border-radius:var(--r-md);display:grid;place-items:center;font-size:32px;font-weight:var(--fw-bold);
  background:var(--grade-a-bg);color:var(--grade-a-ink);border:1px solid var(--grade-a-border);flex:none;}
.cred-ring{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--grade-a) 0 91%,var(--n-150) 91% 100%);}
.cred-ring::before{content:"";position:absolute;width:46px;height:46px;border-radius:50%;background:var(--n-0);}
.cred-ring span{position:relative;font-size:14px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;}
.cred-meta .k{font-size:11px;color:var(--text-muted);}
.cred-meta .v{font-size:var(--fs-sm);font-weight:var(--fw-semi);margin-top:2px;}
.cred-dims{display:flex;flex-direction:column;gap:9px;padding:16px 0 4px;}
.cred-dims .cd{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;}
.cred-dims .cd .cl{font-size:11px;color:var(--text-soft);white-space:nowrap;}
.cred-dims .more{font-size:11px;color:var(--text-muted);text-align:center;padding-top:2px;}
.cred-foot{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid var(--divider);font-size:10.5px;color:var(--text-muted);}
.cred-foot svg{width:13px;height:14px;color:var(--primary-600);flex:none;}

/* seven-dimensions band */
.lp-dims{max-width:1160px;margin:0 auto;padding:clamp(8px,2vw,20px) var(--sp-5) clamp(48px,8vw,84px);}
.lp-dims .card{padding:clamp(20px,3vw,28px);}
.dim-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.dim-head .t-h3{margin-top:7px;}
.dim-row{display:flex;flex-wrap:wrap;gap:14px;}
.dim-item{flex:1 1 96px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative;}
.dim-item .hx{width:52px;height:58px;position:relative;transition:transform var(--dur) var(--ease);}
.dim-item .hx .o{position:absolute;inset:0;background:var(--primary-50);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.dim-item .hx .o::after{content:"";position:absolute;inset:1.5px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:inset 0 0 0 1px var(--primary-200);}
.dim-item .hx .n{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;font-weight:var(--fw-bold);color:var(--primary-700);font-variant-numeric:tabular-nums;}
.dim-item:hover .hx{transform:translateY(-4px);}
.dim-item .dl{font-size:12px;color:var(--text-soft);font-weight:var(--fw-med);line-height:1.4;max-width:104px;}

.lp-foot{border-top:1px solid var(--border);background:var(--n-0);}
.lp-foot-in{max-width:1080px;margin:0 auto;padding:var(--sp-6) var(--sp-5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.lp-foot .cp{font-size:var(--fs-caption);color:var(--text-muted);}
.lp-foot .safa{display:flex;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--text-muted);}
.lp-foot .safa img{height:20px;}

/* =========================== IMAGE-LED HERO (v2) =========================== */
.lp-hero2{position:relative;width:100%;min-height:clamp(460px,74vh,660px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;background:var(--primary-900);}
.lp-hero2 .hero2-media{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
.lp-hero2 .hero2-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left, rgba(6,28,24,.90) 0%, rgba(6,28,24,.52) 40%, rgba(6,28,24,.08) 72%, rgba(6,28,24,0) 100%),
    linear-gradient(180deg, rgba(8,38,32,.34) 0%, rgba(8,38,32,.04) 30%, rgba(6,30,25,.42) 78%, rgba(6,26,22,.82) 100%);}
.lp-hero2 .hero2-grad::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 95% at 100% 0,rgba(121,192,172,.16),transparent 50%);}

.hero2-content{position:relative;z-index:2;max-width:1160px;margin:0 auto;width:100%;
  padding:clamp(22px,3vw,34px) var(--sp-5) clamp(12px,1.8vw,18px);}
.hero-kicker.on-image{margin-bottom:22px;}
.hero-kicker.on-image .seal .o{background:linear-gradient(150deg,var(--primary-400),var(--primary-600));}
.hero-kicker.on-image .seal svg{color:#fff;}
.hero-kicker.on-image .kt{border-inline-start-color:rgba(255,255,255,.32);}
.hero-kicker.on-image .kt .a{color:#fff;}
.hero-kicker.on-image .kt .b{color:rgba(255,255,255,.74);}

.hero2-h1{font-size:clamp(30px,4.6vw,52px);font-weight:var(--fw-bold);line-height:1.16;letter-spacing:-.018em;
  color:#fff;max-width:700px;text-shadow:0 2px 34px rgba(0,0,0,.32);}
.hero2-h1 .u{background:linear-gradient(transparent 58%,rgba(121,192,172,.6) 58% 92%,transparent 92%);
  padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hero2-sub{font-size:clamp(15px,1.7vw,18px);color:rgba(255,255,255,.88);line-height:1.8;max-width:580px;
  margin-top:18px;text-shadow:0 1px 18px rgba(0,0,0,.3);}
.lp-hero2 .lp-cta{margin-top:28px;}
.lp-hero2 .lp-link.light{color:#fff;}
.lp-hero2 .lp-link.light:hover{color:var(--primary-100);}

.hero2-ledger{position:relative;z-index:2;max-width:1160px;margin:0 auto;width:100%;
  padding:0 var(--sp-5) clamp(26px,4vw,42px);display:flex;flex-wrap:wrap;}
.hero2-ledger .li{padding-inline:clamp(16px,3vw,34px);border-inline-start:1px solid rgba(255,255,255,.2);}
.hero2-ledger .li:first-child{padding-inline-start:0;border-inline-start:0;}
.hero2-ledger .li .v{font-size:clamp(22px,3vw,30px);font-weight:var(--fw-bold);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.hero2-ledger .li .k{font-size:12px;color:rgba(255,255,255,.72);margin-top:3px;}

/* =========================== AUTH CARD (login / wizard) =========================== */
.auth-shell{min-height:100vh;display:flex;flex-direction:column;}
.auth-head{padding:var(--sp-5) var(--sp-5) 0;max-width:520px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
.auth-head .back{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-muted);font-weight:var(--fw-med);background:none;border:0;}
.auth-head .back:hover{color:var(--primary-700);}
.auth-head .back svg{width:16px;height:16px;transform:scaleX(-1);}

.auth-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-6) var(--sp-5) var(--sp-12);}
.auth-card{width:100%;max-width:480px;background:var(--n-0);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:clamp(22px,5vw,34px);}
.auth-card .ac-brand{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;margin-bottom:var(--sp-6);}
.auth-card h1{font-size:var(--fs-h2);font-weight:var(--fw-bold);text-align:center;}
.auth-card .ac-sub{font-size:var(--fs-sm);color:var(--text-muted);text-align:center;margin-top:6px;}
.auth-card .ac-form{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6);}
.auth-divider{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-faint);font-size:var(--fs-caption);margin:var(--sp-5) 0;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--divider);}
.auth-foot-link{text-align:center;font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-5);}
.auth-foot-link a,.auth-foot-link button{color:var(--primary-700);font-weight:var(--fw-semi);background:none;border:0;font-size:inherit;font-family:inherit;}

/* demo role hint */
.demo-pick{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px dashed var(--sand-border);background:var(--sand-50);border-radius:var(--r-md);}
.demo-pick .dl{font-size:11px;font-weight:var(--fw-semi);color:var(--sand-ink);letter-spacing:.04em;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.demo-pick .dl svg{width:13px;height:13px;}

/* password field with reveal */
.pw-wrap{position:relative;}
.pw-wrap .input{padding-inline-end:42px;}
.pw-wrap .reveal{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;color:var(--text-muted);display:grid;place-items:center;border-radius:var(--r-sm);}
.pw-wrap .reveal:hover{background:var(--n-100);}
.pw-wrap .reveal svg{width:17px;height:17px;}

/* =========================== OTP =========================== */
.otp-target{display:flex;align-items:center;gap:10px;justify-content:center;background:var(--primary-50);border:1px solid var(--primary-100);
  border-radius:var(--r-md);padding:11px var(--sp-4);font-size:var(--fs-sm);color:var(--primary-800);margin-bottom:var(--sp-5);}
.otp-target svg{width:18px;height:18px;color:var(--primary-600);flex:none;}
.otp-target b{font-variant-numeric:tabular-nums;direction:ltr;}
.otp-boxes{display:flex;gap:10px;justify-content:center;direction:ltr;}
.otp-boxes input{width:52px;height:60px;text-align:center;font-size:26px;font-weight:var(--fw-bold);color:var(--text);
  border:1.5px solid var(--border-strong);border-radius:var(--r-md);background:var(--n-0);font-variant-numeric:tabular-nums;
  transition:all var(--dur) var(--ease);}
.otp-boxes input:focus{outline:none;border-color:var(--primary-500);box-shadow:var(--sh-ring);}
.otp-boxes input.filled{border-color:var(--primary-400);background:var(--primary-50);}
.otp-boxes.error input{border-color:var(--error);background:var(--error-bg);animation:shake .4s var(--ease);}
.otp-boxes.ok input{border-color:var(--success);background:var(--success-bg);}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
@media (max-width:380px){.otp-boxes input{width:44px;height:52px;font-size:22px;}}
.otp-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-5);font-size:var(--fs-sm);}
.otp-timer{display:inline-flex;align-items:center;gap:7px;color:var(--text-muted);}
.otp-timer svg{width:15px;height:15px;}
.otp-timer .t{font-variant-numeric:tabular-nums;font-weight:var(--fw-semi);color:var(--text);direction:ltr;}
.otp-timer.expired .t{color:var(--error-ink);}
.resend-btn{background:none;border:0;color:var(--primary-700);font-weight:var(--fw-semi);font-size:var(--fs-sm);font-family:inherit;}
.resend-btn:disabled{color:var(--text-faint);}

/* =========================== WIZARD =========================== */
.wiz{max-width:680px;margin:0 auto;width:100%;}
.wiz-top{position:sticky;top:0;z-index:15;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.wiz-top-in{max-width:680px;margin:0 auto;padding:var(--sp-4) var(--sp-5) 0;}
.wiz-top-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4);}
.wiz-steps{padding-bottom:var(--sp-4);}
.wiz-body{padding:var(--sp-6) var(--sp-5) 120px;}
.wiz-card{background:var(--n-0);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm);padding:clamp(20px,4vw,30px);}
.wiz-card .wc-head{margin-bottom:var(--sp-5);}
.wiz-card .wc-head h2{font-size:var(--fs-h3);font-weight:var(--fw-bold);}
.wiz-card .wc-head p{font-size:var(--fs-sm);color:var(--text-muted);margin-top:4px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.form-grid .full{grid-column:1/-1;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}

/* company branches repeater */
.branches{display:flex;flex-direction:column;gap:12px;margin-bottom:10px;}
.branch-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--n-50);padding:14px;}
.branch-card .bc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.branch-card .bc-title{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--primary-700);display:flex;align-items:center;gap:7px;}
.branch-card .bc-title svg{width:16px;height:16px;}
.branch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.branch-grid .full{grid-column:1/-1;}
.branch-grid .bf{display:flex;flex-direction:column;}
.branch-grid .blbl{font-size:var(--fs-caption);color:var(--text-muted);margin-bottom:4px;}
.branch-grid .input,.branch-grid .select{height:40px;}
.branch-del{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--n-0);color:var(--text-muted);cursor:pointer;transition:.16s var(--ease);}
.branch-del:hover{border-color:var(--error-border);color:var(--error);background:var(--error-bg);}
.branch-del svg{width:17px;height:17px;}
.add-branch{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px dashed var(--primary-300);
  border-radius:var(--r-md);background:var(--primary-50);color:var(--primary-700);font-family:inherit;
  font-size:var(--fs-sm);font-weight:var(--fw-semi);cursor:pointer;transition:.16s var(--ease);}
.add-branch:hover{background:var(--primary-100);border-color:var(--primary-500);}
.add-branch svg{width:17px;height:17px;}
.branch-empty{font-size:var(--fs-sm);color:var(--text-muted);padding:2px 0 6px;}
@media (max-width:560px){.branch-grid{grid-template-columns:1fr;}}

/* sticky wizard footer */
.wiz-foot{position:fixed;bottom:0;inset-inline:0;z-index:16;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);}
.wiz-foot-in{max-width:680px;margin:0 auto;padding:var(--sp-4) var(--sp-5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
.wiz-foot .prog{font-size:var(--fs-caption);color:var(--text-muted);}
.wiz-foot .prog b{color:var(--primary-700);}
.wiz-foot .acts{display:flex;gap:var(--sp-3);}

/* map preview */
.map-preview{position:relative;height:180px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);
  background:
   repeating-linear-gradient(0deg,transparent,transparent 22px,rgba(19,106,87,.05) 22px,rgba(19,106,87,.05) 23px),
   repeating-linear-gradient(90deg,transparent,transparent 22px,rgba(19,106,87,.05) 22px,rgba(19,106,87,.05) 23px),
   linear-gradient(135deg,var(--primary-50),var(--sand-50));}
.map-preview .road{position:absolute;background:var(--n-0);box-shadow:0 0 0 1px var(--border);}
.map-preview .road.h{height:14px;inset-inline:-10px;top:58%;transform:rotate(-4deg);}
.map-preview .road.v{width:13px;top:-10px;bottom:-10px;inset-inline-start:38%;transform:rotate(6deg);}
.map-preview .pin{position:absolute;top:46%;inset-inline-start:50%;transform:translate(50%,-100%);z-index:2;}
.map-preview .pin svg{width:34px;height:34px;color:var(--error);filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));}
.map-preview .mp-label{position:absolute;bottom:10px;inset-inline:10px;background:rgba(255,255,255,.94);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 11px;font-size:var(--fs-caption);color:var(--text);display:flex;align-items:center;gap:8px;z-index:2;}
.map-preview .mp-label svg{width:14px;height:14px;color:var(--primary-600);flex:none;}
.map-preview.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);background:var(--n-50);}
.map-preview.empty svg{width:30px;height:30px;color:var(--text-faint);}
.map-preview.empty .mp-label,.map-preview.empty .pin,.map-preview.empty .road{display:none;}

/* review summary */
.review-grp{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-4);}
.review-grp .rg-head{display:flex;align-items:center;justify-content:space-between;padding:11px var(--sp-4);background:var(--n-50);border-bottom:1px solid var(--divider);}
.review-grp .rg-head .rt{font-size:var(--fs-sm);font-weight:var(--fw-semi);display:flex;align-items:center;gap:8px;}
.review-grp .rg-head .rt svg{width:16px;height:16px;color:var(--primary-600);}
.review-grp .rg-head .edit{font-size:var(--fs-caption);color:var(--primary-700);font-weight:var(--fw-semi);background:none;border:0;font-family:inherit;}
.review-list{display:grid;grid-template-columns:1fr 1fr;}
@media (max-width:520px){.review-list{grid-template-columns:1fr;}}
.review-list .ri{padding:11px var(--sp-4);border-bottom:1px solid var(--divider);border-inline-start:1px solid var(--divider);}
.review-list .ri:nth-child(odd){border-inline-start:0;}
.review-list .ri .k{font-size:11px;color:var(--text-muted);margin-bottom:3px;}
.review-list .ri .v{font-size:var(--fs-sm);color:var(--text);font-weight:var(--fw-med);word-break:break-word;}
.review-list .ri .v.muted{color:var(--text-faint);font-weight:var(--fw-reg);}

/* success */
.success-wrap{max-width:480px;margin:0 auto;text-align:center;padding:var(--sp-12) var(--sp-5);display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);}
.success-badge{width:96px;height:96px;border-radius:50%;background:var(--success-bg);border:1px solid var(--success-border);display:grid;place-items:center;
  animation:pop .5s var(--ease);}
.success-badge svg{width:46px;height:46px;color:var(--success);}
@keyframes pop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}
.success-wrap h1{font-size:var(--fs-h1);font-weight:var(--fw-bold);}
.success-wrap p{font-size:var(--fs-body);color:var(--text-soft);max-width:380px;}
.success-card{width:100%;background:var(--n-0);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);margin-top:var(--sp-2);text-align:start;}

/* routing destination card */
.dest-card{display:flex;align-items:center;gap:var(--sp-3);background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--r-md);padding:var(--sp-4);text-align:start;}
.dest-card .di{width:44px;height:48px;position:relative;flex:none;}
.dest-card .di .o{position:absolute;inset:0;background:var(--primary-600);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.dest-card .di svg{position:absolute;inset:0;margin:auto;width:22px;height:22px;color:#fff;}
.dest-card .dt .a{font-size:11px;color:var(--primary-700);font-weight:var(--fw-semi);}
.dest-card .dt .b{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--primary-900);}

.field-ok{position:absolute;inset-inline-end:12px;top:36px;color:var(--success);width:16px;height:16px;display:none;}
.field.valid .field-ok{display:block;}
.field{position:relative;}
.field.valid .input{border-color:var(--success-border);}