@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";
/* [project]/app/globals.css [app-client] (css) */
:root {
  --bg: #080f1e;
  --surface: #111d30;
  --surface-hover: #17263d;
  --border: #23354e;
  --text: #edf5ff;
  --muted: #93a5be;
  --blue: #79d5ff;
  --bright: #46b6ff;
  --green: #76dec6;
  --font: "Outfit","Noto Sans Thai",Tahoma,sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

button, input, select {
  font: inherit;
}

button, a, input, select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  color: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: 0;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

::selection {
  background: #3b9dce66;
}

h1, h2, h3, p {
  margin: 0;
}

button svg, a svg {
  flex-shrink: 0;
}

img {
  max-width: 100%;
  display: block;
}

input {
  min-width: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.ambient {
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(at 4% 22%, #12497b22, #0000 27%), radial-gradient(at 98% 42%, #12497b1c, #0000 20%);
  height: 1800px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ambient-star {
  color: #79bfee3d;
  font-size: 30px;
  position: absolute;
}

.star-one {
  top: 185px;
  left: 5%;
}

.star-two {
  font-size: 22px;
  top: 590px;
  left: 7%;
}

.star-three {
  font-size: 20px;
  top: 450px;
  right: 5%;
}

.star-four {
  font-size: 35px;
  top: 820px;
  right: 3%;
}

.header {
  z-index: 20;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #0c1525ed;
  border-bottom: 1px solid #213047;
  height: 90px;
  position: sticky;
  top: 0;
}

.header-inner {
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  max-width: 1248px;
  height: 100%;
  margin: auto;
  padding: 0 24px;
  display: flex;
}

.brand {
  flex-shrink: 0;
  align-items: center;
  gap: 11px;
  display: flex;
}

.brand-mark {
  color: #a1e5ff;
  background: linear-gradient(140deg, #274a69, #142237);
  border: 1px solid #416283;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 49px;
  display: flex;
  transform: rotate(-5deg);
  box-shadow: 0 0 25px #3182c219;
}

.brand-mark svg {
  transform: rotate(5deg);
}

.brand strong {
  letter-spacing: .2px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  display: block;
}

.brand strong span {
  color: var(--blue);
  margin-left: 4px;
}

.brand small {
  letter-spacing: 2.7px;
  color: var(--muted);
  margin-top: 4px;
  font-size: 8px;
  display: block;
}

.nav {
  background: #101c2d;
  border: 1px solid #26374f;
  border-radius: 30px;
  align-items: center;
  gap: 5px;
  padding: 5px;
  display: flex;
}

.nav a, .nav button {
  color: #b2c1d6;
  white-space: nowrap;
  border-radius: 22px;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 13px;
  transition: background .2s, color .2s;
  display: flex;
}

.nav a:hover, .nav button:hover {
  color: var(--blue);
  background: #1e3048;
}

.nav .nav-active {
  color: #9cdefb;
  background: #243e58;
}

.header-actions {
  align-items: center;
  gap: 12px;
  display: flex;
}

.icon-button {
  border: 1px solid var(--border);
  color: #a5b8d2;
  background: #121e31;
  border-radius: 11px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 39px;
  height: 39px;
  transition: all .2s;
  display: flex;
}

.icon-button:hover {
  color: var(--blue);
  border-color: #416e98;
}

.cart-button {
  position: relative;
}

.cart-count {
  background: var(--blue);
  color: #102033;
  border-radius: 20px;
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  position: absolute;
  top: -6px;
  right: -5px;
}

.user-button {
  text-align: left;
  background: linear-gradient(120deg, #203d59, #1b2e48);
  border: 1px solid #325370;
  border-radius: 13px;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  padding: 8px 12px 8px 8px;
  display: flex;
}

.avatar {
  color: #d3f4ff;
  background: linear-gradient(145deg, #4294ba, #18324f);
  border: 1px solid #6c9ec8;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 33px;
  display: flex;
}

.user-button strong {
  text-overflow: ellipsis;
  max-width: 100px;
  font-size: 12px;
  display: block;
  overflow: hidden;
}

.user-button small {
  color: #aac9e3;
  font-size: 11px;
  line-height: 1.2;
  display: block;
}

.demo-tiny {
  color: #82dbcf;
  margin-left: 5px;
  font-size: 7px;
}

.user-button > svg {
  margin-left: auto;
}

.mobile-toggle {
  display: none;
}

.page-intro {
  color: #8ea5be;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0 17px;
  font-size: 12px;
  display: flex;
}

.page-intro > span:first-child {
  align-items: center;
  gap: 8px;
  display: flex;
}

.status-dot {
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  display: inline-block;
  box-shadow: 0 0 8px #69ddbb24;
}

.status-dot.out {
  background: #e2919d;
}

.local-chip {
  letter-spacing: 1px;
  color: #8ecbbb;
  background: #17342f66;
  border: 1px solid #2d554c;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 9px;
  display: inline-flex;
}

.hero {
  background: linear-gradient(110deg, #172b46 0%, #112a46 48%, #153757 100%);
  border: 1px solid #335473;
  border-radius: 24px;
  min-height: 390px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 60px #00000015;
}

.hero:after {
  content: "";
  filter: blur(55px);
  pointer-events: none;
  background: #6da9f918;
  width: 180px;
  height: 180px;
  position: absolute;
  top: 170px;
  left: -90px;
}

.hero-grid {
  background-image: linear-gradient(#85cdff04 1px, #0000 1px), linear-gradient(90deg, #85cdff04 1px, #0000 1px);
  background-size: 45px 45px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, #0000, #000);
  mask-image: linear-gradient(to right, #0000, #000);
}

.hero-content {
  z-index: 2;
  pointer-events: none;
  width: 58%;
  padding: 41px 0 52px 48px;
  position: relative;
}

.hero-content button {
  pointer-events: auto;
}

.hero-label {
  letter-spacing: 2.2px;
  color: #addaf6;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 9px;
  display: flex;
}

.hero h1 {
  letter-spacing: -1.7px;
  width: max-content;
  font-size: 53px;
  font-weight: 800;
  line-height: 1.24;
  position: relative;
}

.hero h1 > span:not(.heading-star) {
  color: #8bdcff;
  text-shadow: 0 0 35px #75cfff20;
}

.heading-star {
  color: #9bdcff;
  font-size: 34px;
  position: absolute;
  top: 3px;
  right: -52px;
}

.hero p {
  color: #b0c6dc;
  white-space: pre-line;
  margin-top: 15px;
  font-size: 13px;
  line-height: 1.85;
}

.primary-button {
  color: #11263c;
  background: linear-gradient(105deg, #a1e6ff, #67c5ff);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s, filter .2s;
  display: inline-flex;
  box-shadow: 0 4px 18px #3eb7ff13;
}

.primary-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.hero-cta {
  margin-top: 23px;
}

.hero-cta svg:last-child {
  margin-left: 17px;
}

.hero-perks {
  color: #9fb9d0;
  gap: 17px;
  margin-top: 23px;
  font-size: 10px;
  display: flex;
}

.hero-perks span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.hero-perks svg {
  color: #7acef4;
}

.hero-art {
  object-fit: contain;
  pointer-events: none;
  width: 660px;
  height: 430px;
  position: absolute;
  top: -8px;
  right: -55px;
}

.hero-art-label {
  color: #89b5d6;
  letter-spacing: 3px;
  font-size: 8px;
  position: absolute;
  bottom: 37px;
  right: 118px;
}

.hero-controls {
  z-index: 3;
  align-items: center;
  gap: 12px;
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-controls > button {
  color: #94b1ce;
  background: #091a3440;
  border-radius: 50%;
  place-items: center;
  width: 23px;
  height: 23px;
  display: grid;
}

.hero-controls > div {
  align-items: center;
  gap: 6px;
  display: flex;
}

.hero-controls .dot {
  background: #5d7894;
  border-radius: 10px;
  width: 6px;
  height: 6px;
  padding: 0;
  transition: width .2s;
}

.hero-controls .dot.active {
  background: #b3eaff;
  width: 21px;
}

.hero-index {
  color: #afd5ee;
  font-size: 10px;
  position: absolute;
  bottom: 18px;
  left: 48px;
}

.hero-index span {
  color: #6383a0;
}

.announcement {
  background: #101e32;
  border: 1px solid #263b54;
  border-radius: 13px;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  margin-top: 17px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
}

.announcement-label {
  color: #a8e4ff;
  background: #233f59;
  border-radius: 8px;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-weight: 600;
  display: inline-flex;
}

.announcement p {
  color: #acbcd1;
}

.announcement p strong {
  color: #d5e9ff;
  font-family: Outfit, sans-serif;
}

.announce-extra {
  color: #5a7898;
  margin: 0 12px;
}

.announcement-end {
  color: #7c96b1;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 10px;
  display: flex;
}

.announcement-end svg {
  color: #81c7ed;
}

.stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 17px;
  display: grid;
}

.stat-card {
  border: 1px solid var(--border);
  background: linear-gradient(110deg, #131f33, #111c2e);
  border-radius: 14px;
  align-items: center;
  gap: 14px;
  min-height: 85px;
  padding: 17px 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.stat-icon {
  color: #9eddf8;
  background: #203951;
  border-radius: 12px;
  flex-shrink: 0;
  place-items: center;
  width: 43px;
  height: 43px;
  display: grid;
}

.stat-label {
  color: #9aabc2;
  font-size: 11px;
}

.stat-card p {
  margin-top: 3px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card p small {
  color: #a8b9ce;
  margin-left: 7px;
  font-size: 11px;
  font-weight: 500;
}

.stat-card:first-child p {
  font-size: 20px;
}

.stat-card:first-child p small {
  letter-spacing: .6px;
  font-size: 8px;
}

.stat-decoration {
  color: #7cb0df0b;
  font-size: 53px;
  position: absolute;
  bottom: -15px;
  right: 12px;
}

.shortcuts {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 17px;
  display: grid;
}

.shortcut {
  border: 1px solid var(--border);
  background: #111b2d;
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 139px;
  padding: 21px 10px 18px;
  transition: all .25s;
  display: flex;
  position: relative;
}

.shortcut:hover {
  background: #162740;
  border-color: #4b80a6;
  transform: translateY(-3px);
}

.shortcut-icon {
  color: #99defb;
  background: #21364e;
  border-radius: 16px;
  place-items: center;
  width: 49px;
  height: 49px;
  margin-bottom: 11px;
  display: grid;
}

.shortcut strong {
  font-size: 13px;
  font-weight: 600;
}

.shortcut small {
  color: #849bb5;
  margin-top: 3px;
  font-size: 10px;
}

.shortcut-arrow {
  color: #49617e;
  position: absolute;
  top: 14px;
  right: 13px;
  transform: rotate(45deg);
}

.section-heading {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 31px 0 17px;
  display: flex;
}

.section-heading > div {
  align-items: center;
  gap: 12px;
  display: flex;
}

.section-icon {
  color: var(--blue);
  place-items: center;
  width: 30px;
  height: 38px;
  display: grid;
  position: relative;
}

.section-icon:before {
  content: "";
  background: linear-gradient(var(--blue),#6c8cec);
  border-radius: 4px;
  width: 3px;
  height: 25px;
  position: absolute;
  top: 7px;
  left: -8px;
}

.section-heading h2 {
  letter-spacing: -.3px;
  font-size: 20px;
  font-weight: 700;
}

.section-heading p {
  color: #849ab5;
  margin-top: 1px;
  font-size: 11px;
}

.text-button {
  color: #91cdec;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  display: inline-flex;
}

.text-button:hover {
  color: #d3f4ff;
}

.category-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  display: grid;
}

.category-card {
  text-align: left;
  background: #172c45;
  border: 1px solid #3b4058;
  border-radius: 16px;
  height: 188px;
  transition: transform .25s, border .25s;
  position: relative;
  overflow: hidden;
}

.category-card img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: transform .4s;
}

.category-card:hover {
  border-color: #668aa9;
  transform: translateY(-3px);
}

.category-card:hover img {
  transform: scale(1.05);
}

.category-overlay {
  background: linear-gradient(0deg, #0b1627f0, #0b162733 70%);
  position: absolute;
  inset: 0;
}

.category-count {
  color: #d0dbe9;
  background: #0b13296b;
  border: 1px solid #ffffff26;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 9px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.category-content {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
}

.category-content small {
  letter-spacing: 1.8px;
  color: #c1cadd;
  font-size: 8px;
}

.category-content h3 {
  letter-spacing: .3px;
  margin: 6px 0;
  font-family: Outfit, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.category-card.sky .category-content h3 {
  font-size: 19px;
}

.category-content p {
  color: #9dabc0;
  font-size: 10px;
}

.category-arrow {
  background: #ffffff09;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
  position: absolute;
  bottom: 19px;
  right: 15px;
}

.coral .category-content h3 {
  color: #ffb4c0;
}

.sky .category-content h3 {
  color: #c4f1ff;
}

.violet .category-content h3 {
  color: #dac6ff;
}

.mint .category-content h3 {
  color: #b8f6d7;
}

.heading-tag {
  letter-spacing: 1px;
  vertical-align: middle;
  color: #9cd4ed;
  background: #1a3249;
  border: 1px solid #2a4964;
  border-radius: 5px;
  margin-left: 13px;
  padding: 4px 7px;
  font-size: 8px;
  font-weight: 500;
}

.results-count {
  color: #849ab5;
  font-size: 11px;
}

.catalog-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  display: flex;
}

.filter-tabs {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.filter-tabs button {
  color: #9aaec5;
  background: #101c2d;
  border: 1px solid #24374d;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 11px;
  display: flex;
}

.filter-tabs .filter-active {
  color: #bceaff;
  background: #214058;
  border-color: #46718e;
}

.search-sort {
  gap: 8px;
  display: flex;
}

.search-box {
  border: 1px solid var(--border);
  color: #7c93ac;
  background: #101c2d;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  display: flex;
}

.search-box input {
  width: 136px;
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
  font-size: 11px;
}

.search-box input::placeholder {
  color: #788da7;
}

.search-box button {
  color: #91adc6;
  place-items: center;
  padding: 0;
  display: grid;
}

.search-sort select {
  color: #aec1d6;
  border: 1px solid var(--border);
  background: #101c2d;
  border-radius: 8px;
  max-width: 135px;
  padding: 7px 10px;
  font-size: 11px;
}

.product-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
  display: grid;
}

.product-card {
  border: 1px solid var(--border);
  background: #111d2e;
  border-radius: 15px;
  transition: transform .25s, border-color .25s;
  overflow: hidden;
}

.product-card:hover {
  border-color: #416888;
  transform: translateY(-3px);
}

.product-art {
  text-align: left;
  width: 100%;
  height: 155px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.product-art img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}

.product-art:hover img {
  transform: scale(1.04);
}

.product-art:after {
  content: "";
  background: linear-gradient(0deg, #0a16277d, #0000 65%);
  position: absolute;
  inset: 0;
}

.product-badge {
  color: #ceebff;
  z-index: 1;
  background: #1c3c59db;
  border: 1px solid #82bdde45;
  border-radius: 5px;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  font-size: 9px;
  display: flex;
  position: absolute;
  top: 12px;
  left: 12px;
}

.product-badge.valorant {
  color: #ffd4dc;
  background: #7c3e55b0;
  border-color: #e994ac45;
}

.product-badge.rov {
  color: #e5d4ff;
  background: #5c4788b0;
  border-color: #b798d345;
}

.product-badge.roblox {
  color: #c1f9df;
  background: #2a6459b0;
  border-color: #81c3b245;
}

.product-game-name {
  letter-spacing: 1.2px;
  z-index: 1;
  color: #f2f7ff;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 700;
  position: absolute;
  bottom: 12px;
  left: 14px;
}

.art-view {
  opacity: 0;
  z-index: 2;
  background: #06132670;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  transition: opacity .2s;
  display: flex;
  position: absolute;
  inset: 0;
}

.product-art:hover .art-view {
  opacity: 1;
}

.product-info {
  padding: 13px 15px 15px;
}

.product-stock {
  color: #92cbbb;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
  font-size: 9px;
  display: flex;
}

.product-stock .status-dot {
  width: 4px;
  height: 4px;
}

.product-stock > span:last-child {
  color: #708da9;
  letter-spacing: .5px;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: 8px;
  display: flex;
}

.product-title {
  text-align: left;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  display: block;
}

.product-title:hover {
  color: var(--blue);
}

.product-info > p {
  color: #8a9cb5;
  margin-top: 4px;
  font-size: 10px;
}

.product-tags {
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  display: flex;
}

.product-tags span {
  color: #a8bdd2;
  background: #1a2a3f;
  border: 1px solid #263a51;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 8px;
}

.product-bottom {
  border-top: 1px solid #23364c;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
}

.product-bottom small {
  color: #657c98;
  font-size: 10px;
  line-height: 1.3;
  text-decoration: line-through;
  display: block;
}

.product-bottom strong {
  color: #a4e3ff;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.4;
}

.add-button {
  color: #b8e8ff;
  background: #254a65;
  border: 1px solid #38698b;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 10px;
  transition: all .2s;
  display: inline-flex;
}

.add-button:hover {
  background: #326785;
}

.how-it-works {
  border: 1px solid var(--border);
  background: linear-gradient(105deg, #13253a, #101b2c);
  border-radius: 17px;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 22px;
  margin-top: 38px;
  padding: 25px 28px;
  display: grid;
}

.eyebrow {
  letter-spacing: 1.6px;
  color: #80bfdd;
  font-size: 8px;
}

.steps-intro h2 {
  margin-top: 7px;
  margin-bottom: 9px;
  font-size: 20px;
}

.step {
  border-left: 1px solid #293c53;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  padding-left: 25px;
  display: flex;
  position: relative;
}

.step > svg {
  color: #87cce9;
}

.step strong {
  font-size: 12px;
  font-weight: 600;
}

.step small {
  color: #8197b0;
  font-size: 10px;
}

.step-number {
  color: #7daacf15;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  top: 0;
  right: 5px;
}

.trust-strip {
  border-bottom: 1px solid #203148;
  justify-content: center;
  align-items: center;
  gap: 56px;
  padding: 30px 0;
  display: flex;
}

.trust-strip span {
  color: #8098b2;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  display: flex;
}

.trust-strip svg {
  color: #638cae;
}

footer {
  padding: 30px 0 22px;
}

.footer-top {
  align-items: center;
  gap: 25px;
  display: flex;
}

.footer-brand .brand strong {
  font-size: 20px;
}

.footer-brand .brand-mark {
  width: 40px;
  height: 40px;
}

.footer-top p {
  color: #7890ac;
  margin-left: 14px;
  font-size: 11px;
}

.footer-top > .text-button {
  margin-left: auto;
}

.footer-bottom {
  color: #627b95;
  border-top: 1px solid #1c2a3e;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 19px;
  font-size: 9px;
  display: flex;
}

.floating-actions {
  z-index: 19;
  flex-direction: column;
  gap: 10px;
  display: flex;
  position: fixed;
  bottom: 26px;
  right: 25px;
}

.floating-actions button {
  border-radius: 50%;
  place-items: center;
  display: grid;
  box-shadow: 0 4px 20px #020a2190;
}

.floating-top {
  color: #9edcff;
  background: #203a55;
  border: 1px solid #375f80;
  align-self: center;
  width: 38px;
  height: 38px;
}

.floating-support {
  color: #10263a;
  background: linear-gradient(140deg, #79d7ff, #4984e2);
  width: 48px;
  height: 48px;
}

.toast {
  z-index: 60;
  color: #b8f0db;
  background: #163530;
  border: 1px solid #427665;
  border-radius: 12px;
  align-items: center;
  gap: 11px;
  max-width: 90vw;
  padding: 13px 18px;
  font-size: 12px;
  display: flex;
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 6px 25px #0005;
}

.toast svg {
  flex-shrink: 0;
}

.toast button {
  color: #9cd4bf;
  place-items: center;
  padding: 3px;
  display: grid;
}

.storage-warning {
  z-index: 65;
  text-align: center;
  color: #ffdfbc;
  background: #6c3e24;
  padding: 8px;
  font-size: 12px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.modal {
  color: var(--text);
  background: #111e31;
  border: 1px solid #36516c;
  border-radius: 20px;
  width: min(480px, 100% - 32px);
  max-height: 85dvh;
  padding: 25px;
  overflow-y: auto;
  box-shadow: 0 30px 100px #0008;
}

.modal::backdrop {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background: #040b19bb;
}

.modal-wide {
  width: min(640px, 100% - 32px);
}

.modal-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.modal-head h2 {
  margin-top: 4px;
  font-size: 21px;
}

.modal-head .icon-button {
  width: 33px;
  height: 33px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.detail-art {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 195px;
}

.detail-title {
  margin: 17px 0 4px;
  font-size: 20px;
}

.detail-list {
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.detail-list li {
  color: #b1c4da;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  display: flex;
}

.detail-list svg {
  color: #85d7ed;
  flex-shrink: 0;
  margin-top: 3px;
}

.demo-note {
  color: #9ac4dd;
  background: #182e43;
  border: 1px solid #294c66;
  border-radius: 9px;
  align-items: flex-start;
  gap: 9px;
  margin: 17px 0;
  padding: 11px 12px;
  font-size: 11px;
  display: flex;
}

.demo-note svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.detail-bottom {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  display: flex;
}

.detail-bottom > div {
  flex-direction: column;
  display: flex;
}

.detail-bottom strong {
  color: #a2e0fc;
  font-size: 30px;
  line-height: 1.3;
}

.detail-bottom small {
  color: #8aacae;
  font-size: 10px;
}

.wallet-balance {
  color: #a1e2ff;
  background: linear-gradient(120deg, #244d69, #1d334b);
  border: 1px solid #386084;
  border-radius: 13px;
  align-items: center;
  gap: 15px;
  padding: 20px;
  display: flex;
}

.wallet-balance > div {
  flex-direction: column;
  display: flex;
}

.wallet-balance > div > span {
  color: #a4c4dc;
  font-size: 11px;
}

.wallet-balance strong {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
}

.wallet-balance > .local-chip {
  margin-left: auto;
  font-size: 8px;
}

.field-label {
  color: #aac1d7;
  margin: 19px 0 9px;
  font-size: 12px;
  display: block;
}

.amount-options {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  display: grid;
}

.amount-options button {
  color: #9ebbd4;
  background: #17273c;
  border: 1px solid #2a435e;
  border-radius: 8px;
  padding: 10px 5px;
}

.amount-options .selected {
  color: #c7edff;
  background: #264f6c;
  border-color: #6cbde7;
}

.form-input {
  color: var(--text);
  background: #0c1829;
  border: 1px solid #314862;
  border-radius: 9px;
  width: 100%;
  padding: 12px 14px;
}

.full-button {
  width: 100%;
  margin-top: 15px;
}

.secondary-button {
  color: #b4ddf5;
  background: #1d354b;
  border: 1px solid #3a607b;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  font-size: 12px;
  display: inline-flex;
}

.form-error {
  color: #ffb9c7;
  background: #53263566;
  border: 1px solid #91445966;
  border-radius: 8px;
  margin-top: 13px;
  padding: 11px 12px;
  font-size: 12px;
}

.cart-items {
  flex-direction: column;
  gap: 13px;
  display: flex;
}

.cart-item {
  border-bottom: 1px solid #293a50;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  display: flex;
}

.cart-item img {
  object-fit: cover;
  border-radius: 8px;
  width: 67px;
  height: 54px;
}

.cart-item > div {
  flex: 1;
}

.cart-item strong {
  font-size: 12px;
  display: block;
}

.cart-item small {
  color: #93b2cc;
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.cart-item .icon-button {
  color: #8b9fb8;
  border: 0;
  width: 31px;
  height: 31px;
}

.cart-summary, .cart-credit {
  color: #a4bad0;
  justify-content: space-between;
  align-items: center;
  margin-top: 17px;
  font-size: 12px;
  display: flex;
}

.cart-summary strong {
  color: #b0e6ff;
  font-size: 25px;
}

.cart-credit {
  margin-top: 10px;
}

.empty-state {
  text-align: center;
  background: #101f32;
  border: 1px dashed #304964;
  border-radius: 13px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 35px 15px;
  display: flex;
}

.modal .empty-state {
  background: none;
  border: 0;
  padding: 26px 0;
}

.empty-state > svg {
  color: #73bddf;
  margin-bottom: 4px;
}

.empty-state h3 {
  font-size: 18px;
}

.empty-state p {
  color: #91a7bf;
  margin-bottom: 9px;
  font-size: 12px;
}

.order-list {
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.order-card {
  background: #0e1a2d;
  border: 1px solid #2c425b;
  border-radius: 12px;
  padding: 16px;
}

.order-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  display: flex;
}

.order-head > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  display: flex;
}

.order-head strong {
  color: #b7def4;
  font-size: 13px;
}

.order-head button {
  color: #7299b8;
  place-items: center;
  padding: 4px;
  display: grid;
}

.order-head small {
  color: #7e98b2;
  flex-basis: 100%;
  font-size: 10px;
}

.order-status {
  color: #9ce0c1;
  white-space: nowrap;
  background: #19392f;
  border: 1px solid #2c6454;
  border-radius: 5px;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  font-size: 9px;
  display: flex;
}

.order-line {
  color: #a2b7d0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 11px;
  display: flex;
}

.order-line strong {
  color: #c6e2f6;
  white-space: nowrap;
  font-weight: 500;
}

.order-total {
  color: #96abc5;
  border-top: 1px solid #263c54;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 11px;
  font-size: 11px;
  display: flex;
}

.order-total strong {
  color: #a3ddf7;
  font-size: 20px;
}

.profile-avatar {
  color: #b5edff;
  background: linear-gradient(140deg, #327799, #1b3553);
  border: 1px solid #5b98b8;
  border-radius: 50%;
  place-items: center;
  width: 83px;
  height: 83px;
  margin: 8px auto 15px;
  display: grid;
}

.profile-description {
  text-align: center;
  color: #9fb5ce;
  font-size: 12px;
}

.support-intro {
  text-align: center;
  flex-direction: column;
  align-items: center;
  margin: 20px 0 25px;
  display: flex;
}

.support-intro .shortcut-icon {
  width: 65px;
  height: 65px;
}

.support-intro h3 {
  margin: 8px 0;
  font-size: 20px;
}

.support-intro p {
  color: #94acc5;
  font-size: 11px;
}

.faq-item {
  border-bottom: 1px solid #293d53;
}

.faq-item > button {
  text-align: left;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px 0;
  font-size: 12px;
  display: flex;
}

.faq-item > button svg {
  color: #7aa8c7;
  transition: transform .2s;
}

.rotated {
  transform: rotate(180deg);
}

.faq-item > p {
  color: #94abc4;
  padding: 0 4px 17px;
  font-size: 11px;
  line-height: 1.9;
}

.support-status {
  color: #8ccdb9;
  background: #172f3066;
  border: 1px solid #2e4e4d;
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 10px;
  font-size: 9px;
  display: flex;
}

.support-status > span:last-child {
  color: #8cacae;
  margin-left: auto;
  font-size: 9px;
}

@media (min-width: 1600px) {
  .container {
    max-width: 1280px;
  }

  .header-inner {
    max-width: 1328px;
  }

  .hero {
    min-height: 410px;
  }

  .hero-art {
    width: 720px;
    height: 468px;
    top: -21px;
  }

  .hero-content {
    padding-top: 44px;
  }

  .category-card {
    height: 203px;
  }

  .product-art {
    height: 168px;
  }
}

@media (max-width: 1100px) {
  .header-inner {
    gap: 15px;
  }

  .nav a, .nav button {
    padding: 8px 10px;
    font-size: 12px;
  }

  .brand strong {
    font-size: 21px;
  }

  .brand small {
    letter-spacing: 2px;
    font-size: 7px;
  }

  .brand-mark {
    width: 40px;
    height: 43px;
  }

  .user-button {
    min-width: 125px;
  }

  .header-actions {
    gap: 8px;
  }

  .hero-content {
    padding-left: 36px;
  }

  .hero-art {
    width: 610px;
    right: -106px;
  }

  .stat-card {
    gap: 10px;
    padding: 16px 14px;
  }

  .stat-card p small {
    font-size: 10px;
  }

  .stat-card:first-child p small {
    font-size: 7px;
  }

  .catalog-toolbar {
    align-items: flex-start;
    gap: 12px;
  }

  .filter-tabs {
    gap: 5px;
  }

  .filter-tabs button {
    padding: 7px 9px;
    font-size: 10px;
  }

  .search-box input {
    width: 100px;
  }

  .search-sort select {
    max-width: 115px;
  }

  .product-info {
    padding: 11px 12px;
  }

  .product-title {
    font-size: 12px;
  }

  .product-bottom strong {
    font-size: 21px;
  }

  .add-button {
    padding: 8px;
    font-size: 9px;
  }

  .product-tags {
    gap: 3px;
  }

  .product-tags span {
    padding: 3px 5px;
    font-size: 7px;
  }

  .trust-strip {
    gap: 30px;
  }

  .category-content h3 {
    font-size: 19px;
  }

  .category-card.sky .category-content h3 {
    font-size: 16px;
  }

  .category-content p {
    font-size: 9px;
  }
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }

  .nav-open {
    background: #112139;
    border-radius: 15px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    display: flex;
    position: absolute;
    top: 80px;
    left: 24px;
    right: 24px;
    box-shadow: 0 15px 35px #0007;
  }

  .nav-open a, .nav-open button {
    border-radius: 8px;
    padding: 12px 15px;
  }

  .mobile-toggle {
    display: flex;
  }

  .header {
    height: 78px;
  }

  .header-inner {
    padding: 0 24px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .hero-label {
    letter-spacing: 1.5px;
    font-size: 8px;
  }

  .hero-content {
    width: 62%;
    padding: 35px 0 60px 32px;
  }

  .hero-art {
    width: 590px;
    top: 15px;
    right: -160px;
  }

  .hero-art-label {
    right: 40px;
  }

  .hero-perks {
    gap: 10px;
    font-size: 8px;
  }

  .hero {
    min-height: 385px;
  }

  .stats {
    gap: 10px;
  }

  .stat-card {
    gap: 8px;
    padding: 14px 10px;
  }

  .stat-icon {
    border-radius: 10px;
    width: 35px;
    height: 35px;
  }

  .stat-label {
    font-size: 9px;
  }

  .stat-card p {
    font-size: 21px;
  }

  .stat-card:first-child p small {
    display: none;
  }

  .stat-card p small {
    margin-left: 4px;
    font-size: 9px;
  }

  .announcement-end {
    display: none;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-card {
    height: 190px;
  }

  .category-card.sky .category-content h3 {
    font-size: 21px;
  }

  .category-content h3 {
    font-size: 23px;
  }

  .category-content p {
    font-size: 11px;
  }

  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .catalog-toolbar {
    flex-direction: column;
  }

  .search-sort {
    width: 100%;
  }

  .search-box {
    flex: 1;
  }

  .search-box input {
    width: 100%;
  }

  .product-art {
    height: 145px;
  }

  .how-it-works {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 23px 20px;
  }

  .steps-intro {
    grid-column: 1 / -1;
  }

  .steps-intro h2 {
    margin-right: 18px;
    display: inline-block;
  }

  .steps-intro > .eyebrow {
    display: block;
  }

  .step {
    min-height: 100px;
    padding-left: 15px;
  }

  .trust-strip {
    flex-wrap: wrap;
    gap: 20px;
  }

  .trust-strip span {
    font-size: 10px;
  }

  .footer-bottom {
    font-size: 8px;
  }

  .floating-actions {
    bottom: 15px;
    right: 15px;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0 17px;
  }

  .header {
    height: 72px;
  }

  .header-inner {
    gap: 10px;
    padding: 0 17px;
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    border-radius: 11px;
    width: 35px;
    height: 39px;
  }

  .brand-mark svg {
    width: 24px;
  }

  .brand strong {
    font-size: 19px;
  }

  .brand small {
    letter-spacing: 1.6px;
    font-size: 6px;
  }

  .header-actions {
    gap: 7px;
  }

  .user-button {
    border-radius: 10px;
    gap: 6px;
    min-width: 0;
    padding: 5px 8px 5px 5px;
  }

  .user-button .avatar {
    width: 27px;
    height: 27px;
  }

  .user-button strong {
    max-width: 64px;
    font-size: 10px;
  }

  .user-button small {
    font-size: 9px;
  }

  .user-button > svg {
    display: none;
  }

  .demo-tiny {
    margin-left: 3px;
    font-size: 6px;
  }

  .icon-button {
    width: 33px;
    height: 33px;
  }

  .cart-button {
    background: none;
    border: 0;
    width: 28px;
  }

  .mobile-toggle {
    background: none;
    border: 0;
    width: 30px;
  }

  .nav-open {
    top: 70px;
    left: 17px;
    right: 17px;
  }

  .page-intro {
    margin: 18px 0 12px;
    font-size: 10px;
  }

  .local-chip {
    padding: 3px 6px;
    font-size: 7px;
  }

  .hero {
    border-radius: 19px;
    min-height: 520px;
  }

  .hero-content {
    width: 100%;
    padding: 28px 25px 0;
  }

  .hero-label {
    letter-spacing: 1.4px;
    margin-bottom: 13px;
    font-size: 7px;
  }

  .hero h1 {
    letter-spacing: -1px;
    font-size: 43px;
    line-height: 1.22;
  }

  .heading-star {
    font-size: 26px;
    right: -40px;
  }

  .hero p {
    margin-top: 12px;
    font-size: 11px;
  }

  .hero-cta {
    margin-top: 16px;
    padding: 11px 15px;
    font-size: 11px;
  }

  .hero-cta svg:last-child {
    margin-left: 7px;
  }

  .hero-perks {
    gap: 13px;
    margin-top: 16px;
    font-size: 8px;
  }

  .hero-perks svg {
    width: 12px;
  }

  .hero-art {
    opacity: .9;
    width: 380px;
    height: 247px;
    top: 290px;
    right: -43px;
  }

  .hero-art-label {
    letter-spacing: 1.9px;
    font-size: 6px;
    bottom: 24px;
    right: 77px;
  }

  .hero-index {
    bottom: 20px;
    left: 25px;
  }

  .hero-controls {
    gap: 7px;
    bottom: 58px;
    left: 37px;
    transform: none;
  }

  .hero-controls > button {
    width: 21px;
    height: 21px;
  }

  .announcement {
    border-radius: 10px;
    gap: 9px;
    min-height: 46px;
    margin-top: 12px;
    padding: 7px 8px;
  }

  .announcement-label {
    gap: 5px;
    padding: 6px 8px;
    font-size: 9px;
  }

  .announcement-label svg {
    width: 12px;
  }

  .announcement p {
    font-size: 9px;
    line-height: 1.7;
  }

  .announce-extra {
    margin: 0 4px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  .stat-card {
    border-radius: 12px;
    gap: 11px;
    min-height: 77px;
    padding: 13px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
  }

  .stat-label {
    font-size: 9px;
  }

  .stat-card p {
    font-size: 22px;
  }

  .stat-card p small {
    margin-left: 6px;
    font-size: 9px;
  }

  .stat-card:first-child p small {
    margin-left: 4px;
    font-size: 6px;
    display: inline;
  }

  .stat-decoration {
    font-size: 40px;
  }

  .shortcuts {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  .shortcut {
    border-radius: 12px;
    min-height: 125px;
    padding: 15px 10px;
  }

  .shortcut-icon {
    border-radius: 13px;
    width: 42px;
    height: 42px;
    margin-bottom: 9px;
  }

  .shortcut strong {
    font-size: 11px;
  }

  .shortcut small {
    font-size: 9px;
  }

  .shortcut-arrow {
    width: 14px;
    top: 11px;
    right: 11px;
  }

  .section-heading {
    gap: 6px;
    margin: 27px 0 14px;
  }

  .section-heading > div {
    gap: 8px;
  }

  .section-heading h2 {
    font-size: 17px;
  }

  .section-heading p {
    font-size: 9px;
  }

  .section-icon {
    width: 22px;
  }

  .section-icon svg {
    width: 18px;
  }

  .section-icon:before {
    height: 22px;
    left: -6px;
  }

  .text-button {
    gap: 4px;
    font-size: 9px;
  }

  .text-button svg {
    width: 13px;
  }

  .category-grid {
    gap: 10px;
  }

  .category-card {
    border-radius: 12px;
    height: 156px;
  }

  .category-content {
    bottom: 13px;
    left: 12px;
    right: 12px;
  }

  .category-content small {
    letter-spacing: 1.2px;
    font-size: 6px;
  }

  .category-content h3 {
    margin: 4px 0;
    font-size: 18px;
  }

  .category-card.sky .category-content h3 {
    font-size: 14px;
  }

  .category-content p {
    font-size: 8px;
  }

  .category-arrow {
    width: 22px;
    height: 22px;
    bottom: 12px;
    right: 10px;
  }

  .category-arrow svg {
    width: 13px;
  }

  .category-count {
    padding: 2px 5px;
    font-size: 7px;
    top: 9px;
    right: 9px;
  }

  .heading-tag {
    display: none;
  }

  .filter-tabs {
    gap: 5px;
    width: 100%;
  }

  .filter-tabs button {
    flex: 1;
    justify-content: center;
    padding: 7px 5px;
    font-size: 9px;
  }

  .filter-tabs button svg {
    display: none;
  }

  .search-sort {
    gap: 6px;
  }

  .search-sort select {
    max-width: 105px;
    padding: 7px;
    font-size: 10px;
  }

  .search-box {
    padding: 8px 9px;
  }

  .search-box input {
    font-size: 10px;
  }

  .catalog-toolbar {
    gap: 11px;
    margin-bottom: 14px;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
  }

  .product-card {
    border-radius: 12px;
  }

  .product-art {
    height: 127px;
  }

  .product-badge {
    gap: 2px;
    padding: 3px 5px;
    font-size: 7px;
    top: 8px;
    left: 8px;
  }

  .product-badge svg {
    width: 10px;
  }

  .product-game-name {
    letter-spacing: .5px;
    font-size: 11px;
    bottom: 9px;
    left: 10px;
  }

  .product-info {
    padding: 10px;
  }

  .product-stock {
    gap: 4px;
    margin-bottom: 7px;
    font-size: 7px;
  }

  .product-stock > span:last-child {
    gap: 2px;
    font-size: 6px;
  }

  .product-stock svg {
    width: 10px;
  }

  .product-title {
    min-height: 33px;
    font-size: 11px;
  }

  .product-info > p {
    min-height: 26px;
    margin-top: 3px;
    font-size: 8px;
  }

  .product-tags {
    gap: 3px;
    margin-top: 9px;
  }

  .product-tags span {
    padding: 2px 4px;
    font-size: 6px;
  }

  .product-bottom {
    gap: 5px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .product-bottom small {
    font-size: 8px;
  }

  .product-bottom strong {
    font-size: 21px;
  }

  .add-button {
    gap: 4px;
    min-height: 31px;
    padding: 7px 6px;
    font-size: 8px;
  }

  .add-button svg {
    width: 13px;
  }

  .how-it-works {
    border-radius: 14px;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
    padding: 19px 15px;
  }

  .steps-intro h2 {
    margin-bottom: 3px;
    font-size: 19px;
    display: block;
  }

  .step {
    border-top: 1px solid #293c53;
    border-left: 0;
    gap: 3px;
    min-height: 78px;
    padding: 8px 8px 8px 46px;
  }

  .step > svg {
    width: 23px;
    position: absolute;
    top: 24px;
    left: 7px;
  }

  .step-number {
    font-size: 30px;
    top: 18px;
    right: 6px;
  }

  .step strong {
    font-size: 12px;
  }

  .step small {
    font-size: 10px;
  }

  .trust-strip {
    grid-template-columns: 1fr 1fr;
    gap: 18px 10px;
    padding: 24px 4px;
    display: grid;
  }

  .trust-strip span {
    gap: 7px;
    font-size: 8px;
  }

  .trust-strip svg {
    width: 17px;
  }

  .footer-top {
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-top p {
    flex-basis: 100%;
    order: 3;
    margin-left: 0;
    font-size: 9px;
  }

  .footer-brand .brand strong {
    font-size: 18px;
  }

  .footer-brand .brand-mark {
    width: 34px;
    height: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
    margin-top: 17px;
    padding-top: 14px;
    font-size: 8px;
  }

  .floating-support {
    width: 42px;
    height: 42px;
  }

  .floating-top {
    width: 31px;
    height: 31px;
  }

  .floating-actions {
    gap: 7px;
    bottom: 13px;
    right: 10px;
  }

  .toast {
    min-width: 270px;
    max-width: calc(100vw - 30px);
    padding: 11px 13px;
    font-size: 10px;
    bottom: 15px;
  }

  .modal {
    border-radius: 16px;
    max-height: 88dvh;
    padding: 20px;
  }

  .modal-head h2 {
    font-size: 18px;
  }

  .detail-art {
    height: 170px;
  }

  .detail-title {
    font-size: 18px;
  }

  .detail-list li {
    font-size: 11px;
  }

  .demo-note {
    font-size: 10px;
  }

  .cart-item {
    gap: 9px;
  }

  .cart-item img {
    width: 53px;
    height: 46px;
  }

  .cart-item strong {
    font-size: 10px;
  }

  .cart-item small {
    font-size: 9px;
  }

  .cart-item .icon-button {
    width: 26px;
  }

  .order-card {
    padding: 13px;
  }

  .order-head {
    gap: 5px;
  }

  .order-status {
    padding: 3px 5px;
    font-size: 7px;
  }

  .order-head strong {
    font-size: 11px;
  }

  .order-line {
    font-size: 10px;
  }

  .order-head small {
    font-size: 8px;
  }

  .amount-options {
    gap: 5px;
  }

  .amount-options button {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, :before, :after {
    transition: none !important;
    animation: none !important;
  }
}

.site-footer {
  background: linear-gradient(120deg, #0c1728, #0b1424 70%);
  border-top: 1px solid #1e3046;
  margin-top: 54px;
  padding: 0;
}

.footer-columns {
  grid-template-columns: 1.3fr .8fr 1.1fr;
  align-items: start;
  gap: 54px;
  padding-top: 46px;
  padding-bottom: 48px;
  display: grid;
}

.footer-store-brand {
  gap: 15px;
  width: fit-content;
  margin-bottom: 15px;
}

.footer-store-brand .brand-mark.store-brand-mark {
  width: 135px;
  height: 135px;
}

.footer-store-brand strong {
  white-space: nowrap;
  font-size: 24px;
}

.footer-store > p {
  color: #9eb1c9;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.9;
}

.footer-store-badges {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  display: flex;
}

.footer-store-badges span, .footer-store-badges a {
  color: #b4c9de;
  white-space: nowrap;
  background: #172438;
  border: 1px solid #2b4058;
  border-radius: 20px;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 9px;
  display: inline-flex;
}

.footer-store-badges svg {
  color: #8fd5fa;
}

.footer-store-badges a:hover {
  color: #d5f3ff;
  border-color: #497b9d;
}

.footer-quick-links {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
  display: flex;
}

.footer-quick-links h2 {
  color: #dfecfc;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.footer-quick-links h2 svg {
  color: #8fd5fa;
}

.footer-quick-links a {
  color: #9eb1c9;
  font-size: 12px;
  line-height: 1.6;
  transition: color .2s;
}

.footer-quick-links a:hover {
  color: #a0e2ff;
}

.footer-discord {
  background: #121f32;
  border: 1px solid #2b4058;
  border-radius: 21px;
  min-width: 0;
  margin-top: 10px;
  padding: 20px;
  box-shadow: 0 8px 30px #0309151a;
}

.discord-card-heading {
  align-items: center;
  gap: 9px;
  display: flex;
}

.discord-icon-box {
  color: #fff;
  background: #5865f2;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.discord-icon-box svg {
  width: 18px;
  height: 18px;
}

.discord-card-heading h2 {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.discord-coming-soon {
  color: #9bd6f6;
  white-space: nowrap;
  background: #1b3c5140;
  border: 1px solid #33566e;
  border-radius: 20px;
  margin-left: auto;
  padding: 3px 7px;
  font-size: 8px;
}

.discord-community-preview {
  background: #0a1423;
  border: 1px solid #293d53;
  border-radius: 17px;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 15px 12px;
  display: flex;
}

.discord-community-avatar {
  background: #15283c;
  border: 1px solid #335774;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
  overflow: hidden;
}

.discord-community-avatar img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  transform: scale(1.4);
}

.discord-community-preview strong {
  color: #def;
  font-size: 12px;
  font-weight: 700;
}

.discord-community-preview p {
  color: #91a7bf;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 10px;
  display: flex;
}

.discord-status-dot {
  background: #638aaa;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.discord-join-button {
  color: #edf7ff;
  background: linear-gradient(105deg, #498fd3, #5474df);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 15px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.discord-join-button:disabled {
  opacity: .62;
}

.discord-pending-note {
  text-align: center;
  color: #708da9;
  margin-top: 9px;
  font-size: 9px;
}

.footer-bottom-bar {
  background: #091321;
  border-top: 1px solid #26374e;
}

.footer-bottom-inner {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
}

.footer-bottom-inner > div > p {
  color: #bdcfe4;
  font-size: 10px;
}

.footer-bottom-inner > div > span {
  color: #718ba6;
  margin-top: 5px;
  font-size: 9px;
  display: block;
}

.footer-bottom-inner > nav {
  color: #acbfd5;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  display: flex;
}

.footer-bottom-inner > nav > span {
  color: #6488aa;
  font-size: 8px;
}

.footer-bottom-inner a:hover {
  color: #a0e2ff;
}

@media (max-width: 1100px) {
  .footer-columns {
    grid-template-columns: 1.1fr .8fr 1.1fr;
    gap: 30px;
  }

  .footer-store-brand .brand-mark.store-brand-mark {
    width: 105px;
    height: 105px;
  }

  .footer-store-brand strong {
    font-size: 21px;
  }

  .footer-store-brand {
    gap: 11px;
  }

  .footer-discord {
    padding: 16px;
  }

  .discord-card-heading h2, .discord-community-preview strong, .footer-quick-links a {
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 35px;
    padding-bottom: 35px;
  }

  .footer-store {
    grid-column: 1 / -1;
  }

  .footer-store-brand .brand-mark.store-brand-mark {
    width: 110px;
    height: 110px;
  }

  .footer-store-brand strong {
    font-size: 25px;
  }

  .footer-store > p {
    max-width: 400px;
  }

  .footer-store-badges {
    margin-top: 15px;
  }

  .footer-discord {
    margin-top: 0;
  }

  .footer-quick-links {
    padding-top: 4px;
  }

  .discord-card-heading h2, .footer-quick-links a {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .site-footer {
    margin-top: 32px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 27px;
    padding-bottom: 30px;
  }

  .footer-store {
    grid-column: auto;
  }

  .footer-store-brand .brand-mark.store-brand-mark {
    width: 92px;
    height: 92px;
  }

  .footer-store-brand strong {
    font-size: 25px;
  }

  .footer-store-brand {
    gap: 12px;
    margin-bottom: 11px;
  }

  .footer-store > p {
    margin-top: 0;
    font-size: 11px;
  }

  .footer-store-badges {
    gap: 6px;
    margin-top: 17px;
  }

  .footer-store-badges span, .footer-store-badges a {
    padding: 5px 8px;
    font-size: 8px;
  }

  .footer-quick-links {
    gap: 11px;
  }

  .footer-quick-links h2 {
    font-size: 13px;
  }

  .footer-quick-links a {
    font-size: 11px;
  }

  .footer-discord {
    border-radius: 18px;
    padding: 18px;
  }

  .discord-card-heading h2, .discord-community-preview strong {
    font-size: 12px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 19px;
    padding-bottom: 22px;
  }

  .footer-bottom-inner > div > p {
    font-size: 9px;
  }

  .footer-bottom-inner > div > span {
    font-size: 8px;
  }

  .footer-bottom-inner > nav {
    gap: 14px;
    font-size: 10px;
  }
}

.brand-mark.store-brand-mark {
  width: 54px;
  height: 54px;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  flex-shrink: 0;
  overflow: hidden;
  transform: none;
}

.store-brand-mark .store-logo {
  object-fit: contain;
  width: 100%;
  height: 100%;
  transform: scale(1.48);
}

.footer-brand .store-brand-mark {
  width: 46px;
  height: 46px;
}

@media (max-width: 600px) {
  .brand-mark.store-brand-mark {
    width: 40px;
    height: 40px;
  }

  .footer-brand .store-brand-mark {
    width: 36px;
    height: 36px;
  }
}

.route-page {
  min-height: calc(100dvh - 365px);
  padding: 27px 0 40px;
}

.breadcrumbs {
  color: #7e98b3;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 11px;
  display: flex;
}

.breadcrumbs a {
  color: #a1c9e5;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.breadcrumbs a:hover {
  color: #d2f1ff;
}

.route-heading {
  border-bottom: 1px solid #263c54;
  margin-bottom: 25px;
  padding-bottom: 23px;
}

.route-heading h1 {
  color: #d7efff;
  margin-top: 7px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.45;
}

.route-heading p {
  color: #91abc4;
  margin-top: 8px;
  font-size: 12px;
}

.route-content {
  background: #111e31;
  border: 1px solid #2d465f;
  border-radius: 18px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 26px;
}

.route-content-wide {
  width: 100%;
  max-width: 1000px;
}

.route-page:has(.products-section) .route-content-wide {
  background: none;
  border: 0;
  max-width: none;
  padding: 0;
}

.route-page .products-section .section-heading {
  margin-top: 0;
}

.page-loading {
  text-align: center;
  color: #8db9d4;
  padding: 35px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .route-page {
    min-height: calc(100dvh - 365px);
    padding: 19px 0 26px;
  }

  .breadcrumbs {
    gap: 8px;
    margin-bottom: 20px;
    font-size: 10px;
  }

  .route-heading {
    margin-bottom: 20px;
    padding-bottom: 18px;
  }

  .route-heading h1 {
    font-size: 26px;
  }

  .route-heading p {
    font-size: 11px;
  }

  .route-content {
    border-radius: 14px;
    padding: 19px;
  }

  .route-content .wallet-balance {
    padding: 16px;
  }

  .route-content .empty-state {
    padding: 22px 10px;
  }
}

.account-menu {
  flex-shrink: 0;
  position: relative;
}

.user-button-open {
  background: linear-gradient(120deg, #285371, #203f5d);
  border-color: #72bde3;
}

.user-button > svg {
  transition: transform .2s;
}

.account-dropdown {
  background: #111e31;
  border: 1px solid #36536f;
  border-radius: 20px;
  width: 280px;
  max-height: calc(100dvh - 115px);
  padding: 9px;
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  overflow-y: auto;
  box-shadow: 0 18px 55px #02081785;
}

.account-summary {
  background: linear-gradient(120deg, #1e354d, #17283e);
  border: 1px solid #385572;
  border-radius: 13px;
  align-items: center;
  gap: 11px;
  padding: 12px 10px;
  display: flex;
}

.account-summary .avatar {
  flex-shrink: 0;
  width: 37px;
  height: 37px;
}

.account-summary > div {
  flex: 1;
  min-width: 0;
}

.account-summary strong {
  overflow-wrap: anywhere;
  color: #d4ecff;
  font-size: 13px;
  line-height: 1.4;
  display: block;
}

.account-summary small {
  color: #9dbdd6;
  margin-top: 3px;
  font-size: 10px;
  display: block;
}

.account-summary small b {
  color: #94d8fc;
  font-weight: 600;
}

.account-demo-label {
  color: #73bcba;
  letter-spacing: .8px;
  align-self: flex-start;
  margin-top: 2px;
  font-size: 7px;
}

.account-points {
  color: #9cdfff;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 11px;
  font-size: 12px;
  display: flex;
}

.account-points strong {
  font-weight: 600;
}

.account-links {
  flex-direction: column;
  gap: 3px;
  padding: 4px 0 8px;
  display: flex;
}

.account-links button, .account-sign-out {
  text-align: left;
  color: #c4d6e9;
  border-radius: 9px;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 16px;
  font-size: 12px;
  transition: background .15s, color .15s;
  display: flex;
}

.account-links button svg {
  color: #a1c7e3;
  stroke-width: 1.7px;
}

.account-links button:hover, .account-links button:focus-visible {
  color: #c4edff;
  background: #203950;
}

.account-menu-footer {
  border-top: 1px solid #2a3e55;
  padding-top: 7px;
}

.account-sign-out {
  color: #f09ea9;
}

.account-sign-out:hover, .account-sign-out:focus-visible {
  color: #ffc4cb;
  background: #753b4a30;
}

.sign-in-button {
  color: #c1e8fc;
  justify-content: center;
  min-height: 48px;
  font-size: 12px;
}

.profile-stats {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
  display: grid;
}

.profile-stats > div {
  background: #182c42;
  border: 1px solid #304c65;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px;
  display: flex;
}

.profile-stats svg {
  color: #92d3f6;
}

.profile-stats span {
  color: #98b4ce;
  font-size: 10px;
}

.profile-stats strong {
  color: #c0e9ff;
  font-size: 20px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .account-dropdown {
    border-radius: 17px;
    width: min(280px, 100vw - 34px);
    max-height: calc(100dvh - 99px);
    position: fixed;
    top: 82px;
    right: 17px;
  }

  .account-summary strong {
    font-size: 12px;
  }

  .account-links button, .account-sign-out {
    padding: 12px 15px;
    font-size: 12px;
  }

  .sign-in-button {
    min-height: 37px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .sign-in-button > svg {
    width: 15px;
    display: block;
  }

  .profile-stats strong {
    font-size: 18px;
  }
}

.account-links .account-admin-link {
  color: #7dd3fc;
  background: #1885bc17;
  font-weight: 700;
}

.auth-tabs {
  background: #0c1726;
  border: 1px solid #263d53;
  border-radius: 12px;
  gap: 6px;
  margin: 20px 0;
  padding: 5px;
  display: flex;
}

.auth-tabs button {
  color: #92aac3;
  border-radius: 8px;
  flex: 1;
  padding: 10px;
}

.auth-tabs .selected {
  color: #b9ebff;
  background: #204562;
}

.auth-help {
  text-align: center;
  color: #91a8bf;
  margin-top: 20px;
  font-size: 12px;
}

.auth-help a {
  color: #7dd3fc;
}

.form-error {
  color: #ffb3c0;
  background: #f77c8c12;
  border: 1px solid #f77c8c40;
  border-radius: 10px;
  margin: 16px 0;
  padding: 12px 15px;
  font-size: 13px;
}

.muted {
  color: #93a9bf;
}

.admin-loading {
  text-align: center;
  color: #9dcae6;
  padding: 80px 20px;
}

.admin-loading > svg {
  margin: auto;
}

.admin-page {
  padding: 38px 0 65px;
}

.admin-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  display: flex;
}

.admin-title-row h1 {
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  font-size: 30px;
  display: flex;
}

.admin-title-row h1 svg {
  color: #7dd3fc;
}

.admin-title-row p, .admin-panel-heading p {
  color: #91a8bf;
  font-size: 13px;
  line-height: 1.8;
}

.admin-owner-chip {
  color: #b3e5ff;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.admin-owner-chip a {
  background: #1a324b;
  border: 1px solid #35516d;
  border-radius: 10px;
  margin-left: 14px;
  padding: 9px 15px;
}

.admin-summary {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
  display: grid;
}

.admin-summary > div {
  background: linear-gradient(130deg, #172b41, #101e31);
  border: 1px solid #294259;
  border-radius: 17px;
  grid-template-columns: 40px 1fr;
  gap: 4px 12px;
  padding: 22px;
  display: grid;
}

.admin-summary svg {
  color: #81d9ff;
  grid-row: span 2;
  align-self: center;
}

.admin-summary span {
  color: #97b1c9;
  font-size: 12px;
}

.admin-summary strong {
  font-size: 25px;
  font-weight: 600;
}

.admin-tabs {
  background: #101e30;
  border: 1px solid #294259;
  border-radius: 14px;
  gap: 5px;
  margin-bottom: 20px;
  padding: 7px;
  display: flex;
  overflow: auto;
}

.admin-tabs button {
  white-space: nowrap;
  color: #8faec6;
  border-radius: 9px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 14px;
  font-size: 13px;
  display: flex;
}

.admin-tabs button.active {
  color: #a6e6ff;
  background: #1d4766;
  box-shadow: inset 0 0 0 1px #3695c550;
}

.admin-panel {
  background: #111f31;
  border: 1px solid #294259;
  border-radius: 18px;
  padding: 28px;
}

.admin-panel-heading {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  display: flex;
}

.admin-panel-heading h2 {
  margin-bottom: 5px;
  font-size: 20px;
}

.admin-search {
  max-width: 360px;
  margin-bottom: 22px;
}

.admin-table-wrap {
  border: 1px solid #273c53;
  border-radius: 12px;
  overflow: auto;
}

.admin-table {
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  font-size: 13px;
}

.admin-table th {
  color: #8fa9c2;
  background: #15283e;
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 500;
}

.admin-table td {
  border-top: 1px solid #25394e;
  padding: 16px 18px;
}

.admin-table tr:hover td {
  background: #152a402e;
}

.admin-table .secondary-button {
  min-height: 32px;
  padding: 8px 12px;
  font-size: 11px;
}

.admin-product-cell {
  align-items: center;
  gap: 14px;
  min-width: 250px;
  display: flex;
}

.admin-product-cell img {
  object-fit: cover;
  background: #172e43;
  border-radius: 7px;
  width: 68px;
  height: 46px;
}

.admin-product-cell strong {
  white-space: normal;
  max-width: 330px;
  font-size: 13px;
  display: block;
}

.admin-product-cell small, .admin-member-email {
  color: #87a0bb;
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.admin-stock {
  color: #80d9c0;
  background: #6cd9b414;
  border-radius: 7px;
  padding: 5px 9px;
}

.admin-stock.zero {
  color: #f4a2b0;
  background: #f4a2b010;
}

.admin-status {
  color: #97a7ba;
  border: 1px solid #405068;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  display: inline-flex;
}

.admin-status.on {
  color: #8cddc5;
  background: #6cd9b410;
  border-color: #3f766650;
}

.admin-role {
  color: #a9dafa;
}

.admin-no-results {
  text-align: center;
  color: #9cb1c6;
  padding: 35px;
}

.admin-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin: 18px 0;
  display: grid;
}

.admin-form-grid label {
  color: #b9d2e8;
  font-size: 12px;
}

.admin-form-grid .form-input {
  margin-top: 8px;
  display: block;
}

.admin-span-two {
  grid-column: span 2;
}

.admin-checkbox {
  color: #b3cbe1;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 13px;
  display: flex;
}

.admin-checkbox input {
  accent-color: #38bdf8;
  width: 16px;
  height: 16px;
}

.admin-image-field {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.admin-image-field > .form-input {
  flex: 1;
  min-width: 200px;
}

.admin-upload {
  cursor: pointer;
  min-height: 44px;
  position: relative;
  overflow: hidden;
}

.admin-upload input {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  position: absolute;
  inset: 0;
}

.admin-image-preview {
  object-fit: contain;
  background: #091728;
  border: 1px solid #294359;
  border-radius: 12px;
  width: 100%;
  height: 170px;
}

.admin-image-field > small {
  width: 100%;
  font-size: 11px;
}

.admin-banner-list {
  gap: 20px;
  margin-bottom: 24px;
  display: grid;
}

.admin-banner-editor {
  background: #0c1a2c;
  border: 1px solid #294359;
  border-radius: 14px;
  padding: 23px;
}

.admin-banner-title {
  color: #acdfff;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.admin-banner-title > div {
  gap: 7px;
  display: flex;
}

.admin-banner-title .icon-button {
  background: #1c3045;
  border-radius: 7px;
  width: 32px;
  height: 32px;
}

.admin-announcement-preview {
  margin: 22px 0;
}

.admin-panel > .form-input {
  display: block;
}

.admin-page button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 800px) {
  .admin-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-summary {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .admin-summary > div {
    padding: 16px;
  }

  .admin-title-row h1 {
    font-size: 26px;
  }

  .admin-panel {
    padding: 18px;
  }

  .admin-tabs button {
    flex: none;
    padding: 12px;
  }

  .admin-panel-heading {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .admin-banner-editor {
    padding: 16px;
  }

  .admin-form-grid {
    gap: 12px;
  }

  .admin-owner-chip a {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .admin-page {
    padding-top: 26px;
  }

  .admin-summary > div {
    grid-template-columns: 28px 1fr;
    gap: 4px 7px;
  }

  .admin-summary strong {
    font-size: 22px;
  }

  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-span-two {
    grid-column: auto;
  }

  .admin-panel-heading h2 {
    font-size: 18px;
  }

  .admin-image-field > .form-input {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }

  .admin-table td, .admin-table th {
    padding: 12px;
  }
}

.guest-account-actions {
  white-space: nowrap;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.guest-login {
  color: #d1e6f5;
  padding: 10px 0;
}

.guest-login:hover {
  color: #7dd3fc;
}

.guest-register {
  color: #06263f;
  background: linear-gradient(110deg, #8de3ff, #5dbbfb);
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  padding: 11px 19px;
  display: flex;
  box-shadow: 0 5px 20px #219fe518;
}

.guest-register:hover {
  filter: brightness(1.1);
}

.auth-page {
  justify-content: center;
  align-items: flex-start;
  min-height: 660px;
  padding: 65px 0 90px;
  display: flex;
}

.auth-card {
  background: linear-gradient(140deg, #17283c, #111f32);
  border: 1px solid #354f6c;
  border-radius: 24px;
  width: 450px;
  max-width: 100%;
  padding: 36px 32px 32px;
  box-shadow: 0 20px 70px #00000020;
}

.auth-card h1 {
  text-align: center;
  color: #f0f7ff;
  margin-bottom: 6px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.auth-subtitle {
  text-align: center;
  color: #a5bed6;
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.9;
}

.auth-discord {
  color: #fff;
  background: #5865f2;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s;
  display: flex;
  box-shadow: 0 3px #b5bbff66, 0 5px 14px #5865f222;
}

.auth-discord:hover {
  background: #6974ff;
}

.auth-discord svg {
  width: 21px;
  height: 21px;
}

.auth-divider {
  color: #a6c8e2;
  align-items: center;
  gap: 12px;
  margin: 23px 0;
  font-size: 12px;
  display: flex;
}

.auth-divider:before, .auth-divider:after {
  content: "";
  background: #354b64;
  flex: 1;
  height: 1px;
}

.auth-input {
  color: #a7c6e0;
  background: #182b40;
  border: 1px solid #38536e;
  border-radius: 10px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 51px;
  margin-bottom: 16px;
  padding: 0 13px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.auth-input:focus-within {
  background: #1c324c;
  border-color: #65c9ff;
  box-shadow: 0 0 0 3px #38bdf812;
}

.auth-input > svg {
  flex-shrink: 0;
}

.auth-input input {
  color: #ecf6ff;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 15px 0;
  font-family: inherit;
  font-size: 13px;
}

.auth-input input::placeholder {
  color: #98b1c9;
}

.auth-input input:-webkit-autofill {
  -webkit-text-fill-color: #ecf6ff;
  -webkit-box-shadow: inset 0 0 0 1000px #1c324c;
}

.auth-eye {
  color: #9abdd7;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  margin-right: -6px;
  padding: 8px;
  display: flex;
}

.auth-eye:hover {
  color: #8fe0ff;
  background: #29465f;
}

.auth-forgot {
  text-align: right;
  color: #90d6fb;
  margin: -2px 0 27px;
  font-size: 12px;
  font-weight: 600;
}

.auth-submit {
  border-radius: 11px;
  justify-content: center;
  width: 100%;
  min-height: 49px;
  margin-top: 8px;
  font-size: 14px;
}

.auth-create-account {
  color: #d8eafb;
  background: #20354b;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  margin-top: 17px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.auth-create-account:hover {
  background: #294660;
}

.auth-bottom {
  text-align: center;
  color: #a5bed6;
  margin: 25px 0 0;
  font-size: 12px;
}

.auth-bottom a {
  color: #91daff;
  margin-left: 4px;
  font-weight: 700;
}

.auth-card button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.auth-service-note {
  color: #b7cfe2;
  background: #20354b;
  border-radius: 10px;
  margin: 18px 0;
  padding: 14px;
  font-size: 12px;
  line-height: 1.9;
}

.auth-service-note a {
  color: #84d3ff;
  white-space: nowrap;
}

.auth-success {
  color: #99e2cc;
  background: #63d9ac10;
  border: 1px solid #63d9ac40;
  border-radius: 10px;
  margin: 18px 0;
  padding: 14px;
  font-size: 13px;
  line-height: 1.8;
}

.auth-already {
  text-align: center;
  color: #9ecce7;
  padding-top: 22px;
}

.auth-already > svg {
  margin: auto;
}

.auth-already p {
  margin: 15px;
}

.sr-only {
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

@media (max-width: 600px) {
  .guest-account-actions {
    gap: 9px;
    font-size: 10px;
  }

  .guest-register {
    border-radius: 10px;
    gap: 7px;
    padding: 9px 11px;
  }

  .guest-register svg {
    width: 14px;
  }

  .auth-page {
    min-height: 570px;
    padding: 35px 0 55px;
  }

  .auth-card {
    border-radius: 21px;
    padding: 29px 23px;
  }

  .auth-card h1 {
    font-size: 23px;
  }

  .auth-discord, .auth-submit {
    font-size: 13px;
  }

  .auth-input input {
    font-size: 12px;
  }

  .header-actions {
    gap: 7px;
  }
}

@media (max-width: 380px) {
  .guest-account-actions {
    gap: 7px;
  }

  .guest-register {
    padding: 9px;
  }

  .guest-register svg {
    display: none;
  }

  .header-actions .cart-button {
    width: 29px;
  }

  .header-inner {
    gap: 6px;
  }

  .brand strong {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .header-inner {
    gap: 6px;
    padding: 0 16px;
  }

  .header .brand {
    gap: 6px;
  }

  .header .brand strong {
    font-size: 15px;
  }

  .header .brand-mark.store-brand-mark {
    width: 34px;
    height: 34px;
  }

  .header-actions {
    gap: 6px;
  }

  .header-actions .cart-button {
    width: 30px;
    height: 34px;
  }

  .header-actions .mobile-toggle {
    flex-shrink: 0;
    width: 24px;
  }

  .guest-register {
    padding: 9px 10px;
  }

  .guest-account-actions {
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .header-inner {
    padding: 0 11px;
  }

  .header .brand strong {
    font-size: 13px;
  }

  .header .brand-mark.store-brand-mark {
    width: 29px;
    height: 29px;
  }

  .guest-account-actions {
    gap: 6px;
    font-size: 9px;
  }

  .guest-register {
    padding: 9px 8px;
  }

  .header-actions .cart-button {
    width: 25px;
  }

  .header-actions {
    gap: 4px;
  }
}

.discord-coming-soon.discord-online {
  color: #70e4ad;
  background: #123e2b80;
  border-color: #287858;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.discord-status-dot.is-online {
  background: #23a55a;
  flex-shrink: 0;
}

.discord-coming-soon .discord-status-dot {
  width: 6px;
  height: 6px;
}

.discord-stale-message {
  color: #9ab0c8;
  margin-top: 8px;
  font-size: 10px;
  display: block;
}

html {
  zoom: 1.08;
}

@media (max-width: 600px) {
  html {
    zoom: 1.04;
  }
}

@media print {
  html {
    zoom: 1;
  }
}

@media (min-width: 601px) {
  .header {
    height: 76px;
  }

  .header .brand strong {
    font-size: 22px;
  }

  .header .brand-mark.store-brand-mark {
    width: 46px;
    height: 46px;
  }

  .header .nav {
    padding: 4px;
  }

  .header .nav > a, .header .nav > button, .header .shop-menu > button {
    padding: 7px 12px;
    font-size: 12px;
  }

  .header-actions > .icon-button, .header-actions .display-settings-trigger {
    width: 36px;
    height: 36px;
  }

  .header .user-button {
    padding: 6px 10px 6px 6px;
  }

  .header .user-button > .avatar {
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .header .nav {
    display: none;
  }

  .header .mobile-toggle {
    display: flex;
  }

  .header .nav.nav-open {
    background: #112139;
    border-radius: 15px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    display: flex;
    position: absolute;
    top: 76px;
    left: 24px;
    right: 24px;
    box-shadow: 0 15px 35px #0005;
  }
}

/* [project]/app/admin-workspace.css [app-client] (css) */
.admin-workspace {
  color: #eaf4ff;
  background: #090f1c;
  min-height: 100vh;
  font-size: 14px;
  display: flex;
}

.admin-sidebar {
  z-index: 40;
  background: #111e30;
  border-right: 1px solid #2b425b;
  flex-direction: column;
  width: 260px;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

.workspace-brand {
  border-bottom: 1px solid #2b425b;
  align-items: center;
  gap: 12px;
  min-height: 87px;
  padding: 20px;
  display: flex;
}

.workspace-brand img {
  object-fit: contain;
  width: 45px;
  height: 45px;
}

.workspace-brand strong {
  font-size: 16px;
}

.workspace-brand small {
  color: #8daac4;
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.workspace-nav {
  flex: 1;
  padding: 12px;
  overflow: auto;
}

.workspace-nav > div > p {
  color: #7592ae;
  letter-spacing: 1px;
  margin: 21px 10px 10px;
  font-size: 10px;
  font-weight: 700;
}

.workspace-nav a {
  color: #a9c4dc;
  border: 1px solid #0000;
  border-radius: 10px;
  align-items: center;
  gap: 11px;
  margin: 3px 0;
  padding: 12px 13px;
  font-size: 12px;
  display: flex;
}

.workspace-nav a:hover {
  background: #1d344b;
}

.workspace-nav a.active {
  color: #8ee0ff;
  background: #1a3b56;
  border-color: #37627d;
}

.workspace-nav a svg:last-child:not(:first-child) {
  margin-left: auto;
}

.sidebar-bottom {
  border-top: 1px solid #2b425b;
  padding: 10px 18px;
}

.sidebar-bottom a, .sidebar-bottom button {
  color: #a7c6df;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  display: flex;
}

.sidebar-bottom button:last-child {
  color: #f3a0b5;
}

.workspace-main {
  width: calc(100% - 260px);
  min-width: 0;
  margin-left: 260px;
}

.workspace-header {
  background: #101a2b;
  border-bottom: 1px solid #2b425b;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 73px;
  padding: 15px 32px;
  display: flex;
}

.workspace-header > div {
  align-items: center;
  gap: 16px;
  display: flex;
}

.workspace-header > div > span {
  letter-spacing: 1px;
  color: #7994ae;
  font-size: 9px;
  font-weight: 800;
}

.workspace-header strong {
  font-size: 13px;
}

.workspace-content {
  max-width: 1650px;
  margin: auto;
  padding: 30px 38px 65px;
}

.workspace-content .admin-page {
  padding: 0;
}

.workspace-mobile-toggle, .sidebar-close {
  display: none !important;
}

.workspace-backdrop {
  display: none;
}

.overview-welcome {
  background: radial-gradient(at 12% 0, #2a64884d, #0000 75%), linear-gradient(120deg, #132b41, #141e31);
  border: 1px solid #356281;
  border-radius: 22px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 32px;
  display: flex;
}

.overview-greeting {
  align-items: center;
  gap: 22px;
  display: flex;
}

.overview-greeting > img {
  object-fit: contain;
  background: #0a1828;
  border: 1px solid #406580;
  border-radius: 15px;
  width: 72px;
  height: 72px;
  padding: 10px;
}

.overview-greeting h1 {
  margin: 8px 0 12px;
  font-size: 30px;
  line-height: 1.4;
}

.overview-greeting p, .overview-greeting small {
  color: #a4c1da;
  font-size: 12px;
  line-height: 1.8;
}

.overview-updated {
  text-align: right;
  color: #8da7bf;
  margin-top: 9px;
  font-size: 10px;
  display: block;
}

.overview-stat-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
  margin: 20px 0;
  display: grid;
}

.overview-stat {
  color: #6bcfff;
  background: #111f32;
  border: 1px solid #29485f;
  border-radius: 16px;
  min-height: 115px;
  padding: 22px 18px;
  position: relative;
}

.overview-stat > span {
  font-size: 11px;
}

.overview-stat > svg {
  opacity: .6;
  position: absolute;
  top: 20px;
  right: 18px;
}

.overview-stat > strong {
  margin-top: 16px;
  font-size: 26px;
  display: block;
}

.overview-stat small {
  color: #a6bfd4;
  margin-left: 8px;
  font-size: 10px;
}

.tone-1 {
  color: #50abf9;
}

.tone-2 {
  color: #63d9b3;
}

.tone-3 {
  color: #feb875;
}

.tone-4 {
  color: #a89bff;
}

.overview-filter {
  background: #111d2e;
  border: 1px solid #29485f;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 22px;
  font-size: 12px;
  display: flex;
}

.overview-filter > div {
  gap: 5px;
  display: flex;
}

.overview-filter button {
  color: #a0c2df;
  border-radius: 20px;
  padding: 10px 15px;
}

.overview-filter button.active {
  color: #9adeff;
  background: #24425e;
  box-shadow: inset 0 0 0 1px #4c7291;
}

.overview-money-grid {
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
  display: grid;
}

.overview-money-grid article {
  background: linear-gradient(110deg, #183348, #111e30);
  border: 1px solid #325572;
  border-radius: 18px;
  padding: 28px;
}

.overview-money-grid article > span {
  color: #89d8fa;
  font-size: 12px;
}

.overview-money-grid strong {
  white-space: nowrap;
  margin: 20px 0 12px;
  font-size: 32px;
  display: block;
}

.overview-money-grid small {
  color: #8eacc4;
  font-size: 11px;
}

.overview-bottom-grid {
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  display: grid;
}

.overview-chart {
  width: 100%;
  margin-top: 20px;
}

.chart-labels {
  color: #748faa;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10px;
  display: flex;
}

.overview-task {
  color: #a2bed5;
  border-bottom: 1px solid #294259;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  font-size: 12px;
  display: flex;
}

.overview-task strong {
  color: #8bd5fc;
  margin-left: auto;
  font-size: 12px;
}

.admin-gate {
  background: radial-gradient(at 50% 30%, #1d46693d, #0000 60%), #090f1d;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 30px;
  display: flex;
}

.admin-pin-card {
  background: linear-gradient(140deg, #172b41, #111e31);
  border: 1px solid #3a5b77;
  border-radius: 23px;
  width: 420px;
  max-width: 100%;
  padding: 30px;
}

.admin-pin-card > .workspace-icon {
  color: #8fdcff;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  display: flex;
}

.admin-pin-card > .eyebrow {
  text-align: center;
  font-size: 9px;
  display: block;
}

.admin-pin-card h1 {
  text-align: center;
  margin: 12px 0;
  font-size: 23px;
}

.admin-pin-card > p {
  text-align: center;
  color: #9cb8d0;
  font-size: 12px;
  line-height: 1.9;
}

.pin-input {
  text-align: center;
  letter-spacing: 8px;
  font-size: 22px;
}

.pin-actions {
  gap: 12px;
  margin-top: 23px;
  display: flex;
}

.pin-actions > * {
  flex: 1;
  justify-content: center;
}

.pin-reset {
  color: #8dc9eb;
  margin: 18px auto 0;
  font-size: 12px;
  display: flex;
}

.integration-status {
  color: #8ed8f7;
  background: #19344b;
  border: 1px solid #365c78;
  border-radius: 14px;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  padding: 22px;
  display: flex;
}

.integration-status p {
  color: #9db9cd;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.8;
}

.settings-help {
  color: #93acc5;
  margin: 15px 0 22px;
  font-size: 12px;
  line-height: 1.9;
}

.settings-help a {
  color: #88d3f8;
}

.settings-toggle {
  color: #b9d4e8;
  background: #182c42;
  border: 1px solid #2c4a65;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 18px;
  font-size: 13px;
  display: flex;
}

.settings-toggle input {
  accent-color: #38bdf8;
  width: 18px;
  height: 18px;
}

.theme-fields {
  margin: 20px 0;
}

.theme-fields label {
  color: #b5cce0;
  border-bottom: 1px solid #294259;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-size: 13px;
  display: flex;
}

.theme-fields label > span {
  align-items: center;
  gap: 12px;
  display: flex;
}

.theme-fields input[type="color"] {
  background: none;
  border: 0;
  width: 38px;
  height: 32px;
  padding: 0;
}

.theme-fields .form-input {
  width: 110px;
}

.theme-preview {
  border: 1px solid #34516a;
  margin: 24px 0;
  padding: 24px;
}

.theme-preview > div {
  padding: 24px;
}

.theme-preview p {
  margin: 10px 0 18px;
  font-size: 13px;
}

.theme-preview span {
  color: #081725;
  border-radius: 10px;
  padding: 10px 18px;
  display: inline-block;
}

.admin-panel h3 {
  margin-top: 24px;
}

.wallet-bank {
  background: #142b40;
  border: 1px solid #325774;
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 22px;
}

.wallet-bank > span {
  color: #8da9c1;
  font-size: 11px;
}

.wallet-bank h3 {
  margin: 12px 0;
  font-size: 18px;
}

.wallet-bank > strong {
  color: #99dffc;
  letter-spacing: 1px;
  font-size: 25px;
}

.wallet-bank > p {
  color: #b0cce2;
  margin: 8px 0;
  font-size: 13px;
}

.wallet-bank > img {
  background: #fff;
  border-radius: 10px;
  width: 210px;
  max-width: 100%;
  margin: 20px auto;
  display: block;
}

.slip-upload {
  text-align: center;
  color: #8fd3f5;
  background: #16314a;
  border: 1px dashed #497c9d;
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.slip-upload span {
  color: #93adc3;
  font-size: 11px;
}

.slip-upload strong {
  overflow-wrap: anywhere;
  max-width: 100%;
  font-size: 13px;
}

.slip-upload input {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  position: absolute;
  inset: 0;
}

.slip-preview {
  object-fit: contain;
  border-radius: 12px;
  max-width: 100%;
  max-height: 400px;
  margin: 18px auto;
  display: block;
}

.wallet-history-title {
  margin: 32px 0 18px;
}

.wallet-history {
  gap: 12px;
  display: grid;
}

.wallet-history article {
  background: #102136;
  border: 1px solid #29485f;
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 16px;
  display: flex;
}

.wallet-history article small {
  color: #89a9c2;
  margin-top: 5px;
  font-size: 10px;
  display: block;
}

.wallet-history article p {
  color: #97b6cf;
  width: 100%;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.8;
}

body:has(.header) {
  background: var(--shop-background, #080f1f);
  color: var(--shop-text, #eaf4ff);
  font-size: var(--shop-font, 14px);
}

body:has(.header) .container {
  max-width: var(--shop-width, 1280px);
}

body:has(.header) .primary-button {
  background: var(--shop-primary, #38bdf8);
  color: #071725;
}

body:has(.header) :is(.product-card, .category-card, .shortcut, .stat-card, .route-content) {
  border-radius: var(--shop-radius, 18px);
  background-color: var(--shop-surface, #111f31);
}

body:has(.header) .hero h1 > span:not(.heading-star) {
  color: var(--shop-primary, #38bdf8);
}

body:has(.header) .brand strong {
  color: var(--shop-text, #eaf4ff);
}

@media (max-width: 1200px) {
  .admin-sidebar {
    width: 230px;
  }

  .workspace-main {
    width: calc(100% - 230px);
    margin-left: 230px;
  }

  .workspace-content {
    padding: 25px;
  }

  .overview-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .overview-money-grid {
    grid-template-columns: 1fr 1fr;
  }

  .overview-money-grid article:first-child {
    grid-column: span 2;
  }

  .overview-greeting h1 {
    font-size: 26px;
  }

  .overview-welcome {
    padding: 24px;
  }

  .overview-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .admin-sidebar {
    width: 260px;
    transition: transform .2s;
    transform: translateX(-100%);
  }

  .admin-sidebar.is-open {
    transform: none;
  }

  .workspace-main {
    width: 100%;
    margin-left: 0;
  }

  .workspace-mobile-toggle, .sidebar-close {
    display: flex !important;
  }

  .sidebar-close {
    position: absolute;
    top: 26px;
    right: 10px;
  }

  .workspace-backdrop {
    z-index: 39;
    background: #0009;
    display: block;
    position: fixed;
    inset: 0;
  }

  .workspace-header {
    padding: 16px;
  }

  .workspace-header > div > span {
    display: none;
  }

  .workspace-content {
    padding: 20px 16px 45px;
  }

  .overview-welcome {
    flex-direction: column;
    align-items: flex-start;
  }

  .overview-greeting {
    gap: 13px;
  }

  .overview-greeting > img {
    width: 55px;
    height: 55px;
  }

  .overview-greeting h1 {
    font-size: 23px;
  }

  .overview-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .overview-stat {
    min-height: 110px;
    padding: 16px;
  }

  .overview-stat > svg {
    top: 16px;
    right: 12px;
  }

  .overview-filter {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .overview-filter > div {
    flex-wrap: wrap;
  }

  .overview-filter button {
    padding: 8px 12px;
  }

  .overview-money-grid {
    grid-template-columns: 1fr;
  }

  .overview-money-grid article:first-child {
    grid-column: auto;
  }

  .overview-money-grid strong {
    font-size: 29px;
  }

  .workspace-header strong {
    font-size: 12px;
  }

  .workspace-header .secondary-button {
    padding: 8px;
    font-size: 10px;
  }

  .admin-workspace .admin-panel {
    padding: 20px 16px;
  }

  .theme-fields label > span {
    gap: 5px;
  }

  .theme-fields label {
    font-size: 12px;
  }

  .theme-fields .form-input {
    width: 95px;
  }

  .overview-greeting h1 {
    overflow-wrap: anywhere;
  }

  .overview-greeting > div {
    min-width: 0;
  }
}

.hero.hero-image-banner {
  aspect-ratio: 4;
  isolation: isolate;
  background: #10263d;
  border-radius: 20px;
  min-height: 0;
}

.hero-image-banner:after {
  display: none;
}

.hero-banner-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.hero-image-banner .hero-controls {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #071324b3;
  border-radius: 30px;
  gap: 12px;
  padding: 6px 10px;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-image-banner .hero-controls > button {
  color: #d9f3ff;
  background: #254660;
  width: 28px;
  height: 28px;
}

.hero-image-banner .hero-controls .dot {
  background: #9fb9cb;
}

.hero-image-banner .hero-controls .dot.active {
  background: #70d8ff;
}

.admin-banner-editor .admin-image-preview {
  object-fit: contain;
  height: auto;
  max-height: 320px;
}

@media (max-width: 600px) {
  .hero.hero-image-banner {
    border-radius: 14px;
  }

  .hero-image-banner .hero-controls {
    gap: 8px;
    padding: 4px 8px;
    bottom: 8px;
  }

  .hero-image-banner .hero-controls > button {
    width: 24px;
    height: 24px;
  }
}

.shop-dropdown {
  position: relative;
}

.shop-dropdown summary {
  cursor: pointer;
  border-radius: 30px;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  display: flex;
}

.shop-dropdown summary::-webkit-details-marker {
  display: none;
}

.shop-dropdown[open] summary, .shop-dropdown summary:hover {
  color: #87d9ff;
  background: #203951;
}

.shop-dropdown > div {
  background: var(--shop-surface, #132235);
  z-index: 60;
  border: 1px solid #35516b;
  border-radius: 22px;
  min-width: 224px;
  padding: 12px;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  box-shadow: 0 20px 45px #0005;
}

.shop-dropdown > div a {
  width: 100%;
  border-radius: 10px !important;
  padding: 14px !important;
  display: flex !important;
}

.category-toolbar {
  align-items: center;
  gap: 16px;
  margin: 20px 0 30px;
  display: flex;
}

.category-toolbar .search-box {
  flex: 1;
}

.category-toolbar select {
  max-width: 175px;
}

.category-toolbar > span {
  white-space: nowrap;
  color: #90b5d0;
  font-size: 13px;
}

.managed-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  display: grid;
}

.managed-category-grid article {
  background: #122135;
  border: 1px solid #29455f;
  border-radius: 18px;
  padding: 16px;
}

.managed-category-grid img {
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  height: 150px;
}

.managed-category-grid p {
  color: #90b5d0;
  min-height: 35px;
  font-size: 13px;
}

.managed-category-grid small {
  color: #82bbdc;
  margin-bottom: 16px;
  display: block;
}

.member-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0;
  display: grid;
}

.member-summary article {
  background: var(--shop-surface, #132235);
  border: 1px solid #314c64;
  border-radius: 22px;
  align-items: center;
  gap: 17px;
  padding: 24px;
  display: flex;
}

.member-summary svg {
  color: #80d5ff;
  box-sizing: content-box;
  background: #203b55;
  border-radius: 15px;
  padding: 12px;
}

.member-summary span {
  color: #a6c6dc;
  font-size: 12px;
  display: block;
}

.member-summary strong {
  margin-top: 4px;
  font-size: 25px;
  display: block;
}

.member-summary article:last-child strong, .member-money {
  color: #65e4b5;
  font-weight: 700;
}

.member-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  display: flex;
}

.member-toolbar h2 {
  margin-right: auto;
}

.member-toolbar .search-box {
  max-width: 280px;
}

.member-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.member-actions .secondary-button {
  padding: 8px 12px;
  font-size: 12px;
}

.segmented-tabs {
  background: #1b3045;
  border: 1px solid #34516b;
  border-radius: 20px;
  gap: 5px;
  padding: 6px;
  display: flex;
}

.segmented-tabs button {
  color: #aacce0;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 15px;
  padding: 10px 15px;
  font-weight: 600;
}

.segmented-tabs button[aria-pressed="true"], .segmented-tabs button[aria-selected="true"] {
  color: #8edcff;
  background: #101e30;
}

.wallet-tabs {
  margin: 0 0 24px;
}

.wallet-tabs button {
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.wallet-card {
  background: var(--shop-surface, #132235);
  border: 1px solid #34516b;
  border-radius: 26px;
  padding: 32px;
}

.wallet-card > h2 {
  align-items: center;
  gap: 10px;
  margin-top: 0;
  font-size: 20px;
  display: flex;
}

.wallet-card > p {
  color: #a4c6df;
  font-size: 13px;
  line-height: 1.8;
}

.wallet-card .wallet-balance {
  margin: 20px 0;
}

.wallet-card .wallet-bank {
  background: #1b3045;
  border: 1px solid #36536c;
  border-radius: 23px;
  padding: 22px;
}

.wallet-card .wallet-bank .icon-button {
  margin-left: 8px;
  display: inline-flex;
}

.wallet-card .form-input {
  border-radius: 13px;
}

.wallet-card .full-button {
  margin-top: 18px;
  padding: 16px;
}

.gift-input {
  font-family: monospace;
}

.gift-help {
  color: #b4ddf6;
  background: #203951;
  border: 1px solid #496982;
  border-radius: 20px;
  margin-top: 24px;
  padding: 20px;
  font-size: 13px;
}

.gift-help p {
  margin-bottom: 0;
  line-height: 1.9;
}

.wallet-card .slip-upload {
  padding: 16px;
}

.admin-workspace .admin-panel-heading h1 {
  font-size: 26px;
}

.admin-workspace .admin-panel + .admin-panel {
  margin-top: 24px;
}

@media (max-width: 850px) {
  .member-summary {
    grid-template-columns: 1fr;
  }

  .managed-category-grid {
    grid-template-columns: 1fr 1fr;
  }

  .category-toolbar {
    flex-wrap: wrap;
  }

  .category-toolbar .search-box {
    flex-basis: 100%;
  }

  .wallet-card {
    padding: 22px;
  }

  .member-toolbar .search-box {
    width: 100%;
    max-width: none;
  }

  .member-summary article {
    padding: 18px;
  }

  .admin-workspace .admin-panel-heading {
    flex-wrap: wrap;
  }

  .admin-workspace .admin-panel-heading h1 {
    font-size: 21px;
  }
}

@media (max-width: 500px) {
  .managed-category-grid {
    grid-template-columns: 1fr;
  }

  .wallet-tabs button {
    padding: 12px 8px;
    font-size: 12px;
  }

  .wallet-card {
    padding: 20px 16px;
  }

  .shop-dropdown > div {
    width: 100%;
    margin-bottom: 12px;
    position: relative;
    top: 8px;
  }

  .category-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.route-content:has(.wallet-tabs) {
  background: none;
  border: 0;
  width: min(100%, 528px);
  padding: 0;
}

.route-content:has(.category-toolbar) {
  background: none;
  border: 0;
  max-width: none;
  padding: 0;
}

.wallet-card h3 {
  margin-top: 24px;
}

.wallet-route {
  width: min(100%, 528px);
  margin: 32px auto 60px;
}

.wallet-page-heading {
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  display: flex;
}

.wallet-page-heading > span {
  color: #92dbff;
  background: #203b55;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.wallet-page-heading h1 {
  color: #e5f3ff;
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
}

.wallet-page-heading p {
  color: #b4cadc;
  margin: 0;
  font-size: 12px;
}

.wallet-route .wallet-tabs {
  background: #1b2d42;
  border: 1px solid #39526c;
  border-radius: 23px;
  gap: 6px;
  height: 58px;
  margin-bottom: 24px;
  padding: 6px;
}

.wallet-route .wallet-tabs button {
  border-radius: 16px;
  padding: 10px;
  font-size: 14px;
}

.wallet-route .wallet-tabs button[aria-selected="true"] {
  color: #a4ddff;
  background: #112032;
}

.wallet-route .wallet-card {
  background: #132235;
  border: 1px solid #3a526c;
  border-radius: 26px;
  padding: 32px;
}

.wallet-route .wallet-card h2 {
  color: #eef7ff;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.5;
}

.wallet-route .wallet-card > p {
  color: #b6cadd;
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 500;
}

.wallet-route .wallet-bank {
  text-align: left;
  background: #1b3045;
  border: 1px solid #3a5570;
  border-radius: 24px;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  padding: 18px;
  display: flex;
}

.wallet-bank-logo {
  color: #87d9ff;
  background: #132235;
  border: 1px solid #57718a;
  border-radius: 17px;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  display: grid;
}

.wallet-bank-logo img {
  object-fit: contain;
  border-radius: 50%;
  display: block;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
}

.wallet-bank-info {
  min-width: 0;
}

.wallet-route .wallet-bank h3 {
  color: #e4f1ff;
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.5;
}

.wallet-account-number {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.wallet-route .wallet-bank strong {
  letter-spacing: 1px;
  color: #95d9ff;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.6;
}

.wallet-route .wallet-bank .icon-button {
  color: #a6c6de;
  background: #142437;
  border: 1px solid #45617a;
  border-radius: 7px;
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
}

.wallet-route .wallet-bank p {
  color: #b3c8da;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.wallet-payment-qr {
  border-radius: 14px;
  width: 180px;
  max-width: 100%;
  margin: 0 auto 24px;
  display: block;
}

.wallet-route .wallet-limits {
  color: #b6cadd;
  margin: 0 0 23px;
  font-size: 13px;
}

.wallet-route .field-label {
  color: #d0e2f2;
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.wallet-route .form-input {
  background: #182c42;
  border: 1px solid #3c5570;
  border-radius: 12px;
  height: 50px;
  padding: 12px;
  font-size: 14px;
}

.wallet-route .form-input::placeholder {
  color: #8da6bc;
}

.wallet-route .form-input:focus {
  outline-offset: 1px;
  border-color: #68bfff;
  outline: 2px solid #8cd9ff;
}

.slip-file-input {
  color: #bdd3e5;
  font-size: 12px;
}

.slip-file-input input {
  color: #bed2e3;
  width: 100%;
  font-size: 12px;
  display: block;
}

.slip-file-input input::file-selector-button {
  color: #a9ddff;
  cursor: pointer;
  background: #263d56;
  border: 0;
  border-radius: 13px;
  margin-right: 12px;
  padding: 9px 16px;
  font-weight: 600;
}

.wallet-route .primary-button {
  color: #081727;
  background: linear-gradient(100deg, #38bdf8, #86baff);
  border: 0;
  border-radius: 12px;
  gap: 10px;
  min-height: 51px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 7px 17px #2488bf21;
}

.wallet-route .full-button {
  margin-top: 16px;
}

.wallet-route .primary-button:disabled {
  opacity: .6;
}

.wallet-transactions {
  color: #b4d2e8;
  background: #112032;
  border: 1px solid #304d65;
  border-radius: 20px;
  margin-top: 24px;
  padding: 18px;
}

.wallet-transactions summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.wallet-transactions .wallet-history {
  margin-top: 15px;
}

.wallet-route .gift-help {
  margin-top: 24px;
}

.wallet-route .gift-input {
  border-radius: 24px;
  height: 54px;
}

.wallet-route .slip-preview {
  max-height: 250px;
  margin: 15px auto;
}

@media (max-width: 560px) {
  .wallet-route {
    margin-top: 28px;
  }

  .wallet-route .wallet-card {
    padding: 26px 24px;
  }

  .wallet-page-heading h1 {
    font-size: 21px;
  }

  .wallet-route .wallet-tabs button {
    font-size: 13px;
  }

  .wallet-route .wallet-bank {
    gap: 12px;
    padding: 16px;
  }

  .wallet-route .wallet-bank strong {
    font-size: 17px;
  }
}

@media (max-width: 390px) {
  .wallet-route .wallet-card {
    padding: 22px 20px;
  }

  .wallet-bank-logo {
    width: 48px;
    height: 48px;
  }

  .wallet-bank-logo img {
    width: 40px !important;
    height: 40px !important;
  }

  .wallet-route .wallet-bank strong {
    letter-spacing: .5px;
    font-size: 15px;
  }

  .wallet-route .wallet-bank h3 {
    font-size: 13px;
  }
}

.profile-card {
  background: #132235;
  border: 1px solid #3b5570;
  border-radius: 22px;
  max-width: 578px;
  margin: 28px auto 50px;
  overflow: hidden;
}

.profile-cover {
  background: #203b55;
  height: 130px;
  position: relative;
}

.profile-cover > .icon-button {
  color: #c0d8ea;
  background: #112032;
  border-color: #3c5974;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 15px;
  right: 16px;
}

.profile-card-body {
  padding: 0 30px 24px;
}

.profile-photo {
  color: #97ddff;
  background: radial-gradient(circle at 30% 20%, #2e678b, #0e1e30);
  border: 3px solid #55bfff;
  border-radius: 50%;
  place-items: center;
  width: 102px;
  height: 102px;
  margin: -51px auto 14px;
  display: grid;
  position: relative;
}

.profile-photo > img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.profile-camera {
  color: #9edfff;
  cursor: pointer;
  background: #132235;
  border: 1px solid #72caff;
  border-radius: 50%;
  place-items: center;
  width: 33px;
  height: 33px;
  display: grid;
  position: absolute;
  bottom: -2px;
  right: -3px;
}

.profile-camera:disabled {
  opacity: .5;
}

.profile-card h1 {
  text-align: center;
  color: #a2ddff;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

.profile-handle {
  text-align: center;
  color: #bad0e2;
  margin: 0 0 22px;
  font-size: 13px;
}

.profile-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  display: grid;
}

.profile-summary article {
  color: #bad4e9;
  border: 1px solid #3c5570;
  border-radius: 22px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 99px;
  padding: 14px 6px;
  display: flex;
}

.profile-summary svg {
  margin-bottom: 6px;
}

.profile-summary strong {
  color: #a1dcff;
  text-align: center;
  font-size: 14px;
}

.profile-summary small {
  color: #b3cadd;
  font-size: 10px;
}

.profile-points {
  color: #a1dcff;
  border: 1px solid #3d5670;
  border-radius: 23px;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.profile-shortcuts {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 15px;
  display: grid;
}

.profile-shortcuts a {
  color: #c4deef;
  border: 1px solid #3d5670;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 11px;
  font-size: 12px;
  display: flex;
}

.profile-links {
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.profile-links > a, .profile-links > button {
  text-align: left;
  color: #d6eafb;
  cursor: pointer;
  background: #1b3045;
  border: 1px solid #3b5570;
  border-radius: 21px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 18px;
  display: flex;
}

.profile-links > a:hover, .profile-links > button:hover {
  background: #223c56;
  border-color: #70b8e2;
}

.profile-links span {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  display: flex;
}

.profile-links strong {
  font-size: 14px;
}

.profile-links small {
  color: #aac6dd;
  font-size: 11px;
}

.profile-editor label {
  color: #bed7e9;
  margin: 20px 0 14px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.profile-editor input {
  margin-top: 7px;
}

.profile-editor .primary-button {
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 12px;
}

.profile-editor hr {
  border: 0;
  border-top: 1px solid #38546f;
  margin: 24px 0 18px;
}

.profile-editor h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.profile-editor .settings-help {
  font-size: 11px;
}

.profile-success {
  color: #75e0b6;
  background: #0e3e32;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
}

.profile-topup-history article {
  border: 1px solid #39556e;
  border-radius: 15px;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 16px;
  display: flex;
}

.profile-topup-history article > div {
  flex: 1;
}

.profile-topup-history strong {
  color: #8ed7ff;
}

.profile-topup-history small {
  color: #9dbcd2;
  margin-top: 4px;
  font-size: 11px;
  display: block;
}

.profile-topup-history p {
  margin: 6px 0 0;
  font-size: 12px;
}

@media (max-width: 600px) {
  .profile-card-body {
    padding: 0 20px 22px;
  }

  .profile-summary {
    gap: 8px;
  }

  .profile-summary strong {
    font-size: 12px;
  }

  .profile-summary article {
    border-radius: 18px;
    min-height: 94px;
  }

  .profile-links > a, .profile-links > button {
    gap: 12px;
    padding: 18px 14px;
  }

  .profile-links strong {
    font-size: 13px;
  }

  .profile-links small {
    font-size: 10px;
  }

  .profile-card h1 {
    font-size: 23px;
  }

  .profile-card {
    margin-top: 25px;
  }
}

.profile-modal {
  width: min(458px, 100% - 32px);
  max-height: 90dvh;
  padding: 20px;
}

.profile-modal .modal-head {
  z-index: 2;
  background: #111e31;
  margin-bottom: 18px;
  padding: 8px 0;
  position: sticky;
  top: -20px;
}

.profile-modal .modal-head .eyebrow {
  display: none;
}

.profile-modal .modal-head h2 {
  margin: 0;
  font-size: 15px;
}

.profile-modal .modal-head .icon-button {
  width: 28px;
  height: 28px;
}

.profile-modal .profile-editor label:first-child {
  margin-top: 8px;
}

.avatar > img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.page-transition {
  min-width: 0;
}

.nav > a, .shop-menu > button {
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}

.nav > a:hover, .shop-menu > button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px #0002;
}

.nav > a > svg, .shop-menu > button > svg {
  transition: transform .18s;
}

.nav > a:hover > svg, .shop-menu > button:hover > svg:first-child {
  transform: scale(1.08);
}

.shop-menu {
  position: relative;
}

.shop-menu > button {
  cursor: pointer;
  background: none;
  border: 0;
}

.shop-menu.is-open > button {
  color: #8edbff;
  background: #203951;
}

.shop-menu > button > svg:last-child {
  transition: transform .18s;
}

.shop-menu.is-open > button > svg:last-child {
  transform: rotate(180deg);
}

.shop-menu.is-open:after {
  content: "";
  width: 100%;
  height: 15px;
  position: absolute;
  top: 100%;
  left: 0;
}

.shop-menu-panel {
  background: var(--shop-surface, #132235);
  z-index: 60;
  transform-origin: 0 0;
  border: 1px solid #35516b;
  border-radius: 20px;
  min-width: 224px;
  padding: 10px;
  animation: .18s cubic-bezier(.2, .7, .2, 1) shop-panel-in;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  box-shadow: 0 18px 40px #0005;
}

.shop-menu-panel[hidden] {
  display: none;
}

.nav .shop-menu-panel a {
  color: #c7e0f3;
  gap: 12px;
  font-size: 13px;
  transition: background .16s, color .16s, transform .16s;
  display: flex;
  border-radius: 11px !important;
  padding: 14px !important;
}

.nav .shop-menu-panel a:hover {
  color: #94ddff;
  background: #213d56;
  transform: translateX(3px);
}

.shop-menu-panel a svg {
  color: #88d5fc;
}

.announcement-scroll .announcement-label {
  font: inherit;
  cursor: pointer;
  border: 0;
  font-weight: 600;
  display: inline-flex;
}

.announcement-scroll .announcement-label:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #86d8ff;
}

.announcement-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

.announcement-track {
  width: max-content;
  max-width: none;
  display: flex;
}

.announcement-copy {
  white-space: nowrap;
  flex: none;
  min-width: 100cqw;
  padding-right: 64px;
  line-height: 1.8;
  display: block;
}

.has-motion .announcement-track {
  animation: announcement-loop var(--announcement-duration, 25s) linear infinite;
}

.announcement-scroll:not(.has-motion) .announcement-track {
  width: 100%;
}

.announcement-scroll:not(.has-motion) .announcement-copy {
  white-space: normal;
  min-width: 0;
  padding: 0;
}

.announcement-scroll:hover .announcement-track, .announcement-scroll:focus-within .announcement-track, .announcement-scroll.is-paused .announcement-track {
  animation-play-state: paused;
}

.announcement-scroll .announcement-end {
  white-space: nowrap;
  flex: none;
  max-width: 28%;
  overflow: hidden;
}

.admin-announcement-preview {
  margin: 20px 0;
}

.admin-announcement-preview .announcement-end {
  display: none;
}

@keyframes shop-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes announcement-loop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .shop-menu > button {
    width: 100%;
  }

  .shop-menu-panel {
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border-radius: 14px;
    margin: 6px 0 0;
    position: relative;
    top: 0;
    left: 0;
  }

  .shop-menu.is-open:after {
    display: none;
  }

  .nav > a:hover, .shop-menu > button:hover {
    transform: none;
  }

  .announcement-scroll .announcement-end {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav > a, .shop-menu > button, .nav > a > svg, .shop-menu > button > svg, .shop-menu-panel a {
    transition: none;
  }

  .nav > a:hover, .shop-menu > button:hover, .nav .shop-menu-panel a:hover {
    transform: none;
  }

  .shop-menu-panel {
    animation: none;
  }

  .has-motion .announcement-track {
    width: 100%;
    animation: none;
  }

  .announcement-copy[aria-hidden="true"] {
    display: none;
  }

  .announcement-copy {
    white-space: normal;
    min-width: 0;
    padding: 0;
  }

  .announcement-viewport {
    overflow: visible;
  }
}

.reference-page {
  max-width: 1100px;
  min-height: 340px;
  margin: 0 auto;
  padding: 38px 0 52px;
}

.shop-reference-heading {
  align-items: center;
  gap: 13px;
  margin-bottom: 30px;
  display: flex;
}

.reference-icon {
  color: #94ddff;
  background: #223c53;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: inline-flex;
}

.shop-reference-heading h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.35;
}

.shop-reference-heading p {
  color: #abc2d5;
  margin: 4px 0 0;
  font-size: 12px;
}

.reference-count {
  white-space: nowrap;
  color: #b9d8ed;
  background: #20364b;
  border-radius: 20px;
  margin-left: auto;
  padding: 5px 13px;
  font-size: 11px;
}

.reference-toolbar {
  gap: 12px;
  margin-bottom: 30px;
  display: flex;
}

.reference-toolbar .search-box {
  background: #182b40;
  border: 1px solid #36516b;
  border-radius: 11px;
  flex: 1;
  min-width: 0;
  min-height: 44px;
}

.reference-sort {
  color: #b9d5e8;
  background: #132338;
  border: 1px solid #36516b;
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  display: flex;
}

.reference-sort select {
  font: inherit;
  color: inherit;
  background: #132338;
  border: 0;
  outline: none;
  min-height: 42px;
  font-size: 12px;
  font-weight: 600;
}

.reference-category-empty {
  background: var(--shop-surface, #132235);
  text-align: center;
  border: 1px solid #36516b;
  border-radius: 23px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 240px;
  padding: 30px;
  display: flex;
}

.reference-category-empty h3 {
  margin: 15px 0 8px;
  font-size: 14px;
}

.reference-category-empty p {
  color: #9db6cb;
  margin: 0;
  font-size: 12px;
}

.history-reference h1 {
  margin: 0 0 24px;
  font-size: 24px;
}

.order-category-tabs {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.order-category-tabs button {
  color: #b9cfdf;
  background: #132235;
  border: 1px solid #36516b;
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  font-size: 12px;
  font-weight: 600;
  transition: background .18s, border-color .18s;
  display: flex;
}

.order-category-tabs button span {
  background: #23394f;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  display: inline-flex;
}

.order-category-tabs button.active, .order-category-tabs button:hover {
  color: #9bddff;
  background: #203c55;
  border-color: #5486a7;
}

.reference-history-empty {
  background: var(--shop-surface, #132235);
  color: #a8bed0;
  border: 1px solid #36516b;
  border-radius: 23px;
  justify-content: center;
  align-items: center;
  min-height: 96px;
  padding: 30px;
  font-size: 13px;
  display: flex;
}

.nav > button {
  color: #a9bdd2;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  transition: background .18s, color .18s, transform .18s;
  display: flex;
}

.nav > button:hover, .nav > button.nav-active {
  color: #8edbff;
  background: #203951;
}

.nav > button:hover {
  transform: translateY(-2px);
}

.contact-dialog {
  background: var(--shop-surface, #132235);
  border: 1px solid #36516b;
  border-radius: 22px;
  width: 392px;
  max-width: calc(100vw - 32px);
  padding: 22px 18px 16px;
}

.contact-dialog .modal-head {
  margin-bottom: 4px;
}

.contact-dialog .modal-head .eyebrow {
  display: none;
}

.contact-dialog .modal-head h2 {
  padding-left: 50px;
  font-size: 16px;
}

.contact-dialog .modal-head .icon-button {
  background: none;
  border: 0;
  width: 25px;
  height: 25px;
}

.contact-dialog-subtitle {
  color: #aec4d7;
  margin-bottom: 20px;
  padding-left: 50px;
  font-size: 10px;
  position: relative;
}

.contact-dialog-subtitle > svg {
  box-sizing: content-box;
  color: #98ddff;
  background: #213b52;
  border-radius: 50%;
  padding: 10px;
  position: absolute;
  top: -29px;
  left: 0;
}

.contact-dialog-subtitle p {
  margin: 0;
}

.contact-channel-list {
  gap: 10px;
  display: grid;
}

.contact-channel {
  border: 1px solid #36516b;
  border-radius: 22px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 13px;
  transition: background .18s, transform .18s;
  display: flex;
}

.contact-channel:hover {
  background: #1d354d;
  transform: translateY(-2px);
}

.contact-channel-icon {
  color: #fff;
  border-radius: 13px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.contact-channel-icon.discord {
  background: #5865f2;
}

.contact-channel-icon.facebook {
  background: #0866ff;
}

.contact-channel-icon svg {
  width: 23px;
  height: 23px;
}

.contact-channel-text {
  flex: 1;
  min-width: 0;
}

.contact-channel-text strong {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  display: flex;
}

.contact-channel-text small {
  color: #bdcede;
  background: #263b50;
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 8px;
}

.contact-channel-text > span {
  color: #a8bfd2;
  margin-top: 3px;
  font-size: 10px;
  display: block;
}

.contact-channel.is-disabled {
  opacity: .65;
}

.contact-dialog-footer {
  color: #aabfd2;
  border-top: 1px solid #36516b;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 10px;
  font-size: 10px;
  display: flex;
}

.contact-dialog-footer a {
  color: #94dcff;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  display: flex;
}

@media (max-width: 600px) {
  .reference-page {
    padding: 28px 0 38px;
  }

  .shop-reference-heading {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
  }

  .shop-reference-heading h1 {
    font-size: 21px;
  }

  .shop-reference-heading p {
    font-size: 10px;
  }

  .reference-count {
    margin-left: 54px;
  }

  .reference-toolbar {
    gap: 8px;
  }

  .reference-sort {
    padding: 0 9px;
  }

  .reference-sort select {
    max-width: 115px;
    font-size: 10px;
  }

  .history-reference h1 {
    font-size: 22px;
  }

  .order-category-tabs button {
    padding: 10px 11px;
    font-size: 11px;
  }

  .nav > button {
    border-radius: 12px;
    justify-content: flex-start;
    width: 100%;
    padding: 13px 15px;
  }

  .contact-dialog {
    padding: 20px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav > button, .contact-channel, .order-category-tabs button {
    transition: none;
  }

  .nav > button:hover, .contact-channel:hover {
    transform: none;
  }
}

.reference-toolbar .search-box input {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.contact-page-channels {
  margin-bottom: 26px;
}

.contact-page-channels .contact-dialog-subtitle {
  padding-left: 0;
}

.contact-page-channels .contact-dialog-subtitle > svg {
  display: none;
}

.discord-community-avatar > svg {
  color: #a9c8ff;
  width: 28px;
  height: 28px;
}

.discord-community-preview {
  min-height: 76px;
}

.discord-community-preview > div:last-child {
  flex: 1;
  min-width: 0;
}

.discord-community-preview strong {
  overflow-wrap: anywhere;
}

.discord-community-preview p {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.discord-community-avatar {
  flex: none;
}

.admin-discord-preview {
  max-width: 400px;
  margin: 24px 0;
}

.admin-discord-preview > h3 {
  margin-bottom: 8px;
}

.admin-discord-preview .footer-discord {
  margin-top: 15px;
}

.discord-community-preview p {
  line-height: 1.8;
}

.display-settings {
  flex: none;
  position: relative;
}

.display-settings-panel {
  z-index: 85;
  background: var(--shop-surface, #132235);
  border: 1px solid #36516b;
  border-radius: 19px;
  width: 254px;
  padding: 10px 8px 8px;
  animation: .18s shop-panel-in;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  box-shadow: 0 15px 35px #0004;
}

.display-settings-panel h2 {
  color: var(--shop-text, #eaf4ff);
  align-items: center;
  gap: 8px;
  margin: 5px 6px 10px;
  font-size: 12px;
  display: flex;
}

.display-settings-panel fieldset {
  background: #20344a;
  border: 0;
  border-radius: 12px;
  min-width: 0;
  margin-top: 7px;
  padding: 9px 8px 6px;
}

.display-settings-panel legend {
  float: left;
  color: #c1d8ea;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 6px;
  font-size: 11px;
  display: flex;
}

.display-options {
  clear: both;
  gap: 6px;
  display: flex;
}

.display-options button {
  color: #bad0e3;
  background: none;
  border-radius: 9px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.display-options button[aria-pressed="true"] {
  color: #93ddff;
  background: #11263b;
}

.display-options button:hover {
  background: #29455e;
}

.display-settings-panel button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #38bdf8;
}

html[data-theme="light"]:not(:has(.admin-workspace)) {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --shop-background: #f4f8fc !important;
  --shop-surface: #fff !important;
  --shop-text: #16324b !important;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) {
  color: #16324b;
  background: #f4f8fc;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) :is(.header, .nav, .site-footer, .footer-bottom-bar, .stat-card, .shortcut-card, .product-card, .category-toolbar .search-box, .shop-menu-panel, .account-dropdown, .auth-card, .route-content, .reference-category-empty, .reference-history-empty, .wallet-card, .wallet-bank, .wallet-tabs, .order-card, .contact-channel, .contact-dialog, .footer-discord, .discord-community-preview, .display-settings-panel, .profile-card, .profile-settings-row, .profile-stat, .profile-summary, .profile-edit-modal, .modal, .announcement, .faq-item, .search-box, .cart-item) {
  color: #16324b !important;
  background: #fff !important;
  border-color: #bed0df !important;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) :is(h1, h2, h3, .auth-card h1, .detail-title, .profile-card h1, .profile-card h2, .stat-card strong, .stat-card p, .brand strong, .footer-store strong, .discord-community-preview strong, .auth-already p) {
  color: #16324b !important;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) :is(.nav > a, .nav > button, .shop-menu > button, .shop-menu-panel a, .account-links button, .muted, .auth-subtitle, .auth-bottom, .auth-help, .faq-item p, .support-intro p, .reference-category-empty p, .reference-history-empty, .shop-reference-heading p, .contact-channel-text > span, .contact-dialog-subtitle, .discord-community-preview p, .product-card p, .footer-store p, .footer-quick-links a, .footer-bottom-inner, .stat-label, .shortcut-card small, .route-heading p, .order-line, .profile-stats small) {
  color: #45627c !important;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, .auth-input, .reference-sort, .auth-create-account, .reference-count, .order-category-tabs button, .wallet-tabs button, .secondary-button, .profile-stats > div, .profile-actions a, .profile-action-card, .profile-points, .account-summary, .icon-button, .display-settings-panel fieldset) {
  color: #234661 !important;
  background: #edf4fa !important;
  border-color: #adc5d9 !important;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) :is(.nav .nav-active, .nav > button:hover, .shop-menu.is-open > button, .order-category-tabs button.active, .display-options button[aria-pressed="true"], .wallet-tabs .active) {
  color: #096999 !important;
  background: #d9edf9 !important;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) :is(.display-settings-panel legend, .display-options button) {
  color: #315873;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) input::placeholder {
  color: #647f97;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) .ambient {
  opacity: .3;
}

@media (max-width: 600px) {
  .display-settings-panel {
    width: 254px;
    max-width: calc(100vw - 32px);
    position: fixed;
    top: 74px;
    right: 16px;
  }

  .header-actions {
    gap: 5px;
  }

  .display-settings > .icon-button {
    width: 32px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .display-settings-panel {
    animation: none;
  }
}

@media (max-width: 450px) {
  .header .brand strong {
    display: none;
  }

  .header-inner {
    gap: 8px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .header .brand {
    flex: none;
  }

  .header-actions {
    gap: 5px;
  }

  .header .brand-mark, .header .store-logo {
    width: 32px;
    height: 32px;
  }
}

html[data-theme="light"] body:not(:has(.admin-workspace)) :is(.guest-login, .auth-forgot a, .auth-bottom a) {
  color: #176d9e !important;
}

.inventory-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
  display: grid;
}

.inventory-stats strong {
  color: #7dd3fc;
  margin-top: 8px;
  font-size: 26px;
  display: block;
}

.inventory-stats strong small {
  font-size: 12px;
}

.inventory-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.inventory-toolbar h2 {
  margin-right: auto;
}

.inventory-toolbar select {
  width: auto;
  max-width: 260px;
}

.inventory-toolbar .order-category-tabs {
  margin: 0;
}

.inventory-code {
  align-items: center;
  gap: 6px;
  display: flex;
}

.inventory-code code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  background: #14283e;
  border-radius: 8px;
  max-width: 290px;
  padding: 5px 9px;
  display: block;
}

.inventory-page td small {
  overflow-wrap: anywhere;
  max-width: 220px;
  font-size: 10px;
  display: block;
}

.inventory-lines {
  font-family: monospace;
  line-height: 1.8;
}

.inventory-actions {
  border-top: 1px solid #294259;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  display: flex;
}

.inventory-actions > button {
  flex: 1;
}

.purchase-modal {
  max-width: 490px;
}

.purchase-summary {
  background: var(--shop-surface, #14283e);
  border-radius: 18px;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  display: flex;
}

.purchase-summary img {
  object-fit: cover;
  border-radius: 10px;
  width: 46px;
  height: 46px;
}

.purchase-summary strong {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.purchase-summary b {
  color: #7dd3fc;
  white-space: nowrap;
}

.purchase-summary small {
  color: #7dd3fc;
  font-size: 11px;
}

.purchase-details {
  border: 1px solid #294259;
  border-radius: 20px;
  max-height: 40vh;
  padding: 18px;
  overflow-y: auto;
}

.purchase-details p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.8;
}

.purchase-balance {
  color: #9bcceb;
  justify-content: space-between;
  margin: 18px 0;
  font-size: 12px;
  display: flex;
}

.delivered-stock {
  border: 1px solid #294259;
  border-radius: 12px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  padding: 14px;
  display: flex;
}

.delivered-stock code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 180px;
  color: var(--shop-text, #d9eeff);
  flex: 1;
}

.delivered-stock small {
  color: #7dd3fc;
  width: 100%;
}

@media (max-width: 700px) {
  .inventory-stats {
    grid-template-columns: 1fr;
  }

  .inventory-toolbar > * {
    max-width: 100%;
  }

  .purchase-summary {
    gap: 8px;
  }

  .purchase-summary img {
    display: none;
  }

  .inventory-page h1 {
    font-size: 22px;
  }
}

html[data-theme="light"] body:not(:has(.admin-workspace)) .purchase-summary {
  background: #eaf5ff;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) .purchase-summary b {
  color: #0369a1;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) .purchase-summary small {
  color: #0369a1;
}

html[data-theme="light"] body:not(:has(.admin-workspace)) .purchase-balance {
  color: #0369a1;
}

.inventory-stats > .admin-panel {
  margin: 0;
}

.product-editor-modal {
  width: min(825px, 100vw - 32px);
}

.product-editor-modal .admin-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-editor-modal .admin-span-two {
  grid-column: 1 / -1;
}

.product-editor-modal .admin-checkbox {
  margin: 10px 0;
}

.product-editor-modal .field-label {
  margin: 12px 0;
}

.product-editor-modal textarea {
  font-family: inherit;
}

.product-editor-modal .inventory-actions {
  margin-top: 16px;
  padding-top: 14px;
}

@media (max-width: 650px) {
  .product-editor-modal .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

.sold-out-card .product-art > img {
  filter: grayscale();
  opacity: .45;
}

.product-sold-out {
  z-index: 2;
  color: #e5f4ff;
  white-space: nowrap;
  background: #081321dd;
  border-radius: 20px;
  padding: 7px 15px;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.product-points {
  color: #9bcceb;
  margin-top: 10px;
  font-size: 11px;
}

.admin-home-content-links {
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
  display: flex;
}

.hero-controls {
  gap: 8px;
  padding: 4px 7px;
}

.hero-controls > button {
  width: 22px;
  height: 22px;
}

.hero-controls > button svg {
  width: 13px;
  height: 13px;
}

.hero-controls > div {
  gap: 5px;
}

.hero-controls .dot {
  width: 5px;
  height: 5px;
}

.hero-controls .dot.active {
  width: 17px;
}

/*# sourceMappingURL=app_00dkk1y9sxvqd._.css.map*/