@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  
  --clr-primary:       #0A84FF;
  --clr-primary-dark:  #0060DF;
  --clr-primary-mid:   #338FFF;
  --clr-primary-glass: rgba(10,132,255,.12);
  --clr-primary-soft:  #EBF4FF;

  --clr-accent:        #FF6B35;
  --clr-accent-soft:   #FFF1EC;

  --clr-success:       #00C48C;
  --clr-success-soft:  #E6FAF5;
  --clr-warning:       #FFB800;
  --clr-warning-soft:  #FFF8E6;
  --clr-danger:        #FF3B5C;
  --clr-danger-soft:   #FFF0F3;
  --clr-info:          #5B8DEF;
  --clr-info-soft:     #EEF3FE;

  
  --clr-bg:            #F4F6FA;
  --clr-surface:       #FFFFFF;
  --clr-surface-2:     #F8FAFC;
  --clr-surface-3:     #F0F4F8;
  --clr-border:        #E4E9F0;
  --clr-border-light:  #EEF2F7;

  
  --clr-text:          #0D1B2A;
  --clr-text-2:        #526070;
  --clr-text-3:        #9BA8B5;
  --clr-text-inv:      #FFFFFF;

  
  --sidebar-bg:        #FFFFFF;
  --sidebar-width:     256px;
  --sidebar-border:    #E4E9F0;
  --sidebar-item-hover:#F0F6FF;
  --sidebar-item-active-bg: #EBF4FF;
  --sidebar-item-active-color: #0A84FF;

  
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-display: 'Sora', -apple-system, sans-serif;

  
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl:28px;
  --r-full: 9999px;

  
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
  --shadow-primary: 0 6px 24px rgba(10,132,255,.28);

  
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .2s;
  --dur-slow: .35s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
  font-family: var(--font-body);
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select {
  font-family: var(--font-body);
  font-size: inherit;
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
}
ul, ol { list-style: none; }
.up-hidden { display: none !important; }
.up-sr-only { position:absolute; width:1px; height:1px; overflow:up-hidden; clip:rect(0,0,0,0); white-space:nowrap; }

#theme-header-slot,
#theme-footer-slot { width: 100%; }

.up-demo-header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}
.up-demo-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.75rem;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.up-demo-header__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--clr-text);
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.up-demo-header__logo-dot {
  width: 8px; height: 8px;
  background: var(--clr-primary);
  border-radius: 50%;
  display: inline-block;
}
.up-demo-header__nav {
  display: flex;
  gap: .25rem;
  flex: 1;
}
.up-demo-header__nav a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--clr-text-2);
  padding: .45rem .85rem;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.up-demo-header__nav a:hover { background: var(--clr-surface-2); color: var(--clr-text); }
.up-demo-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
.up-demo-header__icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
}
.up-demo-header__icon-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); }
.up-demo-header__icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.up-demo-header__cart-count {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--clr-danger);
  color: #fff;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-demo-header__user-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .75rem .4rem .4rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--clr-border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  font-size: .85rem;
  font-weight: 600;
  color: var(--clr-text-2);
}
.up-demo-header__user-btn:hover { border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-glass); color: var(--clr-text); }
.up-demo-header__avatar-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #7C3AED 100%);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.up-demo-footer {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  margin-top: auto;
}
.up-demo-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.1rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--clr-text-3);
}
.up-demo-footer__links { display: flex; gap: 1.5rem; }
.up-demo-footer__links a { color: var(--clr-text-3); transition: color var(--dur) var(--ease); }
.up-demo-footer__links a:hover { color: var(--clr-primary); }

.up-panel-wrap {
  flex: 1;
  display: flex;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  gap: 1.5rem;
}

.up-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: fit-content;
  position: sticky;
  top: calc(62px + 1.5rem);
  overflow: up-hidden;
  transition: transform var(--dur-slow) var(--ease);
}
.up-sidebar__profile {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 1.1rem .9rem;
  background: linear-gradient(135deg, #EBF4FF 0%, #F5F0FF 100%);
  border-bottom: 1px solid var(--clr-border-light);
  position: relative;
  overflow: up-hidden;
}

.up-sidebar__avatar {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #7C3AED 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(10,132,255,.3);
  position: relative;
  z-index: 1;
}
.up-sidebar__profile-info { position: relative; z-index: 1; min-width: 0; }
.up-sidebar__profile-name {
  font-weight: 700;
  font-size: .85rem;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: up-hidden;
  text-overflow: ellipsis;
}
.up-sidebar__profile-email {
  font-size: .73rem;
  color: var(--clr-text-3);
  white-space: nowrap;
  overflow: up-hidden;
  text-overflow: ellipsis;
}

.up-sidebar__nav { padding: .6rem .7rem; flex: 1; }
.up-sidebar__section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-text-3);
  padding: .7rem .5rem .3rem;
  display: block;
}

