html{
  color-scheme:light;
  --ui-bg:#f6f7f4;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8faf8;
  --ui-line:#dde5dd;
  --ui-text:#17211b;
  --ui-muted:#536059;
  --ui-accent:#24563c;
  --ui-accent-2:#0f766e;
  --ui-warning:#b7791f;
  --ui-shadow:0 8px 22px rgba(24,34,28,.06);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ui-bg:#0d1117;
  --ui-surface:#151b23;
  --ui-surface-2:#111820;
  --ui-line:#26313d;
  --ui-text:#eef4f0;
  --ui-muted:#9aa8a0;
  --ui-accent:#58b87a;
  --ui-accent-2:#67d4c0;
  --ui-warning:#f2c94c;
  --ui-shadow:0 14px 36px rgba(0,0,0,.26);
}

html,
body{
  background:var(--ui-bg) !important;
  color:var(--ui-text) !important;
}

.header,
.pay-container,
.pay-box,
.product-container,
.account-panel,
.panel,
.order-card,
.card,
.waiting-card,
.plan-card{
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-line) !important;
  border-radius:8px !important;
  box-shadow:var(--ui-shadow) !important;
}

.header{
  border-bottom:1px solid var(--ui-line) !important;
}

.brand h2,
.highlight,
.product-price,
.plan-price,
.status-text,
.pay-box h3,
.footer h3{
  color:var(--ui-accent) !important;
}

.brand p,
.header nav a,
.product-desc,
.product-stock,
.panel-title span,
.muted,
.footer p,
.footer a{
  color:var(--ui-muted) !important;
}

button,
.primary-btn,
.buy-btn,
.pay-btn{
  background:var(--ui-accent) !important;
  color:#ffffff !important;
  border-radius:8px !important;
}

input,
textarea,
select,
.order-number{
  background:var(--ui-surface-2) !important;
  color:var(--ui-text) !important;
  border:1px solid var(--ui-line) !important;
  border-radius:8px !important;
}

.price-sub,
.pay-amount-sub{
  display:block;
  margin-top:6px;
  color:var(--ui-muted);
  font-size:13px;
  font-weight:600;
}

.theme-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9998;
  width:54px;
  height:36px;
  padding:0 !important;
  border:1px solid var(--ui-line) !important;
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  box-shadow:var(--ui-shadow);
}
