/* ==========================================================================
   SANWARIA SOLAR SOLUTION — Customer Portal
   Dark glassmorphism · orange + green + dark blue

   Blur ka usool: jo cheez hilti hai us par backdrop-filter nahi lagta.
   Hilte waqt browser ko har frame par blur dobara banana padta hai, aur
   phone par wo jhilmilata hai. Is liye blur sirf un panel par hai jo
   apni jagah khade rehte hain.
   ========================================================================== */

/* --------------------------------------------------- 01  TOKENS ---------- */
:root{
  /* Gehra neela — poori app ki zameen */
  --bg-900:#F8F1E4;
  --bg-800:#F2E8D6;
  --bg-700:#EFE3CE;

  /* Sanwaria orange */
  --or-600:#7F3D10;
  --or-500:#9A4A14;
  --or-400:#8A4111;
  --or-300:#7F3D10;

  /* Solar green */
  --gr-600:#123E28;
  --gr-500:#17593A;
  --gr-400:#1B6E46;
  --gr-300:#17593A;

  /* Halka neela — link aur info */
  --bl-400:#1A5596;
  --bl-300:#12508F;

  --red-400:#B3261E;
  --amber-400:#8A4111;

  --tx-100:#241C10;
  --tx-70:rgba(36,28,16,.78);
  --tx-45:rgba(36,28,16,.66);
  --tx-30:rgba(36,28,16,.50);

  --line:rgba(60,44,24,.16);
  --line-2:rgba(60,44,24,.22);

  /* Teen kism ke kaagaz (pehle kaanch tha) */
  --g1:rgba(255,252,246,.72);
  --g2:rgba(255,252,246,.88);
  --g3:rgba(255,253,249,.96);

  --grad-or:linear-gradient(135deg,#9A4A14,#B4581B);
  --grad-gr:linear-gradient(135deg,#17593A,#1B6E46);

  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-pill:999px;
  --sh-1:0 1px 3px rgba(110,80,40,.08);
  --sh-2:0 4px 16px rgba(110,80,40,.14);
  --t:.22s cubic-bezier(.4,0,.2,1);

  --nav-h:66px;   /* neeche wali app patti */
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  min-height:100dvh;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.6;
  color:var(--tx-100);
  background:var(--bg-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

/* Peechhe ki halki roshni — sthir hai, is liye blur ke saath safe */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -6%, rgba(213,186,140,.40), transparent 62%),
    radial-gradient(820px 580px at 92% 4%, rgba(178,196,170,.30), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(200,180,142,.32), transparent 62%),
    linear-gradient(180deg,#F8F1E4,#F2E8D6 55%,#F8F1E4);
}

h1,h2,h3,h4{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:600;line-height:1.25;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--or-400);outline-offset:2px;border-radius:6px}

.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
     stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* --------------------------------------------------- 02  LAYOUT ---------- */
.wrap{width:100%;max-width:940px;margin-inline:auto;padding:0 16px}
.pad-nav{padding-bottom:calc(var(--nav-h) + 78px)}   /* Sahayak ke button ke liye jagah */

.glass{
  background:var(--g1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.glass--2{background:var(--g2)}
.glass--3{background:var(--g3);border-color:var(--line-2);box-shadow:var(--sh-2)}
/* Blur sirf sthir panel par */
@supports (backdrop-filter:blur(1px)){
  .glass--blur{backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
}

.card{padding:18px}
@media (min-width:600px){ .card{padding:22px} }

.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--tx-45)}
.small{font-size:.82rem}
.nowrap{white-space:nowrap}
.center{text-align:center}
.mt{margin-top:16px} .mt-lg{margin-top:26px}

/* --------------------------------------------------- 03  TOP BAR ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:#FAF3E6;
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.top__in{display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:940px;margin-inline:auto}
.top__mark{
  width:40px;height:40px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(154,74,20,.16),rgba(27,110,70,.12));
  border:1px solid var(--line-2);
}
.top__mark .ico{width:22px;height:22px;color:var(--or-300)}
.top__t{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.top__t strong{color:var(--tx-100);font-family:'Sora',sans-serif;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top__t small{font-size:.74rem;color:var(--tx-45)}
.top__acts{margin-left:auto;display:flex;align-items:center;gap:8px}

.bell{position:relative;width:40px;height:40px;border-radius:4px;display:grid;place-items:center;
      background:var(--g2);border:1px solid var(--line);cursor:pointer;transition:background var(--t)}
.bell:hover{background:var(--g3)}
.bell .ico{width:19px;height:19px;color:var(--tx-70)}
.bell__n{
  position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--or-500);color:#FFF3E3;
  font-size:.68rem;font-weight:700;display:grid;place-items:center;
  font-family:'Sora',sans-serif;border:2px solid var(--bg-900);
}

/* --------------------------------------------------- 04  BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;min-height:44px;border-radius:var(--r-sm);
  font-family:'Sora',sans-serif;font-size:.88rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform var(--t),background var(--t),border-color var(--t),opacity var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.975)}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}
.btn--or{background:var(--grad-or);color:#FFF3E3;box-shadow:0 6px 20px rgba(234,88,12,.28)}
.btn--gr{background:var(--grad-gr);color:#FFF3E3;box-shadow:0 6px 20px rgba(21,128,61,.26)}
.btn--glass{background:var(--g2);border-color:var(--line-2);color:var(--tx-100)}
.btn--glass:hover{background:var(--g3)}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--tx-70)}
.btn--wa{background:linear-gradient(135deg,#17593A,#1F9D53);color:#FFF3E3}
.btn--block{display:flex;width:100%}
.btn--sm{padding:9px 14px;min-height:38px;font-size:.8rem}
.btn--lg{padding:15px 24px;min-height:52px;font-size:.95rem}
.btn .ico{width:17px;height:17px}

/* --------------------------------------------------- 05  FORMS ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.field label{font-size:.82rem;font-weight:600;color:var(--tx-70)}
.field .req{color:var(--or-400)}
.field .hint{font-size:.76rem;color:var(--tx-45);line-height:1.5}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=search],input[type=url],select,textarea{
  width:100%;padding:12px 14px;min-height:46px;
  background:rgba(255,253,249,.94);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  color:var(--tx-100);transition:border-color var(--t),background var(--t);
}
textarea{min-height:96px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--tx-30)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--or-400);background:rgba(255,255,252,1)}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6244' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
input[type=file]{padding:11px;font-size:.84rem;background:rgba(255,253,249,.94);
  border:1px dashed var(--line-2);border-radius:var(--r-md);cursor:pointer}
input[type=file]::file-selector-button{
  margin-right:11px;padding:7px 13px;border:0;border-radius:var(--r-pill);
  background:rgba(60,44,24,.08);color:var(--tx-100);font-size:.8rem;font-weight:600;cursor:pointer}
.field--lock input,.field--lock textarea{background:rgba(244,236,222,.9);color:var(--tx-45);cursor:not-allowed}

.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.86rem;line-height:1.55}
.check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--or-500);cursor:pointer}

.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* --------------------------------------------------- 06  ALERTS ---------- */
.alert{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-md);margin-bottom:16px;
       font-size:.87rem;line-height:1.6}
.alert .ico{width:18px;height:18px;flex:none;margin-top:2px}
.alert--ok{background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.30);color:#A7F3C8}
.alert--err{background:rgba(248,113,113,.11);border:1px solid rgba(248,113,113,.30);color:#FCC5C5}
.alert--warn{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.30);color:#FDE3A0}
.alert--info{background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.28);color:#C3DCFC}

/* --------------------------------------------------- 07  BADGES ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);
       font-size:.73rem;font-weight:600;font-family:'Sora',sans-serif;white-space:nowrap;
       background:var(--g2);border:1px solid var(--line);color:var(--tx-70)}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge--done{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.32);color:var(--gr-300)}
.badge--now{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.34);color:var(--or-300)}
.badge--wait{background:rgba(60,44,24,.06);border-color:var(--line);color:var(--tx-45)}
.badge--bad{background:rgba(248,113,113,.13);border-color:rgba(248,113,113,.30);color:#FCA5A5}
.badge--info{background:rgba(96,165,250,.13);border-color:rgba(96,165,250,.30);color:var(--bl-300)}

/* --------------------------------------------------- 08  STAT CARDS ---------- */
.stats{display:grid;gap:11px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat{
  padding:14px;border-radius:var(--r-md);background:var(--g2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.stat__n{font-family:'Sora',sans-serif;font-size:1.32rem;font-weight:700;line-height:1.15;
         overflow:hidden;text-overflow:ellipsis}
.stat__l{font-size:.73rem;color:var(--tx-45);line-height:1.4}
.stat--or .stat__n{color:var(--or-400)}
.stat--gr .stat__n{color:var(--gr-400)}
.stat--bl .stat__n{color:var(--bl-400)}

/* --------------------------------------------------- 09  KEY-VALUE ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:.87rem;align-items:baseline}
.kv dt{color:var(--tx-45);white-space:nowrap}
.kv dd{text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere}
@media (max-width:400px){
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:9px}
  .kv dd{text-align:left}
}

/* --------------------------------------------------- 10  TIMELINE ---------- */
.tl{position:relative;padding-left:32px}
.tl::before{content:'';position:absolute;left:13px;top:9px;bottom:9px;width:2px;
            background:linear-gradient(180deg,var(--line-2),transparent)}
.tl__i{position:relative;padding:11px 0}
.tl__i + .tl__i{border-top:1px solid rgba(60,44,24,.12)}
.tl__dot{
  position:absolute;left:-32px;top:12px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:.74rem;font-weight:700;font-family:'Sora',sans-serif;
  background:var(--bg-800);border:1px solid var(--line-2);color:var(--tx-70);z-index:1;
}
.tl__i.is-done .tl__dot{background:var(--grad-gr);border-color:transparent;color:#FFF3E3}
.tl__i.is-now  .tl__dot{background:var(--grad-or);border-color:transparent;color:#FFF3E3}
.tl__i.is-now  .tl__dot::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(154,74,20,.45);animation:tlping 2.1s ease-out infinite}
@keyframes tlping{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.tl__dot .ico{width:15px;height:15px;stroke-width:3}
.tl__h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tl__n{font-size:.9rem;font-weight:600;color:var(--tx-70)}
.tl__i.is-done .tl__n,.tl__i.is-now .tl__n{color:var(--tx-100)}
.tl__sub{font-size:.77rem;color:var(--tx-45);margin-top:3px;line-height:1.55}
.tl__rem{font-size:.79rem;color:var(--tx-70);margin-top:6px;padding:7px 11px;
         background:rgba(255,252,246,.8);border-radius:var(--r-sm);border-left:2px solid var(--or-500)}

/* --------------------------------------------------- 11  PROGRESS ---------- */
.prog{display:flex;align-items:center;gap:11px}
.prog__t{flex:1;height:7px;border-radius:var(--r-pill);background:rgba(60,44,24,.12);overflow:hidden}
.prog__b{height:100%;border-radius:var(--r-pill);background:var(--grad-gr);
         transition:width .7s cubic-bezier(.4,0,.2,1)}
.prog__n{font-family:'Sora',sans-serif;font-size:.8rem;font-weight:700;color:var(--gr-400);white-space:nowrap}

/* --------------------------------------------------- 12  LISTS ---------- */
.list{display:flex;flex-direction:column}
.list__i{display:flex;align-items:flex-start;justify-content:space-between;gap:13px;padding:13px 0}
.list__i + .list__i{border-top:1px solid rgba(60,44,24,.12)}
.list__l{min-width:0;display:flex;flex-direction:column;gap:3px}
.list__l strong{font-size:.89rem;font-weight:600;overflow-wrap:anywhere}
.list__l small{font-size:.77rem;color:var(--tx-45)}
.list__r{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.list__r b{font-family:'Sora',sans-serif;font-size:.92rem}
a.list__i{transition:background var(--t);border-radius:var(--r-sm);
          padding-inline:9px;margin-inline:-9px}
a.list__i:hover{background:rgba(60,44,24,.05)}

/* --------------------------------------------------- 13  SECTION HEAD ---------- */
.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sec h2{font-size:1.02rem}
.sec h3{font-size:.93rem}
.eyebrow{font-size:.71rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
         color:var(--tx-45);margin-bottom:9px}

/* --------------------------------------------------- 14  EMPTY / LOADING ---------- */
.empty{text-align:center;padding:36px 18px}
.empty__i{width:56px;height:56px;margin:0 auto 15px;border-radius:6px;display:grid;place-items:center;
          background:var(--g2);border:1px solid var(--line)}
.empty__i .ico{width:25px;height:25px;color:var(--tx-30)}
.empty h3{font-size:.98rem;margin-bottom:7px}
.empty p{font-size:.86rem;color:var(--tx-45);max-width:340px;margin:0 auto 16px;line-height:1.65}

.skel{background:linear-gradient(90deg,var(--g1),var(--g3),var(--g1));background-size:200% 100%;
      animation:skel 1.4s ease-in-out infinite;border-radius:var(--r-sm)}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

.spin{width:17px;height:17px;border:2px solid rgba(60,44,24,.24);border-top-color:currentColor;
      border-radius:50%;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* --------------------------------------------------- 15  BOTTOM NAV ---------- */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:stretch;
  background:#FAF3E6;
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav__i{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h);color:var(--tx-70);font-size:.68rem;font-weight:600;
  font-family:'Sora',sans-serif;position:relative;transition:color var(--t);
  -webkit-tap-highlight-color:transparent;min-width:0;
}
.nav__i .ico{width:21px;height:21px}
.nav__i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding-inline:2px}
.nav__i:hover{color:var(--tx-70)}
.nav__i.is-on{color:var(--or-400)}
.nav__i.is-on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
                      width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--grad-or)}
.nav__i .bell__n{top:6px;right:calc(50% - 20px)}

/* --------------------------------------------------- 16  MODAL / SHEET ---------- */
.sheet{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;padding:0}
.sheet[hidden]{display:none!important}
.sheet__bg{position:absolute;inset:0;background:rgba(3,7,13,.72);animation:fade .2s ease}
.sheet__in{
  position:relative;width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;
  background:var(--g3);border:1px solid var(--line-2);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:22px 18px calc(24px + env(safe-area-inset-bottom));
  animation:up .26s cubic-bezier(.32,.72,0,1);box-shadow:0 -10px 34px rgba(110,80,40,.20);
}
@media (min-width:600px){
  .sheet{place-items:center}
  .sheet__in{border-radius:var(--r-xl);max-height:84dvh;animation:pop .22s cubic-bezier(.32,.72,0,1)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.sheet__grip{width:38px;height:4px;border-radius:4px;background:var(--line-2);margin:-8px auto 15px}
@media (min-width:600px){ .sheet__grip{display:none} }
.sheet__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:4px;
          display:grid;place-items:center;background:var(--g2);border:1px solid var(--line);cursor:pointer}
.sheet__x .ico{width:16px;height:16px;color:var(--tx-70)}

/* --------------------------------------------------- 17  TABS ---------- */
.tabs{display:flex;gap:6px;margin-bottom:18px;background:rgba(60,44,24,.07);padding:5px;border-radius:var(--r-sm)}
.tabs button{
  flex:1;padding:10px 8px;border-radius:4px;cursor:pointer;border:0;background:transparent;
  font-family:'Sora',sans-serif;font-size:.8rem;font-weight:600;color:var(--tx-45);
  transition:background var(--t),color var(--t);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tabs button.is-on{background:var(--grad-or);color:#FFF3E3}

/* --------------------------------------------------- 18  LOGIN ---------- */
.auth{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
      padding:32px 16px calc(32px + env(safe-area-inset-bottom));max-width:440px;margin-inline:auto}
.auth__logo{width:62px;height:62px;margin:0 auto 16px;border-radius:6px;display:grid;place-items:center;
            background:linear-gradient(145deg,rgba(154,74,20,.16),rgba(27,110,70,.12));
            border:1px solid var(--line-2)}
.auth__logo .ico{width:32px;height:32px;color:var(--or-300)}
.auth__h{text-align:center;margin-bottom:24px}
.auth__h h1{font-size:1.4rem;margin-bottom:5px}
.auth__h p{font-size:.85rem;color:var(--tx-45)}

/* --------------------------------------------------- 19  CELEBRATION ---------- */
.cheer{text-align:center;padding:26px 18px;border-radius:var(--r-lg);position:relative;overflow:hidden;
       background:linear-gradient(150deg,rgba(34,197,94,.15),rgba(249,115,22,.13));
       border:1px solid rgba(34,197,94,.32)}
.cheer__i{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
          background:var(--grad-gr);animation:cheerpop .6s cubic-bezier(.34,1.56,.64,1) both}
.cheer__i .ico{width:32px;height:32px;color:#FFF3E3;stroke-width:2.6}
@keyframes cheerpop{0%{transform:scale(0) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.cheer h3{font-size:1.12rem;margin-bottom:8px;color:var(--gr-300)}
.cheer p{font-size:.95rem;line-height:1.7}
.cheer__amt{font-family:'Sora',sans-serif;font-size:1.75rem;font-weight:700;color:var(--or-300);
            display:block;margin:9px 0}
.spark{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;pointer-events:none}
.cheer.go .spark{animation:spark 1.5s ease-out forwards}
@keyframes spark{
  0%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3) rotate(240deg)}
}
@media (prefers-reduced-motion:reduce){ .spark{display:none} .cheer__i{animation:none} }

/* --------------------------------------------------- 20  LOCK NOTE ---------- */
.lock{display:flex;gap:12px;padding:15px 17px;border-radius:var(--r-md);
      background:rgba(251,146,60,.09);border:1px dashed rgba(251,146,60,.36)}
.lock .ico{width:19px;height:19px;flex:none;color:var(--or-400);margin-top:2px}
.lock p{font-size:.85rem;line-height:1.65;color:var(--tx-70)}

/* --------------------------------------------------- 21  DOC ROW ---------- */
.doc{display:flex;align-items:center;gap:12px;padding:13px 0}
.doc + .doc{border-top:1px solid rgba(60,44,24,.12)}
.doc__i{width:40px;height:40px;flex:none;border-radius:4px;display:grid;place-items:center;
        background:var(--g2);border:1px solid var(--line)}
.doc__i .ico{width:19px;height:19px;color:var(--tx-45)}
.doc__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.doc__t strong{font-size:.87rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc__t small{font-size:.75rem;color:var(--tx-45)}
.doc__a{display:flex;gap:6px;flex:none}
.doc__a .btn{width:36px;height:36px;min-height:36px;padding:0;border-radius:4px}

/* --------------------------------------------------- 22  ASSISTANT ---------- */
.ai-fab{
  position:fixed;right:14px;bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));z-index:80;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--grad-or);border:0;box-shadow:0 8px 26px rgba(234,88,12,.42);
  transition:transform var(--t);
}
.ai-fab:active{transform:scale(.93)}
.ai-fab .ico{width:24px;height:24px;color:#FFF3E3}
.ai{
  position:fixed;right:10px;left:10px;bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom));
  z-index:110;max-width:400px;margin-left:auto;
  display:flex;flex-direction:column;max-height:min(70dvh,540px);
  background:var(--g3);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(110,80,40,.22);overflow:hidden;
}
.ai[hidden]{display:none!important}
.ai__h{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line);flex:none}
.ai__h .ico{width:19px;height:19px;color:var(--or-400)}
.ai__h strong{font-family:'Sora',sans-serif;font-size:.9rem}
.ai__h small{font-size:.72rem;color:var(--tx-45);display:block}
.ai__x{margin-left:auto;width:32px;height:32px;border-radius:4px;display:grid;place-items:center;
       background:var(--g2);border:1px solid var(--line);cursor:pointer}
.ai__x .ico{width:15px;height:15px;color:var(--tx-70)}
.ai__body{flex:1 1 auto;min-height:130px;overflow-y:auto;padding:14px 15px;
          display:flex;flex-direction:column;gap:11px;-webkit-overflow-scrolling:touch}
.ai__msg{max-width:88%;padding:10px 13px;border-radius:6px;font-size:.85rem;line-height:1.62;
         overflow-wrap:anywhere}
.ai__msg--bot{background:var(--g2);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.ai__msg--me{background:var(--grad-or);color:#FFF3E3;border-bottom-right-radius:5px;align-self:flex-end;font-weight:500}
.ai__msg b{font-weight:700}
.ai__chips{flex:0 0 auto;max-height:130px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:6px;
           padding:11px 15px;border-top:1px solid var(--line)}
.ai__chip{padding:7px 12px;border-radius:var(--r-pill);background:var(--g2);border:1px solid var(--line);
          font-size:.76rem;cursor:pointer;color:var(--tx-70);transition:background var(--t);white-space:nowrap}
.ai__chip:hover{background:var(--g3);color:var(--tx-100)}
.ai__ask{display:flex;gap:8px;padding:11px 15px calc(13px + env(safe-area-inset-bottom));
         border-top:1px solid var(--line);flex:none}
.ai__ask input{flex:1;min-height:42px;padding:10px 13px;border-radius:var(--r-pill)}
.ai__ask button{width:42px;height:42px;flex:none;border-radius:50%;border:0;cursor:pointer;
                background:var(--grad-or);display:grid;place-items:center}
.ai__ask button .ico{width:18px;height:18px;color:#FFF3E3}

/* --------------------------------------------------- 23  TOAST ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));z-index:200;
  padding:12px 19px;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;
  background:var(--g3);border:1px solid var(--line-2);box-shadow:var(--sh-2);
  display:flex;align-items:center;gap:9px;max-width:calc(100% - 32px);
  animation:toastin .28s cubic-bezier(.32,.72,0,1);
}
.toast .ico{width:17px;height:17px;flex:none}
.toast--ok{color:var(--gr-300)}
.toast--err{color:#FCA5A5}
@keyframes toastin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* --------------------------------------------------- 24  SUCCESS TICK ---------- */
.tick{width:74px;height:74px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
      background:var(--grad-gr);animation:cheerpop .55s cubic-bezier(.34,1.56,.64,1) both}
.tick .ico{width:36px;height:36px;color:#FFF3E3;stroke-width:3}
.tick--or{background:var(--grad-or)}
.tick--or .ico{color:#FFF3E3}

/* --------------------------------------------------- 25  MISC ---------- */
hr.sep{border:0;border-top:1px solid var(--line);margin:20px 0}
.pill-row{display:flex;gap:7px;flex-wrap:wrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
      background:rgba(60,44,24,.08);padding:2px 8px;border-radius:6px;color:var(--or-300);
      overflow-wrap:anywhere}
.tnum{font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==========================================================================
   26  JAAN — animations

   Ek hi usool poore waqt yaad rakha hai: jo cheez hilti hai, uske peeche
   ya uske upar `backdrop-filter` nahi hona chahiye. Hilte waqt browser ko
   blur har frame par dobara banana padta hai, aur sasta phone wahin
   jhilmilane lagta hai. Is liye yahan sirf saaf cheezein hilti hain —
   opacity, transform aur width. Yeh teeno phone ka GPU bina mehnat ke
   chala leta hai.

   Aur jinke phone me "reduce motion" laga hai, unke liye sab band —
   file ke aakhir me.
   ========================================================================== */

/* ---------- 26.1  Page khulte hi cheezein upar aati hain ---------- */
@keyframes rise{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.rise{opacity:0;animation:rise .5s cubic-bezier(.22,.61,.36,1) forwards}
/* Ek ke baad ek — thodi si der se, taaki lagey ki page "khul raha hai" */
.rise:nth-child(1){animation-delay:.02s}
.rise:nth-child(2){animation-delay:.08s}
.rise:nth-child(3){animation-delay:.14s}
.rise:nth-child(4){animation-delay:.20s}
.rise:nth-child(5){animation-delay:.26s}
.rise:nth-child(6){animation-delay:.32s}
.rise:nth-child(7){animation-delay:.38s}
.rise:nth-child(8){animation-delay:.44s}
.rise:nth-child(n+9){animation-delay:.5s}

/* Neeche wali cheezein tab aati hain jab unke paas pahunchte hain */
.slide{opacity:0;transform:translate3d(0,20px,0);
       transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.slide.in{opacity:1;transform:translate3d(0,0,0)}

/* ---------- 26.2  Upar ka sooraj dheere-dheere ghoomta hai ---------- */
@keyframes sunspin{to{transform:rotate(360deg)}}
.top__mark .ico,.auth__logo .ico{animation:sunspin 44s linear infinite;transform-origin:50% 50%}

/* Halki si dhadkan — jaise dhoop pad rahi ho */
@keyframes sunglow{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}
  50%{box-shadow:0 0 0 5px rgba(249,115,22,.10)}
}
.top__mark{animation:sunglow 4.5s ease-in-out infinite}

/* ---------- 26.3  Header ke neeche bijli ki lakeer ---------- */
.top::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--or-500),var(--gr-400),transparent);
  background-size:220% 100%;
  animation:flow 5.5s linear infinite;opacity:.75;
}
@keyframes flow{from{background-position:220% 0}to{background-position:-220% 0}}
.top{position:sticky;overflow:hidden}

/* ---------- 26.4  Stat card ---------- */
.stat{
  position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),
             border-color .28s ease,background .28s ease;
}
/* Ek chamak jo card par se guzarti hai */
.stat::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.stat.shine::after{animation:shine 1.1s ease-out}
@keyframes shine{to{left:130%}}

@media (hover:hover){
  .stat:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--g3)}
}
.stat__n{transition:color .3s ease}

/* ---------- 26.5  Progress bar 0 se bhar-ta hai ---------- */
.prog__b{
  position:relative;overflow:hidden;
  transition:width 1.15s cubic-bezier(.22,.61,.36,1);
}
.prog__b::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  background-size:60% 100%;background-repeat:no-repeat;
  animation:progshine 2.4s ease-in-out infinite;
}
@keyframes progshine{
  0%{background-position:-70% 0}
  60%,100%{background-position:170% 0}
}

/* ---------- 26.6  Timeline ek-ek kar ke bhar-ti hai ---------- */
.tl__i{opacity:0;transform:translate3d(-6px,0,0);
       transition:opacity .42s ease,transform .42s cubic-bezier(.22,.61,.36,1)}
.tl.on .tl__i{opacity:1;transform:none}
.tl.on .tl__i:nth-child(1){transition-delay:.05s}
.tl.on .tl__i:nth-child(2){transition-delay:.11s}
.tl.on .tl__i:nth-child(3){transition-delay:.17s}
.tl.on .tl__i:nth-child(4){transition-delay:.23s}
.tl.on .tl__i:nth-child(5){transition-delay:.29s}
.tl.on .tl__i:nth-child(6){transition-delay:.35s}
.tl.on .tl__i:nth-child(7){transition-delay:.41s}
.tl.on .tl__i:nth-child(8){transition-delay:.47s}
.tl.on .tl__i:nth-child(9){transition-delay:.53s}
.tl.on .tl__i:nth-child(n+10){transition-delay:.58s}

/* Jo step ho chuke hain, unki lakeer hari ho jaati hai */
.tl__i.is-done::before{
  content:'';position:absolute;left:-19px;top:26px;bottom:-11px;width:2px;
  background:linear-gradient(180deg,var(--gr-500),rgba(34,197,94,.18));
  opacity:0;transition:opacity .5s ease .35s;
}
.tl.on .tl__i.is-done::before{opacity:1}

/* Tick lagne ka chhota sa ishaara */
@keyframes tickin{
  0%{transform:scale(.4) rotate(-30deg);opacity:0}
  60%{transform:scale(1.14) rotate(4deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.tl.on .tl__i.is-done .tl__dot .ico{animation:tickin .42s cubic-bezier(.34,1.56,.64,1) both}
.tl.on .tl__i:nth-child(2).is-done .tl__dot .ico{animation-delay:.11s}
.tl.on .tl__i:nth-child(3).is-done .tl__dot .ico{animation-delay:.17s}
.tl.on .tl__i:nth-child(4).is-done .tl__dot .ico{animation-delay:.23s}
.tl.on .tl__i:nth-child(5).is-done .tl__dot .ico{animation-delay:.29s}
.tl.on .tl__i:nth-child(6).is-done .tl__dot .ico{animation-delay:.35s}
.tl.on .tl__i:nth-child(n+7).is-done .tl__dot .ico{animation-delay:.41s}

/* ---------- 26.7  Card ko chhoone par ---------- */
@media (hover:hover){
  a.glass{transition:transform .26s cubic-bezier(.22,.61,.36,1),border-color .26s ease,background .26s ease}
  a.glass:hover{transform:translateY(-2px);border-color:var(--line-2);background:var(--g3)}
}
.glass{transition:border-color .26s ease}

/* ---------- 26.8  Referral code par chamak ---------- */
.code-shine{position:relative;overflow:hidden;display:inline-block}
.code-shine::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(251,146,60,.30),transparent);
  transform:skewX(-20deg);animation:codeshine 3.6s ease-in-out infinite;
}
@keyframes codeshine{
  0%{left:-70%}
  45%,100%{left:150%}
}

/* ---------- 26.9  Neeche wali patti ---------- */
.nav__i .ico{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.nav__i.is-on .ico{transform:translateY(-2px) scale(1.09)}
.nav__i:active .ico{transform:scale(.88)}
.nav__i.is-on::before{animation:navbar .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes navbar{from{width:0;opacity:0}to{width:26px;opacity:1}}

/* ---------- 26.10  Bina padhi khabar ki ghanti ---------- */
@keyframes bellring{
  0%,88%,100%{transform:rotate(0)}
  90%{transform:rotate(11deg)}
  93%{transform:rotate(-9deg)}
  96%{transform:rotate(5deg)}
}
.bell:has(.bell__n) .ico{animation:bellring 5.5s ease-in-out infinite;transform-origin:50% 15%}
@keyframes ndot{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}
.bell__n{animation:ndot 2.2s ease-in-out infinite}

/* ---------- 26.11  Sahayak ka button ---------- */
@keyframes fabfloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.ai-fab{animation:fabfloat 3.4s ease-in-out infinite}
.ai-fab::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(251,146,60,.5);animation:fabping 3s ease-out infinite;
}
@keyframes fabping{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(1.45);opacity:0}
}
.ai-fab .ico{animation:sunspin 12s linear infinite}
.ai-fab:active{animation:none}

/* Sahayak ka jawab neeche se aata hai */
@keyframes msgin{
  from{opacity:0;transform:translate3d(0,9px,0) scale(.97)}
  to{opacity:1;transform:none}
}
.ai__msg{animation:msgin .3s cubic-bezier(.22,.61,.36,1)}

/* ---------- 26.12  Button dabane par ---------- */
.btn--or,.btn--gr{position:relative;overflow:hidden}
.btn--or::after,.btn--gr::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
@media (hover:hover){
  .btn--or:hover::after,.btn--gr:hover::after{animation:shine .75s ease-out}
  .btn--or:hover,.btn--gr:hover{transform:translateY(-1px)}
}

/* ---------- 26.13  Khaali page bhi thoda zinda ---------- */
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.empty__i{animation:bob 3.6s ease-in-out infinite}

/* ---------- 26.14  Login page ---------- */
.auth__logo{animation:rise .55s cubic-bezier(.22,.61,.36,1) both}
.auth__h{animation:rise .55s cubic-bezier(.22,.61,.36,1) .08s both}
.auth>section{animation:rise .55s cubic-bezier(.22,.61,.36,1) .16s both}
.tabs button{transition:background .26s ease,color .26s ease,transform .2s ease}
.tabs button:active{transform:scale(.96)}

/* ---------- 26.15  Sab band, jinhone kaha ho ---------- */
@media (prefers-reduced-motion:reduce){
  .rise,.slide,.tl__i,.ai__msg,.auth__logo,.auth__h,.auth>section{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
  }
  .top::after,.top__mark,.top__mark .ico,.auth__logo .ico,.ai-fab,.ai-fab::after,.ai-fab .ico,
  .bell .ico,.bell__n,.empty__i,.prog__b::after,.stat::after,.code-shine::after,
  .tl__i.is-done .tl__dot .ico{
    animation:none!important;
  }
  .tl__i.is-done::before{opacity:1!important;transition:none!important}
  .prog__b{transition:none!important}
}

/* ==========================================================================
   27  HERO — ghar wale page ka zinda drishya

   Sooraj se dhoop panel par girti hai, panel se bijli ghar tak jaati hai —
   aur yeh chalta hi rehta hai. Page kholte hi lagta hai ki system kaam kar
   raha hai.

   Yahan bhi wahi usool: iske upar ya peechhe koi backdrop-filter nahi hai,
   sirf opacity aur transform hilte hain. Is liye purane phone par bhi
   atakta nahi.
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:0;border-radius:var(--r-lg);
  background:
    radial-gradient(420px 200px at 78% 12%, rgba(249,115,22,.20), transparent 66%),
    radial-gradient(380px 220px at 18% 92%, rgba(22,163,74,.16), transparent 64%),
    linear-gradient(160deg,rgba(255,252,246,.9),rgba(250,243,230,.8));
  border:1px solid var(--line-2);
}
.hero__art{display:block;width:100%;height:auto}

.hero__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:0 16px 15px;
}
.hero__kw{
  font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:700;
  display:flex;align-items:baseline;gap:7px;
}
.hero__kw small{font-size:.74rem;font-weight:500;color:var(--tx-45)}

/* ---- Sooraj ---- */
.h-rays{transform-origin:76px 42px;animation:sunspin 26s linear infinite}
.h-sun{transform-origin:76px 42px;animation:hsun 4s ease-in-out infinite}
@keyframes hsun{
  0%,100%{opacity:.94;transform:scale(1)}
  50%{opacity:1;transform:scale(1.045)}
}
.h-halo{transform-origin:76px 42px;animation:hhalo 4s ease-in-out infinite}
@keyframes hhalo{
  0%,100%{opacity:.16;transform:scale(1)}
  50%{opacity:.30;transform:scale(1.14)}
}

/* ---- Dhoop panel par girti hui ---- */
.h-ray{
  stroke-dasharray:5 11;
  animation:hray 1.9s linear infinite;
  opacity:.7;
}
@keyframes hray{to{stroke-dashoffset:-32}}
.h-ray:nth-of-type(2){animation-delay:-.5s}
.h-ray:nth-of-type(3){animation-delay:-1s}
.h-ray:nth-of-type(4){animation-delay:-1.4s}

/* ---- Panel ki chamak ---- */
.h-glint{animation:hglint 5.5s ease-in-out infinite;opacity:0}
@keyframes hglint{
  0%,72%,100%{opacity:0;transform:translateX(0)}
  78%{opacity:.55}
  92%{opacity:0;transform:translateX(56px)}
}

/* ---- Bijli panel se ghar tak ---- */
.h-wire{stroke-dasharray:3 5;animation:hwire 1.1s linear infinite}
@keyframes hwire{to{stroke-dashoffset:-16}}

.h-spark{opacity:0;animation:hspark 2.6s ease-in-out infinite}
@keyframes hspark{
  0%{opacity:0;transform:translateX(0)}
  12%{opacity:1}
  78%{opacity:1}
  90%,100%{opacity:0;transform:translateX(70px)}
}
.h-spark:nth-of-type(2){animation-delay:-.85s}
.h-spark:nth-of-type(3){animation-delay:-1.7s}

/* ---- Ghar ki batti jalti hai ---- */
.h-bulb{animation:hbulb 2.6s ease-in-out infinite}
@keyframes hbulb{
  0%,100%{opacity:.35}
  55%{opacity:1}
}

/* ---- Hawa me tairte kan ---- */
.h-dust{animation:hdust 7s ease-in-out infinite;opacity:0}
@keyframes hdust{
  0%{opacity:0;transform:translate(0,0)}
  22%{opacity:.5}
  70%{opacity:.3}
  100%{opacity:0;transform:translate(14px,-26px)}
}
.h-dust:nth-of-type(2){animation-delay:-2.4s}
.h-dust:nth-of-type(3){animation-delay:-4.6s}
.h-dust:nth-of-type(4){animation-delay:-5.9s}

/* ---- Zameen ki lakeer ---- */
.h-ground{
  stroke-dasharray:2 6;animation:hwire 3.4s linear infinite;opacity:.34;
}

@media (prefers-reduced-motion:reduce){
  .h-rays,.h-sun,.h-halo,.h-ray,.h-glint,.h-wire,.h-spark,.h-bulb,.h-dust,.h-ground{
    animation:none!important;
  }
  .h-spark,.h-dust{opacity:.75}
  .h-bulb{opacity:1}
  .h-glint{opacity:0}
}

/* ==========================================================================
   28. Complaint dobara kholna
   ========================================================================== */
.reopen{margin-top:4px}
.reopen summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--or-400);
                list-style:none;padding:9px 0;display:flex;align-items:center;gap:8px}
.reopen summary::-webkit-details-marker{display:none}
.reopen summary::before{content:"+";font-size:1.05rem;line-height:1;
                        width:20px;height:20px;flex:none;border-radius:6px;
                        display:grid;place-items:center;
                        background:rgba(255,252,246,.9);border:1px solid rgba(60,44,24,.16)}
.reopen[open] summary::before{content:"–"}
.reopen summary:hover{color:var(--or-300)}

/* Kaaran wali patti — "nahi bana" ya "reward wapas" ke saath wajah.
   Halka laal, taaki nazar to jaye par darawna na lage. */
.why{
  margin-top:10px;padding:10px 13px;border-radius:4px;
  font-size:.82rem;line-height:1.65;color:var(--tx-70);
  background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.22);
}
.why strong{display:block;color:#FCA5A5;margin-bottom:3px}
.why .muted{display:block;margin-top:5px;font-size:.76rem}

/* Sanwaria Verified — customer ke apne portal me.
   Neeche chhoti line hamesha rehti hai: badge ka matlab kya hai aur kab
   laga. Sirf nishan dikhana adhoora hai. */
.vwrap{
  display:flex;align-items:center;gap:13px;
  padding:15px 17px;border-radius:6px;
  background:linear-gradient(135deg,rgba(45,212,141,.16),rgba(245,183,32,.10));
  border:1px solid rgba(45,212,141,.32);
}
.vwrap__tick{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#17593A,#1B6E46);color:#FFF3E3;
}
.vwrap__tick .ico{width:22px;height:22px}
.vwrap__txt strong{display:block;font-family:'Sora',sans-serif;font-size:1.02rem;color:#8FF0C4}
.vwrap__txt small{display:block;font-size:.79rem;line-height:1.5;color:var(--tx-45);margin-top:3px}