/* Account & checkout group — auth.html, cart.html, checkout.html,
   profile.html, 404.html. Prefixes: ac- shared, am- address modal,
   au- auth, ct- cart, co- checkout, pf- profile, nf- 404. */

/* =================================================== shared (ac-) */
.ac-page{padding:28px 0 64px}
@media (max-width:768px){.ac-page{padding:14px 0 36px}}
.is-muted{color:var(--gray-400)!important;font-weight:600!important}
.ac-free{color:var(--green);font-weight:900}

/* summary sidebar */
.ac-side{position:sticky;top:calc(var(--topbar-h) + var(--header-h) + 20px);display:flex;flex-direction:column;gap:14px;align-self:start}
.ac-side[hidden]{display:none}
.ac-sum{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.ac-sum::before{content:"";position:absolute;left:-70px;top:-90px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,107,.28),transparent 68%);pointer-events:none}
.ac-sum-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:17px;font-weight:900;color:var(--blue-900);position:relative}
.ac-sum-title span{font-size:12px;font-weight:700;color:var(--gray-600);background:var(--gray-100);padding:2px 10px;border-radius:var(--radius-pill)}
.ac-rows{margin:0;display:flex;flex-direction:column;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--gray-200)}
.ac-rows>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.ac-rows dt{color:var(--gray-600)}
.ac-rows dd{margin:0;font-weight:800;color:var(--gray-900);white-space:nowrap}
.ac-rows small,.ac-total small,.ac-payable small,.ac-profit small{font-weight:500;font-size:11px;color:var(--gray-500)}
.ac-rows .is-gold dt,.ac-rows .is-gold dd{color:var(--gold-700)}
.ac-total{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ac-total span{font-size:14px;font-weight:800;color:var(--blue-900)}
.ac-total b{font-size:20px;font-weight:900;color:var(--blue-900);white-space:nowrap}
.ac-payable{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--grad-navy);border-radius:16px;padding:12px 14px;color:#dbeafe;font-size:13px;font-weight:700}
.ac-payable b{font-size:18px;font-weight:900;color:var(--yellow-400);white-space:nowrap}
.ac-payable small,.ac-payable b small{color:#cfe0ff}
.ac-profit{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--green);font-size:13px;font-weight:800;background:rgba(18,166,106,.08);border-radius:12px;padding:8px 12px}
.ac-profit span{display:inline-flex;align-items:center;gap:6px}
.ac-profit svg{width:16px;height:16px}
.ac-go{min-height:52px;font-size:15px}
.ac-lock{display:flex;align-items:center;gap:8px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:14px;padding:10px 12px;font-size:12px;font-weight:600;color:var(--blue-900);line-height:1.7}
.ac-lock>svg{width:18px;height:18px;color:var(--blue-600);flex-shrink:0}
.ac-lock-t{margin-right:auto;background:#fff;border-radius:10px;padding:2px 10px;font-size:14px;font-weight:900;color:var(--blue-700);font-variant-numeric:tabular-nums;direction:ltr;box-shadow:var(--shadow-sm);min-width:64px;text-align:center;flex-shrink:0}
.ac-lock.is-expired{background:var(--yellow-100);border-color:rgba(231,182,70,.45);color:var(--gold-700);align-items:flex-start}
.ac-lock.is-expired>svg{color:var(--gold-600);margin-top:3px}
.ac-lock.is-expired>div{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ac-lock .btn{background:#fff;color:var(--blue-700);border:1px solid var(--blue-100)}
.ac-trust{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:8px 16px;box-shadow:var(--shadow-sm)}
.ac-trust li{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--gray-600);padding:8px 0}
.ac-trust li+li{border-top:1px solid var(--gray-100)}
.ac-trust svg{width:20px;height:20px;color:var(--gold-600)}

/* mobile bottom bar (total + CTA), sits above the shared bottom nav */
.ac-mbar{display:none}
@media (max-width:1023.98px){
  .ac-side{position:static}
  .ac-mbar:not([hidden]){display:flex;position:fixed;right:0;left:0;bottom:0;z-index:8990;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--gray-200);box-shadow:0 -10px 28px rgba(16,24,40,.08);animation:acUp .25s ease both}
  .ac-mbar .btn{min-height:46px;padding:8px 24px;flex:0 0 auto}
  .ac-mbar-total{display:flex;flex-direction:column;line-height:1.5;min-width:0}
  .ac-mbar-total small{font-size:11px;color:var(--gray-500);font-weight:600}
  .ac-mbar-total b{font-size:16px;font-weight:900;color:var(--blue-900);white-space:nowrap}
  .ac-mbar-total b small{font-size:11px;font-weight:500;color:var(--gray-500)}
  body.ac-has-mbar .site-footer{padding-bottom:80px}
  body.ac-has-mbar .ac-side .ac-go{display:none}
}
@media (max-width:767.98px){
  .ac-mbar:not([hidden]){bottom:calc(64px + env(safe-area-inset-bottom));padding-bottom:10px;border-radius:20px 20px 0 0}
  body.ac-has-mbar .site-footer{padding-bottom:calc(64px + 80px + env(safe-area-inset-bottom))}
}
@keyframes acUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* step indicator (tabdealgold.ir .step:before gold numbered tiles) */
.ac-steps-wrap{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px 28px;margin-bottom:24px}
.ac-steps{display:flex;align-items:center}
.ac-step{flex:1;display:flex;align-items:center;min-width:0}
.ac-step:last-child{flex:0 0 auto}
.ac-step:not(:last-child)::after{content:"";flex:1;height:3px;margin:0 18px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--gray-300) 0 7px,transparent 7px 13px)}
.ac-step.is-done::after{background:var(--grad-gold)}
.ac-step button{display:flex;align-items:center;gap:12px;text-align:right;padding:4px;border-radius:18px;flex-shrink:0}
.ac-step button:disabled{cursor:default}
.ac-step.is-done button:hover .ac-step-n{transform:translateY(-2px)}
.ac-step-n{width:40px;height:40px;border-radius:16px;display:grid;place-items:center;font-weight:950;font-size:16px;background:var(--gray-100);color:var(--gray-400);flex-shrink:0;transition:transform .18s,background .18s}
.ac-step-n svg{width:20px;height:20px;stroke-width:2.8}
.ac-step.is-active .ac-step-n{background:var(--grad-gold);color:var(--blue-900);box-shadow:var(--shadow-gold)}
.ac-step.is-done .ac-step-n{background:var(--yellow-100);color:var(--gold-700);box-shadow:inset 0 0 0 1px rgba(231,182,70,.5)}
.ac-step-l{display:flex;flex-direction:column;line-height:1.5;font-size:15px;font-weight:800;color:var(--gray-400);white-space:nowrap}
.ac-step-l small{font-size:11px;font-weight:600;color:var(--gray-400)}
.ac-step.is-active .ac-step-l{color:var(--blue-900)}
.ac-step.is-done .ac-step-l{color:var(--gray-700)}
@media (max-width:640px){
  .ac-steps-wrap{padding:14px 10px;margin-bottom:14px;border-radius:var(--radius-md)}
  .ac-steps{align-items:flex-start}
  .ac-step{align-items:flex-start}
  .ac-step:not(:last-child)::after{margin:17px 4px 0}
  .ac-step button{flex-direction:column;gap:6px;text-align:center;width:72px}
  .ac-step-l{font-size:11px;white-space:normal;line-height:1.5}
  .ac-step-l small{display:none}
  .ac-step-n{width:36px;height:36px;border-radius:14px;font-size:14px}
}

