* { box-sizing: border-box; }
:root {
  --primary: #0066ff;
  --primary-strong: #0050cb;
  --primary-soft: #f2f7ff;
  --success: #34c759;
  --text: #1d1d1f;
  --text-soft: #424656;
  --muted: #727687;
  --line: #e5e5e5;
  --line-strong: #c2c6d8;
  --page: #f5f5f7;
  --surface: #ffffff;
  --surface-soft: #f6f3f5;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .08);
}
html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  width: 100%;
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background: var(--page);
  font-size: 15px;
  line-height: 1.45;
  touch-action: manipulation;
}
a { color: #2563eb; text-decoration: none; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; }
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; background: #111827; color: #fff; }
.topbar a { color: #fff; margin-left: 14px; }
.brand { font-weight: 700; margin-left: 0 !important; }
.container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; }
.muted { color: #6b7280; }
.stat { font-size: 28px; font-weight: 700; margin-top: 8px; }
.alert { padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; background: #e0f2fe; color: #075985; }
.alert.error { background: #fee2e2; color: #991b1b; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
th { background: #f9fafb; font-weight: 700; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
textarea { min-height: 80px; }
label { display: block; margin: 10px 0 6px; font-weight: 700; }
button, .button { display: inline-block; border: 0; border-radius: 6px; background: #2563eb; color: #fff; padding: 9px 14px; cursor: pointer; font: inherit; }
button.secondary, .button.secondary { background: #4b5563; }
button.danger { background: #dc2626; }
.inline { display: inline-flex; gap: 8px; align-items: center; }
.inline input, .inline select { width: auto; min-width: 90px; }
.product { display: flex; flex-direction: column; gap: 8px; }
.product img { width: 100%; height: 150px; object-fit: cover; background: #f3f4f6; border-radius: 6px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.admin-nav a { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; color: #111827; }
.badge { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 12px; background: #e5e7eb; }
.badge.ok { background: #dcfce7; color: #166534; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.off { background: #fee2e2; color: #991b1b; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: 22px; align-items: stretch; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 30px; margin-bottom: 18px; }
.home-hero h1 { margin: 0 0 12px; font-size: 34px; }
.home-hero p { max-width: 680px; color: #4b5563; line-height: 1.8; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-panel { display: grid; gap: 12px; }
.hero-stat { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; background: #f9fafb; }
.hero-stat span { display: block; color: #6b7280; margin-bottom: 6px; }
.hero-stat strong { font-size: 18px; }
.qr-code { width: 220px; height: 220px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 8px; }
.category-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.category-pill { border: 1px solid #d1d5db; border-radius: 999px; color: #111827; background: #fff; padding: 7px 12px; }
.category-pill.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.auth-page {
  min-height: 100dvh;
  background: #fcf8fb;
}
.auth-page .topbar {
  display: none;
}
.auth-page .container {
  min-height: 100dvh;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-page .alert {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 10;
  max-width: 408px;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.auth-shell {
  width: 100%;
  max-width: 440px;
}
.auth-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.auth-login-card {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.auth-head {
  margin-bottom: 24px;
  text-align: center;
}
.auth-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: rgba(0, 102, 255, .1);
  border-radius: 999px;
}
.auth-icon .material-symbols-outlined {
  font-size: 32px;
}
.auth-icon-large {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--primary-strong);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.auth-icon-large .material-symbols-outlined {
  font-size: 40px;
}
.auth-icon .material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.auth-login-head h1 {
  color: var(--primary-strong);
  font-size: 22px;
  line-height: 30px;
}
.auth-head h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
.auth-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.input-icon {
  position: relative;
}
.input-icon .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
  pointer-events: none;
}
.input-icon input {
  height: 44px;
  padding: 9px 16px 9px 40px;
  color: var(--text);
  background: #fcf8fb;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 22px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.input-icon input::placeholder {
  color: rgba(114, 118, 135, .62);
}
.input-icon input:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.input-icon.muted-input input {
  background: var(--surface-soft);
}
.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  background: #f0edef;
  border-radius: var(--radius);
}
.auth-notice .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--primary-strong);
  font-size: 20px;
}
.auth-notice p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.auth-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f8f7ff;
  background: var(--primary);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
  transition: transform .16s ease, background-color .16s ease;
}
.auth-submit:active {
  transform: scale(.98);
}
.auth-submit .material-symbols-outlined {
  font-size: 20px;
}
.auth-foot {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.auth-foot-bordered {
  padding-top: 16px;
  border-top: 1px solid rgba(194, 198, 216, .3);
}
.auth-foot-plain {
  margin-top: 10px;
}
.auth-foot a {
  color: var(--primary-strong);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.admin-auth-head {
  margin-bottom: 24px;
  text-align: center;
}
.admin-auth-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8f7ff;
  background: var(--primary);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 102, 255, .18);
}
.admin-auth-icon .material-symbols-outlined {
  font-size: 32px;
}
.admin-auth-head h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.admin-auth-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.admin-auth-card {
  padding-top: 28px;
}
.admin-auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--success));
}
.admin-auth-submit .material-symbols-outlined {
  font-size: 18px;
}
.admin-auth-notice {
  margin-top: 16px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-soft);
  border-top: 1px solid rgba(194, 198, 216, .3);
}
.admin-auth-notice .material-symbols-outlined {
  font-size: 14px;
}
.admin-auth-notice p {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}

.mobile-home-page {
  min-height: 100dvh;
  padding: 56px 0 72px;
  background: #fcf8fb;
}
.mobile-home-page .topbar {
  display: none;
}
.mobile-home-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.mobile-appbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.mobile-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.appbar-title {
  color: var(--primary-strong);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.icon-button,
.avatar-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--primary-strong);
}
.icon-button {
  justify-content: flex-start;
}
.avatar-button {
  justify-content: flex-end;
}
.avatar-button .material-symbols-outlined {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
}
.mobile-hero,
.feature-card,
.home-product-card,
.empty-card {
  background: var(--surface);
  border: 1px solid #e4e2e4;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.mobile-hero {
  padding: 24px;
  margin-bottom: 24px;
}
.mobile-hero h1 {
  margin: 0 0 16px;
  color: var(--primary-strong);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.mobile-hero p {
  margin: 0 0 24px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.mobile-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-home-page .button {
  min-height: 44px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.mobile-home-page .button.primary {
  color: #fff;
  background: var(--primary);
}
.mobile-home-page .button.secondary {
  color: #001849;
  background: var(--primary-soft);
}
.mobile-home-page .button .material-symbols-outlined {
  font-size: 20px;
}
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.feature-card {
  padding: 16px;
}
.feature-card h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.feature-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.feature-card a {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-strong);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.feature-card a .material-symbols-outlined {
  font-size: 18px;
}
.feature-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.feature-row .feature-icon {
  flex: 0 0 auto;
}
.feature-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.feature-icon.primary-soft {
  color: var(--primary-strong);
  background: #dae1ff;
}
.feature-icon.success-soft {
  color: #008432;
  background: #72fe88;
}
.feature-icon.neutral-soft {
  color: var(--text-soft);
  background: #e4e2e4;
}
.latest-section {
  margin-bottom: 24px;
}
.section-title-row {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-title-row h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.section-title-row a {
  display: inline-flex;
  align-items: center;
  color: var(--primary-strong);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.section-title-row .material-symbols-outlined {
  font-size: 18px;
}
.product-rail {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-rail::-webkit-scrollbar {
  display: none;
}
.home-product-card {
  width: 280px;
  flex: 0 0 auto;
  padding: 12px;
  color: var(--text);
}
.home-product-image {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 8px;
}
.home-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-product-image > .material-symbols-outlined {
  font-size: 42px;
}
.product-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  color: var(--primary-strong);
  background: rgba(0, 102, 255, .1);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.home-product-card h3 {
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-product-meta {
  min-height: 18px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.home-product-bottom {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-product-bottom strong {
  color: var(--primary-strong);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.home-product-bottom strong span {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}
.cart-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
}
.cart-dot .material-symbols-outlined {
  font-size: 18px;
}
.empty-card {
  padding: 20px;
  color: var(--text-soft);
  text-align: center;
}
.mobile-tabbar {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 0 8px env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid rgba(194, 198, 216, .3);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .04);
}
.mobile-tabbar a {
  width: 64px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--secondary);
  border-radius: 8px;
}
.mobile-tabbar a.active {
  color: var(--primary-strong);
  font-weight: 600;
}
.mobile-tabbar .material-symbols-outlined {
  font-size: 24px;
}
.mobile-tabbar span:last-child {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}

.mobile-shop-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-shop-page .topbar {
  display: none;
}
.mobile-shop-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.shop-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.shop-search-box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.shop-search-box .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
  pointer-events: none;
}
.shop-search-box input {
  width: 100%;
  height: 44px;
  padding: 9px 14px 9px 40px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 15px;
  line-height: 22px;
  outline: none;
  box-shadow: none;
}
.shop-search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.shop-filter-button {
  height: 44px;
  flex: 0 0 auto;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.shop-filter-button .material-symbols-outlined {
  color: var(--muted);
  font-size: 18px;
}
.shop-categories {
  margin: 0 -16px 16px;
  overflow: hidden;
}
.shop-category-scroll {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 0 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-category-scroll::-webkit-scrollbar {
  display: none;
}
.shop-category-chip {
  height: 32px;
  padding: 0 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .5);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.shop-category-chip.active {
  color: #f8f7ff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}
.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.shop-product-card {
  min-width: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.shop-product-card.sold-out {
  opacity: .72;
}
.shop-product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 8px;
}
.shop-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-product-card.sold-out .shop-product-image img {
  filter: grayscale(1);
}
.shop-product-category {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 2px 8px;
  overflow: hidden;
  color: var(--primary-strong);
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(0, 102, 255, .2);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.placeholder-icon {
  font-size: 42px;
}
.sold-out-mask {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(252, 248, 251, .56);
}
.sold-out-mask span {
  padding: 4px 12px;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.shop-product-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.shop-product-body h2 {
  min-height: 44px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.shop-product-info {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-price {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-strong);
}
.shop-price .material-symbols-outlined {
  font-size: 18px;
}
.shop-price strong {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.shop-stock {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.shop-stock.stock-empty {
  color: #ba1a1a;
}
.shop-product-action {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.shop-product-action.disabled {
  color: var(--text-soft);
  background: #f0edef;
}
.shop-empty {
  margin-top: 16px;
}

.mobile-product-page {
  min-height: 100dvh;
  padding: 56px 0 112px;
  background: #fcf8fb;
}
.mobile-product-page .topbar {
  display: none;
}
.mobile-product-page .container {
  width: 100%;
  max-width: 768px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  background: #fcf8fb;
}
.detail-appbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(252, 248, 251, .92);
  border-bottom: 1px solid #eae7ea;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.detail-appbar h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.detail-back,
.detail-more {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
}
.detail-back {
  justify-content: flex-start;
}
.detail-more {
  justify-content: flex-end;
}
.detail-back .material-symbols-outlined,
.detail-more .material-symbols-outlined {
  font-size: 24px;
}
.detail-hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  background: #eae7ea;
}
.detail-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-hero-track {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform .28s ease;
}
.detail-hero-slide {
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  margin: 0;
}
.detail-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.detail-hero-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}
.detail-hero-dots button.active {
  width: 18px;
  background: var(--primary);
}
.detail-hero-image .material-symbols-outlined {
  font-size: 68px;
}
.detail-summary-card {
  position: relative;
  z-index: 2;
  padding: 16px;
  background: var(--surface);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
}
.detail-price-row {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.detail-price {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--primary);
}
.detail-price .material-symbols-outlined {
  align-self: center;
  font-size: 24px;
}
.detail-price strong {
  font-size: 32px;
  line-height: 32px;
  font-weight: 700;
}
.detail-price span:last-child {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.detail-stock {
  flex: 0 0 auto;
  margin-bottom: 3px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.detail-stock strong {
  color: var(--text);
}
.detail-summary-card h2 {
  margin: 8px 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.detail-tags {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-tags span {
  padding: 4px 8px;
  color: var(--text-soft);
  background: #e4e2e4;
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.detail-tags span:first-child {
  color: #5f656c;
  background: #dee3eb;
  border-color: #dee3eb;
}
.detail-summary-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.detail-points-card {
  margin: 16px 16px 0;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .2);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.detail-points-card div {
  min-width: 0;
}
.detail-points-card span {
  display: block;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.detail-points-card strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  text-overflow: ellipsis;
}
.detail-content-section {
  margin: 16px 16px 32px;
}
.detail-content-section h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.detail-content-section h3 span {
  width: 4px;
  height: 16px;
  display: inline-block;
  background: var(--primary);
  border-radius: 999px;
}
.detail-content-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .2);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
}
.detail-text {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 24px;
}
.detail-action-bar {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 768px;
  min-height: 90px;
  margin: 0 auto;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border-top: 1px solid rgba(194, 198, 216, .2);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .03);
}
.detail-total {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.detail-total span {
  margin-bottom: 2px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.detail-total strong {
  color: var(--primary);
  font-size: 28px;
  line-height: 30px;
  font-weight: 700;
}
.detail-total em {
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.detail-action-bar form {
  flex: 0 0 auto;
}
.detail-action-button {
  height: 48px;
  min-width: 132px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8f7ff;
  background: var(--primary);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 102, 255, .25);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
}
.detail-action-button.disabled {
  color: var(--text-soft);
  background: #e4e2e4;
  box-shadow: none;
  cursor: not-allowed;
}
.detail-state-note {
  margin: -18px 16px 24px;
  padding: 12px;
  color: var(--text-soft);
  background: #f0edef;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
}

.mobile-dashboard-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-dashboard-page .topbar {
  display: none;
}
.mobile-dashboard-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 2px;
}
.profile-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}
.profile-avatar img,
.profile-avatar > span {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary);
  border: 2px solid var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  object-fit: cover;
}
.profile-avatar i {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  background: var(--success);
  border: 2px solid var(--surface);
  border-radius: 999px;
}
.profile-info {
  min-width: 0;
}
.profile-info h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-info span {
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 2px 8px;
  display: block;
  overflow: hidden;
  color: var(--secondary);
  background: #e4e2e4;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.points-wallet-card,
.promotion-card,
.dashboard-menu {
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.points-wallet-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
}
.wallet-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 128px;
  height: 128px;
  background: rgba(0, 102, 255, .06);
  border-radius: 999px;
  filter: blur(18px);
  pointer-events: none;
}
.wallet-total {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.wallet-label {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.wallet-label .material-symbols-outlined {
  color: var(--primary-strong);
  font-size: 18px;
}
.wallet-total strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--primary-strong);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}
.wallet-divider {
  height: 1px;
  margin-bottom: 20px;
  background: rgba(194, 198, 216, .3);
}
.wallet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.wallet-grid div {
  min-width: 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .2);
  border-radius: 8px;
}
.wallet-grid div:last-child {
  background: #f6f3f5;
}
.wallet-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--secondary);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.wallet-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.wallet-grid div:last-child strong {
  color: var(--secondary);
}
.promotion-card {
  padding: 20px;
}
.promotion-card h3 {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}
.promotion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.promotion-row-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
}
.promotion-row-label .material-symbols-outlined {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  background: #eae7ea;
  border-radius: 999px;
  font-size: 18px;
}
.status-pill {
  flex: 0 0 auto;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  color: var(--text-soft);
  background: #f0edef;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.status-pill i {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  background: currentColor;
  border-radius: 999px;
}
.status-pill.ok {
  color: #006825;
  background: rgba(0, 132, 50, .12);
}
.status-pill.warn {
  color: #92400e;
  background: #fef3c7;
}
.promotion-line {
  height: 1px;
  margin: 16px 0;
  background: rgba(194, 198, 216, .3);
}
.promotion-row strong {
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.promotion-row strong em {
  margin-left: 4px;
  color: var(--secondary);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.promotion-report-button {
  height: 44px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: #eae7ea;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.dashboard-menu {
  overflow: hidden;
}
.dashboard-menu a {
  min-height: 68px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  color: var(--text);
  border-bottom: 1px solid rgba(194, 198, 216, .22);
}
.dashboard-menu a:last-child {
  border-bottom: 0;
}
.dashboard-menu a > .material-symbols-outlined:first-child {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
  font-size: 20px;
}
.dashboard-menu strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}
.dashboard-menu em {
  display: block;
  overflow: hidden;
  color: var(--text-soft);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-menu a > .material-symbols-outlined:last-child {
  color: var(--muted);
  font-size: 20px;
}

.mobile-points-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-points-page .topbar {
  display: none;
}
.mobile-points-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.points-page-title {
  padding: 16px 0 0;
}
.points-page-title h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.points-page-title p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.points-overview-card {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid #eae7ea;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.points-overview-total span,
.points-overview-split span {
  display: block;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.points-overview-total strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
  color: var(--primary);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.points-overview-total em {
  color: var(--primary-strong);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.points-overview-split {
  margin-top: 16px;
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #e4e2e4;
}
.points-overview-split div {
  min-width: 0;
}
.points-overview-split div:first-child {
  padding-right: 16px;
  border-right: 1px solid #e4e2e4;
}
.points-overview-split div:last-child {
  padding-left: 16px;
}
.points-overview-split strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.points-overview-split div:last-child strong {
  color: var(--secondary);
}
.points-rule-box {
  margin-top: 16px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f6f3f5;
  border: 1px solid #e4e2e4;
  border-radius: 8px;
}
.points-rule-box > .material-symbols-outlined {
  margin-top: 2px;
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 20px;
}
.points-rule-box strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.points-rule-box p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 17px;
  font-weight: 500;
}
.points-filter {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.points-select-wrap {
  position: relative;
  min-width: 0;
}
.points-select-wrap select {
  width: 100%;
  height: 44px;
  padding: 0 34px 0 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  appearance: none;
}
.points-select-wrap .material-symbols-outlined {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 20px;
  pointer-events: none;
}
.points-filter button,
.points-filter a {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.points-filter button {
  color: #fff;
  background: var(--primary);
}
.points-filter a {
  color: var(--primary-strong);
  background: var(--primary-soft);
}
.points-transfer-entry {
  margin-top: 16px;
}
.points-transfer-entry a {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.points-transfer-entry a > .material-symbols-outlined:first-child {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
}
.points-transfer-entry div {
  min-width: 0;
  flex: 1 1 auto;
}
.points-transfer-entry strong,
.points-transfer-entry em {
  display: block;
}
.points-transfer-entry strong {
  font-size: 15px;
  line-height: 22px;
}
.points-transfer-entry em {
  color: var(--text-soft);
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
}
.mobile-point-transfer-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-point-transfer-page .topbar {
  display: none;
}
.mobile-point-transfer-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.transfer-balance-card,
.transfer-search-card,
.transfer-recipient-card,
.transfer-submit-card,
.transfer-locked-card,
.transfer-warning-card,
.transfer-history-section {
  margin-top: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.transfer-balance-card span {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.transfer-balance-card strong {
  display: block;
  margin-top: 4px;
  color: var(--primary-strong);
  font-size: 34px;
  line-height: 42px;
  font-weight: 700;
}
.transfer-balance-card strong em {
  margin-left: 4px;
  font-style: normal;
  font-size: 15px;
}
.transfer-balance-card p,
.transfer-locked-card p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.transfer-search-card,
.transfer-submit-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.transfer-search-card label,
.transfer-submit-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.transfer-search-card label span,
.transfer-submit-card label span {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.transfer-search-card input,
.transfer-submit-card input {
  height: 44px;
  padding: 0 12px;
  background: #f6f3f5;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 15px;
}
.transfer-search-card button,
.transfer-submit-card button,
.transfer-locked-card a {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
.transfer-submit-card button:disabled {
  opacity: .5;
}
.transfer-recipient-card {
  display: flex;
  gap: 12px;
}
.transfer-recipient-card.disabled {
  opacity: .7;
}
.transfer-recipient-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  font-weight: 700;
}
.transfer-recipient-card h2,
.transfer-history-section h2,
.transfer-locked-card h1 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}
.transfer-recipient-card p,
.transfer-recipient-card span {
  display: block;
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.transfer-warning-card {
  color: #93000a;
  background: #ffdad6;
  font-size: 14px;
  line-height: 20px;
}
.transfer-locked-card {
  text-align: center;
}
.transfer-locked-card > .material-symbols-outlined {
  color: var(--primary-strong);
  font-size: 36px;
}
.transfer-locked-card a {
  margin-top: 12px;
}
.transfer-history-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.transfer-history-list article {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(194, 198, 216, .3);
}
.transfer-history-list strong,
.transfer-history-list span {
  display: block;
}
.transfer-history-list strong {
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
}
.transfer-history-list span,
.transfer-empty {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.transfer-history-list em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}
.transfer-history-list em.income {
  color: #006825;
}
.transfer-history-list em.expense {
  color: #ba1a1a;
}
.points-log-list {
  margin-top: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid #eae7ea;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.points-log-item {
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e4e2e4;
}
.points-log-item:last-child {
  border-bottom: 0;
}
.points-log-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.points-log-main strong {
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}
.points-log-main time {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
}
.points-log-main span {
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 2px 8px;
  overflow: hidden;
  color: var(--secondary);
  background: #f0edef;
  border-radius: 4px;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.points-log-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.points-log-side strong {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.points-log-side strong.income {
  color: #008432;
}
.points-log-side strong.expense {
  color: #ba1a1a;
}
.points-log-side span {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
}
.points-empty {
  padding: 24px 16px;
  color: var(--text-soft);
  text-align: center;
  font-size: 15px;
  line-height: 22px;
}

.mobile-orders-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-orders-page .topbar {
  display: none;
}
.mobile-orders-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.orders-page-title {
  padding: 16px 0 0;
}
.orders-page-title h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.orders-page-title p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.orders-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.order-card {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.order-card.is-muted {
  opacity: .72;
}
.order-card-head {
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(194, 198, 216, .3);
}
.order-card-head > span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.order-status.pending {
  color: #c2410c;
  background: #ffedd5;
}
.order-status.ok {
  color: #006825;
  background: rgba(0, 132, 50, .12);
}
.order-status.muted {
  color: var(--muted);
  background: #e4e2e4;
}
.order-status.error {
  color: #93000a;
  background: #ffdad6;
}
.order-card-body {
  display: flex;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}
.order-detail-link {
  flex: 0 0 auto;
  color: var(--primary-strong);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: none;
}
.order-product-image {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  background: #eae7ea;
  border-radius: 8px;
}
.order-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-card.is-muted .order-product-image img {
  filter: grayscale(1);
}
.order-product-image .material-symbols-outlined {
  font-size: 32px;
}
.order-product-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-product-info h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-product-info time {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.order-product-info p {
  margin: 4px 0 0;
  color: var(--primary-strong);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.order-product-info p strong {
  font-weight: 700;
}
.order-card-actions {
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(194, 198, 216, .3);
}
.order-card-actions button {
  height: 44px;
  padding: 0 16px;
  color: #93000a;
  background: #ffdad6;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.orders-empty {
  padding: 24px 16px;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  text-align: center;
  font-size: 15px;
  line-height: 22px;
}

.mobile-order-show-page {
  min-height: 100dvh;
  padding: 60px 0 calc(72px + env(safe-area-inset-bottom));
  background: #fcf8fb;
}
.mobile-order-show-page .topbar {
  display: none;
}
.mobile-order-show-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.order-show-status-card {
  margin-top: 16px;
  padding: 24px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.order-show-status-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #006825;
  background: rgba(0, 132, 50, .12);
  border-radius: 999px;
}
.order-show-status-card.pending .order-show-status-icon {
  color: var(--primary-strong);
  background: #f2f7ff;
}
.order-show-status-card.error .order-show-status-icon {
  color: #93000a;
  background: #ffdad6;
}
.order-show-status-card.muted .order-show-status-icon {
  color: var(--muted);
  background: #e4e2e4;
}
.order-show-status-icon .material-symbols-outlined {
  font-size: 34px;
}
.order-show-status-card h1 {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.order-show-status-card p {
  margin: 4px 0 12px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.order-show-card {
  margin-top: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.order-show-card h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(194, 198, 216, .3);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.order-show-product {
  display: flex;
  gap: 14px;
}
.order-show-product-image {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  background: #eae7ea;
  border-radius: 8px;
}
.order-show-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-show-product-image .material-symbols-outlined {
  font-size: 34px;
}
.order-show-product-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.order-show-product-info h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}
.order-show-product-info span {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.order-show-product-info strong {
  color: var(--primary-strong);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}
.order-progress {
  position: relative;
  min-height: 70px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.order-progress-line {
  position: absolute;
  z-index: 0;
  top: 12px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: #e4e2e4;
}
.order-progress-line.active {
  right: 50%;
  background: var(--primary-strong);
}
.order-progress.done .order-progress-line.active {
  right: 12%;
  background: #006825;
}
.order-progress.closed .order-progress-line.active {
  right: 50%;
  background: var(--muted);
}
.order-progress-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  text-align: center;
}
.order-progress-step i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e4e2e4;
  border-radius: 999px;
  font-style: normal;
}
.order-progress-step i .material-symbols-outlined {
  font-size: 15px;
}
.order-progress-step.active {
  color: var(--primary-strong);
  font-weight: 700;
}
.order-progress.done .order-progress-step.active {
  color: #006825;
}
.order-progress-step.active i {
  color: #fff;
  background: var(--primary-strong);
}
.order-progress.done .order-progress-step.active i {
  background: #006825;
}
.order-progress-step.current i::after {
  width: 8px;
  height: 8px;
  content: "";
  background: #fff;
  border-radius: 999px;
}
.order-progress-step.closed {
  color: #93000a;
}
.order-progress-step.closed i {
  color: #fff;
  background: #ba1a1a;
}
.order-progress-step span {
  font-size: 11px;
  line-height: 16px;
}
.order-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.order-info-list div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.order-info-list span {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.order-info-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  text-align: right;
}
.order-info-list strong.state.pending {
  color: #c2410c;
}
.order-info-list strong.state.ok {
  color: #006825;
}
.order-info-list strong.state.error {
  color: #93000a;
}
.order-info-list strong.state.muted {
  color: var(--muted);
}
.order-show-actions {
  position: sticky;
  bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 20;
  margin: 16px -16px 0;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: rgba(252, 248, 251, .96);
  border-top: 1px solid rgba(194, 198, 216, .3);
  backdrop-filter: blur(12px);
}
.order-show-actions form {
  min-width: 0;
}
.order-show-actions a,
.order-show-actions button {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
.order-show-actions .primary {
  color: #fff;
  background: var(--primary);
}
.order-show-actions .secondary {
  color: var(--primary-strong);
  background: #f2f7ff;
}
.order-show-actions .cancel {
  color: #93000a;
  background: #ffdad6;
}
.order-show-actions form + .secondary + .primary,
.order-show-actions form ~ .primary {
  grid-column: auto;
}
@media (max-width: 360px) {
  .order-show-actions {
    grid-template-columns: 1fr;
  }
}

.mobile-promotion-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-promotion-page .topbar {
  display: none;
}
.mobile-promotion-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.promotion-locked {
  min-height: calc(100dvh - 132px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.promotion-locked-icon {
  width: 128px;
  height: 128px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  background: #dee3eb;
  border-radius: 999px;
}
.promotion-locked-icon .material-symbols-outlined {
  font-size: 64px;
}
.promotion-locked h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.promotion-locked > p {
  max-width: 320px;
  margin: 0 0 24px;
  color: var(--secondary);
  font-size: 15px;
  line-height: 22px;
}
.promotion-activate-card,
.promotion-tools-card,
.promotion-child-list {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.promotion-activate-card {
  width: 100%;
  max-width: 400px;
  margin-bottom: 24px;
  padding: 16px;
  text-align: left;
}
.promotion-activate-card h2 {
  margin: 0 0 12px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.promotion-condition {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.promotion-condition > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--primary);
  font-size: 22px;
}
.promotion-condition strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}
.promotion-condition p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 17px;
}
.promotion-primary-button {
  width: 100%;
  max-width: 400px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.promotion-active-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.promotion-active-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.promotion-active-head p {
  margin: 4px 0 0;
  color: var(--secondary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.promotion-active-head > span {
  flex: 0 0 auto;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #008432;
  background: rgba(0, 132, 50, .1);
  border: 1px solid rgba(0, 132, 50, .2);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.promotion-active-head .material-symbols-outlined {
  font-size: 14px;
}
.promotion-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.promotion-main-stat {
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
  padding: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 102, 255, .15);
}
.promotion-main-stat::after {
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 128px;
  height: 128px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  filter: blur(14px);
}
.promotion-main-stat span,
.promotion-mini-stat span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  opacity: .9;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.promotion-main-stat .material-symbols-outlined,
.promotion-mini-stat .material-symbols-outlined {
  font-size: 18px;
}
.promotion-main-stat strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
}
.promotion-mini-stat {
  height: 100px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid #e4e2e4;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.promotion-mini-stat span {
  color: var(--secondary);
  font-size: 11px;
  line-height: 16px;
}
.promotion-mini-stat strong {
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.promotion-mini-stat em {
  margin-left: 4px;
  color: var(--secondary);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}
.promotion-tools-card {
  padding: 16px;
  margin-bottom: 24px;
}
.promotion-tools-card h2 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.promotion-tools-card h2 .material-symbols-outlined {
  color: var(--primary-strong);
  font-size: 20px;
}
.promotion-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px;
}
.promotion-link-box {
  height: 44px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  background: #f6f3f5;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.promotion-link-box > .material-symbols-outlined {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  border-right: 1px solid var(--line-strong);
  font-size: 18px;
}
.promotion-link-box input {
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: 15px;
  line-height: 22px;
}
.promotion-copy-button {
  height: 44px;
  padding: 0 12px;
  color: #fff;
  background: var(--primary-strong);
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.promotion-tool-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.promotion-qr-card,
.promotion-tool-actions > a {
  min-height: 120px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  background: rgba(222, 227, 235, .5);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}
.promotion-qr-card img {
  width: 82px;
  height: 82px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid #e4e2e4;
  border-radius: 8px;
}
.promotion-save-qr {
  min-height: 0;
  padding: 6px 10px;
  color: var(--text);
  background: rgba(222, 227, 235, .75);
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-decoration: none;
}
.promotion-tool-actions > a .material-symbols-outlined {
  color: var(--primary-strong);
  font-size: 32px;
}
.promotion-tools-card > p {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 17px;
}
.promotion-section-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.promotion-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.promotion-section-head span {
  flex: 0 0 auto;
  padding: 2px 8px;
  color: var(--secondary);
  background: #e4e2e4;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.promotion-child-list {
  overflow: hidden;
  margin-bottom: 24px;
}
.promotion-child-item {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e4e2e4;
}
.promotion-child-item:last-child {
  border-bottom: 0;
}
.promotion-child-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001849;
  background: #dae1ff;
  border-radius: 999px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.promotion-child-info {
  min-width: 0;
}
.promotion-child-info strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promotion-child-info span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--secondary);
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promotion-child-meta {
  min-width: 86px;
  text-align: right;
}
.promotion-child-meta strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.promotion-child-meta span {
  display: block;
  margin-top: 2px;
  color: var(--secondary);
  font-size: 11px;
  line-height: 16px;
}
.promotion-empty {
  padding: 24px 16px;
  color: var(--text-soft);
  text-align: center;
  font-size: 15px;
  line-height: 22px;
}

.mobile-downline-orders-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #f6f3f5;
}
.mobile-downline-orders-page .topbar {
  display: none;
}
.mobile-downline-orders-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.downline-filter-tabs {
  margin: 0 -16px 16px;
  padding: 0 16px 2px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.downline-filter-tabs::-webkit-scrollbar {
  display: none;
}
.downline-filter-tabs span {
  flex: 0 0 auto;
  padding: 8px 16px;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.downline-filter-tabs span.active {
  color: #fff;
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}
.downline-order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.downline-order-card,
.downline-empty {
  background: var(--surface);
  border: 1px solid #e4e2e4;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.downline-order-card {
  overflow: hidden;
}
.downline-user-head {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f6f3f5;
  border-bottom: 1px solid #e4e2e4;
}
.downline-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.downline-user > span {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8f7ff;
  background: var(--primary);
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.downline-user div {
  min-width: 0;
}
.downline-user strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.downline-user em {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-soft);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.downline-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.downline-status.pending {
  color: #006825;
  background: rgba(0, 132, 50, .1);
}
.downline-status.ok {
  color: var(--primary-strong);
  background: rgba(0, 102, 255, .1);
}
.downline-status.muted {
  color: var(--text-soft);
  background: #e4e2e4;
}
.downline-status.error {
  color: #93000a;
  background: #ffdad6;
}
.downline-order-fields {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.downline-order-fields div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.downline-order-fields div:last-child {
  padding-top: 8px;
  border-top: 1px dashed #e4e2e4;
}
.downline-order-fields span {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.downline-order-fields strong {
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  text-align: right;
  overflow-wrap: anywhere;
}
.downline-order-fields strong.points {
  color: var(--primary-strong);
  font-weight: 500;
}
.downline-empty {
  padding: 24px 16px;
  color: var(--text-soft);
  text-align: center;
  font-size: 15px;
  line-height: 22px;
}

.mobile-admin-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-admin-page .topbar,
.mobile-admin-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-appbar .avatar-button .material-symbols-outlined {
  color: var(--text-soft);
}
.admin-appbar .icon-button,
.admin-appbar .avatar-button {
  flex: 0 0 44px;
}
.admin-appbar .appbar-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-mobile-nav {
  margin: 10px -16px 16px;
  width: calc(100% + 32px);
  max-width: none;
  padding: 0 56px 2px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 16px;
  scrollbar-width: none;
}
.admin-mobile-nav::-webkit-scrollbar {
  display: none;
}
.admin-mobile-nav a {
  min-height: 40px;
  padding: 7px 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .5);
  border-radius: 999px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
}
.admin-mobile-nav a.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
body[class^="mobile-admin-"] .admin-mobile-nav,
body[class*=" mobile-admin-"] .admin-mobile-nav {
  position: relative;
  z-index: 10;
}
body[class^="mobile-admin-"],
body[class*=" mobile-admin-"] {
  padding-top: 0 !important;
}
body[class^="mobile-admin-"] .mobile-appbar,
body[class*=" mobile-admin-"] .mobile-appbar {
  position: sticky;
  top: 0;
}
.admin-welcome {
  margin-bottom: 16px;
}
.admin-welcome h1 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.admin-welcome p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 22px;
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-stat-card,
.admin-business-grid article,
.admin-business-grid a,
.admin-hot-list {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.admin-stat-card {
  min-width: 0;
  padding: 12px;
}
.admin-stat-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-soft);
}
.admin-stat-card div span:first-child {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-stat-card .material-symbols-outlined {
  font-size: 18px;
}
.admin-stat-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.admin-stat-card em {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: #006825;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.admin-points-panel {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 16px;
  color: #f8f7ff;
  background: var(--primary);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.admin-points-panel::after {
  content: "";
  position: absolute;
  top: -36px;
  right: -32px;
  width: 128px;
  height: 128px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  filter: blur(16px);
}
.admin-points-panel > div:first-child {
  position: relative;
  z-index: 1;
}
.admin-points-panel > div:first-child span {
  display: block;
  opacity: .82;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-points-panel > div:first-child strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.admin-points-panel em {
  opacity: .82;
  font-style: normal;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}
.admin-points-split {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  border-top: 1px solid rgba(248, 247, 255, .24);
}
.admin-points-split span {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: .82;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.admin-points-split .material-symbols-outlined {
  font-size: 14px;
}
.admin-points-split strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}
.admin-business-section {
  margin-bottom: 24px;
}
.admin-business-section h2 {
  margin: 0 0 8px 4px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.admin-business-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-business-grid article,
.admin-business-grid a {
  min-width: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.admin-business-grid article > span,
.admin-business-grid a > span {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f656c;
  background: #dee3eb;
  border-radius: 999px;
}
.admin-business-grid .material-symbols-outlined {
  font-size: 20px;
}
.admin-business-grid div {
  min-width: 0;
}
.admin-business-grid em {
  display: block;
  overflow: hidden;
  color: var(--text-soft);
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-business-grid strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.admin-hot-list {
  overflow: hidden;
  margin-bottom: 24px;
}
.admin-section-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(194, 198, 216, .3);
}
.admin-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.admin-section-head a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--primary-strong);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.admin-section-head .material-symbols-outlined {
  font-size: 16px;
}
.admin-hot-item {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 24px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(194, 198, 216, .3);
}
.admin-hot-item:last-child {
  border-bottom: 0;
}
.admin-hot-item .rank {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
}
.hot-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border: 1px solid rgba(194, 198, 216, .2);
  border-radius: 8px;
}
.hot-info {
  min-width: 0;
}
.hot-info strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hot-info span,
.hot-count span {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
}
.hot-count {
  text-align: right;
}
.hot-count strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-empty {
  padding: 24px 16px;
  color: var(--text-soft);
  text-align: center;
  font-size: 15px;
  line-height: 22px;
}

.mobile-admin-users-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #f6f3f5;
}
.mobile-admin-users-page .topbar,
.mobile-admin-users-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-users-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-users-head {
  margin-bottom: 12px;
}
.admin-users-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.admin-users-head p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.admin-user-filter {
  margin: 0 -16px 16px;
  padding: 12px 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.admin-user-search {
  position: relative;
  margin-bottom: 12px;
}
.admin-user-search .material-symbols-outlined {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--text-soft);
  font-size: 20px;
  pointer-events: none;
}
.admin-user-search input {
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 40px;
  color: var(--text);
  background: #f6f3f5;
  border: 1px solid rgba(194, 198, 216, .5);
  border-radius: 8px;
  font-size: 15px;
  line-height: 22px;
}
.admin-user-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-user-selects label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-user-selects label span {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-user-selects select {
  height: 38px;
  padding: 0 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .5);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
}
.admin-user-filter-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-user-filter-actions button,
.admin-user-filter-actions a {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-user-filter-actions button {
  color: #fff;
  background: var(--primary);
}
.admin-user-filter-actions a {
  color: var(--primary-strong);
  background: var(--primary-soft);
}
.admin-user-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}
.admin-user-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .2);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.admin-user-card.disabled {
  opacity: .78;
}
.admin-user-card-head {
  padding: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(194, 198, 216, .14);
}
.admin-user-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-user-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: rgba(0, 102, 255, .12);
  border-radius: 999px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.admin-user-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-user-name h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-name span,
.admin-user-promo {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
}
.admin-user-name span.ok {
  color: #006825;
  background: rgba(0, 132, 50, .1);
}
.admin-user-name span.off {
  color: #93000a;
  background: #ffdad6;
}
.admin-user-identity p {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
}
.admin-user-promo {
  margin-top: 2px;
  border-radius: 999px;
}
.admin-user-promo.ok {
  color: var(--primary-strong);
  background: rgba(0, 102, 255, .1);
}
.admin-user-promo.warn {
  color: #92400e;
  background: #fef3c7;
}
.admin-user-data {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.admin-user-data div {
  min-width: 0;
}
.admin-user-data span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.admin-user-data strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-data strong.points {
  color: var(--primary-strong);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.admin-user-data em {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-style: normal;
  font-size: 10px;
  line-height: 14px;
}
.admin-user-activated {
  margin: 0 12px 12px;
  padding: 8px;
  color: var(--text-soft);
  background: #f6f3f5;
  border-radius: 8px;
  font-size: 11px;
  line-height: 16px;
}
.admin-user-actions {
  padding: 12px;
  background: #f6f3f5;
  border-top: 1px solid rgba(194, 198, 216, .14);
}
.admin-user-actions > a {
  height: 36px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .5);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-user-actions form {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, .9fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.admin-user-actions input,
.admin-user-actions select {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .5);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
}
.admin-user-actions button {
  height: 36px;
  padding: 0 12px;
  color: #fff;
  background: var(--primary);
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.mobile-admin-user-show-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-admin-user-show-page .topbar,
.mobile-admin-user-show-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-user-show-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-detail-profile,
.admin-detail-promotion,
.admin-detail-section .admin-detail-list {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.admin-detail-profile {
  padding: 12px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.admin-detail-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border: 2px solid var(--surface-soft);
  border-radius: 999px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.admin-detail-profile-main {
  min-width: 0;
  flex: 1;
}
.admin-detail-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-detail-name-row h1 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-detail-name-row span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.admin-detail-name-row span.ok {
  color: #006825;
  background: rgba(0, 132, 50, .1);
}
.admin-detail-name-row span.off {
  color: #93000a;
  background: #ffdad6;
}
.admin-detail-meta {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
}
.admin-detail-meta span:last-child {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
}
.admin-detail-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-detail-tags span {
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  background: #f0edef;
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.admin-detail-tags span.ok {
  color: var(--primary-strong);
  background: rgba(0, 102, 255, .1);
  border-color: rgba(0, 102, 255, .2);
}
.admin-detail-tags span.warn {
  color: #92400e;
  background: #fef3c7;
}
.admin-detail-tags .material-symbols-outlined {
  font-size: 14px;
}
.admin-detail-assets,
.admin-detail-promotion,
.admin-detail-security,
.admin-detail-actions,
.admin-detail-section {
  margin-bottom: 16px;
}
.admin-detail-assets h2,
.admin-detail-security h2,
.admin-detail-actions h2,
.admin-detail-section h2 {
  margin: 0 0 8px 4px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.asset-main-card {
  padding: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 102, 255, .2);
}
.asset-main-card span,
.asset-grid article span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.asset-main-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.asset-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.asset-grid article {
  min-width: 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.asset-grid article span {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
}
.asset-grid .material-symbols-outlined {
  font-size: 14px;
}
.asset-grid strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.asset-grid strong.income {
  color: #006825;
}
.asset-grid strong.expense {
  color: #ba1a1a;
}
.admin-detail-promotion {
  padding: 16px;
}
.admin-detail-promotion h2 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-detail-promotion h2 .material-symbols-outlined {
  font-size: 18px;
}
.admin-detail-promotion > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.admin-detail-promotion article {
  flex: 1;
  text-align: center;
}
.admin-detail-promotion article + article {
  border-left: 1px solid rgba(194, 198, 216, .3);
}
.admin-detail-promotion strong {
  display: block;
  color: var(--primary-strong);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.admin-detail-promotion span {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
}
.admin-security-card,
.temporary-password-card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .3);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.temporary-password-card {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-color: rgba(0, 102, 255, .22);
  background: rgba(0, 102, 255, .06);
}
.temporary-password-card span,
.admin-security-card p,
.admin-security-card em {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 18px;
}
.temporary-password-card strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}
.temporary-password-card p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 18px;
}
.temporary-password-card button,
.admin-security-card button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  border: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}
.temporary-password-card button {
  padding: 0 12px;
  color: #fff;
  background: var(--primary);
}
.admin-security-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.admin-security-card strong {
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 800;
}
.admin-security-card p {
  margin: 4px 0 0;
}
.admin-security-card em {
  display: block;
  margin-top: 4px;
  color: #92400e;
  font-style: normal;
}
.admin-security-card form {
  margin: 0;
}
.admin-security-card button {
  padding: 0 12px;
  color: #93000a;
  background: rgba(255, 218, 214, .45);
  border: 1px solid rgba(186, 26, 26, .3);
  white-space: nowrap;
}
.temporary-password-card .material-symbols-outlined,
.admin-security-card .material-symbols-outlined {
  font-size: 18px;
}
@media (max-width: 420px) {
  .temporary-password-card,
  .admin-security-card {
    grid-template-columns: 1fr;
  }
  .temporary-password-card button,
  .admin-security-card button {
    width: 100%;
  }
}
.admin-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-detail-actions h2 {
  grid-column: 1 / -1;
  margin-bottom: -4px;
}
.admin-detail-actions form {
  min-width: 0;
}
.admin-detail-actions button {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.admin-detail-actions button.primary {
  color: #fff;
  background: var(--primary);
}
.admin-detail-actions button.secondary {
  color: var(--text);
  background: #eae7ea;
  border: 1px solid rgba(194, 198, 216, .5);
}
.admin-detail-actions button.danger {
  color: #93000a;
  background: rgba(255, 218, 214, .45);
  border: 1px solid rgba(186, 26, 26, .3);
}
.admin-detail-actions .material-symbols-outlined {
  font-size: 18px;
}
.admin-detail-point-actions {
  grid-template-columns: 1fr;
}
.admin-detail-point-actions form {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 1px solid rgba(194, 198, 216, .45);
  border-radius: 8px;
  background: #fbfbff;
}
.admin-detail-point-actions label {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.admin-detail-point-actions label span {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 16px;
}
.admin-detail-point-actions input,
.admin-detail-point-actions select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(122, 116, 126, .35);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
}
.admin-detail-point-actions button {
  grid-column: 1 / -1;
}
.admin-detail-list {
  overflow: hidden;
}
.admin-detail-row {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(194, 198, 216, .3);
}
.admin-detail-row:last-child {
  border-bottom: 0;
}
.admin-detail-row > div:first-child {
  min-width: 0;
}
.admin-detail-row strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}
.admin-detail-row span,
.admin-detail-row em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
}
.admin-detail-row a {
  color: var(--primary-strong);
}
.admin-detail-row .right {
  flex: 0 0 auto;
  text-align: right;
}
.admin-detail-row .right strong.income {
  color: #006825;
}
.admin-detail-row .right strong.expense {
  color: #ba1a1a;
}
.admin-detail-row.compact {
  align-items: center;
}
.admin-detail-empty {
  padding: 20px 12px;
  color: var(--text-soft);
  text-align: center;
  font-size: 13px;
  line-height: 18px;
}
.mobile-admin-point-logs-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #f1f5f9;
}
.mobile-admin-point-logs-page .topbar,
.mobile-admin-point-logs-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-point-logs-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-points-head {
  margin: 0 0 14px;
  padding: 16px;
  color: #0f172a;
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.admin-points-head > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 12px;
  align-items: center;
}
.admin-points-head .material-symbols-outlined {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 12px;
}
.admin-points-head h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}
.admin-points-head p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
.admin-points-filter,
.admin-points-batch {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.admin-points-search {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
.admin-points-search .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 20px;
}
.admin-points-search input,
.admin-points-filter select,
.admin-points-batch input,
.admin-points-batch select {
  width: 100%;
  min-height: 42px;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
}
.admin-points-search input {
  padding: 0 12px 0 40px;
}
.admin-points-filter select,
.admin-points-batch input,
.admin-points-batch select {
  padding: 0 12px;
}
.admin-points-search input:focus,
.admin-points-filter select:focus,
.admin-points-batch input:focus,
.admin-points-batch select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}
.admin-points-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-points-selects label,
.admin-points-batch label {
  display: grid;
  gap: 6px;
}
.admin-points-selects span,
.admin-points-batch label > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}
.admin-points-filter-actions {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
  margin-top: 12px;
}
.admin-points-filter-actions button,
.admin-points-filter-actions a,
.admin-points-batch button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.admin-points-filter-actions button,
.admin-points-batch button {
  color: #fff;
  background: #0ea5e9;
}
.admin-points-filter-actions a {
  color: #475569;
  background: #f1f5f9;
}
.admin-points-batch-title {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.admin-points-batch-title > .material-symbols-outlined {
  color: #ef4444;
  font-size: 22px;
}
.admin-points-batch-title h2,
.admin-points-list h2 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0;
}
.admin-points-batch-title p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}
.admin-points-batch form {
  display: grid;
  gap: 12px;
}
.admin-points-batch .batch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-points-batch button {
  width: 100%;
  margin-top: 2px;
}
.admin-points-batch button .material-symbols-outlined {
  font-size: 18px;
}
.admin-points-list {
  display: grid;
  gap: 10px;
}
.admin-points-list h2 {
  padding: 0 2px 2px;
  color: #64748b;
  font-size: 13px;
}
.admin-point-log-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.point-log-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.point-log-main h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 750;
  letter-spacing: 0;
}
.point-log-main p,
.point-log-main span,
.point-log-change span,
.point-log-foot {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}
.point-log-main p {
  margin: 2px 0 0;
}
.point-log-change {
  flex: 0 0 auto;
  min-width: 88px;
  text-align: right;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}
.point-log-change.income {
  color: #16a34a;
}
.point-log-change.expense {
  color: #ef4444;
}
.point-log-change span {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.point-log-balance {
  min-height: 36px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 10px;
  font-size: 12px;
}
.point-log-balance .material-symbols-outlined {
  color: #94a3b8;
  font-size: 17px;
}
.point-log-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.point-log-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.point-log-foot .material-symbols-outlined {
  font-size: 15px;
}
.point-log-foot em {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-style: normal;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 374px) {
  .admin-points-selects,
  .admin-points-batch .batch-grid {
    grid-template-columns: 1fr;
  }
  .point-log-main {
    align-items: stretch;
  }
  .point-log-change {
    min-width: 72px;
  }
}
.mobile-admin-categories-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #f5f5f7;
}
.mobile-admin-categories-page .topbar,
.mobile-admin-categories-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-categories-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-category-head,
.admin-category-create,
.admin-category-card {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .38);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.admin-category-head {
  margin-bottom: 16px;
  padding: 16px;
}
.admin-category-head > div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px 12px;
  align-items: center;
}
.admin-category-head .material-symbols-outlined {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 12px;
}
.admin-category-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0;
}
.admin-category-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.admin-category-create {
  margin-bottom: 18px;
  padding: 16px;
}
.admin-category-create h2,
.admin-category-list h2 {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 650;
  letter-spacing: 0;
}
.admin-category-create h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(194, 198, 216, .35);
}
.admin-category-create h2 .material-symbols-outlined,
.admin-category-list h2 .material-symbols-outlined {
  color: var(--primary);
}
.admin-category-create form,
.category-edit-form {
  display: grid;
  gap: 14px;
}
.admin-category-create label,
.category-edit-form label {
  display: grid;
  gap: 6px;
}
.admin-category-create label > span,
.category-edit-form label > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.admin-category-create input,
.admin-category-create select,
.category-edit-form input,
.category-edit-form select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .8);
  border-radius: 10px;
  outline: none;
  font-size: 15px;
}
.admin-category-create input:focus,
.admin-category-create select:focus,
.category-edit-form input:focus,
.category-edit-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
.category-icon-input {
  position: relative;
}
.category-icon-input > .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
}
.category-icon-input input {
  padding-left: 42px;
}
.category-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-category-create button,
.category-edit-form button,
.category-delete-form button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}
.admin-category-create button,
.category-edit-form button {
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
}
.admin-category-create button .material-symbols-outlined,
.category-edit-form button .material-symbols-outlined,
.category-delete-form button .material-symbols-outlined {
  font-size: 18px;
}
.admin-category-list {
  display: grid;
  gap: 14px;
}
.admin-category-list h2 {
  margin: 0;
  padding: 0 2px;
}
.admin-category-card {
  padding: 12px;
  display: grid;
  gap: 12px;
}
.admin-category-card.disabled {
  opacity: .82;
}
.category-card-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.category-card-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.category-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 12px;
}
.admin-category-card.disabled .category-icon {
  color: var(--muted);
  background: var(--surface-soft);
}
.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-icon .material-symbols-outlined {
  font-size: 28px;
}
.category-card-main h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 24px;
  font-weight: 650;
  letter-spacing: 0;
}
.category-card-main p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.category-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
}
.category-status i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.category-status.ok {
  color: #006825;
  background: #e6ffe1;
  border: 1px solid rgba(0, 132, 50, .22);
}
.category-status.ok i {
  background: #008432;
}
.category-status.off {
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .5);
}
.category-status.off i {
  background: var(--muted);
}
.category-edit-form {
  padding-top: 12px;
  border-top: 1px solid rgba(194, 198, 216, .35);
}
.category-delete-form {
  margin: 0;
}
.category-delete-form button {
  width: 100%;
  color: #ba1a1a;
  background: rgba(255, 218, 214, .36);
  border: 1px solid rgba(186, 26, 26, .28);
}

@media (max-width: 374px) {
  .category-form-grid {
    grid-template-columns: 1fr;
  }
  .category-card-summary {
    align-items: stretch;
  }
  .category-status {
    align-self: flex-start;
  }
}
.mobile-admin-products-page {
  min-height: 100dvh;
  padding: 60px 0 72px;
  background: #fcf8fb;
}
.mobile-admin-products-page .topbar,
.mobile-admin-products-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-products-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-products-head {
  margin: 0 0 12px;
}
.admin-products-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0;
}
.admin-products-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.admin-products-filter,
.admin-product-create,
.admin-product-card {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .36);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.admin-products-filter {
  margin-bottom: 16px;
  padding: 12px;
  display: grid;
  gap: 12px;
}
.admin-products-search {
  position: relative;
  display: block;
}
.admin-products-search .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
}
.admin-products-search input,
.admin-products-filter select,
.admin-product-create input,
.admin-product-create select,
.admin-product-create textarea {
  width: 100%;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .7);
  border-radius: 10px;
  outline: none;
  font-size: 15px;
}
.admin-products-search input,
.admin-products-filter select,
.admin-product-create input,
.admin-product-create select {
  min-height: 44px;
  padding: 0 12px;
}
.admin-products-search input {
  padding-left: 40px;
}
.admin-product-create textarea {
  min-height: 82px;
  padding: 10px 12px;
  resize: vertical;
}
.admin-products-search input:focus,
.admin-products-filter select:focus,
.admin-product-create input:focus,
.admin-product-create select:focus,
.admin-product-create textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
.admin-products-selects,
.admin-products-filter-actions,
.admin-product-form-grid {
  display: grid;
  gap: 10px;
}
.admin-products-selects {
  grid-template-columns: 1fr 1fr;
}
.admin-products-filter-actions {
  grid-template-columns: 1fr 92px;
}
.admin-products-filter-actions button,
.admin-products-filter-actions a,
.admin-product-create button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.admin-products-filter-actions button,
.admin-product-create button {
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
}
.admin-products-filter-actions a {
  color: var(--muted);
  background: var(--surface-soft);
}
.admin-product-create {
  margin-bottom: 18px;
  overflow: hidden;
}
.admin-product-create-title {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(246, 243, 245, .75);
  border-bottom: 1px solid rgba(194, 198, 216, .28);
}
.admin-product-create-title > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-product-create-title .material-symbols-outlined {
  color: var(--primary);
}
.admin-product-create-title h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 750;
  letter-spacing: 0;
}
.admin-product-create-title > span {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
.admin-product-create form {
  padding: 14px;
  display: grid;
  gap: 14px;
}
.admin-product-create label {
  display: grid;
  gap: 6px;
}
.admin-product-create label > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.admin-product-form-grid {
  grid-template-columns: 1fr 1fr;
}
.admin-product-create button .material-symbols-outlined {
  font-size: 18px;
}
.admin-products-list {
  display: grid;
  gap: 12px;
}
.admin-products-count {
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.admin-product-card {
  padding: 12px;
  display: grid;
  gap: 12px;
}
.admin-product-main {
  display: flex;
  gap: 12px;
}
.admin-product-image {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(114, 118, 135, .75);
  background: var(--surface-soft);
  border-radius: 10px;
}
.admin-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-product-image .material-symbols-outlined {
  font-size: 32px;
}
.admin-product-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
}
.admin-product-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.admin-product-title h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 650;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-product-card.draft .admin-product-title h2 {
  color: rgba(66, 70, 86, .85);
}
.admin-product-info p {
  margin: 4px 0 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.product-status.published {
  color: #006825;
  background: rgba(0, 132, 50, .1);
}
.product-status.offline {
  color: var(--muted);
  background: #dee3eb;
}
.product-status.draft {
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .45);
}
.admin-product-metrics {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.admin-product-metrics .price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 800;
}
.admin-product-metrics .material-symbols-outlined {
  font-size: 16px;
}
.admin-product-card-foot {
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(194, 198, 216, .28);
}
.admin-product-card-foot > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
}
.admin-product-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.admin-product-actions form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-product-actions select {
  width: 64px;
  min-height: 32px;
  padding: 0 6px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .65);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.admin-product-actions button,
.admin-product-actions a {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.admin-product-actions .danger {
  color: #ba1a1a;
  background: transparent;
  border: 1px solid rgba(186, 26, 26, .42);
}
.admin-product-actions .secondary {
  color: var(--text);
  background: #dee3eb;
  border: 0;
}
.admin-product-actions .primary {
  color: var(--on-primary);
  background: var(--primary);
}
.admin-product-fab {
  position: fixed;
  right: 16px;
  bottom: 82px;
  z-index: 35;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  text-decoration: none;
}
.admin-product-fab .material-symbols-outlined {
  font-size: 28px;
}

.mobile-admin-product-edit-page {
  min-height: 100dvh;
  padding: 60px 0 76px;
  background: #fcf8fb;
}
.mobile-admin-product-edit-page .topbar,
.mobile-admin-product-edit-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-product-edit-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-product-edit-hero,
.edit-form-section {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .36);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.admin-product-edit-hero {
  margin-bottom: 16px;
  padding: 12px;
  display: flex;
  gap: 12px;
}
.edit-product-preview {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(114, 118, 135, .75);
  background: var(--surface-soft);
  border-radius: 12px;
}
.edit-product-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edit-product-preview .material-symbols-outlined {
  font-size: 36px;
}
.edit-product-summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.edit-product-summary h1 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 750;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-product-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}
.edit-product-summary .product-status {
  align-self: flex-start;
}
.admin-product-edit-form {
  display: grid;
  gap: 14px;
}
.edit-form-section {
  padding: 14px;
  display: grid;
  gap: 14px;
}
.edit-form-section h2 {
  margin: 0;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  border-bottom: 1px solid rgba(194, 198, 216, .28);
  font-size: 16px;
  line-height: 22px;
  font-weight: 750;
  letter-spacing: 0;
}
.edit-form-section h2 .material-symbols-outlined {
  color: var(--primary);
  font-size: 20px;
}
.edit-form-section label {
  display: grid;
  gap: 6px;
}
.edit-form-section label > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}
.edit-form-section input,
.edit-form-section select,
.edit-form-section textarea {
  width: 100%;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .7);
  border-radius: 10px;
  outline: none;
  font-size: 15px;
}
.edit-form-section input,
.edit-form-section select {
  min-height: 44px;
  padding: 0 12px;
}
.edit-form-section textarea {
  min-height: 148px;
  padding: 10px 12px;
  resize: vertical;
}
.edit-product-image-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.edit-image-manager {
  display: grid;
  gap: 10px;
}
.edit-image-manager-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.edit-image-manager-title strong {
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 750;
}
.edit-image-manager-title span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  text-align: right;
}
.edit-product-image-choice {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 6px;
  cursor: pointer;
}
.edit-product-image-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.edit-image-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  background: var(--surface-soft);
  border: 2px solid var(--primary);
  border-radius: 10px;
}
.edit-image-thumb img,
.edit-product-image-grid > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.edit-product-image-grid > img {
  border: 1px solid rgba(194, 198, 216, .45);
  border-radius: 8px;
  background: var(--surface-soft);
}
.edit-product-image-choice input:not(:checked) + .edit-image-thumb {
  border-color: rgba(194, 198, 216, .5);
}
.edit-product-image-choice input:not(:checked) + .edit-image-thumb img {
  filter: grayscale(1);
  opacity: .36;
}
.edit-product-image-choice input:not(:checked) + .edit-image-thumb::after {
  content: "删除";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ba1a1a;
  background: rgba(255, 251, 255, .72);
  font-size: 13px;
  font-weight: 750;
}
.edit-image-state {
  min-height: 26px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--primary);
  background: rgba(0, 102, 255, .08);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.edit-image-state .material-symbols-outlined {
  font-size: 14px;
}
.edit-product-image-choice input:not(:checked) ~ .edit-image-state {
  color: #ba1a1a;
  background: rgba(186, 26, 26, .08);
}
.edit-product-image-choice input:not(:checked) ~ .edit-image-state .material-symbols-outlined {
  font-size: 0;
}
.edit-product-image-choice input:not(:checked) ~ .edit-image-state .material-symbols-outlined::before {
  content: "cancel";
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
}
.edit-product-image-empty {
  min-height: 96px;
  padding: 12px;
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 6px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px dashed rgba(194, 198, 216, .75);
  border-radius: 10px;
  text-align: center;
}
.edit-product-image-empty .material-symbols-outlined {
  color: var(--primary);
  font-size: 28px;
}
.edit-product-image-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}
.edit-form-section input:focus,
.edit-form-section select:focus,
.edit-form-section textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
.edit-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-product-edit-actions {
  position: sticky;
  bottom: 72px;
  z-index: 20;
  margin-top: 2px;
  padding: 10px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  background: rgba(252, 248, 251, .92);
  border: 1px solid rgba(194, 198, 216, .36);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  backdrop-filter: blur(10px);
}
.admin-product-edit-actions a,
.admin-product-edit-actions button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.admin-product-edit-actions a {
  color: var(--muted);
  background: var(--surface-soft);
}
.admin-product-edit-actions button {
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
}
.admin-product-edit-actions .material-symbols-outlined {
  font-size: 18px;
}

.mobile-admin-orders-page {
  min-height: 100dvh;
  padding: 60px 0 76px;
  background: #fcf8fb;
}
.mobile-admin-orders-page .topbar,
.mobile-admin-orders-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-orders-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-orders-head {
  margin-bottom: 12px;
}
.admin-orders-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 750;
  letter-spacing: 0;
}
.admin-orders-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}
.admin-orders-filter,
.admin-order-card {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .36);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.admin-orders-filter {
  margin-bottom: 16px;
  padding: 12px;
  display: grid;
  gap: 12px;
}
.admin-orders-search {
  position: relative;
  display: block;
}
.admin-orders-search .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
}
.admin-orders-search input,
.admin-orders-filter input,
.admin-orders-filter select,
.admin-order-process input,
.admin-order-process select {
  width: 100%;
  min-height: 44px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .68);
  border-radius: 10px;
  outline: none;
  font-size: 14px;
}
.admin-orders-search input {
  padding: 0 12px 0 40px;
}
.admin-orders-filter input,
.admin-orders-filter select,
.admin-order-process input,
.admin-order-process select {
  padding: 0 12px;
}
.admin-orders-search input:focus,
.admin-orders-filter input:focus,
.admin-orders-filter select:focus,
.admin-order-process input:focus,
.admin-order-process select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
.admin-orders-date-grid,
.admin-orders-filter-actions,
.admin-order-process-grid {
  display: grid;
  gap: 10px;
}
.admin-orders-date-grid,
.admin-order-process-grid {
  grid-template-columns: 1fr 1fr;
}
.admin-orders-date-grid label,
.admin-orders-status-filter {
  display: grid;
  gap: 6px;
}
.admin-orders-date-grid label > span,
.admin-orders-status-filter > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}
.admin-orders-filter-actions {
  grid-template-columns: 1fr 92px;
}
.admin-orders-filter-actions button,
.admin-orders-filter-actions a,
.admin-order-actions a,
.admin-order-actions button {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.admin-orders-filter-actions button,
.admin-order-actions button {
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
}
.admin-orders-filter-actions a,
.admin-order-actions a {
  color: var(--primary);
  background: rgba(218, 225, 255, .45);
}
.admin-orders-list {
  display: grid;
  gap: 14px;
}
.admin-orders-count {
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
}
.admin-order-card {
  overflow: hidden;
}
.admin-order-card-head {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid rgba(194, 198, 216, .32);
}
.admin-order-card-head a {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-order-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 750;
}
.admin-order-status i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.admin-order-status.pending {
  color: #8a5200;
  background: #fff2cc;
}
.admin-order-status.pending i {
  background: #c77700;
}
.admin-order-status.completed {
  color: #006825;
  background: #e6ffe1;
}
.admin-order-status.completed i {
  background: #006825;
}
.admin-order-status.cancelled {
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .45);
}
.admin-order-status.cancelled i {
  background: var(--muted);
}
.admin-order-card-body {
  padding: 12px;
  display: grid;
  gap: 12px;
}
.admin-order-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-order-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
  font-weight: 800;
}
.admin-order-user strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
}
.admin-order-user span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.admin-order-product {
  padding: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(246, 243, 245, .82);
  border-radius: 10px;
}
.admin-order-card.completed .admin-order-product,
.admin-order-card.cancelled .admin-order-product {
  opacity: .82;
}
.admin-order-product-image {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .35);
  border-radius: 8px;
}
.admin-order-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-order-product-image .material-symbols-outlined {
  font-size: 26px;
}
.admin-order-product > div:last-child {
  min-width: 0;
  flex: 1;
}
.admin-order-product strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-order-product div div {
  margin-top: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.admin-order-product span,
.admin-order-product p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
}
.admin-order-product em {
  flex: 0 0 auto;
  color: #ba1a1a;
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}
.admin-order-process {
  padding: 12px;
  display: grid;
  gap: 10px;
  background: var(--surface);
  border-top: 1px solid rgba(194, 198, 216, .32);
}
.admin-order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.admin-order-actions a,
.admin-order-actions button {
  min-width: 88px;
  min-height: 36px;
  font-size: 13px;
}

.mobile-admin-order-show-page {
  min-height: 100dvh;
  padding: 60px 0 76px;
  background: #fcf8fb;
}
.mobile-admin-order-show-page .topbar,
.mobile-admin-order-show-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-order-show-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-order-show-head,
.order-show-card,
.order-show-summary article {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .36);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.admin-order-show-head {
  margin-bottom: 14px;
  padding: 14px;
}
.admin-order-show-head > div {
  display: flex;
  gap: 12px;
  align-items: center;
}
.admin-order-show-head .material-symbols-outlined {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 12px;
}
.admin-order-show-head h1 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: 0;
}
.admin-order-show-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.order-show-card {
  margin-bottom: 14px;
  padding: 14px;
}
.order-show-card h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 750;
  letter-spacing: 0;
}
.order-show-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.order-show-user > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.order-show-user strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 750;
}
.order-show-user span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.order-show-user em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  font-weight: 750;
}
.order-show-user em.ok {
  color: #006825;
  background: #e6ffe1;
}
.order-show-user em.off {
  color: var(--muted);
  background: var(--surface-soft);
}
.order-show-product {
  display: flex;
  gap: 12px;
  align-items: center;
}
.order-show-product-image {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .35);
  border-radius: 10px;
}
.order-show-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-show-product-image .material-symbols-outlined {
  font-size: 30px;
}
.order-show-product > div:last-child {
  min-width: 0;
}
.order-show-product strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-show-product span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.order-show-product em {
  display: block;
  margin-top: 6px;
  color: #ba1a1a;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}
.order-show-summary {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.order-show-summary article {
  padding: 12px;
}
.order-show-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.order-show-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 20px;
  line-height: 26px;
  font-weight: 850;
}
.order-show-summary strong.refund {
  color: #006825;
}
.order-show-process {
  display: grid;
  gap: 12px;
}
.order-show-process label {
  display: grid;
  gap: 6px;
}
.order-show-process label > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}
.order-show-process input,
.order-show-process select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .68);
  border-radius: 10px;
  outline: none;
  font-size: 14px;
}
.order-show-process input:focus,
.order-show-process select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
.order-show-process button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
}
.order-show-process button .material-symbols-outlined {
  font-size: 18px;
}
.order-show-logs {
  overflow: hidden;
  border: 1px solid rgba(194, 198, 216, .28);
  border-radius: 10px;
}
.order-show-logs article {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(194, 198, 216, .28);
}
.order-show-logs article:last-child {
  border-bottom: 0;
}
.order-show-logs strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 750;
}
.order-show-logs span,
.order-show-logs em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
}
.order-show-logs .right {
  flex: 0 0 auto;
  text-align: right;
}
.order-show-logs .right strong.income {
  color: #006825;
}
.order-show-logs .right strong.expense {
  color: #ba1a1a;
}

.mobile-admin-promotions-page {
  min-height: 100dvh;
  padding: 60px 0 calc(76px + env(safe-area-inset-bottom));
  background: #fcf8fb;
}
.mobile-admin-promotions-page .topbar,
.mobile-admin-promotions-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-promotions-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.promotion-admin-stats {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.promotion-admin-stats article,
.promotion-search,
.promotion-relation-card,
.promotion-activation-card {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .72);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.promotion-admin-stats article {
  padding: 12px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.promotion-admin-stats article > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.promotion-admin-stats .material-symbols-outlined {
  color: var(--primary);
  font-size: 20px;
}
.promotion-admin-stats article:nth-child(2) .material-symbols-outlined {
  color: #008432;
}
.promotion-admin-stats em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.promotion-admin-stats strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.promotion-search {
  margin-bottom: 12px;
  padding: 4px;
}
.promotion-search label {
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.promotion-search .material-symbols-outlined {
  color: var(--outline);
  font-size: 22px;
}
.promotion-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  font-size: 15px;
  line-height: 22px;
}
.promotion-search input::placeholder {
  color: var(--outline);
}
.promotion-tabs {
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(194, 198, 216, .72);
}
.promotion-tabs a {
  padding: 12px 8px 11px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.promotion-tabs a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}
.promotion-relations,
.promotion-activations {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.promotion-activations h2 {
  margin: 0;
  padding: 2px 2px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.promotion-relation-card,
.promotion-activation-card {
  padding: 12px;
  display: grid;
  gap: 12px;
}
.promotion-card-head {
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(228, 226, 228, .92);
}
.promotion-card-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.promotion-card-head span,
.promotion-card-head time {
  color: var(--outline);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.promotion-card-head em {
  padding: 2px 8px;
  overflow: hidden;
  color: var(--primary-strong);
  background: var(--primary-fixed);
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promotion-user-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.promotion-user-grid a {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-decoration: none;
}
.promotion-user-grid span,
.promotion-activation-user span {
  color: var(--outline);
  font-size: 11px;
  line-height: 16px;
}
.promotion-user-grid strong,
.promotion-activation-user strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promotion-card-metrics {
  padding: 8px;
  display: flex;
  gap: 16px;
  background: var(--surface-soft);
  border-radius: 8px;
}
.promotion-card-metrics div {
  min-width: 0;
  flex: 1;
}
.promotion-card-metrics span {
  display: block;
  color: var(--outline);
  font-size: 11px;
  line-height: 16px;
}
.promotion-card-metrics strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promotion-card-metrics strong.primary {
  color: var(--primary);
}
.promotion-activation-user {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.promotion-activation-user a {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-decoration: none;
}

.mobile-admin-settings-page {
  min-height: 100dvh;
  padding: 60px 0 calc(76px + env(safe-area-inset-bottom));
  background: #fcf8fb;
}
.mobile-admin-settings-page .topbar,
.mobile-admin-settings-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-settings-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-settings-head {
  margin: 0 0 24px;
}
.admin-settings-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.admin-settings-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}
.admin-settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-admin-settings-page .settings-card {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .58);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.settings-card-title {
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(228, 226, 228, .72);
}
.settings-card-title .material-symbols-outlined {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: rgba(0, 102, 255, .1);
  border-radius: 999px;
  font-size: 20px;
}
.settings-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.settings-switch-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.settings-switch-row strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
.settings-switch-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.settings-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
}
.settings-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-switch span {
  position: absolute;
  inset: 0;
  background: rgba(194, 198, 216, .92);
  border: 0;
  border-radius: 999px;
  transition: background .18s ease, border-color .18s ease;
}
.settings-switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  transition: transform .18s ease;
}
.settings-switch input:checked + span {
  background: var(--primary-strong);
}
.settings-switch input:checked + span::after {
  transform: translateX(20px);
}
.settings-ratio-panel {
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid rgba(228, 226, 228, .7);
  border-radius: 8px;
}
.settings-ratio-title {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.settings-status {
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  margin: 8px auto 0;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.settings-status .material-symbols-outlined {
  font-size: 16px;
}
.settings-status.on {
  color: var(--primary);
  background: rgba(0, 80, 203, .1);
}
.settings-status.off {
  color: var(--muted);
  background: rgba(228, 226, 228, .72);
}
.settings-ratio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  gap: 16px;
  align-items: flex-end;
}
.settings-ratio-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.settings-ratio-grid label span {
  color: var(--secondary);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}
.settings-ratio-grid input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .95);
  border-radius: 8px;
  outline: none;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  text-align: left;
}
.settings-ratio-grid input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
.ratio-divider {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--outline);
}
.ratio-divider .material-symbols-outlined {
  font-size: 32px;
  font-weight: 300;
}
.mobile-admin-settings-page .settings-help {
  margin: 0;
  padding: 16px;
  display: flex;
  gap: 12px;
  color: var(--muted);
  background: #fcf8fb;
  border: 1px solid rgba(194, 198, 216, .42);
  border-radius: 12px;
}
.settings-help > .material-symbols-outlined {
  margin-top: 2px;
  flex: 0 0 auto;
  color: var(--secondary);
  font-size: 24px;
}
.settings-help h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}
.settings-help p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}
.settings-help p + p {
  margin-top: 4px;
}
.settings-help strong {
  padding: 0 4px;
  color: var(--text);
  background: var(--surface-soft);
  border-radius: 4px;
  font-weight: 650;
}
.settings-action-link {
  min-height: 68px;
  padding: 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  background: var(--surface-soft);
  border: 1px solid rgba(228, 226, 228, .72);
  border-radius: 12px;
}
.settings-action-link > .material-symbols-outlined:first-child {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: rgba(0, 102, 255, .1);
  border-radius: 999px;
  font-size: 22px;
}
.settings-action-link > div {
  min-width: 0;
}
.settings-action-link strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 650;
}
.settings-action-link p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.settings-action-link > .material-symbols-outlined:last-child {
  color: var(--outline);
  font-size: 22px;
}
.settings-save {
  width: 100%;
  min-height: 48px;
  margin: 8px 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--on-primary);
  background: var(--primary-strong);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 102, 255, .2);
  font-size: 20px;
  line-height: 28px;
  font-weight: 650;
}
.settings-save .material-symbols-outlined {
  font-size: 24px;
}

