@media (max-width: 600px) {
    th { background: transparent; color: #374151; font-weight: 600; padding: 8px 0; border-right: none; }
    .popup { position: fixed; left: 8px; right: 8px; top: 30%; }
}

@media (max-width: 600px) {
    body { padding: 0 0.5rem; margin: 1rem; }
    .card { padding: 1rem; }
    .input-group { flex-direction: column; gap: 8px; }
    .input-group select, .input-group input, .input-group button { width: 100%; box-sizing: border-box; }
    .input-group span { display: none; }
    .result { margin-top: 1rem; }

    table { border: 0; }
    table tr { display: block; border-bottom: 1px solid #eee; padding: 8px 0; }
    table th { display: block; width: 100%; margin-bottom: 6px; background: transparent; padding: 0; }
    table td { display: block; width: 100%; padding: 0; }

    td.bin-td { flex-direction: column; align-items: stretch; }
    .binary { display: block; max-width: 100%; overflow-x: auto; padding-bottom: 6px; }
    .copy-btn { margin-left: 0; margin-top: 6px; }
}