:root {
  color-scheme: dark;
  --qh-bg: #080c11;
  --qh-panel: rgba(17, 22, 30, 0.92);
  --qh-panel-2: rgba(24, 31, 41, 0.88);
  --qh-line: rgba(180, 197, 218, 0.18);
  --qh-line-strong: rgba(180, 197, 218, 0.32);
  --qh-text: #f4f7fa;
  --qh-muted: #aeb8c5;
  --qh-cyan: #35daf7;
  --qh-amber: #ffc84a;
  --qh-radius: 14px;
}

html[data-theme="light"] {
  color-scheme: light;
  --qh-bg: #eef3f7;
  --qh-panel: rgba(255, 255, 255, 0.98);
  --qh-panel-2: rgba(247, 250, 252, 0.98);
  --qh-line: rgba(19, 38, 58, 0.2);
  --qh-line-strong: rgba(19, 38, 58, 0.32);
  --qh-text: #111827;
  --qh-muted: #344256;
  --qh-cyan: #0f5f91;
  --qh-amber: #8a5a00;
}

html,
body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
  color: var(--qh-text) !important;
  background:
    radial-gradient(900px 520px at 80% 0%, rgba(53, 218, 247, 0.08), transparent 58%),
    radial-gradient(760px 500px at 10% 10%, rgba(255, 200, 74, 0.07), transparent 60%),
    linear-gradient(180deg, #0e141b 0%, var(--qh-bg) 100%) !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(900px 520px at 80% 0%, rgba(49, 124, 170, 0.13), transparent 58%),
    radial-gradient(760px 500px at 10% 10%, rgba(210, 151, 48, 0.11), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--qh-bg) 100%) !important;
}

main,
aside,
.wrap,
.layout > main,
.page,
.hero,
.hero-panel,
.panel,
.card,
.quick-card,
.meta-card,
.source,
.playlist-card,
.thumb-card,
.sidebar-intro,
.sidebar-playlist,
.profile-panel,
.profile-body,
.content-card,
.side-card {
  border-color: var(--qh-line) !important;
  background: linear-gradient(180deg, var(--qh-panel-2), var(--qh-panel)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28) !important;
  color: var(--qh-text) !important;
}

html[data-theme="light"] main,
html[data-theme="light"] aside,
html[data-theme="light"] .wrap,
html[data-theme="light"] .layout > main,
html[data-theme="light"] .page,
html[data-theme="light"] .hero,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .quick-card,
html[data-theme="light"] .meta-card,
html[data-theme="light"] .source,
html[data-theme="light"] .playlist-card,
html[data-theme="light"] .thumb-card,
html[data-theme="light"] .sidebar-intro,
html[data-theme="light"] .sidebar-playlist,
html[data-theme="light"] .profile-panel,
html[data-theme="light"] .profile-body,
html[data-theme="light"] .content-card,
html[data-theme="light"] .side-card {
  background: linear-gradient(180deg, #ffffff, #f7fafc) !important;
  box-shadow: 0 16px 38px rgba(31, 50, 73, 0.12) !important;
}

.layout,
.wrap {
  width: min(1280px, calc(100% - 32px)) !important;
}

.profile-cover,
.hero-media {
  background:
    linear-gradient(180deg, rgba(7, 10, 14, 0.05), rgba(7, 10, 14, 0.78)),
    url('/assets/img/qwertyhouse-header-site.png?v=20260426-user-banner') center / cover no-repeat !important;
  border-color: var(--qh-line) !important;
}

html[data-theme="light"] .profile-cover,
html[data-theme="light"] .hero-media {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(12, 23, 37, 0.42)),
    url('/assets/img/qwertyhouse-header-site.png?v=20260426-user-banner') center / cover no-repeat !important;
}

.profile-cover {
  min-height: 170px !important;
}

.hero-banner {
  content: url('/assets/img/qwertyhouse-header-site.png?v=20260426-user-banner');
  filter: saturate(0.95) brightness(0.86);
}

html[data-theme="light"] .hero-banner {
  filter: saturate(0.98) brightness(1.02);
}

.avatar,
.profile-avatar,
.hero-avatar {
  border-color: rgba(244, 247, 250, 0.72) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36) !important;
}

.avatar-home-link,
.profile-avatar-link {
  border-radius: 999px;
}

.avatar-home-link:focus-visible,
.profile-avatar-link:focus-visible {
  outline: 3px solid var(--qh-cyan);
  outline-offset: 5px;
}

.profile-avatar-link .profile-avatar,
.avatar-home-link .avatar {
  display: block;
}

