/* SweetRacket mobile V2: task-first mobile IA, desktop remains unchanged. */
.mobile-v2-wordmark,
.mobile-v2-more,
.mobile-v2-nav {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --mobile-v2-header: 58px;
    --mobile-v2-nav: 70px;
    --mobile-v2-bg: #050706;
    --mobile-v2-panel: rgba(10, 14, 12, .96);
    --mobile-v2-card: rgba(255, 255, 255, .04);
    --mobile-v2-line: rgba(246, 241, 232, .12);
    --mobile-v2-line-soft: rgba(246, 241, 232, .075);
    --mobile-v2-text: #fffaf0;
    --mobile-v2-muted: rgba(246, 241, 232, .62);
    --mobile-v2-faint: rgba(246, 241, 232, .42);
    --mobile-v2-signal: var(--signal, #dfff55);
    --mobile-v2-radius: 8px;
  }

  html,
  body {
    min-width: 0;
    min-height: 100%;
    overflow-x: hidden;
    background: var(--mobile-v2-bg);
  }

  body.mobile-v2-active {
    padding: 0;
    color: var(--mobile-v2-text);
    background:
      radial-gradient(circle at 10% 0%, rgba(223, 255, 85, .055), transparent 24%),
      linear-gradient(180deg, #070a08, #030504 74%);
  }

  body.mobile-v2-active .site-header {
    position: fixed;
    z-index: 1200;
    inset: 0 0 auto;
    width: 100%;
    min-height: var(--mobile-v2-header);
    height: var(--mobile-v2-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--mobile-v2-line-soft);
    background: rgba(5, 7, 6, .94);
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  body.mobile-v2-active .site-header > .wordmark,
  body.mobile-v2-active .site-header > .primary-nav,
  body.mobile-v2-active .site-header > .header-actions {
    display: none;
  }

  body.mobile-v2-active .mobile-v2-wordmark {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mobile-v2-text);
    text-decoration: none;
  }

  .mobile-v2-wordmark img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(223, 255, 85, .1));
  }

  .mobile-v2-wordmark > span {
    min-width: 0;
    display: grid;
    gap: 1px;
  }

  .mobile-v2-wordmark strong {
    font-family: var(--sr-font-ui);
    font-size: 15px;
    font-weight: 760;
    line-height: 1.05;
  }

  .mobile-v2-wordmark small {
    color: var(--mobile-v2-faint);
    font-family: var(--sr-font-ui);
    font-size: 9px;
    line-height: 1;
  }

  body.mobile-v2-active .mobile-v2-more {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    color: var(--mobile-v2-text);
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
  }

  body.mobile-v2-active .mobile-v2-more i {
    font-size: 22px;
  }

  body.mobile-v2-active #app {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    padding: var(--mobile-v2-header) 0 calc(var(--mobile-v2-nav) + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  body.mobile-v2-active .site-footer {
    display: none;
  }

  body.mobile-v2-active .mobile-v2-nav {
    position: fixed;
    z-index: 1190;
    inset: auto 0 0;
    min-height: calc(var(--mobile-v2-nav) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px 7px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mobile-v2-line-soft);
    background: rgba(5, 7, 6, .96);
    backdrop-filter: blur(20px);
  }

  .mobile-v2-nav a {
    min-width: 0;
    min-height: 58px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: var(--mobile-v2-radius);
    color: var(--mobile-v2-faint);
    font-family: var(--sr-font-ui);
    font-size: 10px;
    font-weight: 620;
    text-decoration: none;
  }

  .mobile-v2-nav a i {
    font-size: 21px;
    line-height: 1;
  }

  .mobile-v2-nav a.active {
    border-color: rgba(223, 255, 85, .08);
    color: var(--mobile-v2-signal);
    background: rgba(223, 255, 85, .06);
  }

  .sr-mobile-page {
    width: 100%;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px 12px 20px;
    color: var(--mobile-v2-text);
    font-family: var(--sr-font-ui);
  }

  .sr-mobile-page *,
  .sr-mobile-sheet * {
    box-sizing: border-box;
  }

  .sr-mobile-page button,
  .sr-mobile-page input,
  .sr-mobile-page textarea,
  .sr-mobile-sheet button,
  .sr-mobile-sheet input {
    font-family: var(--sr-font-ui);
    letter-spacing: 0;
  }

  .sr-mobile-page button,
  .sr-mobile-page a,
  .sr-mobile-sheet button,
  .sr-mobile-sheet a {
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-v2-more:focus-visible,
  .mobile-v2-nav a:focus-visible,
  .sr-mobile-page button:focus-visible,
  .sr-mobile-page a:focus-visible,
  .sr-mobile-page input:focus-visible,
  .sr-mobile-page textarea:focus-visible,
  .sr-mobile-sheet button:focus-visible,
  .sr-mobile-sheet a:focus-visible {
    outline: 2px solid var(--mobile-v2-signal);
    outline-offset: 2px;
  }

  .mobile-v2-intro {
    display: grid;
    gap: 6px;
    padding: 3px 2px 2px;
  }

  .mobile-v2-intro > span,
  .sr-mobile-detail-hero > div > span,
  .sr-mobile-knowledge-detail > span {
    color: var(--mobile-v2-signal);
    font-size: 10px;
    font-weight: 760;
    line-height: 1.2;
  }

  .mobile-v2-intro h1,
  .mobile-v2-intro p,
  .sr-mobile-surface h1,
  .sr-mobile-surface h2,
  .sr-mobile-surface h3,
  .sr-mobile-surface p {
    margin: 0;
  }

  .mobile-v2-intro h1 {
    color: var(--mobile-v2-text);
    font-size: clamp(25px, 7.3vw, 30px);
    font-weight: 760;
    line-height: 1.1;
  }

  .mobile-v2-intro p {
    color: var(--mobile-v2-muted);
    font-size: 12px;
    line-height: 1.52;
  }

  .sr-mobile-surface {
    min-width: 0;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    background:
      radial-gradient(circle at 20% 0%, rgba(223, 255, 85, .05), transparent 34%),
      linear-gradient(180deg, rgba(13, 18, 15, .98), rgba(7, 10, 8, .98));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
  }

  .sr-mobile-section-head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .sr-mobile-section-head h2,
  .sr-mobile-section-head strong {
    min-width: 0;
    margin: 0;
    color: var(--mobile-v2-text);
    font-size: 14px;
    font-weight: 720;
  }

  .sr-mobile-section-head > span {
    flex: 0 0 auto;
    color: var(--mobile-v2-faint);
    font-size: 10px;
  }

  .sr-mobile-primary,
  .sr-mobile-secondary,
  .sr-mobile-text-action {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mobile-v2-radius);
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }

  .sr-mobile-primary {
    border: 1px solid var(--mobile-v2-signal);
    color: #07100d;
    background: var(--mobile-v2-signal);
    box-shadow: 0 12px 28px rgba(223, 255, 85, .13);
  }

  .sr-mobile-primary.active,
  .sr-mobile-primary.compare-toggle.active {
    color: var(--mobile-v2-signal);
    background: rgba(223, 255, 85, .08);
    box-shadow: none;
  }

  .sr-mobile-secondary {
    border: 1px solid var(--mobile-v2-line);
    color: var(--mobile-v2-text);
    background: rgba(255, 255, 255, .035);
  }

  .sr-mobile-text-action {
    border: 0;
    color: var(--mobile-v2-muted);
    background: transparent;
  }

  .sr-mobile-primary:disabled,
  .sr-mobile-secondary:disabled {
    cursor: wait;
    opacity: .56;
  }

  /* Fit */
  .sr-mobile-prompt {
    display: grid;
    gap: 10px;
    padding: 13px;
  }

  .sr-mobile-textarea {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(223, 255, 85, .2);
    border-radius: var(--mobile-v2-radius);
    background: rgba(0, 0, 0, .22);
  }

  .sr-mobile-textarea:focus-within {
    border-color: rgba(223, 255, 85, .58);
    box-shadow: 0 0 0 3px rgba(223, 255, 85, .07);
  }

  .sr-mobile-textarea textarea {
    width: 100%;
    min-height: 0;
    height: 82px;
    display: block;
    resize: none;
    border: 0;
    outline: 0;
    padding: 12px 12px 27px;
    color: var(--mobile-v2-text);
    background: transparent;
    font-size: 16px;
    line-height: 1.5;
  }

  .sr-mobile-textarea textarea::placeholder,
  .sr-mobile-library-search input::placeholder {
    color: rgba(246, 241, 232, .34);
  }

  .sr-mobile-textarea small {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: var(--mobile-v2-faint);
    font-size: 9px;
  }

  .sr-mobile-chip-row {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .sr-mobile-chip-row::-webkit-scrollbar {
    display: none;
  }

  .sr-mobile-chip-row button {
    min-height: 36px;
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    color: var(--mobile-v2-muted);
    background: rgba(255, 255, 255, .035);
    font-size: 11px;
    font-weight: 620;
  }

  .sr-mobile-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .sr-mobile-error {
    color: #fb7185;
    font-size: 11px;
    line-height: 1.45;
  }

  .sr-mobile-scenarios,
  .sr-mobile-brand-list,
  .sr-mobile-knowledge-list {
    display: grid;
    gap: 8px;
  }

  .sr-mobile-scenario {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: var(--mobile-v2-radius);
    color: inherit;
    background: rgba(255, 255, 255, .025);
    text-align: left;
  }

  .sr-mobile-scenario > span:first-child,
  .sr-mobile-rank {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(223, 255, 85, .22);
    border-radius: 7px;
    color: var(--mobile-v2-signal);
    font-size: 10px;
  }

  .sr-mobile-scenario > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .sr-mobile-scenario strong {
    color: var(--mobile-v2-text);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.2;
  }

  .sr-mobile-scenario small {
    overflow: hidden;
    color: var(--mobile-v2-faint);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-scenario > i {
    color: var(--mobile-v2-signal);
    font-size: 15px;
  }

  /* Plan */
  .sr-mobile-empty-plan,
  .sr-mobile-login-card {
    display: grid;
    gap: 10px;
    padding: 18px;
  }

  .sr-mobile-empty-plan > i,
  .sr-mobile-login-card > i {
    color: var(--mobile-v2-signal);
    font-size: 28px;
  }

  .sr-mobile-empty-plan h2,
  .sr-mobile-login-card h2 {
    font-size: 18px;
    font-weight: 760;
  }

  .sr-mobile-empty-plan p,
  .sr-mobile-login-card p {
    color: var(--mobile-v2-muted);
    font-size: 12px;
    line-height: 1.55;
  }

  .sr-mobile-decision {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-color: rgba(223, 255, 85, .22);
  }

  .sr-mobile-decision-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .sr-mobile-decision-state span,
  .sr-mobile-decision-state strong {
    color: var(--mobile-v2-signal);
    font-size: 10px;
    font-weight: 760;
  }

  .sr-mobile-decision h2 {
    font-size: 22px;
    font-weight: 760;
    line-height: 1.15;
  }

  .sr-mobile-decision > p {
    color: var(--mobile-v2-muted);
    font-size: 12px;
    line-height: 1.52;
  }

  .sr-mobile-decision-steps {
    overflow: hidden;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: var(--mobile-v2-radius);
  }

  .sr-mobile-decision-steps > div {
    min-height: 42px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--mobile-v2-line-soft);
  }

  .sr-mobile-decision-steps > div:last-child {
    border-bottom: 0;
  }

  .sr-mobile-decision-steps span {
    color: var(--mobile-v2-faint);
    font-size: 10px;
  }

  .sr-mobile-decision-steps strong {
    min-width: 0;
    color: var(--mobile-v2-text);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
  }

  .sr-mobile-candidates {
    display: grid;
    gap: 8px;
    scroll-margin-top: calc(var(--mobile-v2-header) + 12px);
  }

  .sr-mobile-candidate {
    min-width: 0;
    min-height: 106px;
    display: grid;
    grid-template-columns: 30px 54px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: var(--mobile-v2-radius);
    color: inherit;
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
  }

  .sr-mobile-candidate > img {
    width: 54px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35));
  }

  .sr-mobile-candidate-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .sr-mobile-candidate-copy small {
    color: var(--mobile-v2-signal);
    font-size: 9px;
  }

  .sr-mobile-candidate-copy strong {
    overflow: hidden;
    color: var(--mobile-v2-text);
    font-size: 13px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-candidate-copy p {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mobile-v2-muted);
    font-size: 10px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .sr-mobile-candidate > i {
    color: var(--mobile-v2-faint);
  }

  .sr-mobile-plan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  /* Library */
  .sr-mobile-library {
    gap: 10px;
    padding-top: 10px;
  }

  .sr-mobile-library-command {
    display: grid;
    gap: 8px;
  }

  .sr-mobile-library-search {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    background: rgba(255, 255, 255, .035);
  }

  .sr-mobile-library-search > i {
    color: var(--mobile-v2-faint);
    font-size: 17px;
  }

  .sr-mobile-library-search input {
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    color: var(--mobile-v2-text);
    background: transparent;
    font-size: 14px;
  }

  .sr-mobile-library-search button {
    width: 38px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(223, 255, 85, .2);
    border-radius: 7px;
    color: var(--mobile-v2-signal);
    background: rgba(223, 255, 85, .06);
  }

  .sr-mobile-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .sr-mobile-segments a {
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    color: var(--mobile-v2-muted);
    background: rgba(255, 255, 255, .03);
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
  }

  .sr-mobile-segments a.active {
    border-color: rgba(223, 255, 85, .35);
    color: var(--mobile-v2-signal);
    background: rgba(223, 255, 85, .07);
  }

  .sr-mobile-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    color: var(--mobile-v2-faint);
    font-size: 10px;
  }

  .sr-mobile-result-meta a {
    color: var(--mobile-v2-faint);
    text-decoration: none;
  }

  .sr-mobile-active-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sr-mobile-active-filters span,
  .sr-mobile-active-filters button {
    flex: 0 0 auto;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: 7px;
    color: var(--mobile-v2-muted);
    background: rgba(255, 255, 255, .025);
    font-size: 9px;
  }

  .sr-mobile-racket-list {
    display: grid;
    gap: 8px;
  }

  .sr-mobile-racket-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: var(--mobile-v2-radius);
    background: rgba(255, 255, 255, .025);
  }

  .sr-mobile-racket-main {
    min-width: 0;
    min-height: 116px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 9px 7px;
    color: inherit;
    text-decoration: none;
  }

  .sr-mobile-racket-image {
    width: 76px;
    min-height: 98px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(121, 221, 255, .1);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(13, 18, 16, .96), rgba(5, 8, 7, .96));
  }

  .sr-mobile-racket-image img {
    width: 68px;
    height: 94px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .42));
  }

  .sr-mobile-racket-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 5px;
  }

  .sr-mobile-racket-kicker {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .sr-mobile-racket-kicker small {
    overflow: hidden;
    color: var(--mobile-v2-signal);
    font-size: 9px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-racket-kicker b {
    flex: 0 0 auto;
    color: var(--mobile-v2-faint);
    font-size: 8px;
    font-weight: 600;
  }

  .sr-mobile-racket-copy > strong {
    overflow: hidden;
    color: var(--mobile-v2-text);
    font-size: 15px;
    font-weight: 740;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-racket-copy > p {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mobile-v2-muted);
    font-size: 10px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .sr-mobile-mini-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .sr-mobile-mini-specs span {
    overflow: hidden;
    padding: 4px 3px;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: 5px;
    color: var(--mobile-v2-faint);
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-racket-footer {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 9px 7px 95px;
  }

  .sr-mobile-racket-footer > span {
    color: var(--mobile-v2-faint);
    font-size: 9px;
  }

  .sr-mobile-compare {
    min-height: 28px;
    padding: 5px 8px;
    border: 0;
    color: var(--mobile-v2-signal);
    background: transparent;
    font-size: 9px;
    font-weight: 720;
  }

  .sr-mobile-load-more {
    width: 100%;
  }

  .sr-mobile-inline-empty {
    padding: 18px;
    color: var(--mobile-v2-muted);
    font-size: 12px;
    line-height: 1.5;
  }

  .sr-mobile-back {
    width: fit-content;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    color: var(--mobile-v2-muted);
    background: rgba(255, 255, 255, .035);
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
  }

  .sr-mobile-knowledge-detail {
    display: grid;
    gap: 12px;
    padding: 15px;
  }

  .sr-mobile-knowledge-detail h1 {
    font-size: 24px;
    line-height: 1.1;
  }

  .sr-mobile-knowledge-detail > p,
  .sr-mobile-knowledge-detail > div p,
  .sr-mobile-knowledge-detail li {
    color: var(--mobile-v2-muted);
    font-size: 12px;
    line-height: 1.55;
  }

  .sr-mobile-knowledge-detail > div strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
  }

  .sr-mobile-knowledge-detail details {
    border-top: 1px solid var(--mobile-v2-line-soft);
    padding-top: 10px;
  }

  .sr-mobile-knowledge-detail summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--mobile-v2-text);
    font-size: 13px;
    font-weight: 680;
    list-style: none;
  }

  /* Detail */
  .sr-mobile-detail {
    gap: 10px;
    padding-top: 10px;
  }

  .sr-mobile-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .sr-mobile-detail-top > span {
    color: var(--mobile-v2-faint);
    font-size: 10px;
  }

  .sr-mobile-detail-hero {
    position: relative;
    min-height: 210px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    align-items: center;
    gap: 6px;
    padding: 14px;
    overflow: hidden;
    border-color: rgba(223, 255, 85, .2);
  }

  .sr-mobile-detail-hero > div {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 8px;
  }

  .sr-mobile-detail-hero h1 {
    color: var(--mobile-v2-text);
    font-size: clamp(21px, 6vw, 26px);
    font-weight: 760;
    line-height: 1.08;
  }

  .sr-mobile-detail-hero b {
    width: fit-content;
    padding: 5px 8px;
    border: 1px solid rgba(223, 255, 85, .3);
    border-radius: 7px;
    color: var(--mobile-v2-signal);
    background: rgba(223, 255, 85, .06);
    font-size: 10px;
  }

  .sr-mobile-detail-hero p {
    color: var(--mobile-v2-muted);
    font-size: 10px;
    line-height: 1.5;
  }

  .sr-mobile-detail-hero > img {
    position: relative;
    z-index: 1;
    width: 126px;
    height: 184px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .5));
  }

  .sr-mobile-detail-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    background: rgba(255, 255, 255, .025);
  }

  .sr-mobile-detail-specs > div {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 8px 4px;
    border-right: 1px solid var(--mobile-v2-line-soft);
    text-align: center;
  }

  .sr-mobile-detail-specs > div:last-child {
    border-right: 0;
  }

  .sr-mobile-detail-specs span {
    color: var(--mobile-v2-faint);
    font-size: 8px;
  }

  .sr-mobile-detail-specs strong {
    overflow: hidden;
    color: var(--mobile-v2-text);
    font-size: 11px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sr-mobile-judgement {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .sr-mobile-judgement > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sr-mobile-judgement article {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 5px;
    padding: 9px;
    border-left: 2px solid #86efac;
    background: rgba(255, 255, 255, .025);
  }

  .sr-mobile-judgement article:last-child {
    border-left-color: #fdba74;
  }

  .sr-mobile-judgement article span {
    color: var(--mobile-v2-faint);
    font-size: 9px;
  }

  .sr-mobile-judgement article strong {
    color: var(--mobile-v2-text);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.42;
  }

  .sr-mobile-detail-folds {
    display: grid;
    gap: 8px;
  }

  .sr-mobile-fold {
    overflow: hidden;
  }

  .sr-mobile-fold summary {
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    color: var(--mobile-v2-text);
    font-size: 12px;
    font-weight: 680;
    list-style: none;
  }

  .sr-mobile-fold summary::-webkit-details-marker {
    display: none;
  }

  .sr-mobile-fold summary i {
    color: var(--mobile-v2-signal);
    transition: transform .18s ease;
  }

  .sr-mobile-fold[open] summary i {
    transform: rotate(45deg);
  }

  .sr-mobile-fold > div {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
    color: var(--mobile-v2-muted);
    font-size: 11px;
    line-height: 1.55;
  }

  .sr-mobile-full-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sr-mobile-full-specs > div {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: 7px;
  }

  .sr-mobile-full-specs span {
    color: var(--mobile-v2-faint);
    font-size: 9px;
  }

  .sr-mobile-full-specs strong {
    color: var(--mobile-v2-text);
    font-size: 10px;
    font-weight: 650;
  }

  .sr-mobile-source-link {
    color: var(--mobile-v2-signal);
    text-decoration: none;
  }

  /* My */
  .sr-mobile-profile-card {
    min-height: 78px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .sr-mobile-profile-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(223, 255, 85, .28);
    border-radius: 50%;
    color: var(--mobile-v2-signal);
    background: rgba(223, 255, 85, .06);
    font-size: 12px;
    font-weight: 760;
  }

  .sr-mobile-profile-card > div {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .sr-mobile-profile-card h2 {
    overflow: hidden;
    font-size: 14px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-profile-card p {
    overflow: hidden;
    color: var(--mobile-v2-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-profile-card button {
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    color: var(--mobile-v2-signal);
    background: transparent;
    font-size: 10px;
    font-weight: 700;
  }

  .sr-mobile-compare-card,
  .sr-mobile-saved-card,
  .sr-mobile-service-card {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .sr-mobile-compare-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sr-mobile-compare-pair > a {
    min-width: 0;
    min-height: 104px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--mobile-v2-line-soft);
    border-radius: 7px;
    color: inherit;
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
  }

  .sr-mobile-compare-pair img {
    width: 42px;
    height: 86px;
    object-fit: contain;
  }

  .sr-mobile-compare-pair a > span {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .sr-mobile-compare-pair small {
    color: var(--mobile-v2-signal);
    font-size: 8px;
  }

  .sr-mobile-compare-pair strong {
    overflow: hidden;
    color: var(--mobile-v2-text);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
  }

  .sr-mobile-compare-pair > p,
  .sr-mobile-empty-copy {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--mobile-v2-muted);
    font-size: 11px;
    line-height: 1.5;
  }

  .sr-mobile-saved-card > a,
  .sr-mobile-service-card > a,
  .sr-mobile-service-card > button {
    min-width: 0;
    min-height: 52px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border: 0;
    border-top: 1px solid var(--mobile-v2-line-soft);
    color: inherit;
    background: transparent;
    text-align: left;
    text-decoration: none;
  }

  .sr-mobile-saved-card > a > i:first-child,
  .sr-mobile-service-card > a > i:first-child,
  .sr-mobile-service-card > button > i:first-child {
    color: var(--mobile-v2-signal);
    font-size: 18px;
  }

  .sr-mobile-saved-card > a > span,
  .sr-mobile-service-card > a > span,
  .sr-mobile-service-card > button > span {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .sr-mobile-saved-card strong,
  .sr-mobile-service-card strong {
    color: var(--mobile-v2-text);
    font-size: 12px;
    font-weight: 680;
  }

  .sr-mobile-saved-card small,
  .sr-mobile-service-card small {
    overflow: hidden;
    color: var(--mobile-v2-faint);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-mobile-saved-card > a > i:last-child,
  .sr-mobile-service-card > a > i:last-child,
  .sr-mobile-service-card > button > i:last-child {
    color: var(--mobile-v2-faint);
  }

  /* Bottom sheets */
  .sr-mobile-sheet-backdrop {
    position: fixed;
    z-index: 1600;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px 0 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(6px);
  }

  .sr-mobile-sheet {
    width: min(100%, 520px);
    max-height: min(76dvh, 660px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
    border: 1px solid var(--mobile-v2-line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    color: var(--mobile-v2-text);
    background: linear-gradient(180deg, rgba(14, 19, 16, .99), rgba(5, 7, 6, .995));
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .5);
  }

  .sr-mobile-sheet-handle {
    width: 38px;
    height: 4px;
    justify-self: center;
    margin-bottom: 5px;
    border-radius: 999px;
    background: rgba(246, 241, 232, .18);
  }

  .sr-mobile-sheet-head {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .sr-mobile-sheet-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 740;
  }

  .sr-mobile-sheet-head button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--mobile-v2-line);
    border-radius: var(--mobile-v2-radius);
    color: var(--mobile-v2-text);
    background: rgba(255, 255, 255, .04);
  }

  .sr-mobile-sheet-links,
  .sr-mobile-filter-body {
    min-height: 0;
    display: grid;
    align-content: start;
    overflow-y: auto;
  }

  .sr-mobile-sheet-links > a,
  .sr-mobile-sheet-links > button {
    min-height: 58px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    padding: 8px 4px;
    border: 0;
    border-top: 1px solid var(--mobile-v2-line-soft);
    color: inherit;
    background: transparent;
    text-align: left;
    text-decoration: none;
  }

  .sr-mobile-sheet-links > a > i:first-child,
  .sr-mobile-sheet-links > button > i:first-child {
    color: var(--mobile-v2-signal);
    font-size: 19px;
  }

  .sr-mobile-sheet-links > a > span,
  .sr-mobile-sheet-links > button > span {
    display: grid;
    gap: 3px;
  }

  .sr-mobile-sheet-links strong {
    font-size: 12px;
    font-weight: 680;
  }

  .sr-mobile-sheet-links small {
    color: var(--mobile-v2-faint);
    font-size: 9px;
  }

  .sr-mobile-sheet-locale {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .sr-mobile-sheet-locale > span {
    color: var(--mobile-v2-muted);
    font-size: 11px;
  }

  .sr-mobile-sheet-locale > div {
    display: flex;
    gap: 6px;
  }

  .sr-mobile-sheet-locale button {
    min-width: 46px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--mobile-v2-line);
    border-radius: 7px;
    color: var(--mobile-v2-muted);
    background: rgba(255, 255, 255, .035);
    font-size: 10px;
  }

  .sr-mobile-filter-body {
    gap: 14px;
    padding: 4px 0 12px;
  }

  .sr-mobile-filter-body .filter-group {
    display: grid;
    gap: 8px;
  }

  .sr-mobile-filter-body .filter-group > span,
  .sr-mobile-filter-body .filter-group > strong {
    color: var(--mobile-v2-muted);
    font-size: 11px;
  }

  .sr-mobile-filter-body .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .sr-mobile-filter-body [data-filter] {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--mobile-v2-line);
    border-radius: 7px;
    color: var(--mobile-v2-muted);
    background: rgba(255, 255, 255, .035);
    font-size: 10px;
  }

  .sr-mobile-filter-body [data-filter].active {
    border-color: rgba(223, 255, 85, .38);
    color: var(--mobile-v2-signal);
    background: rgba(223, 255, 85, .07);
  }

  .sr-mobile-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--mobile-v2-line-soft);
  }

  /* Existing authenticated Agent screens remain functional, but use the mobile shell. */
  body.mobile-v2-active section.agent-page,
  body.mobile-v2-active section.page.agent-page {
    min-height: calc(100dvh - var(--mobile-v2-header) - var(--mobile-v2-nav));
    padding: 10px 10px 14px;
    background: transparent;
  }

  body.mobile-v2-active .agent-shell {
    min-height: calc(100dvh - var(--mobile-v2-header) - var(--mobile-v2-nav) - 24px);
    border-radius: var(--mobile-v2-radius);
  }

  body.mobile-v2-active .agent-header {
    min-height: 58px;
    padding: 9px 10px;
  }

  body.mobile-v2-active .agent-header-brand p,
  body.mobile-v2-active .agent-header-profile-count,
  body.mobile-v2-active .agent-profile-live {
    display: none;
  }

  body.mobile-v2-active .agent-header h1 {
    font-size: 13px;
  }

  body.mobile-v2-active .agent-workspace,
  body.mobile-v2-active .agent-result-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mobile-v2-active .agent-chat-stage {
    min-width: 0;
    padding: 10px;
  }

  body.mobile-v2-active .agent-chat-thread {
    min-height: 0;
    max-height: 34dvh;
  }

  body.mobile-v2-active .agent-chat-message {
    max-width: 100%;
  }

  body.mobile-v2-active .agent-chat-reply {
    padding: 10px;
  }

  body.mobile-v2-active .agent-answer-options {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mobile-v2-active .agent-answer-options span {
    min-height: 44px;
  }

  /* Mobile fallback for secondary desktop routes reached from More. */
  body.mobile-v2-active #app > .page:not(.agent-page) {
    width: 100%;
    min-width: 0;
    padding: 14px 12px 20px;
  }

  body.mobile-v2-active .auth-overlay,
  body.mobile-v2-active .profile-overlay {
    z-index: 1700;
  }
}

@media (max-width: 360px) {
  .sr-mobile-action-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sr-mobile-action-row .sr-mobile-text-action {
    min-height: 38px;
  }

  .sr-mobile-detail-hero {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .sr-mobile-detail-hero > img {
    width: 110px;
  }

  .sr-mobile-racket-main {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .sr-mobile-racket-image {
    width: 70px;
  }

  .sr-mobile-racket-footer {
    padding-left: 89px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-mobile-fold summary i {
    transition: none;
  }
}