:root {
  font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  color:#19293e;
  background:#f6f8fb;
  font-synthesis:none;
  --navy:#172c48;
  --muted:#8998aa;
  --line:#e5ebf2;
  --teal:#228f89;
  --blue:#3977c3
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-size:14px;
  line-height:1.5
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
a {
  color:inherit;
  text-decoration:none
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible {
  outline:3px solid #9ac3ef;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
h1,h2,h3,p {
  margin-top:0
}
button {
  transition:background .15s,color .15s
}
button:not(:disabled):active {
  transform:translateY(1px)
}
.site-header {
  background:#fff;
  border-bottom:1px solid var(--line)
}
.header-inner {
  max-width:1240px;
  margin:auto;
  min-height:83px;
  padding:0 30px;
  display:flex;
  align-items:center;
  gap:40px
}
.site-brand {
  display:inline-flex;
  gap:11px;
  align-items:center;
  font-size:17px;
  font-weight:750;
  letter-spacing:-.4px;
  white-space:nowrap
}
.logo-mark {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:35px;
  height:36px;
  border-radius:10px;
  background:var(--navy);
  color:#fff;
  font-size:24px;
  font-weight:750;
  position:relative;
  flex-shrink:0
}
.logo-mark>span {
  width:7px;
  height:7px;
  background:#4dcec0;
  border:2px solid #fff;
  border-radius:50%;
  position:absolute;
  right:-2px;
  top:-2px
}
.customer-nav {
  display:flex;
  gap:25px;
  align-self:stretch;
  margin-left:24px
}
.nav-tab {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  font-size:12px;
  color:#94a0af;
  padding:0 1px
}
.nav-tab.active {
  color:var(--navy);
  border-bottom-color:var(--navy);
  font-weight:650
}
.account-nav {
  display:flex;
  align-items:center;
  gap:13px;
  margin-left:auto
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:42px;
  padding:12px 17px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:550;
  line-height:1.3;
  white-space:nowrap
}
.button-small {
  font-size:10px;
  min-height:33px;
  padding:8px 12px
}
.button-dark {
  background:var(--navy);
  color:#fff
}
.button-dark:hover {
  background:#254665
}
.button-outline {
  border-color:#dee7f0;
  background:#fff;
  color:#72879f
}
.button-outline:hover {
  border-color:#a9c3df;
  background:#f7fbff
}
.button-light {
  background:#fff;
  color:#2c4662
}
.button-teal {
  background:#e5f5ef;
  color:#2e917f;
  border-color:#cce8de
}
.button-danger {
  background:transparent;
  color:#b87b7b
}
.link-button {
  border:0;
  background:transparent;
  font-size:10px;
  color:#7b96b5;
  padding:0
}
.link-button:hover {
  color:#345f93
}
.full-width {
  width:100%
}
.tag {
  display:inline-flex;
  align-items:center;
  border-radius:5px;
  background:#e8f2fc;
  color:#5e8fbf;
  font-size:9px;
  font-weight:500;
  padding:5px 8px;
  white-space:nowrap
}
.tag-live,.tag-green {
  background:#e7f4ed;
  color:#3d917a
}
.tag-muted {
  background:#f1f4f8;
  color:#a2afbf;
  font-size:8px
}
.tag-amber {
  background:#fff3d9;
  color:#ab8748
}
.customer-main {
  max-width:1240px;
  padding:35px 30px 0;
  margin:auto
}
.notice {
  padding:13px 16px;
  border:1px solid #e0eaf5;
  border-radius:9px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  line-height:1.7;
  margin-bottom:23px
}
.notice strong {
  font-weight:650;
  flex-shrink:0
}
.notice-blue {
  background:#edf5fe;
  color:#648bb5;
  border-color:#dceaf9
}
.notice-amber {
  background:#fff8e9;
  color:#a48249;
  border-color:#f1e4c9
}
.notice .link-button {
  margin-left:auto;
  white-space:nowrap;
  color:inherit
}
.welcome {
  display:grid;
  grid-template-columns:1fr 410px;
  gap:50px;
  align-items:center;
  padding:16px 0 35px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px
}
.eyebrow {
  font-size:9px;
  letter-spacing:2.3px;
  color:#8d9cb0;
  font-weight:600;
  margin-bottom:11px
}
.welcome h1 {
  font-size:37px;
  line-height:1.3;
  letter-spacing:-1px;
  font-weight:700;
  margin:0 0 13px
}
.welcome p {
  font-size:11px;
  line-height:1.9;
  color:#8fa0b4;
  margin-bottom:18px
}
.welcome-pills {
  display:flex;
  gap:20px;
  font-size:9px;
  color:#8fa3b8
}
.welcome-pills span {
  display:inline-flex;
  align-items:center;
  gap:6px
}
.welcome-pills i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#7dbaa8
}
.wallet-overview {
  border-radius:15px;
  overflow:hidden;
  border:1px solid #dce5ee;
  box-shadow:0 6px 22px #243f6010
}
.wallet-primary {
  background:linear-gradient(120deg,#203b5c,#172c48);
  padding:24px 25px;
  color:#fff;
  position:relative;
  overflow:hidden
}
.wallet-primary::after {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border:30px solid #ffffff04;
  right:-25px;
  top:-35px;
  border-radius:50%;
  pointer-events:none
}
.wallet-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#91adc9;
  position:relative;
  z-index:1
}
.wallet-top span:last-child {
  font-size:8px;
  letter-spacing:1.5px;
  background:#ffffff09;
  border:1px solid #ffffff0c;
  border-radius:4px;
  padding:2px 5px
}
.wallet-primary>strong {
  display:block;
  font-size:34px;
  line-height:1.3;
  letter-spacing:-.8px;
  font-weight:650;
  margin-top:11px;
  font-variant-numeric:tabular-nums
}
.wallet-bottom {
  margin-top:17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#87a2be;
  gap:10px;
  position:relative;
  z-index:1
}
.wallet-bottom .button {
  font-size:9px
}
.wallet-secondary {
  padding:13px 25px;
  background:#fff;
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:9px;
  color:#a1b0c0
}
.wallet-secondary strong {
  font-weight:550;
  color:#73899f;
  margin-left:6px
}
.section-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px
}
.section-intro h2 {
  font-size:19px;
  font-weight:650;
  letter-spacing:-.4px;
  margin:0 0 5px
}
.section-intro h1 {
  font-size:27px;
  letter-spacing:-.6px;
  font-weight:650;
  margin:0 0 7px
}
.section-intro p {
  font-size:10px;
  color:#99a7b9;
  margin:0;
  line-height:1.8
}
.subtle {
  font-size:9px;
  color:#a2afbf
}
.shop-grid {
  display:grid;
  grid-template-columns:1fr 1.27fr;
  gap:24px
}
.surface {
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 2px 5px #2a3b5103;
  overflow:hidden;
  min-width:0
}
.panel-header {
  padding:22px 24px 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.panel-header h3 {
  margin:0;
  font-size:14px;
  font-weight:650
}
.purchase-panel form,.wallet-grid form {
  padding:0 24px 24px
}
.field {
  margin-bottom:17px;
  min-width:0
}
.field label {
  display:block;
  font-size:10px;
  font-weight:550;
  color:#71859b;
  margin-bottom:8px
}
.field label>span {
  font-size:9px;
  color:#a2b0c0;
  font-weight:400;
  margin-left:5px
}
.field input,.field select,.field textarea,.inline-form input {
  display:block;
  width:100%;
  border:1px solid #e0e8f1;
  background:#fafcfe;
  color:#455f7c;
  border-radius:7px;
  padding:11px 12px;
  font-size:11px;
  outline:none;
  min-height:39px;
  transition:border-color .15s,box-shadow .15s
}
.field textarea {
  resize:vertical;
  min-height:70px
}
.field input:focus,.field select:focus,.field textarea:focus,.inline-form input:focus {
  border-color:#9abbdf;
  box-shadow:0 0 0 3px #78a7db12;
  background:#fff
}
.field input::placeholder,.field textarea::placeholder,.inline-form input::placeholder {
  color:#afbbc9;
  font-size:10px
}
.field input:read-only {
  background:#f1f5f9;
  color:#a0b0c0
}
.field select:disabled {
  color:#a8b6c7
}
.field small {
  font-size:9px;
  color:#a4b2c2;
  display:block;
  margin-top:8px;
  line-height:1.8
}
.price-box {
  background:#f2f7fc;
  border:1px solid #e2ecf7;
  border-radius:9px;
  padding:13px 15px;
  margin:0 0 18px
}
.price-top {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#7e98b4
}
.price-main {
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px
}
.price-main strong {
  font-size:23px;
  color:#345f8a;
  font-weight:650;
  letter-spacing:-.5px
}
.price-main small {
  font-size:8px;
  color:#a6b8cc
}
.price-main>span {
  margin-left:auto;
  color:#9bb0c5;
  font-size:8px
}
.price-main b {
  color:#6e95ba;
  font-size:12px;
  font-weight:550
}
.price-box p {
  font-size:8px;
  color:#9bb0c6;
  margin:7px 0 0;
  line-height:1.7
}
.purchase-panel .button-dark>span {
  margin-left:auto
}
.form-note {
  font-size:9px;
  color:#a7b4c4;
  text-align:center;
  margin:11px 0 0;
  line-height:1.8
}
.empty-state {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:10px;
  color:#a8b7c8;
  padding:30px 20px
}
.empty-state h3 {
  font-size:12px;
  color:#8da2bb;
  font-weight:500;
  margin:0
}
.empty-state p {
  font-size:10px;
  line-height:1.9;
  margin:0;
  color:#a8b7c9
}
.empty-state.compact {
  min-height:120px;
  padding:27px 20px
}
.receive-empty {
  min-height:448px
}
.phone-art {
  width:67px;
  height:112px;
  border-radius:13px;
  border:2px solid #c9d9eb;
  background:#f7fafe;
  position:relative;
  margin:2px 0 19px;
  display:flex;
  align-items:center;
  justify-content:center
}
.phone-art:before {
  content:"";
  position:absolute;
  top:10px;
  left:23px;
  width:18px;
  height:3px;
  background:#d5e2f2;
  border-radius:3px
}
.phone-art:after {
  content:"";
  position:absolute;
  bottom:10px;
  left:25px;
  width:14px;
  height:4px;
  background:#dce8f5;
  border-radius:3px
}
.phone-art>span {
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:6px;
  width:92px;
  height:40px;
  border:1px solid #c9d9eb;
  border-radius:10px;
  background:#fff;
  color:#a9bfdc;
  box-shadow:0 3px 10px #adc3dc10;
  flex-shrink:0
}
.receive-empty>.tag {
  margin-top:14px
}
.order-detail-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 24px 22px
}
.order-detail-top strong {
  display:block;
  font-size:12px;
  color:#5b7695
}
.order-detail-top span:not(.status) {
  display:block;
  font-size:9px;
  color:#a4b1c2;
  margin-top:4px
}
.status {
  display:inline-flex;
  align-items:center;
  background:#edf3fc;
  color:#6f96c2;
  border-radius:5px;
  font-size:9px;
  padding:5px 8px;
  white-space:nowrap
}
.status.received,.status.approved {
  background:#e7f7ef;
  color:#3f9b80
}
.status.completed {
  background:#edf2f6;
  color:#8294a7
}
.status.canceled,.status.rejected,.status.failed {
  background:#fbeeed;
  color:#b58c86
}
.status.uncertain,.status.reserved,.status.pending {
  background:#fff5e1;
  color:#b39455
}
.phone-detail {
  margin:0 24px 20px
}
.phone-detail label,.code-card label {
  font-size:9px;
  color:#9aafc4
}
.phone-detail>div {
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:5px
}
.phone-detail strong {
  font-size:28px;
  font-weight:650;
  letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}
.phone-format-help {
  margin:8px 0 0;
  color:#53677f;
  font-size:12px;
  line-height:1.6
}
.copy-button {
  font-size:8px;
  border:1px solid #dce8f4;
  border-radius:5px;
  background:#fff;
  color:#85a0be;
  padding:4px 7px;
  flex-shrink:0
}
.copy-button:hover {
  color:#32628f;
  background:#f1f8ff
}
.code-card {
  margin:0 24px 17px;
  padding:15px 16px;
  background:#f5f8fd;
  border:1px solid #e6edf7;
  border-radius:9px
}
.code-card>div:first-child {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.code-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  min-height:42px
}
.code-content strong {
  font-size:24px;
  color:#a3b7cf;
  letter-spacing:2px;
  font-weight:550;
  overflow-wrap:anywhere
}
.code-card.has-code {
  background:#f0faf6;
  border-color:#dfefe7
}
.has-code .code-content strong {
  color:#348b77;
  font-size:30px;
  font-weight:650;
  letter-spacing:4px
}
.code-card p {
  font-size:9px;
  margin:8px 0 0;
  line-height:1.8;
  color:#9baec4
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 16px;
  margin:0 24px 18px
}
.detail-grid>div {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.detail-grid dt {
  font-size:8px;
  color:#a8b6c6;
  white-space:nowrap
}
.detail-grid dd {
  font-size:9px;
  color:#7f95ad;
  margin:0;
  overflow-wrap:anywhere
}
.order-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 24px
}
.receive-panel .form-note {
  margin:12px 24px 20px;
  font-size:8px;
  text-align:left
}
.receive-panel .notice {
  margin:0 24px 17px;
  font-size:9px
}
.how-it-works {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
  padding:25px 1px 4px
}
.how-it-works>div {
  position:relative;
  padding-left:40px
}
.how-it-works>div>span {
  position:absolute;
  left:0;
  top:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:8px;
  background:#e9f0f8;
  font-size:9px;
  color:#8fa7c2
}
.how-it-works h3 {
  font-size:10px;
  font-weight:550;
  color:#7c93ae;
  margin:0 0 5px
}
.how-it-works p {
  font-size:9px;
  color:#aab7c7;
  margin:0
}
.table-scroll {
  overflow-x:auto;
  position:relative
}
table {
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
  text-align:left
}
th {
  padding:12px 16px;
  background:#f8fafc;
  font-size:9px;
  font-weight:500;
  color:#9aaabd;
  border-bottom:1px solid #eaf0f6
}
td {
  padding:14px 16px;
  font-size:10px;
  color:#7189a5;
  border-bottom:1px solid #eef3f7;
  max-width:280px
}
th:first-child,td:first-child {
  padding-left:24px
}
th:last-child,td:last-child {
  padding-right:24px
}
tbody tr:last-child td {
  border-bottom:0
}
.table-primary {
  display:block;
  font-size:10px;
  color:#506b8b;
  font-weight:550
}
.table-secondary {
  display:block;
  font-size:8px;
  color:#a5b4c6;
  margin-top:4px;
  line-height:1.7;
  white-space:normal;
  overflow-wrap:anywhere;
  max-width:240px
}
.table-action {
  font-size:9px;
  color:#6490ba;
  border:0;
  background:transparent;
  padding:5px
}
.table-action.danger {
  color:#b18280
}
.table-actions {
  display:flex;
  gap:7px
}
.amount-plus {
  color:#379981
}
.amount-minus {
  color:#b98678
}
.wallet-grid {
  display:grid;
  grid-template-columns:.88fr 1.2fr;
  gap:24px;
  align-items:start
}
.instructions {
  padding:0 24px 20px;
  color:#96a9bf;
  font-size:10px;
  line-height:1.9;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.ledger-panel {
  margin-top:24px
}
.support-strip {
  margin-top:33px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  display:flex;
  align-items:center;
  gap:14px
}
.support-symbol {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid #dfe7f0;
  background:#fff;
  color:#95aac2;
  border-radius:9px;
  font-size:13px
}
.support-strip h3 {
  font-size:10px;
  color:#7d91aa;
  margin:0 0 5px;
  font-weight:550
}
.support-strip p {
  font-size:9px;
  color:#a0b0c3;
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:850px
}
.support-strip>a {
  margin-left:auto;
  white-space:nowrap
}
.site-footer {
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:8px;
  color:#b0bdcc
}
.auth-dialog,.operation-dialog {
  border:1px solid #e0e8f1;
  border-radius:17px;
  padding:31px;
  width:375px;
  max-width:calc(100% - 32px);
  color:#263d59;
  box-shadow:0 15px 70px #1c354328;
  max-height:calc(100vh - 40px);
  overflow-y:auto
}
.auth-dialog::backdrop,.operation-dialog::backdrop {
  background:#20365065;
  backdrop-filter:blur(4px)
}
.auth-dialog {
  text-align:center
}
.dialog-close {
  position:absolute;
  top:13px;
  right:16px;
  border:0;
  background:transparent;
  color:#a4b2c4;
  font-size:22px;
  padding:0
}
.auth-dialog>.logo-mark {
  margin-bottom:23px
}
.auth-dialog .eyebrow {
  font-size:8px
}
.auth-dialog h2,.operation-dialog h2 {
  font-size:22px;
  letter-spacing:-.6px;
  margin:0 0 8px
}
.auth-dialog>p,.operation-dialog>p {
  font-size:10px;
  color:#9cacc0;
  line-height:1.8;
  margin:0 0 22px
}
.auth-dialog form {
  text-align:left
}
.auth-tabs {
  display:flex;
  border-bottom:1px solid var(--line);
  margin-bottom:21px
}
.auth-tabs button {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  padding:10px;
  width:50%;
  font-size:11px;
  color:#9babc0
}
.auth-tabs button.active {
  border-bottom-color:#263d59;
  color:#263d59;
  font-weight:650
}
.inline-error {
  font-size:10px;
  color:#b57872;
  background:#fff1ed;
  border-radius:7px;
  padding:10px 12px;
  line-height:1.8
}
.toasts {
  position:fixed;
  right:24px;
  bottom:24px;
  width:360px;
  max-width:calc(100% - 40px);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
  pointer-events:none
}
.toast {
  padding:14px 16px;
  background:#fff;
  border:1px solid #e1e9f2;
  box-shadow:0 6px 30px #19334c20;
  border-radius:9px;
  font-size:11px;
  line-height:1.8;
  color:#67859e;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto
}
.toast>span {
  flex:1;
  overflow-wrap:anywhere
}
.toast.error {
  border-left:3px solid #d99e8d;
  color:#a9776d
}
.toast.success {
  border-left:3px solid #6eb8a4
}
.toast button {
  font-size:18px;
  color:#b2bfce;
  border:0;
  background:transparent;
  padding:0
}
.busy {
  opacity:.6
}
.admin-body {
  background:#f5f7fa
}
.admin-auth {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#fff
}
.admin-auth-intro {
  background:linear-gradient(130deg,#19314d,#13243c);
  color:#fff;
  padding:48px 11%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden
}
.admin-auth-intro:after {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border:60px solid #ffffff03;
  border-radius:50%;
  right:-125px;
  top:140px;
  pointer-events:none
}
.admin-auth-intro .site-brand {
  font-size:16px
}
.admin-auth-intro .logo-mark {
  background:#344f6e
}
.admin-auth-intro .eyebrow {
  color:#6e90b7
}
.admin-auth-intro h1 {
  font-size:40px;
  line-height:1.45;
  letter-spacing:-1px;
  font-weight:600;
  margin-bottom:19px
}
.admin-auth-intro p {
  color:#7994b5;
  font-size:11px;
  line-height:1.9
}
.admin-auth-intro>a:last-child {
  font-size:10px;
  color:#7790ae
}
.admin-auth-form {
  align-self:center;
  justify-self:center;
  max-width:360px;
  width:100%;
  padding:30px
}
.admin-auth-form h2 {
  font-size:25px;
  margin:0 0 11px
}
.admin-auth-form>p {
  font-size:11px;
  line-height:1.9;
  color:#9bacc0;
  margin-bottom:28px
}
.admin-auth-form form .field {
  margin-bottom:21px
}
.admin-auth-form>.link-button {
  margin-top:18px
}
.admin-sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:221px;
  background:var(--navy);
  padding:31px 21px;
  color:#8ea8c5;
  display:flex;
  flex-direction:column;
  z-index:10
}
.admin-sidebar .site-brand {
  font-size:13px;
  color:#fff;
  gap:9px;
  margin-bottom:43px
}
.admin-sidebar .logo-mark {
  width:29px;
  height:31px;
  border-radius:8px;
  font-size:21px;
  background:#355270
}
.admin-section-label {
  font-size:9px;
  letter-spacing:1.5px;
  color:#547190;
  margin:0 12px 15px
}
.admin-tab {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:#8ca4c1;
  border-radius:8px;
  font-size:11px;
  padding:13px 14px;
  margin-bottom:7px
}
.admin-tab>span {
  color:#7694b6;
  display:inline-block;
  font-size:16px;
  width:16px;
  text-align:center
}
.admin-tab.active {
  color:#fff;
  background:#2b4462
}
.admin-tab.active>span {
  color:#a1c3e8
}
.admin-tab:hover {
  background:#243d59
}
.admin-sidebar-footer {
  margin-top:auto;
  border-top:1px solid #304660;
  padding-top:23px;
  font-size:9px
}
.admin-sidebar-footer>a {
  display:block;
  color:#7494b7;
  margin-bottom:20px
}
.admin-sidebar-footer>span {
  display:block;
  color:#b2c3d9;
  font-size:10px;
  margin-bottom:8px
}
.admin-sidebar-footer .link-button {
  color:#6e8ead;
  font-size:9px
}
.admin-main {
  margin-left:221px
}
.admin-topbar {
  height:73px;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#a0adbd
}
.admin-topbar>span:first-child>span {
  margin:0 11px;
  color:#c0cad6
}
.admin-topbar strong {
  font-weight:500;
  color:#7f91a8
}
.admin-content {
  padding:32px 34px 0;
  max-width:1600px;
  margin:auto
}
.admin-stat-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px;
  margin:24px 0
}
.admin-stat {
  padding:21px;
  text-align:left;
  display:flex;
  flex-direction:column;
  color:#344e6d;
  font:inherit;
  min-height:143px
}
.admin-stat>span {
  font-size:10px;
  color:#8c9eb3
}
.admin-stat strong {
  font-size:27px;
  font-weight:650;
  margin:10px 0 9px;
  letter-spacing:-.7px;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
  line-height:1.3
}
.admin-stat small {
  font-size:8px;
  color:#abb8c8;
  line-height:1.7
}
.stat-link:hover {
  background:#f9fcff;
  border-color:#bdd2e6
}
.stat-link strong {
  color:#5f85ad
}
.provider-stat {
  background:#edf8f4;
  border-color:#dbeae4
}
.provider-stat strong {
  color:#3d907c;
  font-size:23px
}
.provider-stat small {
  color:#86b09f;
  overflow-wrap:anywhere
}
.inline-form {
  display:flex;
  gap:9px;
  max-width:280px
}
.inline-form input {
  min-height:34px;
  font-size:10px;
  padding:8px 11px
}
.inline-form .button {
  min-height:34px
}
.settings-surface {
  max-width:830px;
  padding:25px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 22px
}
.checkbox-field {
  display:flex;
  justify-content:center;
  flex-direction:column;
  padding-top:17px
}
.checkbox-field label {
  display:flex;
  align-items:center;
  gap:9px
}
.checkbox-field input {
  display:inline-block;
  width:16px;
  height:16px;
  min-height:0;
  accent-color:var(--navy)
}
.settings-surface .form-note {
  text-align:left
}
.operation-dialog h2 {
  font-size:20px
}
.operation-dialog .form-note {
  text-align:left;
  margin:0 0 16px
}
.admin-panel .ledger-panel {
  margin-top:23px
}
.admin-panel .section-intro .eyebrow {
  margin-bottom:7px
}
.error-note {
  color:#bd877a
}
.mono {
  font-family:Consolas,monospace
}
.operation-dialog .button {
  margin-top:3px
}

@media(min-width:1500px) {
  .header-inner,.customer-main {
  max-width:1340px
}
.welcome {
  padding-bottom:40px
}
.shop-grid {
  grid-template-columns:.9fr 1.2fr
}
.receive-empty {
  min-height:440px
}

}

@media(max-width:1150px) {
  .header-inner {
  gap:22px;
  padding:0 24px
}
.customer-nav {
  margin-left:0;
  gap:22px
}
.site-brand {
  font-size:15px
}
.customer-main {
  padding-left:24px;
  padding-right:24px
}
.welcome {
  grid-template-columns:1fr 370px;
  gap:30px
}
.welcome h1 {
  font-size:34px
}
.admin-sidebar {
  width:195px;
  padding:28px 16px
}
.admin-main {
  margin-left:195px
}
.admin-content {
  padding-left:23px;
  padding-right:23px
}
.admin-topbar {
  padding-left:23px;
  padding-right:23px
}
.admin-stat-grid {
  gap:13px
}
.admin-stat {
  padding:17px
}
.admin-stat strong {
  font-size:23px
}
.admin-sidebar .site-brand {
  font-size:11px
}
.detail-grid {
  grid-template-columns:1fr
}
.receive-empty {
  min-height:430px
}

}

@media(max-width:900px) {
  .header-inner {
  min-height:76px;
  gap:15px
}
.customer-nav {
  gap:16px
}
.nav-tab {
  font-size:10px
}
.account-nav {
  gap:8px
}
.account-nav .tag {
  display:none
}
.site-brand {
  font-size:13px
}
.welcome {
  grid-template-columns:1fr 330px;
  gap:25px
}
.welcome h1 {
  font-size:31px
}
.wallet-primary {
  padding:21px
}
.wallet-primary>strong {
  font-size:28px
}
.wallet-secondary {
  padding:12px 21px;
  font-size:8px;
  flex-direction:column;
  gap:4px
}
.shop-grid {
  gap:18px;
  grid-template-columns:1fr 1fr
}
.panel-header {
  padding:20px
}
.purchase-panel form,.wallet-grid form {
  padding:0 20px 20px
}
.price-main strong {
  font-size:20px
}
.phone-detail,.order-detail-top,.code-card,.detail-grid {
  margin-left:20px;
  margin-right:20px
}
.order-actions {
  margin-left:20px;
  margin-right:20px
}
.receive-panel .form-note,.receive-panel .notice {
  margin-left:20px;
  margin-right:20px
}
.phone-detail strong {
  font-size:24px
}
.order-actions .button {
  font-size:9px;
  padding:8px
}
.receive-empty {
  min-height:433px
}
.wallet-grid {
  grid-template-columns:1fr 1.1fr;
  gap:18px
}
.instructions {
  padding-left:20px;
  padding-right:20px
}
.admin-stat-grid {
  grid-template-columns:repeat(2,1fr)
}
.admin-sidebar {
  width:174px;
  padding-left:12px;
  padding-right:12px
}
.admin-main {
  margin-left:174px
}
.admin-tab {
  font-size:10px;
  gap:10px
}
.admin-sidebar .site-brand {
  gap:7px;
  font-size:10px
}
.admin-auth-intro {
  padding:38px 9%
}
.admin-auth-intro h1 {
  font-size:33px
}
.admin-auth-form {
  padding:26px;
  max-width:330px
}

}

@media(max-width:700px) {
  .header-inner {
  padding:0 18px;
  min-height:64px;
  flex-wrap:wrap;
  gap:0 15px
}
.site-brand {
  font-size:13px
}
.logo-mark {
  width:28px;
  height:30px;
  font-size:21px;
  border-radius:8px
}
.account-nav {
  gap:9px
}
.account-nav .button {
  font-size:9px;
  min-height:30px;
  padding:7px 10px
}
.customer-nav {
  order:3;
  width:100%;
  height:43px;
  gap:28px
}
.nav-tab {
  font-size:11px
}
.customer-main {
  padding:23px 18px 0
}
.welcome {
  grid-template-columns:1fr;
  gap:24px;
  padding:3px 0 26px;
  margin-bottom:26px
}
.welcome h1 {
  font-size:31px;
  margin-bottom:10px
}
.welcome p {
  font-size:10px;
  margin-bottom:14px
}
.welcome h1 br {
  display:none
}
.welcome p br {
  display:none
}
.wallet-primary {
  padding:19px 21px
}
.wallet-primary>strong {
  font-size:29px;
  margin-top:8px
}
.wallet-bottom {
  margin-top:14px
}
.wallet-secondary {
  flex-direction:row;
  padding:11px 21px;
  font-size:8px
}
.welcome-pills {
  gap:19px;
  font-size:8px
}
.eyebrow {
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:9px
}
.shop-grid {
  grid-template-columns:1fr;
  gap:19px
}
.section-intro {
  gap:12px;
  margin-bottom:15px
}
.section-intro h2 {
  font-size:18px
}
.section-intro>span.subtle {
  font-size:8px
}
.section-intro p {
  font-size:9px
}
.panel-header {
  padding:20px
}
.purchase-panel form,.wallet-grid form {
  padding:0 20px 21px
}
.price-main strong {
  font-size:24px
}
.receive-empty {
  min-height:292px
}
.phone-detail strong {
  font-size:27px
}
.detail-grid {
  grid-template-columns:1fr 1fr;
  gap:12px 10px
}
.order-actions .button {
  font-size:9px;
  padding:9px 10px
}
.receive-panel .form-note {
  margin-top:12px;
  margin-bottom:20px
}
.how-it-works {
  gap:13px;
  padding-top:23px
}
.how-it-works>div {
  padding-left:0;
  padding-top:36px
}
.how-it-works>div>span {
  top:0
}
.how-it-works h3 {
  font-size:9px
}
.how-it-works p {
  font-size:8px;
  line-height:1.9
}
.wallet-grid {
  grid-template-columns:1fr;
  gap:19px
}
.ledger-panel {
  margin-top:19px
}
.notice {
  font-size:9px;
  padding:11px 13px;
  align-items:flex-start;
  gap:8px
}
.notice-blue {
  flex-wrap:wrap;
  gap:2px 8px
}
.support-strip {
  gap:10px;
  margin-top:27px;
  padding:19px 0
}
.support-strip p {
  font-size:8px;
  max-width:250px
}
.support-strip>a {
  font-size:7px
}
.support-symbol {
  width:29px;
  height:29px;
  flex-shrink:0
}
.site-footer {
  font-size:7px;
  padding:18px 0
}
.table-scroll th,.table-scroll td {
  padding:12px 14px
}
.table-scroll th:first-child,.table-scroll td:first-child {
  padding-left:20px
}
.auth-dialog,.operation-dialog {
  padding:28px 24px
}
.auth-dialog h2 {
  font-size:21px
}
.toasts {
  right:16px;
  bottom:16px;
  max-width:calc(100% - 32px)
}
.toast {
  font-size:10px
}
.admin-sidebar {
  position:static;
  width:100%;
  padding:16px 18px 7px
}
.admin-sidebar .site-brand {
  font-size:13px;
  margin-bottom:16px
}
.admin-sidebar .logo-mark {
  width:27px;
  height:29px
}
.admin-section-label {
  display:none
}
.admin-sidebar nav {
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding-bottom:4px
}
.admin-tab {
  font-size:9px;
  white-space:nowrap;
  padding:8px 10px;
  width:auto;
  gap:5px;
  margin-bottom:0
}
.admin-tab>span {
  font-size:12px;
  width:12px
}
.admin-sidebar-footer {
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:14px;
  padding:10px 0 5px;
  font-size:8px
}
.admin-sidebar-footer>a,.admin-sidebar-footer>span {
  margin:0;
  font-size:8px
}
.admin-sidebar-footer .link-button {
  margin-left:auto;
  font-size:8px
}
.admin-main {
  margin-left:0
}
.admin-topbar {
  height:49px;
  padding:0 18px;
  font-size:8px
}
.admin-content {
  padding:23px 18px 0
}
.section-intro h1 {
  font-size:24px
}
.admin-stat-grid {
  gap:12px;
  margin:20px 0
}
.admin-stat {
  padding:16px;
  min-height:129px
}
.admin-stat>span {
  font-size:9px
}
.admin-stat strong {
  font-size:24px;
  margin-top:8px
}
.admin-stat small {
  font-size:7px
}
.provider-stat strong {
  font-size:21px
}
.admin-content .notice {
  flex-wrap:wrap
}
.admin-content .notice .link-button {
  font-size:9px
}
.inline-form {
  max-width:190px;
  gap:6px
}
.inline-form input {
  font-size:9px;
  padding:8px;
  min-width:0
}
.inline-form .button {
  font-size:9px;
  padding:8px
}
.admin-auth {
  grid-template-columns:1fr;
  min-height:100vh
}
.admin-auth-intro {
  padding:27px 26px;
  min-height:245px
}
.admin-auth-intro .site-brand {
  font-size:13px
}
.admin-auth-intro h1 {
  font-size:25px;
  line-height:1.4;
  margin:17px 0 8px
}
.admin-auth-intro h1 br {
  display:none
}
.admin-auth-intro p {
  font-size:9px;
  margin-bottom:10px
}
.admin-auth-intro>a:last-child {
  font-size:8px
}
.admin-auth-intro .eyebrow {
  display:none
}
.admin-auth-form {
  width:100%;
  max-width:410px;
  padding:29px 27px 38px
}
.admin-auth-form h2 {
  font-size:23px
}
.settings-surface {
  padding:21px
}
.form-grid {
  grid-template-columns:1fr;
  gap:0
}
.checkbox-field {
  padding-top:2px
}
.admin-panel .panel-header .subtle {
  font-size:7px;
  text-align:right
}
.admin-panel .panel-header {
  padding:18px
}
.admin-panel .section-intro .button {
  font-size:9px;
  padding:8px
}
.settings-surface .button {
  font-size:11px
}

}

@media(max-width:370px) {
  .customer-main,.admin-content {
  padding-left:13px;
  padding-right:13px
}
.header-inner {
  padding-left:13px;
  padding-right:13px
}
.wallet-secondary {
  flex-direction:column;
  gap:4px
}
.detail-grid {
  grid-template-columns:1fr
}
.order-actions {
  gap:6px
}
.order-actions .button {
  font-size:8px;
  padding:8px
}
.section-intro .subtle {
  display:none
}
.price-main>span {
  font-size:7px
}
.support-strip>a {
  font-size:6px
}
.admin-stat strong {
  font-size:21px
}
.provider-stat strong {
  font-size:19px
}
.admin-panel .section-intro {
  flex-wrap:wrap
}
.inline-form {
  max-width:100%;
  width:100%
}

}

@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important
}
html {
  scroll-behavior:auto
}

}

