/* Mobile Subscription & Billing. Subscription state and actions remain app-owned. */
@layer billing-mobile-design {
  @media (max-width: 760px) {
    html body #settings-section {
      --bill-card: #101d26; --bill-border: #263a46; --bill-text: #f3f6fb;
      --bill-muted: #a8bad0; --bill-accent: #00c9e8; --bill-button: #00afd0;
      --bill-icon-bg: #152731; --bill-pill-bg: #0b3038; --bill-success: #17db9b;
      --bill-danger: #ff626b; --bill-danger-bg: rgba(255, 83, 93, .05);
    }
    html[data-appearance="light"] body #settings-section {
      --bill-card: #fff; --bill-border: #dce7ef; --bill-text: #09172e;
      --bill-muted: #637898; --bill-accent: #007b9e; --bill-button: #087b9f;
      --bill-icon-bg: #e3f9fa; --bill-pill-bg: #e1f7f2; --bill-success: #008d4b;
      --bill-danger: #ed164e; --bill-danger-bg: #fff3f5;
    }
    html[data-appearance="black"] body #settings-section {
      --bill-card: #101416; --bill-border: #273035; --bill-text: #f4f5f7;
      --bill-muted: #a1a9b9; --bill-accent: #00cce2; --bill-button: #087b85;
      --bill-icon-bg: #192326; --bill-pill-bg: #092c2c; --bill-success: #00dca6;
      --bill-danger: #ff6670; --bill-danger-bg: #211719;
    }
    html[data-theme="warm-oak"] body #settings-section {
      --bill-card: #f8f1e7; --bill-border: #e2d2bd; --bill-text: #352016;
      --bill-muted: #786252; --bill-accent: #00675d; --bill-button: #00675d;
      --bill-icon-bg: #eee7dc; --bill-pill-bg: #e7f1df; --bill-success: #00675d;
      --bill-danger: #e52c31; --bill-danger-bg: transparent;
    }
    #settings-section:has(#billing-settings-card[open]) .settings-category-picker {
      box-sizing: border-box !important; padding: 13px 16px !important;
      border: 1px solid var(--bill-border) !important; border-radius: 10px !important;
      background: var(--bill-card) !important; background-image: none !important;
    }
    #settings-section:has(#billing-settings-card[open]) .settings-category-caption {
      color: var(--bill-muted) !important; font-size: 10px !important; letter-spacing: .08em !important;
      margin-bottom: 8px !important; text-transform: uppercase !important;
    }
    #settings-section:has(#billing-settings-card[open]) .settings-category-current {
      color: var(--bill-text) !important; font-size: 16px !important; font-weight: 600 !important;
    }
    #settings-section:has(#billing-settings-card[open]) .settings-category-icon,
    #settings-section:has(#billing-settings-card[open]) .settings-category-picker::after {
      color: var(--bill-accent) !important; border-color: var(--bill-accent) !important;
    }
    #settings-section:has(#billing-settings-card[open]) .settings-category-icon svg {
      color: var(--bill-accent) !important; stroke: var(--bill-accent) !important;
    }
    #settings-section #billing-settings-card,
    #settings-section #billing-settings-card > .settings-content {
      box-sizing: border-box !important; padding: 0 !important; margin: 0 !important;
      background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
      width: 100% !important; max-width: 100% !important; overflow: visible !important;
    }
    #settings-section #billing-panel {
      display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
      gap: 10px !important; width: 100% !important; min-width: 0 !important;
      background: transparent !important; padding: 0 !important; margin: 0 !important;
    }
    #settings-section #billing-panel :is(.billing-overview-grid, .billing-expired-features, .billing-expired-security) {
      box-sizing: border-box !important; width: 100% !important; min-width: 0 !important;
      padding: 18px 19px !important; margin: 0 !important; border: 1px solid var(--bill-border) !important;
      border-radius: 10px !important; background: var(--bill-card) !important; background-image: none !important; box-shadow: none !important;
    }
    #settings-section #billing-panel .billing-overview-grid {
      display: flex !important; flex-direction: column !important; gap: 16px !important; height: auto !important; min-height: 0 !important;
    }
    #settings-section #billing-panel .billing-hero {
      display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important;
      padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    }
    #settings-section #billing-panel :is(.billing-hero-glow, .billing-expired-hero-icon) { display: none !important; }
    #settings-section #billing-panel .billing-hero-top { display: block !important; margin: 0 0 9px !important; padding: 0 !important; }
    #settings-section #billing-panel .billing-kicker {
      display: inline-block !important; padding: 6px 9px !important; border: 1px solid var(--bill-accent) !important;
      border-radius: 6px !important; background: var(--bill-pill-bg) !important;
      color: var(--bill-accent) !important; -webkit-text-fill-color: var(--bill-accent) !important;
      font: 700 10px/14px Inter, system-ui, sans-serif !important; letter-spacing: .09em !important; text-transform: uppercase !important;
    }
    #settings-section #billing-panel .billing-hero-main { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
    #settings-section #billing-panel .billing-plan-copy { width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; }
    #settings-section #billing-panel .billing-plan-copy h3 {
      margin: 0 0 8px !important; color: var(--bill-text) !important; -webkit-text-fill-color: var(--bill-text) !important;
      font: 700 23px/1.16 Inter, system-ui, sans-serif !important; letter-spacing: -.02em !important;
    }
    #settings-section #billing-panel .billing-plan-copy p {
      margin: 0 !important; color: var(--bill-muted) !important; -webkit-text-fill-color: var(--bill-muted) !important;
      font: 400 14px/1.4 Inter, system-ui, sans-serif !important; white-space: normal !important;
    }
    #settings-section #billing-panel .billing-price-column {
      display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important;
      gap: 10px 14px !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important;
      margin: 0 !important; padding: 15px 0 0 !important; border: 0 !important; border-top: 1px solid var(--bill-border) !important;
      border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    }
    #settings-section #billing-panel .billing-price-column::before,
    #settings-section #billing-panel .billing-price-column::after { content: none !important; display: none !important; }
    #settings-section #billing-panel .billing-offer-status { display: block !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
    #settings-section #billing-panel .billing-status-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; width: auto !important; }
    #settings-section #billing-panel .billing-status-pill {
      display: inline-flex !important; align-items: center !important; gap: 7px !important; width: auto !important;
      padding: 6px 10px !important; border: 1px solid var(--bill-success) !important; border-radius: 6px !important;
      background: var(--bill-pill-bg) !important; color: var(--bill-success) !important; -webkit-text-fill-color: var(--bill-success) !important;
      font: 700 10px/15px Inter, system-ui, sans-serif !important; letter-spacing: .07em !important; text-transform: uppercase !important;
    }
    #settings-section #billing-panel .billing-status-pill:is(.active,.paid,.trialing)::before { content: "" !important; display: inline-block !important; flex: 0 0 7px !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: currentColor !important; }
    #settings-section #billing-panel .billing-status-pill:is(.expired,.canceled,.unpaid,.past_due,.error) { color: var(--bill-danger) !important; -webkit-text-fill-color: var(--bill-danger) !important; border-color: var(--bill-danger) !important; background: var(--bill-danger-bg) !important; }
    #settings-section #billing-panel .billing-trial-summary { display:flex !important; flex-direction:column !important; gap:2px !important; color:var(--bill-muted) !important; font-size:11px !important; }
    #settings-section #billing-panel .billing-trial-summary:has(#billing-trial-remaining[hidden]),
    #settings-section #billing-panel :is(#billing-trial-remaining,#billing-trial-caption)[hidden] { display:none !important; }
    #settings-section #billing-panel .billing-offer-price { display:flex !important; flex: 1 1 auto !important; align-items:baseline !important; justify-content:flex-start !important; flex-wrap:wrap !important; gap: 4px 7px !important; min-width: 0 !important; width:auto !important; margin:0 !important; padding:0 !important; }
    #settings-section #billing-panel .billing-price-block { display:block !important; flex:0 1 auto !important; width:auto !important; min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
    #settings-section #billing-panel .billing-price {
      display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; gap:6px !important;
      color:var(--bill-text) !important; -webkit-text-fill-color:var(--bill-text) !important; font: 750 34px/1.1 Inter,system-ui,sans-serif !important; white-space:nowrap !important;
    }
    #settings-section #billing-panel .billing-price-current { color:var(--bill-text) !important; -webkit-text-fill-color:var(--bill-text) !important; font:inherit !important; }
    #settings-section #billing-panel .billing-price-original { color:var(--bill-muted) !important; -webkit-text-fill-color:var(--bill-muted) !important; font-size:14px !important; }
    #settings-section #billing-panel .billing-price-period { display:block !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important; color:var(--bill-muted) !important; -webkit-text-fill-color:var(--bill-muted) !important; font:600 14px/1.3 Inter,system-ui,sans-serif !important; }
    #settings-section #billing-panel .billing-price-period :is(.billing-price-period-first,.billing-price-period-next) { display:block !important; font-size:11px !important; line-height:1.3 !important; }
    html:is([data-appearance="light"],[data-appearance="black"]) #settings-section #billing-panel.billing-state-paid .billing-offer-price { flex-direction:column !important; align-items:flex-start !important; gap:2px !important; }
    #settings-section #billing-panel .billing-actions { display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto !important; gap:8px !important; width:100% !important; min-height:0 !important; padding:0 !important; margin:0 !important; }
    #settings-section #billing-panel .billing-actions .billing-btn { grid-column:1 !important; grid-row:auto !important; box-sizing:border-box !important; width:100% !important; min-height:40px !important; height:auto !important; padding:10px 12px !important; border-radius:6px !important; font:700 14px/20px Inter,system-ui,sans-serif !important; white-space:normal !important; }
    #settings-section #billing-panel :is(#billing-manage-btn,#billing-subscribe-btn,#billing-resubscribe-btn) { background:var(--bill-button) !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border:1px solid var(--bill-button) !important; }
    #settings-section #billing-panel #billing-cancel-btn { background:var(--bill-danger-bg) !important; background-image:none !important; color:var(--bill-danger) !important; -webkit-text-fill-color:var(--bill-danger) !important; border:1px solid var(--bill-danger) !important; }
    #settings-section #billing-panel .billing-footnotes, #settings-section #billing-panel.billing-state-lifetime .billing-actions { display:none !important; }
    #settings-section #billing-panel .billing-expired-features header { display:block !important; margin:0 0 10px !important; padding:0 !important; }
    #settings-section #billing-panel .billing-expired-features header h3 { display:block !important; margin:0 0 6px !important; font-size:0 !important; line-height:0 !important; }
    #settings-section #billing-panel .billing-expired-features header h3::after { content:'Included in your plan' !important; color:var(--bill-text) !important; -webkit-text-fill-color:var(--bill-text) !important; font:700 20px/1.2 Inter,system-ui,sans-serif !important; }
    #settings-section #billing-panel .billing-expired-features header p { margin:0 !important; color:var(--bill-muted) !important; -webkit-text-fill-color:var(--bill-muted) !important; font:400 13px/1.35 Inter,system-ui,sans-serif !important; }
    #settings-section #billing-panel .billing-feature-grid { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:0 !important; padding:0 !important; margin:0 !important; }
    #settings-section #billing-panel .billing-feature-grid article { display:grid !important; grid-template-columns:40px minmax(0,1fr) !important; align-items:start !important; gap:13px !important; min-width:0 !important; padding:9px 0 !important; margin:0 !important; border:0 !important; border-bottom:1px solid var(--bill-border) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
    #settings-section #billing-panel .billing-feature-grid article:last-child { border-bottom:0 !important; padding-bottom:0 !important; }
    #settings-section #billing-panel .billing-feature-grid article::after { content:none !important; display:none !important; }
    #settings-section #billing-panel .billing-feature-icon { display:flex !important; align-items:center !important; justify-content:center !important; width:40px !important; height:40px !important; padding:8px !important; box-sizing:border-box !important; border:0 !important; border-radius:7px !important; background:var(--bill-icon-bg) !important; color:var(--bill-accent) !important; }
    html:is([data-appearance="light"],[data-appearance="black"]) #settings-section #billing-panel .billing-feature-icon { border-radius:50% !important; }
    #settings-section #billing-panel .billing-feature-icon svg { width:24px !important; height:24px !important; fill:none !important; stroke:var(--bill-accent) !important; stroke-width:1.8 !important; }
    #settings-section #billing-panel .billing-feature-grid article > div { min-width:0 !important; }
    #settings-section #billing-panel .billing-feature-grid h4 { margin:0 0 3px !important; color:var(--bill-text) !important; -webkit-text-fill-color:var(--bill-text) !important; font:700 13px/1.2 Inter,system-ui,sans-serif !important; }
    #settings-section #billing-panel .billing-feature-grid p { margin:0 !important; color:var(--bill-muted) !important; -webkit-text-fill-color:var(--bill-muted) !important; font:400 12px/1.3 Inter,system-ui,sans-serif !important; }
  }
}