.up-sidebar__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .62rem .75rem;
  border-radius: var(--r);
  color: var(--clr-text-2);
  font-weight: 500;
  font-size: .875rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  margin-bottom: 2px;
  position: relative;
}
.up-sidebar__item:hover {
  background: var(--sidebar-item-hover);
  color: var(--clr-primary);
  transform: translateX(2px);
}
.up-sidebar__item.up-is-active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-item-active-color);
  font-weight: 700;
}
.up-sidebar__item.up-is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--clr-primary);
  border-radius: 0 3px 3px 0;
}
.up-sidebar__item svg {
  width: 17px; height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: stroke var(--dur) var(--ease);
}
.up-sidebar__item-label { flex: 1; }
.up-sidebar__badge {
  background: var(--clr-primary-glass);
  color: var(--clr-primary);
  border-radius: var(--r-full);
  padding: 1px 8px;
  font-size: .7rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.up-sidebar__badge--danger {
  background: var(--clr-danger-soft);
  color: var(--clr-danger);
}
.up-sidebar__badge--money {
  background: var(--clr-success-soft);
  color: var(--clr-success);
}

.up-sidebar__footer {
  padding: .6rem .7rem;
  border-top: 1px solid var(--clr-border-light);
}
.up-sidebar__logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .62rem .75rem;
  border-radius: var(--r);
  color: var(--clr-danger);
  font-weight: 600;
  font-size: .875rem;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.up-sidebar__logout:hover { background: var(--clr-danger-soft); transform: translateX(2px); }
.up-sidebar__logout svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.up-mobile-bar {
  display: none;
  align-items: center;
  gap: .85rem;
  padding: .85rem 0 1.25rem;
}
.up-mobile-bar__hamburger {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
}
.up-mobile-bar__hamburger:hover { background: var(--clr-surface-2); }
.up-mobile-bar__hamburger span {
  width: 20px; height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}
.up-mobile-bar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--clr-text);
}

.up-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,.45);
  z-index: 199;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.up-panel-main {
  flex: 1;
  min-width: 0;
}

.up-page-hd {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.up-page-hd__left {}
.up-page-hd__back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: .75rem;
  transition: gap var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.up-page-hd__back:hover { gap: .55rem; opacity: .8; }
.up-page-hd__back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.up-page-hd h1 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.up-page-hd__sub {
  font-size: .875rem;
  color: var(--clr-text-3);
  margin-top: .3rem;
  font-weight: 400;
}
.up-page-hd__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.up-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .875rem;
  border-radius: var(--r);
  padding: .7rem 1.4rem;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.up-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.up-btn:active { transform: scale(.97); }
.up-btn--primary {
  background: var(--clr-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.up-btn--primary:hover { background: var(--clr-primary-dark); box-shadow: 0 8px 28px rgba(10,132,255,.35); transform: translateY(-1px); }
.up-btn--outline {
  background: var(--clr-surface);
  color: var(--clr-text);
  border: 1.5px solid var(--clr-border);
}
.up-btn--outline:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-primary-soft); }
.up-btn--ghost { color: var(--clr-text-2); padding: .7rem .9rem; }
.up-btn--ghost:hover { background: var(--clr-surface-2); color: var(--clr-text); }
.up-btn--danger { background: var(--clr-danger); color: #fff; box-shadow: 0 4px 16px rgba(255,59,92,.25); }
.up-btn--danger:hover { opacity: .9; transform: translateY(-1px); }
.up-btn--danger-ghost { color: var(--clr-danger); }
.up-btn--danger-ghost:hover { background: var(--clr-danger-soft); }
.up-btn--success { background: var(--clr-success); color: #fff; box-shadow: 0 4px 16px rgba(0,196,140,.25); }
.up-btn--full { width: 100%; }
.up-btn--sm { padding: .45rem .9rem; font-size: .8rem; border-radius: var(--r-sm); }
.up-btn--lg { padding: .9rem 1.75rem; font-size: 1rem; border-radius: var(--r-lg); }
.up-btn--icon { padding: .6rem; border-radius: var(--r-sm); }

.up-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: up-hidden;
}
.up-card__body { padding: 1.5rem; }
.up-card__header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--clr-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.up-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-text);
}
.up-card__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--clr-border-light);
  background: var(--clr-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.up-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.up-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; }
.up-form-field { display: flex; flex-direction: column; gap: .4rem;margin-bottom: 1rem; }
.up-form-field--span2 { grid-column: span 2; }
.up-form-field__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-text-2);
  letter-spacing: .01em;
}
.up-form-field__label span { color: var(--clr-danger); margin-left: 2px; }
.up-form-control {
  padding: .72rem 1rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: .9rem;
  font-family: var(--font-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.up-form-control:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3.5px var(--clr-primary-glass);
  background: #fff;
}
.up-form-control::placeholder { color: var(--clr-text-3); }
textarea.up-form-control { resize: vertical; min-height: 100px; line-height: 1.55; }
select.up-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239BA8B5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}
.form-control--password { padding-right: 3rem; }
.up-form-field__password-wrap { position: relative; }
.up-form-field__password-wrap .up-form-control { padding-right: 3rem; }
.up-form-field__eye {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-3);
  transition: color var(--dur) var(--ease);
  line-height: 0;
  cursor: pointer;
}
.up-form-field__eye:hover { color: var(--clr-text-2); }
.up-form-field__eye svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.up-form-field__hint { font-size: .77rem; color: var(--clr-text-3); }
.up-form-field__error { font-size: .77rem; color: var(--clr-danger); font-weight: 500; }
.up-form-field.up-has-error .up-form-control { border-color: var(--clr-danger); box-shadow: 0 0 0 3px rgba(255,59,92,.1); }