.nav-anchor {
  display:flex;
  align-items:center
}
.redemption-guide {
  padding:23px 25px;
  background:#fff
}
.redemption-card-art {
  background:linear-gradient(120deg,#213d5b,#142941);
  border-radius:11px;
  padding:21px 22px;
  color:#fff;
  font-size:16px;
  letter-spacing:2px;
  font-weight:600;
  position:relative;
  overflow:hidden
}
.redemption-card-art:after {
  content:"";
  position:absolute;
  right:-18px;
  top:-27px;
  width:110px;
  height:110px;
  border:20px solid #ffffff04;
  border-radius:50%
}
.redemption-card-art>span {
  display:block;
  font-size:7px;
  letter-spacing:2px;
  color:#7f9dbd;
  margin-top:4px
}
.redemption-card-art>b {
  display:block;
  font-size:12px;
  letter-spacing:3px;
  color:#b3c8df;
  font-weight:400;
  margin-top:19px
}
.redemption-guide>p {
  font-size:9px;
  color:#9baec2;
  line-height:1.9;
  margin:13px 0 0
}
.redemption-service {
  display:flex;
  align-items:center;
  gap:11px;
  padding:16px;
  background:#f5f8fc;
  border:1px solid #e6edf5;
  border-radius:9px;
  margin:4px 0 20px
}
.service-orbit {
  width:33px;
  height:33px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid #bfd5ca;
  color:#619985;
  font-size:18px
}
.redemption-service strong {
  font-size:11px;
  color:#617c93;
  font-weight:650
}
.redemption-service p {
  font-size:8px;
  color:#a2b4c6;
  margin:4px 0 0
}
.redemption-service .tag {
  margin-left:auto;
  font-size:8px
}
.card-summary {
  margin-top:19px;
  padding-top:15px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:9px;
  color:#a2b2c4
}
.card-summary>div {
  display:flex;
  flex-direction:column;
  gap:6px
}
.card-summary strong {
  font-size:10px;
  color:#65879d;
  font-weight:550
}
.card-summary>div:last-child {
  text-align:right
}
.batch-output {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  padding:15px;
  background:#f7fafc;
  border:1px solid #e1eaf3;
  border-radius:7px;
  font-family:Consolas,monospace;
  font-size:10px;
  line-height:1.8;
  max-height:240px;
  overflow-y:auto
}
.codes-grid {
  display:grid;
  grid-template-columns:.7fr 1fr;
  gap:22px;
  margin-bottom:23px
}
.codes-grid form {
  padding:0 23px 22px
}
.batch-panel {
  padding:23px
}
.batch-panel h3 {
  font-size:14px;
  margin-bottom:8px
}
.batch-panel p {
  font-size:9px;
  line-height:1.9;
  color:#9aadc3
}
.batch-actions {
  display:flex;
  gap:10px;
  margin-top:15px
}
.code-detail-name {
  max-width:145px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:inline-block;
  vertical-align:middle
}
.site-brand>span:last-child {
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis
}
.account-nav .button {
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis
}
.admin-sidebar .site-brand>span:last-child {
  max-width:145px
}
.operation-dialog>p {
  white-space:pre-wrap
}
.customer-confirmation {
  width:440px;
  padding:32px;
  background:#fff
}
.customer-confirmation .eyebrow {
  margin-bottom:12px
}
.customer-confirmation>p {
  font-size:14px;
  line-height:1.8;
  color:#53677f;
  margin:16px 0 24px
}
.customer-confirmation .dialog-close {
  width:44px;
  height:44px;
  top:5px;
  right:5px
}
.confirmation-actions {
  display:flex;
  gap:12px
}
.confirmation-actions .button {
  flex:1;
  min-height:44px
}
.redemption-welcome {
  padding-top:5px
}

@media(max-width:700px) {
  .redemption-guide {
  padding:19px 20px
}
.redemption-card-art {
  padding:18px 20px
}
.account-nav .subtle {
  font-size:8px
}
.header-inner .site-brand>span:last-child {
  max-width:135px
}
.account-nav .button {
  max-width:115px
}
.codes-grid {
  grid-template-columns:1fr;
  gap:19px
}
.batch-panel {
  padding:20px
}
.batch-actions {
  gap:8px
}
.batch-actions .button {
  font-size:9px
}
.redemption-service {
  padding:14px
}
.redemption-service .tag {
  font-size:7px
}

}