/* radio option cards */
.ac-opt{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);background:#fff;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;position:relative}
.ac-opt:hover{border-color:var(--blue-500)}
.ac-opt.is-on{border-color:var(--blue-600);background:var(--blue-50);box-shadow:0 0 0 4px rgba(11,111,251,.08)}
.ac-opt:has(input:focus-visible),.co-addr:has(input:focus-visible),.co-bank:has(input:focus-visible){outline:2px solid var(--blue-500);outline-offset:2px}
.ac-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--gray-300);flex-shrink:0;display:grid;place-items:center;background:#fff;transition:.18s}
.is-on>.ac-radio{border-color:var(--blue-600);background:var(--grad-blue)}
.is-on>.ac-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.ac-opt-ic{width:46px;height:46px;border-radius:16px;background:var(--blue-100);color:var(--blue-700);display:grid;place-items:center;flex-shrink:0;transition:.18s}
.ac-opt-ic svg{width:24px;height:24px}
.ac-opt.is-on .ac-opt-ic{background:var(--grad-gold);color:var(--blue-900);box-shadow:var(--shadow-gold)}
.ac-opt-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-opt-body b{font-size:15px;font-weight:800;color:var(--blue-900);line-height:1.6}
.ac-opt-body small{font-size:12px;color:var(--gray-500);line-height:1.7}
.ac-opt-price{font-weight:900;color:var(--blue-900);white-space:nowrap;font-size:14px}
.ac-opt-price small{font-weight:500;color:var(--gray-500);font-size:11px}
@media (max-width:576px){
  .ac-opt{flex-wrap:wrap;gap:10px 12px;padding:14px}
  .ac-opt-ic{width:40px;height:40px;border-radius:14px}
  .ac-opt-body b{font-size:14px}
  .ac-opt-price{width:100%;padding-right:34px;font-size:13px}
}

/* bank monograms + spinner + fake gateway */
.ac-bank{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:17px;flex-shrink:0;box-shadow:var(--shadow-sm)}
.ac-bank-mellat{background:linear-gradient(135deg,var(--red),var(--gold-600))}
.ac-bank-saman{background:var(--grad-blue)}
.ac-bank-pasargad{background:linear-gradient(135deg,var(--gray-800),var(--gold-500))}
.ac-bank-sadad{background:var(--grad-navy)}
.ac-spin{width:46px;height:46px;border-radius:50%;border:4px solid var(--blue-100);border-top-color:var(--blue-600);border-left-color:var(--gold-500);animation:acSpin .8s linear infinite}
.ac-spin-sm{width:30px;height:30px;border-width:3px}
.ac-spin-xs{width:18px;height:18px;border-width:2px;border-color:rgba(255,255,255,.35);border-top-color:#fff;display:inline-block}
@keyframes acSpin{to{transform:rotate(360deg)}}
.ac-gw{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:18px 6px 6px}
.ac-gw .ac-bank{width:64px;height:64px;border-radius:22px;font-size:26px}
.ac-gw h2{font-size:17px;font-weight:900;color:var(--blue-900)}
.ac-gw-amt{display:flex;flex-direction:column;gap:2px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:16px;padding:10px 24px}
.ac-gw-amt span{font-size:12px;color:var(--gray-500)}
.ac-gw-amt b{font-size:20px;font-weight:900;color:var(--blue-900)}
.ac-gw-amt small{font-size:12px;font-weight:500;color:var(--gray-500)}
.ac-gw-msg{font-size:14px;font-weight:700;color:var(--gray-700)}
.ac-gw>small{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--gray-500)}
.ac-gw>small svg{width:14px;height:14px;color:var(--gold-600)}

/* =========================================== address modal (am-) */
.am-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.am-full{grid-column:1 / -1}
.am-ltr{direction:ltr;text-align:left}
.am-ltr:placeholder-shown{direction:rtl;text-align:right}
.am-sep{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:var(--blue-900);padding-top:12px;border-top:1px dashed var(--gray-200)}
.am-sep svg{width:18px;height:18px;color:var(--gold-600)}
.am-foot{display:flex;gap:10px;justify-content:flex-end;width:100%}
.am-modal .textarea{min-height:88px}
.select:disabled{opacity:.6;cursor:not-allowed}
@media (max-width:576px){.am-grid{grid-template-columns:1fr}.am-foot .btn{flex:1}}