h1,
h2,
h3,
.section-title,
.card-head h2,
.video-head strong,
.name {
  color: var(--qh-text) !important;
  letter-spacing: 0 !important;
}

h1 {
  font-weight: 850 !important;
}

p,
.lead,
.bio,
.sub,
.section-note,
.profile-handle,
.meta,
.status,
.form-note,
.card-foot,
.sidebar-intro p,
.sidebar-playlist p,
.panel p {
  color: var(--qh-muted) !important;
}

.kicker,
.eyebrow,
.nav-title,
.embed-title,
.subhead,
.hero-social-preview .label {
  color: var(--qh-cyan) !important;
}

a {
  color: var(--qh-cyan);
}

.btn,
.hero-btn,
.profile-tab,
.nav-list a,
.link,
.top-link,
.pager-link,
.mini-btn,
.mini-btn-secondary,
.submit-btn,
.captcha-refresh,
.pill,
.circle,
.list a,
.list .item-link,
.video-fallback,
.theme-toggle select {
  border-color: var(--qh-line-strong) !important;
  background: rgba(17, 22, 30, 0.88) !important;
  color: var(--qh-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.btn:hover,
.btn:focus-visible,
.hero-btn:hover,
.hero-btn:focus-visible,
.profile-tab:hover,
.profile-tab:focus-visible,
.nav-list a:hover,
.nav-list a:focus-visible,
.link:hover,
.link:focus-visible,
.top-link:hover,
.top-link:focus-visible,
.submit-btn:hover,
.submit-btn:focus-visible {
  border-color: rgba(53, 218, 247, 0.58) !important;
  background: rgba(29, 39, 51, 0.94) !important;
}

.hero-btn-primary,
.submit-btn {
  border-color: rgba(53, 218, 247, 0.52) !important;
  background: linear-gradient(135deg, rgba(53, 218, 247, 0.14), rgba(17, 22, 30, 0.92)) !important;
}

html[data-theme="light"] .btn,
html[data-theme="light"] .hero-btn,
html[data-theme="light"] .profile-tab,
html[data-theme="light"] .nav-list a,
html[data-theme="light"] .link,
html[data-theme="light"] .top-link,
html[data-theme="light"] .pager-link,
html[data-theme="light"] .mini-btn,
html[data-theme="light"] .mini-btn-secondary,
html[data-theme="light"] .submit-btn,
html[data-theme="light"] .captcha-refresh,
html[data-theme="light"] .pill,
html[data-theme="light"] .circle,
html[data-theme="light"] .list a,
html[data-theme="light"] .list .item-link,
html[data-theme="light"] .video-fallback,
html[data-theme="light"] .theme-toggle select {
  background: #ffffff !important;
  color: var(--qh-text) !important;
}

html[data-theme="light"] .hero-btn-primary,
html[data-theme="light"] .submit-btn {
  background: #0f5f91 !important;
  color: #ffffff !important;
  border-color: #0b4d75 !important;
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] .hero-btn:hover,
html[data-theme="light"] .hero-btn:focus-visible,
html[data-theme="light"] .profile-tab:hover,
html[data-theme="light"] .profile-tab:focus-visible,
html[data-theme="light"] .nav-list a:hover,
html[data-theme="light"] .nav-list a:focus-visible,
html[data-theme="light"] .link:hover,
html[data-theme="light"] .link:focus-visible,
html[data-theme="light"] .top-link:hover,
html[data-theme="light"] .top-link:focus-visible,
html[data-theme="light"] .submit-btn:hover,
html[data-theme="light"] .submit-btn:focus-visible {
  background: #e8f2f8 !important;
  border-color: #0f5f91 !important;
}

html[data-theme="light"] .hero-btn-primary:hover,
html[data-theme="light"] .hero-btn-primary:focus-visible,
html[data-theme="light"] .submit-btn:hover,
html[data-theme="light"] .submit-btn:focus-visible {
  background: #0b4d75 !important;
  color: #ffffff !important;
}

.icon,
.count-pill {
  background: rgba(53, 218, 247, 0.12) !important;
  color: var(--qh-cyan) !important;
}

.field input,
.field textarea,
.search-row input,
.search-row select,
.search-row button,
input,
textarea,
select {
  border-color: var(--qh-line-strong) !important;
  background: rgba(10, 15, 21, 0.9) !important;
  color: var(--qh-text) !important;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .search-row input,
html[data-theme="light"] .search-row select,
html[data-theme="light"] .search-row button,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff !important;
  color: var(--qh-text) !important;
}

.field input::placeholder,
.field textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--qh-muted) 72%, transparent) !important;
}