.up-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .875rem;
  color: var(--clr-text-2);
}
.up-checkbox-wrap input[type=checkbox] {
  width: 17px; height: 17px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-xs);
  cursor: pointer;
  accent-color: var(--clr-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.up-checkbox-wrap a { color: var(--clr-primary); font-weight: 600; }
.up-checkbox-wrap a:hover { text-decoration: underline; }

.up-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  border-bottom: 1px solid var(--clr-border-light);
}
.up-toggle-row:last-child { border-bottom: none; }
.up-toggle-row__info strong { display: block; font-weight: 600; font-size: .875rem; }
.up-toggle-row__info span { font-size: .8rem; color: var(--clr-text-3); }
.up-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.up-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.up-toggle-switch__track {
  position: absolute;
  inset: 0;
  background: var(--clr-border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.up-toggle-switch__track::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.up-toggle-switch input:checked + .up-toggle-switch__track { background: var(--clr-primary); }
.up-toggle-switch input:checked + .up-toggle-switch__track::before { transform: translateX(20px); }

.up-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.up-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.up-badge--pending  { background: var(--clr-warning-soft); color: #9A6700; }
.up-badge--pending::before { background: var(--clr-warning); }
.up-badge--shipping { background: var(--clr-info-soft); color: #2D5ED4; }
.up-badge--shipping::before { background: var(--clr-info); }
.up-badge--delivered{ background: var(--clr-success-soft); color: #007A5E; }
.up-badge--delivered::before { background: var(--clr-success); }
.up-badge--cancelled{ background: var(--clr-surface-3); color: var(--clr-text-3); }
.up-badge--cancelled::before { background: var(--clr-text-3); }
.up-badge--open     { background: var(--clr-primary-soft); color: var(--clr-primary-dark); }
.up-badge--open::before { background: var(--clr-primary); }
.up-badge--waiting  { background: var(--clr-warning-soft); color: #9A6700; }
.up-badge--waiting::before { background: var(--clr-warning); }
.up-badge--closed   { background: var(--clr-surface-3); color: var(--clr-text-3); }
.up-badge--closed::before { background: var(--clr-text-3); }

.up-filter-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.up-filter-tab {
  padding: .48rem 1rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-full);
  font-size: .825rem;
  font-weight: 600;
  color: var(--clr-text-2);
  background: var(--clr-surface);
  transition: all var(--dur) var(--ease);
}
.up-filter-tab:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-primary-soft); }
.up-filter-tab.up-is-active { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; box-shadow: var(--shadow-primary); }

.up-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}
.up-empty-state__icon {
  width: 72px; height: 72px;
  background: var(--clr-surface-2);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--clr-border);
}
.up-empty-state h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.up-empty-state p { font-size: .875rem; color: var(--clr-text-3); max-width: 280px; }

.up-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,.55);
  z-index: 600;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.up-modal-overlay.up-is-open { display: flex; animation: fadeIn .2s var(--ease); }
.up-modal {
  background: var(--clr-surface);
  border-radius: var(--r-2xl);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  position: relative;
  animation: slideUp .28s var(--ease);
  overflow: up-hidden;
}
.up-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
  gap: 1rem;
}
.up-modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--clr-text);
}
.up-modal__sub { font-size: .83rem; color: var(--clr-text-3); margin-top: .25rem; }
.up-modal__close {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-3);
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
  font-size: 1rem;
}
.up-modal__close:hover { background: var(--clr-surface-2); color: var(--clr-text); }
.up-modal__body { padding: 1.5rem; }
.up-modal__footer {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
}