.mobile-admin-logs-page {
  min-height: 100dvh;
  padding: 60px 0 calc(76px + env(safe-area-inset-bottom));
  background: #fcf8fb;
}
.mobile-admin-logs-page .topbar,
.mobile-admin-logs-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-logs-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.logs-page-head {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logs-page-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.logs-page-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}
.logs-page-head button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: #eae7ea;
  border: 0;
  border-radius: 999px;
}
.logs-page-head button .material-symbols-outlined {
  font-size: 22px;
}
.logs-card-list {
  display: grid;
  gap: 16px;
  padding-bottom: 22px;
}
.logs-card {
  padding: 12px;
  display: grid;
  gap: 10px;
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .42);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.logs-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.logs-operator {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logs-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--secondary-container);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
}
.logs-operator strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logs-operator em {
  padding: 2px 6px;
  flex: 0 0 auto;
  color: var(--outline);
  background: var(--surface-soft);
  border-radius: 3px;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
}
.logs-card-top time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  text-align: right;
}
.logs-action {
  display: grid;
  gap: 4px;
  margin-bottom: 2px;
}
.logs-action div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logs-action i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
}
.logs-action i.primary {
  background: var(--primary);
}
.logs-action i.danger {
  background: var(--error);
}
.logs-action i.success {
  background: #008432;
}
.logs-action strong {
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}
.logs-action p {
  margin: 0;
  padding-left: 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}