.theme-toggle {
  border-color: var(--qh-line) !important;
  background: rgba(17, 22, 30, 0.86) !important;
}

html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.92) !important;
}

.topbar-wrap {
  width: min(1078px, calc(100% - 28px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.topbar {
  justify-content: flex-start !important;
  align-items: center !important;
}

.top-left {
  margin-right: 10px !important;
}

.top-right {
  margin-left: 0 !important;
}

.status,
.empty {
  border-color: var(--qh-line) !important;
  background: rgba(10, 15, 21, 0.72) !important;
  color: var(--qh-muted) !important;
}

html[data-theme="light"] .status,
html[data-theme="light"] .empty {
  background: #ffffff !important;
}

@media (max-width: 900px) {
  body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .layout,
  .wrap {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}

.qh-site-nav {
  width: min(1260px, calc(100% - 32px));
  margin: 0 auto 18px;
}

.qh-site-nav-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.qh-site-nav-card {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 16px 22px;
  border: 1px solid var(--qh-line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(24, 31, 41, 0.82), rgba(13, 18, 25, 0.9));
  box-shadow: inset 0 0 0 1px rgba(228, 238, 252, 0.18);
  color: var(--qh-text) !important;
  text-decoration: none !important;
}

.qh-site-nav a,
.qh-site-nav strong {
  margin-right: 0 !important;
}

.qh-site-nav-card span {
  color: var(--qh-text);
  font-size: 1rem;
  font-weight: 800;
}

.qh-site-nav-card small {
  color: var(--qh-muted);
  font-size: 0.86rem;
}

.qh-site-nav-placeholder {
  cursor: default;
}

.qh-site-nav-card:hover,
.qh-site-nav-card:focus-visible {
  border-color: rgba(53, 218, 247, 0.58);
  background: linear-gradient(180deg, rgba(29, 39, 51, 0.94), rgba(13, 18, 25, 0.95));
}

.qh-site-nav-card[aria-current="page"] {
  border-color: rgba(53, 218, 247, 0.58);
}

html[data-theme="light"] .qh-site-nav-card {
  border-color: rgba(19, 38, 58, 0.2);
  background: linear-gradient(180deg, #ffffff, #f7fafc);
  box-shadow: inset 0 0 0 1px rgba(15, 95, 145, 0.18);
}

@media (max-width: 1100px) {
  .qh-site-nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .qh-site-nav {
    width: min(100% - 24px, 1260px);
  }

  .qh-site-nav-list {
    grid-template-columns: 1fr;
  }
}


.qh-layout-with-now {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.wrap .qh-now-sidebar {
  align-self: start;
}

.qh-now-sidebar,
.qh-now-card,
.qh-stream-panel {
  border: 1px solid var(--qh-line);
  border-radius: var(--qh-radius);
  background: linear-gradient(180deg, var(--qh-panel-2), var(--qh-panel));
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
  color: var(--qh-text);
}

.qh-now-sidebar {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 20px;
}

.qh-now-sidebar h2 {
  margin: 0;
  color: var(--qh-text);
  font-size: 1.65rem;
}

.qh-now-card {
  padding: 18px;
}

.qh-now-label {
  display: block;
  margin-bottom: 12px;
  color: var(--qh-cyan);
  font-size: 0.82rem;
  font-weight: 850;
}

.qh-now-card p {
  margin: 0 0 12px;
  color: var(--qh-text);
  font-size: 0.95rem;
  line-height: 1.55;
}

.qh-now-card a {
  color: var(--qh-cyan) !important;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none !important;
}

.qh-stream-panel {
  overflow: hidden;
}

.qh-stream-panel-head {
  display: grid;
  gap: 8px;
  padding: 18px 18px 14px;
  color: var(--qh-text) !important;
  text-decoration: none !important;
}

.qh-stream-panel-head span,
.qh-twitch-embed-label {
  color: #9b4cff;
  font-size: 0.82rem;
  font-weight: 850;
}

.qh-stream-panel-head strong {
  color: var(--qh-text);
  font-size: 1rem;
}

.qh-stream-panel-head small {
  color: var(--qh-muted);
}

.qh-twitch-player {
  border-top: 1px solid var(--qh-line);
  padding: 14px;
}

.qh-twitch-embed-label {
  display: block;
  margin: 0 0 10px;
}

.qh-twitch-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 176px;
  border: 0;
  border-radius: 10px;
  background: #05070a;
}

@media (max-width: 980px) {
  .qh-layout-with-now,
  .wrap {
    grid-template-columns: 1fr !important;
  }
}