@layer DarkFlow-mobile-home;
@layer DarkFlow-mobile-home {
  @media (max-width: 900px) {
    body.hm-login, body:has(.hf-v2) {
      --hm-bg: #101113;
      --hm-surface: #1b1d22;
      --hm-line: #30333a;
      --hm-text: #f0f1f3;
      --hm-muted: #a0a5ae;
      color: #f0f1f3 !important;
      background: #101113 !important;
    }
    body.hm-login .auth-shell {
      display: block !important;
      padding: 0 !important;
      min-height: 100svh !important;
      background: #101113 !important;
    }
    body.hm-login .auth-panel {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      background: none !important;
    }
    body.hm-login .auth-intro {
      min-height: 164px !important;
      padding: calc(40px + env(safe-area-inset-top)) 28px 36px !important;
      background: #17191c !important;
      border-bottom: 3px solid #7c3aed !important;
    }
    body.hm-login .auth-brand {
      width: 100% !important;
      max-width: 384px !important;
      margin: 0 auto !important;
      gap: 16px !important;
      align-items: center !important;
    }
    body.hm-login .auth-brand .auth-logo {
      width: 60px !important;
      height: 60px !important;
      border-radius: 8px !important;
      filter: none !important;
    }
    body.hm-login .auth-brand b { font: 750 26px/1.2 system-ui !important; color: white !important; }
    body.hm-login .auth-brand small { display: block !important; margin-top: 5px !important; color: #a5aab2 !important; font: 500 12px system-ui !important; }
    body.hm-login .auth-card {
      width: 100% !important;
      max-width: 440px !important;
      margin: 0 auto !important;
      padding: 36px 28px calc(28px + env(safe-area-inset-bottom)) !important;
      color: #f0f1f3 !important;
      background: none !important;
    }
    body.hm-login .auth-card h2 { font: 750 28px/1.25 system-ui !important; color: #f0f1f3 !important; margin: 0 0 10px !important; }
    body.hm-login .auth-card-copy { font: 400 14px/1.6 system-ui !important; color: #a0a5ae !important; margin: 0 0 28px !important; }
    body.hm-login .auth-card form { display: grid !important; gap: 10px !important; }
    body.hm-login .auth-card .form-label { color: #c9cdd4 !important; font: 650 13px system-ui !important; margin: 8px 0 0 !important; }
    body.hm-login .auth-card .form-control {
      height: 54px !important;
      background: #1b1d22 !important;
      color: #f0f1f3 !important;
      border: 1px solid #383c45 !important;
      border-radius: 6px !important;
      font: 400 16px system-ui !important;
      padding: 14px !important;
    }
    body.hm-login .auth-card input::placeholder { color: #848b94 !important; }
    body.hm-login .auth-card .form-control:focus { border-color: #c9cdd4 !important; outline: 3px solid #f0f1f315 !important; }
    body.hm-login .hm-password>input { padding-right: 54px !important; }
    body.hm-login .hf-password-toggle { color: #626a75 !important; top: 6px !important; }
    body.hm-login .auth-card .btn-primary {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      background: #7c3aed !important;
      border: 1px solid #7c3aed !important;
      color: white !important;
      border-radius: 6px !important;
      height: 54px !important;
      margin-top: 18px !important;
      font: 650 15px system-ui !important;
    }
    body.hm-login .auth-link { border-top: 1px solid #30333a !important; padding: 24px 0 0 !important; margin: 28px 0 0 !important; text-align: center !important; color: #a0a5ae !important; font-size: 13px !important; }
    body.hm-login .auth-link a { color: #f0f1f3 !important; text-decoration: none !important; font-weight: 700 !important; }
    body.hm-login .alert { font-size: 13px !important; border-radius: 6px !important; color: #163e2b !important; background: #e0f2e8 !important; border-color: #badfcb !important; }
    body.hm-login .alert-danger { color: #4c1d95 !important; background: #fce7ec !important; border-color: #c084fc !important; }

    body:has(.hf-v2) .mobile-app-bar { background: #121417 !important; border-color: #30333a !important; min-height: 62px !important; padding: 10px 20px !important; }
    body:has(.hf-v2) .mobile-brand strong { color: #f0f1f3 !important; }
    body:has(.hf-v2) .mobile-status { display: none !important; }
    body:has(.hf-v2) .mobile-menu-toggle { color: #c9cdd4 !important; background: #101113 !important; border-color: #30333a !important; }
    body:has(.hf-v2) .mobile-menu-toggle svg { color: #c9cdd4 !important; stroke: #c9cdd4 !important; }
    body:has(.hf-v2) .top-bar { display: none !important; }
    body:has(.hf-v2) .content-wrap { padding: 22px 20px calc(90px + env(safe-area-inset-bottom)) !important; background: #101113 !important; }
    body:has(.hf-v2) .app-shell, body:has(.hf-v2) .main-shell { background: #101113 !important; }
    body:has(.hf-v2) .hf-v2 { display: grid !important; gap: 22px !important; color: #f0f1f3 !important; }
    body:has(.hf-v2) .hm-home-heading { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; padding: 0 !important; min-height: 0 !important; height: auto !important; border: 0 !important; margin: 0 !important; }
    body .hm-home-heading h1 { font: 750 26px/1.2 system-ui !important; color: #f0f1f3 !important; margin: 0 !important; }
    .hm-home-heading p { color: #a0a5ae; font: 400 13px/1.5 system-ui; margin: 5px 0 0; }
    .hm-home-heading>span { display: inline-flex; align-items: center; gap: 6px; color: #67d3a5; font: 650 11px system-ui; white-space: nowrap; }
    .hm-home-heading>span::before { content: ''; width: 6px; height: 6px; background: #45bf8b; border-radius: 50%; }
    body:has(.hf-v2) .hf-v2-head { padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; }
    body:has(.hf-v2) .hf-v2-head>div { display: none !important; }
    body:has(.hf-v2) .hf-v2-head nav { display: grid !important; grid-template-columns: minmax(0,1fr) 44px 44px !important; gap: 8px !important; }
    body:has(.hf-v2) .hf-v2-head nav .btn { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; background: #202328 !important; border-color: #202328 !important; color: #fff !important; min-height: 44px !important; }
    body:has(.hf-v2) .hf-v2-head nav form { grid-column: 2 !important; grid-row: 1 !important; }
    body:has(.hf-v2) .hf-v2-refresh, body:has(.hf-v2) .hf-v2-privacy-toggle { width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 10px !important; background: #1b1d22 !important; border: 1px solid #353944 !important; border-radius: 6px !important; color: #c2c8d1 !important; }
    body:has(.hf-v2) .hf-v2-refresh { font-size: 0 !important; }
    body:has(.hf-v2) .hf-v2-refresh svg { width: 20px !important; height: 20px !important; margin: 0 !important; color: #c2c8d1 !important; }
    body:has(.hf-v2) .hf-v2-metrics { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important; border: 1px solid #30333a !important; border-radius: 6px !important; overflow: hidden !important; background: #30333a !important; }
    body:has(.hf-v2) .hf-v2-metrics>a { display: grid !important; grid-template-columns: minmax(0,1fr) 18px !important; align-content: center !important; min-height: 94px !important; padding: 14px !important; gap: 8px 4px !important; border: 0 !important; border-radius: 0 !important; background: #1b1d22 !important; }
    body:has(.hf-v2) .hf-v2-metrics>a>svg { display: block !important; grid-column: 2 !important; grid-row: 1 !important; width: 17px !important; height: 17px !important; margin: 0 !important; color: #858d97 !important; }
    body:has(.hf-v2) .hf-v2-metrics>a>span { grid-column: 1 !important; grid-row: 1 !important; font: 550 11px system-ui !important; color: #a0a5ae !important; text-transform: none !important; }
    body:has(.hf-v2) .hf-v2-metrics>a>strong { grid-column: 1/-1 !important; font: 750 25px/1 system-ui !important; margin: 0 !important; color: #f0f1f3 !important; }
    body:has(.hf-v2) .hf-v2-metrics>a>small { display: none !important; }
    body:has(.hf-v2) .hf-v2-metrics>a.is-reach>strong { color: #67d3a5 !important; }
    body:has(.hf-v2) .hm-dashboard-tabs { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); background: none !important; border-bottom: 1px solid #353944 !important; }
    body:has(.hf-v2) .hm-dashboard-tabs button { border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: #aaafb8 !important; font: 650 12px system-ui !important; min-height: 44px !important; padding: 10px 2px !important; }
    body:has(.hf-v2) .hm-dashboard-tabs button[aria-pressed=true] { border-bottom-color: #7c3aed !important; color: #f0f1f3 !important; }
    body:has(.hf-v2) .hf-v2-grid { gap: 22px !important; }
    body:has(.hf-v2) :is(.hf-v2-rank,.hf-v2-rank-list,.hf-v2-feed,.hf-v2-events,.hf-v2-analytics,.hf-v2-accounts) { background: none !important; background-color: transparent !important; box-shadow: none !important; }
    body:has(.hf-v2) .hf-v2 :is(header,footer) { background: none !important; border-color: #30333a !important; padding-bottom: 12px !important; }
    body:has(.hf-v2) .hf-v2 h3 { color: #f0f1f3 !important; font: 750 17px/1.3 system-ui !important; }
    body:has(.hf-v2) .hf-v2 header>a { color: #a855f7 !important; text-decoration: none !important; font: 650 11px system-ui !important; }
    body:has(.hf-v2) .hf-v2-empty { display: grid !important; grid-template-columns: 28px minmax(0,1fr) !important; align-items: center; gap: 2px 10px; padding: 18px 0 !important; }
    body:has(.hf-v2) .hf-v2-empty>svg { width: 26px !important; height: 26px !important; grid-row: 1/3; color: #68b592 !important; }
    body:has(.hf-v2) .hf-v2-empty>strong { color: #e0e5ec !important; font: 650 13px system-ui !important; }
    body:has(.hf-v2) .hf-v2-empty>small { color: #aaafb8 !important; font: 400 11px system-ui !important; }
    body:has(.hf-v2) .hf-v2-rank-row { grid-template-columns: 18px 34px minmax(0,1fr) 66px !important; min-height: 66px !important; padding: 12px 0 !important; background: none !important; background-color: transparent !important; border-color: #30333a !important; gap: 10px !important; }
    body:has(.hf-v2) .hf-v2-rank-row>b { color: #9298a3 !important; border: 0 !important; background: none !important; font-size: 10px !important; }
    body:has(.hf-v2) .hf-v2-rank-row strong { color: #ebedf1 !important; font: 650 12px system-ui !important; }
    body:has(.hf-v2) .hf-v2-rank-row small { color: #a0a5ae !important; font-size: 10px !important; }
    body:has(.hf-v2) .hf-v2-rank-row>em { width: 66px !important; border: 0 !important; padding: 0 !important; }
    body:has(.hf-v2) .hf-v2-rank-row>em strong { color: #ebedf1 !important; font: 750 19px system-ui !important; }
    body:has(.hf-v2) .hf-v2-events>a, body:has(.hf-v2) .hf-v2-accounts>a { background: none !important; border-color: #30333a !important; color: #ebedf1 !important; }
    body:has(.hf-v2) .hf-v2-events strong, body:has(.hf-v2) .hf-v2-profile b, body:has(.hf-v2) .hf-v2-accounts>a>strong { color: #ebedf1 !important; }
    body:has(.hf-v2) .hf-v2-events em { color: #67d3a5 !important; border-color: #2d634a !important; background: #173025 !important; }
    body:has(.hf-v2) .hf-v2 :is(time,small), body:has(.hf-v2) .hf-v2-analytics footer span { color: #aaafb8 !important; }
    body:has(.hf-v2) .hf-v2-chart { position: relative !important; overflow: hidden !important; }
    body:has(.hf-v2) .hf-chart-empty { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; pointer-events: none !important; background: #101113 !important; color: #aaafb8 !important; font-size: 13px !important; }
    body:has(.hf-v2) .hf-chart-tabs button { color: #aaafb8 !important; background: #1b1d22 !important; border-color: #30333a !important; }
    body:has(.hf-v2) .hf-chart-tabs button.active { color: #a855f7 !important; background: #4c1d95 !important; }
    body:has(.hf-v2) [hidden] { display: none !important; }
    body:has(.hf-v2) .hf-mobile-tabs { background: #1b1d22 !important; border-color: #30333a !important; backdrop-filter: none !important; }
    body:has(.hf-v2) .hf-mobile-tabs>a, body:has(.hf-v2) .hf-mobile-tabs>button { background: none !important; color: #aaafb8 !important; }
    body:has(.hf-v2) .hf-mobile-tabs .active { color: #a855f7 !important; }
    body:has(.hf-v2) .hf-mobile-tabs .active::before { display: none !important; }
    .hm-home-heading, .hm-dashboard-tabs { min-width: 0; }
  }
}