.logs-details summary {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--primary);
  border-radius: 8px;
  list-style: none;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  user-select: none;
}
.logs-details summary::-webkit-details-marker {
  display: none;
}
.logs-details summary .material-symbols-outlined {
  font-size: 16px;
  transition: transform .16s ease;
}
.logs-details[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}
.logs-diff {
  margin: 4px 0 0 6px;
  padding-left: 10px;
  display: grid;
  gap: 8px;
  border-left: 2px solid #e4e2e4;
}
.logs-diff div {
  overflow: hidden;
  padding: 8px;
  background: var(--surface-soft);
  border-radius: 8px;
}
.logs-diff span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
}
.logs-diff span.before {
  color: var(--error);
}
.logs-diff span.after {
  color: #008432;
}
.logs-diff pre {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  color: var(--muted);
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}
.logs-ip {
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--outline);
  border-top: 1px solid rgba(194, 198, 216, .36);
  font-size: 11px;
  line-height: 16px;
}
.logs-ip .material-symbols-outlined {
  font-size: 14px;
}
.logs-load-more {
  width: fit-content;
  min-width: 90px;
  min-height: 40px;
  margin: 2px auto 18px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface-soft);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.logs-load-more.muted {
  color: var(--muted);
}

.mobile-admin-password-page {
  min-height: 100dvh;
  padding: 60px 0 76px;
  background: #fcf8fb;
}
.mobile-admin-password-page .topbar,
.mobile-admin-password-page > .container > .admin-nav {
  display: none;
}
.mobile-admin-password-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.admin-password-head,
.password-card,
.password-tips {
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .36);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.admin-password-head {
  margin-bottom: 14px;
  padding: 14px;
}
.admin-password-head > div {
  display: flex;
  gap: 12px;
  align-items: center;
}
.admin-password-head .material-symbols-outlined {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 12px;
}
.admin-password-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: 0;
}
.admin-password-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}
.admin-password-form {
  display: grid;
  gap: 14px;
}
.password-card {
  padding: 14px;
  display: grid;
  gap: 14px;
}
.password-card label {
  display: grid;
  gap: 6px;
}
.password-card label > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
}
.password-input {
  position: relative;
}
.password-input .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 20px;
}
.password-input input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px 0 42px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(194, 198, 216, .68);
  border-radius: 10px;
  outline: none;
  font-size: 15px;
}
.password-input input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .12);
}
.password-tips {
  padding: 14px;
}
.password-tips h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: 0;
}
.password-tips p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}
.password-save {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--on-primary);
  background: var(--primary);
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
}
.password-save .material-symbols-outlined {
  font-size: 19px;
}