/* ====================================================== auth (au-) */
.au-page{position:relative;overflow:hidden;padding:56px 0 72px;min-height:calc(100vh - 96px);display:flex;align-items:center}
.au-bg{position:absolute;inset:0;pointer-events:none}
.au-orb{position:absolute;border-radius:50%}
.au-orb.o1{width:560px;height:560px;right:-180px;top:-160px;background:radial-gradient(circle,rgba(11,111,251,.14),transparent 65%)}
.au-orb.o2{width:520px;height:520px;left:-160px;bottom:-200px;background:radial-gradient(circle,rgba(255,214,107,.40),transparent 65%)}
.au-ring{position:absolute;left:50%;top:50%;width:820px;height:820px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(198,138,38,.16)}
.au-ring::before,.au-ring::after{content:"";position:absolute;inset:70px;border-radius:50%;border:1px solid rgba(11,111,251,.10)}
.au-ring::after{inset:150px;border-color:rgba(198,138,38,.14)}
.au-bar{position:absolute;width:96px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--yellow-100),var(--gold-500),var(--gold-700));box-shadow:0 20px 30px rgba(155,104,20,.22)}
.au-bar.b1{left:calc(50% - 300px);top:calc(50% + 110px);transform:rotate(-12deg)}
.au-bar.b2{left:calc(50% - 262px);top:calc(50% + 150px);width:80px;height:38px;transform:rotate(9deg)}
.au-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px}
.au-card{width:100%;max-width:448px;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:36px 32px 30px;position:relative}
.au-logo{display:flex;justify-content:center;margin-bottom:26px}
.au-logo .brand-mark{width:46px;height:46px;border-radius:16px;font-size:22px}
.au-logo .brand-text b{font-size:22px}
.au-step{display:flex;flex-direction:column;gap:6px}
.au-step.fade-in{animation:auFade .3s ease both}
@keyframes auFade{from{opacity:0}to{opacity:1}}
.au-title{font-size:22px;font-weight:900;color:var(--blue-900);text-align:center;letter-spacing:-.3px;line-height:1.6}
.au-sub{font-size:14px;color:var(--gray-600);text-align:center;line-height:1.9}
.au-num{color:var(--blue-900);font-weight:900;display:inline-block}
.au-form{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.au-input{position:relative}
.au-input>svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gray-400);pointer-events:none}
.au-input .input{padding-right:44px;min-height:52px;font-size:16px}
.au-input .input:focus+svg,.au-input:focus-within>svg{color:var(--blue-600)}
.au-input:has(.au-eye) .input{padding-left:50px}
.au-ltr{direction:ltr;text-align:left;letter-spacing:.6px}
.au-ltr:placeholder-shown{direction:rtl;text-align:right;letter-spacing:0}
.au-eye{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--gray-400)}
.au-eye:hover,.au-eye.is-on{color:var(--blue-700);background:var(--blue-50)}
.au-eye svg{width:20px;height:20px}
.au-terms{font-size:12px;color:var(--gray-500);text-align:center;margin-top:18px;line-height:1.9}
.au-terms a{color:var(--blue-700);font-weight:800;border-bottom:1px solid currentColor}
.au-back{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:13px;background:var(--gray-50);border:1px solid var(--gray-200);display:grid;place-items:center;color:var(--gray-700);transition:.18s}
.au-back:hover{background:var(--blue-50);color:var(--blue-700)}
.au-back svg{width:20px;height:20px}
.au-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue-700);font-weight:800;font-size:13px;transition:color .18s}
.au-link:hover{color:var(--blue-600)}
.au-link svg{width:16px;height:16px}
.au-edit{align-self:center}
.au-otp{display:flex;justify-content:center;gap:12px}
.au-box{width:62px;height:66px;border:1.5px solid var(--gray-200);border-radius:18px;background:var(--gray-50);text-align:center;font-size:26px;font-weight:900;color:var(--blue-900);outline:none;transition:border-color .18s,box-shadow .18s,background .18s;font-family:inherit;padding:0;caret-color:var(--blue-600)}
.au-box:focus{border-color:var(--blue-500);background:#fff;box-shadow:0 0 0 4px rgba(11,111,251,.10)}
.au-box.is-filled{border-color:var(--gold-500);background:var(--yellow-100)}
.au-box.is-invalid{border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(229,72,77,.08)}
.is-shake .au-otp{animation:auShake .4s ease}
@keyframes auShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.au-otp-err{text-align:center;margin:-8px 0 -6px;min-height:18px}
.au-resend{display:flex;justify-content:center;font-size:13px;color:var(--gray-500);min-height:24px}
.au-timer{display:inline-flex;align-items:center;gap:6px}
.au-timer svg{width:16px;height:16px;color:var(--gray-400)}
.au-timer b{color:var(--blue-700);direction:ltr;font-variant-numeric:tabular-nums;font-weight:900}
.au-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--gold-700);background:var(--yellow-100);border:1px dashed rgba(198,138,38,.45);border-radius:12px;padding:8px 12px;margin-top:16px}
.au-hint svg{width:16px;height:16px}
.au-hint-warn{margin:0 0 16px;justify-content:flex-start;text-align:right;line-height:1.8;color:var(--red);background:rgba(229,72,77,.06);border-color:rgba(229,72,77,.35)}
.au-alt{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--gray-100)}
.au-alt .au-forgot{color:var(--gray-500)}
.au-alt .au-forgot:hover{color:var(--blue-700)}
.au-okchip{align-self:center;display:inline-flex;align-items:center;gap:6px;background:rgba(18,166,106,.10);color:var(--green);font-size:12px;font-weight:800;border-radius:var(--radius-pill);padding:4px 12px;margin-bottom:6px}
.au-okchip svg{width:16px;height:16px}
.au-rules{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--gray-500);margin-top:-4px}
.au-rules li{display:flex;align-items:center;gap:8px;transition:color .18s}
.au-rules svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--gray-100);color:var(--gray-400);stroke-width:3}
.au-rules li.is-ok{color:var(--green)}
.au-rules li.is-ok svg{background:var(--green);color:#fff}
.au-skip{width:100%!important;margin-top:-6px}
.au-done{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 8px}
.au-done-ic svg{width:60px;height:60px;color:var(--green)}
.au-perks{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--gray-600);font-weight:700}
.au-perks li{display:flex;align-items:center;gap:6px}
.au-perk-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:#fff;box-shadow:var(--shadow-sm)}
.au-perk-ic svg{width:16px;height:16px;color:var(--gold-600)}
@media (max-width:576px){
  .au-page{padding:20px 0 40px;align-items:flex-start;min-height:0}
  .au-card{padding:28px 18px 22px;border-radius:var(--radius-lg)}
  .au-back{top:14px;right:14px;width:36px;height:36px}
  .au-logo{margin-bottom:20px}
  .au-title{font-size:19px}
  .au-sub{font-size:13px}
  .au-box{width:58px;height:62px;font-size:24px}
  .au-bar{display:none}
}