.up-toast-wrap {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none;
}
.up-toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background: var(--clr-text);
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
  font-weight: 500;
  min-width: 260px;
  max-width: 360px;
  pointer-events: all;
  animation: toastIn .3s var(--ease) both;
}
.up-toast--success { background: #0D1B2A; border-left: 3px solid var(--clr-success); }
.up-toast--error   { background: #0D1B2A; border-left: 3px solid var(--clr-danger); }
.up-toast--info    { background: #0D1B2A; border-left: 3px solid var(--clr-primary); }
.up-toast__icon { font-size: 1.1rem; flex-shrink: 0; }
.up-toast__msg { flex: 1; }
.up-toast.is-out { animation: toastOut .3s var(--ease) both; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.up-panel-main { animation: fadeIn .25s var(--ease); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-3); }

@media (max-width: 1024px) {
  .up-panel-wrap { padding: 1rem 1.25rem; }
  .up-sidebar { --sidebar-width: 240px; }
}

@media (max-width: 768px) {
  .up-panel-wrap { padding: 0; gap: 0; }
  .up-panel-main { padding: 1rem 1rem 2rem; }
  .up-mobile-bar { display: flex; }

  .up-sidebar {
    position: fixed;
    left: -300px;
    top: 0;
    bottom: 0;
    height: 100%;
    border-radius: 0;
    border-left: none;
    border-top: none;
    border-bottom: none;
    z-index: 200;
    transition: left var(--dur-slow) var(--ease);
    box-shadow: none;
    overflow-y: auto;
    overflow-x: up-hidden;
    max-width: 280px;
    width: 280px;
  }
  .up-sidebar.up-is-open {
    left: 0;
    box-shadow: var(--shadow-xl);
  }
  .up-sidebar-overlay.up-is-open { display: block; animation: fadeIn .25s var(--ease); }

  .up-demo-header__nav,
  .up-demo-header__actions .up-demo-header__user-btn span { display: none; }
  .up-demo-header__inner { padding: 0 1rem; }
  .up-panel-wrap { flex-direction: column; }
}

@media (max-width: 480px) {
  .up-form-grid-2 { grid-template-columns: 1fr; }
  .up-form-grid-3 { grid-template-columns: 1fr; }
  .up-form-field--span2 { grid-column: span 1; }
  .up-page-hd h1 { font-size: 1.35rem; }
  .up-toast-wrap { bottom: 1rem; right: 1rem; left: 1rem; }
  .up-toast { min-width: unset; max-width: 100%; }
}

.up-auth-body {
  background: var(--clr-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.up-auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.up-auth-card {
  background: var(--clr-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 900px;
  overflow: up-hidden;
  animation: slideUp .35s var(--ease);
}

.up-auth-card__visual {
  background: linear-gradient(145deg, var(--clr-primary) 0%, #1A1AFF 50%, #7C3AED 100%);
  position: relative;
  overflow: up-hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}
.up-auth-card__visual-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.up-auth-card__visual-circle.c1 { width: 280px; height: 280px; top: -80px; left: -80px; }
.up-auth-card__visual-circle.c2 { width: 200px; height: 200px; bottom: 40px; right: -60px; }
.up-auth-card__visual-circle.c3 { width: 120px; height: 120px; bottom: -40px; left: 60px; background: rgba(255,255,255,.05); }
.up-auth-card__visual-icon {
  width: 80px; height: 80px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border-radius: var(--r-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.2);
}
.up-auth-card__visual-icon svg {
  width: 36px; height: 36px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.up-auth-card__visual-content {
  position: relative;
  z-index: 1;
  padding: 2.5rem;
  color: #fff;
  text-align: center;
}
.up-auth-card__visual-content h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: .75rem;
  line-height: 1.2;
}
.up-auth-card__visual-content p {
  font-size: .9rem;
  opacity: .8;
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}
.up-auth-card__visual-features {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.up-auth-card__visual-feature {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .875rem;
}
.up-auth-card__visual-feature-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.15);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.up-auth-card__body {
  padding: 3rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.up-auth-card__header {
  margin-bottom: 2rem;
}
.up-auth-card__header h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--clr-text);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: .4rem;
}
.up-auth-card__header p {
  font-size: .9rem;
  color: var(--clr-text-3);
}

.up-auth-social {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.up-auth-social__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .72rem 1rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r);
  font-weight: 600;
  font-size: .82rem;
  color: var(--clr-text-2);
  background: var(--clr-surface);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.up-auth-social__btn:hover {
  border-color: var(--clr-text-3);
  background: var(--clr-surface-2);
  color: var(--clr-text);
}

.up-auth-divider {
  position: relative;
  text-align: center;
  margin: 1.25rem 0;
}
.up-auth-divider::before, .up-auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 60px);
  height: 1px;
  background: var(--clr-border);
}
.up-auth-divider::before { left: 0; }
.up-auth-divider::after { right: 0; }
.up-auth-divider span {
  font-size: .78rem;
  color: var(--clr-text-3);
  font-weight: 500;
  background: var(--clr-surface);
  padding: 0 .5rem;
  position: relative;
  z-index: 1;
}

.up-auth-form { display: flex; flex-direction: column; gap: 1rem; }
.up-form-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.up-auth-forgot-link {
  font-size: .78rem;
  color: var(--clr-primary);
  font-weight: 600;
  transition: opacity var(--dur) var(--ease);
}
.up-auth-forgot-link:hover { opacity: .75; }

.up-auth-submit {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.up-auth-submit svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.up-auth-switch {
  text-align: center;
  font-size: .85rem;
  color: var(--clr-text-3);
  margin-top: 1.25rem;
}
.up-auth-switch a { color: var(--clr-primary); font-weight: 700; }
.up-auth-switch a:hover { text-decoration: underline; }

.up-auth-success-box {
  background: var(--clr-success-soft);
  border: 1px solid #6EE7B7;
  border-radius: var(--r-lg);
  padding: 1.25rem;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-top: 1rem;
  animation: slideUp .25s var(--ease);
}
.up-auth-success-box__icon { font-size: 1.2rem; flex-shrink: 0; }
.up-auth-success-box__text strong { display: block; font-weight: 700; font-size: .9rem; color: var(--clr-success); margin-bottom: .25rem; }
.up-auth-success-box__text p { font-size: .83rem; color: #047857; line-height: 1.5; }

.up-password-strength {
  margin-top: .4rem;
  display: flex;
  gap: .3rem;
  align-items: center;
}
.up-strength-bar {
  flex: 1;
  height: 3px;
  background: var(--clr-border);
  border-radius: 3px;
  transition: background var(--dur) var(--ease);
}
.up-strength-bar.up-active-weak   { background: var(--clr-danger); }
.up-strength-bar.up-active-fair   { background: var(--clr-warning); }
.up-strength-bar.up-active-strong { background: var(--clr-success); }
.up-strength-label { font-size: .73rem; font-weight: 600; color: var(--clr-text-3); min-width: 50px; text-align: right; }

.up-auth-steps {
  display: flex;
  gap: 0;
  margin-bottom: 1.75rem;
  position: relative;
}
.up-auth-steps::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--clr-border);
}
.up-auth-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  position: relative;
  z-index: 1;
}
.up-auth-step__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--clr-text-3);
  transition: all var(--dur) var(--ease);
}
.up-auth-step.up-is-active .up-auth-step__dot { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; box-shadow: 0 0 0 4px var(--clr-primary-glass); }
.up-auth-step.up-is-done .up-auth-step__dot { background: var(--clr-success); border-color: var(--clr-success); color: #fff; }
.up-auth-step__label { font-size: .72rem; color: var(--clr-text-3); font-weight: 500; }
.up-auth-step.up-is-active .up-auth-step__label { color: var(--clr-primary); font-weight: 700; }

@media (max-width: 768px) {
  .up-auth-card {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .up-auth-card__visual {
    min-height: 160px;
    padding: 2rem;
  }
  .up-auth-card__visual-content h2 { font-size: 1.25rem; }
  .up-auth-card__visual-content p { display: none; }
  .up-auth-card__visual-features { display: none; }
  .up-auth-card__body { padding: 2rem 1.75rem; }
  .up-auth-social { flex-direction: column; }
}
@media (max-width: 480px) {
  .up-auth-card__body { padding: 1.75rem 1.25rem; }
  .up-auth-card__header h1 { font-size: 1.4rem; }
}

.up-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.up-account-avatar-section {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #EBF4FF 0%, #F5F0FF 100%);
  border-radius: var(--r-xl);
  margin-bottom: 1.5rem;
  border: 1px solid var(--clr-border-light);
}
.up-account-avatar {
  width: 72px; height: 72px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--clr-primary) 0%, #7C3AED 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(10,132,255,.3);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.up-account-avatar:hover { transform: scale(1.04); }
.up-account-avatar-info h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.up-account-avatar-info p { font-size: .83rem; color: var(--clr-text-3); margin-top: .15rem; }
.up-account-avatar-info .up-btn { margin-top: .6rem; }

.up-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.up-stat-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.up-stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.up-stat-card__label { font-size: .78rem; color: var(--clr-text-3); font-weight: 500; margin-bottom: .3rem; }
.up-stat-card__value { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--clr-text); }
.up-stat-card__sub { font-size: .75rem; color: var(--clr-text-3); margin-top: .15rem; }
.up-stat-card__icon { font-size: 1.3rem; margin-bottom: .5rem; }

.up-wallet-hero {
  background: linear-gradient(135deg, var(--clr-primary) 0%, #0050CC 60%, #1A1AFF 100%);
  border-radius: var(--r-2xl);
  padding: 2.25rem 2.5rem;
  color: #fff;
  position: relative;
  overflow: up-hidden;
  margin-bottom: 1.5rem;
}
.up-wallet-hero::before {
  content:'';position:absolute;width:320px;height:320px;background:rgba(255,255,255,.05);border-radius:50%;top:-120px;right:-80px;pointer-events:none;
}
.up-wallet-hero::after {
  content:'';position:absolute;width:180px;height:180px;background:rgba(255,255,255,.04);border-radius:50%;bottom:-60px;left:100px;pointer-events:none;
}
.up-wallet-hero__label { font-size: .83rem; opacity: .7; font-weight: 500; margin-bottom: .4rem; }
.up-wallet-hero__amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
}
.up-wallet-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; position: relative; z-index: 1; }
.up-btn--white {
  background: rgba(255,255,255,.95);
  color: var(--clr-primary);
  border: none;
  font-weight: 700;
}
.up-btn--white:hover { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); transform: translateY(-1px); }
.up-btn--white-ghost {
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  background: transparent;
  font-weight: 600;
}
.up-btn--white-ghost:hover { background: rgba(255,255,255,.12); }
.up-wallet-cards-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.up-wallet-stat {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.up-wallet-stat__label { font-size: .78rem; color: var(--clr-text-3); margin-bottom: .3rem; }
.up-wallet-stat__val { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.up-wallet-stat__val--success { color: var(--clr-success); }
.up-wallet-stat__val--danger { color: var(--clr-danger); }

.up-tx-list { display: flex; flex-direction: column; }
.up-tx-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--clr-border-light);
  transition: background var(--dur) var(--ease);
}
.up-tx-item:last-child { border-bottom: none; }
.up-tx-item:hover { background: var(--clr-surface-2); margin: 0 -.5rem; padding: .9rem .5rem; border-radius: var(--r); }
.up-tx-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.up-tx-icon--in  { background: var(--clr-success-soft); color: var(--clr-success); }
.up-tx-icon--out { background: var(--clr-danger-soft);  color: var(--clr-danger);  }
.up-tx-info { flex: 1; min-width: 0; }
.up-tx-info__title { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: up-hidden; text-overflow: ellipsis; }
.up-tx-info__date  { font-size: .77rem; color: var(--clr-text-3); margin-top: .1rem; }
.up-tx-amount { font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.up-tx-amount--in  { color: var(--clr-success); }
.up-tx-amount--out { color: var(--clr-danger); }

.up-order-list { display: flex; flex-direction: column; gap: 1rem; }
.up-order-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  overflow: up-hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.up-order-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.up-order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.4rem;
  background: var(--clr-surface-2);
  border-bottom: 1px solid var(--clr-border-light);
  gap: 1rem;
  flex-wrap: wrap;
}
.up-order-card__meta { display: flex; align-items: center; gap: 1rem; }
.up-order-card__no { font-family: var(--font-display); font-weight: 800; font-size: .9rem; }
.up-order-card__date { font-size: .78rem; color: var(--clr-text-3); }
.up-order-card__items { padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.up-order-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.up-order-item__img {
  width: 52px; height: 52px;
  border-radius: var(--r);
  overflow: up-hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 1px solid var(--clr-border-light);
}
.up-order-item__info { flex: 1; min-width: 0; }
.up-order-item__name { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: up-hidden; text-overflow: ellipsis; }
.up-order-item__variant { font-size: .77rem; color: var(--clr-text-3); margin-top: .1rem; }
.up-order-item__price { font-family: var(--font-display); font-weight: 800; font-size: .95rem; white-space: nowrap; }
.up-order-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.4rem;
  border-top: 1px solid var(--clr-border-light);
  background: var(--clr-surface-2);
  gap: 1rem;
  flex-wrap: wrap;
}
.up-order-card__total { font-size: .875rem; color: var(--clr-text-2); }
.up-order-card__total strong { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--clr-text); margin-left: .3rem; }
.up-order-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.up-order-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 1rem 1.4rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--clr-border-light);
}
.up-track-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 70px;
}
.up-track-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: var(--clr-border);
}
.up-track-step.up-is-done:not(:last-child)::after { background: var(--clr-success); }
.up-track-step__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--clr-surface-3);
  border: 2px solid var(--clr-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--clr-text-3);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-bottom: .4rem;
}
.up-track-step.up-is-done .up-track-step__dot { background: var(--clr-success); border-color: var(--clr-success); color: #fff; }
.up-track-step.up-is-current .up-track-step__dot { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; box-shadow: 0 0 0 4px var(--clr-primary-glass); }
.up-track-step__label { font-size: .7rem; font-weight: 600; color: var(--clr-text-3); text-align: center; line-height: 1.3; }
.up-track-step.up-is-done .up-track-step__label, .up-track-step.up-is-current .up-track-step__label { color: var(--clr-text); }

.up-favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.1rem;
}
.up-fav-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  overflow: up-hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.up-fav-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.up-fav-card__remove {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  color: var(--clr-text-3);
  z-index: 2;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  border: 1px solid var(--clr-border-light);
}
.up-fav-card__remove:hover { background: var(--clr-danger-soft); color: var(--clr-danger); border-color: var(--clr-danger); }
.up-fav-card__img {
  height: 150px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem;
  transition: transform var(--dur-slow) var(--ease);
}
.up-fav-card:hover .up-fav-card__img { transform: scale(1.05); }
.up-fav-card__body { padding: .9rem 1rem; flex: 1; }
.up-fav-card__name { font-weight: 700; font-size: .875rem; margin-bottom: .3rem; line-height: 1.3; }
.up-fav-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--clr-primary); }
.up-fav-card__old { font-size: .78rem; color: var(--clr-text-3); text-decoration: line-through; }
.up-fav-card__discount {
  display: inline-block;
  background: var(--clr-danger-soft);
  color: var(--clr-danger);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-size: .7rem;
  font-weight: 700;
  margin-left: .3rem;
}
.up-fav-card__foot { padding: .7rem 1rem 1rem; }

