/* TeamESP premium interface — shared storefront, customer, seller and admin layer. */
.esp-ui {
  --esp-accent: #f5a623;
  --esp-ring: rgba(245,166,35,.42);
  --esp-hairline: rgba(161,179,210,.15);
  --esp-ease: cubic-bezier(.2,.7,.2,1);
  --esp-surface: linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  --esp-elevation: 0 8px 26px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.035);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  accent-color: var(--esp-accent);
}
[data-theme="light"] .esp-ui {
  --esp-hairline: rgba(34,49,77,.14);
  --esp-elevation: 0 8px 26px rgba(30,45,70,.06),inset 0 1px 0 rgba(255,255,255,.8);
}
.esp-ui :is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands) {font-style:normal;line-height:1;flex-shrink:0;}
.esp-ui :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--esp-accent);outline-offset:4px;
}
.esp-ui :is(input,select,textarea) {
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.esp-ui :is(button,[role="button"],a) {-webkit-tap-highlight-color:rgba(245,166,35,.13);}
.esp-ui :is(button,[role="button"]):disabled {cursor:not-allowed;}
.esp-ui :is(button,a) > :is(i,svg) {pointer-events:none;}
.esp-ui :is(.btn-primary,.btn-glass,.btn-outline,.btn-save,.btn-cancel,.login-btn,.account-button,.primary,.ghost,.nav-icon-btn,.social-btn,.key-icon-button) {
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease,transform .2s var(--esp-ease);
}
.esp-ui :is(.btn-primary,.btn-3d) {
  border-radius:11px;box-shadow:0 4px 16px rgba(245,166,35,.19),inset 0 1px 0 rgba(255,255,255,.35);
  top:0;
}
.esp-ui :is(.btn-primary,.btn-3d):hover {top:0;box-shadow:0 6px 22px rgba(245,166,35,.26);}
.esp-ui :is(.btn-primary,.btn-3d):active {top:0;}
.esp-ui :is(.btn-glass,.btn-outline,.btn-save,.btn-cancel,.login-btn,.account-button,.primary,.ghost) {border-radius:11px;}
.esp-ui :is(.product-card,.feat-card,.feature-card,.review-card,.faq-item,.payment-card,.version-card,.stat-card,.card-box,.account-card,.auth-card,.login-card,.history-card,.history-item,.balance-card) {
  box-shadow:var(--esp-elevation);
  background-image:var(--esp-surface);
  border-color:var(--esp-hairline);
}
.esp-ui :is(.stat-card,.card-box,.account-card,.login-card) {border-radius:16px;}
.esp-ui :is(.stat-card,.account-stat) {font-variant-numeric:tabular-nums;}
.esp-ui :is(.stat-icon,.feat-icon,.feature-icon,.payment-icon) {border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
.esp-ui :is(.product-card,.feat-card,.feature-card,.review-card,.payment-card,.version-card) {
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s var(--esp-ease);
}
.esp-ui :is(.product-card,.stat-card,.account-stat) h3 {letter-spacing:-.02em;}
.esp-ui :is(.nav-icon-btn,.social-btn) {border-radius:11px;}
.esp-ui .nav-container {max-width:1800px;}
@media (max-width:1700px) {
  .esp-ui .nav-links {display:none;}
  .esp-ui .hamburger {display:flex;}
  .esp-ui .nav-right {margin-left:auto;}
  .esp-ui .nav-socials {display:none;}
}
.esp-ui .theme-toggle i {transition:transform .4s var(--esp-ease);}
.esp-ui .theme-toggle:hover i {transform:rotate(24deg);}
.esp-ui .theme-toggle:active i {transform:rotate(65deg) scale(.9);}
.esp-ui :is(.page-section.active,.account-panel.active,.view:not([hidden])) {animation:esp-panel-in .22s var(--esp-ease) both;}
.esp-ui :is(.form-message.show,.message:not([hidden]),.notice:not([hidden])) {animation:esp-message-in .18s ease both;}
.esp-ui :is(.modal-content,.modal-box,.confirm-box) {border-color:var(--esp-hairline);box-shadow:0 24px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);}
.esp-ui :is(.toast,#aToast,.seller-toast) {border-radius:12px;box-shadow:0 10px 36px rgba(0,0,0,.25);}
.esp-ui :is(table,.account-table) {font-variant-numeric:tabular-nums;}
.esp-ui tbody tr {transition:background-color .16s ease;}
.esp-ui tbody tr:hover {background-color:rgba(245,166,35,.035);}
.esp-ui :is(th,.account-table th) {letter-spacing:.045em;}
.esp-ui :is(.status-badge,.badge,.tag) {font-variant-numeric:tabular-nums;}
.esp-ui .esp-signature {display:flex;align-items:center;gap:9px;color:var(--text2,#a0a8b8);font-size:12px;font-weight:600;letter-spacing:.035em;margin:0 0 18px;}
.esp-ui .esp-signature > i {color:var(--esp-accent);font-size:16px;}
.esp-ui .esp-type {display:inline-block;position:relative;white-space:nowrap;max-width:calc(100vw - 70px);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.esp-ui .esp-type:not(.esp-typing-active) {clip-path:inset(0 0 0 0);animation:esp-type-in 1.65s steps(30,end) .2s both;}
.esp-ui .esp-type:not(.esp-typing-active)::after {content:"";display:inline-block;width:2px;height:1em;background:var(--esp-accent);vertical-align:-.12em;margin-left:4px;animation:esp-caret .65s step-end 6 forwards;}
.esp-ui .esp-type.esp-typing-active {clip-path:none;animation:none;}
.esp-ui .esp-type.esp-typing-active::after {display:none!important;}
.esp-ui .esp-type-cursor {display:inline-block;width:2.5px;height:1.15em;background:var(--esp-accent,#f5a623);vertical-align:-.15em;margin-left:4px;border-radius:1px;box-shadow:0 0 8px rgba(245,166,35,.75),0 0 16px rgba(245,166,35,.35);animation:esp-cursor-blink .75s ease-in-out infinite;}
@keyframes esp-cursor-blink {0%,100%{opacity:0;}50%{opacity:1;}}
.esp-ui .hero-badge {border-radius:100px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.esp-ui .hero-title {letter-spacing:-.035em;}
.esp-ui .hero-desc {max-width:52ch;line-height:1.8;}
.esp-ui .hero-title {color:#f4f6fb;}
.esp-ui .hero-desc,.esp-ui .hero-left .esp-signature {color:#b9c3d4;}
.esp-ui .hero-stat p {color:#b9c3d4;}
.esp-ui .hero-stat div {color:#f4f6fb;}
.esp-ui .hero-left .btn-glass {background:rgba(14,22,36,.8);color:#ffd184;border-color:rgba(245,166,35,.35);}
.esp-ui .hero-img-wrap .pubg-char {object-fit:contain;filter:drop-shadow(0 18px 25px rgba(0,0,0,.3));animation:none;}
.esp-ui .hero-stats {font-variant-numeric:tabular-nums;}
.esp-ui .section-title {letter-spacing:-.025em;}
.esp-admin .sb-nav a {min-height:42px;border:1px solid transparent;}
.esp-admin .sb-nav a.active {box-shadow:inset 3px 0 0 var(--esp-accent);border-color:rgba(245,166,35,.15);}
.esp-admin .sb-nav a i {width:20px;font-size:18px;}
.esp-admin .sb-nav a:hover i {color:var(--esp-accent);}
.esp-admin .admin-topbar {box-shadow:0 3px 16px rgba(0,0,0,.1);}
.esp-admin #adminPage,.esp-admin .admin-layout,.esp-admin .admin-main {min-width:0;width:100%;}
.esp-admin .card-box-header {background:rgba(255,255,255,.015);}
.esp-admin .topbar-title {letter-spacing:-.02em;}
.esp-admin :is(.btn-save,.btn-cancel,.logout-btn) {min-height:38px;}
.esp-admin :is(.stat-card,.card-box) {border-color:rgba(161,179,210,.13);}
.esp-account .account-nav button {display:flex;align-items:center;gap:12px;min-height:44px;transition:background-color .2s ease,color .2s ease;}
.esp-account .account-nav button i {font-size:19px;width:20px;}
.esp-account .account-nav button.active {box-shadow:inset 3px 0 0 var(--esp-accent);}
.esp-account .account-stat {border:1px solid var(--esp-hairline);border-radius:12px;background:rgba(245,166,35,.025);}
.esp-account .account-heading {line-height:1.35;}
.esp-account .account-brand-icon i {color:#12131a;font-size:24px;}
.esp-seller .nav button {border:1px solid transparent;min-height:42px;}
.esp-seller .nav button.active {border-color:rgba(245,166,35,.24);background:rgba(245,166,35,.09);color:#ffd184;}
.esp-seller :is(.nav,.drawer-nav,.account-strip,.terms-link,.key-icon-button) svg {stroke-width:1.8;}
.esp-seller .segments button {transition:background-color .18s ease,color .18s ease;}
.esp-seller .segments button.active {background:rgba(245,166,35,.14);color:#ffd184;}
.esp-seller .product-card {border-radius:18px;}
.esp-seller :is(.history-tabs,.settings-tabs) button {transition:background-color .18s ease,color .18s ease;}
.esp-seller .auth-card {border-color:rgba(161,179,210,.2);}
@media (hover:hover) and (pointer:fine) {
  .esp-ui :is(.product-card,.feat-card,.feature-card,.payment-card,.version-card):hover {border-color:rgba(245,166,35,.4);box-shadow:0 12px 32px rgba(0,0,0,.16),0 0 0 1px rgba(245,166,35,.045);transform:translateY(-3px);}
  .esp-ui :is(.btn-primary,.btn-save,.login-btn,.account-button:not(.secondary):not(.danger),.primary):hover:not(:disabled) {filter:brightness(1.07);transform:translateY(-1px);}
}
@media (prefers-reduced-motion:no-preference) {
  .esp-ui :is(.btn-primary,.btn-glass,.btn-outline,.btn-save,.btn-cancel,.account-button,.primary,.ghost):active:not(:disabled) {transform:translateY(1px) scale(.99);}
}
.card-clicked-pop {animation:cardClickedPop .34s cubic-bezier(.2,.8,.2,1) both;}
@keyframes cardClickedPop {0%{transform:scale(1);}35%{transform:scale(.975);box-shadow:0 0 28px rgba(245,166,35,.45);}100%{transform:scale(1.018);}}
.esp-card-ripple {position:absolute;border-radius:50%;pointer-events:none;width:120px;height:120px;margin-left:-60px;margin-top:-60px;background:radial-gradient(circle,rgba(245,166,35,.45) 0%,rgba(245,166,35,0) 70%);transform:scale(0);animation:cardRippleSpread .55s ease-out forwards;z-index:5;}
@keyframes cardRippleSpread {to{transform:scale(4.5);opacity:0;}}
.product-card, .catalog-product {position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;}
.catalog-product.card-pressed {transform:scale(.985);transition:transform .12s ease;}

@media (max-width:640px) {
  .esp-ui .esp-signature {font-size:11.5px;gap:7px;margin:0 auto 16px;justify-content:center;text-align:center;}
  .esp-ui .esp-type {white-space:normal;word-break:break-word;max-width:100%;}
  .esp-admin :is(.btn-save,.btn-cancel,.logout-btn) {min-height:42px;}
  .esp-ui :is(.nav-icon-btn,.key-icon-button) {min-width:38px;min-height:38px;}
  .esp-account .account-nav button {gap:8px;}
  .esp-account .account-nav button i {font-size:17px;width:18px;}
}
@media (max-width:700px) {
  .esp-ui #navbar .nav-right > .theme-toggle,
  .esp-ui #navbar .nav-right > .cart-icon-btn {display:inline-flex!important;align-items:center;justify-content:center;}
}
@keyframes esp-panel-in {from {opacity:.65;transform:translateY(5px);} to {opacity:1;transform:translateY(0);}}
@keyframes esp-message-in {from {opacity:.5;transform:translateY(3px);} to {opacity:1;transform:translateY(0);}}
@keyframes esp-type-in {from {clip-path:inset(0 100% 0 0);} to {clip-path:inset(0 0 0 0);}}
@keyframes esp-caret {0%,100% {opacity:0;} 50% {opacity:1;}}
@media (prefers-reduced-motion:reduce) {
  .esp-ui *, .esp-ui *::before, .esp-ui *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  html:has(.esp-ui) {scroll-behavior:auto!important;}
  .esp-ui .esp-type {clip-path:none;}
  .esp-ui .esp-type::after {display:none;}
  .esp-ui .esp-type-cursor {animation:none;}
  .esp-ui #particleNet {display:none;}
}
@media print {
  .esp-ui *, .esp-ui *::before, .esp-ui *::after {animation:none!important;transition:none!important;box-shadow:none!important;}
  .esp-ui .esp-type {clip-path:none;}
  .esp-ui .esp-type-cursor {display:none!important;}
}