@media (max-width: 374px) {
  .settings-switch-row {
    align-items: flex-start;
  }
}

@media (max-width: 374px) {
  .admin-orders-date-grid,
  .admin-order-process-grid {
    grid-template-columns: 1fr;
  }
  .admin-order-product div div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 374px) {
  .admin-products-selects,
  .admin-product-form-grid {
    grid-template-columns: 1fr;
  }
  .admin-product-main {
    gap: 10px;
  }
  .admin-product-image {
    width: 72px;
    height: 72px;
  }
  .admin-product-card-foot {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-product-actions {
    width: 100%;
    justify-content: space-between;
  }
  .edit-form-grid {
    grid-template-columns: 1fr;
  }
  .admin-product-edit-hero {
    align-items: flex-start;
  }
  .edit-product-preview {
    width: 78px;
    height: 78px;
  }
}

/* Final admin chrome normalization: keep shared header/nav/tabbar identical on every admin page. */
body[class^="mobile-admin-"],
body[class*=" mobile-admin-"] {
  padding-top: 0 !important;
}
body[class^="mobile-admin-"] .container,
body[class*=" mobile-admin-"] .container {
  width: 100% !important;
  max-width: 768px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  overflow: visible !important;
}
body[class^="mobile-admin-"] .mobile-appbar,
body[class*=" mobile-admin-"] .mobile-appbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 -16px !important;
  padding: 0 16px !important;
}
body[class^="mobile-admin-"] .admin-mobile-nav,
body[class*=" mobile-admin-"] .admin-mobile-nav {
  position: relative !important;
  z-index: 70 !important;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin: 10px -16px 18px !important;
  padding: 0 64px 4px 16px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
body[class^="mobile-admin-"] .admin-mobile-nav::-webkit-scrollbar,
body[class*=" mobile-admin-"] .admin-mobile-nav::-webkit-scrollbar {
  display: none !important;
}
body[class^="mobile-admin-"] .admin-mobile-nav a,
body[class*=" mobile-admin-"] .admin-mobile-nav a {
  min-width: max-content !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 7px 16px !important;
  flex: 0 0 auto !important;
  line-height: 22px !important;
  white-space: nowrap !important;
}
.mobile-admin-settings-page,
.mobile-admin-logs-page {
  padding: 0 0 calc(76px + env(safe-area-inset-bottom)) !important;
}
.mobile-admin-settings-page .mobile-appbar,
.mobile-admin-logs-page .mobile-appbar {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
}
.mobile-admin-settings-page .admin-mobile-nav,
.mobile-admin-logs-page .admin-mobile-nav {
  transform: none !important;
  clip-path: none !important;
  contain: none !important;
}
.mobile-admin-settings-page .admin-mobile-nav a,
.mobile-admin-logs-page .admin-mobile-nav a {
  overflow: visible !important;
}

.mobile-address-page,
.mobile-address-edit-page,
.mobile-security-page {
  min-height: 100dvh;
  padding: 60px 0 calc(72px + env(safe-area-inset-bottom));
  background: #fcf8fb;
}
.mobile-address-page .topbar,
.mobile-address-edit-page .topbar,
.mobile-security-page .topbar {
  display: none;
}
.mobile-address-page .container,
.mobile-address-edit-page .container,
.mobile-security-page .container {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
}
.address-head,
.address-edit-head,
.security-head {
  margin-top: 16px;
}
.address-head h1,
.address-edit-head h1,
.security-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
}
.address-head p,
.address-edit-head p,
.security-head p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 20px;
}
.address-list,
.address-form {
  margin-top: 16px;
}
.address-card,
.address-empty,
.address-form,
.security-status-card,
.detail-address-card,
.detail-pay-account-card {
  background: var(--surface);
  border: 1px solid #eeeeee;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.address-card {
  margin-bottom: 12px;
  padding: 14px;
}
.address-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.address-card-main strong {
  margin-right: 8px;
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 750;
}
.address-card-main span,
.address-card p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 21px;
}
.address-card-main em {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
.address-card p {
  margin: 8px 0 0;
  color: var(--text);
}
.address-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.address-actions form {
  margin: 0;
}
.address-actions a,
.address-actions button,
.address-empty a,
.address-form button,
.detail-address-head a,
.detail-address-manage,
.admin-shipping-address button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.address-actions a,
.address-actions button,
.detail-address-head a,
.detail-address-manage {
  color: var(--primary-strong);
  background: var(--primary-soft);
}
.address-actions button.danger {
  color: #ba1a1a;
  background: #ffdad6;
}
.address-empty {
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.address-empty .material-symbols-outlined {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
  font-size: 30px;
}
.address-empty strong {
  margin-top: 12px;
  color: var(--text);
  font-size: 17px;
  line-height: 24px;
}
.address-empty p {
  margin: 6px 0 16px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 20px;
}
.address-empty a,
.address-form button {
  width: 100%;
  min-height: 44px;
  color: #fff;
  background: var(--primary);
}
.address-form {
  padding: 14px;
}
.address-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.address-form label > span {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}
.address-form input,
.address-form textarea,
.address-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .45);
  border-radius: 10px;
  font: inherit;
  outline: none;
}
.address-form select {
  appearance: none;
}
.address-form textarea {
  min-height: 86px;
  resize: vertical;
}
.address-form input:focus,
.address-form textarea:focus,
.address-form select:focus {
  border-color: var(--primary);
}
.address-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.address-default-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}
.address-default-row input {
  width: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--primary);
}
.detail-address-card,
.detail-pay-account-card {
  margin: 12px 0;
  padding: 12px;
}
.detail-address-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.detail-address-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 750;
}
.detail-address-empty {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 20px;
}
.detail-address-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.detail-address-list label {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(194, 198, 216, .4);
  border-radius: 10px;
}
.detail-address-list input {
  margin-top: 3px;
  accent-color: var(--primary);
}
.detail-address-list span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.detail-address-list strong {
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
}
.detail-address-list em {
  color: var(--text-soft);
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
}
.detail-address-manage {
  width: 100%;
  margin-top: 10px;
}
.detail-pay-account-list {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.detail-pay-account-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(194, 198, 216, .4);
  border-radius: 10px;
}
.detail-pay-account-list label.disabled {
  opacity: .65;
}
.detail-pay-account-list input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}
.detail-pay-account-list span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.detail-pay-account-list strong {
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
}
.detail-pay-account-list em {
  color: var(--primary-strong);
  font-style: normal;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}