.up-address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}
.up-address-card {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: 1.4rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.up-address-card:hover { box-shadow: var(--shadow); }
.up-address-card.is-default { border-color: var(--clr-primary); }
.up-address-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--clr-primary-soft);
  color: var(--clr-primary-dark);
  border-radius: var(--r-full);
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.up-address-card__type { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
.up-address-card__name { font-weight: 600; font-size: .875rem; color: var(--clr-text); margin-bottom: .25rem; }
.up-address-card__line { font-size: .83rem; color: var(--clr-text-2); line-height: 1.55; margin-bottom: .2rem; }
.up-address-card__phone { font-size: .8rem; color: var(--clr-text-3); margin-bottom: 1.1rem; }
.up-address-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--clr-border-light); }

.up-ticket-list { display: flex; flex-direction: column; gap: .85rem; }
.up-ticket-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  display: block;
  color: inherit;
}
.up-ticket-card:hover { box-shadow: var(--shadow); border-color: var(--clr-primary); transform: translateY(-1px); }
.up-ticket-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.up-ticket-card__no { font-size: .77rem; color: var(--clr-text-3); font-weight: 600; font-family: var(--font-display); }
.up-ticket-card__title { font-weight: 700; font-size: 1rem; margin-bottom: .3rem; }
.up-ticket-card__meta { display: flex; align-items: center; gap: 1.25rem; font-size: .77rem;  flex-wrap: wrap; margin-bottom: .5rem; }
.up-ticket-card__preview { font-size: .83rem; color: var(--clr-text-2); line-height: 1.5; white-space: nowrap; overflow: up-hidden; text-overflow: ellipsis; }
.up-ticket-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; flex-wrap: wrap; gap: .5rem; }
.up-ticket-card__replies { font-size: .77rem;  display: flex; align-items: center; gap: .3rem; }
.up-ticket-card__arrow { font-size: .9rem;  }