/* ====================================================== cart (ct-) */
.ct-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.ct-layout.is-empty{grid-template-columns:minmax(0,1fr)}
.ct-main{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;min-width:0}
.ct-tabs{display:flex;gap:24px;padding:0 24px;border-bottom:1px solid var(--gray-200);overflow-x:auto}
.ct-tab{display:inline-flex;align-items:center;gap:8px;padding:18px 2px 16px;font-size:15px;font-weight:700;color:var(--gray-500);border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .18s,border-color .18s;white-space:nowrap}
.ct-tab:hover{color:var(--gray-800)}
.ct-tab.is-active{color:var(--blue-900);font-weight:900;border-bottom-color:var(--blue-600)}
.ct-count{min-width:24px;height:22px;padding:0 7px;border-radius:var(--radius-pill);background:var(--gray-100);color:var(--gray-600);font-size:12px;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.ct-tab.is-active .ct-count{background:var(--yellow-100);color:var(--gold-700)}
.ct-list{padding:4px 24px}
.ct-skel{height:112px;margin:20px 0;border-radius:var(--radius-md)}
.ct-note{display:flex;align-items:center;gap:8px;margin:16px 0 4px;padding:10px 14px;border-radius:14px;background:var(--blue-50);color:var(--blue-900);font-size:12px;font-weight:600}
.ct-note svg{width:18px;height:18px;color:var(--blue-600);flex-shrink:0}
.ct-item{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px 20px;padding:22px 0;border-bottom:1px solid var(--gray-100);align-items:center}
.ct-item:last-child{border-bottom:0}
.ct-img{width:120px;height:120px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--gray-200);background:#fff;display:block;box-shadow:inset 0 0 28px 8px rgba(16,24,40,.03)}
.ct-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ct-img:hover img{transform:scale(1.05)}
.ct-item.is-out .ct-img img{filter:grayscale(.6);opacity:.7}
.ct-info{display:flex;flex-direction:column;gap:10px;min-width:0;align-items:flex-start}
.ct-name{font-size:16px;font-weight:800;color:var(--gray-900);line-height:1.7}
.ct-name a:hover{color:var(--blue-700)}
.ct-meta{display:flex;flex-wrap:wrap;gap:6px}
.ct-meta-i{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--gray-700);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-pill);padding:2px 10px;line-height:1.8}
.ct-meta-i svg{width:14px;height:14px;color:var(--gold-600)}
.ct-actions{display:flex;gap:6px 18px;flex-wrap:wrap}
.ct-act{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--blue-700);padding:4px 0;transition:color .18s}
.ct-act:hover{color:var(--blue-600)}
.ct-act svg{width:16px;height:16px}
.ct-act-del{color:var(--gray-500)}
.ct-act-del:hover{color:var(--red)}
.ct-buy{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.ct-price{display:flex;flex-direction:column;align-items:flex-end;text-align:left;line-height:1.6}
.ct-price s{font-size:12px;color:var(--gray-400)}
.ct-price b{font-size:19px;font-weight:900;color:var(--blue-900)}
.ct-price small{font-size:12px;color:var(--gray-500)}
.ct-unit{font-size:11px;color:var(--gray-500);margin-top:2px}
.ct-qty{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gray-200);border-radius:15px;padding:4px;background:#fff;box-shadow:var(--shadow-sm)}
.ct-qbtn{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--blue-700);background:var(--blue-50);transition:.18s}
.ct-qbtn:hover{background:var(--blue-100)}
.ct-qbtn svg{width:18px;height:18px}
.ct-qbtn[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.ct-qbtn[data-act="remove"]{color:var(--red);background:rgba(229,72,77,.08)}
.ct-qv{min-width:26px;text-align:center;font-weight:900;font-size:17px;color:var(--blue-900)}
.ct-main .empty{padding:64px 16px}
.ct-reco{margin-top:56px}
@media (max-width:1180px){.ct-layout{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:1023.98px){.ct-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .ct-main{border-radius:var(--radius-md)}
  .ct-tabs{padding:0 14px;gap:18px}
  .ct-tab{font-size:14px;padding:14px 2px 12px}
  .ct-list{padding:0 14px}
  .ct-item{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:16px 0}
  .ct-img{width:88px;height:88px;border-radius:14px}
  .ct-name{font-size:14px}
  .ct-info{gap:8px}
  .ct-meta-i{font-size:11px;padding:1px 8px}
  .ct-buy{grid-column:1 / -1;flex-direction:row-reverse;justify-content:space-between;align-items:center;background:var(--gray-50);border-radius:14px;padding:8px 10px}
  .ct-price b{font-size:16px}
  .ct-qbtn{width:32px;height:32px}
  .ct-reco{margin-top:36px}
}

/* ================================================== checkout (co-) */
.co-skel{height:440px;border-radius:var(--radius-lg)}
.co-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.co-main{min-width:0}
.co-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px 28px}
.co-head{display:flex;gap:14px;align-items:center;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--gray-100)}
.co-head-ic{width:48px;height:48px;border-radius:17px;background:var(--yellow-100);color:var(--gold-700);display:grid;place-items:center;flex-shrink:0}
.co-head-ic svg{width:24px;height:24px}
.co-head h2{font-size:19px;font-weight:900;color:var(--blue-900);line-height:1.6}
.co-head p{font-size:13px;color:var(--gray-500)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.co-full{grid-column:1 / -1}
.co-ltr{direction:ltr;text-align:left}
.co-ltr:placeholder-shown{direction:rtl;text-align:right}
.co-card .input[readonly]{background:var(--gray-100);color:var(--gray-600);cursor:not-allowed}
.co-switch{margin-top:20px;padding:16px;border:1px solid var(--gray-200);border-radius:var(--radius-md);background:var(--gray-50)}
.co-switch-t{display:flex;flex-direction:column;gap:2px}
.co-switch-t b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--blue-900)}
.co-switch-t b svg{width:18px;height:18px;color:var(--gold-600)}
.co-switch-t small{font-size:12px;color:var(--gray-500);line-height:1.8}
.co-invoice{margin-top:14px;padding:16px;border:1.5px dashed rgba(198,138,38,.45);border-radius:var(--radius-md);background:linear-gradient(135deg,#fff,var(--yellow-100))}
.co-invoice[hidden]{display:none}
.co-foot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--gray-100)}
.co-back{display:inline-flex;align-items:center;gap:6px;color:var(--gray-600);font-weight:800;font-size:13px;transition:color .18s}
.co-back:hover{color:var(--blue-700)}
.co-back svg{width:18px;height:18px}
.co-opts{display:flex;flex-direction:column;gap:12px}
.co-sub{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;color:var(--blue-900);margin:28px 0 12px}
.co-sub svg{width:20px;height:20px;color:var(--gold-600)}
.co-main .field-error:empty{display:none}
.co-err-method,.co-err-addr,.co-err-when{margin-top:8px}
.co-store{display:flex;gap:14px;margin-top:14px;padding:18px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--blue-50),var(--yellow-100));border:1px solid var(--blue-100)}
.co-store-ic{width:44px;height:44px;border-radius:15px;background:#fff;color:var(--gold-600);display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
.co-store-ic svg{width:22px;height:22px}
.co-store b{font-size:15px;font-weight:900;color:var(--blue-900)}
.co-store p{font-size:13px;color:var(--gray-700);margin-top:2px}
.co-store-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:12px;color:var(--gray-600)}
.co-store-meta>span{display:inline-flex;align-items:center;gap:5px}
.co-store-meta svg{width:15px;height:15px;color:var(--blue-600)}
.co-store-note{display:flex;align-items:center;gap:6px;margin-top:10px!important;font-size:12px!important;color:var(--gold-700)!important}
.co-store-note svg{width:16px;height:16px}
.co-addrs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-addr{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;background:#fff;transition:border-color .18s,background .18s}
.co-addr:hover{border-color:var(--blue-500)}
.co-addr.is-on{border-color:var(--blue-600);background:var(--blue-50);box-shadow:0 0 0 4px rgba(11,111,251,.08)}
.co-addr.is-off{background:var(--gray-50)}
.co-addr .ac-radio{margin-top:2px}
.co-addr-body{flex:1;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--gray-700);min-width:0;line-height:1.8}
.co-addr-body b{font-size:13px;font-weight:900;color:var(--blue-900);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.co-addr-body b .ltr{font-weight:600;color:var(--gray-500)}
.co-addr-body small{color:var(--gray-500);font-size:12px}
.co-addr-warn{display:flex;gap:4px;align-items:center;color:var(--gold-700)!important;font-weight:700}
.co-addr-warn svg{width:14px;height:14px}
.co-addr-edit{width:34px;height:34px;flex-shrink:0;margin:-4px -4px 0 0}
.co-addr-edit svg{width:18px;height:18px}
.co-addr-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;border:1.5px dashed var(--gray-300);border-radius:var(--radius-md);color:var(--blue-700);font-weight:800;font-size:13px;background:var(--gray-50);transition:.18s}
.co-addr-add:hover{border-color:var(--blue-500);background:var(--blue-50)}
.co-addr-add svg{width:26px;height:26px;padding:4px;border-radius:10px;background:#fff;box-shadow:var(--shadow-sm)}
.co-days{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 18px;margin-bottom:-10px}
.co-day{flex:1 0 96px;display:flex;flex-direction:column;align-items:center;padding:10px 8px;border:1.5px solid var(--gray-200);border-radius:18px;background:#fff;transition:.18s;line-height:1.5}
.co-day:hover{border-color:var(--blue-500)}
.co-day small{font-size:11px;color:var(--gray-500);font-weight:600}
.co-day b{font-size:22px;font-weight:900;color:var(--blue-900);line-height:1.3}
.co-day.is-on{border-color:transparent;background:var(--grad-gold);box-shadow:0 8px 18px rgba(198,138,38,.22)}
.co-day.is-on small{color:var(--blue-900)}
.co-slots{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.co-slot{padding:9px 16px;font-size:13px}
.co-hint{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--gray-600);margin-top:12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:14px;padding:10px 12px}
.co-hint svg{width:18px;height:18px;color:var(--blue-600);flex-shrink:0}
.co-ins{margin-top:24px}
.co-opts-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-opts-2 .ac-opt{align-items:flex-start;flex-wrap:wrap}
.co-opts-2 .ac-opt-body{flex-basis:calc(100% - 96px)}
.co-opts-2 .ac-opt-price{width:100%;padding-top:10px;margin-top:2px;border-top:1px dashed var(--gray-200);font-size:16px}
.co-wallet{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px;border-radius:var(--radius-md);background:linear-gradient(135deg,#fff,var(--yellow-100));border:1px solid rgba(231,182,70,.45)}
.co-wallet.is-empty{background:var(--gray-50);border-color:var(--gray-200)}
.co-wallet-ic{width:46px;height:46px;border-radius:16px;background:var(--grad-gold);color:var(--blue-900);display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-gold)}
.co-wallet.is-empty .co-wallet-ic{background:var(--gray-200);color:var(--gray-500);box-shadow:none}
.co-wallet-ic svg{width:24px;height:24px}
.co-wallet-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.co-wallet-t b{font-size:15px;font-weight:900;color:var(--blue-900)}
.co-wallet-t small{font-size:12px;color:var(--gray-600);line-height:1.8}
.co-wallet-t a{color:var(--blue-700);font-weight:800}
.co-banks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.co-bank{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;font-size:12px;font-weight:800;color:var(--gray-700);background:#fff;transition:.18s;text-align:center}
.co-bank:hover{border-color:var(--blue-500)}
.co-bank.is-on{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-900);box-shadow:0 0 0 4px rgba(11,111,251,.08)}
.co-final{margin:0;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px}
.co-final>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.co-final dt{color:var(--gray-600)}
.co-final dd{margin:0;font-weight:800;color:var(--gray-900);white-space:nowrap}
.co-final small{font-size:11px;font-weight:500;color:var(--gray-500)}
.co-final .is-gold dt,.co-final .is-gold dd{color:var(--gold-700)}
.co-final .is-total{border-top:1px dashed var(--gray-300);padding-top:12px}
.co-final .is-total dt,.co-final .is-total dd{color:var(--blue-900);font-weight:900;font-size:15px}
.co-final .is-pay{background:var(--grad-navy);margin:4px -8px 0;padding:14px 16px;border-radius:16px}
.co-final .is-pay dt{color:#dbeafe;font-weight:800;font-size:14px}
.co-final .is-pay dd{color:var(--yellow-400);font-size:20px;font-weight:900}
.co-final .is-pay small{color:#cfe0ff}
.co-recap{display:flex;flex-direction:column;gap:8px;margin-top:16px;font-size:13px}
.co-recap>div{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 14px;border:1px solid var(--gray-200);border-radius:14px}
.co-recap span{display:flex;align-items:center;gap:6px;color:var(--gray-500);font-weight:600}
.co-recap span svg{width:16px;height:16px;color:var(--gold-600)}
.co-recap b{font-weight:700;color:var(--gray-800);line-height:1.8}
.co-link{color:var(--blue-700);font-weight:800;font-size:12px;line-height:1.9}
.co-agree{margin-top:18px;font-size:13px;line-height:1.8;align-items:flex-start}
.co-agree input{margin-top:2px}
.co-agree a{color:var(--blue-700);font-weight:800}
.co-pay{margin-top:16px;min-height:56px;font-size:16px}
.co-thumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--gray-100);position:relative}
.co-thumb{width:52px;height:52px;border-radius:14px;overflow:hidden;border:1px solid var(--gray-200);position:relative;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--gray-600)}
.co-thumb img{width:100%;height:100%;object-fit:cover}
.co-thumb span{position:absolute;bottom:3px;left:3px;background:var(--blue-900);color:#fff;font-size:10px;font-weight:800;border-radius:6px;padding:0 4px;line-height:1.6}
.co-edit-cart{margin-right:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--blue-700)}
.co-edit-cart svg{width:15px;height:15px}
/* success */
.co-success{max-width:680px;margin:8px auto 24px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:44px 36px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden}
.co-success::before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:520px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,107,.38),transparent 65%);pointer-events:none}
.co-success>*{position:relative}
.co-ok-ic{width:96px;height:96px;border-radius:32px;background:var(--grad-gold);display:grid;place-items:center;color:var(--blue-900);box-shadow:var(--shadow-gold);margin-bottom:14px}
.co-ok-ic>svg{width:50px;height:50px;stroke-width:2.6}
.co-ok-ring{position:absolute;inset:-14px;border-radius:40px;border:1.5px dashed rgba(198,138,38,.5);animation:acSpin 18s linear infinite}
.co-success .kicker{margin:0}
.co-success h2{font-size:26px;font-weight:900;color:var(--blue-900);letter-spacing:-.4px;line-height:1.5}
.co-success p{color:var(--gray-600);max-width:500px;font-size:14px;line-height:2}
.co-orderno{display:flex;align-items:center;gap:12px;background:var(--blue-50);border:1.5px dashed var(--blue-500);border-radius:18px;padding:6px 8px 6px 6px;padding-right:18px;margin:10px 0 6px}
.co-orderno span{font-size:12px;color:var(--gray-500);font-weight:600}
.co-orderno b{font-size:22px;font-weight:900;color:var(--blue-700);letter-spacing:1px}
.co-ok-rows{width:100%;margin:8px 0 0;border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden;text-align:right}
.co-ok-rows>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;font-size:13px}
.co-ok-rows>div+div{border-top:1px solid var(--gray-100)}
.co-ok-rows>div:nth-child(odd){background:var(--gray-50)}
.co-ok-rows dt{color:var(--gray-500)}
.co-ok-rows dd{margin:0;font-weight:800;color:var(--gray-900);text-align:left}
.co-ok-rows small{font-weight:500;color:var(--gray-500);font-size:11px}
.co-ok-ctas{display:flex;gap:12px;margin-top:20px;width:100%;justify-content:center}
.co-ok-ctas .btn{flex:1;max-width:260px}
@media (max-width:1180px){.co-layout{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:1023.98px){.co-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .co-card{padding:18px 14px;border-radius:var(--radius-md)}
  .co-head{gap:10px;padding-bottom:14px;margin-bottom:16px}
  .co-head-ic{width:42px;height:42px;border-radius:15px}
  .co-head h2{font-size:17px}
  .co-head p{font-size:12px}
  .co-grid,.co-addrs,.co-opts-2{grid-template-columns:1fr}
  .co-banks{grid-template-columns:repeat(2,1fr)}
  .co-recap>div{grid-template-columns:minmax(0,1fr) auto}
  .co-recap>div b{grid-column:1 / -1;grid-row:2}
  .co-day{flex:0 0 84px}
  .co-success{padding:32px 18px 24px;border-radius:var(--radius-lg)}
  .co-success h2{font-size:21px}
  .co-orderno b{font-size:18px}
  .co-ok-rows>div{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px}
  .co-ok-rows dd{text-align:right}
  .co-ok-ctas{flex-direction:column}
  .co-ok-ctas .btn{max-width:none}
}

/* =================================================== profile (pf-) */
.pf-layout{display:grid;grid-template-columns:296px minmax(0,1fr);gap:24px;align-items:start}
.pf-side{position:sticky;top:calc(var(--topbar-h) + var(--header-h) + 20px);background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:16px;display:flex;flex-direction:column;gap:14px}
.pf-user{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;border-bottom:1px solid var(--gray-100)}
.pf-avatar{width:54px;height:54px;border-radius:19px;background:var(--grad-brand);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-blue);flex-shrink:0}
.pf-avatar svg{width:28px;height:28px}
.pf-user-t{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.6}
.pf-user-t b{font-size:15px;font-weight:900;color:var(--blue-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-user-t span{font-size:13px;color:var(--gray-500);text-align:right;direction:ltr;unicode-bidi:plaintext}
.pf-user-edit svg{width:20px;height:20px}
.pf-wallet-mini{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--blue-900),var(--blue-700) 70%,var(--gold-600));color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-blue);transition:transform .2s}
.pf-wallet-mini:hover{transform:translateY(-2px)}
.pf-wallet-mini::before{content:"";position:absolute;left:-40px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:rgba(255,214,107,.2)}
.pf-wm-ic{width:42px;height:42px;border-radius:15px;background:var(--grad-gold);color:var(--blue-900);display:grid;place-items:center;flex-shrink:0;position:relative}
.pf-wm-ic svg{width:22px;height:22px}
.pf-wm-t{flex:1;display:flex;flex-direction:column;line-height:1.5;position:relative;min-width:0}
.pf-wm-t>small{font-size:11px;color:#cfe0ff}
.pf-wm-t b{font-size:18px;font-weight:900;color:var(--yellow-400)}
.pf-wm-t b small{font-size:11px;color:#eaf3ff;font-weight:500}
.pf-wm-t em{font-style:normal;font-size:11px;color:#dbeafe}
.pf-wallet-mini>svg{width:18px;height:18px;color:#cfe0ff;position:relative}
.pf-nav{display:flex;flex-direction:column;gap:2px}
.pf-nav-i{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-size:14px;font-weight:700;color:var(--gray-700);transition:background .18s,color .18s;width:100%;text-align:right;position:relative}
.pf-nav-i svg{width:20px;height:20px;color:var(--gray-400);transition:color .18s}
.pf-nav-i em{margin-right:auto;font-style:normal;font-size:11px;font-weight:800;background:var(--gray-100);color:var(--gray-600);border-radius:var(--radius-pill);padding:1px 8px}
.pf-nav-i:hover{background:var(--gray-50);color:var(--blue-900)}
.pf-nav-i.is-active{background:var(--blue-50);color:var(--blue-700);font-weight:900}
.pf-nav-i.is-active svg{color:var(--blue-700)}
.pf-nav-i.is-active em{background:var(--yellow-100);color:var(--gold-700)}
.pf-nav-i.is-active::before{content:"";position:absolute;right:0;top:10px;bottom:10px;width:4px;border-radius:4px 0 0 4px;background:var(--grad-gold)}
.pf-logout{color:var(--red);margin-top:6px;border-top:1px solid var(--gray-100);border-radius:0 0 14px 14px}
.pf-logout svg{color:var(--red)}
.pf-logout:hover{background:rgba(229,72,77,.06);color:var(--red)}
.pf-content{min-width:0}
.pf-view{display:flex;flex-direction:column;gap:16px}
.pf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pf-head h2{font-size:22px;font-weight:900;color:var(--blue-900);letter-spacing:-.3px;line-height:1.6}
.pf-head p{font-size:13px;color:var(--gray-500)}
.pf-head .more-link{font-size:14px}
.pf-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px 22px}
.pf-card-t{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;color:var(--blue-900);margin-bottom:16px}
.pf-card-t svg{width:20px;height:20px;color:var(--gold-600)}
.pf-card-t small{font-size:12px;font-weight:600;color:var(--gray-500)}
.pf-muted{color:var(--gray-500);font-size:12px}
.pf-seg{align-self:flex-start;overflow-x:auto;max-width:100%}
.pf-seg button span{opacity:.75;font-weight:700}
/* orders */
.pf-orders{display:flex;flex-direction:column;gap:12px}
.pf-order{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px 22px;transition:border-color .2s,box-shadow .2s,transform .2s}
.pf-order:hover{border-color:var(--blue-500);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pf-order-top{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:var(--gray-500)}
.pf-order-id,.pf-order-date{display:inline-flex;align-items:center;gap:6px}
.pf-order-id svg,.pf-order-date svg{width:16px;height:16px;color:var(--gray-400)}
.pf-order-id b{color:var(--blue-900);font-weight:900;letter-spacing:.5px}
.pf-order-date{margin-right:auto}
.pf-order-mid{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pf-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.pf-thumb{width:66px;height:66px;border-radius:16px;overflow:hidden;border:1px solid var(--gray-200);position:relative;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--gray-600)}
.pf-thumb img{width:100%;height:100%;object-fit:cover}
.pf-thumb em{position:absolute;bottom:3px;left:3px;font-style:normal;background:var(--blue-900);color:#fff;font-size:10px;font-weight:800;border-radius:6px;padding:0 4px;line-height:1.6}
.pf-thumb-more{background:var(--gray-50)}
.pf-order-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--gray-500)}
.pf-order-bot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--gray-200);font-size:13px;color:var(--gray-600)}
.pf-order-bot b{color:var(--blue-900);font-weight:900;font-size:16px}
.pf-order-bot small{font-size:11px;color:var(--gray-500);font-weight:500}
.pf-more{display:inline-flex;align-items:center;gap:4px;color:var(--blue-700);font-weight:800}
.pf-more svg{width:16px;height:16px}
/* order detail */
.pf-back{display:inline-flex;align-items:center;gap:6px;color:var(--blue-700);font-weight:800;font-size:14px;align-self:flex-start}
.pf-back svg{width:18px;height:18px}
.pf-od-head{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:16px}
.pf-od-head>div{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pf-od-head b{font-size:15px;color:var(--blue-900);font-weight:900}
.pf-od-head b small{font-size:11px;font-weight:500;color:var(--gray-500)}
.pf-od-id{letter-spacing:.6px;font-size:17px!important}
.pf-timeline{display:flex;padding:6px 0 2px;overflow:hidden}
.pf-tl{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;font-size:12px;min-width:0}
.pf-tl::before{content:"";position:absolute;top:25px;left:50%;width:100%;height:3px;background:var(--gray-200);border-radius:3px}
.pf-tl:first-child::before{display:none}
.pf-tl.is-done::before,.pf-tl.is-current::before{background:var(--grad-gold)}
.pf-tl-dot{width:40px;height:40px;border-radius:16px;background:var(--gray-100);color:var(--gray-400);display:grid;place-items:center;font-weight:900;font-size:14px;position:relative;z-index:1;box-shadow:0 0 0 4px #fff}
.pf-tl-dot svg{width:18px;height:18px;stroke-width:2.8}
.pf-tl.is-done .pf-tl-dot{background:var(--yellow-100);color:var(--gold-700)}
.pf-tl.is-current .pf-tl-dot{background:var(--grad-gold);color:var(--blue-900);box-shadow:0 0 0 4px #fff,var(--shadow-gold)}
.pf-tl b{font-weight:800;color:var(--gray-500);font-size:13px;line-height:1.6}
.pf-tl.is-done b{color:var(--gray-700)}
.pf-tl.is-current b{color:var(--blue-900)}
.pf-tl small{color:var(--gray-500);font-size:11px}
.pf-tl-cancel{display:flex;align-items:center;gap:8px;color:var(--red);font-weight:800}
.pf-tl-cancel svg{width:20px;height:20px}
.pf-items{display:flex;flex-direction:column}
.pf-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--gray-100)}
.pf-item:first-child{padding-top:0}
.pf-item:last-child{border-bottom:0;padding-bottom:0}
.pf-item-img{width:72px;height:72px;border-radius:16px;overflow:hidden;border:1px solid var(--gray-200);flex-shrink:0;background:#fff}
.pf-item-img img{width:100%;height:100%;object-fit:cover}
.pf-item-t{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.pf-item-t a{font-weight:800;color:var(--gray-900);font-size:14px;line-height:1.7}
.pf-item-t a:hover{color:var(--blue-700)}
.pf-item-t span{font-size:12px;color:var(--gray-500)}
.pf-item-p{font-weight:900;color:var(--blue-900);white-space:nowrap;font-size:15px}
.pf-item-p small{font-size:11px;font-weight:500;color:var(--gray-500)}
.pf-od-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pf-dl{margin:0;display:flex;flex-direction:column;gap:10px}
.pf-dl>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.pf-dl dt{color:var(--gray-500)}
.pf-dl dd{margin:0;font-weight:800;color:var(--gray-800);text-align:left}
.pf-dl dd small{font-size:11px;font-weight:500;color:var(--gray-500)}
.pf-dl .is-gold dt,.pf-dl .is-gold dd{color:var(--gold-700)}
.pf-dl .is-strong{border-top:1px dashed var(--gray-200);padding-top:10px}
.pf-dl .is-strong dt,.pf-dl .is-strong dd{color:var(--blue-900);font-weight:900;font-size:14px}
.pf-addr{display:flex;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--gray-50);font-size:13px;color:var(--gray-700);line-height:1.9}
.pf-addr>svg{width:20px;height:20px;color:var(--gold-600);flex-shrink:0;margin-top:3px}
.pf-buyer{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--gray-100)}
.pf-buyer svg{width:16px;height:16px}
/* wallet */
.pf-wallet{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px}
.pf-bal{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--blue-900),var(--blue-700) 66%,var(--gold-600));color:#fff;padding:26px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-blue);min-height:300px}
.pf-bal::before{content:"";position:absolute;left:-90px;bottom:-130px;width:320px;height:320px;border-radius:50%;background:rgba(255,214,107,.18)}
.pf-bal::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.pf-bal>*{position:relative;z-index:1}
.pf-bal-k{font-size:13px;color:#dbeafe;font-weight:700}
.pf-bal-g{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pf-bal-g b{font-size:44px;font-weight:900;color:var(--yellow-400);line-height:1.25;letter-spacing:-1px}
.pf-bal-g span{font-size:13px;color:#dbeafe}
.pf-bal-t{font-size:17px;font-weight:800}
.pf-bal-t small{font-size:12px;color:#cfe0ff;font-weight:500}
.pf-bal-row{font-size:12px;color:#cfe0ff}
.pf-bal-row span{display:inline-flex;align-items:center;gap:6px}
.pf-bal-row svg{width:16px;height:16px;color:var(--yellow-400)}
.pf-bal-row b{color:#fff}
.pf-bal-ctas{display:flex;gap:10px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.pf-bal-ctas .btn-white{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.pf-bal-art{position:absolute!important;left:22px;top:26px;width:120px;height:90px;z-index:0!important;opacity:.95}
.pf-bal-art i{position:absolute;border-radius:9px;background:linear-gradient(135deg,var(--yellow-100),var(--yellow-400) 40%,var(--gold-600) 80%,var(--gold-700));box-shadow:0 14px 24px rgba(0,0,0,.18)}
.pf-bal-art i:nth-child(1){width:74px;height:36px;left:0;top:34px;transform:rotate(-10deg)}
.pf-bal-art i:nth-child(2){width:66px;height:32px;left:44px;top:46px;transform:rotate(8deg)}
.pf-bal-art i:nth-child(3){width:60px;height:30px;left:22px;top:6px;transform:rotate(4deg)}
.pf-buy{display:flex;flex-direction:column;gap:14px;margin:0}
.pf-buy .pf-card-t{margin-bottom:0}
.pf-buy-mode{align-self:flex-start}
.pf-amt{direction:ltr;text-align:left;font-size:17px;font-weight:800}
.pf-amt:placeholder-shown{direction:rtl;text-align:right;font-weight:400;font-size:14px}
.pf-buy .input-group .input{padding-left:64px}
.pf-quick{display:flex;gap:8px;flex-wrap:wrap}
.pf-quick .chip{padding:5px 12px;font-size:12px}
.pf-conv{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--yellow-100);border-radius:14px;padding:10px 14px;font-size:13px;color:var(--gold-700);font-weight:700}
.pf-conv b{font-weight:900;color:var(--blue-900);font-size:15px}
.pf-conv small{font-size:11px;font-weight:500;color:var(--gray-500)}
.pf-tx{display:flex;flex-direction:column}
.pf-tx li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100)}
.pf-tx li:first-child{padding-top:0}
.pf-tx li:last-child{border-bottom:0;padding-bottom:0}
.pf-tx-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}
.pf-tx-ic svg{width:20px;height:20px}
.pf-tx-ic.is-in{background:rgba(18,166,106,.10);color:var(--green)}
.pf-tx-ic.is-out{background:var(--yellow-100);color:var(--gold-700)}
.pf-tx-t{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.7}
.pf-tx-t b{font-size:14px;font-weight:800;color:var(--gray-900)}
.pf-tx-t small{font-size:12px;color:var(--gray-500)}
.pf-tx-v{display:flex;flex-direction:column;align-items:flex-end;line-height:1.7;white-space:nowrap}
.pf-tx-v b{font-size:14px;font-weight:900}
.pf-tx-v b.is-in{color:var(--green)}
.pf-tx-v b.is-out{color:var(--gold-700)}
.pf-tx-v small{font-size:12px;color:var(--gray-500)}
/* favourites */
.pf-favs{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* addresses */
.pf-addrs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pf-addr-card{display:flex;flex-direction:column;gap:10px}
.pf-addr-card.is-default{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(231,182,70,.15),var(--shadow-sm)}
.pf-addr-top{display:flex;align-items:center;gap:10px}
.pf-addr-top b{font-weight:900;color:var(--blue-900);font-size:15px}
.pf-addr-top .badge{margin-right:auto}
.pf-addr-ic{width:40px;height:40px;border-radius:14px;background:var(--blue-100);color:var(--blue-700);display:grid;place-items:center;flex-shrink:0}
.pf-addr-ic svg{width:20px;height:20px}
.pf-addr-card p{font-size:13px;color:var(--gray-700);line-height:1.9}
.pf-addr-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--gray-500)}
.pf-addr-meta li{display:inline-flex;align-items:center;gap:5px}
.pf-addr-meta svg{width:14px;height:14px;color:var(--gold-600)}
.pf-addr-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--gray-100)}
.pf-addr-acts .btn svg{width:16px;height:16px}
/* info */
.pf-form{margin:0}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.pf-ltr{direction:ltr;text-align:left}
.pf-ltr:placeholder-shown{direction:rtl;text-align:right}
.pf-form .input[readonly]{background:var(--gray-100);color:var(--gray-600);cursor:not-allowed}
.pf-form>.pf-muted{margin:-8px 0 14px;font-size:13px}
.pf-form-foot{display:flex;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100)}
.pf-confirm{font-size:14px;color:var(--gray-700)}
.pf-card .empty{padding:36px 12px}
@media (max-width:1180px){.pf-layout{grid-template-columns:260px minmax(0,1fr)}.pf-wallet{grid-template-columns:1fr}}
@media (max-width:1023.98px){
  .pf-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .pf-side{position:static;padding:14px;gap:12px}
  .pf-user{padding:0 0 12px}
  .pf-nav{flex-direction:row;overflow-x:auto;gap:8px;margin:0 -14px;padding:2px 14px 4px}
  .pf-nav-i{width:auto;flex:0 0 auto;padding:8px 14px;border:1px solid var(--gray-200);border-radius:var(--radius-pill);font-size:13px;background:#fff;gap:8px}
  .pf-nav-i svg{width:18px;height:18px}
  .pf-nav-i em{margin-right:0}
  .pf-nav-i.is-active{border-color:var(--blue-500)}
  .pf-nav-i.is-active::before{display:none}
  .pf-logout{margin:0;border:1px solid rgba(229,72,77,.25);border-radius:var(--radius-pill)}
}
@media (max-width:768px){
  .pf-addrs,.pf-od-grid{grid-template-columns:1fr}
  .pf-od-head{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pf-head h2{font-size:19px}
  .pf-card{padding:16px 14px;border-radius:var(--radius-md)}
  .pf-order{padding:14px;border-radius:var(--radius-md)}
  .pf-order-date{margin-right:0}
  .pf-thumb{width:56px;height:56px;border-radius:14px}
  .pf-order-meta{align-items:flex-start}
  .pf-grid{grid-template-columns:1fr}
  .pf-timeline{flex-direction:column;gap:0}
  .pf-tl{flex-direction:row;align-items:center;text-align:right;gap:12px;padding:6px 0}
  .pf-tl::before{top:auto;left:auto;bottom:50%;right:18px;width:3px;height:100%}
  .pf-tl small{margin-right:auto}
  .pf-bal{padding:20px;min-height:0}
  .pf-bal-g b{font-size:36px}
  .pf-bal-art{transform:scale(.75);transform-origin:top left;left:10px;top:14px}
  .pf-bal-ctas .btn{flex:1}
  .pf-favs{grid-template-columns:repeat(2,1fr)}
  .pf-addr-acts .btn{flex:1}
}

/* ======================================================== 404 (nf-) */
.nf-page{padding:32px 0 64px}
.nf-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;background:linear-gradient(145deg,#fff 0%,var(--blue-50) 52%,var(--yellow-100) 100%);border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:48px 56px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;min-height:480px}
.nf-hero::before{content:"";position:absolute;left:-140px;bottom:-200px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,107,.42),transparent 65%)}
.nf-hero::after{content:"";position:absolute;right:-180px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(11,111,251,.12),transparent 65%)}
.nf-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:relative;z-index:1}
.nf-copy .kicker{margin:0}
.nf-code{font-size:176px;line-height:1.05;font-weight:900;background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-6px;filter:drop-shadow(0 18px 30px rgba(198,138,38,.24));margin:-6px 0 -4px}
.nf-copy h1{font-size:30px;font-weight:900;color:var(--blue-900);letter-spacing:-.5px;line-height:1.5}
.nf-copy p{font-size:16px;color:var(--gray-600);max-width:540px;line-height:2}
.nf-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.nf-search{display:flex;gap:8px;width:100%;max-width:500px;margin-top:6px;padding:6px;background:#fff;border:1px solid var(--gray-200);border-radius:18px;box-shadow:var(--shadow-sm)}
.nf-search .input{border:0;background:transparent;min-height:42px;box-shadow:none}
.nf-search .btn{flex-shrink:0}
.nf-visual{position:relative;height:400px;z-index:1}
.nf-rings{position:absolute;left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(198,138,38,.25)}
.nf-rings::before,.nf-rings::after{content:"";position:absolute;inset:36px;border-radius:50%;border:1px solid rgba(11,111,251,.16)}
.nf-rings::after{inset:80px;border:1px dashed rgba(198,138,38,.3);animation:acSpin 40s linear infinite}
.nf-coin{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--yellow-100),var(--yellow-400) 35%,var(--gold-600) 72%,var(--gold-700));box-shadow:0 22px 40px rgba(155,104,20,.28),inset 0 0 0 6px rgba(255,255,255,.25)}
.nf-coin::after{content:"";position:absolute;inset:16%;border-radius:50%;border:2px solid rgba(255,245,215,.6)}
.nf-coin.c1{width:132px;height:132px;left:12%;top:10%;animation:nfFloat 5s ease-in-out infinite}
.nf-coin.c2{width:74px;height:74px;right:14%;top:28%;animation:nfFloat 6s ease-in-out -2s infinite}
.nf-bars{position:absolute;left:50%;bottom:44px;width:260px;height:120px;transform:translateX(-50%)}
.nf-bar{position:absolute;display:block;border-radius:12px;background:linear-gradient(135deg,var(--yellow-100),var(--gold-500) 45%,var(--gold-700));box-shadow:0 22px 34px rgba(155,104,20,.26)}
.nf-bar.a{width:132px;height:58px;left:22px;bottom:0;transform:rotate(-8deg)}
.nf-bar.b{width:120px;height:54px;right:16px;bottom:-6px;transform:rotate(9deg)}
.nf-bar.c{width:112px;height:50px;left:72px;bottom:46px;transform:rotate(3deg)}
.nf-card{position:absolute;right:0;bottom:20px;width:200px;background:rgba(255,255,255,.9);border:1px solid var(--gray-200);border-radius:20px;padding:14px;box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column}
.nf-card b{color:var(--blue-900);font-size:13px}
.nf-card small{color:var(--gray-500);font-size:11px}
.nf-card .line{height:9px;border-radius:var(--radius-pill);background:var(--gray-200);margin-top:9px}
.nf-card .line.blue{width:88%;background:linear-gradient(90deg,var(--blue-600),var(--blue-100))}
.nf-card .line.gold{width:62%;background:linear-gradient(90deg,var(--gold-500),var(--yellow-400))}
@keyframes nfFloat{50%{transform:translateY(-12px)}}
.nf-popular{margin-top:56px}
@media (max-width:1024px){
  .nf-hero{grid-template-columns:1fr;padding:32px 28px;gap:8px}
  .nf-visual{height:280px;order:-1;max-width:460px;width:100%;margin-inline:auto}
  .nf-rings{width:260px;height:260px}
  .nf-coin.c1{width:100px;height:100px}
}
@media (max-width:576px){
  .nf-page{padding:14px 0 36px}
  .nf-hero{padding:20px 16px 24px;border-radius:var(--radius-lg)}
  .nf-visual{height:220px}
  .nf-rings{width:210px;height:210px}
  .nf-coin.c1{width:78px;height:78px;left:6%}
  .nf-coin.c2{width:52px;height:52px}
  .nf-bars{transform:translateX(-50%) scale(.72);transform-origin:bottom center;bottom:20px}
  .nf-card{width:160px;padding:10px;bottom:6px}
  .nf-code{font-size:116px;letter-spacing:-4px}
  .nf-copy h1{font-size:22px}
  .nf-copy p{font-size:14px}
  .nf-ctas{width:100%}
  .nf-ctas .btn{flex:1;padding-inline:12px}
  .nf-search .btn span{display:none}
  .nf-popular{margin-top:36px}
}
@media (prefers-reduced-motion:reduce){.nf-coin,.nf-rings::after,.co-ok-ring{animation:none}}

/* work-around: base.css `.select:focus{background:#fff}` (shorthand) drops the chevron image */
.ac-page .select:focus,.am-modal .select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center}