/* final responsive overrides */
[hidden] { display: none !important; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
/* select */
select:-webkit-autofill {
  -webkit-text-fill-color: #eef1fb;
  caret-color: #eef1fb;
  -webkit-background-clip: text;
  background-clip: text;
  box-shadow: 0 0 0 100px #16182b inset !important;
  transition: background-color 100000s ease-in-out 0s;
}

/* light theme */
body.light-theme input:-webkit-autofill,
body.light-theme input:-webkit-autofill:hover,
body.light-theme input:-webkit-autofill:focus,
body.light-theme input:-webkit-autofill:active,
body.light-theme textarea:-webkit-autofill,
body.light-theme select:-webkit-autofill,
/* input */
html[data-theme="light"] input:-webkit-autofill {
  -webkit-text-fill-color: #16182b;
  caret-color: #16182b;
  box-shadow: 0 0 0 100px #ffffff inset !important;
}

input:autofill,
/* textarea */
textarea:autofill {
  -webkit-text-fill-color: #eef1fb;
  box-shadow: 0 0 0 100px #16182b inset !important;
}

body.light-theme input:autofill,
/* input */
html[data-theme="light"] input:autofill {
  -webkit-text-fill-color: #16182b;
  box-shadow: 0 0 0 100px #ffffff inset !important;
}

html, body { max-width: 100%; overflow-x: hidden; }

img, svg, video, canvas, picture { max-width: 100%; }

.detail-panel { max-width: min(720px, calc(100vw - 1.5rem)); }
.detail-content { max-width: 100%; overflow-wrap: anywhere; }


.page-shell, .auth-layout, .hm-wrap { min-width: 0; }

table { max-width: 100%; }

pre, code { overflow-wrap: anywhere; }


/* site actions */
.site-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}


.site-actions .hdr-btn,
.site-actions .theme-switch-wrapper {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.site-actions .theme-switch-wrapper {
  width: 46px;
  overflow: hidden;
}


.site-actions #theme-toggle-button {
  width: 66px;
  transform: scale(0.68);
  transform-origin: center;
  margin-inline: -10px;
}


.hdr-settings { position: relative; }

/* hdr panel */
.hdr-panel {
  inset-inline: auto;
  left: 0;
  right: auto;
  width: min(290px, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
}

/* mobile 768px */
@media (max-width: 768px) {
  .hdr-panel {
    left: 0;
    right: auto;
    width: min(290px, calc(100vw - 1.25rem));
    max-width: calc(100vw - 1.25rem);
  }
}


[dir="ltr"] .hdr-panel,
/* ad top */
.ad-top-right .hdr-panel {
  left: auto;
  right: 0;
}


/* mobile 768px */
@media (max-width: 768px) {
  .site-header {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: start !important;
    gap: 0.45rem 0.6rem !important;
    padding: 0.5rem 0.85rem !important;
  }

  .site-header .logo {
    justify-content: flex-start !important;
    font-size: 1.05rem !important;
    gap: 0.45rem !important;
  }

  .site-header .logo-image { width: 30px !important; height: 30px !important; }

  .site-header .site-actions { margin-inline-start: auto; }

  .main-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
  }

  .main-nav::-webkit-scrollbar { display: none; }

  .main-nav a {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0.34rem 0.8rem !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
  }
}


/* mobile 768px */
@media (max-width: 768px) {
  .page-topbar,
  .auth-topbar {
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    padding: 0.6rem 0.85rem;
  }

  .page-nav {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-nav::-webkit-scrollbar { display: none; }

  .page-nav a {
    flex: 0 0 auto;
    padding: 0.34rem 0.8rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .page-topbar .site-actions,
  .auth-topbar .site-actions { margin-inline-start: auto; }
}


/* mobile 560px */
@media (max-width: 560px) {
  .hm-header-actions { gap: 0.4rem; }
  .hm-cta-sm { height: 38px; box-sizing: border-box; }
}


/* mobile 560px */
@media (max-width: 560px) {
  .review-actions,
  .hm-hero-buttons,
  .hm-band-actions { flex-wrap: wrap; }

  .review-actions .btn,
  .hm-band-actions .hm-btn { width: 100%; justify-content: center; }
}

/* mobile 380px */
@media (max-width: 380px) {
  .site-header { padding-inline: 0.7rem !important; }
  .logo { font-size: 1rem; }
  .site-actions { gap: 0.3rem; }
  .site-actions .theme-switch-wrapper { width: 42px; }
}

@supports (padding: max(0px)) {
  .input-area,
  .hm-footer,
  .site-footer,
  .page-footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}