.up-chat-box {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  overflow: up-hidden;
  box-shadow: var(--shadow-sm);
}
.up-chat-box__messages {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 360px;
  max-height: 500px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.up-chat-msg { display: flex; gap: .85rem; align-items: flex-start; }
.up-chat-msg--user { flex-direction: row-reverse; }
.up-chat-msg__avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
  font-family: var(--font-display);
}
.up-chat-msg__avatar--user   { background: linear-gradient(135deg, var(--clr-primary) 0%, #7C3AED 100%); color: #fff; }
.up-chat-msg__avatar--support{ background: var(--clr-surface-3); color: var(--clr-text-2); border: 1px solid var(--clr-border); }
.up-chat-msg__content { max-width: 72%; }
.up-chat-msg--user .up-chat-msg__content { align-items: flex-end; display: flex; flex-direction: column; }
.up-chat-msg__name { font-size: .72rem; font-weight: 700; color: var(--clr-text-3); margin-bottom: .3rem; }
.up-chat-msg__bubble {
  background: var(--clr-surface-2);
  border-radius: 4px 16px 16px 16px;
  padding: .85rem 1rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--clr-text);
  border: 1px solid var(--clr-border-light);
}
.up-chat-msg--user .up-chat-msg__bubble {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: 16px 4px 16px 16px;
}
.up-chat-msg__time { font-size: .7rem; color: var(--clr-text-3); margin-top: .3rem; }
.up-chat-msg--user .up-chat-msg__time { text-align: right; }
.up-chat-box__reply {
  border-top: 1px solid var(--clr-border);
  padding: 1rem;
  background: var(--clr-surface-2);
}
.up-chat-box__reply textarea {
  width: 100%;
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: .85rem 1rem;
  min-height: 80px;
  resize: none;
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--clr-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  margin-bottom: .75rem;
}
.up-chat-box__reply textarea:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-glass); outline: none; }
.up-chat-box__reply-actions { display: flex; align-items: center; justify-content: space-between; }
.up-chat-box__attach { display: flex; gap: .5rem; }
.up-btn--attach {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r);
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-text-2);
  background: var(--clr-surface);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.up-btn--attach:hover { border-color: var(--clr-primary); color: var(--clr-primary); }

.up-modal-amount-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}
.up-amount-btn {
  padding: .6rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r);
  font-weight: 700;
  font-size: .875rem;
  color: var(--clr-text-2);
  background: var(--clr-surface);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.up-amount-btn:hover, .up-amount-btn.up-is-active { border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-primary-soft); }

