.ha-mnav { display: none; }

@media (max-width: 768px) {
  html[data-mobile="on"] {

    body.has-sidebar .view-app,
    body #route-root,
    body #dash-root { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
    body { font-size: 16px; -webkit-text-size-adjust: 100%; }

    .ha-sb-toggle { display: none !important; }

    .path-grid, .co-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .form-grid-2 { grid-template-columns: 1fr !important; }
    .path-card, .co-card { width: 100% !important; }

    .btn, .btn-solid, .btn-ghost, .co-card, .path-go, .ha-sb-item, .tab, button {
      min-height: 44px;
    }
    .btn, .btn-solid, .btn-ghost { padding: 12px 16px !important; font-size: 15px !important; }

    h1 { font-size: clamp(20px, 6vw, 28px) !important; }
    h2 { font-size: clamp(18px, 5vw, 22px) !important; }

    table, pre, .sim-frame-wrap { max-width: 100%; overflow-x: auto; }
    body { overflow-x: hidden; }

    #route-root.route-sim-wide .sim-frame { height: calc(100vh - 150px) !important; }

    .dash-tabs {
      position: sticky; top: 0; z-index: 20;
      gap: 8px !important; margin: 0 -14px 16px !important; padding: 10px 14px !important;
      background: color-mix(in srgb, var(--ink-0, #07090c) 92%, transparent);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--line-2, #1f2933);
      scroll-snap-type: x proximity;
    }
    .dash-tabs::-webkit-scrollbar { height: 0; display: none; }
    .dash-tab {
      flex: 0 0 auto; scroll-snap-align: start;
      padding: 10px 16px !important; min-height: 42px;
      border-radius: 22px !important; font-size: 12px !important; letter-spacing: .04em;
      display: inline-flex; align-items: center;
    }
    .dash-tab.on { box-shadow: 0 0 0 1px var(--phos, #00e5a0) inset; }
  }

  html[data-mobile="on"] .ha-mnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ink-1, #0c1117);
    border-top: 1px solid var(--line-2, #1f2933);
    box-shadow: 0 -6px 20px rgba(0,0,0,.35);
  }
  html[data-mobile="on"] .ha-mnav a,
  html[data-mobile="on"] .ha-mnav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; background: none; border: none; cursor: pointer;
    color: var(--fg-mute, #8b9cb3); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
    font-family: inherit; text-decoration: none; padding: 6px 2px; min-height: 44px;
  }
  html[data-mobile="on"] .ha-mnav .mn-ic { font-size: 19px; line-height: 1; }
  html[data-mobile="on"] .ha-mnav a.active { color: var(--phos, #00e5a0); }
  html[data-mobile="on"] .ha-mnav a.active .mn-ic { filter: drop-shadow(0 0 6px var(--phos, #00e5a0)); }
}

html[data-mobile="on"] body.sb-open .ha-mnav,
html[data-mobile="on"] body.sb-immersive .ha-mnav { opacity: .0; pointer-events: none; }

html[data-mobile="on"] .ha-fab { display: none !important; }

html[data-mobile="on"] #ha-lab-fs {
  position: fixed; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink-1, #0c1117); border: 1px solid var(--line-2, #1f2933);
  color: var(--phos, #00e5a0); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

html[data-mobile="on"] body.ha-lab-full #ha-lab-fs { top: 12px; bottom: auto; right: 12px; z-index: 2147483000; }

html[data-mobile="on"] body.ha-lab-full .ha-mnav,
html[data-mobile="on"] body.ha-lab-full .topbar,
html[data-mobile="on"] body.ha-lab-full .sim-play-header,
html[data-mobile="on"] body.ha-lab-full .sim-briefing,
html[data-mobile="on"] body.ha-lab-full .sim-debrief,
html[data-mobile="on"] body.ha-lab-full .ha-sb-toggle { display: none !important; }

html[data-mobile="on"] body.ha-lab-full .sim-frame-wrap {
  position: fixed !important; inset: 0 !important; z-index: 2147482000 !important;
  margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
html[data-mobile="on"] body.ha-lab-full .sim-frame {
  width: 100vw !important; height: 100vh !important; height: 100dvh !important; border: 0 !important;
}
html[data-mobile="on"] body.ha-lab-full #route-root { padding: 0 !important; }

@media (max-width: 768px) {

  html[data-mobile="on"] .sim-layout,
  html[data-mobile="on"] .cert-meta,
  html[data-mobile="on"] .login-stats,
  html[data-mobile="on"] .np-grid,
  html[data-mobile="on"] .cert-score-wrap,
  html[data-mobile="on"] .co-course { grid-template-columns: 1fr !important; }

  html[data-mobile="on"] .tabs,
  html[data-mobile="on"] .np-tabs,
  html[data-mobile="on"] .co-tabs {
    display: flex; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  html[data-mobile="on"] .tabs::-webkit-scrollbar,
  html[data-mobile="on"] .np-tabs::-webkit-scrollbar { height: 0; display: none; }

  html[data-mobile="on"] .cert-actions,
  html[data-mobile="on"] .lp-foot,
  html[data-mobile="on"] .quiz-actions,
  html[data-mobile="on"] .sim-play-header { flex-wrap: wrap; gap: 8px; }

  html[data-mobile="on"] .certificate { padding: 28px 18px !important; }

  html[data-mobile="on"] img,
  html[data-mobile="on"] svg,
  html[data-mobile="on"] canvas,
  html[data-mobile="on"] video,
  html[data-mobile="on"] input,
  html[data-mobile="on"] select,
  html[data-mobile="on"] textarea { max-width: 100%; }

  html[data-mobile="on"] .lp-title,
  html[data-mobile="on"] .cert-title { font-size: clamp(22px, 6.5vw, 30px) !important; }

  html[data-mobile="on"] .ha-emoji-wrap { flex-wrap: wrap; row-gap: 8px; }
  html[data-mobile="on"] .ha-emoji-wrap > textarea { flex: 1 1 100%; width: 100%; }
  html[data-mobile="on"] .ha-emoji-wrap > .btn-solid { flex: 1 1 auto; }

  html[data-mobile="on"] .sc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  html[data-mobile="on"] .sc-actions > button { flex: 1 1 auto; }

  html[data-mobile="on"] .notif-actions { width: 100%; }
  html[data-mobile="on"] .notif-actions > .btn-ghost,
  html[data-mobile="on"] .notif-actions > .btn-solid,
  html[data-mobile="on"] .notif-actions > .notif-go { flex: 1 1 auto; text-align: center; }
}

.sc-back { display: none; }

@media (max-width: 768px) {
  html[data-mobile="on"] .sc-grid { flex-direction: column; gap: 0 !important; }
  html[data-mobile="on"] .sc-list,
  html[data-mobile="on"] .sc-convo { flex: 1 1 100% !important; width: 100%; max-height: none !important; min-width: 0 !important; }
  html[data-mobile="on"] .sc-convo { display: none; }
  html[data-mobile="on"] .sc-panel.sc-open .sc-list { display: none; }
  html[data-mobile="on"] .sc-panel.sc-open .sc-convo { display: flex; }
  html[data-mobile="on"] .sc-list > button { min-height: 56px; }
  html[data-mobile="on"] .sc-list > button > span:last-child { max-width: none !important; }
  html[data-mobile="on"] .sc-log { max-height: none !important; flex: 1 1 auto; min-height: 46vh; }
  html[data-mobile="on"] .sc-back { display: inline-flex !important; align-self: flex-start; }

  html[data-mobile="on"] .dash-tab:not(.enc-tab):not(.mission-tab):not(.pwned-tab) {
    background: var(--ink-2, #131a23);
    border: 1px solid var(--line-2, #1f2933) !important;
    color: var(--fg-mute, #8b9cb3);
  }
  html[data-mobile="on"] .dash-tab.on:not(.enc-tab):not(.mission-tab):not(.pwned-tab) {
    background: color-mix(in srgb, var(--phos, #00e5a0) 18%, var(--ink-2, #131a23));
    color: var(--phos, #00e5a0);
    border-color: var(--phos, #00e5a0) !important;
    box-shadow: 0 0 0 1px var(--phos, #00e5a0) inset;
  }
}