.detail-pay-account-card p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 18px;
}
.admin-shipping-address {
  display: grid;
  gap: 10px;
}
.admin-shipping-address p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 21px;
}
.admin-shipping-address input {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--text-soft);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .45);
  border-radius: 10px;
}
.admin-shipping-address button {
  width: 100%;
  color: #fff;
  background: var(--primary);
}
.shipping-time {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 18px;
}
.mobile-admin-order-show-page [data-shipping-company-select] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid rgba(194, 198, 216, .45);
  border-radius: 10px;
  font: inherit;
  outline: none;
}
.mobile-admin-order-show-page [data-shipping-company-select]:focus {
  border-color: var(--primary);
}

.security-status-card {
  margin-top: 16px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.security-status-card > .material-symbols-outlined {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
  font-size: 26px;
}
.security-status-card strong {
  color: var(--text);
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
}
.security-status-card p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 20px;
}
.security-menu {
  margin-top: 14px;
}
.security-form {
  margin-top: 16px;
}
.security-notice {
  margin: 4px 0 14px;
}

.detail-address-list label {
  align-items: flex-start;
}
.detail-address-list input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 16px;
  margin: 3px 0 0;
  padding: 0;
}
.detail-address-list .detail-address-line {
  min-width: 0;
  flex: 1 1 auto;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 20px;
}
.detail-address-list .detail-address-line strong,
.detail-address-list .detail-address-line em {
  display: inline;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-style: normal;
}
.detail-address-list .detail-address-line strong::after,
.detail-address-list .detail-address-line em:first-of-type::after {
  content: " · ";
  color: var(--text-soft);
}