/* Product interiors only. Reuse Compute mobile tokens; desktop has no rules. */
@media (max-width: 700px) {
  html body[data-mobile-product-colors] {
    --ui-surface: var(--dn-light-card);
    --ui-surface-raised: var(--dn-light-subtle);
    --ui-border: var(--dn-light-line);
    --ui-border-strong: var(--dn-light-line-strong);
    --ui-accent: var(--dn-light-blue);
    --soft: var(--dn-light-muted);
    --muted: var(--dn-light-muted);
    --danger: #e5484d;
    background: var(--dn-light-page) !important;
    color: var(--dn-light-text) !important;
  }
  html body[data-mobile-product-colors] :is(main, .app, .page, .layout, .content, .main) { background: var(--dn-light-page) !important; }
  html body[data-mobile-product-colors] :is(.topbar, .page-top, .crumb, .userbar) { background: var(--dn-light-card) !important; color: var(--dn-light-text) !important; border-color: var(--dn-light-line) !important; box-shadow: none !important; }
  html body[data-mobile-product-colors] .hero > .wrap { background: transparent !important; }
  html body[data-mobile-product-colors] .power-chain span { color: var(--dn-light-blue) !important; }
  html body[data-mobile-product-colors] :is(.balance, .wallet-amount, .invite-code) { color: var(--dn-light-blue) !important; }
  html body[data-mobile-product-colors] .meter i { background: var(--dn-light-blue) !important; box-shadow: none !important; }
  html body[data-mobile-product-colors] .stat-card::before { background: var(--dn-light-blue) !important; }
  html body[data-mobile-product-colors] .trend svg path { stroke: var(--dn-light-blue) !important; }
  html body[data-mobile-product-colors] .stat-card em { color: var(--dn-light-muted) !important; }
  html body[data-mobile-product-colors] :is(.hero, .hero-main, .hero-metrics, .overview-main, .overview-side, .intro, .intro.build, .panel, .surface, .card, .stat-card, .team-card, .side-card, .wallet-card, .wallet-summary-card, .wallet-recharge, .package-card, .port-package, .order-box, .key-group, .overview-tool, .tutorial-guide, .guide-block, .learning-path, .doc-card, .current-item, .current-info, .copy-box, .invite-code-box) {
    background: var(--dn-light-card) !important;
    border-color: var(--dn-light-line) !important;
    color: var(--dn-light-text) !important;
    border-radius: 12px !important;
    box-shadow: var(--dn-light-card-shadow) !important;
    backdrop-filter: none !important;
  }
  html body[data-mobile-product-colors] :is(.hero, .overview-main, .overview-side, .intro, .wallet-card)::before,
  html body[data-mobile-product-colors] :is(.hero, .overview-main, .overview-side, .intro, .wallet-card)::after {
    background: none !important;
    box-shadow: none !important;
    border-color: var(--dn-light-line) !important;
  }
  html body[data-mobile-product-colors] :is(.workspace, .section, .section-head, .panel-head, .data-modal-head, .wallet-page-head, .wallet-section-head, .payment-result-head, .guide-summary, .meta-row, .meta-item, .detail, .service-row, .product-row, .key-row, .quick, .empty, .empty-state, .loading, .loading-state, .payment-stage, .address-row, .payment-address, .payment-instruction, .payment-deadline, .wallet-note, .wallet-pay-note) {
    background: var(--dn-light-card) !important;
    border-color: var(--dn-light-line) !important;
    color: var(--dn-light-text) !important;
    box-shadow: none !important;
  }
  html body[data-mobile-product-colors] :is(h1, h2, h3, h4, strong, b, label, td, .mono, .brand-line) { color: var(--dn-light-text) !important; }
  html body[data-mobile-product-colors] :is(p, small, .muted, .meta, .hint, .note, .subtitle, .eyebrow, .hero-eyebrow, .wallet-note, .wallet-pay-note, .payment-instruction, .security-note) { color: var(--dn-light-muted) !important; }
  html body[data-mobile-product-colors] :is(.detail, .meta-item, .stat-card, .wallet-summary-card) > span { color: var(--dn-light-muted) !important; }
  html body[data-mobile-product-colors] :is(.num, .package-price, .wallet-amount, .amount, .stat-card strong, .stat-card b, .wallet-summary-card b, .invite-code-box strong, .overview-tool svg, .product-icon, .avatar) {
    color: var(--dn-light-blue) !important;
    background-image: none !important;
    text-shadow: none !important;
  }
  html body[data-mobile-product-colors] :is(.tag, .badge, .pill, .mini, .package-badge, .tutorial-status, .mode-badge) {
    background: var(--dn-light-subtle) !important;
    border-color: var(--dn-light-line) !important;
    color: var(--dn-light-muted) !important;
    box-shadow: none !important;
  }
  html body[data-mobile-product-colors] :is(table, tbody, tr, td) { background: var(--dn-light-card) !important; border-color: var(--dn-light-line) !important; }
  html body[data-mobile-product-colors] th { background: var(--dn-light-subtle) !important; color: var(--dn-light-muted) !important; border-color: var(--dn-light-line) !important; }
  html body[data-mobile-product-colors] :is(.btn, .link-btn, .ghost, .tab, .tabs button, .filter, .filter-btn, .method-choice, .amount-choice, .model-option) {
    background: var(--dn-light-card) !important;
    color: var(--dn-light-text) !important;
    border-color: var(--dn-light-line-strong) !important;
    box-shadow: none !important;
  }
  html body[data-mobile-product-colors] :is(.btn-primary, .btn.primary, .btn-green, .btn.primary-action, .dn-support-send, [data-primary-action]) {
    background: var(--dn-light-blue) !important;
    border-color: var(--dn-light-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(47, 129, 247, 0.16) !important;
  }
  html body[data-mobile-product-colors] :is(.btn-primary, .btn.primary, .btn-green, [data-primary-action]) :is(span, b, strong, svg) { color: #ffffff !important; }
  html body[data-mobile-product-colors] :is(.tab.active, .tabs button.active, .top-tab.active, .nav-item.active, .side-nav a.active, .method-choice.active, .amount-choice.active, .model-option.active, .port-package.active, .package-card.selected, .package-card.recommended, .filter.active, .filter-btn.active, [aria-selected="true"], button[aria-pressed="true"]) {
    background: #0b0d10 !important;
    color: #ffffff !important;
    border-color: #0b0d10 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16) !important;
  }
  html body[data-mobile-product-colors] :is(.tab.active, .tabs button.active, .top-tab.active, .nav-item.active, .side-nav a.active, .method-choice.active, .amount-choice.active, .model-option.active, .port-package.active, .package-card.selected, .package-card.recommended, [aria-selected="true"], button[aria-pressed="true"]) :is(span, small, strong, b, p, svg) {
    color: #ffffff !important;
  }
  html body[data-mobile-product-colors] :is(input:not([type="checkbox"]):not([type="radio"]), textarea, .input) {
    background: var(--dn-light-card) !important;
    color: var(--dn-light-text) !important;
    border-color: var(--dn-light-line-strong) !important;
    box-shadow: none !important;
  }
  html body[data-mobile-product-colors] :is(select, select.input) {
    background-color: #0b0d10 !important;
    color: #ffffff !important;
    border-color: #0b0d10 !important;
    color-scheme: dark !important;
  }
  html body[data-mobile-product-colors] :is(input, textarea)::placeholder { color: var(--dn-light-tertiary) !important; }
  html body[data-mobile-product-colors] :is(input, textarea, select):focus-visible {
    border-color: var(--dn-light-blue) !important;
    outline: 2px solid var(--dn-light-blue) !important;
    outline-offset: 1px;
  }
  html body[data-mobile-product-colors] :is(input[type="checkbox"], input[type="radio"], [role="switch"]) { accent-color: var(--dn-light-blue) !important; }
  html body[data-mobile-product-colors] :is(input, textarea, select):disabled { background: var(--dn-light-subtle) !important; color: var(--dn-light-disabled) !important; border-color: var(--dn-light-line) !important; }
  html body[data-mobile-product-colors] :is(button, .btn):disabled { opacity: .45 !important; box-shadow: none !important; cursor: not-allowed; }
  html body[data-mobile-product-colors] :is(.modal, .modal-card, .data-modal, .models-data-modal, .payment-modal, .legal-reader, .dn-panel, #dnSupportPanel) {
    background: var(--dn-light-card) !important;
    color: var(--dn-light-text) !important;
    border-color: var(--dn-light-line) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: none !important;
  }
  html body[data-mobile-product-colors] :is(.modal-bg, .modal-backdrop, .data-modal-backdrop, .overlay) { background: rgba(15, 23, 42, .45) !important; backdrop-filter: none !important; }
  html body[data-mobile-product-colors] :is(.close, .modal-close, .payment-close, .data-modal-head .btn) { background: var(--dn-light-card) !important; color: var(--dn-light-text) !important; }
  html body[data-mobile-product-colors] :is(.btn-danger, .danger, .message.err, .msg.err, .status-error, .dn-support-error) { color: #e5484d !important; border-color: #e5484d !important; background: var(--dn-light-card) !important; }
  html body[data-mobile-product-colors] :is(.ok, .status-ok, .product-state:not(.pending), .message.ok, .msg.ok, .success) { color: #12b76a !important; background: var(--dn-light-card) !important; }
  html body[data-mobile-product-colors] :is(.status-warn, .warning, .expiry-banner) { color: #f59e0b !important; background: var(--dn-light-subtle) !important; }
  html body[data-mobile-product-colors] :is(.status-dot, .status-line i) { background: #12b76a !important; box-shadow: none !important; }
}