.rgb-navigation { display: flex; flex-wrap: wrap; gap: 18px; padding: 20px 0; font-family: sans-serif; }
.rgb-navigation a { color: #0fab7c; font-weight: 600; }
.rgb-copy-status { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #075c43; color: white; padding: 12px 20px; border-radius: 8px; z-index: 2000; max-width: calc(100% - 24px); }
.outputText, #outputText { overflow-wrap: anywhere; }
@media (max-width: 767px) {
    body { padding: 0 16px; }
    .header { align-items: center; }
    .header > img { width: 64px; height: 64px; }
    .header h1 { font-size: 23px; }
    .header p { font-size: 12px; }
    .output-bottom, div[style*="flex-direction: row"] { flex-wrap: wrap; gap: 12px !important; }
    .col-md-10, .col-md-2, .col-md-3 { padding-left: 0; padding-right: 0; }
    #content, .content { overflow-wrap: anywhere; }
    #coloredNick, .coloredNick { font-size: 3rem; }
    .modal-dialog { margin: 12px; }
    footer { margin-top: 50px; }
}
@media (prefers-reduced-motion: reduce) { #title, .title { animation: none; } }