@media (max-width: 1100px) {
  .up-stats-strip { grid-template-columns: repeat(2,1fr); }
  .up-wallet-cards-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .up-account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .up-stats-strip { grid-template-columns: repeat(2,1fr); }
  .up-favorites-grid { grid-template-columns: repeat(2,1fr); }
  .up-wallet-hero { padding: 1.5rem 1.5rem; }
  .up-wallet-hero__amount { font-size: 2.2rem; }
}
@media (max-width: 480px) {
  .up-stats-strip { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .up-wallet-cards-strip { grid-template-columns: 1fr; }
  .up-favorites-grid { grid-template-columns: 1fr 1fr; }
  .up-address-grid { grid-template-columns: 1fr; }
  .up-order-card__head { flex-direction: column; gap: .5rem; }
  .up-order-card__foot { flex-direction: column; align-items: flex-start; }
  .up-chat-msg__content { max-width: 85%; }
}

.up-nxs-breadcrumb {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
}
.up-nxs-bc-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: .65rem 1.75rem;
}
.up-nxs-bc-list {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--clr-text-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.up-nxs-bc-list a { color: var(--clr-text-3); transition: color var(--dur) var(--ease); text-decoration: none; }
.up-nxs-bc-list a:hover { color: var(--clr-primary); }
.up-nxs-bc-sep { color: var(--clr-border); }
.up-nxs-bc-active { color: var(--clr-text-2); font-weight: 500; }

.up-panel-main .text-login {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--clr-text);
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.up-panel-main .text-login small {
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-text-3);
}

.up-panel-main .modalinput,
.up-panel-main .form-control {
  padding: .72rem 1rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: .9rem;
  font-family: var(--font-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
  appearance: none;
  margin-top: .6rem;
}
.up-panel-main .modalinput:focus,
.up-panel-main .form-control:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3.5px var(--clr-primary-glass);
  outline: none;
}
.up-panel-main .modalinput::placeholder,
.up-panel-main .form-control::placeholder { color: var(--clr-text-3); }
.up-panel-main textarea.modalinput,
.up-panel-main textarea.form-control { resize: vertical; min-height: 100px; }
.up-panel-main select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239BA8B5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}

