.quality-picker { position: relative; flex: none; }
.quality-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 86px; min-height: 39px; padding: 8px 11px; border: 1px solid #ffd57360; border-radius: 11px; background: linear-gradient(135deg,#a2417040,#6d4aa740); color: #fff8dc; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.quality-button:hover,.quality-button[aria-expanded="true"] { border-color: #ffd573c0; background-color: #ffffff18; }
.quality-button span:last-child { color: #ffd45c; }
.quality-menu { position: absolute; z-index: 50; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 190px; padding: 11px; border: 1px solid #eebd6480; border-radius: 13px; background: #3e1245; box-shadow: 0 15px 35px #1d052b77; }
.quality-menu[hidden] { display: none; }
.quality-menu strong { display: block; padding: 4px 7px 9px; color: #f8d6df; font-size: 10px; letter-spacing: .7px; }
.quality-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #fff8dc; text-align: left; font-size: 11px; cursor: pointer; }
.quality-menu button:hover,.quality-menu button[aria-checked="true"] { background: #ffd37325; color: #ffdc70; }
.header-nav .header-vk { padding: 8px 10px; border: 1px solid #ffcf6955; border-radius: 9px; color: #ffdf87; }
.header-nav .header-vk:hover { border-color: #ffd373; background: #ffffff18; }
.hero h1 { font-style: normal; transform: none; animation: sloganGlow 5s ease-in-out infinite; text-shadow: 2px 3px 0 #581143, -2px -2px 0 #581143, 0 0 12px #ffcc67a0, 0 0 23px #ffb63255; }
@keyframes sloganGlow { 50% { text-shadow: 2px 3px 0 #581143, -2px -2px 0 #581143, 0 0 18px #ffda79ce, 0 0 32px #ffb63280; } }
footer { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; grid-template-rows: 43px auto; column-gap: 14px; row-gap: 8px; align-items: center; }
footer .footer-brand { grid-column: 1; grid-row: 1; position: relative; display: block; width: 82px; height: 43px; }
footer .footer-brand img { position: absolute; width: 100%; height: auto; top: 50%; left: 0; transform: translateY(-50%); filter: drop-shadow(0 2px 4px #48144944); }
footer .footer-copyright { grid-column: 3; grid-row: 1; justify-self: end; flex-basis: auto; white-space: nowrap; font-size: 11px; font-weight: 700; }
footer .registration { grid-column: 1 / -1; grid-row: 2; justify-self: center; flex-basis: auto; width: 100%; margin: 0; text-align: center; white-space: nowrap; font-size: 7.5px; line-height: 1.3; letter-spacing: -.08px; }
@media (max-width: 1000px) { .header-inner { grid-template-columns: minmax(170px,1fr) auto; } .header-nav { grid-column: 1 / -1; justify-self: center; } }
@media (max-width: 760px) { .header-inner { grid-template-columns: 1fr; } .header-nav { grid-column: 1; gap: 13px; font-size: 10px; } .quality-menu { left: 0; transform: none; } footer { grid-template-columns: 70px minmax(0,1fr) auto; row-gap: 11px; } footer .footer-brand { width: 66px; } footer .footer-copyright { flex-basis: auto; font-size: 10px; } footer .registration { font-size: clamp(3px,.75vw,7.5px); letter-spacing: -.1px; } }
@media (max-width: 440px) { .header-nav { gap: 8px; font-size: 9px; } .header-nav .header-vk { padding: 7px 6px; } }
@media (prefers-reduced-motion: reduce) { .hero h1 { animation: none; } }

.history-search-modes { display: flex; flex-wrap: wrap; gap: 8px 16px; width: 100%; margin: 0; padding: 0; border: 0; }
.history-search-modes legend { margin-bottom: 5px; color: #72546e; font-size: 12px; }
.history-search .history-search-modes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.history-search-modes input { accent-color: #5a1b55; }
.history-search #history-clock-label[hidden] { display: none; }
.history-results { list-style: none; margin: 0; padding: 0; max-height: 24vh; overflow-y: auto; }
.history-results li { display: grid; grid-template-columns: 105px 1fr; gap: 12px; padding: 8px 3px; border-bottom: 1px solid #6c2a5330; font-size: 12px; }
.history-results time { color: #8b6583; }
@media (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body.permyak-background::before { background-position: center top; }
  .section, footer { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; }
  .hero, .header, .header-inner, main { max-width: 100%; }
  .history-dialog { max-width: calc(100vw - 20px); }
  .history-results li { grid-template-columns: 85px 1fr; }
}