/* Shared customer-facing dark teal theme, matching /api-docs. */
:root {
  --lf-bg: #151617;
  --lf-surface: #202326;
  --lf-surface-2: #292c2f;
  --lf-line: #383c40;
  --lf-line-strong: #55585c;
  --lf-text: #ededee;
  --lf-muted: #a4a8ad;
  --lf-teal: #207b6d;
  --lf-teal-light: #b7decf;
  --lf-teal-line: #36594f;
}

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

body { font-family: system-ui, "Microsoft YaHei", sans-serif; }
a { color: #a2dcd4; }

header, .header, .top, .mobile-header {
  background: #1b1e20 !important;
  border-color: var(--lf-line) !important;
}

main, .container { color: var(--lf-text); }

.panel, .card, .asset, .plan, .box, .modal .box, .dialog,
.mobile-entry, .mobile-account, .mobile-balance, .mobile-assets .mobile-asset,
.usage-item, .invocation-item, .usage-sum, .notice-box, .invite-box {
  background: var(--lf-surface) !important;
  border-color: var(--lf-line) !important;
  color: var(--lf-text);
}

pre, code, .task, .model, .media-item,
.tabs, .mobile-filters, .asset-tabs, .toolbar, .search-box {
  background: #202326 !important;
  border-color: var(--lf-line) !important;
  color: #d8dce0;
}

input, textarea, select {
  background: #17191a !important;
  border-color: var(--lf-line-strong) !important;
  color: var(--lf-text) !important;
}

input:focus, textarea:focus, select:focus { border-color: #56b9ab !important; box-shadow: 0 0 0 3px rgba(86,185,171,.14) !important; }

button, .btn, .actions button, .upload label {
  background: var(--lf-surface-2) !important;
  border: 1px solid var(--lf-line-strong) !important;
  color: var(--lf-text) !important;
}

button:hover:not(:disabled), .btn:hover, .actions button:hover {
  border-color: #96c9c2 !important;
}

.primary, .btn-primary, .generate, .studio-generate, .mobile-primary,
.invite-box button, .plan button:not(.alipay):not(.wxpay), .tabs button.on,
.mobile-filters button.active, .asset-tabs button.active {
  background: var(--lf-teal) !important;
  border-color: #369e8e !important;
  color: #fff !important;
}

.danger, .actions .danger, .delete-key {
  background: #452a2d !important;
  border-color: #794d50 !important;
  color: #f0a8a8 !important;
}

.muted, .hint, .status, .empty, .meta, .sub,
.usage-item .time, .usage-item .detail, .mobile-install-guide { color: var(--lf-muted) !important; }
.field, .label, label { color: var(--lf-text); }
.empty strong, h1, h2, h3, .title, .model-name { color: var(--lf-text) !important; }
.tag, .chip, .coming-badge { background: #253b36 !important; border-color: var(--lf-teal-line) !important; color: var(--lf-teal-light) !important; }

.spinner { border-color: #495055 !important; border-top-color: #56b9ab !important; }
.progress, progress { accent-color: #56b9ab; }
.footer { border-color: var(--lf-line) !important; color: var(--lf-muted) !important; }

/* Keep payment buttons recognizable while the surrounding page uses the API theme. */
.alipay, .plan .alipay { background: #2868a8 !important; border-color: #397bbd !important; }
.wxpay, .plan .wxpay { background: #227b50 !important; border-color: #35966a !important; }

/* Mobile home and mobile creation pages. */
.mobile-entry .entry-icon { background: #253b36 !important; color: var(--lf-teal-light) !important; }
.mobile-entry .entry-arrow { color: #86cfc0 !important; }
.mobile-entry p, .mobile-account p, .mobile-balance span { color: var(--lf-muted) !important; }
.mobile-primary { background: var(--lf-teal) !important; }
.mobile-main dialog { background: var(--lf-surface) !important; color: var(--lf-text) !important; border-color: var(--lf-line) !important; }

/* Give tool pages a clear surface hierarchy without changing their layout. */
.workbench > .panel, .generator-panel, .form-panel { box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.workbench > .panel h1, .workbench > .panel h2, .workbench > .panel h3 { color: var(--lf-text) !important; }
.actions, .hero-btns, .pay-btns { gap: 10px; }

/* Existing inline promotional surfaces on the desktop home and tools. */
.promo, .retention-tip { background: #202d2b !important; border-color: var(--lf-teal-line) !important; color: var(--lf-teal-light) !important; }