/* Mobile-only refinements — merged from the old /m/* pages.
   Scoped to <=760px so the single responsive page replaces both variants. */
@media (max-width: 760px) {
    .topbar {
        padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) var(--s4) var(--s3);
        gap: var(--s2);
    }
    .topbar-actions { flex-wrap: nowrap; }
    #gsi-button-container { display: none; }
    .topbar .theme-switch { display: none; }
    #avatarBtn { display: grid !important; }
    .gsi-sheet { display: flex; }

    main { padding: var(--s3) var(--s4) var(--s7); }
    .hero { margin: var(--s3) 0 var(--s4); }
    .hero h1 { font-size: var(--fs-xl); }
    .hero h1 .grad { display: block; } /* "instantly" back on its own centered line — mobile only */
    .hero .subtitle { font-size: var(--fs-base); }
    .panel { padding: var(--s4); }
    .recent { margin-top: var(--s5); padding: var(--s3); }
    .recent-head { padding: var(--s1) var(--s1) var(--s3); }
    .recent-item { grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s3); }
    .recent-favicon { width: 34px; height: 34px; }
    .recent-copy { min-height: 34px; min-width: 64px; padding: 0 9px; }
    .recent-clear { min-height: 32px; padding: 0 9px; }

    .qr-box { padding: var(--s5) var(--s4) var(--s4); }
    .qr-title { margin-bottom: var(--s3); }
    .qr-close { top: var(--s2); right: var(--s2); width: 40px; height: 40px; font-size: 24px; }
    #qrcode-container { margin-bottom: var(--s3); }
    .qr-download { min-height: 48px; }

    .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
    .links-cards { display: grid !important; }
    .table-wrap { display: none !important; }
    .controls { gap: var(--s2); }
    .toolbar-row { flex-wrap: wrap; }
    /* Filter chips stretch the full card in equal thirds (aligned with the
       duo row below) instead of hugging the left edge. */
    .chips { flex: 1 1 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
    .toolbar-row .chips .chip { flex: 1; }
    /* Equal-width duo row: Refresh + Export get their own full-width line,
       evenly split and centered — never an orphaned or floaty second line. */
    .toolbar-actions { flex: 1 1 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
    .toolbar-row .toolbar-actions .btn { flex: 1; }
    .status { font-size: var(--fs-sm); }

    footer {
        font-size: var(--fs-sm);
        padding: var(--s4) var(--s3) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
    }
}