/* Interaction layer for the auth pages. */
/* =====================================================================
   INTERACTION LAYER
   ===================================================================== */

/* route progress */
.routebar{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:200;opacity:0;transition:opacity .2s}
.routebar.on{opacity:1}
.routebar span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--crimson),var(--crimson-bright));
  box-shadow:0 0 10px rgba(225,29,72,.6);transition:width .18s ease-out}

/* toasts */
.toaststack{position:fixed;top:16px;right:16px;z-index:210;display:flex;flex-direction:column;gap:10px;
  width:min(360px,calc(100vw - 32px));pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:13px;background:var(--white);
  border:1px solid var(--border);box-shadow:0 12px 34px rgba(11,15,25,.14);position:relative;overflow:hidden;
  pointer-events:auto;opacity:0;transform:translateX(18px) scale(.97);
  transition:opacity .24s cubic-bezier(.32,.72,0,1),transform .24s cubic-bezier(.32,.72,0,1)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateX(18px) scale(.97)}
.ticon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.toast.success .ticon{background:#DCFCE7;color:var(--success)}
.toast.error .ticon{background:#FEE2E2;color:var(--error)}
.toast.warn .ticon{background:#FEF3C7;color:#B45309}
.toast.info .ticon{background:var(--crimson-light);color:var(--crimson)}
.tbody{flex:1;min-width:0;font-size:13px;line-height:1.5;color:var(--text2)}
.tbody strong{display:block;color:var(--text);font-size:13.5px;margin-bottom:2px}
.tclose{color:var(--text2);padding:2px;border-radius:6px;flex:none}
.tclose:hover{color:var(--text)}
.tprogress{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;
  animation:toastlife 5.2s linear forwards}
.toast.success .tprogress{background:var(--success)}
.toast.error .tprogress{background:var(--error)}
.toast.warn .tprogress{background:var(--warning)}
.toast.info .tprogress{background:var(--crimson)}
.toast.held .tprogress{animation-play-state:paused}
@keyframes toastlife{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:900px){
  .toaststack{top:auto;bottom:calc(var(--mtabs,60px) + env(safe-area-inset-bottom) + 12px);
    left:12px;right:12px;width:auto}
  .toast{transform:translateY(18px) scale(.97)}
  .toast.out{transform:translateY(18px) scale(.97)}
}

/* dialog */
/* A class rule setting display always beats the browser's own
   [hidden]{display:none}, because author styles outrank the UA sheet.
   Without this the "hidden" dialog stays a full-screen layer at
   z-index 220 and silently swallows every click on the page. */
.gdialog[hidden]{display:none!important}
.gdialog{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px;
  background:rgba(11,15,25,.5);opacity:0;transition:opacity .22s;backdrop-filter:blur(3px)}
.gdialog.in{opacity:1}
.gsheet{background:var(--white);border-radius:18px;padding:26px 24px 20px;width:min(400px,100%);
  text-align:center;transform:translateY(14px) scale(.96);transition:transform .24s cubic-bezier(.32,.72,0,1);
  box-shadow:0 24px 60px rgba(11,15,25,.26)}
.gdialog.in .gsheet{transform:none}
.gicon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 auto 14px}
.gicon.info{background:var(--crimson-light);color:var(--crimson)}
.gicon.success{background:#DCFCE7;color:var(--success)}
.gicon.error{background:#FEE2E2;color:var(--error)}
.gicon.warn{background:#FEF3C7;color:#B45309}
.gsheet h2{font-size:18px;margin:0 0 6px;letter-spacing:-.02em}
.gsheet p{margin:0 0 20px;font-size:13.5px;color:var(--text2);line-height:1.6}
.gactions{display:flex;gap:10px}
.gactions .btnc{flex:1}
.btnc.danger{background:var(--error)}
.btnc.danger:hover{background:#B91C1C}
@media(max-width:600px){
  .gdialog{place-items:end center;padding:0}
  .gsheet{border-radius:20px 20px 0 0;width:100%;padding-bottom:calc(20px + env(safe-area-inset-bottom));
    transform:translateY(100%)}
}

/* busy buttons */
.btnc,.btn,.gbtn{position:relative}
.busy{color:transparent!important;pointer-events:none}
.busy svg{opacity:0}
.busy:after{content:"";position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .62s linear infinite}
.btnc.ghost.busy:after,.gbtn.busy:after{border-color:rgba(23,23,23,.2);border-top-color:var(--crimson)}
@keyframes spin{to{transform:rotate(360deg)}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.shown{opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.32,.72,0,1) var(--d,0ms),
             transform .42s cubic-bezier(.32,.72,0,1) var(--d,0ms)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* interactive polish */
.q,.acct,.tile,.hintchip,.ccy,.idcard,.drop{will-change:transform}
.q:active,.hintchip:active,.ccy:active{transform:scale(.97)}
.card{transition:box-shadow .2s}
.stat{transition:background .15s;border-radius:8px}
a.stat:hover{background:var(--bg)}


/* =====================================================================
   MOTION
   ===================================================================== */
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.main{animation:pageIn .34s cubic-bezier(.32,.72,0,1) both}
.side{animation:fadeIn .3s both}

/* skeletons */
.skel{position:relative;overflow:hidden;background:#EDF0F4;border-radius:8px}
.skel:after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shimmer 1.25s infinite}
.skel.line{height:12px;margin-bottom:9px}
.skel.line.short{width:52%}
.skel.circle{width:38px;height:38px;border-radius:50%}
.skel.block{height:74px;border-radius:12px}

/* full-screen navigation veil */
.veil{position:fixed;inset:0;z-index:190;background:rgba(247,247,248,.72);
  backdrop-filter:blur(2px);display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity .18s,visibility .18s}
.veil.on{opacity:1;visibility:visible}
.veilbox{display:flex;flex-direction:column;align-items:center;gap:13px}
.veilmark{width:46px;height:46px;border-radius:14px;background:var(--crimson);color:#fff;
  display:grid;place-items:center;animation:floatY 1.5s ease-in-out infinite;
  box-shadow:0 10px 26px rgba(193,18,63,.32)}
.veiltext{font-size:12.5px;color:var(--text2);font-weight:600;letter-spacing:.04em}
.dots{display:flex;gap:5px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--crimson);opacity:.3;
  animation:dotpulse 1.05s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dotpulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ripple */
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.45);animation:rip .55s ease-out forwards}
.btnc.ghost .ripple,.gbtn .ripple,.q .ripple,.ccy .ripple{background:rgba(193,18,63,.18)}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

/* counters and micro-motion */
.tile,.acct,.card{animation:popIn .3s cubic-bezier(.32,.72,0,1) both}
.q{transition:transform .14s,border-color .15s,color .15s,box-shadow .15s}
.q:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,15,25,.07)}
.lrow{animation:fadeIn .3s both}
.stat{animation:fadeIn .26s both}
.hero{animation:popIn .38s cubic-bezier(.32,.72,0,1) both}

@media(prefers-reduced-motion:reduce){
  .main,.side,.tile,.acct,.card,.hero,.lrow,.stat{animation:none!important}
  .veilmark,.dots i,.skel:after{animation:none!important}
}

/* =====================================================================
   DEPTH — customer app
   ===================================================================== */
.card{box-shadow:0 1px 2px rgba(11,15,25,.04),0 8px 24px rgba(11,15,25,.045);
  transition:box-shadow .22s,transform .22s,border-color .2s}
.card:hover{box-shadow:0 2px 4px rgba(11,15,25,.05),0 16px 40px rgba(11,15,25,.075)}
.hero{box-shadow:0 14px 40px rgba(193,18,63,.28),0 2px 6px rgba(193,18,63,.2)}
.tile,.acct,.panel{box-shadow:0 1px 2px rgba(11,15,25,.04),0 6px 18px rgba(11,15,25,.05)}
.gbtn.solid{box-shadow:0 4px 14px rgba(0,0,0,.16)}
.btnc{box-shadow:0 6px 18px rgba(193,18,63,.26)}
.btnc.ghost{box-shadow:none}
.q .gl{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* ambient wash behind the content column */
.main:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(55% 40% at 100% 0%, rgba(193,18,63,.05), transparent 62%),
    radial-gradient(45% 35% at 0% 100%, rgba(99,102,241,.045), transparent 60%)}

/* subtle weave on light panels */
.panel,.rail{background-image:linear-gradient(180deg,#FDFDFE,#fff)}

/* per-page loading veil for customers */
.pageveil{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:rgba(247,247,248,.86);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.pageveil.on{opacity:1;visibility:visible}
.pvbox{display:flex;flex-direction:column;align-items:center;gap:15px}
.pvring{width:54px;height:54px;position:relative}
.pvring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pvring circle{fill:none;stroke-width:4;stroke-linecap:round}
.pvring .bg{stroke:#E9EBF1}
.pvring .fg{stroke:var(--crimson);stroke-dasharray:150;stroke-dashoffset:110;
  animation:pvspin 1.05s cubic-bezier(.6,.2,.4,.8) infinite}
@keyframes pvspin{to{transform:rotate(360deg);transform-origin:50% 50%}}
.pvmark{position:absolute;inset:0;display:grid;place-items:center;color:var(--crimson)}
.pvtext{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--text2)}