.up-panel-main .btn-primary,
.up-panel-main .btn.btn-primary {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: .7rem 1.4rem;
  font-weight: 600;
  font-size: .875rem;
  font-family: var(--font-body);
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  line-height: 1;
  text-decoration: none;
}
.up-panel-main .btn-primary:hover,
.up-panel-main .btn.btn-primary:hover {
  background: var(--clr-primary-dark);
  box-shadow: 0 8px 28px rgba(10,132,255,.35);
  transform: translateY(-1px);
  color: #fff;
}
.up-panel-main .btn-defaultmavi,
.up-panel-main .btn.btn-defaultmavi {
  background: var(--clr-surface);
  color: var(--clr-text-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r);
  padding: .7rem 1.4rem;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.up-panel-main .btn-defaultmavi:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.up-panel-main .btn-outline-danger {
  border: 1.5px solid var(--clr-danger);
  color: var(--clr-danger);
  border-radius: var(--r);
  padding: .55rem 1rem;
  font-weight: 600;
  font-size: .8rem;
  background: transparent;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.up-panel-main .btn-outline-danger:hover { background: var(--clr-danger-soft); }
.up-panel-main .btn-lg { padding: .85rem 1.6rem; font-size: .95rem; }
.up-panel-main .btn-sm,
.up-panel-main .btn-md { padding: .45rem .9rem; font-size: .8rem; }
.up-panel-main .btn-block { width: 100%; justify-content: center; }
.up-panel-main .float-right { float: right; }
.up-panel-main .ml-3 { margin-left: .75rem; }
.up-panel-main .mt-2 { margin-top: .5rem; }
.up-panel-main .mt-3 { margin-top: .75rem; }
.up-panel-main .mt-4 { margin-top: 1rem; }
.up-panel-main .mt-5 { margin-top: 1.25rem; }
.up-panel-main .mb-2 { margin-bottom: .5rem; }
.up-panel-main .mb-4 { margin-bottom: 1rem; }
.up-panel-main .mb-5 { margin-bottom: 1.25rem; }
.up-panel-main::after { content: ''; display: table; clear: both; }
.up-panel-main form::after { content: ''; display: table; clear: both; }

.up-panel-main .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -.5rem;
}
.up-panel-main [class*="col-"] { padding: 0 .5rem; box-sizing: border-box; }
.up-panel-main .col-12  { width: 100%; }
.up-panel-main .col-6   { width: 50%; }
.up-panel-main .col-5   { width: 41.666%; }
.up-panel-main .col-7   { width: 58.333%; }
.up-panel-main .col-4   { width: 33.333%; }
.up-panel-main .col-xs-3 { width: 25%; }
.up-panel-main .col-md-2  { width: 16.666%; }
.up-panel-main .col-md-3  { width: 25%; }
.up-panel-main .col-md-4  { width: 33.333%; }
.up-panel-main .col-md-5  { width: 41.666%; }
.up-panel-main .col-md-6  { width: 50%; }
.up-panel-main .col-md-7  { width: 58.333%; }
.up-panel-main .col-md-9  { width: 75%; }
.up-panel-main .col-md-10 { width: 83.333%; }
.up-panel-main .col-md-12 { width: 100%; }

@media (max-width: 768px) {
  .up-panel-main [class*="col-md-"],
  .up-panel-main .col-5,
  .up-panel-main .col-7,
  .up-panel-main .col-6,
  .up-panel-main .col-4 { width: 100%; }
}
@media (max-width: 480px) {
  .up-panel-main .col-6 { width: 100%; }
}

.up-panel-main .card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.up-panel-main .card-body { padding: 1.25rem; }
.up-panel-main .card-header {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--clr-border-light);
  background: var(--clr-surface-2);
}
.up-panel-main .card h5 { font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.up-panel-main .card p  { font-size: .83rem; color: var(--clr-text-2); margin-bottom: .25rem; }

.up-panel-main .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.up-panel-main .badge-primary   { background: var(--clr-primary-soft); color: var(--clr-primary-dark); }
.up-panel-main .badge-success   { background: var(--clr-success-soft); color: #007A5E; }
.up-panel-main .badge-info      { background: var(--clr-info-soft);    color: #2D5ED4; }
.up-panel-main .badge-danger    { background: var(--clr-danger-soft);  color: var(--clr-danger); }
.up-panel-main .badge-warning   { background: var(--clr-warning-soft); color: #9A6700; }
.up-panel-main .badge-secondary { background: var(--clr-surface-3);    color: var(--clr-text-3); }

.up-panel-main .table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.up-panel-main .table th {
  padding: .75rem 1rem;
  background: var(--clr-surface-2);
  color: var(--clr-text-3);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--clr-border);
  text-align: left;
}
.up-panel-main .table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--clr-border-light);
  vertical-align: middle;
  color: var(--clr-text);
}
.up-panel-main .table tbody tr:hover { background: var(--clr-surface-2); }
.up-panel-main .table .text-center { text-align: center; }

.up-panel-main .alert {
  padding: .9rem 1.1rem;
  border-radius: var(--r);
  font-size: .875rem;
  margin-bottom: 1rem;
  border: 1px solid;
}
.up-panel-main .alert-danger { background: var(--clr-danger-soft); color: var(--clr-danger); border-color: #FECDD3; }
.up-panel-main .alert-info   { background: var(--clr-info-soft);   color: #2D5ED4;           border-color: #BFDBFE; }

.up-panel-main .kargo-takip-timeline { padding: 1rem 0; }
.up-panel-main .kargo-adim {
  display: flex;
  gap: 1rem;
  padding: .75rem 0;
  border-left: 2px solid var(--clr-border);
  margin-left: .7rem;
  padding-left: 1.25rem;
  position: relative;
}
.up-panel-main .kargo-adim .nokta {
  position: absolute;
  left: -5px;
  top: 1rem;
  width: 8px;
  height: 8px;
  background: var(--clr-primary);
  border-radius: 50%;
  border: 2px solid var(--clr-surface);
  box-shadow: 0 0 0 2px var(--clr-primary);
}
.up-panel-main .kargo-adim .bilgi strong { font-weight: 700; font-size: .875rem; }
.up-panel-main .kargo-adim .bilgi .durum { color: var(--clr-text-3); font-size: .8rem; }


.up-panel-main .sepetimgg { width: 100%; border-radius: var(--r); border: 1px solid var(--clr-border-light); }
.up-panel-main .accordionara { margin: .5rem 0 0; }
.up-panel-main .text-green  { color: var(--clr-success); }
.up-panel-main .text-gray   { color: var(--clr-text-3); }
.up-panel-main .text-dark   { color: var(--clr-text); }
.up-panel-main .text-red    { color: var(--clr-danger); }
.up-panel-main .text-black  { color: var(--clr-text); }

.up-panel-main .stepwizard { padding: 1rem 0; }
.up-panel-main .stepwizard-row { display: flex; gap: 0; }
.up-panel-main .stepwizard-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.up-panel-main .btn-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--clr-border);
  background: var(--clr-surface-3);
  cursor: default;
  display: block;
}
.up-panel-main .btn-greens { background: var(--clr-success) !important; border-color: var(--clr-success) !important; }
.up-panel-main .stepwizard-step p { font-size: .7rem; text-align: center; color: var(--clr-text-3); line-height: 1.3; }
.up-panel-main .stepwizard-step p.text-green { color: var(--clr-success); }

.up-panel-main .productlist { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--clr-border); }
.up-panel-main .productlist img { width: 100%; object-fit: cover; aspect-ratio: 1; }
.up-panel-main .uruntext { color: var(--clr-text); text-decoration: none; display: block; }
.up-panel-main .uruntext:hover { color: var(--clr-primary); }
.up-panel-main .price-box { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; }
.up-panel-main .product-price { font-family: var(--font-display); font-weight: 800; color: var(--clr-primary); }
.up-panel-main .old-price { text-decoration: line-through; color: var(--clr-text-3); font-size: .82rem; }

.up-panel-main .rating { width: 100%; cursor: pointer; }
.nxs-list-view .nxs-product-info {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modalmodern .modal-content {
  border-radius: var(--r-2xl) !important;
  border: 1px solid var(--clr-border) !important;
  box-shadow: var(--shadow-xl) !important;
  font-family: var(--font-body) !important;
}
.modalmodern .modal-header {
  border-bottom: 1px solid var(--clr-border-light) !important;
  padding: 1.25rem 1.5rem !important;
}
.modalmodern .modal-body { padding: 1.5rem !important; }
.modalmodern .modal-title { font-family: var(--font-display) !important; font-weight: 700 !important; }
.up-nx-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(13,27,42,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: up-fadeIn .2s cubic-bezier(.4,0,.2,1);
}
.up-nx-modal.up-is-open {
  display: flex;
}
.up-nx-modal__box {
  background: var(--clr-surface);
  border-radius: var(--r-2xl);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 64px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
  animation: up-slideUp .28s cubic-bezier(.4,0,.2,1);
}
.up-nx-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--clr-border-light);
}
.up-nx-modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--clr-text);
}
.up-nx-modal__close {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-3);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  transition: background .2s, color .2s;
}
.up-nx-modal__close:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text);
}
.up-nx-modal__body {
  padding: 1.5rem;
}